/* ========================================================================== Atout Vertical — Jetons de design Direction : « vertical éditorial ». Le nom de l'entreprise est le système : rails verticaux, repères numérotés, cadrages en portrait, typo condensée. Contrastes calculés — voir _travail/03-DESIGN-SYSTEM.md ========================================================================== */ :root { /* --- Champ : crème chaud plutôt que blanc pur ------------------------ */ --creme: #FBF9F6; /* fond par défaut */ --creme-2: #F3EFE9; /* section alternée */ --papier: #FFFFFF; /* cartes posées sur le crème */ /* --- Encre ----------------------------------------------------------- */ --encre: #14110F; /* texte courant — 17,89:1 sur crème, AAA */ --encre-70: #4A443F; /* texte secondaire — 9,13:1, AAA */ --bordure: #8A8078; /* contour de champ — 3,67:1, seuil WCAG tenu */ --filet: #DDD6CC; /* trait décoratif uniquement, jamais porteur */ /* --- Rouge : identité ET structure ------------------------------------ */ --rouge: #F40000; /* rouge du logo : aplats, rails, grands titres */ --rouge-action: #E80000; /* liens et boutons — 4,51:1 sur crème, AA */ --rouge-hover: #A00000; /* survol — 8,42:1 */ /* --- Nuit ------------------------------------------------------------- */ --nuit: #0E0C0B; /* aplats sombres, pied de page */ --nuit-80: #211D1A; /* --- Polices ---------------------------------------------------------- */ --titres: 'Big Shoulders Display', 'Archivo Narrow', 'Haettenschweiler', 'Arial Narrow', sans-serif; --texte: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; /* --- Échelle typographique ------------------------------------------- Big Shoulders est très condensée : elle supporte des tailles bien supérieures à une grotesque de largeur normale sans déborder. */ --fs-geant : clamp(3.5rem, 1.947rem + 6.630vw, 9rem); /* 56 -> 144 px */ --fs-display : clamp(2.75rem, 1.720rem + 4.398vw, 6.5rem); /* 44 -> 104 px */ --fs-h1 : clamp(2.375rem, 1.677rem + 2.983vw, 5rem); /* 38 -> 80 px */ --fs-h2 : clamp(1.875rem, 1.418rem + 1.950vw, 3.5rem); /* 30 -> 56 px */ --fs-h3 : clamp(1.375rem, 1.168rem + 0.884vw, 2.125rem); /* 22 -> 34 px */ --fs-h4 : clamp(1.125rem, 1.021rem + 0.442vw, 1.5rem); /* 18 -> 24 px */ --fs-lead : clamp(1.188rem, 1.084rem + 0.442vw, 1.563rem); /* 19 -> 25 px */ --fs-body : clamp(1.062rem, 1.011rem + 0.221vw, 1.188rem); /* 17 -> 19 px */ --fs-small : clamp(0.938rem, 0.912rem + 0.110vw, 1rem); /* 15 -> 16 px */ --fs-micro : clamp(0.75rem, 0.733rem + 0.074vw, 0.813rem); /* 12 -> 13 px */ /* Interlignage des grands titres : 0,95 et non 0,86. En français, les capitales accentuées (É, È, À) débordent au-dessus de la hauteur de capitale ; en dessous de 0,95 l'accent percute la ligne précédente. */ --lh-geant : 0.95; --lh-titre : 1; --lh-inter : 1.2; --lh-texte : 1.65; --ls-titre : -0.015em; --ls-oeil : 0.22em; /* surtitres en capitales très espacées */ /* --- Espacement : base 4px -------------------------------------------- */ --sp-1: 0.25rem; --sp-6: 2rem; --sp-2: 0.5rem; --sp-7: 3rem; --sp-3: 0.75rem; --sp-8: 4rem; --sp-4: 1rem; --sp-9: 6rem; --sp-5: 1.5rem; --sp-10: 8rem; --sp-11: 11rem; --sp-12: 15rem; /* --- Mise en page ------------------------------------------------------ */ --conteneur: 1320px; --conteneur-etroit: 680px; --gouttiere: var(--sp-5); --rail: 4px; /* rail vertical rouge, extrémités arrondies */ /* --- Formes ------------------------------------------------------------- Rayons généreux et concentriques : un cadre extérieur de 20px contenant un noyau de 14px donne des courbes parallèles, jamais deux arcs qui se contredisent. C'est ce qui distingue un objet dessiné d'un rectangle aux coins limés. */ --rayon: 10px; /* boutons, champs */ --rayon-media: 14px; /* noyau intérieur d'un cadre */ --rayon-carte: 20px; /* coque extérieure */ --rayon-plein: 999px; /* pastilles */ --cible-tactile: 48px; /* Hauteur de l'en-tête, mesurée et non estimée : le logo change de taille à 461 et 900px. L'en-tête étant sorti du flux, c'est cette valeur qui compense son emprise sur le contenu. Contrôlée par _travail/scripts/verif-entete.py — toute retouche de la taille du logo impose de la remesurer. C'est déjà arrivé deux fois. */ --entete-h: 92px; /* --- Profondeur --------------------------------------------------------- Ombres larges, très diffuses et très peu opaques, teintées de la couleur du fond plutôt que du noir pur : les objets flottent au lieu d'être détourés au feutre. */ --ombre-douce: 0 1px 2px rgba(40, 28, 20, .04), 0 6px 16px rgba(40, 28, 20, .05), 0 18px 40px rgba(40, 28, 20, .045); --ombre-relief: 0 2px 4px rgba(40, 28, 20, .05), 0 12px 28px rgba(40, 28, 20, .08), 0 32px 64px rgba(40, 28, 20, .07); --ombre-nuit: 0 8px 24px rgba(0, 0, 0, .35), 0 28px 60px rgba(0, 0, 0, .28); /* --- Mouvement : masse et ressort, jamais linéaire --------------------- */ --sortie: cubic-bezier(0.32, 0.72, 0, 1); --entree: cubic-bezier(0.22, 1, 0.36, 1); --t-court: .28s; --t-moyen: .55s; --t-long: .9s; /* --- Apparition au défilement ----------------------------------------- Deux jetons à part, et pas les mêmes que pour les interactions. `--entree` est une courbe très frontale : elle parcourt 90 % du chemin dans le premier tiers du temps. Excellente pour un survol, mauvaise pour une apparition qu'on veut voir passer — le mouvement paraît terminé avant de l'être. `--reveler-courbe` répartit la course, `--t-reveler` l'étale. Le geste devient lisible au rythme du défilement. */ --reveler-courbe: cubic-bezier(0.22, 0.61, 0.36, 1); --t-reveler: 1.15s; --t-reveler-long: 1.35s; } @media (max-width: 379px) { :root { --gouttiere: var(--sp-4); } } @media (min-width: 768px) { :root { --gouttiere: var(--sp-7); } } @media (min-width: 1200px){ :root { --gouttiere: var(--sp-8); } } @media (min-width: 461px) { :root { --entete-h: 100px; } } @media (min-width: 900px) { :root { --entete-h: 120px; } }