/* ============================================================================ THÈME — Signature Qualité Copié du socle, valeurs remplacées, noms inchangés. Trois ajouts sont signalés « ajout » : ils correspondent à des besoins de cette charte que le socle n'avait pas, et ils sont candidats à remonter dans le socle. Les ratios en commentaire sont CALCULÉS, pas estimés, et donnés pour le pire des trois fonds clairs, c'est-à-dire --bg-alt, le plus sombre. Le seuil est 4,5 pour du texte courant et 3 pour du texte de 24 px et plus ainsi que pour les éléments non textuels. Deux valeurs de la charte d'origine ont été corrigées après mesure, et c'est écrit ici pour que personne ne les « rétablisse » : - le terracotta foncé était #A85A38, qui donne 4,31 sur --bg-alt, sous le seuil. Il touchait les mentions « obligatoire » du formulaire et un lien de la section À propos. Corrigé en #A05436. - le terracotta clair #C67C5B ne fait que 3,06 sur le fond : il n'a donc le droit d'exister qu'en décor et en très grands caractères, d'où la variable séparée --accent-decor plutôt qu'un second accent. ========================================================================= */ :root { /* --- Fonds ------------------------------------------------------------ */ --bg: #FAF7F2; /* crème, fond de toutes les pages */ --bg-alt: #F2EDE5; /* section qui doit se détacher, fond de formulaire */ --card: #FFFFFF; /* carte posée sur --bg-alt uniquement, voir plus bas */ --panel: #5C6857; /* vert sauge foncé, section à fort contraste */ /* Ce site n'a pas de section au modèle 3D : les variables --scene et --scene-voile du socle sont donc absentes. Si un jour on reprend le composant `modele-3d-au-scroll.html`, les recopier depuis `_socle/theme.css` et revérifier leurs deux ratios. */ /* Le vert sauge de la charte. AJOUT. Il n'entre pas dans --accent parce que ce n'est pas une couleur d'action : c'est un fond. Sur lui, le texte est en --ink, à 5,94. Ne jamais y poser du blanc, qui donne 2,20, ni s'en servir comme couleur de texte, qui donne 2,20 sur le fond. */ --sauge: #A9B2A0; /* --- Textes ----------------------------------------------------------- */ --ink: #2E322D; /* 11.19 sur bg-alt — titres et texte principal */ --body: #4A4F48; /* 7.20 sur bg-alt — texte courant */ --muted: #63695F; /* 4.85 sur bg-alt — mentions secondaires, surtitres */ --on-panel: #FAF7F2; /* 5.50 sur panel — texte posé sur le vert sauge foncé */ /* --- Accent ----------------------------------------------------------- */ --accent: #A05436; /* 4.72 sur bg-alt, et 5.50 en blanc posé dessus */ --accent-dark: #2E322D; /* survol : l'action passe à l'encre, pas à un terracotta plus foncé. C'est le parti pris de la charte, et il évite un troisième brun */ --accent-soft: #F0E0D6; /* fond teinté de la même famille, 10.15 avec --accent-dark dessus */ /* L'accent éclairci pour les sections sombres. L'accent normal donne 1,17 sur --panel, donc un texte illisible ET un bouton dont la limite ne se voit pas. Sur le vert sauge foncé, la règle de ce site est donc : le bouton s'inverse en --bg avec du texte --ink. Cette variable ne sert que si un texte d'accent doit malgré tout y apparaître. */ --accent-clair: #F2E4DA; /* 4.72 sur panel */ /* Le fond de la fenêtre. AJOUT du 27/08/2026. Valeur donnée par Marie, et non plus approchée à l'œil : les six essais précédents cherchaient une teinte décrite en mots, celui-ci est le code exact. Les valeurs traversées, pour mémoire, parce qu'aucune ne doit revenir par distraction : #E7DBCB, #DBCBB6 et #EDE4D6 tiraient vers le doré, #E8E6E1 avait perdu la couleur avec, #F0EAD0 était le jaune pâle. Le nom du jeton dit ce qu'il colore et non sa teinte, ce qui lui évite de devenir faux au prochain essai : « sable » l'était déjà. Ratios calculés, et non estimés, sur ce fond : --ink 9.81 titres et intitulés --body 6.31 la mention --accent 4.14 le filet, non textuel donc seuil 3 --muted n'y passe pas, à 4.18, et n'a donc rien à y faire. */ --fenetre: #E8DED0; /* Le terracotta clair de la charte. AJOUT. DÉCOR SEULEMENT : 3,06 sur --bg. Autorisé pour les filets, les bordures, le B du monogramme et les caractères de plus de 24 px. Interdit pour tout texte courant, tout lien et toute étiquette. */ --accent-decor: #C67C5B; /* --- Filets ----------------------------------------------------------- */ --line: rgba(46, 50, 45, 0.14); /* séparateur discret */ --line-strong: rgba(46, 50, 45, 0.34); /* contour de champ de formulaire */ --line-sombre: rgba(250, 247, 242, 0.30); /* AJOUT — séparateur sur --panel */ /* --- Polices ---------------------------------------------------------- */ /* Embarquées en local dans vendor/fonts/. Jamais d'appel à Google Fonts. Graisses réellement employées : 300 pour le monogramme, 400 partout ailleurs. Aucun titre en gras, aucun titre en capitales. */ --font-titre: 'Cormorant Garamond', 'EB Garamond', Georgia, serif; --font-texte: 'Jost', Futura, 'Century Gothic', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, Menlo, monospace; /* --- Rythme ----------------------------------------------------------- */ --pas: clamp(18px, 2vw, 28px); /* RESSERRÉ LE 26/09/2026, et seulement sur grand écran. Le plafond passe de 120 à 84 px, donc de 240 à 168 px entre deux sections sur un écran de bureau. Le plancher de 60 px et la pente de 9vw ne bougent pas : sur un téléphone la valeur était déjà au plancher, et sur une tablette elle perd 8 px. C'est un réglage de grand écran, pas une refonte du rythme. Motif : à 1440 px, l'accueil intercalait 240 px de vide entre chaque section, soit un quart d'écran sans rien, répété onze fois. */ --section: clamp(60px, 9vw, 84px); --marge-page: clamp(20px, 5vw, 64px); --largeur-max: 1180px; --largeur-texte: 68ch; /* --- Tailles de texte ------------------------------------------------- */ --t-monogramme: clamp(5rem, 18vw, 13rem); /* AJOUT — le MB de l'accueil */ --t-geant: clamp(2.4rem, 6vw, 4.25rem); /* titre de page */ --t-titre: clamp(1.9rem, 4vw, 2.75rem); /* titre de section */ --t-sous-titre: clamp(1.2rem, 2vw, 1.45rem); --t-texte: 1rem; --t-petit: 0.875rem; --t-micro: 0.75rem; /* AJOUT — surtitres en capitales, 12 px */ --t-nano: 0.6875rem; /* AJOUT — signature d'en-tête, 11 px */ /* --- Formes et mouvement ---------------------------------------------- */ /* Zéro arrondi, partout. C'est le parti pris le plus visible de cette charte : angles vifs sur les boutons, les cartes, les champs. Une seule ligne à changer si on veut l'inverse, et c'est tout l'intérêt du socle. */ --arrondi: 0; --arrondi-carte: 0; --transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }