/** * Variables CSS — Design System Fondation Montes Alti * ---------------------------------------------------- * Source : maquette "Référence couleur / taille" (desktop, canevas 1440px) * + relevé visuel sur les gabarits Homepage, Contact, La fondatrice, Mission, * Projet (HUB/Gabarit), Projet détail, Veille EdTech (desktop et mobile). * * Toute valeur explicitement indiquée dans la maquette est reprise telle quelle. * Toute valeur absente est signalée par un commentaire "Hypothèse" et justifiée * (voir aussi le tableau récapitulatif dans README.md). */ :root { /* ============================================================ COULEURS — reprises telles quelles du nuancier de la maquette ============================================================ */ --color-primary: #213769; /* Navy — boutons pleins, H3/H5, fond footer/CTA */ --color-secondary: #AD9473; /* Tan/or — chapeaux de section, flèches, liens presse */ --color-accent: #AD9473; /* Alias de secondary : la maquette n'emploie qu'une seule teinte d'accent */ --color-text: #000000; /* Texte courant (paragraphes, H4) */ --color-text-muted: #5C6470; /* Hypothèse — texte secondaire (dates, légendes) non chiffré dans la maquette, dérivé du gris visuellement utilisé pour les métadonnées presse */ --color-background: #FFFFFF; --color-surface: #E4F0EE; /* Fond des cartes (grille "Nos projets", cartes logos) */ --color-surface-alt: #F0F7F5; /* Hypothèse — fond des sections alternées ("On en parle dans la presse"), teinte la plus claire du nuancier */ --color-border: #DDE3E8; /* Hypothèse — bordure neutre pour champs de formulaire/séparateurs ; les boutons outline utilisent le noir explicite de la maquette (voir components.css) */ --color-white: #FFFFFF; --color-black: #000000; /* ============================================================ TYPOGRAPHIE — famille ============================================================ */ --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ============================================================ TYPOGRAPHIE — échelle générique (gabarit demandé) ------------------------------------------------------------ IMPORTANT — méthode de vérification : la fiche "Référence couleur/taille" étant exportée depuis XD, ses libellés texte ("Taille XX") ne sont pas toujours synchronisés avec la taille réellement appliquée à l'échantillon affiché à côté. Plutôt que de recopier les libellés, chaque valeur ci-dessous a été vérifiée en lisant la taille de police RÉELLEMENT embarquée dans les PDF (métadonnées de police, pas une estimation visuelle), et recoupée sur plusieurs pages quand c'est possible. Les écarts trouvés avec les libellés sont documentés value par value ci-dessous et récapitulés dans README.md. ============================================================ */ --font-size-xs: 0.875rem; /* 14px — Bouton 02/03/04, crédit footer. Identique desktop/mobile (aucune variation mesurée). */ --font-size-sm: 1rem; /* 16px — Bouton 01. Identique desktop/mobile. */ --font-size-base: 1.25rem; /* 20px — Paragraphe (P). Vérifié identique desktop ET mobile (page Homepage) : pas de réduction mobile pour le corps de texte. */ --font-size-lg: 1.375rem; /* 22px — H3. Vérifié identique desktop ET mobile ("Nos projets"). */ --font-size-xl: 1.75rem; /* 28px — palier générique demandé par le gabarit ; --font-size-h1 (plus bas) réutilise cette même valeur, voir sa justification détaillée. */ /* ============================================================ TYPOGRAPHIE — titres (extension nécessaire du gabarit) Seuls le hero et le chapeau varient réellement entre desktop et mobile dans la maquette (voir clamp() ci-dessous, bornes basées sur les tailles réelles mesurées sur Homepage - mobile.pdf). Tous les autres niveaux de titre sont identiques aux deux breakpoints testés (375px et 1440px) : ils restent donc en valeur fixe plutôt que d'inventer une interpolation fictive. ============================================================ */ /* Hero (H1 pleine page, home uniquement) : 40px mobile → 71px desktop. Le libellé "Taille 71" de la fiche est confirmé exact (span PDF 71pt) ; la valeur mobile (40px) vient de la mesure sur "Homepage - mobile.pdf" (aucune valeur mobile n'était indiquée sur la fiche de référence, qui n'illustre que le desktop). */ --font-size-hero: clamp(2.5rem, 1.818rem + 2.911vw, 4.4375rem); /* H1 : la fiche indique "Taille 35" mais l'échantillon affiché sur la fiche elle-même, ainsi que tous les titres de page des 7 autres gabarits ("La Fondation", "Dinara Kulibayeva,", "Nos Projets", "EdTech"…), sont embarqués à 28pt — jamais 35pt. Correction retenue : 28px, réputée constante (pas de gabarit mobile de page secondaire disponible pour confirmer, extrapolé du comportement constant observé sur H2/H3/P). */ --font-size-h1: var(--font-size-xl); /* 28px */ /* H2 : même libellé erroné "Taille 35" que H1 sur la fiche, mais échantillon réellement embarqué à 25pt — confirmé sur 4 autres occurrences ("Urban Move Academy (UMA)" en teaser homepage, "On en parle dans la presse", "Membres du Conseil de Fondation", "Retrouvez les éditions précédentes"), identique desktop/mobile. */ --font-size-h2: 1.5625rem; /* 25px */ --font-size-h3: var(--font-size-lg); /* 22px — libellé confirmé exact */ --font-size-h4: 1.25rem; /* 20px — libellé confirmé exact */ --font-size-h5: 1.125rem; /* 18px — libellé confirmé exact */ --font-size-h6: 1rem; /* Hypothèse — aucun H6 dans la maquette, aligné sur --font-size-sm */ /* Chapeau/lead : libellé "Taille 40" confirmé exact en desktop. Valeur mobile (30px) mesurée sur Homepage - mobile.pdf. */ --font-size-lead: clamp(1.875rem, 1.655rem + 0.939vw, 2.5rem); /* Menu : libellé "Taille 20" confirmé exact, identique desktop/mobile (le menu mobile bascule de toute façon sur le hamburger natif Divi). */ --font-size-nav: 1.25rem; /* ============================================================ TYPOGRAPHIE — interlignage (recalculé à partir des tailles corrigées ci-dessus, rapport à la valeur "Interlignage X" absolue indiquée dans la maquette pour chaque titre) ============================================================ */ --line-height-hero: 0.986; /* 70 / 71 — correction : la valeur précédente (1.14) était une erreur de calcul */ --line-height-h1: 1.071; /* 30 / 28 (interlignage 30 de la fiche, rapporté à la taille H1 corrigée) */ --line-height-h2: 1.2; /* 30 / 25 (même interlignage 30, rapporté à la taille H2 corrigée) */ --line-height-h3: 1.27; /* 28 / 22 */ --line-height-h4: 1.4; /* 28 / 20 */ --line-height-h5: 1.22; /* 22 / 18 */ --line-height-body: 1.4; /* 28 / 20 */ --line-height-lead: 1.25; /* 50 / 40 */ --line-height-nav: 1.5; /* 30 / 20 */ /* ============================================================ TYPOGRAPHIE — graisses La fiche indique "Regular et bold en actif" pour le menu, mais les items de navigation non actifs sont réellement embarqués en graisse Medium (500) sur toutes les pages ("Projets", "UMA", "EdTEch"…) — jamais en Regular (400). Seul l'item actif/courant passe en Bold (700). Poids Medium ajouté au système pour cette raison (voir chargement Google Fonts dans functions.php). ============================================================ */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; /* ============================================================ ESPACEMENTS — Hypothèse : la maquette ne fournit pas d'échelle chiffrée, ces valeurs sont déduites des proportions observées entre les blocs (rythme vertical des sections, marges internes des cartes) et suivent une progression x2 classique. ============================================================ */ --space-xs: 0.5rem; /* 8px — espacement interne minimal (icône + texte) */ --space-sm: 1rem; /* 16px — espacement entre éléments proches */ --space-md: 2rem; /* 32px — espacement entre blocs d'un même composant */ --space-lg: 4rem; /* 64px — espacement entre composants */ --space-xl: 7.5rem; /* 120px — respiration verticale entre sections (desktop) */ /* ============================================================ LAYOUT ============================================================ */ --container-width: 1280px; /* Hypothèse — canevas maquette 1440px avec marges visuelles ; voir README */ --container-padding: clamp(1.5rem, 5vw, 5rem); /* 24px mobile → 80px desktop, aligné sur la marge observée dans les gabarits */ /* ============================================================ UI — rayons de bordure ============================================================ */ --border-radius-sm: 0.5rem; /* 8px — champs de formulaire */ --border-radius-md: 1rem; /* 16px — cartes, images */ --border-radius-lg: 2.5rem; /* 40px — grandes courbes de section (hero, blocs pleine largeur) */ --border-radius-pill: 999px; /* Boutons (forme pilule, conforme à la maquette) */ /* ============================================================ UI — ombres (Hypothèse : la maquette est en design plat, sans ombre visible ; ombres légères prévues uniquement pour les états interactifs — survol de carte/bouton — cohérence UX) ============================================================ */ --shadow-sm: 0 2px 8px rgba(33, 55, 105, 0.08); --shadow-md: 0 8px 24px rgba(33, 55, 105, 0.12); /* ============================================================ UI — transitions ============================================================ */ --transition-default: 200ms ease; }