/* Carnet de Bord — site marketing (inspiré NavXL, palette app GPS) * * Repères responsive (à garder alignés avec marketing.js, max-width 1025px = nav pleine) * — Mobile portrait / petits téléphones : typiquement ≤ 600 px * — Tablette & grands téléphones paysage : ~ 601 px – 1024 px (nav déroulante, grilles adaptées) * — PC & tablettes larges paysage : ≥ 1025 px (barre de navigation complète) */ :root { color-scheme: dark; --cdb-bg: #040913; --cdb-bg-elevated: #0e1726; --cdb-bg-card: #12243d; --cdb-surface: #142742; --cdb-text: #f0f6fc; --cdb-muted: #8ba3c0; --cdb-accent: #26c6da; --cdb-accent-dim: rgba(38, 198, 218, 0.15); --cdb-blue: #1e88ff; --cdb-cta: #ff8a00; --cdb-cta-hover: #ff9f2e; --cdb-border: rgba(255, 255, 255, 0.08); --cdb-glass: rgba(14, 23, 38, 0.72); --cdb-on-cta: #0a0f14; --cdb-on-primary: #041018; --cdb-store-tile-bg: rgba(10, 15, 20, 0.92); --cdb-store-tile-border: rgba(255, 255, 255, 0.1); --cdb-store-tile-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); --cdb-radius: 16px; --cdb-radius-lg: 24px; --cdb-shadow: 0 24px 48px rgba(0, 0, 0, 0.45); --cdb-nav-h: 72px; --font-display: 'Orbitron', system-ui, sans-serif; --font-body: 'DM Sans', system-ui, sans-serif; /* Large screens: fluid max width + readable measure */ --cdb-container-max: 1200px; /* Hub / profil / emplois connectés : plus large que la landing marketing */ --cdb-container-max-app: min(94vw, 1780px); --cdb-container-pad-x: clamp(1rem, 4vw, 2rem); --cdb-prose-max: 800px; /* Accents marketing (tuiles télécharger) */ --cdb-tile-play: #0f9d58; --cdb-tile-apk: #ab47bc; } /* Thème clair (persisté via data-theme sur ) */ html[data-theme="light"] { color-scheme: light; --cdb-bg: #eef2f8; --cdb-bg-elevated: #ffffff; --cdb-bg-card: #f4f7fc; --cdb-surface: #e8eef6; --cdb-text: #0c1524; --cdb-muted: #4a5d72; --cdb-accent: #0a9eb4; --cdb-accent-dim: rgba(10, 158, 180, 0.12); --cdb-blue: #1565c0; --cdb-cta: #e65100; --cdb-cta-hover: #ff6f00; --cdb-border: rgba(12, 21, 36, 0.1); --cdb-glass: rgba(255, 255, 255, 0.82); --cdb-on-cta: #0c0c0c; --cdb-on-primary: #031018; --cdb-store-tile-bg: rgba(255, 255, 255, 0.95); --cdb-store-tile-border: rgba(12, 21, 36, 0.12); --cdb-store-tile-shadow: 0 8px 28px rgba(15, 35, 60, 0.12); --cdb-shadow: 0 20px 40px rgba(15, 35, 60, 0.12); } html[data-theme="light"] .cdb-section--alt { background: linear-gradient(180deg, transparent, rgba(232, 238, 246, 0.92) 22%, rgba(232, 238, 246, 0.92) 78%, transparent); } html[data-theme="light"] .cdb-cta-band { background: linear-gradient(135deg, rgba(10, 158, 180, 0.1), rgba(21, 101, 192, 0.07)); border-color: rgba(10, 158, 180, 0.2); } html[data-theme="light"] .cdb-device-frame { background: linear-gradient(165deg, rgba(255, 255, 255, 0.65) 0%, transparent 42%), linear-gradient(205deg, #f0f4fb 0%, #dce6f4 50%, #cfdcee 100%); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, 0.05), 0 22px 44px rgba(15, 35, 60, 0.12), 0 0 0 1px rgba(15, 35, 60, 0.08); } html[data-theme="light"] .cdb-device-frame__display { box-shadow: inset 0 0 0 1px rgba(15, 35, 60, 0.08), inset 0 12px 32px rgba(255, 255, 255, 0.06); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .cdb-body [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; } .cdb-store-tile, .cdb-store-tile::after, .cdb-store-tile__arrow { transition: none !important; } .cdb-bg-mesh, .cdb-bg-grid { transition: none !important; } } body.cdb-body { margin: 0; font-family: var(--font-body); font-size: clamp(1rem, 0.22vw + 0.94rem, 1.0625rem); line-height: 1.65; color: var(--cdb-text); background: var(--cdb-bg); overflow-x: hidden; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } .cdb-body a { color: inherit; } /* Fond animé */ .cdb-bg-mesh { position: fixed; inset: 0; z-index: -2; background: radial-gradient(ellipse 80% 50% at 10% -10%, rgba(38, 198, 218, 0.18), transparent 50%), radial-gradient(ellipse 60% 40% at 90% 20%, rgba(30, 136, 255, 0.12), transparent 45%), radial-gradient(ellipse 50% 30% at 50% 100%, rgba(255, 138, 0, 0.08), transparent 40%), var(--cdb-bg); transition: background 0.35s ease; } html[data-theme="light"] .cdb-bg-mesh { background: radial-gradient(ellipse 70% 45% at 12% 0%, rgba(38, 198, 218, 0.14), transparent 52%), radial-gradient(ellipse 55% 40% at 88% 15%, rgba(30, 136, 255, 0.1), transparent 48%), radial-gradient(ellipse 45% 28% at 50% 100%, rgba(255, 138, 0, 0.06), transparent 42%), var(--cdb-bg); } .cdb-bg-grid { position: fixed; inset: 0; z-index: -1; opacity: 0.35; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black 0%, transparent 85%); transition: opacity 0.35s ease, background-image 0.35s ease; } html[data-theme="light"] .cdb-bg-grid { opacity: 0.55; background-image: linear-gradient(rgba(12, 21, 36, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(12, 21, 36, 0.06) 1px, transparent 1px); } /* Nav */ .cdb-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; box-sizing: border-box; height: calc(var(--cdb-nav-h) + env(safe-area-inset-top, 0px)); display: flex; align-items: center; padding: env(safe-area-inset-top, 0px) var(--cdb-container-pad-x) 0; background: var(--cdb-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--cdb-border); transition: box-shadow 0.3s; } .cdb-nav.is-scrolled { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); } .cdb-nav__inner { width: 100%; max-width: var(--cdb-container-max); margin: 0 auto; /* Flex : la zone liens prend l’espace restant et centre les entrées (évite le « trou » marque ↔ liens) */ display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(0.5rem, 1.5vw, 1rem); min-height: var(--cdb-nav-h); } .cdb-brand { position: relative; z-index: 10; flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.65rem; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; color: var(--cdb-text); } .cdb-brand span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Zone droite : actions + bouton menu (masqué en desktop) */ .cdb-nav__end { position: relative; z-index: 10; display: flex; align-items: center; justify-content: flex-end; gap: 0.65rem; min-width: 0; flex: 0 0 auto; } .cdb-brand img { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 4px 12px rgba(38, 198, 218, 0.25); } .cdb-nav__links { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex: 1 1 auto; flex-wrap: nowrap; gap: 0; column-gap: clamp(0.45rem, 1vw, 1rem); list-style: none; margin: 0; padding: 0 0.25rem; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } .cdb-nav__links::-webkit-scrollbar { display: none; } .cdb-nav__links li { flex-shrink: 0; } .cdb-nav__links a { text-decoration: none; color: var(--cdb-muted); font-weight: 500; font-size: 0.9rem; transition: color 0.2s; white-space: nowrap; } .cdb-nav__links a:hover { color: var(--cdb-text); } .cdb-nav__links a.is-active { color: var(--cdb-accent); font-weight: 600; position: relative; } .cdb-nav__links a.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -0.2rem; height: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--cdb-accent), var(--cdb-blue, #1e88ff)); } .cdb-brand.is-active span { color: var(--cdb-accent); } .cdb-nav__actions .cdb-btn--ghost.is-active { border-color: rgba(38, 198, 218, 0.55); color: var(--cdb-accent); box-shadow: 0 0 0 1px rgba(38, 198, 218, 0.2); } .cdb-nav__logout-form { display: inline; margin: 0; } /* Tablette / laptop étroit : éviter que la barre ne déborde avant le breakpoint hamburger */ @media (max-width: 1160px) and (min-width: 1025px) { .cdb-nav__inner { gap: 0.65rem; } .cdb-nav__links { column-gap: clamp(0.35rem, 0.85vw, 0.75rem); } .cdb-nav__links a { font-size: 0.82rem; } } /* Desktop : barre plus dense (label langue masqué dans la nav, boutons plus petits) */ @media (min-width: 1025px) { .cdb-nav__end .cdb-locale__label { display: none; } .cdb-nav__end .cdb-locale__select { max-width: 6.5rem; padding: 0.3rem 0.4rem; font-size: 0.76rem; } .cdb-nav__actions { gap: 0.4rem; } .cdb-nav__actions .cdb-btn--sm { padding: 0.35rem 0.7rem; font-size: 0.76rem; } .cdb-nav__actions .cdb-btn--cta.cdb-btn--sm { box-shadow: 0 4px 14px rgba(255, 138, 0, 0.26); } .cdb-nav__actions .cdb-btn--cta.cdb-btn--sm:hover { box-shadow: 0 6px 18px rgba(255, 138, 0, 0.36); } .cdb-nav__end .cdb-theme-toggle { width: 2.2rem; height: 2.2rem; border-radius: 10px; } .cdb-nav__end .cdb-theme-toggle__icon svg { width: 17px; height: 17px; } } .cdb-nav__actions { display: flex; align-items: center; gap: 0.75rem; } .cdb-nav-toggle { display: none; background: none; border: 1px solid var(--cdb-border); color: var(--cdb-text); border-radius: 10px; padding: 0.5rem 0.65rem; cursor: pointer; line-height: 0; touch-action: manipulation; position: relative; z-index: 11; } .cdb-nav-toggle__icon { display: block; } /* Thème / hamburger : au-dessus de la zone liens (toutes largeurs) */ .cdb-nav__end .cdb-theme-toggle { position: relative; z-index: 11; touch-action: manipulation; } body.cdb-nav-open { overflow: hidden; } @media (min-width: 1025px) { body.cdb-nav-open { overflow: unset; } } /* Boutons */ .cdb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 1.6rem; border-radius: 999px; font-family: var(--font-body); font-weight: 600; font-size: 1rem; text-decoration: none; border: none; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; white-space: nowrap; } .cdb-btn--cta { background: linear-gradient(135deg, var(--cdb-cta), #e67300); color: var(--cdb-on-cta); box-shadow: 0 8px 24px rgba(255, 138, 0, 0.35); } .cdb-btn--cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255, 138, 0, 0.45); background: linear-gradient(135deg, var(--cdb-cta-hover), var(--cdb-cta)); } .cdb-btn--primary { background: linear-gradient(135deg, var(--cdb-accent), var(--cdb-blue)); color: var(--cdb-on-primary); box-shadow: 0 8px 24px rgba(38, 198, 218, 0.3); } .cdb-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(38, 198, 218, 0.4); } .cdb-btn--ghost { background: transparent; color: var(--cdb-text); border: 1px solid var(--cdb-border); } .cdb-btn--ghost:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.15); } .cdb-btn--lg { padding: 1rem 2rem; font-size: 1.05rem; } .cdb-btn--block { width: 100%; } /* Layout page */ .cdb-main { padding-top: calc(var(--cdb-nav-h) + env(safe-area-inset-top, 0px)); } .cdb-container { width: 100%; max-width: var(--cdb-container-max); margin: 0 auto; padding: 0 var(--cdb-container-pad-x); } .cdb-container--app { max-width: var(--cdb-container-max-app); } /* Formulaires « wide » : utiliser la largeur du conteneur (marketing reste ~920px) */ .cdb-container--app .cdb-panel--wide, .cdb-admin-shell__body .cdb-panel--wide { max-width: 100%; } .cdb-section { padding: clamp(4rem, 10vw, 7rem) 0; } .cdb-section--alt { background: linear-gradient(180deg, transparent, rgba(14, 23, 38, 0.6) 20%, rgba(14, 23, 38, 0.6) 80%, transparent); border-top: 1px solid var(--cdb-border); border-bottom: 1px solid var(--cdb-border); } /* Hero NavXL-style */ .cdb-hero { padding: clamp(3rem, 8vw, 5rem) 0 clamp(4rem, 10vw, 6rem); } .cdb-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .cdb-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1rem; border-radius: 999px; background: var(--cdb-accent-dim); border: 1px solid rgba(38, 198, 218, 0.35); color: var(--cdb-accent); font-size: 0.85rem; font-weight: 600; margin-bottom: 1.25rem; } .cdb-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cdb-accent); box-shadow: 0 0 12px var(--cdb-accent); } .cdb-hero h1 { font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 1.25rem; } .cdb-hero h1 .cdb-highlight { background: linear-gradient(90deg, var(--cdb-accent), var(--cdb-blue)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cdb-hero__lead { color: var(--cdb-muted); font-size: clamp(1.05rem, 0.35vw + 0.98rem, 1.2rem); max-width: min(36rem, 100%); margin: 0 0 2rem; } .cdb-hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem; } .cdb-hero__stats { display: flex; flex-wrap: wrap; gap: 2rem; } .cdb-stat strong { display: block; font-family: var(--font-display); font-size: 1.75rem; color: var(--cdb-accent); } .cdb-stat span { font-size: 0.9rem; color: var(--cdb-muted); } /* Mockup téléphone */ .cdb-mockup { position: relative; display: flex; justify-content: center; } .cdb-mockup__frame { position: relative; width: min(320px, 90vw); padding: 12px; border-radius: 36px; background: linear-gradient(145deg, rgba(38, 198, 218, 0.4), rgba(30, 136, 255, 0.2)); box-shadow: var(--cdb-shadow), 0 0 80px rgba(38, 198, 218, 0.15); } .cdb-mockup__screen { border-radius: 28px; overflow: hidden; background: var(--cdb-bg-elevated); aspect-ratio: 9/19; display: flex; flex-direction: column; } .cdb-mockup__screen img { width: 100%; height: 100%; object-fit: cover; } .cdb-mockup__ui { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; gap: 0.75rem; } .cdb-mockup__bar { height: 8px; border-radius: 4px; background: var(--cdb-surface); } .cdb-mockup__bar--accent { width: 70%; background: linear-gradient(90deg, var(--cdb-accent), var(--cdb-blue)); } .cdb-mockup__bar--short { width: 45%; } .cdb-mockup__card { margin-top: auto; padding: 1rem; border-radius: 12px; background: var(--cdb-bg-card); border: 1px solid var(--cdb-border); font-size: 0.8rem; color: var(--cdb-muted); } .cdb-mockup__card strong { color: var(--cdb-accent); display: block; margin-bottom: 0.25rem; } .cdb-mockup__float { position: absolute; padding: 0.75rem 1rem; border-radius: 12px; background: var(--cdb-glass); backdrop-filter: blur(12px); border: 1px solid var(--cdb-border); font-size: 0.85rem; font-weight: 600; box-shadow: var(--cdb-shadow); } .cdb-mockup__float--tl { top: 8%; left: -8%; } .cdb-mockup__float--br { bottom: 12%; right: -10%; color: var(--cdb-cta); } /* Titres section */ .cdb-section-head { text-align: center; max-width: 640px; margin: 0 auto 3.5rem; } .cdb-section-head h2 { font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin: 0 0 1rem; letter-spacing: -0.02em; } .cdb-section-head p { color: var(--cdb-muted); margin: 0; font-size: 1.1rem; } .cdb-eyebrow { display: block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cdb-accent); margin-bottom: 0.75rem; } /* Feature zigzag */ .cdb-feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 4rem; } .cdb-feature-row:last-child { margin-bottom: 0; } .cdb-feature-row--reverse .cdb-feature-row__visual { order: 2; } .cdb-feature-row--reverse .cdb-feature-row__content { order: 1; } .cdb-feature-visual { border-radius: var(--cdb-radius-lg); background: linear-gradient(160deg, var(--cdb-bg-card), var(--cdb-bg-elevated)); border: 1px solid var(--cdb-border); padding: 2.5rem; min-height: 280px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .cdb-feature-visual::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(38, 198, 218, 0.12), transparent 60%); } .cdb-feature-icon { font-size: 4rem; position: relative; z-index: 1; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4)); } .cdb-feature-row h3 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 1rem; } .cdb-feature-row p { color: var(--cdb-muted); margin: 0 0 1.25rem; } .cdb-check-list { list-style: none; padding: 0; margin: 0; } .cdb-check-list li { position: relative; padding-left: 1.75rem; margin-bottom: 0.65rem; color: var(--cdb-muted); font-size: 0.98rem; } .cdb-check-list li::before { content: '✓'; position: absolute; left: 0; color: var(--cdb-accent); font-weight: 700; } /* Grille cartes (min(100%, …) évite le débordement horizontal sur mobile étroit) */ .cdb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1.5rem; } /* ——— Page Télécharger (grille chemins) ——— */ .cdb-download-page { padding-bottom: 0.5rem; } .cdb-download-stores { margin-top: 0.25rem; } .cdb-download-matrix { display: grid; gap: 1.25rem; margin-top: 2.25rem; grid-template-columns: 1fr; } @media (min-width: 768px) { .cdb-download-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cdb-download-tile--span { grid-column: 1 / -1; } } .cdb-download-tile { position: relative; display: flex; flex-direction: column; min-height: 100%; padding: 1.65rem 1.65rem 1.4rem; border-radius: var(--cdb-radius-lg); background: linear-gradient(165deg, var(--cdb-bg-card) 0%, var(--cdb-bg-elevated) 55%); border: 1px solid var(--cdb-border); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28); transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; --cdb-tile-accent: var(--cdb-accent); } .cdb-download-tile::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: var(--cdb-radius-lg) var(--cdb-radius-lg) 0 0; background: linear-gradient(90deg, var(--cdb-tile-accent), var(--cdb-blue)); opacity: 0.92; } .cdb-download-tile:hover { transform: translateY(-5px); border-color: rgba(38, 198, 218, 0.38); box-shadow: 0 26px 52px rgba(0, 0, 0, 0.38); } .cdb-download-tile--play { --cdb-tile-accent: var(--cdb-tile-play); } .cdb-download-tile--web { --cdb-tile-accent: var(--cdb-accent); } .cdb-download-tile--apk { --cdb-tile-accent: var(--cdb-tile-apk); } .cdb-download-tile--ios { --cdb-tile-accent: rgba(255, 255, 255, 0.35); } .cdb-download-tile--premium { --cdb-tile-accent: var(--cdb-cta); background: linear-gradient(155deg, rgba(255, 138, 0, 0.12) 0%, var(--cdb-bg-elevated) 42%); } .cdb-download-tile__head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem; } .cdb-download-tile__glyph { flex-shrink: 0; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 14px; font-size: 1.35rem; background: var(--cdb-accent-dim); border: 1px solid var(--cdb-border); } .cdb-download-tile__glyph--text { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; } .cdb-download-tile--premium .cdb-download-tile__glyph { background: rgba(255, 138, 0, 0.18); } .cdb-download-tile__badge { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cdb-muted); } .cdb-download-tile__title { font-size: 1.2rem; font-weight: 600; margin: 0 0 0.55rem; line-height: 1.25; } .cdb-download-tile__text { margin: 0; flex: 1 1 auto; color: var(--cdb-muted); font-size: 0.98rem; line-height: 1.55; } .cdb-download-tile__bullets { margin: 0.85rem 0 0; padding-left: 1.15rem; color: var(--cdb-muted); font-size: 0.95rem; line-height: 1.5; } .cdb-download-tile__bullets li + li { margin-top: 0.4rem; } .cdb-download-tile__foot { margin-top: 1.35rem; padding-top: 0.25rem; } .cdb-download-tile__foot--split { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; } .cdb-download-tile__meta { font-size: 0.88rem; color: var(--cdb-muted); } .cdb-download-tile__muted { margin: 0; font-size: 0.95rem; color: var(--cdb-muted); max-width: 40rem; } /* ——— Page Abonnement ——— */ .cdb-subscribe-page { padding-bottom: 2rem; } .cdb-subscribe-dev-banner { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.75rem; padding: 1rem 1.15rem; border-radius: var(--cdb-radius); border: 1px dashed rgba(255, 167, 38, 0.55); background: linear-gradient(135deg, rgba(255, 167, 38, 0.12), rgba(255, 138, 0, 0.06)); color: var(--cdb-text); } .cdb-subscribe-dev-banner strong { display: block; font-size: 0.95rem; margin-bottom: 0.25rem; } .cdb-subscribe-dev-banner__sub { margin: 0; font-size: 0.88rem; color: var(--cdb-muted); line-height: 1.45; } .cdb-subscribe-dev-banner__dot { flex-shrink: 0; width: 10px; height: 10px; margin-top: 0.35rem; border-radius: 50%; background: #ffa726; box-shadow: 0 0 0 6px rgba(255, 167, 38, 0.18); } .cdb-subscribe-test-banner { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.75rem; padding: 1rem 1.15rem; border-radius: var(--cdb-radius); border: 1px solid rgba(38, 198, 218, 0.45); background: linear-gradient(135deg, rgba(38, 198, 218, 0.14), rgba(30, 136, 255, 0.08)); color: var(--cdb-text); } .cdb-subscribe-test-banner strong { display: block; font-size: 0.95rem; margin-bottom: 0.25rem; } .cdb-subscribe-test-banner__sub { margin: 0; font-size: 0.88rem; color: var(--cdb-muted); line-height: 1.5; } .cdb-subscribe-test-banner__link { display: inline-block; margin-top: 0.35rem; font-weight: 600; color: var(--cdb-accent); text-decoration: underline; text-underline-offset: 2px; } .cdb-subscribe-test-banner__link:hover { color: var(--cdb-blue); } .cdb-subscribe-test-banner__icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 1.1rem; background: var(--cdb-accent-dim); border: 1px solid rgba(38, 198, 218, 0.35); } .cdb-subscribe-security-banner { margin-bottom: 1.5rem; padding: 1rem 1.15rem; border-radius: var(--cdb-radius); border: 1px solid rgba(239, 83, 80, 0.55); background: linear-gradient(135deg, rgba(239, 83, 80, 0.14), rgba(211, 47, 47, 0.08)); } .cdb-subscribe-security-banner strong { display: block; font-size: 0.98rem; margin-bottom: 0.35rem; } .cdb-subscribe-security-banner__sub { margin: 0; font-size: 0.88rem; color: var(--cdb-muted); line-height: 1.45; } .cdb-subscribe-trial-banner { margin-bottom: 1.25rem; padding: 0.85rem 1rem; border-radius: var(--cdb-radius); border: 1px solid rgba(38, 198, 218, 0.35); background: rgba(38, 198, 218, 0.1); font-size: 0.92rem; line-height: 1.45; color: var(--cdb-text); } .cdb-subscribe-layout { display: grid; gap: 2rem 2.5rem; align-items: start; } @media (min-width: 768px) { .cdb-subscribe-layout { grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); } .cdb-subscribe-aside { position: sticky; top: calc(var(--cdb-nav-h) + 1rem); } } .cdb-subscribe-checklist { margin-bottom: 1.25rem; } .cdb-subscribe-legal { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--cdb-muted); max-width: 38rem; } .cdb-subscribe-panel { padding: 1.5rem 1.5rem 1.4rem; border-radius: var(--cdb-radius-lg); background: var(--cdb-bg-elevated); border: 1px solid rgba(38, 198, 218, 0.22); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25); } .cdb-subscribe-panel--muted { border-style: dashed; border-color: var(--cdb-border); box-shadow: none; background: var(--cdb-bg-card); } .cdb-subscribe-panel__title { margin: 0 0 0.6rem; font-size: 1.1rem; font-weight: 600; } .cdb-subscribe-panel__text, .cdb-subscribe-panel__email { margin: 0 0 1rem; font-size: 0.95rem; color: var(--cdb-muted); line-height: 1.5; word-break: break-word; } .cdb-subscribe-panel__text--multiline { white-space: pre-line; margin-bottom: 0; line-height: 1.6; } .cdb-subscribe-panel__missing { margin: 1rem 0 0; font-size: 0.9rem; color: var(--cdb-text); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; word-break: break-all; } .cdb-subscribe-panel__troubleshoot { margin: 0.85rem 0 0; font-size: 0.88rem; color: var(--cdb-muted); line-height: 1.45; } .cdb-subscribe-panel .cdb-btn + .cdb-btn { margin-top: 0.5rem; } .cdb-subscribe-form { margin-top: 0.25rem; } .cdb-subscribe-alert { margin-bottom: 1rem; padding: 1rem 1.1rem; border-radius: var(--cdb-radius); border: 1px solid var(--cdb-border); font-size: 0.95rem; line-height: 1.5; } .cdb-subscribe-alert__title { margin: 0 0 0.4rem; font-size: 1.05rem; font-weight: 600; } .cdb-subscribe-alert__text { margin: 0; color: var(--cdb-muted); font-size: 0.92rem; } .cdb-subscribe-alert--success { border-color: rgba(38, 198, 218, 0.45); background: rgba(38, 198, 218, 0.08); } .cdb-subscribe-alert--error { border-color: rgba(239, 83, 80, 0.55); background: rgba(239, 83, 80, 0.08); } .cdb-subscribe-alert--muted { color: var(--cdb-muted); background: var(--cdb-bg-card); } .cdb-card { padding: 2rem; border-radius: var(--cdb-radius-lg); background: var(--cdb-bg-elevated); border: 1px solid var(--cdb-border); transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; } .cdb-card:hover { transform: translateY(-6px); border-color: rgba(38, 198, 218, 0.35); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35); } .cdb-card__icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: var(--cdb-accent-dim); margin-bottom: 1.25rem; } .cdb-card h3 { font-size: 1.2rem; margin: 0 0 0.75rem; font-weight: 600; } .cdb-card p { margin: 0; color: var(--cdb-muted); font-size: 0.98rem; } /* Témoignages */ .cdb-testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.5rem; } .cdb-quote { padding: 2rem; border-radius: var(--cdb-radius-lg); background: var(--cdb-bg-card); border: 1px solid var(--cdb-border); margin: 0; } .cdb-quote p { font-style: italic; color: var(--cdb-text); margin: 0 0 1.25rem; font-size: 1.05rem; } .cdb-quote footer { font-size: 0.9rem; color: var(--cdb-muted); } .cdb-quote footer strong { display: block; color: var(--cdb-accent); font-style: normal; margin-bottom: 0.15rem; } /* CTA bandeau */ .cdb-cta-band { text-align: center; padding: 4rem 2rem; border-radius: var(--cdb-radius-lg); background: linear-gradient(135deg, rgba(38, 198, 218, 0.12), rgba(30, 136, 255, 0.08)); border: 1px solid rgba(38, 198, 218, 0.25); position: relative; overflow: hidden; } .cdb-cta-band::before { content: ''; position: absolute; top: -50%; right: -20%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255, 138, 0, 0.15), transparent 70%); pointer-events: none; } .cdb-cta-band h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 1rem; position: relative; } .cdb-cta-band p { color: var(--cdb-muted); max-width: 520px; margin: 0 auto 2rem; position: relative; } .cdb-cta-band .cdb-btn { position: relative; } /* Footer */ .cdb-footer { padding: 3rem 0 2rem; border-top: 1px solid var(--cdb-border); margin-top: 2rem; } .cdb-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; } /* Pied : 1 colonne sur téléphones ; 2 colonnes (marque pleine largeur) sur tablettes */ @media (max-width: 639px) { .cdb-footer__grid { grid-template-columns: 1fr; gap: 1.75rem; } } @media (min-width: 640px) and (max-width: 1024px) { .cdb-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; } .cdb-footer__brand { grid-column: 1 / -1; } .cdb-footer__brand p { max-width: min(42rem, 100%); } } .cdb-footer__brand p { color: var(--cdb-muted); font-size: 0.95rem; max-width: 280px; margin: 1rem 0 0; } .cdb-footer h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cdb-muted); margin: 0 0 1rem; font-weight: 600; } .cdb-footer ul { list-style: none; padding: 0; margin: 0; } .cdb-footer ul li { margin-bottom: 0.5rem; } .cdb-footer a { text-decoration: none; color: var(--cdb-muted); font-size: 0.95rem; transition: color 0.2s; } .cdb-footer a:hover { color: var(--cdb-accent); } .cdb-footer__bottom { padding-top: 1.5rem; border-top: 1px solid var(--cdb-border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: 0.9rem; color: var(--cdb-muted); } @media (max-width: 480px) { .cdb-footer__bottom { flex-direction: column; align-items: flex-start; } } /* Pages auth / contenu */ .cdb-page-narrow { min-height: calc(100vh - var(--cdb-nav-h)); display: flex; align-items: center; justify-content: center; padding: 2rem max(1rem, env(safe-area-inset-right, 0px)) max(4rem, calc(2rem + env(safe-area-inset-bottom, 0px))) max(1rem, env(safe-area-inset-left, 0px)); } .cdb-panel { width: 100%; max-width: 440px; padding: 2.5rem; border-radius: var(--cdb-radius-lg); background: var(--cdb-bg-elevated); border: 1px solid var(--cdb-border); box-shadow: var(--cdb-shadow); } .cdb-panel--wide { max-width: 920px; } /* Paires de champs côte à côte (profil portail, admin offres, etc.) */ .cdb-form-row-2 { margin-bottom: 1.25rem; } @media (min-width: 768px) { .cdb-form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; align-items: start; } .cdb-form-row-2 > .cdb-field { margin-bottom: 0; } .cdb-form-row-2 > fieldset { margin-bottom: 0; min-width: 0; } } .cdb-form-stack { display: flex; flex-direction: column; min-width: 0; } .cdb-form-stack .cdb-field { margin-bottom: 1.25rem; } .cdb-form-stack .cdb-field:last-child { margin-bottom: 0; } .cdb-panel h1, .cdb-panel h2 { font-family: var(--font-display); margin-top: 0; } .cdb-panel__sub { color: var(--cdb-muted); margin: -0.5rem 0 1.75rem; } .cdb-field { margin-bottom: 1.25rem; text-align: left; } .cdb-field label { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--cdb-muted); font-weight: 500; } .cdb-field input { width: 100%; padding: 0.85rem 1rem; border-radius: 12px; border: 1px solid var(--cdb-border); background: var(--cdb-bg); color: var(--cdb-text); font-size: 1rem; font-family: inherit; outline: none; transition: border-color 0.2s; } .cdb-field input:focus { border-color: var(--cdb-accent); } .cdb-field textarea, .cdb-field select { width: 100%; padding: 0.85rem 1rem; border-radius: 12px; border: 1px solid var(--cdb-border); background: var(--cdb-bg); color: var(--cdb-text); font-size: 1rem; font-family: inherit; outline: none; transition: border-color 0.2s; resize: vertical; min-height: 6rem; } .cdb-field select { min-height: unset; cursor: pointer; } .cdb-field textarea:focus, .cdb-field select:focus { border-color: var(--cdb-accent); } .cdb-field__hint { margin: 0.4rem 0 0; font-size: 0.82rem; color: var(--cdb-muted); line-height: 1.4; } .cdb-field--readonly { margin-bottom: 1.25rem; } .cdb-field__readonly-label { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--cdb-muted); font-weight: 500; } .cdb-divider { text-align: center; margin: 1.25rem 0; color: var(--cdb-muted); font-size: 0.85rem; } .cdb-error { color: #ff6b6b; font-size: 0.9rem; margin-top: 1rem; } .cdb-btn-google { background: #fff; color: #333; width: 100%; } .cdb-btn-google img { width: 20px; height: 20px; } .cdb-prose { max-width: var(--cdb-prose-max); margin: 0 auto; padding: 3rem var(--cdb-container-pad-x) 5rem; } .cdb-prose h1 { font-family: var(--font-display); font-size: 2.25rem; background: linear-gradient(90deg, var(--cdb-accent), var(--cdb-blue)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cdb-prose h2 { font-family: var(--font-display); font-size: 1.35rem; margin-top: 2.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--cdb-border); } .cdb-prose p, .cdb-prose li { color: var(--cdb-muted); } .cdb-prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; } .cdb-prose th, .cdb-prose td { border: 1px solid var(--cdb-border); padding: 0.75rem 1rem; text-align: left; } .cdb-prose th { background: var(--cdb-bg-card); color: var(--cdb-text); } .cdb-prose a { color: var(--cdb-accent); } .cdb-admin-accent { --cdb-accent: #ff6b6b; --cdb-accent-dim: rgba(255, 107, 107, 0.15); --cdb-cta: #ef4444; --cdb-cta-hover: #f87171; } .cdb-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; padding: 2rem 0 4rem; } .cdb-dash-card { padding: 1.75rem; border-radius: var(--cdb-radius); background: var(--cdb-bg-elevated); border: 1px solid var(--cdb-border); } .cdb-dash-card h3 { margin: 0 0 1rem; font-size: 1rem; color: var(--cdb-muted); font-weight: 500; border-bottom: 1px solid var(--cdb-border); padding-bottom: 0.75rem; } .cdb-dash-stat { font-family: var(--font-display); font-size: 2.5rem; color: var(--cdb-accent); } /* ------------------------------------------------------------------------- Large & extra-large viewports — alignement type app pro (dashboard web) ------------------------------------------------------------------------- */ @media (min-width: 1280px) { :root { --cdb-container-max: 1420px; --cdb-nav-h: 76px; --cdb-container-pad-x: clamp(1.25rem, 3vw, 2.5rem); } .cdb-section { padding: clamp(4.5rem, 8vw, 7.5rem) 0; } .cdb-hero { padding: clamp(3.5rem, 6vw, 5.5rem) 0 clamp(4.5rem, 9vw, 6.5rem); } .cdb-hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(2.5rem, 4vw, 5rem); align-items: center; } .cdb-hero h1 { font-size: clamp(2.35rem, 3.6vw, 3.85rem); } .cdb-hero__lead { font-size: 1.22rem; max-width: min(38rem, 100%); } .cdb-hero__stats { gap: 2.5rem 3rem; } .cdb-hero-shot__device { width: min(360px, 42vw); } .cdb-section-head { max-width: 760px; margin-bottom: 4rem; } .cdb-section-head h2 { font-size: clamp(1.85rem, 2.5vw, 2.65rem); } .cdb-section-head p { font-size: 1.12rem; } /* Grille cartes : colonnes fluides (accueil 4 cols, téléchargement 3, etc.) */ .cdb-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 272px), 1fr)); gap: 1.75rem; } .cdb-card { padding: 2.15rem 2rem; min-height: 0; } .cdb-testimonials { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; } .cdb-feature-row { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(3rem, 4.5vw, 5.5rem); margin-bottom: 4.5rem; } .cdb-feature-row h3 { font-size: 1.65rem; } .cdb-feature-visual { min-height: 320px; padding: 2.75rem; } .cdb-device-frame--feature .cdb-device-frame__display img { max-height: 560px; } .cdb-cta-band { padding: 4.5rem 3rem; } .cdb-cta-band p { max-width: 580px; } .cdb-footer__grid { gap: 3rem; grid-template-columns: minmax(0, 2.2fr) repeat(2, minmax(0, 1fr)); } .cdb-footer__brand p { max-width: 340px; } .cdb-page-hero h1 { font-size: clamp(2.15rem, 3.2vw, 3rem); } .cdb-page-hero p { max-width: min(44rem, 90%); font-size: 1.12rem; } /* Galerie : grille centrée au lieu du scroll horizontal seul */ .cdb-screens__showcase { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); justify-content: center; align-items: start; gap: 1.5rem 1.25rem; overflow-x: visible; scroll-snap-type: none; padding: 1.25rem 0 2.5rem; max-width: 100%; } .cdb-screen-card { width: 100%; max-width: 280px; margin: 0 auto; } .cdb-contact-layout { max-width: 1040px; gap: 2.25rem; } .cdb-faq { max-width: min(800px, 100%); } .cdb-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } .cdb-admin-panels { gap: 2rem; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); } .cdb-admin-panel__body { padding: 1.75rem 1.5rem; } } @media (min-width: 1536px) { :root { --cdb-container-max: 1620px; --cdb-container-pad-x: clamp(1.5rem, 2.2vw, 2.75rem); } .cdb-hero__grid { gap: clamp(3rem, 4vw, 6rem); } .cdb-hero-shot__device { width: min(380px, 38vw); } .cdb-section-head { max-width: 820px; } .cdb-page-hero p { max-width: min(48rem, 92%); } .cdb-mockup__frame { width: min(340px, 32vw); } } @media (min-width: 1920px) { :root { --cdb-container-max: min(94vw, 1780px); --cdb-prose-max: 880px; --cdb-container-pad-x: clamp(1.5rem, 2vw, 2.5rem); } .cdb-bg-grid { background-size: 56px 56px; } .cdb-hero h1 { font-size: clamp(2.5rem, 3.2vw, 4rem); } .cdb-admin-panels { grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); } .cdb-section { padding: clamp(3.5rem, 5vw, 5.5rem) 0; } .cdb-hero { padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(3.5rem, 7vw, 5.5rem); } .cdb-page-hero p { max-width: min(52rem, 94%); } } /* Responsive */ /* Nav : barre une ligne + panneau liens (≤1024px) */ @media (max-width: 1024px) { .cdb-nav__inner { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: var(--cdb-nav-h); min-width: 0; } /* La marque ne « mange » pas la largeur : la zone droite reste dans le viewport (Connexion + CTA + thème + langue + menu), avec défilement horizontal si besoin. */ .cdb-brand { flex: 0 1 auto; min-width: 0; } .cdb-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cdb-nav__links { display: none; position: absolute; flex: none; pointer-events: auto; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; row-gap: 0.15rem; column-gap: 0; gap: 0.15rem; margin: 0; padding: 0.6rem var(--cdb-container-pad-x) 1rem; list-style: none; background: var(--cdb-bg-elevated); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--cdb-border); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4); max-height: min(72vh, calc(100dvh - var(--cdb-nav-h) - env(safe-area-inset-top, 0px) - 0.75rem)); overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 5; } .cdb-nav.is-open .cdb-nav__links { display: flex; } .cdb-nav__links li { margin: 0; } .cdb-nav__links a { display: block; padding: 0.7rem 0.65rem; border-radius: 10px; font-size: 1rem; white-space: normal; } .cdb-nav__links a:hover, .cdb-nav__links a:focus-visible { background: rgba(255, 255, 255, 0.07); color: var(--cdb-text); } .cdb-nav__links a.is-active { background: rgba(38, 198, 218, 0.12); color: var(--cdb-accent); font-weight: 600; } .cdb-nav__links a.is-active::after { display: none; } html[data-theme="light"] .cdb-nav__links a:hover, html[data-theme="light"] .cdb-nav__links a:focus-visible { background: rgba(12, 21, 36, 0.06); } html[data-theme="light"] .cdb-nav__links a.is-active { background: rgba(38, 198, 218, 0.12); } .cdb-nav__end { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.35rem; flex: 1 1 0%; min-width: 0; justify-content: flex-end; } .cdb-nav__actions { grid-column: 1; justify-self: end; min-width: 0; max-width: 100%; /* hidden pouvait masquer le thème / locale sur petits écrans → clics « morts » */ overflow-x: auto; overflow-y: visible; flex: unset; flex-shrink: 1; display: flex; flex-wrap: nowrap; align-items: center; gap: 0.35rem; position: relative; z-index: 1; -webkit-overflow-scrolling: touch; } .cdb-nav__actions .cdb-theme-toggle, .cdb-nav__actions .cdb-locale, .cdb-nav__actions .cdb-locale__select { flex-shrink: 0; } .cdb-nav__actions .cdb-btn { white-space: nowrap; } .cdb-nav-toggle { grid-column: 2; justify-self: end; display: block; flex: unset; position: relative; z-index: 2; flex-shrink: 0; min-width: 44px; min-height: 44px; padding: 0.55rem 0.65rem; } .cdb-nav .cdb-theme-toggle { min-width: 44px; min-height: 44px; } } @media (max-width: 900px) { .cdb-hero__grid, .cdb-feature-row { grid-template-columns: 1fr; } .cdb-feature-row--reverse .cdb-feature-row__visual, .cdb-feature-row--reverse .cdb-feature-row__content { order: unset; } .cdb-mockup { margin-top: 2rem; } .cdb-mockup__float--tl { left: 0; } .cdb-mockup__float--br { right: 0; } } @media (max-width: 420px) { .cdb-nav__actions .cdb-btn--cta { font-size: 0.88rem; padding: 0.65rem 1.1rem; } } @media (max-width: 600px) { .cdb-hero__ctas { flex-direction: column; } .cdb-hero__ctas .cdb-btn { width: 100%; } } /* Hub portail après connexion (app vs configuration compte) */ .cdb-portal-hub { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 8vw, 5rem); } .cdb-portal-hub__head.cdb-page-hero { padding: 0 0 1.5rem; text-align: center; } .cdb-portal-hub__head h1 { margin: 0 0 0.75rem; } .cdb-portal-hub__head.cdb-page-hero p { max-width: min(42rem, 100%); } .cdb-portal-hub__lead { margin: 0 auto; max-width: 36rem; color: var(--cdb-muted); font-size: 1.05rem; } .cdb-portal-hub__greet { margin: 1rem 0 0; color: var(--cdb-text); font-weight: 600; } .cdb-portal-hub__intended { text-align: center; margin-bottom: 2rem; } .cdb-portal-hub__flash { max-width: 42rem; margin: 0 auto 1.5rem; padding: 0.85rem 1.1rem; border-radius: var(--cdb-radius-md, 12px); border: 1px solid var(--cdb-border); background: var(--cdb-bg-elevated); font-size: 0.95rem; } .cdb-portal-hub__flash--warn { border-color: rgba(245, 158, 11, 0.45); color: var(--cdb-text); } .cdb-portal-hub__choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-bottom: 3rem; width: 100%; max-width: 100%; margin-inline: auto; } .cdb-portal-hub__choice { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 1.5rem 1.35rem; border-radius: var(--cdb-radius-lg, 16px); border: 1px solid var(--cdb-border); background: var(--cdb-bg-elevated); text-decoration: none; color: var(--cdb-text); transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; } .cdb-portal-hub__choice:hover { border-color: rgba(38, 198, 218, 0.45); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25); transform: translateY(-2px); } .cdb-portal-hub__choice-icon { font-size: 1.75rem; line-height: 1; } .cdb-portal-hub__choice-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.02em; } .cdb-portal-hub__choice-desc { font-size: 0.92rem; color: var(--cdb-muted); line-height: 1.45; } .cdb-portal-hub__recruiters { text-align: center; margin: -1.5rem auto 2.75rem; max-width: 40rem; } .cdb-portal-hub__recruiters-link { font-size: 0.95rem; font-weight: 600; color: var(--cdb-accent); text-decoration: none; } .cdb-portal-hub__recruiters-link:hover { text-decoration: underline; } .cdb-portal-hub__account { max-width: 100%; margin: 0 auto; padding-top: 1rem; border-top: 1px solid var(--cdb-border); } .cdb-portal-hub__account-title { font-family: var(--font-display); font-size: clamp(1.35rem, 3vw, 1.65rem); margin: 0 0 0.5rem; text-align: center; } .cdb-portal-hub__account-intro { text-align: center; color: var(--cdb-muted); margin: 0 0 2rem; max-width: 40rem; margin-inline: auto; } .cdb-portal-hub__parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .cdb-portal-hub__part { padding: 1.35rem 1.25rem; border-radius: var(--cdb-radius-lg, 16px); border: 1px solid var(--cdb-border); background: rgba(255, 255, 255, 0.03); } html[data-theme="light"] .cdb-portal-hub__part { background: rgba(12, 21, 36, 0.04); } .cdb-portal-hub__part-title { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 0.5rem; color: var(--cdb-accent); } .cdb-portal-hub__part-desc { margin: 0 0 0.75rem; font-size: 0.92rem; color: var(--cdb-muted); } .cdb-portal-hub__part-list { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--cdb-text); font-size: 0.9rem; line-height: 1.55; } .cdb-portal-hub__soon { margin: 0; font-size: 0.85rem; font-style: italic; color: var(--cdb-muted); } .cdb-portal-hub__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--cdb-border); } .cdb-portal-hub__logout { display: inline; margin: 0; } .cdb-portal-hub__ready { margin: 0 0 0.75rem; font-size: 0.92rem; color: var(--cdb-accent); line-height: 1.45; } .cdb-portal-hub__profile-cta { margin: 0; } /* Formulaire profil portail */ .cdb-main--portal-profile { min-height: calc(100vh - var(--cdb-nav-h)); } .cdb-portal-profile { padding: clamp(1.5rem, 4vw, 2.5rem) var(--cdb-container-pad-x, 1rem) clamp(3rem, 8vw, 5rem); } .cdb-portal-profile__head { max-width: min(60rem, 100%); margin: 0 auto 1.5rem; text-align: center; } .cdb-portal-profile__crumb { margin: 0 0 0.75rem; font-size: 0.9rem; } .cdb-portal-profile__crumb a { color: var(--cdb-muted); text-decoration: none; } .cdb-portal-profile__crumb a:hover { color: var(--cdb-accent); text-decoration: underline; } .cdb-portal-profile__title { font-family: var(--font-display); font-size: clamp(1.5rem, 3.5vw, 2rem); margin: 0 0 0.75rem; letter-spacing: 0.02em; } .cdb-portal-profile__intro { margin: 0; color: var(--cdb-muted); font-size: 1rem; line-height: 1.5; } .cdb-portal-profile__flash { max-width: min(48rem, 100%); margin: 0 auto 1rem; padding: 0.75rem 1rem; border-radius: 12px; border: 1px solid rgba(38, 198, 218, 0.35); background: rgba(38, 198, 218, 0.08); color: var(--cdb-text); text-align: center; } .cdb-portal-profile__panel { margin: 0 auto; } .cdb-portal-profile__identity { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--cdb-border); } .cdb-portal-profile__photo { border-radius: 50%; border: 2px solid var(--cdb-border); object-fit: cover; flex-shrink: 0; } .cdb-portal-profile__identity-label { margin: 0 0 0.25rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cdb-muted); } .cdb-portal-profile__identity-email { margin: 0 0 0.35rem; font-weight: 600; word-break: break-all; } .cdb-portal-profile__identity-hint { margin: 0; font-size: 0.85rem; color: var(--cdb-muted); line-height: 1.45; } .cdb-portal-profile__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 560px) { .cdb-portal-profile__grid2 { grid-template-columns: 1fr; } } .cdb-portal-profile__slug { display: inline-block; margin: 0; padding: 0.35rem 0.6rem; border-radius: 8px; background: var(--cdb-bg); border: 1px solid var(--cdb-border); font-size: 0.88rem; } .cdb-portal-profile__flags { margin: 0 0 1.5rem; padding: 1rem 1rem 0.25rem; border: 1px solid var(--cdb-border); border-radius: 12px; background: rgba(255, 255, 255, 0.02); } html[data-theme="light"] .cdb-portal-profile__flags { background: rgba(12, 21, 36, 0.03); } .cdb-portal-profile__flags-legend { padding: 0 0.35rem; font-size: 0.95rem; font-weight: 600; font-family: var(--font-display); } .cdb-portal-profile__check { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.75rem; font-size: 0.92rem; line-height: 1.4; cursor: pointer; } .cdb-portal-profile__check input { margin-top: 0.2rem; flex-shrink: 0; } .cdb-portal-profile__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; } .cdb-portal-profile__driver { margin: 0 0 1.5rem; padding: 1rem 1rem 0.25rem; border: 1px solid var(--cdb-border); border-radius: 12px; background: rgba(255, 255, 255, 0.02); } html[data-theme="light"] .cdb-portal-profile__driver { background: rgba(12, 21, 36, 0.03); } .cdb-driver-cv-grid { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 1rem; } /* Portail — documents (aligné app mobile) */ .cdb-main--portal-documents { min-height: calc(100vh - var(--cdb-nav-h)); } body.cdb-modal-open { overflow: hidden; } .cdb-portal-documents { padding: clamp(1.5rem, 4vw, 2.5rem) var(--cdb-container-pad-x, 1rem) clamp(3rem, 8vw, 5rem); } .cdb-portal-documents__head { max-width: min(60rem, 100%); margin: 0 auto 1.5rem; text-align: center; } .cdb-portal-documents__crumb { margin: 0 0 0.75rem; font-size: 0.9rem; } .cdb-portal-documents__crumb a { color: var(--cdb-muted); text-decoration: none; } .cdb-portal-documents__crumb a:hover { color: var(--cdb-accent); text-decoration: underline; } .cdb-portal-documents__title { font-family: var(--font-display); font-size: clamp(1.5rem, 3.5vw, 2rem); margin: 0 0 0.75rem; letter-spacing: 0.02em; } .cdb-portal-documents__intro { margin: 0; color: var(--cdb-muted); font-size: 1rem; line-height: 1.5; } .cdb-portal-documents__errors { max-width: min(48rem, 100%); margin: 0 auto 1rem; padding: 0.75rem 1rem 0.75rem 1.5rem; border-radius: 12px; border: 1px solid rgba(239, 83, 80, 0.45); background: rgba(239, 83, 80, 0.08); color: var(--cdb-text); font-size: 0.9rem; line-height: 1.45; } .cdb-portal-documents__overall { max-width: min(48rem, 100%); margin: 0 auto 1.75rem; padding: 1rem 1.1rem; border-radius: 12px; border: 1px solid var(--cdb-border); background: rgba(255, 255, 255, 0.02); } html[data-theme="light"] .cdb-portal-documents__overall { background: rgba(12, 21, 36, 0.03); } .cdb-portal-documents__overall-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem; font-size: 0.92rem; font-weight: 600; } .cdb-portal-documents__overall-pct { color: var(--cdb-accent); font-variant-numeric: tabular-nums; } .cdb-portal-documents__overall-hint { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--cdb-muted); line-height: 1.4; } .cdb-portal-documents__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem; max-width: min(72rem, 100%); margin: 0 auto 2rem; } .cdb-portal-documents__card { position: relative; border-radius: 14px; border: 1px solid var(--cdb-border); padding: 1rem 1rem 0.85rem; background: rgba(255, 255, 255, 0.02); text-align: left; } html[data-theme="light"] .cdb-portal-documents__card { background: rgba(12, 21, 36, 0.03); } .cdb-portal-documents__card--tone-info { border-color: rgba(38, 198, 218, 0.35); } .cdb-portal-documents__card--tone-warning { border-color: rgba(255, 183, 77, 0.45); } .cdb-portal-documents__card--tone-danger { border-color: rgba(239, 83, 80, 0.45); } .cdb-portal-documents__card--compact { margin-bottom: 0.75rem; } .cdb-portal-documents__card-head { display: flex; align-items: flex-start; gap: 0.65rem; margin-bottom: 0.65rem; } .cdb-portal-documents__icon { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--cdb-accent); } .cdb-portal-documents__icon-svg { display: block; } .cdb-portal-documents__card-title { flex: 1; margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.25; font-family: var(--font-display); } .cdb-portal-documents__card-subtitle { margin: 0; font-size: 0.95rem; font-weight: 600; flex: 1; } .cdb-portal-documents__pill { display: inline-block; margin-left: 0.35rem; padding: 0.15rem 0.45rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 6px; background: var(--cdb-bg); border: 1px solid var(--cdb-border); color: var(--cdb-muted); vertical-align: middle; } .cdb-portal-documents__delete { margin: 0; margin-left: auto; } .cdb-portal-documents__delete-btn { border: none; background: transparent; color: var(--cdb-muted); font-size: 1.35rem; line-height: 1; cursor: pointer; padding: 0.1rem 0.35rem; border-radius: 6px; } .cdb-portal-documents__delete-btn:hover { color: #ef5350; background: rgba(239, 83, 80, 0.12); } .cdb-portal-documents__dates { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; width: 100%; margin: 0 0 0.65rem; padding: 0.5rem 0.55rem; border-radius: 10px; border: 1px dashed var(--cdb-border); background: transparent; font: inherit; color: inherit; cursor: pointer; text-align: left; } .cdb-portal-documents__dates:hover { border-color: var(--cdb-accent); } .cdb-portal-documents__datebox { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .cdb-portal-documents__datelabel { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cdb-muted); } .cdb-portal-documents__dateval { font-size: 0.88rem; font-weight: 500; word-break: break-word; } .cdb-portal-documents__dateval.is-empty { color: var(--cdb-muted); font-style: italic; } .cdb-portal-documents__bar-wrap { margin-top: 0.15rem; } .cdb-portal-documents__bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } html[data-theme="light"] .cdb-portal-documents__bar { background: rgba(12, 21, 36, 0.08); } .cdb-portal-documents__bar--overall { height: 8px; } .cdb-portal-documents__bar-fill { display: block; height: 100%; border-radius: 999px; transition: width 0.25s ease; } .cdb-portal-documents__bar-fill--ok { background: linear-gradient(90deg, #26c6da, #4dd0e1); } .cdb-portal-documents__bar-fill--soon { background: linear-gradient(90deg, #ffb74d, #ff9800); } .cdb-portal-documents__bar-fill--expired { background: linear-gradient(90deg, #e57373, #ef5350); } .cdb-portal-documents__bar-fill--overall { background: linear-gradient(90deg, #26c6da, #7e57c2); } .cdb-portal-documents__status { margin: 0.4rem 0 0; font-size: 0.78rem; line-height: 1.35; } .cdb-portal-documents__status--ok { color: var(--cdb-muted); } .cdb-portal-documents__status--soon { color: #ffb74d; } .cdb-portal-documents__status--expired { color: #ef5350; font-weight: 600; } .cdb-portal-documents__list-section { max-width: min(48rem, 100%); margin: 0 auto 2rem; } .cdb-portal-documents__list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; } .cdb-portal-documents__list-title { margin: 0; font-size: 1.1rem; font-family: var(--font-display); } .cdb-portal-documents__empty { margin: 0; color: var(--cdb-muted); font-size: 0.92rem; } .cdb-portal-documents__modal[hidden] { display: none !important; } .cdb-portal-documents__modal:not([hidden]) { display: flex !important; } .cdb-portal-documents__modal { position: fixed; inset: 0; z-index: 1200; align-items: center; justify-content: center; padding: 1rem; background: rgba(6, 12, 22, 0.72); backdrop-filter: blur(6px); } .cdb-portal-documents__modal-dialog { width: min(26rem, 100%); max-height: min(90vh, 36rem); overflow: auto; border-radius: 14px; border: 1px solid var(--cdb-border); background: var(--cdb-surface, #0f1724); padding: 1.25rem 1.25rem 1rem; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45); } html[data-theme="light"] .cdb-portal-documents__modal-dialog { background: #fff; box-shadow: 0 18px 48px rgba(12, 21, 36, 0.18); } .cdb-portal-documents__modal-title { margin: 0 0 1rem; font-size: 1.1rem; font-family: var(--font-display); } .cdb-portal-documents__modal-form .cdb-field { margin-bottom: 0.85rem; } .cdb-portal-documents__modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; } .cdb-main--portal-jobs { min-height: calc(100vh - var(--cdb-nav-h)); } .cdb-portal-jobs { padding: clamp(1.5rem, 4vw, 2.5rem) var(--cdb-container-pad-x, 1rem) clamp(3rem, 8vw, 5rem); } .cdb-portal-jobs__head { max-width: min(60rem, 100%); margin: 0 auto 1.5rem; text-align: center; } .cdb-portal-jobs__crumb { margin: 0 0 0.75rem; font-size: 0.9rem; } .cdb-portal-jobs__crumb a { color: var(--cdb-muted); text-decoration: none; } .cdb-portal-jobs__crumb a:hover { color: var(--cdb-accent); text-decoration: underline; } .cdb-portal-jobs__intro { color: var(--cdb-muted); line-height: 1.5; } .cdb-portal-jobs__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1rem; } .cdb-portal-jobs__empty { text-align: center; color: var(--cdb-muted); } .cdb-portal-jobs__table-wrap { overflow-x: auto; margin-top: 1rem; } .cdb-jobs-page { padding: clamp(1.5rem, 4vw, 3rem) var(--cdb-container-pad-x, 1rem) clamp(3rem, 8vw, 5rem); } /* Emploi : vitrine conducteurs / entreprises (gate) */ .cdb-jobs-gate { padding: clamp(1.5rem, 4vw, 3rem) var(--cdb-container-pad-x, 1rem) clamp(3rem, 8vw, 5rem); } .cdb-jobs-gate__hero { text-align: center; margin-bottom: 2.5rem; } .cdb-jobs-gate__eyebrow { margin: 0 0 0.5rem; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cdb-muted); font-weight: 600; } .cdb-jobs-gate__lead { margin: 0.75rem auto 0; max-width: 40rem; color: var(--cdb-muted); font-size: 1.05rem; line-height: 1.5; } .cdb-jobs-gate__split { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; align-items: stretch; } .cdb-jobs-gate__card { padding: 1.75rem 1.5rem; border-radius: var(--cdb-radius-lg, 16px); border: 1px solid var(--cdb-border); background: var(--cdb-bg-elevated); display: flex; flex-direction: column; gap: 0.75rem; } .cdb-jobs-gate__card--employer { border-color: rgba(38, 198, 218, 0.35); background: linear-gradient(160deg, rgba(38, 198, 218, 0.08), var(--cdb-bg-elevated)); } .cdb-jobs-gate__card-title { margin: 0; font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.02em; } .cdb-jobs-gate__card-lead { margin: 0; font-size: 0.95rem; color: var(--cdb-muted); line-height: 1.45; } .cdb-jobs-gate__bullets { margin: 0; padding-left: 1.2rem; color: var(--cdb-text); font-size: 0.92rem; line-height: 1.5; flex: 1; } .cdb-jobs-gate__cta { margin: 0.5rem 0 0; } .cdb-jobs-gate__note { margin: 2rem auto 0; max-width: 44rem; text-align: center; font-size: 0.88rem; color: var(--cdb-muted); line-height: 1.45; } /* Espace recruteurs & entreprises */ .cdb-body--recruiters .cdb-main { padding-bottom: 0; } .cdb-recruiters { padding-bottom: clamp(2.5rem, 6vw, 4rem); } .cdb-recruiters__topbar { border-bottom: 1px solid var(--cdb-border); background: rgba(0, 0, 0, 0.2); } html[data-theme="light"] .cdb-recruiters__topbar { background: rgba(255, 255, 255, 0.65); } .cdb-recruiters__topbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 0; } .cdb-recruiters__back { font-size: 0.9rem; color: var(--cdb-muted); text-decoration: none; font-weight: 600; } .cdb-recruiters__back:hover { color: var(--cdb-accent); } .cdb-recruiters__badge { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--cdb-accent); } .cdb-recruiters__hero { padding: clamp(2rem, 5vw, 3.5rem) var(--cdb-container-pad-x, 1rem) clamp(1.5rem, 4vw, 2.5rem); text-align: center; background: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(38, 198, 218, 0.14), transparent 55%); } .cdb-recruiters__title { margin: 0 auto 0.75rem; max-width: 22ch; font-family: var(--font-display); font-size: clamp(1.65rem, 4vw, 2.35rem); letter-spacing: 0.03em; line-height: 1.15; } .cdb-recruiters__lead { margin: 0 auto; max-width: 44rem; color: var(--cdb-muted); font-size: 1.08rem; line-height: 1.55; } .cdb-recruiters__hero-cta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .cdb-recruiters-subnav { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--cdb-border); background: color-mix(in srgb, var(--cdb-bg, #0a0f14) 88%, transparent); backdrop-filter: blur(10px); } html[data-theme="light"] .cdb-recruiters-subnav { background: color-mix(in srgb, #f6f8fb 92%, transparent); } .cdb-recruiters-subnav__list { list-style: none; margin: 0; padding: 0.5rem 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; justify-content: center; font-size: 0.82rem; font-weight: 600; } .cdb-recruiters-subnav__list a { color: var(--cdb-muted); text-decoration: none; padding: 0.35rem 0.5rem; border-radius: 999px; } .cdb-recruiters-subnav__list a:hover { color: var(--cdb-accent); background: rgba(38, 198, 218, 0.1); } .cdb-recruiters-kpis { padding: 1.75rem var(--cdb-container-pad-x, 1rem); } .cdb-recruiters-kpis__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; max-width: 960px; margin-inline: auto; } .cdb-recruiters-kpi { padding: 1.25rem 1rem; border-radius: var(--cdb-radius-lg, 16px); border: 1px solid var(--cdb-border); background: var(--cdb-bg-elevated); text-align: center; } .cdb-recruiters-kpi__value { display: block; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--cdb-accent); letter-spacing: 0.04em; } .cdb-recruiters-kpi__sub { display: block; margin-top: 0.4rem; font-size: 0.85rem; color: var(--cdb-muted); line-height: 1.4; } .cdb-recruiters-section { padding: clamp(2rem, 5vw, 3rem) var(--cdb-container-pad-x, 1rem); } .cdb-recruiters-section--alt { background: rgba(255, 255, 255, 0.02); } html[data-theme="light"] .cdb-recruiters-section--alt { background: rgba(12, 21, 36, 0.03); } .cdb-recruiters-section--form { padding-bottom: clamp(3rem, 8vw, 5rem); } .cdb-recruiters-section__inner { max-width: 960px; margin-inline: auto; } .cdb-recruiters-section__title { margin: 0 0 0.75rem; font-family: var(--font-display); font-size: clamp(1.25rem, 2.5vw, 1.55rem); letter-spacing: 0.02em; } .cdb-recruiters-section__lead { margin: 0 0 1.5rem; max-width: 52rem; color: var(--cdb-muted); line-height: 1.55; } .cdb-recruiters-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; } .cdb-recruiters-card { padding: 1.35rem 1.2rem; border-radius: var(--cdb-radius-lg, 16px); border: 1px solid var(--cdb-border); background: var(--cdb-bg-elevated); } .cdb-recruiters-card__title { margin: 0 0 0.5rem; font-size: 1.05rem; font-weight: 700; } .cdb-recruiters-card__text { margin: 0; font-size: 0.92rem; color: var(--cdb-muted); line-height: 1.5; } .cdb-recruiters-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; } @media (max-width: 768px) { .cdb-recruiters-split { grid-template-columns: 1fr; } } .cdb-recruiters-checklist { margin: 0; padding-left: 1.2rem; line-height: 1.55; color: var(--cdb-text); } .cdb-recruiters-checklist li + li { margin-top: 0.45rem; } .cdb-recruiters-timeline { list-style: none; margin: 0; padding: 0; max-width: 720px; display: grid; gap: 1rem; } .cdb-recruiters-timeline__step { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1.1rem 1.15rem; border-radius: var(--cdb-radius-lg, 16px); border: 1px solid var(--cdb-border); background: var(--cdb-bg-elevated); } .cdb-recruiters-timeline__num { width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, rgba(38, 198, 218, 0.35), rgba(21, 101, 192, 0.35)); font-family: var(--font-display); font-weight: 800; font-size: 1rem; } .cdb-recruiters-timeline__step p { margin: 0; line-height: 1.5; color: var(--cdb-text); } .cdb-recruiters-outro { margin: 1.5rem 0 0; max-width: 48rem; color: var(--cdb-muted); line-height: 1.5; } .cdb-recruiters-dual { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; max-width: 960px; } .cdb-recruiters-panel { padding: 1.5rem 1.35rem; border-radius: var(--cdb-radius-lg, 16px); border: 1px solid var(--cdb-border); background: var(--cdb-bg-elevated); } .cdb-recruiters-panel--accent { border-color: rgba(38, 198, 218, 0.4); background: linear-gradient(165deg, rgba(38, 198, 218, 0.1), var(--cdb-bg-elevated)); } .cdb-recruiters-panel__title { margin: 0 0 0.6rem; font-size: 1.1rem; font-weight: 700; } .cdb-recruiters-panel p { margin: 0; color: var(--cdb-muted); line-height: 1.5; font-size: 0.95rem; } .cdb-recruiters-pricing { max-width: 640px; } .cdb-recruiters-pricing__note { margin: 1rem 0 1.5rem; font-size: 0.88rem; color: var(--cdb-muted); font-style: italic; } .cdb-recruiters-faq { max-width: 720px; margin-inline: auto; } .cdb-recruiters-faq__item { border: 1px solid var(--cdb-border); border-radius: var(--cdb-radius-md, 12px); padding: 0.35rem 1rem; margin-bottom: 0.65rem; background: var(--cdb-bg-elevated); } .cdb-recruiters-faq__item summary { cursor: pointer; font-weight: 600; padding: 0.65rem 0; list-style: none; } .cdb-recruiters-faq__item summary::-webkit-details-marker { display: none; } .cdb-recruiters-faq__item p { margin: 0 0 0.85rem; color: var(--cdb-muted); font-size: 0.92rem; line-height: 1.5; } .cdb-recruiters-form-wrap { max-width: 720px; margin-inline: auto; } .cdb-recruiters-flash { padding: 0.85rem 1rem; border-radius: var(--cdb-radius-md, 12px); margin-bottom: 1rem; font-weight: 600; } .cdb-recruiters-flash--ok { background: rgba(46, 160, 67, 0.15); border: 1px solid rgba(46, 160, 67, 0.45); color: #7dffb0; } html[data-theme="light"] .cdb-recruiters-flash--ok { color: #146c2e; } .cdb-recruiters-flash--err { background: rgba(248, 81, 73, 0.12); border: 1px solid rgba(248, 81, 73, 0.4); color: #ffb4b0; } html[data-theme="light"] .cdb-recruiters-flash--err { color: #8b1e1e; } .cdb-recruiters-form__privacy { margin: 0 0 1rem; font-size: 0.82rem; color: var(--cdb-muted); line-height: 1.45; } .cdb-recruiters-form__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .cdb-jobs-page__head { margin-bottom: 2rem; } .cdb-jobs-page__portal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1rem; } .cdb-jobs-page__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; width: 100%; max-width: 100%; } .cdb-jobs-page--board .cdb-jobs-page__list--board { max-width: 100%; } .cdb-jobs-toolbar { max-width: 100%; width: 100%; margin: 0 auto 1.25rem; padding: 1.25rem 1.1rem; border-radius: var(--cdb-radius-lg, 16px); border: 1px solid var(--cdb-border); background: var(--cdb-bg-elevated); } .cdb-jobs-toolbar__row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .cdb-jobs-toolbar__field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 8rem; } .cdb-jobs-toolbar__field--grow { flex: 1 1 220px; min-width: 200px; } .cdb-jobs-toolbar__field label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cdb-muted); } .cdb-jobs-toolbar__field input, .cdb-jobs-toolbar__field select { font: inherit; padding: 0.55rem 0.65rem; border-radius: var(--cdb-radius-md, 10px); border: 1px solid var(--cdb-border); background: var(--cdb-bg); color: var(--cdb-text); } .cdb-jobs-toolbar__row--secondary { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--cdb-border); } .cdb-job-chip--segment { border-color: color-mix(in srgb, var(--cdb-accent, #2563eb) 35%, var(--cdb-border)); background: color-mix(in srgb, var(--cdb-accent, #2563eb) 8%, var(--cdb-bg)); } .cdb-jobs-toolbar__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1rem; } .cdb-jobs-page__results { text-align: center; font-size: 0.92rem; color: var(--cdb-muted); margin: 0 0 1.25rem; } .cdb-job-card--board { display: flex; flex-direction: column; gap: 0.65rem; } .cdb-job-card__top { display: flex; flex-direction: column; gap: 0.15rem; } .cdb-job-card__meta--chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; } .cdb-job-card__meta--chips li { margin: 0; } .cdb-job-chip { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; background: rgba(38, 198, 218, 0.12); color: var(--cdb-text); border: 1px solid rgba(38, 198, 218, 0.25); } .cdb-job-chip--muted { background: var(--cdb-bg); border-color: var(--cdb-border); color: var(--cdb-muted); font-weight: 500; } .cdb-job-chip--accent { background: rgba(255, 193, 7, 0.12); border-color: rgba(255, 193, 7, 0.35); } .cdb-job-card__snippet { margin: 0; font-size: 0.88rem; line-height: 1.45; color: var(--cdb-muted); flex: 1; } .cdb-job-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.25rem; padding-top: 0.75rem; border-top: 1px solid var(--cdb-border); } .cdb-job-card__date { font-size: 0.82rem; color: var(--cdb-muted); } .cdb-job-card { padding: 1.35rem 1.25rem; border-radius: var(--cdb-radius-lg, 16px); border: 1px solid var(--cdb-border); background: var(--cdb-bg-elevated); } .cdb-job-card__title { margin: 0 0 0.35rem; font-family: var(--font-display); font-size: 1.15rem; } .cdb-job-card__title a { color: var(--cdb-text); text-decoration: none; } .cdb-job-card__title a:hover { color: var(--cdb-accent); } .cdb-job-card__company { margin: 0 0 0.75rem; color: var(--cdb-muted); font-size: 0.95rem; } .cdb-job-card__meta { margin: 0 0 1rem; padding-left: 1.1rem; color: var(--cdb-muted); font-size: 0.88rem; line-height: 1.45; } .cdb-jobs-page__empty, .cdb-jobs-page__flash { text-align: center; max-width: 40rem; margin: 1rem auto; } .cdb-jobs-page__pager { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; } .cdb-jobs-page__pager-link { color: var(--cdb-accent); text-decoration: none; font-weight: 600; } .cdb-jobs-page__pager-link:hover { text-decoration: underline; } .cdb-jobs-page__pager-link.is-disabled { opacity: 0.35; pointer-events: none; } .cdb-jobs-page--show .cdb-jobs-page__back { margin-bottom: 1rem; font-size: 0.95rem; } .cdb-jobs-page--show .cdb-jobs-page__back a { color: var(--cdb-muted); text-decoration: none; } .cdb-job-detail { max-width: 800px; margin: 0 auto; } .cdb-job-detail__head h1 { font-family: var(--font-display); font-size: clamp(1.35rem, 3vw, 1.85rem); margin: 0 0 0.5rem; } .cdb-job-detail__company { color: var(--cdb-muted); margin: 0 0 1rem; } .cdb-job-detail__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.9rem; color: var(--cdb-muted); } .cdb-job-detail__section { margin-top: 1.75rem; } .cdb-job-detail__section h2 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 0.5rem; } .cdb-job-detail__body { line-height: 1.6; color: var(--cdb-text); } .cdb-job-detail__apply { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--cdb-border); } .cdb-job-detail__note { color: var(--cdb-muted); } .cdb-job-apply-form { margin-top: 1rem; } .cdb-jobs-download-banner { padding: 2rem 0; } .cdb-cta-band--compact { padding: 1.75rem 1.5rem; } .cdb-cta-band--compact p { margin-bottom: 1rem; } .cdb-error-list { list-style: disc; padding-left: 1.25rem; color: #ff6b6b; margin: 1rem 0; } .cdb-data-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .cdb-data-table th, .cdb-data-table td { padding: 0.75rem 0.85rem; border-bottom: 1px solid var(--cdb-border); text-align: left; vertical-align: top; } .cdb-data-table th { color: var(--cdb-muted); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; } .cdb-data-table a { color: var(--cdb-accent); text-decoration: none; } .cdb-data-table a:hover { text-decoration: underline; } .cdb-admin-table-wrap { overflow-x: auto; margin-top: 1rem; } .cdb-admin-table__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .cdb-admin-actions { margin-bottom: 1rem; } .cdb-admin-job-form__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; } .cdb-inline-form { display: inline; margin: 0; } /* Page intérieure */ .cdb-page-hero { padding: 3rem 0 2rem; text-align: center; } .cdb-page-hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.75rem); margin: 0 0 1rem; } .cdb-page-hero p { color: var(--cdb-muted); max-width: 560px; margin: 0 auto; font-size: 1.1rem; } /* Galerie captures app */ .cdb-screens { padding: clamp(3rem, 8vw, 5rem) 0; } .cdb-screens__showcase { display: flex; gap: clamp(1.25rem, 3vw, 2rem); overflow-x: auto; padding: 1.25rem clamp(0.5rem, 2vw, 1rem) 2.5rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scroll-padding-inline: clamp(0.5rem, 4vw, 2rem); } .cdb-screens__showcase::-webkit-scrollbar { height: 8px; } .cdb-screens__showcase::-webkit-scrollbar-thumb { background: linear-gradient(90deg, rgba(38, 198, 218, 0.35), rgba(30, 136, 255, 0.25)); border-radius: 4px; } .cdb-screen-card { flex: 0 0 auto; scroll-snap-align: center; text-align: center; width: min(280px, 78vw); } .cdb-screen-card__frame { margin-bottom: 1.15rem; } .cdb-screen-card h3 { font-size: 1.02rem; margin: 0 0 0.4rem; font-family: var(--font-display); letter-spacing: 0.02em; } .cdb-screen-card p { font-size: 0.88rem; color: var(--cdb-muted); margin: 0; line-height: 1.45; max-width: 28ch; margin-inline: auto; } .cdb-hero-shot { position: relative; display: flex; justify-content: center; perspective: 1200px; transform-style: preserve-3d; } .cdb-hero-shot__device { width: min(300px, 85vw); } .cdb-hero-shot__badge { position: absolute; z-index: 2; padding: 0.6rem 1rem; border-radius: 12px; background: var(--cdb-glass); backdrop-filter: blur(12px); border: 1px solid var(--cdb-border); font-size: 0.82rem; font-weight: 600; box-shadow: var(--cdb-shadow); } .cdb-hero-shot__badge--tl { top: 5%; left: -5%; } .cdb-hero-shot__badge--br { bottom: 8%; right: -8%; color: var(--cdb-cta); } /* Cadre « smartphone » — hero, galerie Interface, page Fonctionnalités */ .cdb-device-frame { position: relative; padding: 11px; border-radius: 36px; background: linear-gradient(165deg, rgba(255, 255, 255, 0.09) 0%, transparent 45%), linear-gradient(205deg, #2a3548 0%, #0c1018 42%, #141c2b 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 10px rgba(0, 0, 0, 0.4), 0 28px 56px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.55); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; } .cdb-device-frame--compact { padding: 9px; border-radius: 30px; } .cdb-device-frame__display { border-radius: 26px; overflow: hidden; background: #03060c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 18px 40px rgba(0, 0, 0, 0.35); } .cdb-device-frame--compact .cdb-device-frame__display { border-radius: 22px; } .cdb-device-frame__display img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; object-position: top center; transform: translateZ(0); } .cdb-device-frame--gallery .cdb-device-frame__display img { object-fit: contain; object-position: center top; background: radial-gradient(ellipse 85% 55% at 50% 0%, #1a2436 0%, #03060c 75%); } .cdb-device-frame--feature .cdb-device-frame__display img { aspect-ratio: auto; max-height: min(460px, 70vh); object-fit: contain; object-position: center top; background: #03060c; } .cdb-device-frame::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -12px; height: 20px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(38, 198, 218, 0.2), transparent 70%); opacity: 0.7; pointer-events: none; z-index: 0; } .cdb-screen-card .cdb-device-frame { z-index: 1; } .cdb-screen-card:hover .cdb-device-frame { transform: translateY(-5px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -2px 10px rgba(0, 0, 0, 0.4), 0 38px 72px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(38, 198, 218, 0.22); } @media (prefers-reduced-motion: reduce) { .cdb-screen-card:hover .cdb-device-frame { transform: none; } } @media (min-width: 1280px) { .cdb-device-frame--feature .cdb-device-frame__display img { max-height: min(520px, 72vh); } } /* Stores / intégrations (tuiles) */ .cdb-stores { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; justify-content: flex-start; } .cdb-cta-band .cdb-stores, .cdb-download .cdb-stores { justify-content: center; } .cdb-footer__brand .cdb-stores { justify-content: flex-start; } .cdb-store-tile { position: relative; display: inline-flex; align-items: center; gap: 0.85rem; min-height: 3.25rem; padding: 0.65rem 1rem 0.65rem 0.75rem; border-radius: 14px; background: var(--cdb-store-tile-bg); border: 1px solid var(--cdb-store-tile-border); color: var(--cdb-text); text-decoration: none; box-shadow: var(--cdb-store-tile-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s, box-shadow 0.22s; } .cdb-store-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.25s ease; background: linear-gradient(135deg, rgba(38, 198, 218, 0.12), transparent 55%); } .cdb-store-tile:hover { transform: translateY(-2px); border-color: rgba(38, 198, 218, 0.35); box-shadow: var(--cdb-store-tile-shadow), 0 0 0 1px rgba(38, 198, 218, 0.12); } .cdb-store-tile:hover::after { opacity: 1; } .cdb-store-tile:focus-visible { outline: 2px solid var(--cdb-accent); outline-offset: 2px; } .cdb-store-tile__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; } .cdb-store-tile__icon svg { display: block; width: 32px; height: 32px; } .cdb-store-tile__text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; min-width: 0; } .cdb-store-tile__kicker { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cdb-muted); line-height: 1.2; } .cdb-store-tile__name { font-size: 0.98rem; font-weight: 700; line-height: 1.2; } .cdb-store-tile__arrow { margin-left: auto; padding-left: 0.25rem; font-size: 1.1rem; opacity: 0.55; transition: transform 0.2s ease, opacity 0.2s ease; } .cdb-store-tile:hover .cdb-store-tile__arrow { opacity: 0.95; transform: translateX(3px); } .cdb-store-tile--play { min-width: 11.5rem; } .cdb-store-tile--apple { min-width: 11.5rem; } .cdb-store-tile--apple .cdb-store-tile__icon svg { border-radius: 8px; } .cdb-store-tile--portal { border-color: rgba(38, 198, 218, 0.28); background: linear-gradient(135deg, rgba(38, 198, 218, 0.14), var(--cdb-store-tile-bg)); } html[data-theme="light"] .cdb-store-tile--portal { background: linear-gradient(135deg, rgba(10, 158, 180, 0.12), var(--cdb-store-tile-bg)); } .cdb-store-tile--disabled { opacity: 0.48; pointer-events: none; filter: grayscale(0.35); } .cdb-store-tile--disabled::after { display: none; } /* Ancien nom de classe (rétrocompat) */ .cdb-store-badge { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; border-radius: 14px; background: var(--cdb-store-tile-bg); border: 1px solid var(--cdb-store-tile-border); color: var(--cdb-text); text-decoration: none; transition: transform 0.2s, border-color 0.2s; min-width: 200px; } .cdb-store-badge:hover { transform: translateY(-2px); border-color: rgba(38, 198, 218, 0.25); } .cdb-store-badge small { display: block; font-size: 0.7rem; opacity: 0.7; } .cdb-store-badge strong { font-size: 1rem; } .cdb-store-badge--disabled { opacity: 0.45; pointer-events: none; } .cdb-store-badge--portal { background: linear-gradient(135deg, rgba(38, 198, 218, 0.2), rgba(30, 136, 255, 0.1)); border-color: rgba(38, 198, 218, 0.35); } /* FAQ */ .cdb-faq { max-width: 720px; margin: 0 auto; } .cdb-faq details { background: var(--cdb-bg-elevated); border: 1px solid var(--cdb-border); border-radius: var(--cdb-radius); margin-bottom: 0.75rem; padding: 0; } .cdb-faq summary { padding: 1.15rem 1.25rem; cursor: pointer; font-weight: 600; list-style: none; } .cdb-faq summary::-webkit-details-marker { display: none; } .cdb-faq details[open] summary { border-bottom: 1px solid var(--cdb-border); color: var(--cdb-accent); } .cdb-faq details p { padding: 1rem 1.25rem 1.25rem; margin: 0; color: var(--cdb-muted); font-size: 0.98rem; line-height: 1.65; } /* Contact — page dédiée */ .cdb-contact-section { padding-top: clamp(2rem, 5vw, 3rem); } .cdb-contact-layout { max-width: var(--cdb-container-max); margin: 0 auto; padding-bottom: clamp(3rem, 8vw, 5rem); } .cdb-contact-lead { margin: 0 0 2.25rem; max-width: 52rem; font-size: 1.05rem; line-height: 1.7; color: var(--cdb-muted); } .cdb-contact-channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; } .cdb-download-section-head { margin-bottom: 0.25rem; } .cdb-download-section-head + .cdb-download-stores { margin-top: 1.25rem; } .cdb-contact-card { position: relative; display: flex; flex-direction: column; padding: 1.75rem 1.75rem 1.65rem; border-radius: var(--cdb-radius-lg); overflow: hidden; background: linear-gradient(165deg, var(--cdb-bg-card) 0%, var(--cdb-bg-elevated) 55%); border: 1px solid var(--cdb-border); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28); transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; } .cdb-contact-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: var(--cdb-radius-lg) var(--cdb-radius-lg) 0 0; background: linear-gradient(90deg, var(--cdb-accent), var(--cdb-blue)); opacity: 0.92; z-index: 1; } .cdb-contact-card > * { position: relative; z-index: 2; } html[data-theme="light"] .cdb-contact-card { box-shadow: var(--cdb-store-tile-shadow); } .cdb-contact-card:hover { transform: translateY(-3px); border-color: rgba(38, 198, 218, 0.28); box-shadow: 0 26px 52px rgba(0, 0, 0, 0.38); } html[data-theme="light"] .cdb-contact-card:hover { box-shadow: var(--cdb-store-tile-shadow), 0 0 0 1px rgba(10, 158, 180, 0.12); } .cdb-contact-card__header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; } .cdb-contact-card__title { margin: 0; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.3; color: var(--cdb-text); } .cdb-contact-card__text { margin: 0 0 1.35rem; flex: 1; font-size: 0.98rem; line-height: 1.65; color: var(--cdb-muted); } .cdb-contact-card__text--fleet { margin-bottom: 0; margin-top: 0.35rem; } .cdb-contact-card__actions { display: flex; flex-direction: column; gap: 0.85rem; margin-top: auto; } .cdb-contact-card__mailto { font-size: 0.88rem; font-weight: 500; color: var(--cdb-accent); text-decoration: none; word-break: break-all; transition: color 0.2s ease; } .cdb-contact-card__mailto:hover { color: var(--cdb-blue); text-decoration: underline; } .cdb-contact-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 14px; color: var(--cdb-accent); background: var(--cdb-accent-dim); border: 1px solid rgba(38, 198, 218, 0.22); } .cdb-contact-icon--ideas { color: var(--cdb-cta); background: rgba(255, 138, 0, 0.12); border-color: rgba(255, 138, 0, 0.25); } .cdb-contact-icon--fleet { color: var(--cdb-blue); background: rgba(30, 136, 255, 0.12); border-color: rgba(30, 136, 255, 0.22); } .cdb-contact-card--fleet { grid-column: 1 / -1; padding: 1.5rem 1.75rem; background: linear-gradient(135deg, rgba(38, 198, 218, 0.1) 0%, var(--cdb-bg-card) 38%, var(--cdb-bg-elevated) 100%); } html[data-theme="light"] .cdb-contact-card--fleet { background: linear-gradient(135deg, rgba(10, 158, 180, 0.1) 0%, var(--cdb-bg-card) 38%, var(--cdb-bg-elevated) 100%); } .cdb-contact-card__fleet-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem 1.5rem; align-items: center; } .cdb-contact-card__fleet-head { display: flex; gap: 1rem; align-items: flex-start; min-width: 0; } .cdb-contact-card__fleet-cta { display: flex; justify-content: flex-end; } .cdb-contact-aside { margin-top: 2.5rem; padding: 1.5rem 1.75rem; border-radius: var(--cdb-radius); background: var(--cdb-bg-card); border: 1px solid var(--cdb-border); } .cdb-contact-aside__title { margin: 0 0 0.65rem; font-size: 0.95rem; font-weight: 700; font-family: var(--font-body); letter-spacing: 0.03em; text-transform: uppercase; color: var(--cdb-muted); } .cdb-contact-aside__text { margin: 0 0 1rem; font-size: 0.92rem; line-height: 1.65; color: var(--cdb-muted); } .cdb-contact-aside__link { font-weight: 600; font-size: 0.95rem; color: var(--cdb-accent); text-decoration: none; } .cdb-contact-aside__link:hover { text-decoration: underline; color: var(--cdb-blue); } @media (max-width: 768px) { .cdb-contact-channels { grid-template-columns: 1fr; } .cdb-contact-card__fleet-grid { grid-template-columns: 1fr; } .cdb-contact-card__fleet-cta { justify-content: stretch; } .cdb-contact-card__fleet-cta .cdb-btn { width: 100%; justify-content: center; } .cdb-hero-shot__badge--tl { left: 0; } .cdb-hero-shot__badge--br { right: 0; } } /* Fil d’Ariane (pages internes type Aperçu) */ .cdb-breadcrumb { padding: 0.75rem var(--cdb-container-pad-x, 1rem) 0; max-width: var(--cdb-container-max); margin: 0 auto; } .cdb-breadcrumb__list { display: flex; flex-wrap: wrap; gap: 0.35rem 0.65rem; align-items: center; list-style: none; margin: 0; padding: 0; font-size: 0.88rem; color: var(--cdb-muted); } .cdb-breadcrumb__list li:not(:last-child)::after { content: '/'; margin-left: 0.65rem; opacity: 0.45; } .cdb-breadcrumb__list a { color: var(--cdb-accent); text-decoration: none; font-weight: 600; } .cdb-breadcrumb__list a:hover { text-decoration: underline; } /* Accueil : teaser vers page Aperçu */ .cdb-captures-teaser { padding-block: clamp(2rem, 5vw, 3.5rem); } .cdb-captures-teaser__head { text-align: center; max-width: 44rem; margin: 0 auto 2rem; } .cdb-captures-teaser__lead { margin: 0.75rem 0 1.25rem; color: var(--cdb-muted); line-height: 1.55; } .cdb-captures-teaser__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .cdb-captures-teaser__shots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; max-width: 1100px; margin-inline: auto; } .cdb-captures-teaser__figure { margin: 0; display: flex; flex-direction: column; gap: 0.65rem; } .cdb-captures-teaser__figure figcaption { font-size: 0.88rem; color: var(--cdb-muted); line-height: 1.45; } .cdb-captures-teaser__figure figcaption strong { display: block; color: var(--cdb-text); font-size: 0.95rem; margin-bottom: 0.15rem; } /* Page Aperçu */ .cdb-preview-intro { text-align: center; max-width: 46rem; margin: 0 auto; } .cdb-preview-intro__text { margin: 0 0 1.25rem; font-size: 1.02rem; line-height: 1.65; color: var(--cdb-muted); } .cdb-preview-intro__links { display: flex; flex-wrap: wrap; gap: 0.65rem; justify-content: center; } /* Contact — formulaire + encart */ .cdb-contact-form-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: 1.75rem; align-items: start; margin-bottom: 0.5rem; } .cdb-contact-form-panel__title { margin: 0 0 0.5rem; font-family: var(--font-display); font-size: 1.2rem; } .cdb-contact-form-panel__lead { margin: 0 0 1.25rem; font-size: 0.95rem; color: var(--cdb-muted); line-height: 1.55; } .cdb-contact-flash { padding: 0.85rem 1rem; border-radius: var(--cdb-radius-md, 10px); font-size: 0.95rem; margin: 0 0 1rem; } .cdb-contact-flash--ok { background: rgba(46, 204, 113, 0.12); border: 1px solid rgba(46, 204, 113, 0.35); color: var(--cdb-text); } .cdb-contact-flash--err { background: rgba(255, 82, 82, 0.1); border: 1px solid rgba(255, 82, 82, 0.35); color: var(--cdb-text); } .cdb-contact-form .cdb-field textarea { min-height: 8rem; } .cdb-contact-form__privacy { font-size: 0.82rem; color: var(--cdb-muted); line-height: 1.45; margin: 0 0 1rem; } .cdb-contact-aside--form { margin-top: 0; } .cdb-contact-aside__email { margin: 0 0 1rem; font-size: 0.92rem; line-height: 1.5; color: var(--cdb-muted); } .cdb-contact-aside__label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cdb-muted); margin-bottom: 0.25rem; } .cdb-contact-channels-title { margin: 0 0 0.5rem; font-family: var(--font-display); font-size: 1.35rem; } .cdb-contact-channels-lead { margin: 0 0 1.75rem; max-width: 44rem; color: var(--cdb-muted); line-height: 1.55; } .cdb-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } @media (max-width: 900px) { .cdb-contact-form-grid { grid-template-columns: 1fr; } } /* Accessibilité */ .cdb-skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; padding: 0.75rem 1rem; background: var(--cdb-cta); color: var(--cdb-on-cta); font-weight: 600; text-decoration: none; border-radius: 0 0 8px 0; } .cdb-skip-link:focus { left: 0; } /* Basculer thème clair / sombre */ .cdb-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 12px; border: 1px solid var(--cdb-border); background: var(--cdb-bg-elevated); color: var(--cdb-text); cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.2s; } .cdb-theme-toggle:hover { border-color: rgba(38, 198, 218, 0.45); background: var(--cdb-surface); } .cdb-theme-toggle:active { transform: scale(0.96); } .cdb-theme-toggle__icon { display: flex; align-items: center; justify-content: center; line-height: 0; } .cdb-theme-toggle__icon svg { display: block; } .cdb-theme-toggle__icon--light { display: flex; } .cdb-theme-toggle__icon--dark { display: none; } html[data-theme="light"] .cdb-theme-toggle__icon--light { display: none; } html[data-theme="light"] .cdb-theme-toggle__icon--dark { display: flex; } /* Sélecteur de langue */ .cdb-locale { display: flex; align-items: center; gap: 0.5rem; } .cdb-locale__label { font-size: 0.8rem; color: var(--cdb-muted); display: none; } @media (min-width: 1100px) { .cdb-locale__label { display: inline; } } .cdb-locale__select { background: var(--cdb-bg); color: var(--cdb-text); border: 1px solid var(--cdb-border); border-radius: 10px; padding: 0.45rem 0.65rem; font-size: 0.85rem; max-width: 9rem; } /* Locale auto-detected: hide any legacy language switcher UI if still rendered. */ .cdb-locale[data-locale-switcher], #cdb-locale-select, .cdb-locale__label, .cdb-locale__select { display: none !important; } .cdb-feature-visual--shot { padding: 1.25rem !important; min-height: auto !important; overflow: visible !important; } .cdb-feature-visual--shot::after { opacity: 0.22; } .cdb-feature-visual--shot .cdb-device-frame { width: 100%; max-width: min(360px, 100%); margin-inline: auto; } .cdb-panel__back { text-align: center; margin-top: 1.5rem; font-size: 0.9rem; } .cdb-panel__back a { color: var(--cdb-muted); } .cdb-download { text-align: center; } /* ============================ ADMIN DASHBOARD — Pro Styles ============================ */ /* Topbar */ .cdb-admin-topbar { background: var(--cdb-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--cdb-border); padding: 1rem 0; } .cdb-admin-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .cdb-admin-topbar__badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.85rem; border-radius: 999px; background: rgba(255, 107, 107, 0.12); border: 1px solid rgba(255, 107, 107, 0.3); color: #ff6b6b; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .cdb-admin-topbar__title { font-family: var(--font-display); font-size: 1.5rem; margin: 0.5rem 0 0; font-weight: 700; } .cdb-admin-topbar__right { display: flex; align-items: center; gap: 1.25rem; } /* User avatar card */ .cdb-admin-user { display: flex; align-items: center; gap: 0.75rem; } .cdb-admin-user__avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 107, 107, 0.4); box-shadow: 0 0 16px rgba(255, 107, 107, 0.2); } .cdb-admin-user__avatar--placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ff6b6b, #e74c3c); color: #fff; font-weight: 700; font-size: 1.1rem; } .cdb-admin-user__info { display: flex; flex-direction: column; line-height: 1.3; } .cdb-admin-user__info strong { font-size: 0.92rem; color: var(--cdb-text); } .cdb-admin-user__info small { font-size: 0.78rem; color: var(--cdb-muted); } .cdb-btn--sm { padding: 0.55rem 1rem; font-size: 0.85rem; } /* Admin body */ .cdb-admin-body { padding: 2rem 0 4rem; } /* KPI Grid */ .cdb-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-bottom: 2.5rem; } .cdb-kpi-card { padding: 1.75rem; border-radius: var(--cdb-radius); background: var(--cdb-bg-elevated); border: 1px solid var(--cdb-border); display: flex; align-items: flex-start; gap: 1rem; position: relative; overflow: hidden; transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; } .cdb-kpi-card:hover { transform: translateY(-4px); border-color: rgba(255, 107, 107, 0.3); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3); } .cdb-kpi-card--animate { opacity: 0; transform: translateY(20px); animation: kpiFadeIn 0.5s ease-out forwards; animation-delay: calc(var(--delay, 0) * 0.1s); } @keyframes kpiFadeIn { to { opacity: 1; transform: translateY(0); } } .cdb-kpi-card__icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; } .cdb-kpi-card__icon--users { background: rgba(38, 198, 218, 0.15); } .cdb-kpi-card__icon--cb { background: rgba(255, 138, 0, 0.15); } .cdb-kpi-card__icon--ai { background: rgba(168, 85, 247, 0.15); } .cdb-kpi-card__icon--gps { background: rgba(34, 197, 94, 0.15); } .cdb-kpi-card__data { flex: 1; } .cdb-kpi-card__value { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--cdb-text); line-height: 1.1; } .cdb-kpi-card__label { display: block; font-size: 0.85rem; color: var(--cdb-muted); margin-top: 0.25rem; } .cdb-kpi-card__trend { position: absolute; top: 1rem; right: 1rem; font-size: 0.78rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; } .cdb-kpi-card__trend--up { background: rgba(34, 197, 94, 0.15); color: #22c55e; } .cdb-kpi-card__trend--down { background: rgba(239, 68, 68, 0.15); color: #ef4444; } .cdb-kpi-card__trend--neutral { background: rgba(255, 255, 255, 0.06); color: var(--cdb-muted); } /* Admin panels */ .cdb-admin-panels { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; } .cdb-admin-panel { border-radius: var(--cdb-radius); background: var(--cdb-bg-elevated); border: 1px solid var(--cdb-border); overflow: hidden; } .cdb-admin-panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--cdb-border); } .cdb-admin-panel__head h2 { font-family: var(--font-display); font-size: 1.05rem; margin: 0; font-weight: 600; } .cdb-admin-panel__body { padding: 1.5rem; } .cdb-admin-panel__note { margin: 1rem 0 0; font-size: 0.82rem; color: var(--cdb-muted); } /* Admin table */ .cdb-admin-table { width: 100%; border-collapse: collapse; } .cdb-admin-table th, .cdb-admin-table td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--cdb-border); font-size: 0.92rem; } .cdb-admin-table th { color: var(--cdb-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; } .cdb-admin-table tr:last-child td { border-bottom: none; } /* Status badges */ .cdb-status { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; } .cdb-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; } .cdb-status--active { background: rgba(34, 197, 94, 0.12); color: #22c55e; } .cdb-status--active::before { background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, 0.5); } .cdb-status--inactive { background: rgba(255, 255, 255, 0.06); color: var(--cdb-muted); } .cdb-status--inactive::before { background: var(--cdb-muted); } /* Quick actions */ .cdb-admin-actions { display: flex; flex-direction: column; gap: 0.75rem; } .cdb-admin-action { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; border-radius: 12px; background: var(--cdb-bg); border: 1px solid var(--cdb-border); text-decoration: none; color: var(--cdb-text); font-size: 0.92rem; font-weight: 500; transition: background 0.2s, border-color 0.2s, transform 0.2s; } .cdb-admin-action:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 107, 107, 0.3); transform: translateX(4px); } .cdb-admin-action__icon { font-size: 1.2rem; } /* Login button loader spinner */ .cdb-btn__loader { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: btnSpin 0.6s linear infinite; position: absolute; } .cdb-btn-google .cdb-btn__loader { border-color: rgba(0, 0, 0, 0.15); border-top-color: #333; } @keyframes btnSpin { to { transform: rotate(360deg); } } .cdb-btn { position: relative; } /* Panel shield icon */ .cdb-panel__icon { font-size: 2.5rem; text-align: center; margin-bottom: 1rem; } /* Admin responsive */ @media (max-width: 900px) { .cdb-admin-panels { grid-template-columns: 1fr; } .cdb-admin-topbar__inner { flex-direction: column; align-items: flex-start; } .cdb-admin-topbar__right { width: 100%; justify-content: space-between; } } /* CTA band inline style replacement */ .cdb-cta-band__buttons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 1.5rem; } /* Portail chauffeur : bascule connexion / inscription */ .cdb-auth-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; } .cdb-auth-tabs button { flex: 1; padding: 0.55rem 0.75rem; border-radius: 10px; border: 1px solid var(--cdb-border); background: transparent; color: var(--cdb-muted); font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; } .cdb-auth-tabs button:hover { color: var(--cdb-text); border-color: rgba(255, 255, 255, 0.15); } .cdb-auth-tabs button.is-active { background: var(--cdb-accent-dim); border-color: rgba(38, 198, 218, 0.35); color: var(--cdb-accent); } .cdb-field--hidden { display: none !important; } .cdb-auth-info-msg { margin-top: 0.75rem; color: var(--cdb-accent); } .cdb-auth-resend { margin-top: 0.75rem; } .cdb-auth-forgot-link { display: inline; padding: 0; margin: 0; border: none; background: none; color: var(--cdb-accent); font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; text-decoration: underline; cursor: pointer; } .cdb-auth-forgot-link:hover { color: var(--cdb-text); } .cdb-auth-forgot-link:disabled { opacity: 0.55; cursor: not-allowed; } /* Admin hub, nav, CMS, telemetry */ .cdb-admin-topbar__sub { margin: 0.35rem 0 0; font-size: 0.95rem; color: var(--cdb-muted); font-weight: 500; max-width: 42rem; } .cdb-admin-nav { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .cdb-admin-nav__inner { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; } .cdb-admin-nav__link { font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: var(--cdb-muted); text-decoration: none; padding: 0.35rem 0.5rem; border-radius: 8px; border: 1px solid transparent; transition: color 0.2s, border-color 0.2s, background 0.2s; } .cdb-admin-nav__link:hover { color: var(--cdb-text); } .cdb-admin-nav__link.is-active { color: var(--cdb-accent); border-color: rgba(38, 198, 218, 0.35); background: var(--cdb-accent-dim); } .cdb-admin-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-top: 0.5rem; } .cdb-admin-hub-card { display: block; padding: 1.5rem; border-radius: 16px; border: 1px solid var(--cdb-border); background: rgba(255, 255, 255, 0.02); text-decoration: none; color: inherit; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; } .cdb-admin-hub-card:hover { border-color: rgba(38, 198, 218, 0.45); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); } .cdb-admin-hub-card__icon { font-size: 1.75rem; display: block; margin-bottom: 0.75rem; } .cdb-admin-hub-card h2 { font-size: 1.1rem; margin: 0 0 0.5rem; font-family: var(--font-display); } .cdb-admin-hub-card p { margin: 0; font-size: 0.9rem; color: var(--cdb-muted); line-height: 1.45; } .cdb-admin-alert { padding: 0.85rem 1rem; border-radius: 12px; margin-bottom: 1.25rem; border: 1px solid rgba(255, 180, 80, 0.4); background: rgba(255, 180, 80, 0.08); color: var(--cdb-text); } .cdb-admin-alert--success { border-color: rgba(80, 220, 160, 0.45); background: rgba(80, 220, 160, 0.1); } .cdb-admin-table__empty { text-align: center; color: var(--cdb-muted); padding: 1.5rem 1rem !important; } .cdb-site-cms-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.25rem; margin-bottom: 1.5rem; } .cdb-site-cms-locale { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; color: var(--cdb-muted); } .cdb-site-cms-locale select { min-width: 12rem; padding: 0.5rem 0.65rem; border-radius: 10px; border: 1px solid var(--cdb-border); background: rgba(0, 0, 0, 0.25); color: var(--cdb-text); font-family: var(--font-body); } .cdb-site-cms-hint { margin: 0; flex: 1; min-width: 200px; font-size: 0.88rem; color: var(--cdb-muted); line-height: 1.45; } .cdb-site-cms-group { border: 1px solid var(--cdb-border); border-radius: 16px; padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; background: rgba(255, 255, 255, 0.02); } .cdb-site-cms-group legend { padding: 0 0.5rem; font-family: var(--font-display); font-size: 1rem; color: var(--cdb-accent); } .cdb-site-cms-field { margin-top: 1rem; } .cdb-site-cms-field:first-of-type { margin-top: 0.5rem; } .cdb-site-cms-field label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--cdb-muted); margin-bottom: 0.35rem; word-break: break-all; } .cdb-site-cms-field textarea { width: 100%; box-sizing: border-box; padding: 0.65rem 0.75rem; border-radius: 10px; border: 1px solid var(--cdb-border); background: rgba(0, 0, 0, 0.3); color: var(--cdb-text); font-family: var(--font-body); font-size: 0.95rem; line-height: 1.45; resize: vertical; } .cdb-site-cms-default { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--cdb-muted); line-height: 1.4; } .cdb-site-cms-default span { font-weight: 600; color: var(--cdb-text); } .cdb-site-cms-actions { margin-top: 1rem; margin-bottom: 2rem; } .cdb-telemetry-scroll { overflow-x: auto; } .cdb-telemetry-payload pre { margin: 0; font-size: 0.72rem; max-width: 28rem; white-space: pre-wrap; word-break: break-word; color: var(--cdb-muted); } .cdb-admin-usage-chart { height: 280px; position: relative; } .cdb-admin-usage-map { min-height: 460px; width: 100%; } /* Admin shell (sidebar + workspace, inspiré des dashboards Laravel type Colorlib) */ .cdb-main--admin { max-width: none; width: 100%; padding-left: 0; padding-right: 0; } .cdb-admin-shell { display: flex; align-items: stretch; min-height: calc(100vh - 1.5rem); } .cdb-admin-sidebar { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; padding: 1.25rem 0.85rem; border-right: 1px solid var(--cdb-border); background: linear-gradient(180deg, rgba(6, 14, 28, 0.95), rgba(4, 9, 19, 0.98)); } .cdb-admin-sidebar__brand-link { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: inherit; padding: 0.35rem 0.5rem; border-radius: 12px; transition: background 0.2s; } .cdb-admin-sidebar__brand-link:hover { background: rgba(255, 255, 255, 0.04); } .cdb-admin-sidebar__brand-mark { font-size: 1.5rem; line-height: 1; } .cdb-admin-sidebar__brand-text { display: flex; flex-direction: column; gap: 0.1rem; } .cdb-admin-sidebar__brand-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.02em; } .cdb-admin-sidebar__brand-sub { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cdb-muted); } .cdb-admin-sidebar__label { margin: 1.25rem 0 0.4rem 0.5rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--cdb-muted); } .cdb-admin-sidebar__nav { flex: 1; } .cdb-admin-sidebar__link { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.65rem; margin-bottom: 0.15rem; border-radius: 10px; text-decoration: none; font-size: 0.9rem; font-weight: 600; color: var(--cdb-muted); transition: background 0.2s, color 0.2s; } .cdb-admin-sidebar__link:hover { color: var(--cdb-text); background: rgba(255, 255, 255, 0.04); } .cdb-admin-sidebar__link.is-active { color: var(--cdb-accent); background: var(--cdb-accent-dim); border: 1px solid rgba(38, 198, 218, 0.28); } .cdb-admin-sidebar__ico { width: 1.5rem; text-align: center; opacity: 0.85; } .cdb-admin-sidebar__footer { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 0.35rem; } .cdb-admin-sidebar__muted { font-size: 0.82rem; color: var(--cdb-muted); text-decoration: none; padding: 0.35rem 0.5rem; } .cdb-admin-sidebar__muted:hover { color: var(--cdb-accent); } .cdb-admin-shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.12); } .cdb-admin-shell__header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(4, 9, 19, 0.55); } .cdb-admin-shell__title { margin: 0; font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 0.02em; } .cdb-admin-shell__sub { margin: 0.35rem 0 0; font-size: 0.92rem; color: var(--cdb-muted); max-width: 52rem; line-height: 1.45; } .cdb-admin-shell__header-user { display: flex; align-items: center; gap: 0.75rem; } .cdb-admin-logout-form { margin: 0; display: flex; align-items: center; } .cdb-admin-user--compact .cdb-admin-user__avatar { width: 36px; height: 36px; } .cdb-admin-user--compact .cdb-admin-user__info strong { font-size: 0.88rem; } .cdb-admin-user--compact .cdb-admin-user__info small { font-size: 0.72rem; } .cdb-admin-shell__body { padding: 1.25rem 1.5rem 2.5rem; flex: 1; } .cdb-admin-hub-intro { margin-bottom: 1.25rem; max-width: 52rem; } .cdb-admin-hub-intro p { margin: 0; color: var(--cdb-muted); line-height: 1.5; } .cdb-admin-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .cdb-admin-stat { border-radius: 14px; border: 1px solid var(--cdb-border); background: rgba(255, 255, 255, 0.03); padding: 1rem 1.1rem; } .cdb-admin-stat--wide { grid-column: span 2; } .cdb-admin-stat__label { display: block; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cdb-muted); margin-bottom: 0.35rem; } .cdb-admin-stat__value { font-family: var(--font-display); font-size: 1.65rem; letter-spacing: 0.02em; } .cdb-admin-stat__hint { display: block; margin-top: 0.35rem; font-size: 0.78rem; color: var(--cdb-muted); line-height: 1.35; } .cdb-admin-stat__providers { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.35rem 1rem; font-size: 0.85rem; color: var(--cdb-muted); } .cdb-admin-stat__providers strong { color: var(--cdb-text); margin-left: 0.25rem; } .cdb-admin-panels--stack { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; } .cdb-admin-panel--span { grid-column: 1 / -1; } .cdb-admin-panel__tag { margin: 0; font-size: 0.78rem; color: var(--cdb-muted); max-width: 28rem; line-height: 1.35; } .cdb-admin-panel__lead { margin: 0 0 0.75rem; color: var(--cdb-muted); line-height: 1.45; font-size: 0.92rem; } .cdb-admin-actions--vertical { flex-direction: column; align-items: stretch; } .cdb-admin-actions--vertical .cdb-btn { justify-content: center; } .cdb-admin-kv { list-style: none; margin: 0 0 1rem; padding: 0; } .cdb-admin-kv li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.9rem; color: var(--cdb-muted); } .cdb-admin-kv strong { color: var(--cdb-text); font-variant-numeric: tabular-nums; } .cdb-admin-domain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .cdb-admin-domain-card { position: relative; border-radius: 14px; border: 1px dashed rgba(255, 255, 255, 0.18); padding: 1rem 1.1rem; background: rgba(0, 0, 0, 0.2); } .cdb-admin-domain-card__badge { position: absolute; top: 0.65rem; right: 0.65rem; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.2rem 0.45rem; border-radius: 6px; background: rgba(255, 180, 80, 0.15); color: #ffc266; } .cdb-admin-domain-card h3 { margin: 0 0 0.5rem; font-size: 1rem; font-family: var(--font-display); } .cdb-admin-domain-card p { margin: 0; font-size: 0.86rem; color: var(--cdb-muted); line-height: 1.45; } .cdb-site-cms-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 1.5rem; align-items: start; } .cdb-site-cms-toc__title { margin: 0 0 0.65rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cdb-muted); } .cdb-site-cms-toc__list { list-style: none; margin: 0; padding: 0; } .cdb-site-cms-toc__list a { display: block; padding: 0.35rem 0.25rem; font-size: 0.86rem; font-weight: 600; color: var(--cdb-muted); text-decoration: none; border-radius: 8px; } .cdb-site-cms-toc__list a:hover { color: var(--cdb-accent); background: rgba(38, 198, 218, 0.08); } .cdb-site-cms-toc { position: sticky; top: 1rem; border: 1px solid var(--cdb-border); border-radius: 14px; padding: 1rem 0.85rem; background: rgba(255, 255, 255, 0.02); } .cdb-site-cms-main { min-width: 0; } @media (max-width: 960px) { .cdb-admin-shell { flex-direction: column; } .cdb-admin-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: none; border-bottom: 1px solid var(--cdb-border); } .cdb-admin-sidebar__nav { display: flex; flex-wrap: wrap; gap: 0.25rem; width: 100%; } .cdb-admin-sidebar__label { width: 100%; margin-top: 0.75rem; } .cdb-admin-sidebar__footer { flex-direction: row; flex-wrap: wrap; width: 100%; } .cdb-admin-stat--wide { grid-column: auto; } .cdb-admin-panels--stack { grid-template-columns: 1fr; } .cdb-site-cms-layout { grid-template-columns: 1fr; } .cdb-site-cms-toc { position: static; } } /* -------------------------------------------------------------------------- */ /* Pages d’erreur HTTP (alignement charte marketing + accessibilité) */ /* -------------------------------------------------------------------------- */ .cdb-error-page__inner { text-align: center; max-width: 36rem; margin-inline: auto; padding: clamp(3rem, 8vw, 4.5rem) 1.25rem; } .cdb-error-page__code { margin-bottom: 1.5rem; } .cdb-error-page__code--danger { --cdb-accent: #f44336; border-color: rgba(244, 67, 54, 0.35); background: rgba(244, 67, 54, 0.12); } .cdb-error-page__code--danger::before { background: #f44336; box-shadow: 0 0 12px rgba(244, 67, 54, 0.75); } .cdb-error-page__code--amber { --cdb-accent: #ffc107; border-color: rgba(255, 193, 7, 0.45); background: rgba(255, 193, 7, 0.12); color: #ffe082; } .cdb-error-page__code--amber::before { background: #ffc107; box-shadow: 0 0 12px rgba(255, 193, 7, 0.65); } html[data-theme="light"] .cdb-error-page__code--amber { color: #b45309; } .cdb-error-page__code--orange { --cdb-accent: #ff9800; border-color: rgba(255, 152, 0, 0.4); background: rgba(255, 152, 0, 0.12); } .cdb-error-page__code--orange::before { background: #ff9800; box-shadow: 0 0 12px rgba(255, 152, 0, 0.65); } .cdb-error-page__title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.25rem); margin: 0 0 1rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; } .cdb-error-page__title .cdb-highlight { background: linear-gradient(90deg, var(--cdb-accent), var(--cdb-blue)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cdb-error-page__grad--rose { background: linear-gradient(90deg, #ff1744, #ff8a80) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } .cdb-error-page__grad--red { background: linear-gradient(90deg, #d32f2f, #ef5350) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } .cdb-error-page__grad--amber { background: linear-gradient(90deg, #ffc107, #ffe082) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } html[data-theme="light"] .cdb-error-page__grad--amber { background: linear-gradient(90deg, #f59e0b, #d97706) !important; } .cdb-error-page__grad--orange { background: linear-gradient(90deg, #ff9800, #ffb74d) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } .cdb-error-page__lead { color: var(--cdb-muted); font-size: 1.08rem; margin: 0 0 2rem; line-height: 1.6; } .cdb-error-page__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; align-items: center; } /* -------------------------------------------------------------------------- */ /* États vides (Empty States) premium */ /* -------------------------------------------------------------------------- */ .cdb-admin-table__empty, .cdb-portal-documents__empty, .cdb-portal-jobs__empty, .cdb-jobs-page__empty { padding: 3rem 1.5rem; text-align: center; color: var(--cdb-muted); font-size: 1.1rem; background: rgba(255, 255, 255, 0.02); border: 1px dashed var(--cdb-border); border-radius: var(--cdb-radius); margin: 1.5rem 0; } html[data-theme="light"] .cdb-admin-table__empty, html[data-theme="light"] .cdb-portal-documents__empty, html[data-theme="light"] .cdb-portal-jobs__empty, html[data-theme="light"] .cdb-jobs-page__empty { background: rgba(12, 21, 36, 0.02); }