/* ========================================================================== tokens.css : European SRTP Executive Summit Toutes les valeurs de charte du projet. Rien d'autre ne doit definir une couleur, une taille de texte ou un espacement en dur. ========================================================================== */ :root { /* --------------------------------------------------------------------- COULEURS DE MARQUE Echantillonnees pixel par pixel dans banner_bg.png (600x241), sur les bandes sans texte. Ce ne sont pas des valeurs choisies : ce sont les valeurs reelles du visuel officiel. haut gauche #FF3D71 haut droite #FFAF00 bas gauche #FE6337 bas droite #FFCD00 texte titre #151C40 -> confirme le marine de charte #121D42 Structure : le canal rouge est bloque a ~255 partout ; seuls le vert (61->205) et le bleu (113->0) bougent. C'est une rotation de teinte a saturation maximale, ~337deg -> ~48deg, orientee a ~130deg. --------------------------------------------------------------------- */ --navy: #121D42; --navy-line: #26325C; /* Les quatre coins mesures de la banniere. */ --brand-rose: #FF3D71; /* haut gauche */ --brand-coral: #FE6337; /* bas gauche */ --brand-orange: #FF8700; /* milieu bas */ --brand-amber: #FFAF00; /* haut droite */ --brand-gold: #FFCD00; /* bas droite */ /* Le degrade de marque. N'APPARAIT QU'A DEUX ENDROITS dans toute la page : la bande hero et le bouton d'inscription. Partout ailleurs, aplats. Jamais de background-clip:text. Les stops intermediaires sont les valeurs relevees entre les coins : ils reproduisent la courbe reelle du visuel, qu'une simple interpolation entre deux extremites manquerait. */ --brand-gradient: linear-gradient(130deg, var(--brand-rose) 0%, #FF4763 14%, #FF735E 32%, #FF8A34 50%, #FF9D00 68%, var(--brand-amber) 84%, var(--brand-gold) 100%); /* Les disques translucides du visuel original. Premiere analyse erronee : je les avais pris pour un voile BLANC a 8 %. L'echantillonnage dit l'inverse : sur #FF8700, le canal vert DESCEND (135 -> 110) pendant que le bleu MONTE (0 -> 25). Un voile blanc ferait monter les deux. Ce sont donc des disques ROSE translucides, a environ 25 %, et non blancs a 8 % : c'est pourquoi ils etaient invisibles. Geometrie relevee en cartographiant le canal bleu (deux plateaux nets, B=25 et B=53, donc deux disques) sur l'image 600x241 : grand disque centre (426, 171) rayon ~105 -> 71 % / 71 %, r 44 % de la hauteur petit disque centre (315, 100) rayon ~75 -> 52 % / 41 %, r 31 % de la hauteur Ils sont dessines en pseudo-elements et non en radial-gradient : un pseudo-element avec aspect-ratio 1 reste un vrai cercle quelle que soit la largeur du hero, alors qu'un degrade radial en pourcentages s'etire. --------------------------------------------------------------------- */ --blob-tint: 255, 61, 113; /* le rose de la banniere, en composantes */ /* --------------------------------------------------------------------- BOUTON D'INSCRIPTION Les emails utilisent #FF8A00 -> #B34700 avec du texte blanc : contraste 2,4:1 sur le stop clair, tres en dessous du seuil WCAG. Version corrigee : depart assombri a #E07500 (3,13:1). Le degrade est monotone en luminance, donc 3,13:1 est bien le pire cas de toute la surface. Valide AA "grand texte", ce qui impose un libelle >= 18,66px : voir --fs-cta ci-dessous. Visuellement quasi indiscernable de l'email. --------------------------------------------------------------------- */ --cta-gradient: linear-gradient(135deg, #E07500 0%, #B34700 100%); --cta-gradient-hover: linear-gradient(135deg, #C96800 0%, #9C3E00 100%); /* Reflet clair qui balaie le bouton par intermittence. */ --cta-sheen: linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.30) 50%, rgba(255,255,255,0) 62%); --cta-shadow: 0 8px 20px rgba(179, 71, 0, .28); --cta-shadow-hover: 0 12px 26px rgba(179, 71, 0, .38); /* --------------------------------------------------------------------- SURFACES ET TEXTE Le creme #F7F5F0 vient des supports existants (invitation, badge). NOTE ANTI-SLOP : "creme + serif d'affichage + vert sauge" est le tell visuel type de 2026. On garde le creme parce qu'il est a la marque, mais aucune fonte serif d'affichage n'est utilisee et l'accent reste le rose/ambre du visuel. La combinaison n'est donc pas la combinaison generique. --------------------------------------------------------------------- */ --cream: #F7F5F0; --paper: #FFFFFF; --line: #DCD6C9; --line-soft: #E7E2D8; /* filet discret, pour les listes */ --line-strong: #C9C1B0; /* contour de pastille */ --ink: #121D42; --muted: #5C6B80; --accent: #FF9E2C; /* accent sur fond marine (issu des emails) */ --burnt: #B34700; /* accent sur fond clair (issu des emails) */ /* --------------------------------------------------------------------- TYPOGRAPHIE : UNE SEULE FAMILLE La page utilisait trois polices, dont deux polices SYSTEME : Arial et Courier New. Aucune des deux n'est un choix typographique, ce sont des valeurs par defaut : c'est precisement ce qui donnait l'impression de page generique. La banniere officielle, elle, n'utilise que DEUX coupes : une condensee grasse pour les titres, une normale pour la tagline et le bloc lieu. Archivo est une police VARIABLE a deux axes (graisse 100-900, largeur 62-125 %) : une seule famille reproduit donc les deux coupes, et couvre en plus le corps de texte et les libelles. Comparaison menee contre la banniere (Oswald, Anton, Barlow Condensed, Saira, Fjalla, Archivo a plusieurs largeurs) : Archivo a largeur 70 % / graisse 800 colle mieux au titre qu'Oswald, dont les formes sont plus etroites et plus rondes. Les axes se pilotent avec les proprietes CSS standard font-weight et font-stretch : pas besoin de font-variation-settings. titres hero ......... font-stretch 70 % font-weight 800 titres de section ... font-stretch 82 % font-weight 700 accroches ........... font-stretch 80 % font-weight 600 corps ............... font-stretch 100 % font-weight 400 libelles techniques . font-stretch 100 % font-weight 600 + capitales + interlettrage + chiffres tabulaires Les chiffres tabulaires (font-variant-numeric: tabular-nums) alignent verticalement les horaires du programme : c'est la fonction que Courier New assurait par sa chasse fixe. La fonction est conservee, la police systeme disparait. --------------------------------------------------------------------- */ --font-sans: 'Archivo', 'Archivo Narrow', 'Arial Narrow', Arial, sans-serif; /* Largeurs de reference, pour que les valeurs ne soient pas dispersees. */ --wd-hero: 70%; --wd-title: 82%; --wd-lead: 80%; --wd-normal: 100%; /* Echelle de type, ratio 1,25 ancre sur 16px. Aucune taille hors echelle. */ --fs-100: 0.8rem; /* 12.8px */ --fs-200: 1rem; /* 16px */ --fs-300: 1.25rem; /* 20px */ --fs-400: 1.5625rem; /* 25px */ --fs-500: 1.9531rem; /* 31.25px */ --fs-600: 2.4414rem; /* 39px */ /* Libelle du CTA : 20px gras. Le seuil WCAG "grand texte" en gras est 14pt = 18,66px ; 18px ne qualifierait pas. */ --fs-cta: 1.25rem; --lh-tight: 1.05; --lh-snug: 1.25; --lh-body: 1.65; /* --------------------------------------------------------------------- ESPACEMENT : une seule echelle, aucune valeur arbitraire. --------------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; /* --------------------------------------------------------------------- RAYONS : echelle a 3 crans, chaque cran justifie par un fichier existant du dossier. Un rayon unique reutilise partout est un tell d'IA ; ici chaque valeur a une raison d'etre. 0 surfaces de donnees -> champs carres de Registration form v4 4px cartes et photos 999px CTA et tags monospace uniquement -> pass-tag de Badge.html --------------------------------------------------------------------- */ --radius-data: 0; --radius-card: 4px; --radius-pill: 999px; /* --------------------------------------------------------------------- DIVERS --------------------------------------------------------------------- */ --shell-max: 1120px; --utilitybar-h: 52px; --focus-ring: 2px solid var(--accent); --focus-offset: 3px; }