/* ═══════════════════════════════════════════════════════ MIRADOR · Thème Clair (Light Theme) Actif quand est présent. Géré par js/theme.js — désactiver en retirant ce . ═══════════════════════════════════════════════════════ */ [data-theme="light"] { /* ── Couleurs de fond ── */ --color-primary-dark: #FFFFFF; --color-primary: #F2F6FB; --color-primary-light: #E4EBF5; /* ── Texte : inversion blanc → bleu nuit ── */ --color-white: #0B2545; --color-gray-50: #071929; --color-gray-100: #0B2545; --color-gray-200: #1A3A5F; --color-gray-400: #4A6080; --color-gray-500: #5A7090; --color-gray-600: #8B9AAE; --color-gray-800: #E8EDF5; /* ── Bordures ── */ --border-subtle: 1px solid rgba(11, 37, 69, 0.10); --border-default: 1px solid rgba(11, 37, 69, 0.16); --border-strong: 1px solid rgba(11, 37, 69, 0.28); /* ── Ombres ── */ --shadow-sm: 0 1px 3px rgba(11, 37, 69, 0.07); --shadow-md: 0 4px 16px rgba(11, 37, 69, 0.10); --shadow-lg: 0 12px 40px rgba(11, 37, 69, 0.15); } /* ── Body ── */ [data-theme="light"] body { color: #0B2545; } /* ── Titres ── */ [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5 { color: #0B2545; } /* ── Liens ── */ [data-theme="light"] a { color: var(--color-action); } [data-theme="light"] a:hover { color: var(--color-action-hover); } /* ── Scrollbar ── */ [data-theme="light"] ::-webkit-scrollbar-track { background: #F2F6FB; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(11,37,69,0.15); } /* ══════════════════════════════════════════════════════ NAVIGATION ══════════════════════════════════════════════════════ */ [data-theme="light"] .nav { background: transparent; } [data-theme="light"] .nav.scrolled { background: rgba(255,255,255,0.96); border-bottom: 1px solid rgba(11,37,69,0.08); box-shadow: 0 4px 24px rgba(11,37,69,0.08); } [data-theme="light"] .nav__logo-name, [data-theme="light"] .nav__logo-sub { color: #0B2545; } [data-theme="light"] .nav__logo-name span { color: var(--color-action); } [data-theme="light"] .nav__link { color: #4A6080; } [data-theme="light"] .nav__link:hover, [data-theme="light"] .nav__link.active { color: #0B2545; } [data-theme="light"] .nav__portal-link { color: #4A6080; } [data-theme="light"] .nav__portal-link:hover { color: #0B2545; } [data-theme="light"] .nav__hamburger span { background: #0B2545; } /* Menu mobile */ [data-theme="light"] .nav__mobile { background: #FFFFFF; } [data-theme="light"] .nav__mobile-link { color: #0B2545; } [data-theme="light"] .nav__mobile-link:hover { color: var(--color-action); } /* Urgence bar */ [data-theme="light"] .urgence-bar { background: #B82020; } /* ══════════════════════════════════════════════════════ HERO ══════════════════════════════════════════════════════ */ [data-theme="light"] .hero::before { background: radial-gradient(ellipse 80% 60% at 70% 40%, rgba(18,165,165,0.07) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 10% 80%, rgba(30,111,184,0.07) 0%, transparent 50%), linear-gradient(180deg, #FFFFFF 0%, #F2F6FB 100%); } [data-theme="light"] .hero::after { background-image: linear-gradient(rgba(11,37,69,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(11,37,69,0.04) 1px, transparent 1px); } [data-theme="light"] .hero__subtitle { color: #4A6080; } [data-theme="light"] .hero__stat-label { color: #4A6080; } [data-theme="light"] .hero__stat-divider { background: rgba(11,37,69,0.12); } [data-theme="light"] .hero__social-proof { border-top: 1px solid rgba(11,37,69,0.10); } [data-theme="light"] .hero__visual-placeholder { background: rgba(11,37,69,0.04); border: 1px solid rgba(11,37,69,0.10); color: #8B9AAE; } /* ══════════════════════════════════════════════════════ SECTIONS ══════════════════════════════════════════════════════ */ [data-theme="light"] .bg-section-alt { background: #F2F6FB; } [data-theme="light"] .how-it-works { background: #FFFFFF; } [data-theme="light"] .social-proof { background: #FFFFFF; } /* ══════════════════════════════════════════════════════ CARTES ══════════════════════════════════════════════════════ */ [data-theme="light"] .card { background: #FFFFFF; border: 1px solid rgba(11,37,69,0.10); box-shadow: 0 2px 8px rgba(11,37,69,0.06); } [data-theme="light"] .card:hover { border-color: rgba(18,165,165,0.35); background: #FFFFFF; } [data-theme="light"] .challenge-card { background: #FFFFFF; border: 1px solid rgba(11,37,69,0.10); } [data-theme="light"] .challenge-card:hover { background: rgba(18,165,165,0.04); border-color: rgba(18,165,165,0.3); } [data-theme="light"] .challenge-card__desc { color: #4A6080; } [data-theme="light"] .challenge-card__icon { background: rgba(30,111,184,0.08); border: 1px solid rgba(30,111,184,0.15); } /* Comment ça marche */ [data-theme="light"] .step__desc { color: #4A6080; } /* Offres */ [data-theme="light"] .offer-preview-card { background: #FFFFFF; border: 1px solid rgba(11,37,69,0.10); box-shadow: 0 2px 8px rgba(11,37,69,0.05); } [data-theme="light"] .offer-preview-card:hover:not(.offer-preview-card--recommended) { border-color: rgba(18,165,165,0.3); } [data-theme="light"] .offer-preview-card--recommended { background: rgba(18,165,165,0.05); border-color: var(--color-action); } [data-theme="light"] .offer-card__target { color: #8B9AAE; } [data-theme="light"] .offer-card__feature { color: #4A6080; } [data-theme="light"] .offer-card__price-unit { color: #8B9AAE; } /* Offres page (full cards) */ [data-theme="light"] .offer-full-card { background: #FFFFFF; border: 1px solid rgba(11,37,69,0.10); } [data-theme="light"] .offer-full-card--recommended { background: rgba(18,165,165,0.05); border-color: var(--color-action); } [data-theme="light"] .offer-full-card__target { color: #8B9AAE; } [data-theme="light"] .offer-full-card__feature { color: #4A6080; } [data-theme="light"] .offer-full-card__divider { background: rgba(11,37,69,0.08); } [data-theme="light"] .offer-full-card__setup { color: #8B9AAE; } /* Tabs offres */ [data-theme="light"] .deploy-tabs { border: 1px solid rgba(11,37,69,0.15); background: #F2F6FB; } [data-theme="light"] .deploy-tab { color: #4A6080; } [data-theme="light"] .deploy-tab:not(.active):hover { background: rgba(11,37,69,0.05); color: #0B2545; } /* ══════════════════════════════════════════════════════ PREUVE SOCIALE ══════════════════════════════════════════════════════ */ [data-theme="light"] .logos-strip { border-top: 1px solid rgba(11,37,69,0.10); border-bottom: 1px solid rgba(11,37,69,0.10); } [data-theme="light"] .logos-strip__item { color: #8B9AAE; } [data-theme="light"] .stat-item__label { color: #4A6080; } [data-theme="light"] .testimonial-card { background: #FFFFFF; border: 1px solid rgba(11,37,69,0.10); box-shadow: 0 2px 8px rgba(11,37,69,0.05); } [data-theme="light"] .testimonial-card__quote { color: #0B2545; } [data-theme="light"] .testimonial-card__role { color: #8B9AAE; } [data-theme="light"] .testimonial-card__avatar { background: #F2F6FB; border: 1px solid rgba(11,37,69,0.10); } /* ══════════════════════════════════════════════════════ CTA BANNER ══════════════════════════════════════════════════════ */ [data-theme="light"] .cta-banner { background: linear-gradient(135deg, #F2F6FB 0%, rgba(18,165,165,0.06) 100%); border-top: 1px solid rgba(11,37,69,0.08); border-bottom: 1px solid rgba(11,37,69,0.08); } [data-theme="light"] .cta-banner__sub { color: #4A6080; } /* ══════════════════════════════════════════════════════ FORMULAIRE CONTACT ══════════════════════════════════════════════════════ */ [data-theme="light"] .form-label { color: #0B2545; } [data-theme="light"] .form-input, [data-theme="light"] .form-select, [data-theme="light"] .form-textarea { background: #FFFFFF; border: 1px solid rgba(11,37,69,0.18); color: #0B2545; } [data-theme="light"] .form-input::placeholder { color: #8B9AAE; } [data-theme="light"] .form-input:focus, [data-theme="light"] .form-select:focus, [data-theme="light"] .form-textarea:focus { border-color: var(--color-action); background: rgba(18,165,165,0.04); } [data-theme="light"] .form-select option { background: #FFFFFF; color: #0B2545; } /* Contact page */ [data-theme="light"] .contact-card { background: #FFFFFF; border: 1px solid rgba(11,37,69,0.10); box-shadow: 0 4px 16px rgba(11,37,69,0.08); } [data-theme="light"] .contact-info-block { background: #F2F6FB; border: 1px solid rgba(11,37,69,0.10); } [data-theme="light"] .contact-info-block__value { color: #0B2545; } [data-theme="light"] .contact-info-block__sub { color: #8B9AAE; } /* ══════════════════════════════════════════════════════ PAGE HEADER (pages internes) ══════════════════════════════════════════════════════ */ [data-theme="light"] .page-header { background: linear-gradient(180deg, #FFFFFF 0%, #F2F6FB 100%); } [data-theme="light"] .page-header::before { background: radial-gradient(ellipse 60% 60% at 50% 30%, rgba(18,165,165,0.07), transparent); } [data-theme="light"] .page-header__sub { color: #4A6080; } /* ══════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════ */ [data-theme="light"] .footer { background: #F2F6FB; border-top: 1px solid rgba(11,37,69,0.08); } [data-theme="light"] .footer__brand-desc { color: #4A6080; } [data-theme="light"] .footer__col-title { color: #8B9AAE; } [data-theme="light"] .footer__link { color: #4A6080; } [data-theme="light"] .footer__link:hover { color: #0B2545; } [data-theme="light"] .footer__copy { color: #8B9AAE; } [data-theme="light"] .footer__legal-link { color: #8B9AAE; } [data-theme="light"] .footer__legal-link:hover { color: #4A6080; } [data-theme="light"] .footer__grid { border-bottom: 1px solid rgba(11,37,69,0.08); } /* ══════════════════════════════════════════════════════ BOUTON TOGGLE THÈME ══════════════════════════════════════════════════════ */ .theme-toggle { background: none; border: none; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0.3rem; border-radius: var(--radius-sm); transition: transform var(--transition-fast); display: flex; align-items: center; } .theme-toggle:hover { transform: scale(1.15); } /* ══════════════════════════════════════════════════════ ACCORDÉON (page offres) ══════════════════════════════════════════════════════ */ [data-theme="light"] .accordion-trigger { color: #0B2545; } [data-theme="light"] .accordion-item { border-bottom: 1px solid rgba(11,37,69,0.10); } [data-theme="light"] .accordion-panel-inner { color: #4A6080; } /* ══════════════════════════════════════════════════════ DIVERS ══════════════════════════════════════════════════════ */ [data-theme="light"] .text-muted { color: #4A6080; } [data-theme="light"] .text-action { color: var(--color-action); } [data-theme="light"] .divider { background: rgba(11,37,69,0.08); } /* ── BOUTONS ── */ /* Primaire : fond teal → texte blanc (pas bleu) */ [data-theme="light"] .btn--primary, [data-theme="light"] .btn--primary:hover { color: #FFFFFF; } /* Secondaire : fond transparent → texte sombre + bordure sombre */ [data-theme="light"] .btn--secondary { color: #0B2545; border: 1px solid rgba(11,37,69,0.24); } [data-theme="light"] .btn--secondary:hover { background: rgba(11,37,69,0.06); color: #0B2545; border-color: rgba(11,37,69,0.4); } /* Urgence/alerte : fond rouge → texte blanc */ [data-theme="light"] .btn--alert, [data-theme="light"] .btn--alert:hover { color: #FFFFFF; } /* Badges */ [data-theme="light"] .badge--action { background: var(--color-action-dim); color: var(--color-action); border: 1px solid var(--color-action-border); }