/* presente-tokens.css — v1, 15/09/2026 Structure Material Design 3. Palette dérivée des illustrations Presente. Élévation = teinte de surface + contour. Aucune ombre. */ :root { /* ─── COULEUR ─────────────────────────────────────────────── */ --md-sys-color-primary: #44714F; /* vert feuille éclairci */ --md-sys-color-on-primary: #FFFBF6; --md-sys-color-primary-container: #D6E0C9; /* vert sauge */ --md-sys-color-on-primary-container: #1C3325; --md-sys-color-secondary: #8F3A24; /* terracotta, rôle TEXTE */ --md-sys-color-on-secondary: #FFFBF6; --md-sys-color-secondary-container: #B4543C; /* terracotta d'origine, REMPLISSAGE */ --md-sys-color-on-secondary-container: #FFFBF6; /* Terracotta clair — le pendant clair de --primary-container : filets des blocs de comparaison positif/négatif (partials/comparacion.html) et, depuis le 07/10, fond du bandeau de /la-casa/ (voir UNIVERS DE PAGE plus bas ; on-surface dessus : 11,1:1). --secondary-container reste réservé au bandeau anti-arnaque (aplat plein + texte blanc). */ --presente-secondary-tint: #F7D9C6; --md-sys-color-tertiary: #9E6212; /* ocre moyen, rôle TEXTE */ --md-sys-color-on-tertiary: #FFFBF6; /* #CC843C (ocre d'origine, plein) jusqu'au 27/09 — passé à un ton clair sur signalement direct ("trop brutal en ocre plein"), texte en on-surface. Depuis le 07/10 : fond du bandeau de /en-casa/ (voir UNIVERS DE PAGE plus bas). on-tertiary-container n'a pas de consommateur, gardé pour un futur remplissage ocre plein. */ --md-sys-color-tertiary-container: #FBE2B0; /* ocre clair, ton doux */ --md-sys-color-on-tertiary-container: #2F2523; --md-sys-color-error: #8C1D14; --md-sys-color-on-error: #FFFBF6; --md-sys-color-error-container: #FADCD3; --md-sys-color-on-error-container: #55120B; --md-sys-color-surface: #FFFBF6; /* crème presque blanc */ --md-sys-color-on-surface: #2F2523; --md-sys-color-surface-variant: #F2E6D6; --md-sys-color-on-surface-variant: #4B3F35; --md-sys-color-surface-dim: #F6ECE0; --md-sys-color-surface-bright: #FFFFFF; /* #FFFDF9 jusqu'au 27/09 — passé à un blanc pur (repère "surface blanche" de la révision du même jour) : en-tête, pied de page, et état par défaut des cartes (.puerta) l'utilisent désormais comme fond, à la place de --md-sys-color-surface. Rien d'autre en dur ailleurs — recalculer ici si un jour on veut l'assombrir. */ --md-sys-color-surface-container-lowest: #FFFFFF; --md-sys-color-surface-container-low: #FFF6EC; --md-sys-color-surface-container: #FCF0E4; /* l'ancien crème, rétrogradé */ --md-sys-color-surface-container-high: #F6E7D8; --md-sys-color-surface-container-highest: #EFDDCC; --md-sys-color-outline: #7A6857; /* contours porteurs */ --md-sys-color-outline-variant: #E2D3C0; /* séparateurs SEULEMENT */ --md-sys-color-inverse-surface: #3A2F2B; --md-sys-color-inverse-on-surface: #FBEFE4; --md-sys-color-inverse-primary: #B8CFB3; /* état désactivé : 38 % d'encre sur la surface, aplati en opaque */ --presente-disabled-content: #8A7E72; --presente-disabled-container: #E4D5C3; --presente-disabled-outline: #CBBBA8; /* ─── UNIVERS DE PAGE (07/10) ───────────────────────────────── Bandeau pleine largeur en tête de chaque page : une couleur par univers, toutes prises dans la palette ci-dessus (alias, aucune nouvelle valeur). Chaque paire fond/texte vérifiée pour le corps de texte (≥ 7:1, règle 6) : inicio sauge / on-primary-container 9,9:1 en casa ocre clair / on-surface 11,8:1 la casa terracotta clair / on-surface 11,1:1 nuestra manera vert forêt / on-primary 13,2:1 quiénes somos sable / on-surface 11,3:1 trabajo brique / on-secondary 7,3:1 démarche vert moyen / on-surface 9,0:1 ("démarche" = formulaire /interes/, remerciement, page légale). */ --presente-univers-inicio-bg: var(--md-sys-color-primary-container); --presente-univers-inicio-fg: var(--md-sys-color-on-primary-container); --presente-univers-en-casa-bg: var(--md-sys-color-tertiary-container); --presente-univers-en-casa-fg: var(--md-sys-color-on-surface); --presente-univers-la-casa-bg: var(--presente-secondary-tint); --presente-univers-la-casa-fg: var(--md-sys-color-on-surface); --presente-univers-nuestra-manera-bg: var(--md-sys-color-on-primary-container); --presente-univers-nuestra-manera-fg: var(--md-sys-color-on-primary); --presente-univers-quienes-somos-bg: var(--md-sys-color-surface-container-highest); --presente-univers-quienes-somos-fg: var(--md-sys-color-on-surface); --presente-univers-trabajo-bg: var(--md-sys-color-secondary); --presente-univers-trabajo-fg: var(--md-sys-color-on-secondary); --presente-univers-tramite-bg: var(--md-sys-color-inverse-primary); --presente-univers-tramite-fg: var(--md-sys-color-on-surface); /* ─── COUCHES D'ÉTAT (sans ombre) ─────────────────────────── */ --md-sys-state-hover-opacity: 0.08; --md-sys-state-focus-opacity: 0.10; --md-sys-state-pressed-opacity: 0.10; --md-sys-state-dragged-opacity: 0.16; /* application, ex. survol d'un bouton rempli : background: color-mix(in srgb, var(--md-sys-color-on-primary) calc(var(--md-sys-state-hover-opacity) * 100%), var(--md-sys-color-primary)); et sur une surface claire : background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, var(--md-sys-color-surface)); */ --presente-focus-ring: 3px solid #2F2523; --presente-focus-ring-offset: 2px; /* ─── ÉLÉVATION (teinte + contour, jamais box-shadow) ─────── */ --presente-elev-0-bg: var(--md-sys-color-surface); --presente-elev-0-border: none; --presente-elev-1-bg: var(--md-sys-color-surface-container-low); --presente-elev-1-border: 1px solid var(--md-sys-color-outline-variant); --presente-elev-2-bg: var(--md-sys-color-surface-container); --presente-elev-2-border: 1px solid var(--md-sys-color-outline); --presente-elev-3-bg: var(--md-sys-color-surface-container-high); --presente-elev-3-border: 1px solid var(--md-sys-color-outline); --presente-elev-4-bg: var(--md-sys-color-surface-container-highest); --presente-elev-4-border: 2px solid var(--md-sys-color-outline); /* ─── TYPOGRAPHIE ─────────────────────────────────────────── */ --md-sys-typescale-brand-font: 'Newsreader', Georgia, 'Times New Roman', serif; --md-sys-typescale-plain-font: 'Public Sans', system-ui, -apple-system, sans-serif; --md-sys-typescale-display-large-size: 44px; --md-sys-typescale-display-large-line: 48px; --md-sys-typescale-display-medium-size: 36px; --md-sys-typescale-display-medium-line: 42px; --md-sys-typescale-display-small-size: 30px; --md-sys-typescale-display-small-line: 36px; --md-sys-typescale-headline-large-size: 30px; --md-sys-typescale-headline-large-line: 36px; --md-sys-typescale-headline-medium-size: 26px; --md-sys-typescale-headline-medium-line: 32px; --md-sys-typescale-headline-small-size: 24px; --md-sys-typescale-headline-small-line: 30px; --md-sys-typescale-title-large-size: 22px; --md-sys-typescale-title-large-line: 28px; --md-sys-typescale-title-medium-size: 19px; --md-sys-typescale-title-medium-line: 26px; --md-sys-typescale-title-small-size: 17px; --md-sys-typescale-title-small-line: 24px; --md-sys-typescale-body-large-size: 20px; --md-sys-typescale-body-large-line: 33px; --md-sys-typescale-body-medium-size: 18px; --md-sys-typescale-body-medium-line: 30px; --md-sys-typescale-body-small-size: 16px; --md-sys-typescale-body-small-line: 26px; --md-sys-typescale-label-large-size: 18px; --md-sys-typescale-label-large-line: 24px; --md-sys-typescale-label-medium-size: 16px; --md-sys-typescale-label-medium-line: 20px; --md-sys-typescale-label-small-size: 14px; --md-sys-typescale-label-small-line: 18px; --md-sys-typescale-weight-regular: 400; --md-sys-typescale-weight-medium: 500; --md-sys-typescale-weight-bold: 600; --md-sys-typescale-label-tracking: 0.01em; --md-sys-typescale-overline-tracking: 0.12em; /* ─── ESPACEMENT (grille de 4) ────────────────────────────── */ --presente-space-1: 4px; --presente-space-2: 8px; --presente-space-3: 12px; --presente-space-4: 16px; --presente-space-5: 20px; --presente-space-6: 24px; --presente-space-8: 32px; --presente-space-10: 40px; --presente-space-12: 48px; --presente-space-16: 64px; --presente-space-20: 80px; --presente-space-24: 96px; --presente-gutter-mobile: 20px; /* marge latérale à 390 px */ --presente-gutter-desktop: 32px; --presente-measure: 64ch; /* largeur maximale d'un paragraphe */ --presente-content-max: 1120px; /* ─── FORME ───────────────────────────────────────────────── */ --md-sys-shape-corner-none: 0px; --md-sys-shape-corner-xs: 4px; --md-sys-shape-corner-sm: 8px; --md-sys-shape-corner-md: 12px; --md-sys-shape-corner-lg: 16px; --md-sys-shape-corner-xl: 24px; --md-sys-shape-corner-full: 999px; /* Rayon des illustrations (ajouté le 27/09) — shape-lg : la même valeur que les cartes, déjà nommée "cartes, images en colonne" dans l'échelle de formes. Alias sémantique plutôt que --shape-lg cité en dur dans .ilustracion, pour que ce choix se change à un seul endroit. */ --presente-illustration-radius: var(--md-sys-shape-corner-lg); /* ─── CIBLES TACTILES ─────────────────────────────────────── */ --presente-target-min: 48px; /* jamais moins */ --presente-target-field: 56px; /* champs et boutons de formulaire */ --presente-target-gap: 8px; /* écart minimal entre deux cibles */ /* ─── MOUVEMENT ───────────────────────────────────────────── */ --md-sys-motion-duration-short: 120ms; --md-sys-motion-duration-medium: 200ms; --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); } @media (min-width: 1024px) { :root { --md-sys-typescale-display-large-size: 57px; --md-sys-typescale-display-large-line: 62px; --md-sys-typescale-display-medium-size: 45px; --md-sys-typescale-display-medium-line: 52px; --md-sys-typescale-display-small-size: 36px; --md-sys-typescale-display-small-line: 44px; --md-sys-typescale-headline-large-size: 32px; --md-sys-typescale-headline-large-line: 40px; --md-sys-typescale-headline-medium-size: 28px; --md-sys-typescale-headline-medium-line: 36px; --md-sys-typescale-headline-small-size: 24px; --md-sys-typescale-headline-small-line: 32px; --md-sys-typescale-body-large-size: 19px; --md-sys-typescale-body-large-line: 32px; } } @media (prefers-reduced-motion: reduce) { :root { --md-sys-motion-duration-short: 0ms; --md-sys-motion-duration-medium: 0ms; } } /* ─── RÈGLES NON NÉGOCIABLES ──────────────────────────────── 1. box-shadow est interdit. L'élévation passe par --presente-elev-*. 2. Les illustrations vivent en colonne, à côté de leur texte, depuis le 16/09 (abandon du fond perdu — voir templates/partials/imagen.html) ; depuis le 27/09 elles portent --presente-illustration-radius (shape-lg), comme les cartes. Aucune marge ni contour en plus, aucune carte autour. 2b. Deux surfaces teintées au maximum par vue ; au-delà, contour outline-variant sur surface. Un conteneur teinté ne se pose jamais dans un autre. Ne comptent pas dans les deux : les surfaces d'erreur, les états sélectionnés (puce, ligne de menu active) et le remplissage d'un bouton primary — ils portent un sens, pas une hiérarchie. La barre de navigation ne se teinte qu'au défilement. 2c. Le conteneur terracotta (secondary-container, #B4543C) est un REMPLISSAGE fort : texte en on-*, jamais sous 17 px, et seulement des titres de 24 px et plus. Le conteneur ocre (tertiary-container) est un ton clair depuis le 27/09 (#FBE2B0) : remplissage doux, texte en on-surface, sans cette restriction de taille — voir .bandeau-informativo. 3. --md-sys-color-outline-variant ne borde jamais un élément interactif. 4. Aucun texte, aucun bouton, aucun voile par-dessus une illustration. 5. Tout élément cliquable fait au moins 48 px de haut, 8 px d'écart. 6. Corps de texte : jamais sous 18 px, jamais sous 7:1 de contraste. ──────────────────────────────────────────────────────────── */