/* ============================================================================ MINOTERIE GIRARDEAU — FEUILLE DE STYLE GLOBALE CONSOLIDÉE ---------------------------------------------------------------------------- Ce fichier fusionne l'ensemble des sections de la page en un seul CSS, sans duplication de règles. Structure : 1. Tokens (variables CSS) 2. Reset minimal 3. Accessibilité (focus, sr-only, skip-link) 4. Composants partagés (boutons, intro de section) 5. Sections, dans l'ordre de la page ========================================================================== */ /* ============================================================================ 1. TOKENS ========================================================================== */ :root { /* Polices */ --font-chapaza: "Chapaza", Georgia, serif; --font-neoarial: "NeoArial-Regular", Arial, sans-serif; /* Surfaces claires */ --color-bg: #FBEEE0; --color-bg-alt: #F4E6CE; --color-surface: #FFFFFF; /* Marque */ --color-primary: #D47029; --color-primary-dark: #C1642A; --color-accent: #E0A467; --color-accent-soft: #F5DFC8; /* Texte sur fond clair */ --color-text: #211A14; --color-text-light: #6B6259; --color-title-muted: #8B3E1E; /* Surfaces sombres (chacune a sa propre teinte, pas de collision de nom) */ --color-terracotta: #8B3E1E; /* chiffres clés, comment ça marche */ --color-espresso: #200900; /* footer */ --color-dark-panel: #200900; /* encart "Notre ambition" dans le hero */ /* Texte sur fond sombre */ --color-text-cream: #F6E9D8; --color-text-cream-muted: #E7D2BB; /* Formulaires */ --color-input-bg: #FBEEE0; --color-input-border: #E3CBA8; /* Focus clavier (RGAA 10.7) - surchargé localement sur fonds sombres */ --color-focus: #005FCC; } /* ============================================================================ 2. RESET MINIMAL ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-neoarial); color: var(--color-text); background-color: var(--color-bg); } img { max-width: 100%; /* display: block; */ } a { color: inherit; } /* ============================================================================ 3. ACCESSIBILITÉ ========================================================================== */ /* Masque visuellement un élément tout en le gardant accessible aux lecteurs d'écran */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Focus visible (RGAA critère 10.7) sur tous les éléments interactifs */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; } /* Sur fond sombre, le bleu par défaut manque de contraste : on surcharge localement le token --color-focus avec un ambre plus visible */ .stats, .how, .expert, .site-footer { --color-focus: #FFD166; } /* Lien d'évitement (skip link) - à placer juste après */ .skip-link { position: absolute; left: -9999px; top: 0; background: #fff; color: var(--color-text); padding: 1rem; z-index: 1000; } .skip-link:focus { left: 0; } /* ============================================================================ 4. COMPOSANTS PARTAGÉS ========================================================================== */ /* ---- Boutons (header, hero, cta-team, contact...) ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; height: 58px; gap: 0.5rem; text-decoration: none; font-weight: 500; font-size: 1rem; border-radius: 999px; padding: 0.9rem 1.75rem; white-space: nowrap; border: 2px solid transparent; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .btn--primary { background-color: var(--color-primary); color: #ffffff; } .btn--primary:hover { background-color: var(--color-primary-dark); } .btn--primary:visited, .btn--primary:hover { color: #ffffff; background-color: var(--color-primary-dark); text-decoration: none; } .btn--secondary { background-color: transparent; border-color: var(--color-primary); color: var(--color-primary); } .btn--secondary:visited, .btn--secondary:hover { color: #8B3E1E; background-color: rgba(221, 122, 59, 0.08); text-decoration: none; } .btn--block { width: 100%; } .btn__icon { display: inline-block; transition: transform 0.2s ease; } .btn--primary:hover .btn__icon { transform: translateX(3px); }