/* ========================================================================== SIAM — Design tokens (19e édition, 2027) Source: charte 2025 (logo) + charte 2026 (typo + palette pôles), mixage validé par le client — voir BRIEF.md pour le détail des choix. A inclure une seule fois (ex: /public/assets/css/tokens.css) et référencer dans toutes les pages/templates du site. ========================================================================== */ :root{ /* --- Couleurs de marque (logo, inchangé) --- */ --orange: #E84818; /* fruit du logo */ --orange-warm: #F5941E; /* variante chaude, hover/accents */ --green-dark: #0E9F3B; /* feuille du logo */ --green-deep: #046028; /* vert profond, fonds de section */ --green-lime: #8FC01E; /* feuille claire / script "SIAM" */ /* --- Dégradé héro (charte 2026) — usage ACCENT UNIQUEMENT, jamais en fond global du site --- */ --grad-start: #8C1013; --grad-end: #F18A11; /* --- Variantes accessibles des couleurs de marque (WCAG AA) --- --orange (#E84818) et --green-dark (#0E9F3B) ne donnent que 3.9:1 et 3.5:1 avec du blanc : insuffisant pour du TEXTE (<18.66px gras) sur fond coloré, ou pour un libellé coloré sur fond clair. Les deux variantes ci-dessous sont les mêmes teintes assombries jusqu'au contraste AA (>= 4.5:1), et servent EXCLUSIVEMENT dès que de la couleur porte du texte : fond de bouton, libellé, lien. Le reste (filets, icônes, bandeaux, barres de pôle) garde les couleurs de marque d'origine. */ --orange-cta: #CC3A10; /* 5.02:1 sur blanc — fond de CTA primaire, texte orange */ --green-cta: #0C7F2F; /* 5.13:1 sur blanc — fond de CTA secondaire */ --red-danger: #91130E; /* rouge charte (= --c-elevage) — actions destructives */ /* --- Neutres --- */ --ink: #181A17; /* texte principal */ --ink-soft: #4B4F49; /* texte secondaire */ --paper: #FAFAF7; /* fond de page */ --line: #E6E3DA; /* bordures / séparateurs */ /* --- Palette des pôles (charte 2026, RGB vérifiés par pipette sur les pictos — NE PAS reprendre les valeurs texte du PDF, elles sont décalées par rapport aux pictos réels) --- */ --c-nature: #8FC406; /* Nature et environnement */ --c-international: #05ADEF; /* International */ --c-machinisme: #6978BB; /* Machinisme */ --c-agroalim: #FAB812; /* Agro-alimentaire */ --c-agrofourn: #144B8B; /* Agro-fourniture */ --c-intrants: #D78D38; /* Intrants d'élevage */ --c-sponsors: #E7267E; /* Sponsors */ --c-gengreen: #186E32; /* Génération Green */ --c-regions: #EB1D26; /* 12 régions du royaume */ --c-produits: #57257A; /* Produits du terroir */ --c-elevage: #91130E; /* Élevage */ --c-agridigital: #13AB4D; /* Agri-digital */ --c-conferences: #DDA8D6; /* Espace conférences */ /* Couleurs claires: le texte/icône passe en --ink dessus (voir classe .on-light) */ /* --- Rayon / échelle --- */ --radius: 14px; --maxw: 1180px; /* --- Gouttière horizontale du conteneur `.wrap` --- UNE seule valeur pour tout le site : l'en-tête, le hero et le contenu des pages doivent s'aligner exactement sur la même colonne. Ne jamais la redéfinir dans un composant : utiliser `padding-top`/`padding-bottom` (longhand) pour ajouter du vertical, sinon la gouttière est écrasée et le contenu se colle au bord de l'écran (cf. app.css, .nav / .hero-inner). */ --gutter: 20px; /* --- Rythme vertical des sections --- Padding HAUT et BAS d'une `
`. Deux sections voisines cumulant leurs paddings, l'écart réellement visible entre deux sections vaut 2 × --sp-section (soit ~48px en mobile, ~72px en grand écran). À ajuster ici uniquement. */ --sp-section: clamp(24px, 3vw, 36px); } /* ========================================================================== Typographie — Montserrat (FR/EN) + Vazirmatn (AR), charte 2026. Charger via Google Fonts ou en self-hosted (recommandé pour la perf, cf. LiteSpeed Cache déjà en place sur le serveur) : ========================================================================== */ body{ font-family:'Montserrat', sans-serif; } [lang="ar"], .ar{ font-family:'Vazirmatn', sans-serif; direction:rtl; } /* ========================================================================== Breakpoints de référence (mobile-first, pas de framework) Mobile : < 640px (défaut) Tablette : >= 640px et >= 768px selon les gabarits Desktop : >= 960px / >= 1000px selon densité de grille ========================================================================== */ /* ========================================================================== DIRECTION ARTISTIQUE 2027 — « Terre & Institution » -------------------------------------------------------------------------- Couche ADDITIVE : aucune valeur ci-dessus n'est modifiée (admin.css lit ce même fichier et s'appuie sur --radius, --line, --paper, --ink…). Les tokens ci-dessous portent la refonte esthétique du SITE PUBLIC : surfaces, typographie éditoriale, géométrie, rythme et texture. Parti pris : le vert profond du logo devient la couleur DOMINANTE des bandes institutionnelles, l'orange reste un accent RARE et tranchant (filets, numéros, CTA). On abandonne l'arrondi systématique et l'ombre portée décorative, au profit de filets nets et d'aplats francs. ========================================================================== */ :root{ /* --- Surfaces --- Trois fonds seulement, du plus clair au plus sombre. L'alternance paper / paper-warm donne le rythme des pages sans ajouter de carte. */ --surface: #FFFFFF; /* panneaux, formulaires */ --paper-warm: #F2EFE4; /* bande alternée « parchemin » */ --paper-deep: #E9E5D7; /* fond creux : vignettes, champs */ --ink-deep: #0B120E; /* fonds immersifs (pied de page, bandes) */ --ink-700: #1C2A21; /* second niveau sombre */ --line-strong: #D2CCBB; /* filet appuyé (séparateurs de section) */ --line-dark: rgba(255,255,255,.14); /* filet sur fond sombre */ /* --- Typographie --- Montserrat (charte 2026) reste la typo d'INTERFACE : navigation, boutons, libellés, texte courant. Fraunces, serif éditoriale à chasse optique variable, porte les TITRES et les grands chiffres : elle donne au salon le registre institutionnel et agricole (formes organiques, empattements en coin) qu'une grotesque seule n'a pas. */ --font-ui: 'Montserrat', system-ui, sans-serif; --font-display: 'Fraunces', 'Playfair Display', Georgia, serif; --font-ar: 'Vazirmatn', sans-serif; /* Échelle typographique éditoriale (une seule source pour tout le site). */ --fs-display: clamp(34px, 6.4vw, 72px); /* titre de hero d'accueil */ --fs-h1: clamp(30px, 5vw, 54px); /* titre de page */ --fs-h2: clamp(25px, 3.4vw, 40px); /* titre de section */ --fs-h3: clamp(18px, 1.6vw, 21px); /* titre de bloc */ --fs-lead: clamp(16.5px, 1.5vw, 19px); --fs-body: 16px; --fs-small: 14px; --fs-label: 11.5px; /* libellés capitales */ /* Interlettrage des libellés en capitales (sur-titres, étiquettes, dt). */ --track-label: .16em; /* --- Géométrie --- La refonte supprime l'arrondi systématique : un filet net vaut mieux qu'un rayon de 14px répété sur toutes les familles de blocs. --radius (14px) est CONSERVÉ tel quel pour le back-office. */ --radius-xs: 2px; --radius-sm: 3px; --radius-pill: 999px; /* --- Rythme vertical --- Deux respirations : standard et ample (ouverture/fermeture de page). */ --sp-section-lg: clamp(56px, 7vw, 104px); --sp-section-md: clamp(38px, 4.4vw, 68px); /* --- Mouvement --- */ --ease: cubic-bezier(.22,.61,.36,1); --dur: .34s; --dur-fast: .18s; /* --- Motif décoratif : les fleurs d'oranger du logo --- Le logo officiel porte trois petites fleurs d'oranger au-dessus du fruit : c'est LE détail figuratif de l'identité SIAM, et c'est lui qui fait le motif du site. Il remplace la trame géométrique précédente. Pourquoi un vecteur et non le PNG du logo : dans logo.png ces fleurs ne mesurent que 21x17, 13x15 et 12x10 pixels. Les agrandir donnerait des contours pixelisés, des halos et des bavures de détourage. La fleur est donc redessinée en courbes — six pétales lancéolés, base étroite, pointe arrondie, coeur rond, comme sur le logo — ce qui la garde nette à toutes les tailles et sur tous les écrans. La tuile contient neuf fleurs d'échelles, d'orientations et d'opacités différentes, semées à espacement irrégulier ; celles qui touchent un bord sont redoublées sur le bord opposé, donc la tuile se répète sans couture apparente. Trois variantes de fleur seulement sont définies () puis réemployées () : le motif reste léger. Data-URI : aucune requête HTTP supplémentaire, aucun script, aucune animation. Posé en fond de pseudo-élément, il est purement décoratif et n'entre jamais dans l'arbre d'accessibilité. Régénérer avec docs/motif-fleurs.py (le tracé y est documenté). */ --fleurs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='440' viewBox='0 0 440 440'%3E%3Cdefs%3E%3Cg id='f0'%3E%3Cpath d='M0 0C-1.8 -3.8 -3.4 -8.9 -1.4 -14.8C-0.6 -17.2 0.6 -17.2 1.4 -14.8C3.4 -8.9 1.8 -3.8 0 0Z' transform='rotate(-0.4)'/%3E%3Cpath d='M0 0C-1.8 -3.7 -3.4 -8.8 -1.4 -14.5C-0.6 -16.9 0.6 -16.9 1.4 -14.5C3.4 -8.8 1.8 -3.7 0 0Z' transform='rotate(63.8)'/%3E%3Cpath d='M0 0C-1.8 -3.8 -3.4 -9.0 -1.4 -14.8C-0.6 -17.2 0.6 -17.2 1.4 -14.8C3.4 -9.0 1.8 -3.8 0 0Z' transform='rotate(120.1)'/%3E%3Cpath d='M0 0C-1.8 -3.7 -3.4 -8.9 -1.4 -14.6C-0.6 -17.0 0.6 -17.0 1.4 -14.6C3.4 -8.9 1.8 -3.7 0 0Z' transform='rotate(177.2)'/%3E%3Cpath d='M0 0C-1.8 -3.9 -3.4 -9.3 -1.4 -15.3C-0.6 -17.8 0.6 -17.8 1.4 -15.3C3.4 -9.3 1.8 -3.9 0 0Z' transform='rotate(241.2)'/%3E%3Cpath d='M0 0C-1.8 -3.6 -3.4 -8.6 -1.4 -14.2C-0.6 -16.5 0.6 -16.5 1.4 -14.2C3.4 -8.6 1.8 -3.6 0 0Z' transform='rotate(296.3)'/%3E%3Ccircle r='1.95'/%3E%3C/g%3E%3Cg id='f1'%3E%3Cpath d='M0 0C-1.8 -3.9 -3.4 -9.3 -1.4 -15.3C-0.6 -17.8 0.6 -17.8 1.4 -15.3C3.4 -9.3 1.8 -3.9 0 0Z' transform='rotate(-3.7)'/%3E%3Cpath d='M0 0C-1.8 -3.5 -3.4 -8.2 -1.4 -13.5C-0.6 -15.8 0.6 -15.8 1.4 -13.5C3.4 -8.2 1.8 -3.5 0 0Z' transform='rotate(61.7)'/%3E%3Cpath d='M0 0C-1.8 -4.0 -3.4 -9.5 -1.4 -15.7C-0.6 -18.3 0.6 -18.3 1.4 -15.7C3.4 -9.5 1.8 -4.0 0 0Z' transform='rotate(124.3)'/%3E%3Cpath d='M0 0C-1.8 -3.8 -3.4 -9.0 -1.4 -14.9C-0.6 -17.3 0.6 -17.3 1.4 -14.9C3.4 -9.0 1.8 -3.8 0 0Z' transform='rotate(181.4)'/%3E%3Cpath d='M0 0C-1.8 -3.4 -3.4 -8.2 -1.4 -13.5C-0.6 -15.7 0.6 -15.7 1.4 -13.5C3.4 -8.2 1.8 -3.4 0 0Z' transform='rotate(236.9)'/%3E%3Cpath d='M0 0C-1.8 -3.5 -3.4 -8.2 -1.4 -13.6C-0.6 -15.8 0.6 -15.8 1.4 -13.6C3.4 -8.2 1.8 -3.5 0 0Z' transform='rotate(300.3)'/%3E%3Ccircle r='1.95'/%3E%3C/g%3E%3Cg id='f2'%3E%3Cpath d='M0 0C-1.8 -3.6 -3.4 -8.5 -1.4 -14.0C-0.6 -16.3 0.6 -16.3 1.4 -14.0C3.4 -8.5 1.8 -3.6 0 0Z' transform='rotate(-2.8)'/%3E%3Cpath d='M0 0C-1.8 -3.7 -3.4 -8.8 -1.4 -14.5C-0.6 -16.9 0.6 -16.9 1.4 -14.5C3.4 -8.8 1.8 -3.7 0 0Z' transform='rotate(55.8)'/%3E%3Cpath d='M0 0C-1.8 -3.9 -3.4 -9.3 -1.4 -15.4C-0.6 -17.9 0.6 -17.9 1.4 -15.4C3.4 -9.3 1.8 -3.9 0 0Z' transform='rotate(119.5)'/%3E%3Cpath d='M0 0C-1.8 -3.8 -3.4 -9.0 -1.4 -14.9C-0.6 -17.4 0.6 -17.4 1.4 -14.9C3.4 -9.0 1.8 -3.8 0 0Z' transform='rotate(180.2)'/%3E%3Cpath d='M0 0C-1.8 -3.8 -3.4 -9.1 -1.4 -15.0C-0.6 -17.4 0.6 -17.4 1.4 -15.0C3.4 -9.1 1.8 -3.8 0 0Z' transform='rotate(240.0)'/%3E%3Cpath d='M0 0C-1.8 -3.6 -3.4 -8.5 -1.4 -14.1C-0.6 -16.4 0.6 -16.4 1.4 -14.1C3.4 -8.5 1.8 -3.6 0 0Z' transform='rotate(299.6)'/%3E%3Ccircle r='1.95'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%23fff'%3E%3Cuse href='%23f0' transform='translate(439.0 438.1) rotate(254.8) scale(1.16)' opacity='0.74'/%3E%3Cuse href='%23f0' transform='translate(439.0 -1.9) rotate(254.8) scale(1.16)' opacity='0.74'/%3E%3Cuse href='%23f0' transform='translate(-1.0 438.1) rotate(254.8) scale(1.16)' opacity='0.74'/%3E%3Cuse href='%23f0' transform='translate(-1.0 -1.9) rotate(254.8) scale(1.16)' opacity='0.74'/%3E%3Cuse href='%23f1' transform='translate(225.7 13.1) rotate(38.9) scale(0.92)' opacity='0.66'/%3E%3Cuse href='%23f1' transform='translate(225.7 453.1) rotate(38.9) scale(0.92)' opacity='0.66'/%3E%3Cuse href='%23f0' transform='translate(92.3 400.5) rotate(352.9) scale(0.83)' opacity='0.77'/%3E%3Cuse href='%23f0' transform='translate(297.0 148.2) rotate(5.5) scale(0.69)' opacity='0.78'/%3E%3Cuse href='%23f2' transform='translate(4.8 204.6) rotate(245.5) scale(0.85)' opacity='0.69'/%3E%3Cuse href='%23f2' transform='translate(444.8 204.6) rotate(245.5) scale(0.85)' opacity='0.69'/%3E%3Cuse href='%23f0' transform='translate(93.7 118.7) rotate(289.2) scale(1.27)' opacity='0.74'/%3E%3Cuse href='%23f1' transform='translate(375.9 282.4) rotate(356.1) scale(0.51)' opacity='0.7'/%3E%3Cuse href='%23f0' transform='translate(162.2 273.7) rotate(211.4) scale(0.53)' opacity='0.94'/%3E%3Cuse href='%23f0' transform='translate(381.3 80.4) rotate(327.0) scale(0.56)' opacity='0.93'/%3E%3C/g%3E%3C/svg%3E"); /* Pas de taille unique : une tuile de 440px ne laisserait souvent paraître aucune fleur sur une tuile de pôle haute de 168px. */ --fleurs-size: 440px; /* bandes et grandes surfaces */ --fleurs-size-sm: 160px; /* composants compacts (tuiles, en-têtes) */ } /* Le rythme des sections passe de ~24-36px à une respiration éditoriale : deux sections voisines cumulent leurs paddings (cf. commentaire plus haut). */ :root{ --sp-section: clamp(30px, 3.6vw, 48px); } /* Mobile : le motif se fait plus petit — donc plus discret — et son intensité baisse d'un cran (cf. --fleurs-dim dans app.css). */ @media (max-width:767px){ :root{ --fleurs-size:300px; --fleurs-size-sm:125px; } }