/* ================================================================ THEME.CSS — Système de design · InviteApp Ce fichier centralise TOUTES les décisions visuelles du projet. Modifier ici pour changer l'apparence globale sans toucher aux fichiers de composants (style.css, admin.css, upload.css). Fichiers consommateurs : index.html → theme.css + css/style.css admin.html → theme.css + css/admin.css upload.html → theme.css + css/upload.css Table des matières : 1. Couleurs 2. Typographie 3. Espacement 4. Bordures & arrondi 5. Ombres 6. Mise en page 7. Hero (section d'en-tête) 8. Transitions ================================================================ */ :root { /* ──────────────────────────────────────────────────────────── 1. COULEURS ────────────────────────────────────────────────────────────── Palette minimaliste. Le seul "accent" est --color-primary, intentionnellement noir : boutons pleins, bordures marquées, titres. Aucune couleur vive — l'invitation reste passe-partout. PRIMAIRE primary Couleur d'action principale : fond des boutons .btn-primary, bordure décorative des inputs focus, marqueur de section actif. primary-dark État hover des boutons et liens primaires. primary-light Fond très clair utilisé pour les zones mises en valeur (tooltip actif, ligne "mine" dans la liste d'apports, zone de dépôt de fichier survolée). NEUTRE secondary Gris moyen — réservé aux éléments visuellement moins importants (icônes inactives, séparateurs). background Fond de toute la page (blanc légèrement chaud, pas pur pour éviter l'effet "écran"). surface Fond des cartes, modals et inputs (blanc pur). surface-alt Gris très clair pour alterner des rangées ou indiquer un état inactif/secondaire. TEXTE text Corps principal. text-secondary Labels, descriptions, dates, notes. Contraste suffisant pour l'accessibilité sur surface. text-on-primary Texte blanc — utilisé sur tout fond --color-primary. TRAITS border Trait "fort" (noir) — contours des boutons ghost, certains encadrements de section, modal backdrop. border-light Trait discret (gris chaud) — séparateurs de liste, contours de cartes, dividers. ÉTATS SÉMANTIQUES success / error / warning → couleur du texte et des badges d'état (toast, badge RSVP). Ces valeurs sont les nuances foncées des couleurs sémantiques classiques, pour rester lisibles sur fond clair (--color-surface ou surface-alt). ──────────────────────────────────────────────────────────────── */ --color-primary: #111111; --color-primary-dark: #000000; --color-primary-light: #f0f0ef; --color-secondary: #555555; --color-background: #fafaf8; --color-surface: #ffffff; --color-surface-alt: #f3f3f1; --color-text: #111111; --color-text-secondary: #666666; --color-text-on-primary: #ffffff; --color-border: #111111; --color-border-light: #e0ddd8; --color-success: #1e5c32; --color-error: #9e1c1c; --color-warning: #92550d; /* ──────────────────────────────────────────────────────────── 2. TYPOGRAPHIE ────────────────────────────────────────────────────────────── Toute la typographie est en Space Grotesk (chargée via Google Fonts dans le de chaque page HTML). --font-heading et --font-body pointent vers la même famille. Les séparer permet de basculer vers deux polices distinctes sans changer le CSS des composants — ex: mettre une serif en heading pour un ton plus éditorial. ÉCHELLE DE TAILLE (rem, base = 16px navigateur) Token rem px Usages typiques ───────────────────────────────────────── xs 0.75 12 Hints, étiquettes, badges xs sm 0.875 14 Texte secondaire, captions base 1.0 16 Corps de texte principal lg 1.125 18 Sous-titre léger, intro xl 1.25 20 Titre de section moyen 2xl 1.5 24 Titre de carte 3xl 2.0 32 Titre de page secondaire 4xl 2.75 44 Grand titre (desktop) 5xl 4.0 64 Hero display (très grand) Les fichiers de composants utilisent clamp() pour les titres principaux (hero, section), ce qui les rend fluides entre mobile et desktop sans media query. ──────────────────────────────────────────────────────────────── */ --font-heading: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-body: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem; --text-4xl: 2.75rem; --text-5xl: 4rem; /* ──────────────────────────────────────────────────────────── 3. ESPACEMENT ────────────────────────────────────────────────────────────── Échelle progressive, chaque palier ≈ ×2 du précédent. Ancrage : --space-md = 1rem = 16px (taille de base navigateur). Token rem px Quand l'utiliser ────────────────────────────────────────────────────────── xs 0.25 4 Micro-espaces : gap entre icône et label, padding interne d'un petit badge sm 0.5 8 Espaces serrés : gap entre boutons, padding vertical d'un btn-sm md 1.0 16 Espace de base : padding input, gap entre items d'une liste lg 1.5 24 Espace de confort : padding d'une carte, margin entre label et champ xl 2.0 32 Espace large : séparation entre blocs d'une même section 2xl 3.0 48 Espace de section : margin entre sections au sein d'un panel 3xl 5.0 80 Espace hero : padding vertical des grandes sections (hero, page upload) ──────────────────────────────────────────────────────────────── */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 5rem; /* ──────────────────────────────────────────────────────────── 4. BORDURES & ARRONDI ────────────────────────────────────────────────────────────── Le design est éditorial / typographique : zéro arrondi sur les éléments de structure (cartes, inputs, boutons, galerie). L'absence d'arrondi renforce le caractère graphique. --radius-full est la seule exception : pills et toggles (badges de statut, compteurs, interrupteurs on/off). CHANGER L'AMBIANCE EN 2 LIGNES : Pour un look "moderne/doux", remplacer les 0px par : --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; Tous les composants (cartes, inputs, listes) s'adapteront. ──────────────────────────────────────────────────────────────── */ --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px; --radius-full: 9999px; /* ──────────────────────────────────────────────────────────── 5. OMBRES ────────────────────────────────────────────────────────────── Minimalistes par choix éditorial. Les cartes et listes ne projettent pas d'ombre — leur délimitation est assurée par les traits (border-light). shadow-sm non utilisé (réservé à un futur composant léger) shadow-md non utilisé (réservé aux dropdowns) shadow-lg Modal d'identification uniquement Pour un rendu "card" classique avec élévation, remplacer : --shadow-sm: 0 1px 4px rgba(0,0,0,.06); --shadow-md: 0 2px 12px rgba(0,0,0,.08); ──────────────────────────────────────────────────────────────── */ --shadow-sm: none; --shadow-md: none; --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.10); /* ──────────────────────────────────────────────────────────── 6. MISE EN PAGE ────────────────────────────────────────────────────────────── Deux colonnes max utilisées dans les sections de index.html : ┌──────────────────────── page ──────────────────────────┐ │ padding latéral (var(--space-lg)) │ │ ┌────────── container (--max-width 760px) ──────────┐ │ │ │ texte, listes, formulaires RSVP, invités │ │ │ └───────────────────────────────────────────────────┘ │ │ │ │ ┌──── container-wide (--max-width-wide 1100px) ─────┐ │ │ │ galerie photos │ │ │ └───────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────┘ Les deux containers utilisent margin: 0 auto pour se centrer. ──────────────────────────────────────────────────────────────── */ --max-width: 760px; --max-width-wide: 1100px; /* ──────────────────────────────────────────────────────────── 7. HERO (section d'en-tête, index.html) ────────────────────────────────────────────────────────────── La section hero occupe le premier écran. Son fond, son overlay et la couleur de son texte sont entièrement contrôlés ici. hero-bg-image Image de fond du hero. • Valeur : url('/chemin/vers/image.jpg') ou url('https://…') • Mettre "none" pour fond uni (--hero-bg-color). • L'image est positionnée cover/center (css/style.css). hero-bg-color Couleur de fond quand pas d'image. Aussi visible en dessous de l'image comme couleur de chargement. hero-overlay Couche semi-transparente superposée à l'image pour garantir la lisibilité du texte. N'a d'effet visuel que si hero-bg-image est défini. Ex : rgba(0,0,0,.55) pour assombrir davantage. hero-text-color Couleur de tout le texte dans le hero (titre, date, lieu, description). Blanc par défaut, à changer si fond clair. hero-min-height Hauteur minimale du hero. • 100vh = plein écran (défaut) • 60vh = hero réduit • auto = hauteur naturelle du contenu ──────────────────────────────────────────────────────────────── */ --hero-bg-image: none; --hero-bg-color: #111111; --hero-overlay: rgba(0, 0, 0, 0.40); --hero-text-color: #ffffff; --hero-min-height: 100vh; /* ──────────────────────────────────────────────────────────── 8. TRANSITIONS ────────────────────────────────────────────────────────────── --transition est la valeur partagée par TOUS les effets hover, focus et toggle de l'application. Une seule variable pour un timing cohérent partout. Valeur actuelle : 160ms ease — vif, sans latence perçue. Augmenter à 240ms–300ms pour des animations plus "douces". ──────────────────────────────────────────────────────────────── */ --transition: 160ms ease; }