/* ════════════════════════════════════════════════ Styles communs aux pages "agence web" refondues (nouveau design) Chargé APRÈS wp_head() + /style.css pour surcharger GeneratePress. ════════════════════════════════════════════════ */ /* On masque tout résidu de chrome GeneratePress injecté via wp_head/wp_footer */ .main-navigation, #generate-slideout-menu, .slideout-navigation, .slideout-overlay, #mobile-header, .generate-back-to-top { display: none !important; } .sec { padding: 3.2rem 0; } .sec .eyebrow { margin-bottom: 0.9rem; } .sec h2 { margin-bottom: 1.1rem; } .sec h2.grad { background: linear-gradient(130deg, #5ef0ff 10%, #9b7dff 52%, #ff66cf 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* H1 en blanc (pas de dégradé) */ .hero h1, .hero h1 em { background: none !important; -webkit-text-fill-color: #eef0ff !important; color: #eef0ff !important; } /* H2 sans dégradé : forcer le blanc (sinon couleur sombre héritée de GeneratePress) */ .links-block h2, .section-head h2, .contact-box h2 { color: #eef0ff !important; -webkit-text-fill-color: #eef0ff !important; } .prose { max-width: 74ch; } .prose p, .lead { color: #c5cbee; line-height: 1.82; margin-bottom: 1.1rem; } .prose p:last-child { margin-bottom: 0; } .lead { font-size: 1.05rem; } .feature-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.8rem; align-items: start; } /* Desktop : blocs descriptifs sur une seule colonne, plus larges (texte étalé vers les bords) */ @media (min-width: 900px) { .sec-creation > .container { width: min(100% - 2rem, 1320px); } .sec-creation .feature-grid { grid-template-columns: 1fr; } .sec-creation .fcard { padding: 1.6rem 1.2rem; } .sec-creation .fcard p, .sec-creation .kv-list li { max-width: none; } } .fcard { padding: 1.7rem 1.5rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; backdrop-filter: blur(8px); transition: border-color .22s, transform .22s, box-shadow .22s; } .fcard:hover { border-color: rgba(94,240,255,0.28); transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,0.24); } .fcard h3 { font-family: 'Syne', sans-serif; color: #eef0ff; margin-bottom: 0.8rem; font-size: 1.12rem; display: flex; align-items: flex-start; gap: 0.55rem; line-height: 1.25; } .fcard h3 .ic { font-size: 1.3rem; line-height: 1; flex-shrink: 0; } .fcard p { color: #c5cbee; line-height: 1.75; font-size: 0.95rem; margin-bottom: 0.8rem; } .fcard p:last-child { margin-bottom: 0; } .kv-list { display: grid; gap: 0.75rem; margin-top: 0.3rem; } .kv-list li { position: relative; padding-left: 1.7rem; color: #c5cbee; line-height: 1.65; font-size: 0.94rem; } .kv-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: #5ef0ff; font-weight: 700; } .kv-list li b { color: #eef0ff; } .check-cols { display: grid; grid-template-columns: 1fr; gap: 0.7rem; margin-top: 1.4rem; max-width: 74ch; } @media (min-width: 620px) { .check-cols { grid-template-columns: repeat(2, 1fr); } } .check-cols li { position: relative; padding-left: 1.7rem; color: #c5cbee; line-height: 1.55; font-size: 0.95rem; } .check-cols li::before { content: '✓'; position: absolute; left: 0; color: #5ef0ff; font-weight: 700; } /* note kkstarratings dans le hero */ .hero-rating { margin: 0.3rem 0 0.2rem; } .hero-rating .kksr-stars { display: inline-block; } .hero-rating .kksr-legend { color: #8b95c8 !important; font-size: 0.85rem !important; } /* FAQ */ .section-head { text-align: center; margin-bottom: 2rem; } .faq-list { display: grid; gap: 0.7rem; max-width: 80ch; margin: 0 auto; } .faq-item { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; overflow: hidden; } .faq-item summary { cursor: pointer; list-style: none; padding: 1.1rem 1.3rem; font-family: 'Syne', sans-serif; font-weight: 700; color: #eef0ff; display: flex; justify-content: space-between; gap: 1rem; align-items: center; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; color: #5ef0ff; font-size: 1.35rem; line-height: 1; flex-shrink: 0; } .faq-item[open] summary::after { content: '\2013'; } .faq-item[open] summary { color: #5ef0ff; } .faq-a { padding: 0 1.3rem 1.3rem; color: #c5cbee; line-height: 1.82; } .faq-a p { margin: 0; } /* bloc synthétique */ .rd-synth { margin: 0 0 1rem; padding: 2rem 1.6rem; border-radius: 22px; background: linear-gradient(160deg, rgba(94,240,255,0.08), rgba(155,125,255,0.07)); border: 1px solid rgba(94,240,255,0.20); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 60px rgba(0,0,0,0.25); } .rd-synth-lead { font-family: 'Syne', sans-serif; font-weight: 700; color: #eef0ff; text-align: center; font-size: clamp(1.05rem,2.6vw,1.3rem); line-height: 1.3; max-width: 48ch; margin: 0 auto 1.6rem; } .rd-synth-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 0.8rem; } @media (min-width: 760px) { .rd-synth-grid { grid-template-columns: repeat(4,1fr); } } .rd-synth-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.25rem; padding: 1.1rem 0.8rem; border-radius: 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); transition: transform .22s, border-color .22s, background .22s; } .rd-synth-card:hover { transform: translateY(-3px); border-color: rgba(94,240,255,0.30); background: rgba(255,255,255,0.08); } .rd-synth-card .ic { font-size: 1.7rem; line-height: 1; } .rd-synth-card strong { color: #eef0ff; font-family: 'Syne', sans-serif; font-size: 0.98rem; } .rd-synth-card em { color: #8b95c8; font-style: normal; font-size: 0.82rem; } /* Footer : liens (mentions légales, etc.) */ .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; } .footer-nav a { color: var(--muted, #8b95c8); font-size: 0.85rem; transition: color 0.2s; } .footer-nav a:hover { color: var(--text, #eef0ff); } /* H3 toujours lisibles sur fond sombre (sinon couleur violette/foncée héritée de GeneratePress) */ .rd-newdesign h3 { color: #eef0ff !important; } /* Sécurité : le bouton du header garde son style même seul/en 1er enfant */ /* + texte de la couleur du fond du bandeau */ .header-nav > a.btn, .site-header .btn { color: #03030e !important; font-weight: 600; } /* Annule le padding-gauche par défaut des