/* ========================================================================== tokens.css — variables globales du site LB Access Premiere feuille de la cascade : tokens > base > layout > header/footer > composants > page. Ne contient que des declarations de variables et les @font-face. Aucune regle de mise en forme. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Polices -------------------------------------------------------------------------- ⛔ NE PAS AUTO-HEBERGER CENTURY GOTHIC. Les metadonnees de cette fonte (Monotype, v2.35) portent "your use of this software is limited to your workstation" et aucune licence webfont : sa redistribution par un serveur web en est exclue. Elle ne figure dans --lba-font-base qu'en repli local, jamais en @font-face. Poppins (Indian Type Foundry) est sous SIL Open Font License 1.1 — redistribution commerciale autorisee, licence livree dans OFL.txt. Retenue apres comparaison metrique des candidats : c'est la plus proche en chasse (+3,6 % sur une phrase, contre -8,8 % pour Questrial, -10,8 % Didact Gothic, -12,6 % Jost) et la seule geometrique libre a disposer d'un vrai Bold 700 — indispensable ici, tous les titres du site sont en 700. Si une licence webfont Monotype est acquise, il suffit de reactiver Century Gothic en tete de --lba-font-base et --lba-font-bold. -------------------------------------------------------------------------- */ /* Poppins 400 — latin */ @font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Poppins 400 — latin etendu (oe, diacritiques rares) */ @font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-400-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Poppins 700 — latin */ @font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-700-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Poppins 700 — latin etendu */ @font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-700-latin-ext.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ------------------------------------------------------------------------ 2. Couleurs ------------------------------------------------------------------------ */ --white: #fff; --black: #000; --primary-color: #e30613; /* rouge LB Access */ --accent: #e30613; /* meme valeur, role distinct (liens, hover) */ --secondary: #111; /* fond du footer */ --heading: #0f172a; /* titres h1-h6 */ --text: #64748b; /* texte courant */ /* Gris de service */ --grey-light: #f5f5f5; /* fonds de section */ --grey-border: #e5e5e5; /* filets du menu principal */ --grey-footer: #b4b4b4; /* texte du footer */ --grey-copy: #666; /* barre de copyright */ --grey-dark: #070707; /* fond du mega-menu */ --error: #dc3232; /* messages de formulaire */ /* Couleurs composees (ombres, filets translucides) */ --shadow-header: 0 1px 44px #00000024; --shadow-menu: 0 6px 9px #00000024; --shadow-sticky: 0 2px 8px rgb(0 0 0 / 8%); --shadow-card: 0 5px 40px #00000029; --border-footer: 1px solid rgb(255 255 255 / 20%); /* ------------------------------------------------------------------------ 3. Typographie ------------------------------------------------------------------------ ⚠️ UNE SEULE famille declaree, la graisse etant portee par --lba-font-weight-*. Ne pas la scinder en deux familles ("… - Normal" / "… - Gras") : cela court-circuite la synthese de graisse du navigateur pour un rendu identique. ------------------------------------------------------------------------ */ --lba-font-base: "Poppins", "Century Gothic", "Questrial", "Futura", "Trebuchet MS", sans-serif; --lba-font-bold: var(--lba-font-base); --lba-font-weight-normal: 400; --lba-font-weight-bold: 700; /* Tailles — corps de texte */ --lba-text-size: 20px; --lba-text-line: 1.5em; /* Titres — valeurs desktop de reference (< 1920px, cf. paliers en fin de fichier) */ --lba-h1-size: 50px; --lba-h2-size: 50px; --lba-h3-size: 40px; --lba-h4-size: 35px; --lba-h5-size: 30px; --lba-h6-size: 28px; --lba-heading-line: 1.5em; /* Tailles de service */ --lba-size-menu: 16px; /* menu principal */ --lba-size-submenu: 12px; /* menus du footer (uppercase) */ --lba-size-footer: 16px; /* texte du footer */ --lba-size-footer-lead: 18px; /* .footer-text */ --lba-size-copyright: 13px; /* barre de copyright */ --lba-size-input: 18px; /* champs de formulaire (16px <1400) */ --lba-size-button: 16px; /* ------------------------------------------------------------------------ 4. Espacements, rayons, transitions ------------------------------------------------------------------------ */ --lba-gap: 20px; /* espacement inter-blocs */ --lba-radius: 3px; /* boutons */ --lba-radius-input: 2px; /* champs de saisie */ --lba-radius-card: 4px; /* blocs (.wrap_contact) */ --lba-transition: 400ms ease-in-out; /* mega-menu */ --lba-transition-fast: .3s ease; /* liens, burger */ /* ------------------------------------------------------------------------ 5. Mise en page ------------------------------------------------------------------------ --header-height : 97px au-dela de 1900px, 80px en dessous. La valeur de base est ici la plus courante (80px) ; le palier 1901+ la remonte a 97px. Voir layout.css pour les largeurs de .wrapper. ------------------------------------------------------------------------ */ --header-height: 80px; --lba-wrapper-pad: 10px; /* padding lateral de .wrapper */ } /* Au-dela de 1900px : header haut et titres a leur taille maximale. */ @media screen and (min-width: 1901px) { :root { --header-height: 97px; } } /* Tailles de titres au-dela de 1920px */ @media screen and (min-width: 1920px) { :root { --lba-h1-size: 58px; --lba-h2-size: 58px; --lba-h3-size: 50px; --lba-h4-size: 45px; --lba-h5-size: 40px; --lba-h6-size: 36px; } } /* 1200px */ @media screen and (max-width: 1200px) { :root { --lba-h1-size: 45px; --lba-h2-size: 45px; --lba-h3-size: 40px; --lba-h4-size: 35px; } } /* 1024px */ @media screen and (max-width: 1024px) { :root { --lba-h1-size: 40px; --lba-h2-size: 40px; --lba-h3-size: 35px; --lba-h4-size: 30px; --lba-h5-size: 28px; --lba-h6-size: 25px; } }