/* Theme Name: Ephrem Child Theme Theme URI: https://ephrem.agency Description: WP Ephrem Child theme — Refonte Eosium (Light Tech Premium) Author: ephrem@ephreminteractive.com Author URI: https://ephrem.agency Template: wp-ephrem-theme Version: 4.6.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Tags: responsive-layout, accessibility-ready Text Domain: ephrem */ /* ========================================================= 0. Google Fonts — Inter (300 → 900) ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); /* ========================================================= 1. Variables — Eosium Light Tech Premium ========================================================= */ :root { /* Palette de marque (inchangée — accents) */ --navy-deep: #0D1B3E; --navy-mid: #162347; --navy-light: #1E2F5A; --blue-electric: #009FFF; --blue-glow: #33B5FF; --blue-dark: #0070CC; --orange: #F5A623; --orange-dark: #D4891A; /* Surfaces claires */ --white: #FFFFFF; --bg-page: #FFFFFF; --bg-alt: #F4F7FC; /* sections en alternance */ --bg-soft: #EEF3FB; /* zones très subtiles */ /* Texte */ --text-primary: #0D1B3E; /* navy deep pour le corps */ --text-secondary: #3D4D75; /* navy moyen lisible */ --text-muted: #6B7FA3; /* gris-bleu existant */ --text-on-dark: #FFFFFF; --gray-light: #6B7FA3; /* alias pour compat avec maquettes */ --gray-muted: #6B7FA3; /* alias pour compat avec maquettes */ /* Bordures & ombres */ --border-soft: rgba(13, 27, 62, 0.08); --border-med: rgba(13, 27, 62, 0.14); --border-blue: rgba(0, 159, 255, 0.25); --border-orange: rgba(245, 166, 35, 0.35); --shadow-sm: 0 2px 8px rgba(13, 27, 62, 0.06); --shadow-md: 0 8px 24px rgba(13, 27, 62, 0.08); --shadow-lg: 0 16px 48px rgba(13, 27, 62, 0.10); /* Rayons */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-pill: 999px; } /* ========================================================= 2. Base — Body, typo, sélection ========================================================= */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background-color: var(--bg-page); color: var(--text-primary); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: 'Inter', sans-serif; color: var(--text-primary); font-weight: 800; letter-spacing: -0.01em; } /* H1 — dégradé navy → bleu électrique (équivalent fond clair du blanc → bleu de la maquette) */ h1 { font-weight: 900; letter-spacing: -0.02em; color: var(--navy-deep); /* fallback */ background: linear-gradient(135deg, var(--navy-deep) 0%, var(--blue-electric) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* H2 — taille fixe standardisée (idem desktop / mobile) */ h2 { font-size: 32px; font-weight: 900; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 1rem; text-wrap: balance; position: relative; } /* Variante décorée : petite barre dégradée bleu → orange sous le titre. À utiliser via

…

ou automatiquement à l'intérieur de .section-header (voir plus bas). */ h2.h2-accent::after, .section-header h2::after { content: ''; display: block; width: 64px; height: 4px; margin-top: 18px; border-radius: 4px; background: linear-gradient(90deg, var(--blue-electric) 0%, var(--orange) 100%); box-shadow: 0 4px 14px rgba(0, 159, 255, 0.25); } /* Quand le H2 est centré, la barre suit */ h2.text-center.h2-accent::after, .section-header.text-center h2::after, .has-text-align-center.h2-accent::after { margin-left: auto; margin-right: auto; } /* Variante orange seule (sections « urgent / sécurité ») */ h2.h2-accent--orange::after { background: linear-gradient(90deg, var(--orange) 0%, var(--orange-dark) 100%); box-shadow: 0 4px 14px rgba(245, 166, 35, 0.30); } /* Variante bleue seule (sections « technique / produit ») */ h2.h2-accent--blue::after { background: linear-gradient(90deg, var(--blue-electric) 0%, var(--blue-glow) 100%); box-shadow: 0 4px 14px rgba(0, 159, 255, 0.30); } /* H3 — un cran sous le H2, légèrement plus compact */ h3 { font-size: clamp(20px, 2vw, 26px); font-weight: 800; line-height: 1.25; letter-spacing: -0.015em; margin: 0 0 0.75rem; text-wrap: balance; } /* Wrapper de "section-header" — badge + h2 + intro avec un rythme vertical propre. Centré par défaut, alignement libre via .text-start / .text-end. */ .section-header { max-width: 720px; margin: 0 auto 3rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .section-header.text-start { text-align: left; margin-left: 0; align-items: flex-start; } .section-header.text-end { text-align: right; margin-right: 0; align-items: flex-end; } .section-header .badge, .section-header .badge-orange, .section-header .eyebrow { margin-bottom: 4px; } .section-header h2 { margin-bottom: 8px; } .section-header p { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--text-secondary); margin: 12px 0 0; max-width: 56ch; } .section-header.text-start p { margin-left: 0; } .section-header.text-end p { margin-right: 0; } /* Sur fond foncé, on revient au dégradé original blanc → bleu de la maquette */ .section-dark h1, .bg-navy h1, .bg-navy-mid h1 { color: #FFFFFF; background: linear-gradient(135deg, #FFFFFF 0%, var(--blue-electric) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .section-dark h2, .bg-navy h2, .bg-navy-mid h2, .eos-footer h2 { color: #FFFFFF; } .section-dark h3, .bg-navy h3, .bg-navy-mid h3, .eos-footer h3 { color: #FFFFFF; } p { color: var(--text-secondary); line-height: 1.65; font-size: inherit !important; } a { color: var(--blue-electric); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--blue-dark); } ::selection { background: rgba(0, 159, 255, 0.18); color: var(--navy-deep); } /* Reset global du