/* ══ CHARTE : pas d'ombre portée, bordure gris clair fine. ═════════════ Cartes, blocs et encarts : --aaru-border-width solid --aaru-border (ou le même trait dessiné à l'intérieur par outline + outline-offset négatif, quand l'élément n'avait pas de bordure : aucun décalage de mise en page). Exceptions : contours de focus clavier ; éléments qui flottent PAR-DESSUS le contenu (menus, pop-ups, suggestions, bulle de filtres, contrôles et repères de carte, pastilles sur photo) : bordure fine + ombre très légère 0 4px 12px rgba(11,11,12,.06) si l'élément ne se détache pas sans elle. Voir audits/ombres-vers-bordures.md. */ :root { /* ══ TOKENS DE COULEUR ══════════════════════════════════════════ Deux themes, un seul jeu de noms. Le site public reste bleu de bout en bout : --brand et --accent y valent la meme valeur. L'Aaru Core redefinit --accent en terracotta dans son conteneur (voir plus bas), et rien d'autre ne bouge. Les composants ne posent plus de couleur d'accent en dur, ils lisent ces tokens. Regles : le texte pose sur un bouton d'accent est blanc, un corps de texte n'est jamais en accent, et une erreur ne se signale jamais par la seule couleur (icone plus texte), --error etant proche du terracotta. */ --brand: #00509E; /* ancre d'identite, logo et en-tete */ --accent: #00509E; /* accent interactif, bleu cote public */ --accent-hover: #003D7A; --accent-active: #002A52; --accent-tint: #EDF4FF; /* aplat leger de l'accent */ --accent-ring: rgba(0, 80, 158, .35); /* Surface de bouton et de pastille active : un cran plus sombre que l'accent, pour que le texte blanc pose dessus tienne le 4,5:1 du petit texte. Cote public, c'est le bleu de marque. */ --accent-btn: #00509E; --accent-btn-hover: #003D7A; /* Neutres communs aux deux themes */ --ink: #0B0B0C; --navy: #002A52; --surface: #FFFFFF; --surface-2: #F6F6F6; --border: #ECECEC; /* Systeme : ne suit jamais l'accent */ --success: #12A150; --error: #D64545; /* ── COULEURS ── */ --aaru-primary: #00509e; --aaru-primary-dark: #003d7a; --aaru-primary-light: #2E8BE5; --aaru-black: #1F1F1F; --aaru-gray-text: #6A6E83; --aaru-gray-light: #A8B1CE; --aaru-bg: #FFFFFF; --aaru-white: #FFFFFF; --aaru-border: #D8D8D8; --aaru-border-width: 1.5px; --aaru-success: #2d9e6b; --aaru-error: #e03131; /* ── TYPOGRAPHIE ── */ --aaru-font-head: 'Funnel Display', sans-serif; --aaru-font-body: 'Nunito', sans-serif; --aaru-h1: 48px; --aaru-h1-weight: 800; --aaru-h2: 32px; --aaru-h2-weight: 800; --aaru-h3: 22px; --aaru-h3-weight: 700; --aaru-body: 14px; --aaru-body-weight: 400; --aaru-label: 12px; --aaru-label-weight: 600; --aaru-caption: 11px; --aaru-caption-weight: 700; /* ── ESPACEMENTS ── */ --aaru-space-section: 64px; --aaru-space-component: 32px; --aaru-space-inner: 16px; --aaru-space-small: 8px; /* ── COMPOSANTS ── */ --aaru-radius-card: 12px; --aaru-radius-btn: var(--aaru-btn-m-radius); --aaru-radius-input: 8px; /* Charte : plus d'ombre portée. Jetons gardés (appelés ailleurs), valant none. */ --aaru-shadow-card: none; --aaru-shadow-hover: none; /* ── LAYOUT ── */ --aaru-max-width: 1440px; --aaru-padding-x: 40px; /* ── ÉCHELLE DE BOUTONS (S / M / L) ── Règle d'espacement de la charte, valable pour TOUT bouton du site : 1. padding horizontal ≈ 2 x le padding vertical ; 2. jamais de padding vertical supérieur à la moitié de l'horizontal ; 3. gap texte / icône : 8px ; 4. icône ≈ 90% de la taille du texte (0.9em). M est la taille par défaut. S sert aux actions secondaires et aux barres d'outils denses. L est réservée aux CTA de hero. Les