/* ═══════════════════════════════════════════ RTM — theme-clair.css Thème clair, activé par Ne s'applique qu'aux pages portant la classe. ═══════════════════════════════════════════ */ .theme-clair { background: var(--white); color: var(--charbon); /* Voile blanc posé sur les photos de hero — défini une seule fois ici et consommé par #hero (hero.css) et les 4 règles .service-hero ci-dessous. Dégradé horizontal : dense à gauche (93%) sous le texte, léger à droite (50%) pour laisser voir la photo. Les deux moitiés ont des besoins opposés, un voile uniforme ne peut pas satisfaire les deux. */ --voile-hero: linear-gradient(to right, rgba(255,255,255,0.93) 0%, rgba(255,255,255,0.90) 45%, rgba(255,255,255,0.50) 100%); } /* Sous 1024px le texte n'occupe plus la moitié gauche : le hero de l'accueil passe en une colonne centrée pleine largeur, et sur les pages services la fin du sous-titre (max-width 540px) atteint 73% de l'écran à 769px. Le dégradé horizontal n'y protège donc plus le texte : voile uniforme. Redéfinir la variable suffit — les 5 heros suivent automatiquement. */ @media (max-width: 1024px) { .theme-clair { --voile-hero: linear-gradient(rgba(255,255,255,0.88), rgba(255,255,255,0.88)); } } /* Bouton contour : texte ET bordure blancs à l'origine, donc invisible sur fond clair. Concerne le hero de l'accueil et le CTA « Demander un devis gratuit » des pages services. */ .theme-clair .btn-outline { color: var(--charbon); border-color: rgba(0,0,0,0.35); } .theme-clair .btn-outline:hover { background: rgba(0,0,0,0.06); border-color: var(--charbon); color: var(--charbon); } /* Le header reste noir : aucune surcharge (voir header.css). */ /* ─── NAV MOBILE ─────────────────────────── */ .theme-clair .nav-mobile { background: var(--white); } .theme-clair .nav-mobile ul li { border-bottom-color: rgba(0,0,0,0.08); } .theme-clair .nav-mobile ul a { color: var(--charbon); } /* ─── SECTIONS SOMBRES ───────────────────── */ .theme-clair .bg-dark { background: var(--white); color: var(--charbon); } /* Pourquoi RTM */ .theme-clair .point-card { background: #FAFAFA; border-color: rgba(0,0,0,0.08); } .theme-clair .point-card:hover { border-color: rgba(230,126,34,0.4); } .theme-clair .point-title { color: var(--charbon); } /* ─── FORMULES ───────────────────────────── */ .theme-clair #formules { background: var(--white); } .theme-clair .formule-card { background: #FAFAFA; border-color: rgba(0,0,0,0.08); } .theme-clair .formule-name { color: var(--charbon); } .theme-clair .formule-item.included { color: rgba(0,0,0,0.8); } .theme-clair .formule-item.excluded, .theme-clair .formule-item.excluded::before { color: rgba(0,0,0,0.3); } /* ═══════════════════════════════════════════ PAGES SERVICES (service-detail.css) ═══════════════════════════════════════════ */ /* Le hero des pages services porte sa photo en STYLE EN LIGNE, avec un voile noir à 65%. Un style en ligne bat une feuille de style : sans !important le voile noir resterait sous un texte devenu foncé (donc illisible). On redéclare donc le fond avec un voile blanc, comme le hero de l'accueil. Le sélecteur vise le nom du fichier image : 4 règles couvrent les 9 pages, et le HTML n'est pas touché. Le voile est un dégradé horizontal : dense à gauche (93%) sous le texte, léger à droite (50%) pour laisser voir la photo. Les besoins sont opposés sur les deux moitiés, un voile uniforme ne peut pas satisfaire les deux. */ .theme-clair .service-hero { background: var(--white); } .theme-clair .service-hero[style*="hero-demenagement.jpg"] { background: var(--voile-hero), url('../images/hero-demenagement.jpg') center/cover no-repeat !important; } .theme-clair .service-hero[style*="hero-transport.jpg"] { background: var(--voile-hero), url('../images/hero-transport.jpg') center/cover no-repeat !important; } .theme-clair .service-hero[style*="hero-vide-maison.jpg"] { background: var(--voile-hero), url('../images/hero-vide-maison.jpg') center/cover no-repeat !important; } .theme-clair .service-hero[style*="hero-lift.jpg"] { background: var(--voile-hero), url('../images/hero-lift.jpg') left center/130% no-repeat !important; } /* Sous 768px la photo disparaît, comme sur l'accueil. [style] porte la même spécificité que les règles ci-dessus pour pouvoir les emporter. */ @media (max-width: 768px) { .theme-clair .service-hero[style] { background: var(--white) !important; } } .theme-clair .service-back { color: rgba(0,0,0,0.6); } .theme-clair .service-hero-badge, .theme-clair .sd-tag { color: var(--orange-dark); } .theme-clair .service-hero-title { color: var(--charbon); } .theme-clair .service-hero-sub { color: rgba(0,0,0,0.65); } .theme-clair .sd-section, .theme-clair .sd-cta-section { background: var(--white); } .theme-clair .sd-section.alt { background: var(--grey-light); } .theme-clair .sd-list li { color: rgba(0,0,0,0.8); } .theme-clair .sd-step { background: #FAFAFA; border-color: rgba(0,0,0,0.08); } .theme-clair .sd-step-title { color: var(--charbon); } .theme-clair .sd-step-desc, .theme-clair .sd-cta-sub { color: #555; } .theme-clair .sd-cta-title { color: var(--charbon); } /* ═══════════════════════════════════════════ STYLES SOMBRES ÉCRITS EN LIGNE DANS LE HTML Les sélecteurs visent la chaîne exacte de l'attribut style ; « !important » est indispensable pour battre un style en ligne. Même technique que responsive.css (section div[style*="repeat(4,1fr)"]). Objectif : ne pas toucher au HTML des pages. ═══════════════════════════════════════════ */ /* Encart « Lift disponible » et sections « Comment ça se passe » */ .theme-clair [style*="background:#1A1A1A"], .theme-clair [style*="background: #1A1A1A"] { background: #FAFAFA !important; } /* Cartes d'étapes (fond et bordure blancs translucides) */ .theme-clair .step-card[style*="rgba(255,255,255,0.04)"] { background: #FAFAFA !important; border-color: rgba(0,0,0,0.08) !important; } /* Titres blancs (h2 encart Lift, titres d'étapes, des textes SEO) */ .theme-clair [style*="color:#fff"] { color: var(--charbon) !important; } /* Paragraphes clairs posés sur les anciens fonds sombres */ .theme-clair [style*="rgba(255,255,255,0.68)"], .theme-clair [style*="rgba(255,255,255,0.65)"], .theme-clair [style*="rgba(255,255,255,0.5)"] { color: #444 !important; } /* ─── FOOTER ─────────────────────────────── */ .theme-clair footer { background: var(--grey-light); border-top: 1px solid rgba(0,0,0,0.08); } .theme-clair .footer-col-title { color: rgba(0,0,0,0.55); } .theme-clair .footer-brand-sub, .theme-clair .footer-col a, .theme-clair .footer-contact-item a { color: #5C5C5C; } .theme-clair .footer-col a:hover, .theme-clair .footer-contact-item a:hover { color: var(--orange-dark); } .theme-clair .footer-sep { border-top-color: rgba(0,0,0,0.08); } .theme-clair .footer-copy, .theme-clair .footer-credit { color: rgba(0,0,0,0.45); }