/* ========================================================== CaseOne Charte — Surcouche de surface ---------------------------------------------------------- S'active quand est présent. Redéfinit les variables --of-* de landing.css vers la palette officielle CaseOne (TOUJOURS sombre, dossier d'enquête, accent OR, surfaces graphite). Ne touche PAS à landing.css. ========================================================== */ /* ---------- Fonts CaseOne ---------- */ /* Special Elite (typewriter titres) · Geist (corps) · Space Mono (labels/badges) */ @import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Space+Mono:wght@400;700&display=swap'); /* ---------- Tokens CaseOne ---------- */ /* Indépendant du data-theme : CaseOne est toujours sombre */ body[data-surface="caseone"] { /* Fonds */ --co-bg: #0B1620; /* fond encre */ --co-bg-soft: #2E3031; /* surfaces graphite */ --co-bg-raised: #383A3C; /* surfaces relevées */ --co-bg-paper: #232325; /* dossier / popovers */ /* Textes */ --co-ink: #E8DDC8; /* papier warm — texte primaire */ --co-ink-dim: #C0B9A5; /* texte secondaire */ --co-ink-mute: #837B6A; /* labels / meta */ /* Accents */ --co-gold: #E4C079; /* OR signature CaseOne */ --co-gold-soft: #D6AD65; /* OR atténué */ --co-bordeaux: #571711; /* tampon bordeaux — rare */ /* Filets */ --co-line: rgba(232, 221, 200, 0.10); --co-line-strong: rgba(232, 221, 200, 0.22); /* Ombres */ --co-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); --co-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.7); --co-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.8); /* Typographies */ --co-font-title: 'Special Elite', 'Courier Prime', 'Courier New', monospace; --co-font-body: 'Geist', 'DM Sans', system-ui, sans-serif; --co-font-mono: 'Space Mono', 'JetBrains Mono', 'SF Mono', Menlo, monospace; } /* ---------- Override variables --of-* de landing.css ---------- Tous les composants de landing.css consomment ces vars, elles sont remappées ici vers la palette CaseOne. */ body[data-surface="caseone"], html[data-theme="clair"] body[data-surface="caseone"], html[data-theme="sombre"] body[data-surface="caseone"] { --of-bg: var(--co-bg); --of-bg-alt: var(--co-bg-soft); --of-text: var(--co-ink); --of-text-secondary: var(--co-ink-dim); --of-text-muted: var(--co-ink-mute); --of-card-bg: var(--co-bg-raised); --of-border: var(--co-line-strong); --of-border-subtle: var(--co-line); --of-nav-bg: rgba(11, 22, 32, 0.92); --of-shadow: var(--co-shadow); --of-shadow-lg: var(--co-shadow-lg); --of-shadow-xl: var(--co-shadow-xl); /* Accent OR — signature CaseOne, dominant */ --of-accent: var(--co-gold); --of-accent-hover: var(--co-gold-soft); --of-accent-light: rgba(228, 192, 121, 0.12); --of-accent-surface: var(--co-gold); --of-accent-surface-hover: var(--co-gold-soft); /* Or remplace aussi le gold de landing.css */ --of-gold: var(--co-gold); --of-gold-light: rgba(228, 192, 121, 0.12); /* Glow OR */ --of-glow: 0 0 60px rgba(228, 192, 121, 0.18); } /* ---------- Surface et typographie de base ---------- */ body[data-surface="caseone"] { background-color: var(--co-bg); color: var(--co-ink); font-family: var(--co-font-body); /* Pas de grain SVG : remplacé par le watermark OpenFrame ci-dessous */ } /* Watermark — logo_empreinte.svg CaseOne, fixe, calqué sur .co-home__empbg de l'app réelle. Le SVG empreinte est NOIR → filter:invert(1) le passe en blanc, visible sur fond encre. Pas de mix-blend-mode : un seul fond opaque sur body, le filigrane est simplement au z-index 0 sous les sections (z-index 1), qui sont transparentes. */ body[data-surface="caseone"]::before { content: ''; position: fixed; inset: 0; background: url('../img/caseone/logo_empreinte.svg') no-repeat center 56% / auto min(85vh, 820px); opacity: 0.07; filter: invert(1); pointer-events: none; z-index: 0; } /* Sélection de texte OR sur encre */ body[data-surface="caseone"] ::selection { background: var(--co-gold); color: var(--co-bg); } /* ---------- Titres — Special Elite (typewriter) ---------- */ body[data-surface="caseone"] h1, body[data-surface="caseone"] h2, body[data-surface="caseone"] h3, body[data-surface="caseone"] .hero__title, body[data-surface="caseone"] .section__title, body[data-surface="caseone"] .demo__title { font-family: var(--co-font-title); font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; color: var(--co-ink); } /* Accents dans les titres héros — OR */ body[data-surface="caseone"] .hero__title-accent, body[data-surface="caseone"] .text--accent { color: var(--co-gold); } /* Strikethrough hero — barré en bordeaux pour contraste dramatique */ body[data-surface="caseone"] .hero__title s { color: var(--co-ink-mute); text-decoration-color: var(--co-bordeaux); } /* ---------- Corps — Geist ---------- */ body[data-surface="caseone"] p, body[data-surface="caseone"] li, body[data-surface="caseone"] td, body[data-surface="caseone"] .hero__subtitle, body[data-surface="caseone"] .section__subtitle { font-family: var(--co-font-body); color: var(--co-ink-dim); } /* ---------- Labels / badges / pills — Space Mono ---------- */ body[data-surface="caseone"] .hero__badge, body[data-surface="caseone"] .steps__number, body[data-surface="caseone"] .compare__badge, body[data-surface="caseone"] .compare__ai-score, body[data-surface="caseone"] .problem__source, body[data-surface="caseone"] .integration__logos-note, body[data-surface="caseone"] .metrics__label, body[data-surface="caseone"] .pricing__tier-range, body[data-surface="caseone"] .pricing__tier-label, body[data-surface="caseone"] .pricing__unit, body[data-surface="caseone"] .footer__link, body[data-surface="caseone"] .footer__copyright, body[data-surface="caseone"] .faq__question { font-family: var(--co-font-mono); } /* ========================================================== NAV PLANEL — port fidèle de la nav planel/linkzen/caseone Préfixe co-nav__ pour éviter toute collision avec landing.css ========================================================== */ /* Conteneur principal */ body[data-surface="caseone"] .co-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: stretch; justify-content: space-between; height: 64px; background: rgba(11, 22, 32, 0.94); border-bottom: 1px solid var(--co-line-strong); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-family: var(--co-font-mono); } /* ---- Zone gauche ---- */ body[data-surface="caseone"] .co-nav__left { display: flex; align-items: center; /* centrage vertical de tous les enfants, dont le frame-trigger */ gap: 0; } /* Brand mark — "LZ" dans cadre + LINKZEN / CASEONE */ body[data-surface="caseone"] .co-nav__brand { display: inline-flex; align-items: center; gap: 12px; padding: 0 14px 0 18px; font-family: var(--co-font-mono); font-size: 13px; letter-spacing: 0.04em; font-weight: 500; color: var(--co-ink); text-transform: uppercase; text-decoration: none; /* Bordure pleine hauteur : align-self stretch pour que le border-right s'étende sur toute la hauteur du header même si co-nav__left est center */ align-self: stretch; border-right: 1px solid var(--co-line-strong); transition: color 0.25s; white-space: nowrap; } body[data-surface="caseone"] .co-nav__brand:hover { color: var(--co-gold); } /* Logo LZ encadré (cadre OpenFrame SVG + texte superposé) */ body[data-surface="caseone"] .co-nav__brand-logo { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 22px; color: var(--co-gold); flex-shrink: 0; } body[data-surface="caseone"] .co-nav__brand-logo svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } body[data-surface="caseone"] .co-nav__brand-logo-lz { position: relative; font-family: var(--co-font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0; color: inherit; z-index: 1; line-height: 1; } /* Nom de marque + sous-titre fil d'Ariane */ body[data-surface="caseone"] .co-nav__brand-name { color: var(--co-ink); font-size: 12px; letter-spacing: 0.08em; transition: color 0.25s; } body[data-surface="caseone"] .co-nav__brand:hover .co-nav__brand-name { color: var(--co-gold); } /* "/ CASEONE" en dim — fil d'Ariane */ body[data-surface="caseone"] .co-nav__brand-sub { display: inline-block; padding-left: 4px; color: var(--co-ink-mute); font-size: 11px; letter-spacing: 0.16em; } /* Séparateur vertical fin entre brand et links */ body[data-surface="caseone"] .co-nav__sep { display: block; width: 1px; background: var(--co-line-strong); margin: 14px 0; /* La séparation visuelle est portée par border-right du brand, ce span sert si le border-right est absent (fallback) */ display: none; } /* Mini-nav des marques numérotées */ body[data-surface="caseone"] .co-nav__links { display: flex; align-items: stretch; /* liens pleine hauteur pour l'indicateur actif en bas */ align-self: stretch; /* le conteneur occupe toute la hauteur du header */ gap: 0; font-family: var(--co-font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; } body[data-surface="caseone"] .co-nav__link { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; color: var(--co-ink-dim); text-decoration: none; transition: color 0.25s, background-color 0.25s; white-space: nowrap; } /* Numéro "01" / "02" injecté en ::before via data-num */ body[data-surface="caseone"] .co-nav__link::before { content: attr(data-num); font-size: 9px; color: var(--co-ink-mute); letter-spacing: 0.14em; flex-shrink: 0; } body[data-surface="caseone"] .co-nav__link:hover { color: var(--co-ink); background: rgba(232, 221, 200, 0.04); } /* État actif — or + soulignement bas */ body[data-surface="caseone"] .co-nav__link--active { color: var(--co-gold); cursor: default; } body[data-surface="caseone"] .co-nav__link--active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--co-gold); } /* ---- Zone droite ---- */ body[data-surface="caseone"] .co-nav__right { display: flex; align-items: stretch; gap: 0; } /* Langue dropdown — réutilise les classes landing.js mais recadrée */ body[data-surface="caseone"] .co-nav__lang { display: flex; align-items: center; border-left: 1px solid var(--co-line-strong); padding: 0 4px; } body[data-surface="caseone"] .co-nav__lang .nav__lang-toggle { color: var(--co-ink-dim); font-family: var(--co-font-mono); font-size: 11px; letter-spacing: 0.1em; padding: 0 12px; height: 100%; background: transparent; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: color 0.22s; } body[data-surface="caseone"] .co-nav__lang .nav__lang-toggle:hover { color: var(--co-gold); } body[data-surface="caseone"] .co-nav__lang .nav__lang-menu { background: var(--co-bg-paper); border: 1px solid var(--co-line-strong); border-radius: 2px; } body[data-surface="caseone"] .co-nav__lang .nav__lang-option:hover { background: var(--co-bg-raised); color: var(--co-gold); } /* CTA Jouer la démo */ body[data-surface="caseone"] .co-nav__cta { display: inline-flex; align-items: center; padding: 0 20px; background: var(--co-gold); color: var(--co-bg); font-family: var(--co-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border-left: 1px solid var(--co-gold); transition: background 0.22s, color 0.22s; white-space: nowrap; } body[data-surface="caseone"] .co-nav__cta:hover { background: var(--co-gold-soft); border-color: var(--co-gold-soft); } /* ---- Responsive mobile ---- */ @media (max-width: 700px) { body[data-surface="caseone"] .co-nav__links { display: none; } body[data-surface="caseone"] .co-nav__brand-name { display: none; } body[data-surface="caseone"] .co-nav__cta { padding: 0 14px; font-size: 10px; } } /* ---- Ancienne classe .nav — neutralisée pour CaseOne ---- (landing.css applique des styles sur .nav ; on les écrase) */ body[data-surface="caseone"] .nav.co-nav { /* Le nav est maintenant .co-nav, pas .nav — pas de conflit car le HTML utilise co-nav seul. Ce bloc est un filet. */ } /* Langue toggle original (landing.css) — styles cohérents */ body[data-surface="caseone"] .nav__lang-toggle { color: var(--co-ink-dim); } body[data-surface="caseone"] .nav__lang-menu { background: var(--co-bg-paper); border: 1px solid var(--co-line-strong); } body[data-surface="caseone"] .nav__lang-option:hover { background: var(--co-bg-raised); color: var(--co-gold); } /* ---------- Hero ---------- */ /* Fond transparent : le fond encre repose sur body. Le hero passe en z-index 1 pour s'afficher au-dessus du filigrane fixé en z-index 0. */ body[data-surface="caseone"] .hero { background: transparent; position: relative; z-index: 1; overflow: hidden; } /* Halo sombre derrière le hero */ body[data-surface="caseone"] .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(228, 192, 121, 0.04), transparent 55%), radial-gradient(ellipse 60% 40% at 80% 80%, rgba(87, 23, 17, 0.06), transparent 50%); pointer-events: none; z-index: 0; } body[data-surface="caseone"] .hero__bg-decoration { background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(228, 192, 121, 0.06), transparent 55%); } body[data-surface="caseone"] .hero__badge { background: var(--co-bg-paper); border: 1px solid var(--co-line-strong); color: var(--co-ink-mute); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; } body[data-surface="caseone"] .hero__badge--trust { border-color: rgba(228, 192, 121, 0.3); color: var(--co-gold); } body[data-surface="caseone"] .hero__image-frame { border: 1px solid var(--co-line-strong); background: var(--co-bg-paper); } body[data-surface="caseone"] .hero__image-glow { background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(228, 192, 121, 0.08), transparent 70%); } body[data-surface="caseone"] .hero__float-badge--1, body[data-surface="caseone"] .hero__float-badge--2 { background: var(--co-bg-paper); border: 1px solid var(--co-line-strong); color: var(--co-ink); font-family: var(--co-font-mono); font-size: 0.7rem; letter-spacing: 0.1em; } /* Tampon "DOSSIER OUVERT" — décoration signature sur le hero */ body[data-surface="caseone"] .hero::after { content: 'DOSSIER OUVERT'; position: absolute; top: 4.5rem; right: 2rem; font-family: var(--co-font-mono); font-size: 0.65rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--co-bordeaux); border: 1.5px solid var(--co-bordeaux); padding: 0.3rem 0.6rem; opacity: 0.55; transform: rotate(4deg); pointer-events: none; z-index: 1; } /* ---------- Sections — fond unique encre, séparation par filet ---------- */ /* Toutes les sections sur le même fond : pas d'alternance de couleur. z-index: 1 pour passer au-dessus du filigrane (::before z-index:0). */ body[data-surface="caseone"] .section { background: transparent; position: relative; z-index: 1; } /* Suppression explicite de tout fond alterné (filet de sécurité) */ body[data-surface="caseone"] .section:nth-child(even) { background: transparent; } /* Séparateur : filet fin papier-warm entre sections */ body[data-surface="caseone"] .section + .section, body[data-surface="caseone"] .punchline + .section, body[data-surface="caseone"] .section + .punchline { border-top: 1px solid var(--co-line); } body[data-surface="caseone"] .section__title { color: var(--co-ink); } body[data-surface="caseone"] .section__title .text--accent, body[data-surface="caseone"] .section__title span[class~="logo-one"] { color: var(--co-gold); } body[data-surface="caseone"] .section__subtitle { color: var(--co-ink-dim); } /* ---------- Cartes (.card, génériques) ---------- État par défaut : fond encre semi-transparent avec sheen diagonal discret. Le filigrane de fond (::before body, z-index:0) transparaît légèrement. État hover : fond graphite solide (var(--co-bg-soft)) — surlignage. ---------------------------------------------------------- */ body[data-surface="caseone"] .card { /* Sheen diagonal : gradient très subtil d'encre quasi-opaque vers encre légèrement plus claire, par-dessus une base semi-transparente. La transparence (~65%) laisse apparaître le filigrane sans nuire à la lisibilité. */ background: /* Reflet léger : voile lumineux en haut-gauche + fin lustre diagonal métallique */ radial-gradient(120% 70% at 14% -12%, rgba(255, 255, 255, 0.07), transparent 58%), linear-gradient( 118deg, transparent 38%, rgba(255, 255, 255, 0.06) 48%, transparent 58% ), linear-gradient( 135deg, rgba(11, 22, 32, 0.68) 0%, rgba(18, 32, 46, 0.58) 45%, rgba(11, 22, 32, 0.65) 100% ); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--co-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 0 rgba(0, 0, 0, 0.2), 0 6px 20px -6px rgba(0, 0, 0, 0.4); border-radius: 4px; transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } body[data-surface="caseone"] .card:hover { background: var(--co-bg-soft); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--co-line-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.3), 0 8px 24px -8px rgba(0, 0, 0, 0.5); } /* Pli de dossier en haut à droite (signature) */ body[data-surface="caseone"] .features__card.card::before, body[data-surface="caseone"] .problem__card-front.card::before, body[data-surface="caseone"] .problem__card-back.card::before, body[data-surface="caseone"] .steps__card-front.card::before, body[data-surface="caseone"] .steps__card-back.card::before { content: ''; position: absolute; top: 0; right: 0; width: 20px; height: 20px; background: linear-gradient(225deg, var(--co-bg) 50%, transparent 50%); border-bottom: 1px solid var(--co-line-strong); border-left: 1px solid var(--co-line-strong); } body[data-surface="caseone"] .card__icon-wrap { background: var(--co-bg-paper); border: 1px solid var(--co-line-strong); color: var(--co-gold); } body[data-surface="caseone"] .card__icon-wrap--danger { background: rgba(87, 23, 17, 0.15); border-color: rgba(87, 23, 17, 0.35); color: #d4604a; } body[data-surface="caseone"] .card__icon-wrap--success { background: rgba(228, 192, 121, 0.1); border-color: rgba(228, 192, 121, 0.25); color: var(--co-gold); } /* ---------- Boutons ---------- */ body[data-surface="caseone"] .btn--primary { background: var(--co-gold); color: var(--co-bg); border: 1.5px solid var(--co-gold); font-family: var(--co-font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 2px; transition: background 0.22s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s, gap 0.22s; } body[data-surface="caseone"] .btn--primary:hover { background: var(--co-gold-soft); border-color: var(--co-gold-soft); } body[data-surface="caseone"] .btn--outline { background: transparent; color: var(--co-ink); border: 1.5px solid var(--co-line-strong); font-family: var(--co-font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 2px; transition: border-color 0.22s, color 0.22s; } body[data-surface="caseone"] .btn--outline:hover { border-color: var(--co-gold); color: var(--co-gold); } body[data-surface="caseone"] .btn--secondary { background: var(--co-bg-raised); color: var(--co-ink-dim); border: 1px solid var(--co-line-strong); font-family: var(--co-font-mono); border-radius: 2px; } /* ---------- Section Problème ---------- */ body[data-surface="caseone"] .problem { background: transparent; } body[data-surface="caseone"] .problem__card { perspective: 1000px; } body[data-surface="caseone"] .problem__heading { color: var(--co-ink); font-family: var(--co-font-title); font-weight: 400; } body[data-surface="caseone"] .problem__heading--solution { color: var(--co-gold); } body[data-surface="caseone"] .problem__text { color: var(--co-ink-dim); } body[data-surface="caseone"] .problem__text--solution { color: var(--co-ink-dim); } body[data-surface="caseone"] .problem__source { color: var(--co-ink-dim); /* #C0B9A5 — ratio ~5:1 sur fond graphite — WCAG AA */ font-size: 0.68rem; letter-spacing: 0.08em; } body[data-surface="caseone"] .problem__flip-hint { color: var(--co-gold); font-family: var(--co-font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; } /* ---------- Punchline — fond encre, filets fins ---------- */ body[data-surface="caseone"] .punchline { background: transparent; border-top: 1px solid var(--co-line); border-bottom: 1px solid var(--co-line); position: relative; z-index: 1; } body[data-surface="caseone"] .punchline p { color: var(--co-ink); font-family: var(--co-font-title); font-weight: 400; } body[data-surface="caseone"] .punchline p strong { color: var(--co-gold); } /* ---------- Comparaison QCM vs CaseOne ---------- */ /* Cartes "avant/après" — semi-transparentes, distinction visuelle conservée */ body[data-surface="caseone"] .compare__card--before { background: linear-gradient( 135deg, rgba(11, 22, 32, 0.72) 0%, rgba(15, 26, 38, 0.62) 100% ); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-color: var(--co-line-strong); } body[data-surface="caseone"] .compare__card--after { background: linear-gradient( 135deg, rgba(18, 30, 42, 0.72) 0%, rgba(24, 36, 50, 0.60) 100% ); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-color: rgba(228, 192, 121, 0.3); box-shadow: 0 0 0 1px rgba(228, 192, 121, 0.12), var(--co-shadow-lg); } body[data-surface="caseone"] .compare__badge--old { background: rgba(87, 23, 17, 0.2); color: #d4604a; border: 1px solid rgba(87, 23, 17, 0.4); font-family: var(--co-font-mono); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 2px; } body[data-surface="caseone"] .compare__badge--new { background: rgba(228, 192, 121, 0.12); color: var(--co-gold); border: 1px solid rgba(228, 192, 121, 0.3); font-family: var(--co-font-mono); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 2px; } body[data-surface="caseone"] .compare__question { color: var(--co-ink); } body[data-surface="caseone"] .compare__option { color: var(--co-ink-dim); border-color: var(--co-line); } body[data-surface="caseone"] .compare__option--selected { color: var(--co-ink); background: rgba(87, 23, 17, 0.12); border-color: rgba(87, 23, 17, 0.3); } body[data-surface="caseone"] .compare__radio--checked { background: rgba(87, 23, 17, 0.6); border-color: rgba(87, 23, 17, 0.8); } body[data-surface="caseone"] .compare__verdict--bad { background: rgba(87, 23, 17, 0.12); border-color: rgba(87, 23, 17, 0.25); color: var(--co-gold); } body[data-surface="caseone"] .compare__verdict--bad strong { color: var(--co-gold); } body[data-surface="caseone"] .compare__answer { background: var(--co-bg-paper); border: 1px solid var(--co-line-strong); /* Pas de bordure gauche dorée : encadrement uniforme cohérent */ } body[data-surface="caseone"] .compare__answer-text { color: var(--co-ink-dim); font-family: var(--co-font-body); font-style: italic; } body[data-surface="caseone"] .compare__ai-feedback { background: var(--co-bg-paper); border: 1px solid var(--co-line-strong); } body[data-surface="caseone"] .compare__ai-header { color: var(--co-gold); font-family: var(--co-font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; } body[data-surface="caseone"] .compare__ai-score { /* Fond or, texte encre : ratio ~8:1 — WCAG AA */ background: var(--co-gold) !important; color: var(--co-bg) !important; border-radius: 2px; } body[data-surface="caseone"] .compare__ai-point--ok { color: var(--co-ink-dim); } body[data-surface="caseone"] .compare__ai-point--miss { color: var(--co-ink-mute); } body[data-surface="caseone"] .compare__footnote { color: var(--co-ink-mute); } body[data-surface="caseone"] .compare__footnote strong { color: var(--co-gold); } body[data-surface="caseone"] .compare__vs { color: var(--co-gold); font-family: var(--co-font-mono); font-size: 0.8rem; letter-spacing: 0.2em; } /* ---------- Modes (Enquête / Mise en situation) ---------- */ body[data-surface="caseone"] .modes__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; /* les deux cartes ont exactement la même hauteur */ } @media (max-width: 640px) { body[data-surface="caseone"] .modes__grid { grid-template-columns: 1fr; } } /* Les cards modes n'ont pas de bordure permanente : le cursor-frame apparaît au hover via JS. Le fond semi-transparent est hérité de .card — on ne surcharge que la bordure. */ body[data-surface="caseone"] .modes__card { border-color: transparent; transition: border-color 240ms cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease, box-shadow 0.25s ease; } body[data-surface="caseone"] .modes__card:hover { border-color: var(--co-line-strong); } body[data-surface="caseone"] .modes__name { color: var(--co-ink); font-family: var(--co-font-title); font-weight: 400; } body[data-surface="caseone"] .modes__desc { color: var(--co-ink-dim); } /* ---------- Steps (Comment ça marche) ---------- */ body[data-surface="caseone"] .steps__number { color: var(--co-gold); font-size: 1.8rem; font-weight: 700; opacity: 0.9; } body[data-surface="caseone"] .steps__name { color: var(--co-ink); font-family: var(--co-font-title); font-weight: 400; } body[data-surface="caseone"] .steps__desc { color: var(--co-ink-dim); } body[data-surface="caseone"] .steps__back-detail { color: var(--co-ink-dim); } body[data-surface="caseone"] .steps__icon { color: var(--co-gold); } /* ---------- Features / Bento ---------- */ body[data-surface="caseone"] .features__heading { color: var(--co-ink); font-family: var(--co-font-title); font-weight: 400; } body[data-surface="caseone"] .features__text { color: var(--co-ink-dim); } /* ---------- Intégration LMS ---------- */ body[data-surface="caseone"] .integration__heading { color: var(--co-ink); font-family: var(--co-font-title); font-weight: 400; } body[data-surface="caseone"] .integration__text { color: var(--co-ink-dim); } body[data-surface="caseone"] .integration__desc { color: var(--co-ink-dim); } body[data-surface="caseone"] .integration__logos-note { color: var(--co-ink-mute); font-size: 0.7rem; letter-spacing: 0.1em; } /* Logos LMS sur fond sombre : filtre pour éviter le fond blanc des PNG */ body[data-surface="caseone"] .integration__logo-item img { filter: brightness(0) invert(0.85) sepia(0.2); opacity: 0.65; transition: opacity 0.22s, filter 0.22s; } body[data-surface="caseone"] .integration__logo-item:hover img { opacity: 0.9; filter: brightness(0) invert(1) sepia(0.3) saturate(2) hue-rotate(10deg); } /* ---------- Trust / Conformité ---------- */ body[data-surface="caseone"] .trust__heading { color: var(--co-ink); font-family: var(--co-font-title); font-weight: 400; } body[data-surface="caseone"] .trust__text { color: var(--co-ink-dim); } body[data-surface="caseone"] .trust__icon-wrap { color: var(--co-gold); } /* ---------- Tableau de comparaison ---------- */ body[data-surface="caseone"] .comparison__table-wrap { border: 1px solid var(--co-line-strong); border-radius: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; } body[data-surface="caseone"] .comparison__table { background: var(--co-bg-paper); min-width: 640px; /* garantit l'accès aux 4 colonnes via scroll sur mobile */ } body[data-surface="caseone"] .comparison__table thead tr { background: var(--co-bg-soft); border-bottom: 1px solid var(--co-line-strong); } body[data-surface="caseone"] .comparison__table th { color: var(--co-ink-mute); font-family: var(--co-font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 1rem; border-right: 1px solid var(--co-line); } body[data-surface="caseone"] .comparison__table td { color: var(--co-ink-dim); border-bottom: 1px solid var(--co-line); border-right: 1px solid var(--co-line); padding: 0.85rem 1rem; font-size: 0.85rem; } body[data-surface="caseone"] .comparison__table tr:hover td { background: rgba(228, 192, 121, 0.04); } /* Colonne CaseOne highlight */ body[data-surface="caseone"] .comparison__highlight { background: rgba(228, 192, 121, 0.06); border-left: 2px solid var(--co-gold); border-right: 2px solid var(--co-gold); color: var(--co-ink); } body[data-surface="caseone"] .comparison__table thead .comparison__highlight { background: rgba(228, 192, 121, 0.1); color: var(--co-gold); } body[data-surface="caseone"] .table-yes { color: var(--co-gold); } body[data-surface="caseone"] .table-no { color: var(--co-ink-mute); opacity: 0.5; } /* ---------- Targets (Pour qui ?) ---------- */ body[data-surface="caseone"] .targets__tab { background: linear-gradient( 135deg, rgba(11, 22, 32, 0.68) 0%, rgba(18, 32, 46, 0.58) 100% ); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--co-line); color: var(--co-ink-dim); font-family: var(--co-font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 2px; transition: color 0.22s, background 0.25s ease, border-color 0.22s, backdrop-filter 0.25s; } body[data-surface="caseone"] .targets__tab:hover { background: var(--co-bg-soft); backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--co-gold); border-color: var(--co-gold); } body[data-surface="caseone"] .targets__tab--active { background: rgba(228, 192, 121, 0.1); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--co-gold); color: var(--co-gold); } body[data-surface="caseone"] .targets__heading { color: var(--co-ink); font-family: var(--co-font-title); font-weight: 400; } body[data-surface="caseone"] .targets__text { color: var(--co-ink-dim); } body[data-surface="caseone"] .targets__icon-wrap { color: var(--co-gold); background: rgba(228, 192, 121, 0.08); border: 1px solid rgba(228, 192, 121, 0.2); } /* ---------- Métriques ---------- */ body[data-surface="caseone"] .metrics__value { color: var(--co-gold); font-family: var(--co-font-title); } body[data-surface="caseone"] .metrics__label { color: var(--co-ink-mute); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; } /* ---------- FAQ ---------- */ body[data-surface="caseone"] .faq__question { color: var(--co-ink); background: linear-gradient( 135deg, rgba(11, 22, 32, 0.68) 0%, rgba(18, 32, 46, 0.58) 100% ); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--co-line); font-size: 0.8rem; letter-spacing: 0.06em; transition: color 0.22s, background 0.25s ease, border-color 0.22s; } body[data-surface="caseone"] .faq__question:hover { background: var(--co-bg-soft); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--co-line-strong); } body[data-surface="caseone"] .faq__question.active { color: var(--co-gold); background: var(--co-bg-soft); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--co-gold); } body[data-surface="caseone"] .faq__answer { background: rgba(11, 22, 32, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid var(--co-line); border-top: none; color: var(--co-ink-dim); } body[data-surface="caseone"] .faq__arrow { color: var(--co-gold); } /* ---------- Agents IA ---------- */ body[data-surface="caseone"] .agents__name { color: var(--co-ink); font-family: var(--co-font-title); font-weight: 400; } body[data-surface="caseone"] .agents__desc { color: var(--co-ink-dim); } /* ---------- Watson ---------- */ body[data-surface="caseone"] .watson { background: transparent; } /* Le panneau .watson__chat affiche maintenant une image directe — pas de fond */ body[data-surface="caseone"] .watson__chat { background: transparent; border: none; display: flex; align-items: center; justify-content: center; } body[data-surface="caseone"] .watson__msg--user { background: rgba(228, 192, 121, 0.1); border: 1px solid rgba(228, 192, 121, 0.2); color: var(--co-ink); border-radius: 2px; } body[data-surface="caseone"] .watson__msg--watson { background: var(--co-bg-raised); border: 1px solid var(--co-line-strong); color: var(--co-ink-dim); border-radius: 2px; } /* ---------- Pricing ---------- */ body[data-surface="caseone"] .pricing__card { background: linear-gradient( 135deg, rgba(11, 22, 32, 0.68) 0%, rgba(18, 32, 46, 0.58) 100% ); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--co-line); border-radius: 4px; transition: background 0.25s ease, border-color 0.25s ease; } body[data-surface="caseone"] .pricing__card:hover { background: var(--co-bg-soft); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--co-line-strong); } body[data-surface="caseone"] .pricing__card-title { color: var(--co-ink); font-family: var(--co-font-title); font-weight: 400; } body[data-surface="caseone"] .pricing__amount, body[data-surface="caseone"] .pricing__amount-range { color: var(--co-gold); font-family: var(--co-font-title); } body[data-surface="caseone"] .pricing__amount--marketplace { color: var(--co-ink-dim); } body[data-surface="caseone"] .pricing__currency, body[data-surface="caseone"] .pricing__unit { color: var(--co-ink-mute); } body[data-surface="caseone"] .pricing__tier { border-bottom: 1px solid var(--co-line); color: var(--co-ink-dim); } body[data-surface="caseone"] .pricing__tier-price { color: var(--co-gold); font-family: var(--co-font-mono); } body[data-surface="caseone"] .pricing__separator { color: var(--co-ink-mute); font-family: var(--co-font-mono); } body[data-surface="caseone"] .pricing__tagline { color: var(--co-ink); font-family: var(--co-font-title); } body[data-surface="caseone"] .pricing__example { color: var(--co-ink-dim); } body[data-surface="caseone"] .pricing__discount-badge { background: rgba(228, 192, 121, 0.12); border: 1px solid rgba(228, 192, 121, 0.3); color: var(--co-gold); font-family: var(--co-font-mono); letter-spacing: 0.1em; border-radius: 2px; } body[data-surface="caseone"] .pricing__discount-message { color: var(--co-ink-dim); } /* ---------- Formulaire démo ---------- */ body[data-surface="caseone"] .demo__title { color: var(--co-ink); } body[data-surface="caseone"] .demo__subtitle { color: var(--co-ink-dim); } body[data-surface="caseone"] .demo__perk { color: var(--co-ink-dim); } body[data-surface="caseone"] .demo__perk i { color: var(--co-gold); } body[data-surface="caseone"] .form-input { background: var(--co-bg-paper); border: 1px solid var(--co-line-strong); color: var(--co-ink); font-family: var(--co-font-body); border-radius: 2px; transition: border-color 0.22s; } body[data-surface="caseone"] .form-input:focus { border-color: var(--co-gold); outline: none; box-shadow: 0 0 0 2px rgba(228, 192, 121, 0.12); } body[data-surface="caseone"] .form-input::placeholder { color: var(--co-ink-mute); } body[data-surface="caseone"] .demo__consent-label { color: var(--co-ink-mute); font-size: 0.8rem; } body[data-surface="caseone"] .demo__consent-label a { color: var(--co-gold); } body[data-surface="caseone"] .demo__checkbox { accent-color: var(--co-gold); } /* ---------- Logo CaseOne inline (.logo-case / .logo-one) ---------- */ body[data-surface="caseone"] .logo-case { color: var(--co-gold); font-family: var(--co-font-title); font-style: normal; } body[data-surface="caseone"] .logo-one { color: var(--co-ink-dim); font-family: var(--co-font-mono); font-style: normal; } /* ---------- Metrics section — fond encre, filets fins ---------- */ body[data-surface="caseone"] .metrics { background: transparent; border-top: 1px solid var(--co-line); border-bottom: 1px solid var(--co-line); position: relative; z-index: 1; } /* ---------- Back to top ---------- */ body[data-surface="caseone"] .back-to-top { background: var(--co-bg-raised); border: 1px solid var(--co-line-strong); color: var(--co-gold); } body[data-surface="caseone"] .back-to-top:hover { background: var(--co-bg-soft); border-color: var(--co-gold); } /* ---------- Cookie banner ---------- */ body[data-surface="caseone"] .cookie-banner { background: var(--co-bg-paper); /* seul composant flottant OK à garder sombre */ border-top: 1px solid var(--co-line-strong); color: var(--co-ink-dim); } /* ---------- Theme toggle — masqué (CaseOne est toujours sombre) ---------- */ body[data-surface="caseone"] .nav__theme-toggle { display: none; } /* ---------- Footer — fond encre ---------- */ body[data-surface="caseone"] .footer { background: var(--co-bg); /* fond encre, pas graphite */ border-top: 1px solid var(--co-line-strong); } body[data-surface="caseone"] .footer__logo .logo-case { color: var(--co-gold); font-family: var(--co-font-title); } body[data-surface="caseone"] .footer__logo .logo-one { color: var(--co-ink-dim); font-family: var(--co-font-mono); } body[data-surface="caseone"] .footer__by { color: var(--co-ink-mute); font-family: var(--co-font-mono); font-size: 0.7rem; letter-spacing: 0.12em; } body[data-surface="caseone"] .footer__link { color: var(--co-ink-mute); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.22s; } body[data-surface="caseone"] .footer__link:hover { color: var(--co-gold); } body[data-surface="caseone"] .footer__copyright { color: var(--co-ink-mute); font-size: 0.68rem; letter-spacing: 0.08em; } /* ---------- Toast ---------- */ body[data-surface="caseone"] #toast-container .toast { background: var(--co-bg-raised); border: 1px solid var(--co-line-strong); color: var(--co-ink); border-radius: 2px; font-family: var(--co-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; } body[data-surface="caseone"] #toast-container .toast.toast-success { border-left: 3px solid var(--co-gold); } body[data-surface="caseone"] #toast-container .toast.toast-error { border-left: 3px solid rgba(87, 23, 17, 0.9); } /* ---------- Easing Motion CaseOne ---------- */ /* « Slow to scale » — transitions 200-500ms, easing souple */ body[data-surface="caseone"] *, body[data-surface="caseone"] *::before, body[data-surface="caseone"] *::after { transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } /* Boutons — transition unifiée (landing.css peut en imposer une différente) */ body[data-surface="caseone"] .btn--primary, body[data-surface="caseone"] .btn--outline { transition-duration: 220ms; } /* Note : .card a désormais sa propre transition complète définie plus haut (background + border-color + box-shadow 0.25s ease) — ne pas surcharger ici. */ /* ---------- Section CTA centré ---------- */ body[data-surface="caseone"] .section__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; } /* ========================================================== CURSOR FRAME — cadre 4 coins qui suit le pointeur ========================================================== */ #cursor-frame { position: fixed; top: 0; left: 0; width: 32px; height: 32px; pointer-events: none; z-index: 9999; opacity: 0; will-change: transform, width, height; transition: opacity 0.3s; /* Variable de couleur : OR pour CaseOne */ --cursor-color: var(--co-gold, #E4C079); --cursor-thickness: 2px; --cursor-leg-long: 56.25%; /* proportion logo Open Frame */ --cursor-leg-short: 18.75%; } /* Masquer sur écrans tactiles */ @media (pointer: coarse), (prefers-reduced-motion: reduce) { #cursor-frame { display: none; } } /* Motif OpenFrame (charte) : 2 rails pleins haut+bas + 4 pattes verticales asymetriques (56,25 % / 18,75 %). Ouvertures UNIQUEMENT a gauche/droite, jamais des equerres de coin type Anthropic. */ #cursor-frame::before, #cursor-frame::after { content: ''; position: absolute; left: 0; right: 0; height: var(--cursor-thickness); background: var(--cursor-color); } #cursor-frame::before { top: 0; } #cursor-frame::after { bottom: 0; } /* Pattes verticales d'angle (asymetriques) */ .cursor-frame-corner { position: absolute; display: block; width: var(--cursor-thickness); background: var(--cursor-color); } .cursor-frame-corner--tl { top: 0; left: 0; height: var(--cursor-leg-long); } .cursor-frame-corner--tr { top: 0; right: 0; height: var(--cursor-leg-short); } .cursor-frame-corner--bl { bottom: 0; left: 0; height: var(--cursor-leg-short); } .cursor-frame-corner--br { bottom: 0; right: 0; height: var(--cursor-leg-long); } /* En mode "hug" : blend-mode désactivé (lisibilité) */ #cursor-frame.is-hugging { mix-blend-mode: normal; } #cursor-frame:not(.is-hugging) { mix-blend-mode: difference; } /* ========================================================== KW-FRAME — mots-clés encadrés (Open Frame asymétrique) ========================================================== */ .kw-frame { position: relative; display: inline; padding: 0 0.25em; --frame-leg-long: 56.25%; --frame-leg-short: 18.75%; --frame-thickness: 1.5px; --frame-color: var(--co-gold, #E4C079); --frame-gap: 0.15em; /* espace entre le texte et les segments */ } /* Les segments sont des pseudo-éléments des spans injectés par JS */ .kw-seg { position: absolute; pointer-events: none; display: block; } /* Segments horizontaux haut / bas */ .kw-seg--top, .kw-seg--bottom { left: 0; right: 0; height: var(--frame-thickness); background: var(--frame-color); } .kw-seg--top { top: calc(-1 * var(--frame-gap)); } .kw-seg--bottom { bottom: calc(-1 * var(--frame-gap)); } /* Coins verticaux — asymétriques */ .kw-seg--tl, .kw-seg--tr, .kw-seg--bl, .kw-seg--br { width: var(--frame-thickness); background: var(--frame-color); } .kw-seg--tl { top: calc(-1 * var(--frame-gap)); left: 0; height: var(--frame-leg-long); } .kw-seg--tr { top: calc(-1 * var(--frame-gap)); right: 0; height: var(--frame-leg-short); } .kw-seg--bl { bottom: calc(-1 * var(--frame-gap)); left: 0; height: var(--frame-leg-short); } .kw-seg--br { bottom: calc(-1 * var(--frame-gap)); right: 0; height: var(--frame-leg-long); } /* Variante bordeaux */ .kw-frame--bordeaux { --frame-color: var(--co-bordeaux, #571711); } /* Variante atténuée */ .kw-frame--dim { --frame-color: var(--co-ink-dim, #C0B9A5); } /* Accent dans les titres : encadré au lieu de coloré */ body[data-surface="caseone"] .accent { /* On retire la couleur et on utilise l'encadrement kw-frame à la place */ color: inherit; } body[data-surface="caseone"] .accent.kw-frame { color: var(--co-gold); } /* ========================================================== HERO — badges chips (planel stamp style) ========================================================== */ body[data-surface="caseone"] .hero__badge { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--co-font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--co-ink-dim); border: 1px solid var(--co-line-strong); border-radius: 2px; padding: 0.28em 0.65em; background: transparent; opacity: 0.78; cursor: default; user-select: none; } body[data-surface="caseone"] .hero__badge i, body[data-surface="caseone"] .hero__badge svg { width: 0.9em; height: 0.9em; flex-shrink: 0; opacity: 0.7; } /* Badge "PIÈCE À CONVICTION" — style tampon bordeaux */ body[data-surface="caseone"] .hero__badge--trust { color: var(--co-bordeaux); border-color: var(--co-bordeaux); opacity: 1; letter-spacing: 0.18em; } /* ========================================================== HERO IMAGE — screenshot_defaut ========================================================== */ body[data-surface="caseone"] .hero__image { border-radius: 4px; border: 1px solid var(--co-line-strong); box-shadow: var(--co-shadow-xl); } /* ========================================================== FEATURES — bento mosaïque 4 colonnes Calcul : 8 cartes × 1×1 = 8 cellules + 1 grande × 2×2 = 4 cellules Total = 12 cellules ÷ 4 colonnes = 3 rangées exactes, 0 trou Ordre DOM : SCORM, Mini-jeux, 5-langues, Enquête↺, 2-modes, [Personnalisez 2×2], Suivi, Cartes-compét., Enquêtes-perso ========================================================== */ /* Annuler les positions bento nommées de landing.css pour toutes les cartes */ body[data-surface="caseone"] .features__bento-item { grid-column: unset !important; grid-row: unset !important; } /* Grille mosaïque 4 colonnes */ body[data-surface="caseone"] .features__bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; gap: 1rem; align-items: stretch; } /* Grande tuile "Personnalisez votre univers" — 2 colonnes × 2 rangées */ body[data-surface="caseone"] .features__card--dual-img { grid-column: span 2 !important; grid-row: span 2 !important; overflow: hidden; /* images contenues dans la carte */ display: flex; flex-direction: column; } /* Tablette : grille 2 colonnes, grande carte 2×2 → toute largeur × 2 hauteurs */ @media (max-width: 900px) { body[data-surface="caseone"] .features__bento { grid-template-columns: repeat(2, 1fr); } body[data-surface="caseone"] .features__card--dual-img { grid-column: span 2 !important; grid-row: span 2 !important; } } /* Mobile : grille 1 colonne, grande carte redevient 1×1 */ @media (max-width: 600px) { body[data-surface="caseone"] .features__bento { grid-template-columns: 1fr; } body[data-surface="caseone"] .features__card--dual-img { grid-column: span 1 !important; grid-row: span 1 !important; } } /* Zone images empilées dans la grande carte */ body[data-surface="caseone"] .features__dual-img-wrap { flex: 1; /* occupe l'espace restant après le texte */ position: relative; margin-top: 1rem; margin-left: -1.25rem; margin-right: -1.25rem; margin-bottom: -1.25rem; overflow: hidden; border-radius: 0 0 4px 4px; min-height: 140px; } /* Image de premier plan — visible entièrement, ancrée en bas à droite */ body[data-surface="caseone"] .features__dual-img--front { position: absolute; bottom: 0; right: 0; width: 64%; height: auto; /* ratio conservé → pas de coupe verticale */ max-height: 88%; object-fit: contain; object-position: bottom right; border-radius: 3px 3px 0 0; border: 1px solid var(--co-line-strong); box-shadow: var(--co-shadow); z-index: 2; } /* Image de fond — à gauche et remontée, proportions conservées, derrière */ body[data-surface="caseone"] .features__dual-img--back { position: absolute; top: 0; left: 0; width: 58%; height: auto; max-height: 88%; object-fit: contain; object-position: top left; border-radius: 3px; border: 1px solid var(--co-line-strong); box-shadow: var(--co-shadow); opacity: 0.6; z-index: 1; transform: rotate(-2deg); transform-origin: top left; } /* Drapeaux dans la carte "5 langues" */ body[data-surface="caseone"] .features__lang-flags { display: flex; gap: 0.5rem; margin-top: 0.75rem; font-size: 1.4rem; line-height: 1; flex-wrap: wrap; } /* ========================================================== WATSON — image agent_watson à droite ========================================================== */ body[data-surface="caseone"] .watson__chat-img { width: 100%; max-width: 420px; border-radius: 6px; border: 1px solid var(--co-line-strong); box-shadow: var(--co-shadow-xl); object-fit: cover; } /* Les .nav__link de landing.css sont déjà sans objet sur CaseOne (la nav utilise désormais .co-nav__link) */ /* ========================================================== FRAME TRIGGER — bouton Open Frame dans la nav ========================================================== */ body[data-surface="caseone"] .co-nav__frame-trigger { display: inline-flex; align-items: center; justify-content: center; align-self: center; /* centrage vertical dans co-nav__left */ width: 36px; height: 36px; /* Marges symétriques gauche/droite, pas de décalage vertical */ margin: 0 6px; padding: 0; background: transparent; border: none; cursor: pointer; color: var(--co-ink-dim); transition: color 200ms ease; flex-shrink: 0; } body[data-surface="caseone"] .co-nav__frame-trigger svg { width: 22px; height: 16px; } body[data-surface="caseone"] .co-nav__frame-trigger:hover { color: var(--co-gold); } /* Burger mobile */ body[data-surface="caseone"] .co-nav__burger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 36px; height: 36px; padding: 6px; background: transparent; border: none; cursor: pointer; margin-right: 4px; } body[data-surface="caseone"] .co-nav__burger span { display: block; width: 100%; height: 1.5px; background: var(--co-ink-dim); transition: transform 250ms ease, opacity 200ms ease; } body[data-surface="caseone"] .co-nav__burger.is-active span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } body[data-surface="caseone"] .co-nav__burger.is-active span:nth-child(2) { opacity: 0; } body[data-surface="caseone"] .co-nav__burger.is-active span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } @media (max-width: 700px) { /* Le burger est supprimé : le frame-trigger (cadre ouvert) remplace le menu de navigation sur mobile. */ body[data-surface="caseone"] .co-nav__burger { display: none !important; } body[data-surface="caseone"] .co-nav__cta { display: none; } /* frame-trigger toujours visible sur mobile */ body[data-surface="caseone"] .co-nav__frame-trigger { display: inline-flex; } } /* ========================================================== FRAME PANEL — panneau contextuel sections ========================================================== */ body[data-surface="caseone"] .co-frame-panel-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 300ms ease; backdrop-filter: blur(4px); } body[data-surface="caseone"] .co-frame-panel-backdrop.is-visible { opacity: 1; pointer-events: auto; } body[data-surface="caseone"] .co-frame-panel { position: fixed; top: 0; left: 0; bottom: 0; width: 340px; max-width: 92vw; background: var(--co-bg-paper); border-right: 1px solid var(--co-line-strong); z-index: 201; transform: translateX(-100%); transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; } body[data-surface="caseone"] .co-frame-panel.is-open { transform: translateX(0); } /* Coins Open Frame décoratifs */ body[data-surface="caseone"] .co-frame-panel-corner { position: absolute; width: 18px; height: 18px; pointer-events: none; --c: var(--co-gold); --t: 1.5px; } body[data-surface="caseone"] .co-frame-panel-corner--tl { top: 12px; left: 12px; border-top: var(--t) solid var(--c); border-left: var(--t) solid var(--c); } body[data-surface="caseone"] .co-frame-panel-corner--tr { top: 12px; right: 12px; border-top: var(--t) solid var(--c); border-right: var(--t) solid var(--c); } body[data-surface="caseone"] .co-frame-panel-corner--bl { bottom: 12px; left: 12px; border-bottom: var(--t) solid var(--c); border-left: var(--t) solid var(--c); } body[data-surface="caseone"] .co-frame-panel-corner--br { bottom: 12px; right: 12px; border-bottom: var(--t) solid var(--c); border-right: var(--t) solid var(--c); } body[data-surface="caseone"] .co-frame-panel-close { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--co-line-strong); color: var(--co-ink-dim); font-size: 1rem; cursor: pointer; border-radius: 2px; transition: color 150ms ease, border-color 150ms ease; } body[data-surface="caseone"] .co-frame-panel-close:hover { color: var(--co-gold); border-color: var(--co-gold); } body[data-surface="caseone"] .co-frame-panel-inner { padding: 52px 28px 36px; } body[data-surface="caseone"] .co-frame-panel-eyebrow { display: flex; align-items: center; gap: 8px; font-family: var(--co-font-mono); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--co-ink-mute); margin-bottom: 8px; } body[data-surface="caseone"] .co-frame-panel-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--co-gold); opacity: 0.7; flex-shrink: 0; } body[data-surface="caseone"] .co-frame-panel-title { font-family: var(--co-font-title); font-size: 1.8rem; color: var(--co-ink); margin: 0 0 6px; letter-spacing: 0.04em; } body[data-surface="caseone"] .co-frame-panel-tag { font-family: var(--co-font-body); font-size: 0.82rem; color: var(--co-ink-dim); margin: 0 0 28px; line-height: 1.5; } body[data-surface="caseone"] .co-frame-panel-nav { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--co-line); padding-top: 20px; } body[data-surface="caseone"] .co-frame-panel-nav a { display: flex; align-items: baseline; gap: 12px; padding: 9px 10px; border-radius: 3px; font-family: var(--co-font-body); font-size: 0.875rem; color: var(--co-ink-dim); text-decoration: none; transition: background 140ms ease, color 140ms ease; line-height: 1.4; } body[data-surface="caseone"] .co-frame-panel-nav a:hover { background: rgba(228, 192, 121, 0.08); color: var(--co-ink); } body[data-surface="caseone"] .co-frame-panel-nav a::before { content: attr(data-num); font-family: var(--co-font-mono); font-size: 0.6rem; color: var(--co-ink-mute); letter-spacing: 0.1em; flex-shrink: 0; width: 20px; } body[data-surface="caseone"] .co-frame-panel-nav-tag { font-size: 0.72rem; color: var(--co-ink-mute); font-family: var(--co-font-mono); letter-spacing: 0.05em; } /* ========================================================== NAV MOBILE CaseOne ========================================================== */ body[data-surface="caseone"] .co-nav-mobile { position: fixed; top: 64px; left: 0; right: 0; background: rgba(11, 22, 32, 0.97); border-bottom: 1px solid var(--co-line-strong); z-index: 99; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform 250ms ease, opacity 250ms ease; max-height: calc(100vh - 64px); overflow-y: auto; backdrop-filter: blur(16px); } body[data-surface="caseone"] .co-nav-mobile.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; } body[data-surface="caseone"] .co-nav-mobile-section { padding: 16px 20px; border-bottom: 1px solid var(--co-line); } body[data-surface="caseone"] .co-nav-mobile-section:last-child { border-bottom: none; } body[data-surface="caseone"] .co-nav-mobile-eyebrow { display: block; font-family: var(--co-font-mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--co-ink-mute); margin-bottom: 10px; } body[data-surface="caseone"] .co-nav-mobile a { display: flex; align-items: center; gap: 10px; padding: 8px 4px; font-family: var(--co-font-body); font-size: 0.875rem; color: var(--co-ink-dim); text-decoration: none; border-bottom: 1px solid var(--co-line); transition: color 140ms ease; } body[data-surface="caseone"] .co-nav-mobile a:last-child { border-bottom: none; } body[data-surface="caseone"] .co-nav-mobile a::before { content: attr(data-num); font-family: var(--co-font-mono); font-size: 0.6rem; color: var(--co-ink-mute); width: 18px; flex-shrink: 0; } body[data-surface="caseone"] .co-nav-mobile a:hover, body[data-surface="caseone"] .co-nav-mobile .co-nav-mobile-active { color: var(--co-gold); } /* ========================================================== STAMPS — tampons disseminés style pièce à conviction ========================================================== */ body[data-surface="caseone"] .co-stamp { display: inline-block; padding: 5px 12px 4px; font-family: var(--co-font-mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--co-ink); border: 1.5px solid var(--co-ink-dim); line-height: 1.4; pointer-events: none; user-select: none; opacity: 0.72; } /* Groupe de stamps en haut du héros — les messages clés en format tampon */ body[data-surface="caseone"] .co-stamps-group { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; margin-bottom: 26px; } body[data-surface="caseone"] .co-stamps-group .co-stamp { opacity: 0.82; } body[data-surface="caseone"] .co-stamps-group .co-stamp:nth-child(1) { transform: rotate(-1.8deg); } body[data-surface="caseone"] .co-stamps-group .co-stamp:nth-child(2) { transform: rotate(1.4deg); } body[data-surface="caseone"] .co-stamps-group .co-stamp:nth-child(3) { transform: rotate(-1deg); } /* ========================================================== HERO IMAGE — visible sur mobile landing.css masque .hero__visual sous 768px (display:none). Sur CaseOne on la réaffiche : colonne unique, image pleine largeur sous le bloc texte. ========================================================== */ @media (max-width: 768px) { body[data-surface="caseone"] .hero__visual { display: flex; justify-content: center; width: 100%; margin-top: 1.5rem; } body[data-surface="caseone"] .hero__visual .hero__image-frame, body[data-surface="caseone"] .hero__visual img { width: 100%; max-width: 480px; height: auto; max-height: 260px; object-fit: cover; object-position: top; } }