/* Variables de marque Urban Nest Habitat. Copie du bloc :root defini en ligne dans index.html. Les pages autonomes (audit-gratuit) chargent ce fichier pour que .form-field et .button-primary de style.css disposent des memes variables que l'accueil. A consolider : index.html garde encore sa propre copie en ligne. */ :root { /* Primary Brand Colors */ --color-primary: #7B3020; --color-secondary: #C4561A; --color-accent: #C8902A; /* Background Colors */ --color-background-dark: #FDF4EC; --color-background-light: #ffffff; --color-surface: #fff; /* Text Colors */ --color-text-dark: #3D1A0E; --color-text-medium: #7A4A2A; --color-text-light: rgba(255, 255, 255, 0.5); /* Base Colors */ --color-white: #fff; --color-black: #000; /* RGB Tuples for rgba() transparency */ --color-primary-rgb: 123, 48, 32; --color-secondary-rgb: 196, 86, 26; --color-accent-rgb: 200, 144, 42; --color-white-rgb: 255, 255, 255; --color-black-rgb: 0, 0, 0; --color-background-dark-rgb: 253, 244, 236; --color-background-light-rgb: 255, 255, 255; /* UI Element Colors */ --color-border: rgba(var(--color-black-rgb), 0.1); --color-star-rating: #fbbf24; /* Navbar Specific */ --navbar-bg: rgba(var(--color-white-rgb), 0.03); --navbar-border: rgba(var(--color-white-rgb), 0.08); --navbar-link-color: rgba(var(--color-white-rgb), 0.85); --navbar-link-hover-bg: rgba(var(--color-white-rgb), 0.06); --navbar-gradient-border: rgba(var(--color-primary-rgb), 0.15); /* Hero Section Specific */ --hero-gradient-overlay-start: rgba(var(--color-black-rgb), 0.1); --hero-gradient-overlay-end: rgba(var(--color-black-rgb), 0.4); --hero-title-underline: rgba(var(--color-primary-rgb), 0.6); /* Benefit Cards */ --benefit-card-bg: rgba(var(--color-white-rgb), 0.05); --benefit-card-border: rgba(var(--color-white-rgb), 0.1); --benefit-card-hover-bg: rgba(var(--color-white-rgb), 0.08); --benefit-card-hover-border: rgba(var(--color-primary-rgb), 0.3); --benefit-card-gradient: rgba(var(--color-primary-rgb), 0.3); /* Secteur Cards */ --secteur-overlay-start: rgba(0, 0, 0, 0.1); --secteur-overlay-end: rgba(0, 0, 0, 0); --secteur-location-bg: var(--color-white); --secteur-location-text: var(--color-text-dark); /* Team Cards */ --team-card-bg-start: var(--color-black); --team-card-bg-end: rgba(var(--color-black-rgb), 0.95); --team-card-border: rgba(var(--color-white-rgb), 0.08); --team-card-hover-border: rgba(var(--color-primary-rgb), 0.3); --team-card-gradient: rgba(var(--color-primary-rgb), 0.3); --team-card-avatar-bg-start: var(--color-primary); --team-card-avatar-bg-end: rgba(var(--color-primary-rgb), 0.8); --team-card-avatar-border: rgba(var(--color-white-rgb), 0.2); --team-card-signature: var(--color-primary); /* Info Box */ --info-box-bg-start: var(--color-background-light); --info-box-bg-end: rgba(var(--color-white-rgb), 1); --info-box-border-accent: var(--color-primary); /* FAQ Section */ --faq-bg-start: rgba(var(--color-background-dark-rgb), 0.02); --faq-bg-end: rgba(var(--color-background-dark-rgb), 0.05); --faq-item-bg: rgba(var(--color-white-rgb), 0.8); --faq-item-border: rgba(var(--color-black-rgb), 0.08); --faq-item-hover-bg: rgba(var(--color-white-rgb), 0.95); --faq-item-hover-border: rgba(var(--color-primary-rgb), 0.2); --faq-item-active-bg: rgba(var(--color-white-rgb), 0.95); --faq-item-active-border: rgba(var(--color-primary-rgb), 0.25); --faq-item-gradient: rgba(var(--color-primary-rgb), 0.2); /* Reviews Section */ --reviews-bg-start: var(--color-primary); --reviews-bg-end: var(--color-accent); --reviews-decoration-bg: rgba(var(--color-white-rgb), 0.05); --reviews-decoration-border: rgba(var(--color-white-rgb), 0.1); --reviews-gradient-overlay: rgba(var(--color-white-rgb), 0.08); --review-card-bg: var(--color-white); --review-card-border: rgba(var(--color-primary-rgb), 0.5); --review-card-hover-border: rgba(var(--color-primary-rgb), 0.3); --review-badge-bg: var(--color-white); --review-badge-icon: var(--color-accent); --reviewer-avatar-border: var(--color-primary); /* Contact Form */ --form-bg: var(--color-white); --form-border-top: var(--color-primary); --form-image-bg: var(--color-background-light); --form-image-overlay: rgba(var(--color-primary-rgb), 0.2); --form-field-bg: var(--color-background-light); --form-field-border: transparent; --form-field-focus-bg: var(--color-white); --form-field-focus-border: var(--color-primary); --form-field-focus-shadow: rgba(var(--color-primary-rgb), 0.1); --form-field-hover-bg: rgba(245, 245, 245, 0.7); --form-field-hover-border: var(--color-border); --form-title-underline: rgba(var(--color-primary-rgb), 0.6); /* Button Styles */ --button-primary-bg: #000000; --button-primary-text: #FFFFFF; --button-primary-shadow: rgba(var(--color-primary-rgb), 0.3); --button-primary-hover-shadow: rgba(var(--color-primary-rgb), 0.4); --button-secondary-bg: rgba(var(--color-white-rgb), 0.08); --button-secondary-text: var(--color-white); --button-secondary-border: rgba(var(--color-white-rgb), 0.15); --button-secondary-hover-bg: rgba(var(--color-white-rgb), 0.15); --button-secondary-hover-border: rgba(var(--color-white-rgb), 0.3); /* Footer */ --footer-bg: var(--color-surface); --footer-logo-bg: rgba(var(--color-black-rgb), 0.05); --footer-logo-img-bg: var(--color-background-light); --footer-border: var(--color-border); /* Shadows */ --shadow-soft: 0 4px 20px rgba(var(--color-black-rgb), 0.08); --shadow-medium: 0 2px 10px rgba(var(--color-black-rgb), 0.1); --shadow-heavy: 0 20px 250px rgba(var(--color-black-rgb), 0.1); --shadow-hover: 0 20px 40px rgba(var(--color-primary-rgb), 0.15); /* Gradients */ --gradient-primary: linear-gradient(to right, var(--color-primary), var(--color-accent)); --gradient-secondary: linear-gradient(to bottom, var(--color-accent) 0%, var(--color-white) 40%); /* Typography */ --font-outfit: 'Outfit', sans-serif; --font-manrope: 'Manrope', sans-serif; --font-newsreader-italic: 'Newsreader', serif; --font-signature: 'Cedarville Cursive', cursive; /* Spacing & Layout */ --space-s: 20px; --space-m: 40px; --space-l: 80px; --space-xl: 120px; --max-width: 1480px; --border-radius-m: 18px; --border-radius-full: 100px; }