/** * tokens.css — Design Tokens Altair Architecture * ================================================ * Ce fichier contient TOUTES les custom properties CSS. * Il est chargé en premier sur chaque page (avant base.css). * Les variables définies ici sont la source de vérité * pour l'ensemble du design system. * * 8 sections numérotées : * 1. Couleurs * 2. Typographie * 3. Espacements * 4. Boutons filtre * 5. Grille & cartes * 6. Fiche projet * 7. Animations & ombres * 8. Breakpoints (référence — non utilisables en @media) */ :root { /* ═══════════════════════════════════════════════ 1. COULEURS ═══════════════════════════════════════════════ */ /* — Palette de marque — */ --color-primary: #823b34; --color-secondary-blue: #00426a; --color-secondary-gold: #7d622e; --color-background: #ffffff; --color-text: #000000; /* — Surfaces & overlays — */ --color-overlay-bg: rgba(130, 59, 52, 0.88); --color-overlay-text: #ffffff; --color-overlay-sub: rgba(255, 255, 255, 0.75); --color-accent-line: #ffffff; --color-badge-border: rgba(255, 255, 255, 0.35); --color-overlay-badge-bg: rgba(255, 255, 255, 0.10); --color-primary-tint: rgba(130, 59, 52, 0.08); --color-panel-bg: color-mix(in oklch, var(--color-primary) 4%, white); /* Sémantique couleur (pas juste --color-primary) */ --color-heading: var(--color-primary); /* — Nuances neutres — */ --color-neutral-text-soft: #333333; --color-muted: #555555; --color-muted-light: #888888; --color-taupe: #a09080; --color-input-border: #c8bfba; --color-input-placeholder: #b0a89e; --color-card-bg: #e0e0e0; --color-placeholder-bg: #d5ccc9; --color-placeholder-text: #a08880; --color-close: #000000; /* — Skeleton — */ --color-skeleton-base: #e8e4e1; --color-skeleton-highlight: #ddd9d5; /* — Statuts (badges) — */ --status-pro: #00426a; --status-chantier: #823b34; --status-diagnostic: #7d622e; --status-releve: #aaaaaa; --status-avant: #55606a; --status-esquisse: #8a7d5a; --status-termine: #3d6b47; --status-default: #555555; /* ═══════════════════════════════════════════════ 2. TYPOGRAPHIE ═══════════════════════════════════════════════ */ /* Ancienne fonte commentée (conservée pour référence) */ /* futura-pt, Jost */ --font-family: 'Futura PT', sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-semibold: 500; --font-weight-bold: 600; --font-weight-black: 800; /* * Échelle typographique modulaire (ratio = 1.067 — Minor Second) * * | Ratio | Nom | Effet | * |---------|----------------|------------------------| * | 1.067 | Minor Second | Très subtil | * | 1.125 | Major Second | Discret (ton choix) | * | 1.200 | Minor Third | Équilibré | * | 1.250 | Major Third | Marqué | * | 1.333 | Perfect Fourth| Contrasté (éditorial) | * * Chaque niveau ancré sur --fs-base (indépendant des voisins). */ --fs-base: 1.1rem; --fs-ratio: 1.067; /* Taille au-dessus de --fs-base */ --fs-md: calc(var(--fs-base) * var(--fs-ratio)); --fs-lg: calc(var(--fs-base) * var(--fs-ratio) * var(--fs-ratio)); --fs-xl: calc(var(--fs-base) * var(--fs-ratio) * var(--fs-ratio) * var(--fs-ratio)); --fs-2xl: calc(var(--fs-base) * var(--fs-ratio) * var(--fs-ratio) * var(--fs-ratio) * var(--fs-ratio)); --fs-3xl: calc(var(--fs-base) * var(--fs-ratio) * var(--fs-ratio) * var(--fs-ratio) * var(--fs-ratio) * var(--fs-ratio)); /* Tailles en dessous de --fs-base */ --fs-sm: calc(var(--fs-base) / var(--fs-ratio)); --fs-xs: calc(var(--fs-base) / var(--fs-ratio) / var(--fs-ratio)); --fs-2xs: calc(var(--fs-base) / var(--fs-ratio) / var(--fs-ratio) / var(--fs-ratio)); --fs-3xs: calc(var(--fs-base) / var(--fs-ratio) / var(--fs-ratio) / var(--fs-ratio) / var(--fs-ratio)); /* — Échelle dédiée aux titres (ratio plus large que le corps) — */ --fs-heading-ratio: 1.2; --fs-h6: var(--fs-base); --fs-h5: calc(var(--fs-h6) * var(--fs-heading-ratio)); --fs-h4: calc(var(--fs-h5) * var(--fs-heading-ratio)); --fs-h3: calc(var(--fs-h4) * var(--fs-heading-ratio)); --fs-h2: calc(var(--fs-h3) * var(--fs-heading-ratio)); --fs-h1: calc(var(--fs-h2) * var(--fs-heading-ratio)); /* — Interlettrage — */ --letter-spacing-filter: 0.18em; --letter-spacing-card: 0.10em; --letter-spacing-meta: 0.06em; --letter-spacing-badge: 0.13em; --letter-spacing-status: 0.08em; --letter-spacing-wide: 0.15em; /* Typo titres partagée */ --letter-spacing-heading: 0.02em; /* — Interlignes — */ --line-height-tight: 1.2; --line-height-snug: 1.3; --line-height-base: 1.4; --line-height-body: 1.7; /* Lisibilité */ --measure: 65ch; /* longueur de ligne max */ /* ═══════════════════════════════════════════════ 3. ESPACEMENTS ═══════════════════════════════════════════════ */ /* — Échelle — */ --space-2xs: 4px; --space-xs: 5px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 128px; --space-media-gap: clamp(4rem, 9vw, 10rem); /* respiration entre blocs éditoriaux */ /* — Paddings composants — */ --body-padding: 60px 16px 80px; --body-padding-tablet: 40px 24px 60px; --body-padding-mobile: 32px 16px 48px; --overlay-padding: 22px 24px 24px; --panel-inner-padding: var(--space-lg) var(--space-xl) var(--space-xl); --input-padding: 8px 16px; --filter-btn-padding: 8px 20px; --status-badge-padding: 4px 10px; --content-max-width: 1400px; /* ═══════════════════════════════════════════════ 4. BOUTONS FILTRE ═══════════════════════════════════════════════ */ --filter-btn-bg: transparent; --filter-btn-border: var(--color-primary); --filter-btn-text: var(--color-primary); --filter-btn-bg-active: var(--color-primary); --filter-btn-text-active: #ffffff; --filter-btn-bg-hover: var(--color-primary-tint); --filter-btn-radius: 0px; --filter-gap: 10px; --filter-margin-bottom: 52px; /* ═══════════════════════════════════════════════ 5. GRILLE & CARTES ═══════════════════════════════════════════════ */ --grid-max-width: 80%; --grid-gap: 20px; --card-aspect-ratio: 4 / 3; --card-width: 300px; --stagger-offset: 160px; --grid-columns-mobile: 1; --grid-columns-tablet: 2; --grid-columns-desktop: 2; --grid-columns-wide: 3; --grid-columns-stagger-mode: 2; /* — Rayons & bordures — */ --radius-sm: 2px; --radius-md: 8px; --border-width: 1px; --badge-offset: 10px; /* correspond au `top: 10px` de ton ancien code */ --badge-height: 1.5rem; /* ═══════════════════════════════════════════════ 6. FICHE PROJET ═══════════════════════════════════════════════ */ --fp-fiche-width: 300px; --fp-gallery-min: 140px; --fp-hero-right-min: 220px; --fp-hero-right-max: 320px; --fp-hero-gap: clamp(32px, 6vw, 96px); --fp-photo-width: 100%; --fp-3d-size: min(90vw, 90vh, 1200px); /* ═══════════════════════════════════════════════ 7. ANIMATIONS & OMBRES ═══════════════════════════════════════════════ */ --transition-overlay: 0.40s ease; --transition-zoom: 0.50s ease; --transition-filter: 0.25s ease; --transition-fast: 0.20s ease; --transition-panel: 0.45s cubic-bezier(0.4, 0, 0.2, 1); --zoom-scale: 1.06; --line-width: 163px; --line-transition-delay: 0.12s; --flip-duration: 480ms; --fade-out-duration: 260ms; --shadow-badge: 0 1px 4px rgba(0, 0, 0, 0.25); /* ═══ Révélation au scroll ═══ */ --reveal-distance: 32px; /* décalage vertical initial */ --reveal-duration: 700ms; --reveal-easing: cubic-bezier(.22, .61, .36, 1); /* ease-out doux */ --reveal-stagger: 120ms; /* décalage entre figure et texte */ /* ═══════════════════════════════════════════════ 8. BREAKPOINTS (référence — non utilisables en @media) Les utiliser via @media (min-width: Npx) plutôt qu'en tant que variable. ═══════════════════════════════════════════════ */ /* --bp-sm: 576px — mobile landscape / petite tablette */ /* --bp-md: 900px — tablette / desktop étroite */ /* --bp-lg: 1400px — desktop large / moniteur wide */ /* --bp-panel: 720px — breakpoint paneau fiche projet */ }