/* ===================================================================== CLINIQUE JURIDIQUE DES YVELINES — CHARTE GRAPHIQUE ===================================================================== #################################################################### # # # C'EST LE SEUL FICHIER À MODIFIER POUR CHANGER L'APPARENCE. # # # # Toutes les couleurs, polices, tailles, arrondis et espacements # # du site sont définis ici, et uniquement ici. Les autres # # fichiers CSS ne font que s'y référer. # # # # Changez une valeur ci-dessous : elle se propage partout, # # site public comme espace d'administration. # # # #################################################################### Direction artistique : « Ardoise & Os » Fond blanc cassé légèrement chaud, texte bleu ardoise très sombre, accent bleu ardoise moyen, filets fins. Sobre et institutionnel. SOMMAIRE 1. Couleurs — fonds 2. Couleurs — textes 3. Couleurs — accent et interactions 4. Couleurs — bordures et séparateurs 5. Couleurs — messages (succès, alerte, erreur, information) 6. Couleurs — statuts des demandes 7. Typographie 8. Échelle de tailles de texte 9. Espacements 10. Largeurs et gouttières 11. Arrondis 12. Ombres 13. Transitions 14. Plans de superposition (z-index) 15. Points de rupture responsives (pour information) ===================================================================== */ :root { /* ================================================================== 1. COULEURS — FONDS ------------------------------------------------------------------ Le fond principal n'est volontairement pas un blanc pur : un blanc légèrement cassé et chaud fatigue moins l'œil et donne un rendu plus haut de gamme qu'un #FFFFFF brut. ================================================================== */ --cjy-fond: #FAF9F7; /* Fond général de toutes les pages */ --cjy-fond-alt: #F2F1EE; /* Sections alternées, encadrés */ --cjy-fond-creux: #EDEBE6; /* Zones en retrait, champs inactifs */ --cjy-fond-profond: #1C2430; /* Pied de page, bandeaux sombres */ --cjy-fond-profond-2: #253040; /* Variante du fond sombre */ --cjy-surface: #FFFFFF; /* Cartes et panneaux posés sur le fond */ --cjy-surface-survol: #F7F6F3; /* Même carte, au survol de la souris */ /* ================================================================== 2. COULEURS — TEXTES ================================================================== */ --cjy-texte: #1C2430; /* Titres et texte courant */ --cjy-texte-doux: #5A6675; /* Paragraphes secondaires, légendes */ --cjy-texte-tenu: #8A93A0; /* Mentions discrètes, horodatages */ --cjy-texte-inverse: #F2F4F6; /* Texte sur fond sombre */ --cjy-texte-inverse-doux: #A9B3C1; /* Texte secondaire sur fond sombre */ /* ================================================================== 3. COULEURS — ACCENT ET INTERACTIONS ------------------------------------------------------------------ L'accent est utilisé avec parcimonie : liens, boutons principaux, filets de mise en valeur. C'est ce qui donne au site son caractère. ================================================================== */ --cjy-accent: #33465E; /* Couleur d'accent principale */ --cjy-accent-fonce: #253547; /* Survol des boutons pleins */ --cjy-accent-clair: #E8ECF1; /* Fond des puces et étiquettes */ --cjy-accent-tres-clair: #F3F5F8; /* Survol très discret */ --cjy-accent-contraste: #FFFFFF; /* Texte posé sur la couleur d'accent */ --cjy-lien: var(--cjy-accent); --cjy-lien-survol: var(--cjy-accent-fonce); /* Anneau de focus au clavier — ne jamais le supprimer : il est indispensable aux personnes qui naviguent sans souris. */ --cjy-focus: #33465E; --cjy-focus-halo: rgba(51, 70, 94, 0.22); --cjy-focus-epaisseur: 2px; --cjy-focus-ecart: 3px; /* Sélection de texte à la souris */ --cjy-selection-fond: #DDE4EC; --cjy-selection-texte: #1C2430; /* ================================================================== 4. COULEURS — BORDURES ET SÉPARATEURS ------------------------------------------------------------------ La direction artistique repose sur des filets fins plutôt que sur des ombres portées : ces valeurs sont donc très sollicitées. ================================================================== */ --cjy-bordure: #E2E0DB; /* Filet standard */ --cjy-bordure-douce: #EBE9E4; /* Séparateur très discret */ --cjy-bordure-forte: #CFCCC5; /* Contour marqué, champs de saisie */ --cjy-bordure-accent: #B9C3CF; /* Contour au survol d'un élément actif */ --cjy-bordure-sombre: #35404F; /* Filets sur fond sombre */ /* ================================================================== 5. COULEURS — MESSAGES ------------------------------------------------------------------ Volontairement désaturées pour rester cohérentes avec la charte : pas de vert vif ni de rouge criard. ================================================================== */ --cjy-succes: #2E5F4A; --cjy-succes-fond: #E9F1ED; --cjy-succes-bordure: #C3D8CD; --cjy-alerte: #85652C; --cjy-alerte-fond: #F7F1E4; --cjy-alerte-bordure: #E3D4B4; --cjy-erreur: #8B3A34; --cjy-erreur-fond: #F8ECEA; --cjy-erreur-bordure: #E5C8C4; --cjy-info: #33465E; --cjy-info-fond: #EAEEF3; --cjy-info-bordure: #C8D2DE; /* ================================================================== 6. COULEURS — STATUTS DES DEMANDES ------------------------------------------------------------------ Pastilles affichées dans la boîte de réception de l'administration. ================================================================== */ --cjy-statut-nouvelle: #33465E; --cjy-statut-nouvelle-fond: #EAEEF3; --cjy-statut-en-cours: #85652C; --cjy-statut-en-cours-fond: #F7F1E4; --cjy-statut-acceptee: #2E5F4A; --cjy-statut-acceptee-fond: #E9F1ED; --cjy-statut-refusee: #6B6B66; --cjy-statut-refusee-fond: #EFEEEB; /* ================================================================== 7. TYPOGRAPHIE ------------------------------------------------------------------ Titres en serif (Fraunces) : autorité, tradition juridique. Textes en sans-serif (Inter) : lisibilité à l'écran. Les deux polices sont hébergées sur le serveur du site — aucune requête n'est envoyée à Google, conformément au RGPD. ================================================================== */ --cjy-police-titre: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif; --cjy-police-texte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --cjy-police-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; /* Graisses */ --cjy-graisse-normale: 400; --cjy-graisse-moyenne: 500; --cjy-graisse-demi: 600; --cjy-graisse-forte: 700; /* Réglages de l'axe variable de Fraunces : SOFT à 0 et WONK à 0 donnent une allure classique et nette, sans excentricité. */ --cjy-titre-variation: 'SOFT' 0, 'WONK' 0, 'opsz' 40; /* Hauteurs de ligne */ --cjy-interligne-titre: 1.12; --cjy-interligne-sous: 1.35; --cjy-interligne-texte: 1.68; --cjy-interligne-serre: 1.45; /* Interlettrage */ --cjy-lettrage-titre: -0.018em; --cjy-lettrage-normal: 0; --cjy-lettrage-surtitre: 0.14em; /* Petites capitales des surtitres */ /* ================================================================== 8. ÉCHELLE DE TAILLES DE TEXTE ------------------------------------------------------------------ Les tailles sont fluides : elles s'adaptent progressivement entre un mobile de 360 px et un écran de 1400 px, sans paliers brutaux. ================================================================== */ --cjy-txt-2xs: 0.6875rem; /* 11 px */ --cjy-txt-xs: 0.75rem; /* 12 px */ --cjy-txt-sm: 0.8125rem; /* 13 px */ --cjy-txt-base: 0.9375rem; /* 15 px */ --cjy-txt-md: 1rem; /* 16 px */ --cjy-txt-lg: clamp(1.0625rem, 0.99rem + 0.32vw, 1.1875rem); --cjy-txt-xl: clamp(1.1875rem, 1.09rem + 0.42vw, 1.375rem); --cjy-titre-6: clamp(1rem, 0.96rem + 0.20vw, 1.0625rem); --cjy-titre-5: clamp(1.125rem, 1.06rem + 0.28vw, 1.25rem); --cjy-titre-4: clamp(1.3125rem, 1.19rem + 0.52vw, 1.5625rem); --cjy-titre-3: clamp(1.5rem, 1.30rem + 0.86vw, 2rem); --cjy-titre-2: clamp(1.875rem, 1.55rem + 1.40vw, 2.75rem); --cjy-titre-1: clamp(2.25rem, 1.70rem + 2.35vw, 3.75rem); /* Longueur de ligne confortable pour la lecture */ --cjy-mesure: 68ch; --cjy-mesure-courte: 54ch; /* ================================================================== 9. ESPACEMENTS ------------------------------------------------------------------ Échelle unique utilisée pour toutes les marges et tous les remplissages, afin que les rythmes verticaux restent cohérents. ================================================================== */ --cjy-esp-3xs: 0.25rem; /* 4 px */ --cjy-esp-2xs: 0.5rem; /* 8 px */ --cjy-esp-xs: 0.75rem; /* 12 px */ --cjy-esp-sm: 1rem; /* 16 px */ --cjy-esp-md: 1.5rem; /* 24 px */ --cjy-esp-lg: 2rem; /* 32 px */ --cjy-esp-xl: 3rem; /* 48 px */ --cjy-esp-2xl: 4rem; /* 64 px */ --cjy-esp-3xl: 6rem; /* 96 px */ /* Respiration verticale des grandes sections — fluide selon l'écran */ --cjy-section-y: clamp(3.5rem, 2.2rem + 5.5vw, 7rem); --cjy-section-y-large: clamp(5rem, 3.0rem + 8.0vw, 9.5rem); /* ================================================================== 10. LARGEURS ET GOUTTIÈRES ================================================================== */ --cjy-largeur-max: 1200px; /* Conteneur principal */ --cjy-largeur-etroite: 760px; /* Colonnes de texte long */ --cjy-largeur-large: 1400px; /* Bandeaux pleine largeur */ --cjy-largeur-formulaire: 640px; /* Formulaires centrés */ /* Marge latérale : plus serrée sur mobile, plus généreuse ensuite */ --cjy-gouttiere: clamp(1.25rem, 0.85rem + 1.7vw, 2.5rem); /* Espace occupé par l'en-tête fixe, utilisé pour le défilement ancré */ --cjy-hauteur-entete: 76px; --cjy-hauteur-entete-mobile: 64px; /* ================================================================== 11. ARRONDIS ------------------------------------------------------------------ Volontairement discrets : un arrondi marqué donnerait un ton « application grand public » qui jurerait avec le sujet. ================================================================== */ --cjy-arrondi-xs: 2px; --cjy-arrondi-sm: 3px; --cjy-arrondi-md: 4px; --cjy-arrondi-lg: 6px; --cjy-arrondi-xl: 10px; --cjy-arrondi-plein: 999px; /* Pastilles et étiquettes */ /* ================================================================== 12. OMBRES ------------------------------------------------------------------ Très légères : la hiérarchie repose d'abord sur les filets. ================================================================== */ --cjy-ombre-xs: 0 1px 2px rgba(28, 36, 48, 0.05); --cjy-ombre-sm: 0 1px 3px rgba(28, 36, 48, 0.07), 0 1px 2px rgba(28, 36, 48, 0.04); --cjy-ombre-md: 0 4px 12px rgba(28, 36, 48, 0.07), 0 1px 3px rgba(28, 36, 48, 0.05); --cjy-ombre-lg: 0 12px 32px rgba(28, 36, 48, 0.10), 0 2px 8px rgba(28, 36, 48, 0.05); --cjy-ombre-xl: 0 24px 60px rgba(28, 36, 48, 0.16); /* Ombre appliquée à l'en-tête une fois la page défilée */ --cjy-ombre-entete: 0 1px 0 var(--cjy-bordure), 0 4px 20px rgba(28, 36, 48, 0.05); /* ================================================================== 13. TRANSITIONS ================================================================== */ /* Raccourcis « durée + courbe », prêts à l'emploi. */ --cjy-transition-rapide: 120ms cubic-bezier(0.4, 0, 0.2, 1); --cjy-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1); --cjy-transition-lente: 340ms cubic-bezier(0.22, 1, 0.36, 1); --cjy-transition-souple: 520ms cubic-bezier(0.16, 1, 0.3, 1); /* Durées SEULES. À utiliser dès qu'une courbe particulière est précisée juste après, par exemple : transform var(--cjy-duree-lente) var(--cjy-courbe-ressort) Écrire var(--cjy-transition-lente) à cet endroit produirait deux courbes à la suite, ce qui rend toute la déclaration invalide : la transition serait alors purement et simplement ignorée. */ --cjy-duree-rapide: 120ms; --cjy-duree: 200ms; --cjy-duree-lente: 340ms; --cjy-duree-souple: 520ms; /* Courbes d'accélération, nommées par intention. — « sortie » : démarre vite, ralentit à l'arrivée. Pour ce qui entre. — « ressort » : dépasse légèrement puis revient. Donne du relief. — « douce » : symétrique, discrète. Pour les changements de couleur. */ --cjy-courbe-sortie: cubic-bezier(0.16, 1, 0.3, 1); --cjy-courbe-ressort: cubic-bezier(0.34, 1.56, 0.64, 1); --cjy-courbe-douce: cubic-bezier(0.4, 0, 0.2, 1); /* ================================================================== 13 bis. RELIEF ET PROFONDEUR (survols en trois dimensions) ------------------------------------------------------------------ Les éléments interactifs s'inclinent légèrement vers le curseur et se soulèvent. L'amplitude est volontairement faible : l'effet doit se sentir sans se voir, sur un site à vocation institutionnelle. Passez --cjy-relief-angle à 0deg pour désactiver toute inclinaison. ================================================================== */ --cjy-perspective: 900px; /* Plus la valeur est basse, plus l'effet est marqué */ --cjy-relief-angle: 7deg; /* Inclinaison maximale des boutons */ --cjy-relief-angle-carte: 4deg; /* Inclinaison maximale des cartes */ --cjy-relief-elevation: 3px; /* Soulèvement au survol */ --cjy-relief-enfoncement: 1px; /* Enfoncement au clic */ /* Ombres portées correspondant à l'élévation, plus douces et plus étendues que les ombres de repos. */ --cjy-ombre-relief: 0 10px 24px rgba(28, 36, 48, 0.16), 0 4px 8px rgba(28, 36, 48, 0.10); --cjy-ombre-relief-forte: 0 18px 40px rgba(28, 36, 48, 0.22), 0 6px 12px rgba(28, 36, 48, 0.12); /* Reflet qui balaie les boutons au survol. */ --cjy-reflet: rgba(255, 255, 255, 0.22); /* ================================================================== 13 ter. BARRE DE DÉFILEMENT PERSONNALISÉE ================================================================== */ --cjy-barre-largeur: 11px; --cjy-barre-piste: #EFEDE8; --cjy-barre-pouce: #C2C6CD; --cjy-barre-pouce-survol: var(--cjy-accent); --cjy-barre-bordure: 3px; /* Marge autour du pouce, dans la piste */ /* ================================================================== 14. PLANS DE SUPERPOSITION ================================================================== */ /* Le voile doit rester SOUS le panneau qu'il met en valeur, sans quoi il assombrit le menu et intercepte les clics destinés à ses liens. */ --cjy-plan-fond: 0; --cjy-plan-contenu: 1; --cjy-plan-flottant: 10; --cjy-plan-entete: 50; --cjy-plan-voile: 60; --cjy-plan-menu: 70; --cjy-plan-modale: 90; --cjy-plan-message: 100; /* ================================================================== 15. POINTS DE RUPTURE RESPONSIVES ------------------------------------------------------------------ Rappelés ici pour référence. Les media queries CSS n'acceptant pas les variables, ces valeurs sont écrites en clair dans site.css et admin.css — si vous les modifiez, faites-le aux deux endroits. Très petit mobile .............. jusqu'à 380px Mobile ......................... jusqu'à 639px Tablette portrait .............. 640px à 899px Tablette paysage / petit écran . 900px à 1099px Ordinateur ..................... 1100px et au-delà ================================================================== */ } /* ===================================================================== VARIANTES D'AFFICHAGE --------------------------------------------------------------------- Ces blocs adaptent la charte au contexte, sans jamais redéfinir une couleur ailleurs que dans ce fichier. ===================================================================== */ /* --- Barre de défilement sur fond sombre ----------------------------- */ .cjy-inverse, .pied, .section--sombre, .admin-nav { --cjy-barre-piste: #2A3442; --cjy-barre-pouce: #4A5768; --cjy-barre-pouce-survol: #6E7D91; } /* --- Sections sombres : on inverse les rôles des couleurs ------------ */ .cjy-inverse { --cjy-fond: var(--cjy-fond-profond); --cjy-fond-alt: var(--cjy-fond-profond-2); --cjy-surface: var(--cjy-fond-profond-2); --cjy-texte: var(--cjy-texte-inverse); --cjy-texte-doux: var(--cjy-texte-inverse-doux); --cjy-texte-tenu: #7C8695; --cjy-bordure: var(--cjy-bordure-sombre); --cjy-bordure-douce: #2C3644; --cjy-bordure-forte: #45505F; --cjy-accent: #C9D4E2; --cjy-accent-fonce: #FFFFFF; --cjy-accent-clair: rgba(201, 212, 226, 0.12); --cjy-accent-contraste: var(--cjy-fond-profond); --cjy-lien: #C9D4E2; --cjy-lien-survol: #FFFFFF; --cjy-focus: #C9D4E2; --cjy-focus-halo: rgba(201, 212, 226, 0.28); } /* --- Accessibilité : contraste renforcé si le système le demande ----- */ @media (prefers-contrast: more) { :root { --cjy-texte-doux: #3C4657; --cjy-texte-tenu: #5A6675; --cjy-bordure: #B9B6AF; --cjy-bordure-douce: #C9C6BF; --cjy-accent: #24344A; } } /* --- Impression : encre économisée, couleurs neutralisées ------------ */ @media print { :root { --cjy-fond: #FFFFFF; --cjy-fond-alt: #FFFFFF; --cjy-fond-creux: #FFFFFF; --cjy-surface: #FFFFFF; --cjy-texte: #000000; --cjy-texte-doux: #333333; --cjy-texte-tenu: #555555; --cjy-accent: #000000; --cjy-bordure: #BBBBBB; --cjy-ombre-xs: none; --cjy-ombre-sm: none; --cjy-ombre-md: none; --cjy-ombre-lg: none; --cjy-ombre-xl: none; } }