/* ========================================================================== GROUPE IMPEC — tokens-v5.css -------------------------------------------------------------------------- Jetons de design de la V5. Deux niveaux, à utiliser dans cet ordre : 1. PRIMITIVES — la palette brute. Le nom décrit la couleur telle qu'elle est. On n'y touche que pour changer l'identité de marque. 2. RÔLES — l'usage. Le nom décrit à quoi ça sert. C'est ce qu'on écrit dans styles-v5.css ; on n'appelle jamais une primitive directement pour une couleur de texte ou de fond. Historique du renommage (les anciens noms mentaient : « --or » était un bleu pâle, « --or-clair » un bleu marine, « --indigo », « --encre » et « --nuit » avaient tous la même valeur) : --indigo, --encre, --nuit, --or-clair → --marine --or → --bleu-pale (rôle : --accent) --blanc-verre → --bleu-brume (rôle : --fond-alterne) --blanc → --creme (rôle : --fond-page) --filet-clair-peche → --peche (rôle : --accent-chaud) --filet-clair → --gris-perle (rôle : --filet) --filet-fonce → --filet-inverse --rouge-requis → --rouge --indigo-clair, --indigo-fonce → supprimés (violets de la V1) --police-hero → --police-affiche --taille-display → --taille-hero --taille-geante → --taille-slogan --rayon-rond → --rayon-pilule --rayon-m → --rayon-media ========================================================================== */ :root { /* ======================================================================= 1. PRIMITIVES — la palette réelle ======================================================================= */ --marine: #0b2535; /* couleur de marque : texte et fonds sombres */ --bleu-pale: #b9d9e8; /* accent principal : boutons, éléments actifs */ --bleu-brume: #e7f3f8; /* fond des sections alternées */ --creme: #fbfaf6; /* fond de page */ --peche: #f1d8ca; /* accent chaud : filets, pastilles, survols */ --ardoise: #5a5e6b; /* gris de texte secondaire */ --gris-perle: #cad2d7; /* traits et bordures sur fond clair */ --rouge: #b3261e; /* erreurs de formulaire */ /* Canaux de --bleu-pale, pour composer des halos en rgba() */ --bleu-pale-rvb: 185, 217, 232; /* ======================================================================= 2. RÔLES — ce qu'on utilise dans les styles ======================================================================= */ /* ----- Fonds ----------------------------------------------------------- */ --fond-page: var(--creme); --fond-alterne: var(--bleu-brume); --fond-sombre: var(--marine); --fond-carte: var(--creme); /* OPAQUE, et c'est un correctif. La valeur d'origine était rgba(255, 255, 255, 0.9) : à 10 % de transparence, l'en-tête laissait voir ce qui passait dessous. En haut de page il n'y a rien derrière lui que le fond, d'où une bande franchement blanche ; dès qu'on défilait, l'image du hero prenait sa place et la bande semblait disparaître. C'est ce va-et-vient que Patrik voyait. Opaque, l'en-tête reste identique du haut jusqu'en bas. */ --fond-entete: #ffffff; /* ----- Texte ----------------------------------------------------------- */ --texte: var(--marine); /* sur fond clair */ --texte-doux: var(--ardoise); --texte-inverse: rgba(255, 255, 255, 0.92); /* sur fond sombre */ --texte-inverse-doux: rgba(255, 255, 255, 0.66); --texte-sur-accent: var(--marine); /* sur un aplat --accent */ --texte-sur-accent-doux: rgba(11, 37, 53, 0.75); /* --ardoise y passe sous 4,5:1 */ /* ----- Accents --------------------------------------------------------- */ --accent: var(--bleu-pale); /* appels à l'action, états actifs */ --accent-chaud: var(--peche); /* filets décoratifs, pastilles, survols */ /* ----- Traits ---------------------------------------------------------- */ --filet: var(--gris-perle); /* sur fond clair */ --filet-inverse: rgba(255, 255, 255, 0.18); /* sur fond sombre */ /* ======================================================================= 3. TYPOGRAPHIE ======================================================================= */ --police-affiche: "Bebas Neue", Impact, "Arial Narrow", sans-serif; /* Arimo, depuis le 6 août 2026 : équivalent métrique libre d'Helvetica/ Arial, chargée par impec_assets_habillage() (chargement.php). Repli inchangé si jamais elle manquait à se charger. */ --police-titre: "Arimo", "Helvetica Neue", Arial, sans-serif; --police-corps: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --police-detail: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --police-bouton: var(--police-affiche); --police-chiffres: "Syne", "Helvetica Neue", Arial, sans-serif; /* Échelle typographique fluide */ --taille-hero: clamp(6rem, 10vw, 10rem); /* titre du hero */ /* Plancher à 2,75rem et non 3,5rem : à 56 px, « L'IMPECCABLE, » mesurait 390 px et débordait d'un écran de 375. */ --taille-slogan: clamp(2.75rem, 8vw, 8.5rem); /* slogan après le hero */ --taille-h2: clamp(2.5rem, 5vw, 4.5rem); /* titres de section — UNIFORME */ --taille-h3: clamp(1.5rem, 2.2vw, 1.95rem); /* sous-titres — UNIFORME */ --taille-liste: clamp(1.4rem, 3vw, 2.4rem); /* grandes listes éditoriales */ --taille-corps: 1.0625rem; --taille-corps-grand: clamp(1.1rem, 1.6vw, 1.375rem); --taille-petite: 0.9375rem; --taille-label: 0.75rem; --graisse-titre: 700; --interligne-titre: 0.96; --interligne-corps: 1.6; --tracking-label: 0.12em; /* Titre de bandeau (carrières) : sous les titres de section, sans être un sous-titre — le bandeau reste un temps fort, mais il ne rivalise plus. */ --taille-bandeau: clamp(2.1rem, 4vw, 3.6rem); /* ======================================================================= 3b. BOUTONS — trois tailles, plus aucune valeur posée à la main ======================================================================= */ --bouton-s-texte: 1rem; --bouton-s-padding: 0.65rem 1.5rem; --bouton-m-texte: 1.15rem; /* défaut : en-tête, formulaire */ --bouton-m-padding: 0.85rem 2rem; --bouton-l-texte: 1.45rem; /* temps forts : hero, carrières */ --bouton-l-padding: 1.15rem 2.75rem; /* ======================================================================= 4. ESPACEMENTS ======================================================================= */ --espace-xs: 0.5rem; --espace-s: 1rem; --espace-m: 1.5rem; --espace-l: 2.5rem; --espace-xl: 4rem; /* Respiration entre les sections. Doit rester nettement plus grande que --taille-h2 (sinon le titre est aussi haut que le vide qui le précède, et la page « crie »). Vise un rapport d'environ 1,6. Toutes les autres respirations verticales de la page se calculent à partir de celle-ci — on ne pose plus de valeur isolée. */ --espace-section: clamp(4.5rem, 8vw, 8rem); --espace-sous-section: calc(var(--espace-section) * 0.4); /* blocs soudés */ --espace-moment: calc(var(--espace-section) * 1.3); /* slogan, temps fort */ --espace-bandeau: calc(var(--espace-section) * 0.6); /* carrières */ --gouttiere: clamp(1.25rem, 5vw, 4rem); --largeur-max: 1480px; /* ======================================================================= 5. RAYONS -------------------------------------------------------------------- Une seule famille, du plus petit au plus grand, pour que tout se marie. Les deux plus grands sont fluides : généreux sur grand écran, plus serrés sur mobile où un gros rayon mange le contenu. Le bouton, lui, reste toujours parfaitement rond. ======================================================================= */ --rayon-xs: 8px; /* étiquettes de fichiers, lien d'évitement */ --rayon-s: 14px; /* zone de dépôt, petits blocs */ --rayon-media: clamp(16px, 1.6vw, 22px); /* photos, galeries */ --rayon-carte: clamp(20px, 2.2vw, 30px); /* cartes, boîte du formulaire */ --rayon-pilule: 999px; /* boutons : toujours parfaitement ronds */ /* ----- Cartes : bordure et ombres --------------------------------------- */ --bordure-carte: 1px solid var(--filet); --ombre-carte: 0 18px 40px -24px rgba(11, 37, 53, 0.35); --ombre-carte-survol: 0 26px 60px -28px rgba(11, 37, 53, 0.5); /* ======================================================================= 6. MOUVEMENT ======================================================================= */ /* La courbe maison, extraite pour être réutilisable seule : les animations en ont besoin sans la durée, contrairement aux transitions. Décélérante — départ franc, longue traîne — d'où son intérêt pour les disparitions, qui s'éteignent au lieu de se couper. */ --courbe: cubic-bezier(0.2, 0.6, 0.2, 1); /* Courbe des disparitions. Volontairement très proche de la droite : les points de contrôle se tiennent près de la diagonale, ce qui donne un dégradé régulier tout en arrondissant les deux extrémités — un fondu ne doit ni démarrer ni s'arrêter d'un coup sec. Ne pas l'arrondir davantage : à (0.4, 0, 0.6, 1) on retombe sur un ease-in-out, qui retient puis lâche d'un coup au milieu. C'est précisément ce qui donnait un effet brutal. */ --sortie: cubic-bezier(0.3, 0.15, 0.7, 0.85); --transition: 220ms var(--courbe); --transition-lent: 420ms var(--courbe); /* ======================================================================= 7. EN-TÊTE ET COUCHES ======================================================================= */ --hauteur-entete: 5rem; --z-entete: 100; --z-menu-mobile: 200; }