/* ================================================================== FOTORDER — PALETTE OFFICIELLE Source : 02_PALETTE/ (palette_5_couleurs.png / .svg / palette.csv / palette.json) Ce fichier est la SEULE source de couleurs de l'application. Il est chargé avant assets/style.css sur toutes les pages. ------------------------------------------------------------------ Corail #FF3B68 actions principales et éléments commerciaux Bleu #2563EB liens, actions secondaires, interfaces pro Jaune #FFD447 mises en avant et accents graphiques Anthracite #1F1F1F textes et surfaces sombres Blanc #FFFFFF fonds principaux ================================================================== */ :root { /* ---- 1. Les cinq couleurs officielles ---- */ --fot-corail: #FF3B68; --fot-bleu: #2563EB; --fot-jaune: #FFD447; --fot-anthracite: #1F1F1F; --fot-blanc: #FFFFFF; /* ---- 2. Transparences officielles ---- */ --fot-corail-06: rgba(255, 59, 104, .06); --fot-corail-12: rgba(255, 59, 104, .12); --fot-corail-30: rgba(255, 59, 104, .30); --fot-bleu-06: rgba(37, 99, 235, .06); --fot-bleu-12: rgba(37, 99, 235, .12); --fot-bleu-30: rgba(37, 99, 235, .30); --fot-jaune-16: rgba(255, 212, 71, .16); --fot-jaune-28: rgba(255, 212, 71, .28); --fot-anthracite-00: rgba(31, 31, 31, 0); --fot-anthracite-06: rgba(31, 31, 31, .06); --fot-anthracite-12: rgba(31, 31, 31, .12); --fot-anthracite-20: rgba(31, 31, 31, .20); --fot-anthracite-07: rgba(31, 31, 31, .07); --fot-anthracite-14: rgba(31, 31, 31, .14); --fot-anthracite-30: rgba(31, 31, 31, .30); --fot-anthracite-35: rgba(31, 31, 31, .35); --fot-anthracite-45: rgba(31, 31, 31, .45); --fot-anthracite-50: rgba(31, 31, 31, .50); --fot-anthracite-82: rgba(31, 31, 31, .82); --fot-anthracite-68: rgba(31, 31, 31, .68); --fot-anthracite-88: rgba(31, 31, 31, .88); --fot-blanc-14: rgba(255, 255, 255, .14); --fot-blanc-55: rgba(255, 255, 255, .55); --fot-blanc-85: rgba(255, 255, 255, .85); --fot-blanc-88: rgba(255, 255, 255, .88); --fot-blanc-92: rgba(255, 255, 255, .92); --fot-blanc-96: rgba(255, 255, 255, .96); /* ---- 3. États fonctionnels Hors identité de marque, indispensables au fonctionnement de l'interface (succès, avertissement, erreur). Contrastes mesurés (WCAG AA, seuil 4.5:1) — les teintes sont assombries pour rester lisibles AUSSI sur leur propre fond clair : succès 6.15:1 sur blanc · 5.39:1 sur son fond alerte 6.90:1 sur blanc · 6.02:1 sur son fond erreur 6.57:1 sur blanc · 5.76:1 sur son fond ---- */ --fot-ok: #176F4C; --fot-ok-06: rgba(23, 111, 76, .10); --fot-warn: #9A3D08; --fot-warn-06: rgba(154, 61, 8, .10); --fot-danger: #B42318; --fot-danger-06: rgba(180, 35, 24, .08); /* ---- 4. Alias d'interface L'application conserve ses noms de variables : la palette officielle prend le dessus, sans réécrire les composants. ---- */ --navy: var(--fot-anthracite); /* surfaces sombres (contraste 16.6:1) */ --ink: var(--fot-anthracite); /* texte principal */ --muted: var(--fot-anthracite-68); /* texte secondaire, contraste 5.6:1 */ --line: var(--fot-anthracite-12); /* traits et bordures */ --bg: var(--fot-blanc); /* fonds principaux */ --bg-tint: var(--fot-anthracite-06); /* fonds doux */ --accent: var(--fot-corail); /* action principale / commercial */ --accent-soft: var(--fot-corail-06); --highlight: var(--fot-jaune); /* mise en avant / accent graphique */ --link: var(--fot-bleu); /* liens et actions secondaires */ --ok: var(--fot-ok); --ok-soft: var(--fot-ok-06); --warn: var(--fot-warn); --warn-soft: var(--fot-warn-06); --danger: var(--fot-danger); --danger-soft: var(--fot-danger-06); --focus: var(--fot-bleu); /* anneau de focus clavier */ } /* ================================================================== Noms sémantiques — utilisés par la feuille de style de l'application (assets/style.css) et par les gabarits PHP. Ils pointent tous vers la palette officielle ci-dessus : aucune couleur n'est dupliquée. ================================================================== */ :root { --coral: var(--fot-corail); --blue: var(--fot-bleu); --sun: var(--fot-jaune); --white: var(--fot-blanc); --coral-soft: var(--fot-corail-06); --coral-line: var(--fot-corail-30); --blue-soft: var(--fot-bleu-06); --blue-line: var(--fot-bleu-30); --sun-soft: var(--fot-jaune-28); --sun-line: var(--fot-jaune-28); --ink-tint: var(--fot-anthracite-06); --ink-tint-strong: var(--fot-anthracite-12); --ink-line: var(--fot-anthracite-12); --ink-soft: var(--fot-anthracite-68); --bg-soft: var(--fot-anthracite-06); /* nuances lisibles obtenues à partir du corail et du bleu officiels (variantes sombres du même ton, pour porter du texte sur fond clair) */ --coral-deep: #C4123F; /* 5.99:1 sur blanc (AA) */ --blue-deep: #1D4ED8; /* 6.29:1 sur blanc (AA) */ --ink-deep: #0F0F0F; /* couleur du texte posé sur chaque couleur de marque */ --ink-on-coral: var(--fot-anthracite); /* 4.77:1 (AA) */ --ink-on-blue: var(--fot-blanc); /* 5.17:1 (AA) */ --ink-on-sun: var(--fot-anthracite); /* 11.58:1 (AAA) */ /* ================================================================ GABARIT COMMUN — angles arrondis cohérents Une seule échelle de rayons pour toute l'interface (identité Pop Art contemporaine). Aucun composant n'invente plus sa propre valeur. --radius-pill : pastilles et étiquettes de statut uniquement --radius : cartes, modales, panneaux (12-16 px) --radius-sm : champs, petits blocs, notifications --radius-btn : boutons, onglets, filtres (rectangulaires, angles doux) ================================================================ */ --radius: 14px; --radius-sm: 10px; --radius-btn: 8px; --radius-pill: 999px; --shadow: 0 2px 10px var(--fot-anthracite-06); --shadow-lg: 0 10px 30px var(--fot-anthracite-12); --tabbar-h: 78px; /* transitions communes : survol, clic, sélection */ --t-fast: .12s ease; --t-base: .2s ease; /* ================================================================ 5. TYPOGRAPHIE OFFICIELLE Poppins : grands titres, titres secondaires, menus, marque Inter : paragraphes, formulaires, tableaux, prix, descriptions Polices auto-hébergées : assets/fonts/*.woff2 (assets/fonts.css) Aucun appel à un service externe. ================================================================ */ --font-texte: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-titre: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font: var(--font-texte); /* compatibilité : le texte courant reste en Inter */ /* échelle de tailles commune à toutes les pages (mobile d'abord) */ --fs-display: 34px; /* titre de page, nom de marque */ --fs-h1: 30px; /* grand titre de section */ --fs-h2: 24px; /* titre de section */ --fs-h3: 19px; /* titre de carte */ --fs-lead: 17px; /* prix, chiffres mis en avant */ --fs-body: 16px; /* texte courant et champs de formulaire (évite le zoom iOS) */ --fs-small: 14px; /* textes secondaires */ --fs-label: 13px; /* étiquettes, méta-informations */ --fs-mini: 12px; /* plus petit texte autorisé sur le site */ /* graisses */ --fw-titre: 800; /* Poppins ExtraBold */ --fw-sous-titre: 700; /* Poppins Bold */ --fw-marque: 700; /* Poppins Bold — éléments de marque et menus */ --fw-texte: 400; /* Inter Regular */ --fw-texte-med: 500; /* Inter Medium */ /* interlignage */ --lh-titre: 1.22; --lh-body: 1.6; }