/* ============================================================ NEYBRAS MAGAZINE — JETONS DE CONCEPTION ------------------------------------------------------------ La palette est celle du site — Bleu Pétrole #0E3D52 et Champagne #B8965A — conservée sur décision de la direction de la publication. Elle ne change pas. Pour mémoire, et pour que personne ne la redécouvre : le relevé du PDF du Vol. 001 donne d'autres valeurs — bleu #2E4A7A sur 21 des 24 pages, #0C2038 en couverture, or #FCD850 en couverture seulement. Le print et le web ne partagent donc pas leurs bleus. Écart connu, assumé. Aucune valeur en dur ailleurs. Si une couleur, un corps ou un espacement manque ici, on l'ajoute ici — on ne l'écrit pas dans une feuille de page. ============================================================ */ :root { /* ---------- COULEURS ---------------------------------------- Valeurs canoniques du site, verrouillées depuis juillet 2026 par assets/site-header.css : navy #0E3D52 « Bleu Pétrole », or #B8965A « Champagne ». Les nuances proviennent du :root historique des pages, pas d'une invention. ------------------------------------------------------------ */ --nbr-bleu: #0E3D52; /* bleu de marque — Bleu Pétrole */ --nbr-bleu-fonce: #0a3044; /* survol, états actifs */ --nbr-bleu-clair: #145068; /* aplats secondaires */ --nbr-nuit: #0a3044; /* fond profond : hero, pied de page */ --nbr-nuit-2: #114060; /* second ton des fonds profonds */ --nbr-ardoise: #145068; /* teinte secondaire */ --nbr-or: #B8965A; /* accent — Champagne */ --nbr-or-clair: #CCA96E; /* or en TEXTE sur le bleu de marque */ --nbr-or-fonce: #806534; /* or en TEXTE sur fond clair */ --nbr-encre: #3d5265; /* texte courant */ --nbr-gris: #5e7080; /* texte secondaire, légendes */ --nbr-filet: #e8eaec; /* filets, séparateurs */ --nbr-papier: #FAFAF9; /* fond de page */ --nbr-blanc: #FFFFFF; --nbr-creme: #f4efe6; /* fond d'encadré sur page claire */ --nbr-creme-2: #ece5d8; /* second beige */ /* Voiles, dérivés des teintes ci-dessus. Jamais d'autre alpha. */ --nbr-bleu-voile: rgba(14, 61, 82, .07); --nbr-bleu-bord: rgba(14, 61, 82, .20); --nbr-or-voile: rgba(184, 150, 90, .10); --nbr-or-bord: rgba(184, 150, 90, .32); --nbr-nuit-voile: rgba(10, 48, 68, .60); /* CONTRASTE — vérifié sur la page rendue, à ne pas contourner #0E3D52 sur #FAFAF9 ...... 11,1:1 AA + AAA #3d5265 sur #FAFAF9 ....... 7,8:1 AA + AAA #5e7080 sur #FAFAF9 ....... 4,9:1 AA, mais de justesse : sur la crème #f4efe6 il tombe à 4,5:1 et n'a plus de marge. Dans un encadré crème, le texte secondaire prend --nbr-encre. blanc sur #0E3D52 ....... 11,6:1 AA + AAA blanc sur #0a3044 ....... 13,8:1 AA + AAA #B8965A sur blanc ......... 2,8:1 ÉCHOUE — décor seulement : filets, aplats, gros corps. Pour de l'or en TEXTE sur fond clair : --nbr-or-fonce. #B8965A sur #0E3D52 ....... 4,2:1 ÉCHOUE de peu — sur le bleu de marque, l'or en texte doit être --nbr-or-clair (#CCA96E, 5,2:1). L'or plein ne convient que sur le fond nuit #0a3044 (5,0:1). ------------------------------------------------------------ */ /* ---------- TYPOGRAPHIE ------------------------------------- Deux familles, pas trois (le Vol. 001 en compte vingt-deux, résidu de gabarits : ce n'est pas un système à reproduire). Titres : Playfair Display, serif à fort contraste, en écho au logotype de couverture, qui est une didone. Déjà chargée par le site — c'est Cormorant Garamond qui sort. Texte : Inter. Le numéro compose en Poppins 13 pt ; Poppins est une géométrique, fatigante en lecture longue sur écran. Écart assumé, signalé à la direction de la publication. ------------------------------------------------------------ */ --nbr-titre: 'Playfair Display', Georgia, 'Times New Roman', serif; --nbr-texte: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Échelle de tierce majeure (×1,25) sur une base de 17 px. Les trois plus grands corps sont fluides : ils se posent entre le mobile et le grand écran sans palier. */ --t-2xs: 0.706rem; /* 12 px — mentions légales, folios */ --t-xs: 0.824rem; /* 14 px — étiquettes, méta */ --t-sm: 0.941rem; /* 16 px — texte secondaire */ --t-base: 1rem; /* 17 px — texte courant */ --t-md: 1.176rem; /* 20 px — chapô */ --t-lg: 1.471rem; /* 25 px — titre de bloc */ --t-xl: clamp(1.647rem, 1.4rem + 1.2vw, 1.824rem); /* 28-31 px */ --t-2xl: clamp(1.941rem, 1.5rem + 2.2vw, 2.294rem); /* 33-39 px */ --t-3xl: clamp(2.294rem, 1.6rem + 3.4vw, 2.882rem); /* 39-49 px */ --nbr-base-px: 17px; /* posé sur */ --lh-serre: 1.15; /* grands titres */ --lh-titre: 1.25; /* titres de bloc */ --lh-texte: 1.65; /* lecture longue */ --lh-lache: 1.8; /* encadrés aérés */ --ls-titre: -0.015em; --ls-texte: 0; --ls-caps: 0.14em; /* capitales espacées : étiquettes de rubrique */ --poids-normal: 400; --poids-moyen: 500; --poids-gras: 700; --poids-noir: 900; /* réservé aux titres Playfair de une */ --mesure: 68ch; /* largeur de lecture confortable */ /* ---------- ESPACEMENTS ------------------------------------- Base 4 px. Le print respire : les valeurs hautes servent entre blocs, pas seulement à l'intérieur. */ --e-1: 0.235rem; /* 4 px */ --e-2: 0.471rem; /* 8 px */ --e-3: 0.706rem; /* 12 px */ --e-4: 0.941rem; /* 16 px */ --e-5: 1.412rem; /* 24 px */ --e-6: 1.882rem; /* 32 px */ --e-7: 2.824rem; /* 48 px */ --e-8: 3.765rem; /* 64 px */ --e-9: 5.647rem; /* 96 px */ --e-10: 7.529rem; /* 128 px */ --gouttiere: var(--e-6); --largeur-max: 1180px; /* ---------- RAYONS, FILETS, MOUVEMENT ----------------------- Le numéro n'a pas un seul angle arrondi. On garde donc l'angle vif par défaut, et un rayon minime là où une surface cliquable a besoin d'être détourée. Pas de dégradé, pas d'ombre portée marquée, pas d'animation décorative : la seule ombre admise lève une carte au survol. */ --r-0: 0; --r-1: 2px; --r-2: 3px; --filet: 1px solid var(--nbr-filet); --filet-bleu: 1px solid var(--nbr-bleu-bord); --duree: .18s; --courbe: cubic-bezier(.4, 0, .2, 1); --transition: var(--duree) var(--courbe); --ombre-carte: 0 1px 3px rgba(12, 32, 56, .07); --ombre-levee: 0 6px 20px rgba(12, 32, 56, .11); /* Anneau de focus : visible sur fond clair comme sur fond sombre. */ --focus: 2px solid var(--nbr-or); --focus-decalage: 2px; } /* Le mouvement est une préférence, pas un acquis. */ @media (prefers-reduced-motion: reduce) { :root { --duree: 0s; } }