/* ============================================================ variables.css — Identité visuelle de l'Hôtel des Pèlerins ============================================================ Ce fichier centralise TOUS les choix visuels du site. C'est ici qu'on définit les couleurs, polices et espacements. Principe des variables CSS : Au lieu d'écrire #0d3c17 partout dans le code, on crée une variable --color-primary et on l'utilise partout. Si on veut changer la couleur principale, on modifie UNE seule ligne ici et ça se répercute sur tout le site automatiquement. Syntaxe : --nom-de-la-variable: valeur; Utilisation : color: var(--color-primary); ============================================================ */ /* --- Import des polices Google Fonts --- On charge Lora (titres) et DM Sans (texte courant). font-display: swap : la page affiche d'abord une police système, puis remplace quand la Google Font est chargée. Cela évite de bloquer l'affichage de la page (meilleure performance). */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@300;400;500&display=swap'); /* --- :root --- :root désigne la racine du document HTML (l'élément ). En plaçant les variables ici, elles sont disponibles sur TOUTE la page, dans n'importe quel fichier CSS. */ :root { /* ---- COULEURS ---- */ /* Vert forêt profond — couleur principale de la marque. Utilisé pour le header, les boutons primaires, les accents forts. */ --color-primary: #0d3c17; /* Vert doux — version claire du primaire. Utilisé pour les fonds de sections, survols, badges. */ --color-primary-light: #6b916d; /* Presque noir — pour le texte courant. Plus doux qu'un noir pur (#000), moins fatiguant à lire. */ --color-neutral: #282828; /* Gris-vert — pour les textes secondaires, bordures légères. */ --color-neutral-light: #9dadac; /* Orange chaud — couleur d'accentuation. Utilisée avec parcimonie : boutons d'appel à l'action, highlights. */ --color-accent: #b96f34; /* Blanc cassé — fond général des pages. Légèrement crème, plus chaud qu'un blanc pur. */ --color-background: #faf9f7; /* Blanc pur — pour les cartes et zones de contenu sur fond crème. */ --color-surface: #ffffff; /* ---- TYPOGRAPHIE ---- */ /* Police des titres (H1, H2, H3...) — Playfair Display, serif. Serif = avec des empattements (petits traits aux extrémités des lettres). Donne une impression d'élégance et d'authenticité. */ --font-heading: 'Playfair Display', Georgia, serif; /* Police du corps de texte — DM Sans, sans-serif. Sans empattements, très lisible pour les paragraphes et menus. */ --font-body: 'DM Sans', system-ui, sans-serif; /* Tailles de police — échelle cohérente */ --text-sm: 0.875rem; /* 14px — petits textes, légendes */ --text-base: 1rem; /* 16px — texte courant */ --text-lg: 1.125rem; /* 18px — texte mis en valeur */ --text-xl: 1.25rem; /* 20px — sous-titres */ --text-2xl: 1.5rem; /* 24px — titres de section (H2) */ --text-3xl: 2rem; /* 32px — grands titres (H1 mobile) */ --text-4xl: 2.5rem; /* 40px — titres hero desktop */ /* ---- ESPACEMENTS ---- */ /* Système de 8px — chaque valeur est un multiple de 8. Donne une harmonie visuelle à la mise en page. */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-24: 6rem; /* 96px */ /* ---- BORDURES & RAYONS ---- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; /* ---- TRANSITIONS ---- */ /* Pour les animations CSS légères (survol de boutons, etc.) */ --transition-fast: 150ms ease; --transition-base: 250ms ease; /* ---- LARGEUR MAXIMALE DU CONTENU ---- */ /* Le contenu ne s'étire pas sur toute la largeur d'un grand écran. On le limite pour conserver la lisibilité. */ --max-width: 1100px; } /* ============================================================ MODE SOMBRE — se déclenche automatiquement selon les préférences système de l'utilisateur (macOS/iOS/Android/Windows) ============================================================ */ /* Automatique : système sombre (sauf si l'utilisateur a forcé le mode clair) */ @media (prefers-color-scheme: dark) { :root { --color-background: #111814; --color-surface: #1c261d; --color-primary: #82ae85; --color-primary-light: #4d7a52; --color-neutral: #dce8dc; --color-neutral-light: #7a9485; --color-accent: #e8974e; } } /* Forcé sombre (choix utilisateur via le bouton) */ html.dark { --color-background: #111814; --color-surface: #1c261d; --color-primary: #82ae85; --color-primary-light: #4d7a52; --color-neutral: #dce8dc; --color-neutral-light: #7a9485; --color-accent: #e8974e; } /* Forcé clair (utilisateur sur système sombre qui veut le clair) */ html.light { --color-background: #faf9f7; --color-surface: #ffffff; --color-primary: #0d3c17; --color-primary-light: #6b916d; --color-neutral: #282828; --color-neutral-light: #9dadac; --color-accent: #b96f34; }