/* ========================================================================== MY UNIVERSE ODE — VARIABLES GLOBALES -------------------------------------------------------------------------- C'EST LE SEUL FICHIER À MODIFIER POUR CHANGER L'APPARENCE DU SITE. Changez une valeur ici, elle se répercute partout automatiquement. Mode d'emploi : 1. Ouvrez ce fichier dans un éditeur de texte (Notepad++, VS Code, TextEdit) 2. Modifiez UNIQUEMENT la valeur après les deux-points ( : ) 3. Ne supprimez jamais le point-virgule ( ; ) en fin de ligne 4. Enregistrez, envoyez le fichier sur le serveur via FileZilla Exemple : pour changer le magenta, remplacez #CC00CC par votre code couleur. ========================================================================== */ :root { /* ====================================================================== 1. COULEURS DE MARQUE Les codes commencent par # et sont au format hexadécimal. Pour trouver un code couleur : https://htmlcolorcodes.com/fr/ ====================================================================== */ --couleur-noir-profond: #0D0D0D; /* Fond du hero, fond des blocs sombres */ --couleur-magenta: #CC00CC; /* Couleur d'accent principale */ --couleur-violet: #6B0080; /* Couleur d'accent secondaire */ --couleur-creme: #F5F4F0; /* Fond des sections alternées */ --couleur-blanc: #FFFFFF; /* Fond des sections claires */ --couleur-anthracite: #2C2C2A; /* Couleur du texte courant */ --couleur-gris-secondaire: #6B6966; /* Texte secondaire, légendes, notes */ --couleur-gris-fonce: #5A5854; /* Gris renforcé, pour les petits textes sur fond crème */ /* Variantes accessibles (contraste renforcé — ne pas modifier sans vérifier le contraste sur https://webaim.org/resources/contrastchecker/) */ --couleur-magenta-fonce: #A3009E; /* Magenta lisible sur fond clair (ratio 4.6:1) */ --couleur-magenta-clair: #F06BF0; /* Magenta lisible sur fond noir (ratio 6.9:1) */ --couleur-violet-clair: #B77CC7; /* Violet lisible sur fond noir */ /* Bordures et séparateurs */ --couleur-bordure: #E2E0DB; /* Traits fins sur fond clair */ --couleur-bordure-sombre: #2A2A2A; /* Traits fins sur fond noir */ /* ====================================================================== 2. LE DÉGRADÉ SIGNATURE Élément visuel unique de la marque. À utiliser avec parcimonie. ====================================================================== */ --degrade-accent: linear-gradient(135deg, #CC00CC, #6B0080); /* Version claire du dégradé, pour les titres posés sur fond NOIR */ --degrade-accent-clair: linear-gradient(135deg, #F06BF0, #C77BD6); /* Version lisible du dégradé, pour les PETITS TEXTES sur fond clair. Le magenta pur #CC00CC tombe à 3,5 de contraste sur blanc : insuffisant pour du texte courant. Ces deux teintes-là passent le seuil WCAG AA tout en gardant l'identité rose-violet. */ --degrade-accent-lisible: linear-gradient(135deg, #A3009E, #6B0080); /* ====================================================================== 3. RÔLES DES COULEURS Ces variables disent "à quoi sert" chaque couleur. Modifiez-les pour réaffecter une couleur sans toucher au reste. ====================================================================== */ --fond-page: var(--couleur-blanc); --fond-alterne: var(--couleur-creme); --fond-sombre: var(--couleur-noir-profond); --texte-principal: var(--couleur-anthracite); --texte-secondaire: var(--couleur-gris-secondaire); --texte-sur-sombre: #F1F0EC; /* Texte blanc cassé sur fond noir */ --texte-sur-sombre-doux:#A8A6A2; /* Texte gris sur fond noir */ --lien-couleur: var(--couleur-magenta-fonce); --lien-couleur-survol: var(--couleur-violet); --focus-couleur: var(--couleur-magenta); /* Contour au clavier (accessibilité) */ /* ====================================================================== 4. TYPOGRAPHIE Deux polices Google Fonts uniquement, auto-hébergées sur votre serveur et réduites aux seuls caractères français (éco-conception). Pour changer de police : modifiez ici ET dans css/fonts.css. ====================================================================== */ --police-titres: 'DM Serif Display', Georgia, 'Times New Roman', serif; --police-corps: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; /* Tailles de texte — elles s'adaptent automatiquement à la taille de l'écran. clamp(minimum, taille idéale, maximum) : ne touchez que le 1er et 3e chiffre. */ --taille-hero: clamp(2.6rem, 6.2vw, 5rem); /* Accroche du hero */ --taille-titre-1: clamp(2.1rem, 4.4vw, 3.4rem); /* Titres de section (h2) */ --taille-titre-2: clamp(1.5rem, 2.6vw, 2rem); /* Sous-titres (h3) */ --taille-titre-3: clamp(1.15rem, 1.8vw, 1.35rem); /* Petits titres (h4) */ --taille-chapeau: clamp(1.1rem, 1.9vw, 1.35rem); /* Paragraphe d'introduction */ --taille-corps: 1.0625rem; /* Texte courant (17px) */ --taille-petit: 0.9375rem; /* Notes, mentions (15px) */ --taille-micro: 0.8125rem; /* Badges, labels (13px) */ /* Graisses (épaisseur du trait) : 400 = normal, 600 = semi-gras, 700 = gras */ --graisse-normale: 400; --graisse-moyenne: 500; --graisse-semi: 600; --graisse-grasse: 700; /* Interlignage — rythme de lecture lent, volontairement aéré */ --interligne-titre: 1.12; --interligne-corps: 1.75; /* Espacement entre les lettres */ --lettrage-titre: -0.02em; /* Titres légèrement resserrés */ --lettrage-label: 0.14em; /* Labels en capitales, très espacés */ /* ====================================================================== 5. ESPACEMENTS ET LARGEURS "beaucoup d'espace, colonnes de texte étroites" ====================================================================== */ --espace-xs: 0.5rem; /* 8px */ --espace-s: 1rem; /* 16px */ --espace-m: 1.75rem; /* 28px */ --espace-l: 3rem; /* 48px */ --espace-xl: 5rem; /* 80px */ --espace-xxl: 8rem; /* 128px */ /* Hauteur de respiration verticale entre les sections */ --section-padding: clamp(4.5rem, 9vw, 9rem); /* Largeurs maximales de contenu */ --largeur-site: 1200px; /* Largeur totale du site */ --largeur-texte: 680px; /* Colonne de lecture étroite (~70 caractères) */ --largeur-etroite: 560px; /* Colonne très étroite, pour les citations */ /* Marge latérale sur mobile et petits écrans */ --marge-laterale: clamp(1.25rem, 5vw, 3rem); /* ====================================================================== 6. FORMES, OMBRES ET TRANSITIONS Registre cabinet de conseil : angles peu arrondis, ombres discrètes. ====================================================================== */ --rayon-petit: 4px; /* Badges, petits éléments */ --rayon-moyen: 8px; /* Cartes, boutons */ --rayon-grand: 14px; /* Grands blocs */ --ombre-carte: 0 1px 2px rgba(13, 13, 13, 0.04), 0 8px 28px rgba(13, 13, 13, 0.06); --ombre-survol: 0 2px 4px rgba(13, 13, 13, 0.06), 0 16px 44px rgba(13, 13, 13, 0.10); --transition-rapide: 160ms ease; --transition-douce: 280ms cubic-bezier(0.22, 0.61, 0.36, 1); /* Hauteur de la barre de navigation fixe en haut */ --hauteur-nav: 74px; /* ====================================================================== 7. OÙ SE TROUVE LE RESTE • Les TEXTES des 4 questions et des lectures rendues : dans js/main.js, tout en haut (partie 1). Ils sont regroupés là et se modifient comme du texte ordinaire. • Les POLICES auto-hébergées : dans css/fonts.css. • Les PHOTOS : dans le dossier /img/. Pour changer une photo, remplacez le fichier en gardant exactement le même nom. ====================================================================== */ } /* ========================================================================== RESPECT DES PRÉFÉRENCES SYSTÈME (accessibilité) Si l'utilisateur a désactivé les animations sur son appareil, on obéit. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --transition-rapide: 0ms; --transition-douce: 0ms; } }