/* ========================================================================== FRANCO-NORD — JETONS DE DESIGN (Design tokens) -------------------------------------------------------------------------- Fichier : assets/css/fn-tokens.css Rôle : SEULE source des couleurs, typos, rayons, ombres et espacements. Aucun autre fichier ne doit contenir de valeur « en dur ». Charger : AVANT fn-theme.css et APRÈS les CSS du skin Porto (voir README.md § « Ordre de chargement »). Portée : variables déclarées sur :root, préfixe --fn- → aucun conflit avec Porto / Bootstrap 5.3 (qui n'utilisent pas ce préfixe). ⚠ Accessibilité — cible WCAG 2.1 AA (au-delà du 2.0 AA exigé par la LAPHO / AODA). Les paires texte/fond et les contrastes non textuels (1.4.11) ont été vérifiés : voir docs/ACCESSIBILITE.md. ========================================================================== */ :root { /* ---- 1. Couleurs de marque ------------------------------------------ */ /* Palette officielle (charte fournie) : FONDS « WCAG » (portent du texte) : #2C2D49 navy · #66941D vert foncé DÉCO / accents (pas de contrainte WCAG) : #3E3C5A mauve bleu · #94BB40 vert Autres : #00B2A5 teal · #2CADA4 teal 2 · #EFE9F6 lavande · #EBEBEB gris · #FFFFFF · #000000 Contrastes mesurés (texte normal : 4,5:1 ; grand texte ≥ 24 px ou ≥ 18,66 px gras : 3:1) : blanc / #2C2D49 13,3 ✔ · blanc / #3E3C5A 10,5 ✔ · #2C2D49 / #94BB40 6,0 ✔ blanc / #66941D 3,61 → grand texte seulement · #000 / #66941D 5,8 ✔ blanc / #00B2A5 2,65 ✘ · #2C2D49 / #00B2A5 5,0 ✔ */ --fn-navy-900: #2c2d49; /* Fonds sombres : héros, BAÉF, témoignages */ --fn-navy-700: #3e3c5a; /* Mauve bleu principal : barre du haut (déco) */ --fn-navy-600: #3e3c5a; /* Bandeau droits d'auteur */ --fn-ink: #2c2d49; /* Titres et texte fort sur fond clair */ --fn-lime-500: #94bb40; /* Vert principal : CTA, accents (déco) */ --fn-lime-300: #94bb40; /* Accent sur navy (« nos écoles ») 6,0:1 */ --fn-green-700: #66941d; /* Fond Carrières. ⚠ blanc dessus = 3,61:1 : conforme pour le grand texte seulement */ --fn-teal-500: #00b2a5; /* Teal principal : bande « Inscrire » */ --fn-teal-400: #2cada4; /* Teal secondaire (palette) */ --fn-teal-700: #007f77; /* Teal pour TEXTE sur blanc (4,9:1) — hors palette, à n'utiliser que si nécessaire */ --fn-lavender-50: #f8f7fc; /* Fond du méga-menu (teinte de #EFE9F6) */ --fn-lavender-100: #efe9f6; /* Lavande palette : menu principal */ --fn-lavender-200: #efe9f6; /* Fond des items « Accès rapide » */ --fn-lavender-300: #dcd6ec; /* Pastille / survol (teinte de #EFE9F6) */ --fn-white: #ffffff; --fn-black: #000000; --fn-gray-600: #5d5b70; /* Texte courant, résumés (6,6:1 sur blanc) */ --fn-gray-300: #ebebeb; /* Filets, séparateurs (gris palette) */ /* ---- 2. Couleurs sémantiques (à utiliser dans les composants) -------- */ --fn-color-text: var(--fn-gray-600); --fn-color-heading: var(--fn-ink); --fn-color-link: var(--fn-ink); /* Anneau de focus en DEUX tons : trait navy + halo blanc → ≥ 3:1 sur tous les fonds du site (blanc, navy, teal, vert, lime). WCAG 1.4.11 */ --fn-focus-ring: var(--fn-navy-900); --fn-focus-halo: var(--fn-white); --fn-color-cta-bg: var(--fn-lime-500); --fn-color-cta-text: var(--fn-navy-900);/* 5,9:1 */ --fn-enrol-btn-color: var(--fn-white); /* Bouton sur teal, fidèle à la maquette. ⚠ 2,65:1 au repos (WCAG 1.4.3 demande 4,5:1) ; survol/focus : navy sur blanc 13:1. Version conforme : var(--fn-navy-900) (5,0:1). */ /* ---- 3. Typographie -------------------------------------------------- */ /* Effra — Adobe Fonts, projet tgr0fbj : Graisses disponibles dans le projet : 400 et 700 (+ italiques). Les alias light/semibold/black pointent donc sur 400 ou 700 pour éviter les faux gras / fausses maigres générés par le navigateur. */ --fn-font-family: "effra", "Segoe UI", Roboto, Arial, sans-serif; --fn-fw-light: 400; --fn-fw-regular: 400; --fn-fw-semibold: 700; --fn-fw-bold: 700; --fn-fw-black: 700; /* Échelle fluide : min (mobile 375 px) → max (bureau 1920 px) */ --fn-fs-hero: clamp(2.5rem, 1rem + 4.2vw, 5.25rem); /* 40 → 84 */ --fn-fs-h2: clamp(1.875rem, 1.35rem + 2.3vw, 3.5rem); /* 30 → 56 */ --fn-fs-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); /* 22 → 30 */ --fn-fs-card: clamp(1.25rem, 1.05rem + 0.9vw, 1.875rem); /* 20 → 30 */ --fn-fs-body: 1.125rem; /* 18 px */ --fn-fs-small: 0.9375rem; /* 15 px */ --fn-fs-btn: 1rem; /* 16 px */ --fn-lh-tight: 1.1; --fn-lh-body: 1.6; /* ---- 3b. Boutons — espacements UNIQUES pour tous les boutons --------- Exprimés en em : un bouton plus petit (--sm) garde exactement les mêmes proportions. Ne jamais surcharger padding/hauteur ailleurs. */ --fn-btn-height: 3.25em; /* 52 px à 16 px */ --fn-btn-pad-x: 1.75em; /* marge interne gauche/droite */ --fn-btn-gap: .75em; /* espace texte ↔ flèche */ --fn-btn-arrow: .9em; /* taille de la flèche */ --fn-btn-optical-y: 0px; /* correction verticale manuelle du texte, utile seulement dans les navigateurs sans « text-box » (Firefox) : ex. 1px */ /* ---- 4. Formes ------------------------------------------------------- */ --fn-radius-sm: 10px; --fn-radius-md: 18px; /* Cartes */ --fn-radius-lg: 28px; /* Grands médias */ --fn-radius-pill: 999px; /* Boutons, badges, menu */ --fn-shadow-card: 0 6px 24px rgba(43, 45, 74, .10); --fn-shadow-soft: 0 2px 10px rgba(43, 45, 74, .08); /* ---- 5. Espacements & mise en page ----------------------------------- */ --fn-container-max: 1680px; /* Gabarit 1920 px : marges ≈ 120 px */ --fn-gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem); --fn-sidetools-w: 88px; /* largeur de la barre latérale fixe (module 00) */ /* Marge gauche du contenu : jamais moins que la barre latérale + 20 px, pour qu'elle ne cache rien (≥ 768 px ; en dessous, la barre passe en bas). (100vw − largeur du conteneur) / 2 = espace déjà libre à gauche du conteneur centré : on ne complète que ce qui manque. */ --fn-pad-left: var(--fn-gutter); --fn-section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem); --fn-gap: clamp(1rem, 0.6rem + 1.5vw, 2.5rem); /* ---- 6. Mouvement ---------------------------------------------------- */ --fn-ease: cubic-bezier(.2, .7, .2, 1); --fn-dur: .25s; --fn-parallax-amp: 28px; /* déplacement max des triangles au défilement (± cette valeur). 0px = effet coupé. */ /* ---- 7. Niveaux d'empilement (z-index) ------------------------------- DNN place sa barre d'édition (Persona Bar) à z-index ≈ 9999 : rester en dessous pour ne pas masquer les outils d'administration. */ --fn-z-sidetools: 900; --fn-z-header: 950; } @media (min-width: 768px) { :root { --fn-pad-left: max(var(--fn-gutter), calc(var(--fn-sidetools-w) + 20px - (100vw - min(100vw, var(--fn-container-max))) / 2)); } } @media (prefers-reduced-motion: reduce) { :root { --fn-dur: 0s; } }