/* * ============================================================ * Theme Name: Heliovera * Theme URI: https://artisan.domotique31.fr * Author: Heliovera * Author URI: https://artisan.domotique31.fr * Description: Thème sur mesure pour Heliovera, artisan multiservices * (électricité, espaces verts, bricolage et services à * domicile). Léger, rapide et professionnel, construit avec * Tailwind CSS v3 (embarqué inline, sans dépendance externe). * Version: 1.0.0 * Requires at least: 6.0 * Tested up to: 6.5 * Requires PHP: 8.0 * License: GNU General Public License v2 or later * License URI: https://www.gnu.org/licenses/gpl-2.0.html * Text Domain: theme-artisan * Tags: artisan, services, one-page, tailwindcss, custom * ============================================================ * * ARCHITECTURE DU THÈME * ───────────────────── * /theme-artisan/ * ├── style.css ← (ce fichier) En-tête obligatoire WP * ├── functions.php ← Chargement assets + WP Customizer * ├── header.php ← + barre de navigation * ├── footer.php ← Pied de page 3 colonnes * └── index.php ← Page d'accueil (hero + services + contact) * * PALETTE DE COULEURS (variables CSS) * ───────────────────────────────────── * --color-navy : #1B3A5C (bleu marine principal) * --color-navy-dark: #0F2540 (bleu marine foncé, hover) * --color-green : #2D6A4F (vert forêt / nature) * --color-green-light: #40916C (vert clair, accents) * --color-wood : #C27D38 (bois / ambre, CTA) * --color-wood-light: #D9963F (bois clair, hover CTA) * --color-cream : #F5F0E8 (fond crème chaud) * --color-charcoal: #2C2C2C (texte principal) * * NOTE : Tailwind CSS v3 (19 KB minifié) embarqué inline via wp_add_inline_style() dans functions.php. * Les styles propres au thème (overrides, variables CSS, * animations non couverts par Tailwind) sont ici. * ============================================================ */ /* ============================================================ 0. POLICES AUTO-HÉBERGÉES (RGPD) ============================================================ Playfair Display + Source Sans 3 (variables, sous-ensemble latin) servies localement depuis assets/fonts/ — aucun appel à Google Fonts, donc aucune transmission d'IP visiteur à Google (conforme CNIL). */ @font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url('assets/fonts/playfair-display.woff2') format('woff2')} @font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 900;font-display:swap;src:url('assets/fonts/playfair-display-italic.woff2') format('woff2')} @font-face{font-family:'Source Sans 3';font-style:normal;font-weight:300 900;font-display:swap;src:url('assets/fonts/source-sans-3.woff2') format('woff2')} /* ============================================================ 1. VARIABLES CSS GLOBALES ============================================================ */ :root { /* Palette principale */ --color-navy: #1B3A5C; --color-navy-dark: #0F2540; --color-navy-light: #2A5280; --color-green: #2D6A4F; --color-green-light: #40916C; --color-wood: #C27D38; --color-wood-light: #D9963F; --color-cream: #F5F0E8; --color-cream-dark: #EDE6D8; --color-charcoal: #2C2C2C; --color-muted: #6B7280; --color-white: #FFFFFF; /* Typographie */ --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Source Sans 3', 'Helvetica Neue', sans-serif; /* Espacements */ --section-padding: 5rem 1.5rem; /* Ombres */ --shadow-card: 0 4px 20px rgba(27, 58, 92, 0.10); --shadow-nav: 0 2px 16px rgba(27, 58, 92, 0.15); /* Transitions */ --transition-base: 0.3s ease; --transition-slow: 0.5s ease; /* Border radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; } /* ============================================================ 2. RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body); color: var(--color-charcoal); background-color: var(--color-white); line-height: 1.65; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; transition: color var(--transition-base); } ul, ol { list-style: none; } /* ============================================================ 3. TYPOGRAPHIE GLOBALE ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.25; color: var(--color-navy); letter-spacing: -0.01em; } p { margin-bottom: 1rem; } /* ============================================================ 4. COMPOSANTS — NAVIGATION ============================================================ */ /* Barre de navigation principale */ #site-header { background-color: var(--color-navy); box-shadow: var(--shadow-nav); position: sticky; top: 0; z-index: 1000; transition: background-color var(--transition-base), box-shadow var(--transition-base); } /* Logo texte (fallback si pas d'image) */ .site-logo-text { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--color-white); letter-spacing: 0.02em; } .site-logo-text span { color: var(--color-wood); } /* Logo circulaire — l'emblème carré (logo-mark.png) remplit le cercle or */ .site-logo-img { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--color-wood); background: var(--color-navy); object-fit: cover; /* emblème carré → remplit le disque, sans liseré */ object-position: center; padding: 0; /* l'anneau bleu touche le cercle or */ flex-shrink: 0; box-shadow: 0 0 0 1px rgba(194,125,56,.25); } /* Liens de navigation */ .nav-link { font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); letter-spacing: 0.05em; text-transform: uppercase; padding: 0.25rem 0; border-bottom: 2px solid transparent; transition: color var(--transition-base), border-color var(--transition-base); } .nav-link:hover { color: var(--color-wood-light); border-color: var(--color-wood-light); } /* Bouton CTA "Demander un devis" */ .btn-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background-color: var(--color-wood); color: var(--color-white) !important; font-family: var(--font-body); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.65rem 1.35rem; border-radius: var(--radius-sm); border: 2px solid var(--color-wood); cursor: pointer; transition: background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base); white-space: nowrap; } .btn-cta:hover { background-color: var(--color-wood-light); border-color: var(--color-wood-light); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(194, 125, 56, 0.40); } .btn-cta:active { transform: translateY(0); } /* Menu mobile — état ouvert */ #mobile-menu { display: none; flex-direction: column; gap: 0.75rem; background-color: var(--color-navy-dark); padding: 1.25rem 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } #mobile-menu.open { display: flex; } #mobile-menu .nav-link { font-size: 1rem; padding: 0.5rem 0; border-bottom-color: rgba(255,255,255,0.1); } /* Hamburger icon */ .hamburger-btn { display: flex; flex-direction: column; gap: 5px; cursor: pointer; padding: 0.5rem; background: transparent; border: none; outline: none; } .hamburger-btn span { display: block; width: 24px; height: 2px; background-color: var(--color-white); border-radius: 2px; transition: transform var(--transition-base), opacity var(--transition-base); } .hamburger-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger-btn.active span:nth-child(2) { opacity: 0; } .hamburger-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================ 5. COMPOSANTS — FOOTER ============================================================ */ #site-footer { background-color: var(--color-navy-dark); color: rgba(255, 255, 255, 0.80); } /* Trait séparateur des colonnes */ .footer-divider { border: none; border-top: 1px solid rgba(255, 255, 255, 0.10); margin: 2.5rem 0; } /* Titre de colonne footer */ .footer-col-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--color-white); margin-bottom: 1.25rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--color-wood); display: inline-block; } /* Liens footer */ .footer-link { display: block; color: rgba(255, 255, 255, 0.70); font-size: 0.9rem; padding: 0.3rem 0; transition: color var(--transition-base), padding-left var(--transition-base); } .footer-link:hover { color: var(--color-wood-light); padding-left: 0.4rem; } /* Icônes réseaux sociaux */ .social-icon-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.12); transition: background-color var(--transition-base), color var(--transition-base), transform var(--transition-base), border-color var(--transition-base); } .social-icon-link:hover { background-color: var(--color-wood); border-color: var(--color-wood); color: var(--color-white); transform: translateY(-3px); } /* Bande de copyright */ .footer-copyright { background-color: rgba(0, 0, 0, 0.25); color: rgba(255, 255, 255, 0.45); font-size: 0.8rem; text-align: center; padding: 1rem 1.5rem; } .footer-copyright a { color: var(--color-wood); } .footer-copyright a:hover { color: var(--color-wood-light); } /* ============================================================ 6. UTILITAIRES GLOBAUX (complément Tailwind) ============================================================ */ /* Ancre décalée pour compenser le header sticky */ .anchor-offset { scroll-margin-top: 80px; } /* Trait décoratif sous les titres de section */ .section-title::after { content: ''; display: block; width: 60px; height: 3px; background: linear-gradient(to right, var(--color-wood), var(--color-green-light)); margin: 0.75rem auto 0; border-radius: 2px; } .section-title.text-left::after { margin-left: 0; } /* Badge / pill de service */ .badge-service { display: inline-block; background-color: rgba(45, 106, 79, 0.12); color: var(--color-green); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.25rem 0.75rem; border-radius: 999px; border: 1px solid rgba(45, 106, 79, 0.25); } /* ============================================================ 7. ANIMATIONS ============================================================ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(194, 125, 56, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(194, 125, 56, 0); } 100% { box-shadow: 0 0 0 0 rgba(194, 125, 56, 0); } } .animate-fade-in-up { animation: fadeInUp 0.6s ease forwards; } /* ============================================================ 8. ACCESSIBILITÉ ============================================================ */ /* Focus visible pour la navigation au clavier */ :focus-visible { outline: 3px solid var(--color-wood); outline-offset: 3px; border-radius: 2px; } /* Skip-link d'accessibilité */ .skip-link { position: absolute; top: -100%; left: 1rem; background: var(--color-wood); color: var(--color-white); padding: 0.5rem 1rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-weight: 700; z-index: 9999; transition: top var(--transition-base); } .skip-link:focus { top: 0; } /* ============================================================ 9. BANDEAU DÉFILANT (Ticker) ============================================================ */ .ticker-wrap { background-color: rgba(10, 28, 50, 0.55); backdrop-filter: blur(4px); overflow: hidden; padding: 1.15rem 0; } .ticker-track { display: flex; width: max-content; animation: ticker-scroll 35s linear infinite; } .ticker-wrap:hover .ticker-track { animation-play-state: paused; } .ticker-item { display: inline-flex; align-items: center; white-space: nowrap; font-family: 'Playfair Display', serif; font-size: 1.35rem; font-weight: 700; font-style: normal; letter-spacing: 0.01em; color: var(--color-wood); padding: 0 1.8rem; } .ticker-sep { color: rgba(255, 255, 255, 0.25); margin-left: 1.8rem; font-weight: 300; font-style: normal; font-size: 1.1rem; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } } /* ============================================================ 10. RESPONSIVE MOBILE ============================================================ */ /* Header toujours opaque sur mobile */ @media (max-width: 1024px) { #site-header { background: var(--color-navy) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } /* Stats : 3 chiffres sur une ligne sur mobile */ @media (max-width: 640px) { .stats-inner { display: flex; flex-wrap: nowrap; justify-content: space-around; gap: 0; } .stats-inner hr { display: none; } .stat-item { flex: 1; padding: 0 0.5rem; } .stat-number { font-size: 1.9rem; } } /* Footer : une colonne sur mobile */ @media (max-width: 640px) { .footer-inner { grid-template-columns: 1fr !important; gap: 2rem; } } /* ============================================================ 11. IMPRESSION ============================================================ */ @media print { #site-header, #site-footer, .btn-cta { display: none !important; } body { font-size: 12pt; color: #000; } }