/* ========================================================================== SUCCEO — variables.css Jetons de design (design tokens) du site succeo.fr -------------------------------------------------------------------------- C'est le SEUL fichier à modifier pour changer la charte : couleurs, typographie, rayons, ombres, espacements, largeurs de conteneur. ========================================================================== */ :root { /* ------------------------------------------------------------------ 1. COULEURS DE MARQUE ------------------------------------------------------------------ Vert Sofitex : couleur d'accent historique du groupe. Elle est volontairement réservée aux actions et aux signaux (boutons principaux, indicateurs, survols, détails graphiques). ------------------------------------------------------------------ */ --c-accent: #00ed00; /* Vert Sofitex — aplats, boutons, puces */ --c-accent-hover: #00d000; /* Survol d'un aplat vert */ --c-accent-press: #00b800; /* État actif / pressé */ --c-accent-text: #0a7c0a; /* Vert lisible sur fond blanc (ratio ≥ 4.5) */ --c-accent-soft: #e9fce9; /* Fond très clair teinté vert */ --c-accent-line: #b9f2b9; /* Bordure teintée vert */ /* Encre : couleur foncée complémentaire, socle "professionnel" du site. */ --c-ink: #0f1720; /* Fonds foncés, titres */ --c-ink-700: #1d2934; /* Surfaces foncées secondaires */ --c-ink-500: #33414f; /* Texte sur fond clair, appuyé */ /* ------------------------------------------------------------------ 2. COULEURS D'INTERFACE ------------------------------------------------------------------ */ --c-text: #1b2530; /* Texte courant */ --c-muted: #5b6875; /* Texte secondaire (ratio ≥ 4.5 sur blanc) */ --c-muted-soft: #7a8794; /* Texte tertiaire, mentions */ --c-on-dark: #ffffff; /* Texte sur fond foncé */ --c-on-dark-muted: #b7c1cb; /* Texte secondaire sur fond foncé */ --c-surface: #ffffff; /* Fond principal */ --c-surface-alt: #f6f8f9; /* Sections légèrement grisées */ --c-surface-sunk: #eef1f3; /* Fond enfoncé (barres, champs désactivés) */ --c-border: #e3e8ec; /* Bordure fine standard */ --c-border-strong: #cdd6dd; /* Bordure marquée (champs de formulaire) */ /* États */ --c-danger: #b3261e; --c-danger-soft: #fdecea; --c-warning: #8a5a00; --c-warning-soft: #fff6e5; --c-success: #0a7a3d; --c-success-soft: #e8f6ee; --c-info: #14506e; --c-info-soft: #e8f2f7; /* ------------------------------------------------------------------ 3. TYPOGRAPHIE ------------------------------------------------------------------ Aucune police externe n'est chargée : le site s'appuie sur la pile système (performance maximale, zéro requête réseau, zéro cookie). Pour utiliser une police de marque, déposez les fichiers .woff2 dans assets/fonts/, déclarez un @font-face dans global.css puis remplacez la valeur de --font-heading / --font-body ci-dessous. ------------------------------------------------------------------ */ --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-heading: var(--font-body); --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Échelle fluide : la taille s'adapte à la largeur d'écran sans palier. */ --fs-xs: 0.8125rem; /* 13px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-md: 1.0625rem; /* 17px */ --fs-lg: clamp(1.125rem, 0.25vw + 1.06rem, 1.25rem); --fs-xl: clamp(1.3rem, 0.6vw + 1.15rem, 1.6rem); --fs-2xl: clamp(1.55rem, 1.1vw + 1.3rem, 2.1rem); --fs-3xl: clamp(1.9rem, 1.9vw + 1.45rem, 2.8rem); --fs-4xl: clamp(2.2rem, 3.1vw + 1.5rem, 3.6rem); --lh-tight: 1.15; --lh-snug: 1.3; --lh-base: 1.65; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800; --tracking-tight: -0.02em; --tracking-wide: 0.06em; /* ------------------------------------------------------------------ 4. ESPACEMENTS (échelle de 4 px) ------------------------------------------------------------------ */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; /* Respiration verticale des sections (fluide) */ --section-y: clamp(3rem, 6vw, 6rem); --section-y-lg: clamp(4rem, 8vw, 7.5rem); /* ------------------------------------------------------------------ 5. MISE EN PAGE ------------------------------------------------------------------ */ --container: 1200px; --container-narrow: 820px; --container-wide: 1360px; --gutter: clamp(1rem, 4vw, 2.5rem); --header-h: 68px; /* hauteur du header sur mobile */ --header-h-lg: 76px; /* hauteur du header sur desktop */ /* ------------------------------------------------------------------ 6. RAYONS, BORDURES ET OMBRES ------------------------------------------------------------------ */ --radius-xs: 4px; --radius-sm: 6px; --radius: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; --shadow-xs: 0 1px 2px rgba(15, 23, 32, 0.05); --shadow-sm: 0 1px 3px rgba(15, 23, 32, 0.06), 0 1px 2px rgba(15, 23, 32, 0.04); --shadow: 0 4px 14px rgba(15, 23, 32, 0.07); --shadow-lg: 0 14px 40px rgba(15, 23, 32, 0.10); --shadow-focus: 0 0 0 3px rgba(10, 124, 10, 0.28); /* ------------------------------------------------------------------ 7. MOUVEMENT ------------------------------------------------------------------ */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 140ms; --dur: 220ms; --dur-slow: 420ms; /* Apparition des blocs au défilement. Plus longue que --dur-slow : un bloc qui monte de 28px a besoin de durée pour se lire comme un glissement et non comme un sursaut. */ --dur-reveal: 620ms; /* Décélération PROGRESSIVE, propre à l'apparition (easeOutCubic). --ease-out, très en avance de phase, expédiait 83 % du déplacement dans les 155 premières millisecondes : le bloc claquait en place puis s'immobilisait pendant le reste de l'animation. On ne voyait pas un glissement, on voyait un sursaut suivi d'une attente. */ --ease-reveal: cubic-bezier(0.33, 1, 0.68, 1); /* Distance du glissement vers le haut. En pixels et non en em : elle ne doit pas grandir avec la taille du texte, sinon les gros titres partiraient de bien plus bas que les paragraphes et la page semblerait se disloquer. */ --reveal-shift: 28px; /* ------------------------------------------------------------------ 8. PROFONDEUR (z-index) ------------------------------------------------------------------ */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-drawer: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; } /* Réduction des animations : préférence système respectée globalement. Les valeurs de durée sont neutralisées à la source pour que l'ensemble des composants suive automatiquement. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur: 0.01ms; --dur-slow: 0.01ms; --dur-reveal: 0.01ms; /* Aucun déplacement non plus : la préférence porte sur le mouvement, pas seulement sur sa durée. */ --reveal-shift: 0px; } }