/* * E2IT - jetons de design. * Source de verite du projet. Toute valeur de couleur, de typographie ou * d'espacement se change ici et nulle part ailleurs. * * Les valeurs marquees [P] sont proposees et en attente de validation client ; * les autres sont relevees dans les fichiers de charte du projet. */ :root { /* ---------------------------------------------------------------- 1. Couleurs de marque ---------------------------------------------------------------- */ --e2it-marine: #0B2E5E; --e2it-marine-fonce: #071C3E; --e2it-bleu-profond: #14457F; --e2it-bleu-crete: #4F82C2; --e2it-accent: #1F7AE0; --e2it-accent-fond: #1668C6; --e2it-glacier: #A9C4E5; --e2it-bleu-clair: #D6E2F1; --e2it-bleu-pale: #E7EEF7; /* ---------------------------------------------------------------- 2. Neutres ---------------------------------------------------------------- */ --e2it-blanc: #FFFFFF; --e2it-fond-gris: #F5F7FA; --e2it-bordure: #E3E7EC; --e2it-texte: #0F1114; --e2it-texte-secondaire: #4A5260; --e2it-texte-tertiaire: #6B7280; /* [P] remplace #8A93A2, insuffisant en contraste */ /* ---------------------------------------------------------------- 3. Derives transparents ---------------------------------------------------------------- */ --e2it-filet-entete: rgba(169, 196, 229, .28); --e2it-filet-chiffres: rgba(169, 196, 229, .30); --e2it-motif-arete: rgba(169, 196, 229, .16); --e2it-hero-voile-1: rgba(7, 28, 62, .60); --e2it-hero-voile-2: rgba(7, 28, 62, .45); --e2it-hero-voile-3: rgba(7, 28, 62, .88); --e2it-hero-voile-4: rgba(7, 28, 62, .97); /* ---------------------------------------------------------------- 4. Etats d'interface - jamais en communication ---------------------------------------------------------------- */ --e2it-alerte-fond: #FFF6E0; --e2it-alerte-texte: #7A5600; --e2it-alerte-bordure: #F2DFA8; --e2it-conforme-fond: #E8F4EE; /* [P] */ --e2it-conforme-texte: #0E6B45; /* [P] */ --e2it-erreur-fond: #FEF3F2; /* [P] */ --e2it-erreur-texte: #B42318; /* [P] */ /* ---------------------------------------------------------------- 5. Familles typographiques ---------------------------------------------------------------- */ --e2it-police: 'Instrument Sans', system-ui, -apple-system, sans-serif; --e2it-police-mono: 'Azeret Mono', ui-monospace, SFMono-Regular, monospace; /* ---------------------------------------------------------------- 6. Echelle typographique Chaque style : taille / graisse / interligne / interlettrage. Les tailles fluides sont bornees par leur valeur mobile et desktop. ---------------------------------------------------------------- */ --e2it-h1-taille: clamp(44px, 6.2vw, 88px); /* [P] */ --e2it-h1-graisse: 620; --e2it-h1-interligne: .98; /* [P] */ --e2it-h1-interlettrage: -.035em; /* [P] */ --e2it-h2-taille: clamp(32px, 3.8vw, 52px); /* [P] */ --e2it-h2-graisse: 620; --e2it-h2-interligne: 1.04; /* [P] */ --e2it-h2-interlettrage: -.03em; /* [P] */ --e2it-bandeau-taille: 26px; --e2it-bandeau-graisse: 700; --e2it-bandeau-interligne: 1.25; /* [P] */ --e2it-h3-taille: clamp(20px, 1.8vw, 25px); --e2it-h3-graisse: 620; --e2it-h3-interligne: 1.15; /* [P] */ --e2it-h4-taille: 17px; /* [P] */ --e2it-h4-graisse: 600; --e2it-h4-interligne: 1.4; /* [P] */ --e2it-chapo-taille: 19px; /* [P] */ --e2it-chapo-graisse: 400; --e2it-chapo-interligne: 1.55; /* [P] */ --e2it-corps-taille: 17px; --e2it-corps-graisse: 400; --e2it-corps-interligne: 1.65; --e2it-bouton-taille: 16px; --e2it-bouton-graisse: 600; --e2it-lien-taille: 14px; --e2it-lien-graisse: 600; --e2it-lien-interligne: 1.5; /* [P] */ --e2it-etiquette-taille: 13px; --e2it-etiquette-graisse: 500; --e2it-etiquette-interligne: 1.5; /* [P] */ --e2it-mono-taille: 12px; --e2it-mono-graisse: 500; --e2it-mono-interligne: 1.4; /* [P] */ --e2it-mono-interlettrage: .12em; --e2it-astreinte-taille: 11px; --e2it-astreinte-graisse: 500; --e2it-chiffre-taille: 44px; --e2it-chiffre-graisse: 700; --e2it-chiffre-interlettrage: -.02em; /* [P] */ /* ---------------------------------------------------------------- 7. Rayons ---------------------------------------------------------------- */ --e2it-rayon-pilule: 999px; --e2it-rayon-carte: 14px; --e2it-rayon-champ: 4px; /* ---------------------------------------------------------------- 8. Espacements - base 4 ---------------------------------------------------------------- */ --e2it-espace-1: 4px; --e2it-espace-2: 8px; --e2it-espace-3: 12px; --e2it-espace-4: 16px; --e2it-espace-6: 24px; --e2it-espace-8: 32px; --e2it-espace-10: 40px; --e2it-espace-12: 48px; --e2it-espace-16: 64px; --e2it-espace-24: 96px; --e2it-espace-32: 128px; /* ---------------------------------------------------------------- 8 bis. Rythme des tetes de section Le surtitre mono est une etiquette collee au titre ; le chapo est une autre voix ; le contenu est un autre bloc. Trois ecarts, donc, et non un seul : une valeur unique ferait flotter le surtitre et collerait le contenu. Source unique du rythme pour tout le site. ---------------------------------------------------------------- */ --e2it-tete-surtitre: var(--e2it-espace-4); --e2it-tete-titre: var(--e2it-espace-6); --e2it-tete-bloc: var(--e2it-espace-12); /* ---------------------------------------------------------------- 8 ter. Echelle de lecture Distincte de l echelle d interface : --e2it-corps-taille vaut 15 px, calibree pour des libelles courts que l oeil balaie. Un article se lit en continu, et sous 17 px sur une colonne de 68 signes l oeil fatigue. Ces trois jetons ne servent qu au corps des articles. ---------------------------------------------------------------- */ --e2it-lecture-taille: 18px; --e2it-lecture-interligne: 1.72; --e2it-lecture-paragraphe: var(--e2it-espace-6); --e2it-lecture-texte: #2A3340; /* ---------------------------------------------------------------- 9. Gabarit ---------------------------------------------------------------- */ --e2it-largeur-contenu: 1240px; --e2it-section-padding: 96px; --e2it-hauteur-entete: 78px; --e2it-cible-tactile: 44px; --e2it-gouttiere: 24px; /* ---------------------------------------------------------------- 10. Mouvement Trois durees, deux courbes. Toute transition du site s y refere : une valeur modifiee ici change le rythme du site entier. ---------------------------------------------------------------- */ --e2it-duree-rapide: 120ms; /* etats de survol, focus */ --e2it-duree-moyenne: 220ms; /* panneaux, bascule d en-tete */ --e2it-duree-lente: 320ms; --e2it-duree-apparition: 520ms; --e2it-decalage-apparition: 80ms; /* tiroir mobile */ --e2it-courbe: cubic-bezier(.2, .6, .2, 1); /* entrees, deceleration */ --e2it-courbe-sortie: cubic-bezier(.4, 0, 1, 1); /* disparitions */ --e2it-eleve: 0 4px 14px rgba(7, 28, 62, .18); /* micro-elevation */ } /* Le padding de section se resserre sur mobile : 96px y sont disproportionnes. */ @media (max-width: 767px) { :root { --e2it-section-padding: 56px; /* [P] */ --e2it-gouttiere: 20px; /* [P] */ --e2it-tete-surtitre: var(--e2it-espace-3); --e2it-tete-titre: 20px; --e2it-tete-bloc: var(--e2it-espace-8); --e2it-lecture-taille: 17px; } } /* ------------------------------------------------------------------ Animations - series, filets, fondus Une seule source pour tout le site : modifier ici change le rythme de toutes les pages. ------------------------------------------------------------------ */ :root { --e2it-depart-serie: 240ms; --e2it-decalage-serie: 80ms; --e2it-amplitude: 12px; --e2it-amplitude-laterale: 16px; --e2it-duree-filet: 600ms; --e2it-duree-fondu: 700ms; } /* Largeurs de la police des titres (axe wdth d Instrument Sans). */ :root { --e2it-largeur-h1: 80%; --e2it-largeur-h2: 82%; --e2it-largeur-h3: 88%; }