/* ============================================================ AMBIANCE · fond « tech » Au Clair Digital Halos de lumière sur fond clair, quadrillage fin sur les sections sombres. S'applique avec : + classe .night-tech sur les sections sombres. Décoratif uniquement (aucun impact sur la lisibilité : lignes < 5 % d'opacité, contrastes intacts). ============================================================ */ /* --- Fond clair : halos or / sauge, sans quadrillage --- */ body.bg-tech { background-color: #FBF8F0; /* --paper */ background-image: radial-gradient(ellipse 640px 420px at 14% 90px, rgba(212, 169, 90, 0.13), transparent 70%), radial-gradient(ellipse 560px 400px at 88% 480px, rgba(123, 158, 137, 0.10), transparent 70%); background-repeat: no-repeat; } /* --- Sections sombres : grille crème + halo doré (référence Espero) --- */ .night-tech { background-image: radial-gradient(ellipse 560px 380px at 18% 12%, rgba(212, 169, 90, 0.13), transparent 70%), radial-gradient(ellipse 480px 340px at 85% 88%, rgba(123, 158, 137, 0.10), transparent 72%), linear-gradient(to right, rgba(244, 236, 216, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(244, 236, 216, 0.05) 1px, transparent 1px); background-repeat: no-repeat, no-repeat, repeat, repeat; background-size: auto, auto, 44px 44px, 44px 44px; } /* --- Sections crème : laisser respirer la grille en transparence --- */ .cream-sheer { background-color: rgba(244, 236, 216, 0.72) !important; } /* --- Questions fréquentes : renvoi vers Tarifs, ligne de contact, et bloc partagé (Point Clair, Automatisation) --- */ .faq-renvoi { font-size: 14.5px; color: #5C656E; line-height: 1.6; margin-top: 22px; } .faq-fin { font-size: 15px; color: #1F2F47; font-weight: 600; line-height: 1.6; margin-top: 18px; } .faq-renvoi a, .faq-fin a { color: #806129; font-weight: 600; border-bottom: 1px solid #D4A95A; } .faq-renvoi a:hover, .faq-fin a:hover { color: #1F2F47; } .faq-bloc { padding: 80px 0; background: #FBF8F0; border-top: 1px solid #E4DECB; } .faq-bloc .faq-inner { max-width: 820px; margin: 0 auto; padding: 0 24px; } .faq-bloc .faq-titre { font-family: 'Manrope', -apple-system, sans-serif; font-weight: 800; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15; letter-spacing: -0.02em; color: #1F2F47; margin-bottom: 26px; } .faq-bloc .faq-titre em { font-style: normal; color: #806129; } .faq-bloc .faq-item { border-bottom: 1px solid #E4DECB; } .faq-bloc .faq-q { width: 100%; background: none; border: none; text-align: left; padding: 22px 44px 22px 0; cursor: pointer; font-family: 'Manrope', -apple-system, sans-serif; font-size: 17px; font-weight: 600; line-height: 1.4; color: #1F2F47; position: relative; } .faq-bloc .faq-q:hover { color: #806129; } .faq-bloc .faq-q::after { content: '\002B'; position: absolute; right: 4px; top: 20px; font-size: 22px; font-weight: 300; color: #D4A95A; transition: transform 0.3s ease; } .faq-bloc .faq-item.open .faq-q::after { transform: rotate(45deg); } .faq-bloc .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .faq-bloc .faq-item.open .faq-a { max-height: 600px; } .faq-bloc .faq-a p { font-size: 15.5px; color: #2A2A2A; line-height: 1.7; padding-bottom: 22px; } @media (max-width: 760px) { .faq-bloc { padding: 56px 0; } } @media (prefers-reduced-motion: reduce) { .faq-bloc .faq-a, .faq-bloc .faq-q::after { transition: none; } } /* --- Barre de menu en bleu nuit (essai validable : supprimer ce bloc pour revenir au clair) --- */ body.bg-tech .navbar { background: rgba(21, 36, 58, 0.92); border-bottom: 1px solid rgba(244, 236, 216, 0.12); backdrop-filter: saturate(160%) blur(10px); } body.bg-tech .navbar .logo-au, body.bg-tech .navbar .logo-digital { color: #F4ECD8; } body.bg-tech .navbar .logo-clair { color: #D4A95A; } body.bg-tech .navbar .lm-bg { fill: transparent; } body.bg-tech .navbar .nav-links a.nav-link { color: rgba(244, 236, 216, 0.72); } body.bg-tech .navbar .nav-links a.nav-link:hover { color: #F4ECD8; } body.bg-tech .navbar .nav-drop-btn { color: rgba(244, 236, 216, 0.85); } body.bg-tech .navbar .nav-drop-btn:hover { color: #F4ECD8; } body.bg-tech .navbar .nav-social a { color: rgba(244, 236, 216, 0.6); } body.bg-tech .navbar .nav-social a:hover { color: #D4A95A; }