/* ════════════════════════════════════════════════════════════════════ WEBMA — DESIGN TOKENS Source de verite unique du design system. Le site ET design-system.html lisent ce fichier ; la documentation recopie ce bloc via `node scripts/sync-tokens.js`. Regle : aucune couleur, taille ou ombre en dur ailleurs qu'ici. ════════════════════════════════════════════════════════════════════ */ :root{ /* ── Marque ─────────────────────────────── */ --brand-700:#254991; --brand-600:#3355FF; --brand-500:#5C77FF; --brand-400:#8599FF; --brand-300:#8BAFF5; --brand-200:#D8E4FC; --brand-100:#EBEEFF; --brand-050:#F2F2FF; --brand-border:#E1E2FC; --brand-alpha-20:rgba(51,85,255,.2); /* ── Encre (fonds sombres) ──────────────── */ --ink-900:#0B0C2B; --ink-800:#15163C; --ink-700:#373868; --ink-black:#18191B; --ink-border:#363536; /* ── Texte ──────────────────────────────── */ --text-primary:#0B0C2B; --text-secondary:#66677D; --text-tertiary:#707075; --text-muted:#9A9BAA; --text-faint:#8E90AE; --text-on-ink:#C3C4DA; --text-disabled:#A1A1A1; --text-on-dark:#FFFFFF; /* ── Surfaces ───────────────────────────── */ --surface:#FFFFFF; --surface-subtle:#FAFBFA; --surface-muted:#F7F8F7; --surface-chip:#F1F1F4; --surface-veil:rgba(255,255,255,.4); /* ── Bordures ───────────────────────────── */ --border:#EEEEEE; --border-lavender:#E8E6FA; --border-card:#EFEFF3; --border-neutral:#E8E8E8; --border-strong:#D8D8DF; /* ── Semantique ─── a completer : danger, warning */ --success:#6CD68C; /* ── Gris de composition (barres, squelettes, maquettes) */ --slate-100:#EFEFF3; --slate-200:#E4E7F2; --slate-300:#D8DCE8; --slate-400:#E4E5FF; /* ── Degrades ───────────────────────────── */ --gradient-button:linear-gradient(180deg,#5C77FF 0%,#3355FF 100%); --gradient-brand:linear-gradient(180deg,#3355FF 0%,#8599FF 100%); --gradient-ink:linear-gradient(180deg,#373868 0%,#15163C 100%); --gradient-wash:linear-gradient(180deg,#F2F2FF 0%,rgba(242,242,255,0) 100%); --gradient-card:linear-gradient(180deg,#FBFBFD 0%,#F4F4F8 100%); --gradient-card-alt:linear-gradient(180deg,#FFFFFF 0%,#F5F5F9 100%); --gradient-card-brand:linear-gradient(180deg,#FFFFFF 0%,#F2F2FF 100%); --gradient-cta:linear-gradient(180deg,#F2F2FF 0%,#FFFFFF 100%); /* Moitie WEBMA du comparatif : la lueur part du filet bleu */ --gradient-versus:linear-gradient(90deg,#EBEEFF 0%,#F7F7FD 55%,#FFFFFF 100%); /* Hachures des visuels en attente de contenu client */ --hatch:repeating-linear-gradient(135deg,#F7F8FA 0 12px,#EFEFF5 12px 24px); --hatch-ink:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 12px,rgba(255,255,255,.02) 12px 24px); /* Papier millimetre des cartes etapes */ --grid-paper:linear-gradient(rgba(21,22,60,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(21,22,60,.05) 1px,transparent 1px); --grid-mesh:26px; /* ── Typographie ────────────────────────── */ --font-display:"Geist",system-ui,-apple-system,sans-serif; --font-body:"Inter",system-ui,-apple-system,sans-serif; --font-mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --font-features:"blwf" on,"cv03" on,"cv04" on,"cv09" on,"cv11" on; /* Echelle fluide : les clamp() remplacent les paliers fixes, le CSS des composants n'a jamais a connaitre les points de rupture. */ --text-h1:clamp(40px,6vw,64px); /* titre d'accueil */ --text-h1-page:clamp(34px,5vw,60px); /* titre des pages interieures */ --text-h2:clamp(28px,4vw,48px); --text-h2-sm:clamp(28px,4vw,44px); --text-h3:24px; --text-h4:20px; --text-h5:18px; --text-h6:17px; --text-lg:18px; --text-md:16px; --text-sm:15px; --text-xs:14px; --text-2xs:13px; --text-prose-h2:clamp(26px,2.8vw,32px); /* titre de section d'un article */ --text-prose-h3:22px; /* son sous-titre */ --text-stat:30px; /* chiffre mis en avant dans une illustration */ --text-caption:10.5px; /* sa legende, en monospace */ --lh-h1:1.08; --lh-h2:1.14; --lh-h3:1.30; --lh-h4:1.40; --lh-lg:1.65; --lh-md:1.70; --lh-sm:1.60; --ls-h1:-.05em; --ls-h2:-.046em; --ls-h2-sm:-.04em; --ls-h3:-.012em; --ls-h4:-.012em; --ls-wide:-.02em; /* ── Espacement ─────────────────────────── */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-9:36px; --space-12:48px; --space-15:60px; --space-16:64px; --space-20:80px; --space-32:130px; /* ── Mise en page ───────────────────────── */ --container:1296px; --container-wide:1376px; --container-narrow:1080px; --container-text:1000px; --gutter:24px; --section-y:104px; --gap-card:20px; /* Mesures de lecture. L'unite ch vaut la largeur du zero, plus large que la lettre moyenne : en Inter 18 px, 1 ch = 11,3 px, et une ligne porte environ 1,3 fois plus de signes que de ch. */ --measure-prose:68ch; /* ~770 px : le recit d'une page projet */ /* Le corps d'un article reprend la largeur de l'ancien site, relevee sur son export : 1180 px de texte sous une fenetre de 1440 px, soit exactement sa barre de navigation. La notre fait la meme mesure, le texte s'aligne donc sur l'en-tete qui le surmonte. */ --measure-article:var(--nav-width); /* La page legale, elle, gardait une colonne etroite sur l'ancien site : 720 px, alignes a gauche, soit ~78 signes par ligne. Un texte de reference se parcourt, il ne se lit pas d'un trait. */ --measure-legal:720px; /* En-tete : mesures reprises du site precedent. Desktop 30 + 6 + 67 + 6 = 109 px ; mobile 20 + 6 + 54 + 6 = 86 px, hauteur sous laquelle s'ouvrait le panneau de menu. */ --nav-offset:36px; /* respiration au-dessus de la barre */ --nav-bar-min:67px; /* hauteur minimale de la barre */ --nav-bar-pad:6px; /* respiration interne haut/bas */ --nav-logo-h:52px; /* hauteur reservee au logo */ --nav-width:1180px; /* largeur maximale de la barre (92 % de la page) */ --nav-h:109px; /* total desktop */ /* Bandeau de realisations du hero : les captures (912x614 en desktop, 324x614 en mobile) sont posees sur une hauteur commune. Le meme petit ecart separe les deux versions d un meme site et deux realisations : le ruban reste continu, c est la legende qui identifie chaque projet. */ --showcase-h:clamp(260px,28vw,440px); --showcase-gap:12px; --showcase-space:12px; /* Bandeaux defilants : une vitesse en pixels par seconde, pas une duree. ui.js en tire la duree d apres la largeur mesuree de la piste : la vitesse ne depend ni de l ecran ni du chargement. */ --marquee-speed:32; /* logos clients */ --showcase-speed:55; /* realisations du hero, desktop comme mobile */ /* Integrations de l accueil : le site au centre d une grille de tuiles, les outils du client autour. */ --integration-card:96px; /* cote d une tuile */ --integration-logo:40px; /* logo pose dans la tuile (fichiers en 3x : 120 px) */ --integration-gap:8px; /* Apercus d articles de l accueil : les trois cartes empilees partagent la meme boite de vignette et le meme bout de carte, pour que les titres partent tous du meme bord. --digest-gap espace les trois colonnes et detache aussi le bout de carte de son filet. */ --digest-cover:clamp(180px,20vw,248px); --digest-aside:168px; --digest-thumb-h:clamp(150px,14vw,186px); --digest-gap:clamp(20px,2.6vw,36px); /* Logos clients du bandeau : les signatures completes (nom compris) tiennent sur une hauteur, l icone seule d AEM sur une autre, pour que toutes les marques pesent optiquement la meme chose. */ /* Cartes empilees de la section Services : elles se collent les unes sous les autres en laissant voir le haut des precedentes, qui retrecissent au passage. */ --stack-top:calc(var(--nav-h) + 32px); /* sous l en-tete flottant */ --stack-step:18px; /* decalage d une carte a la suivante */ --stack-gap:34vh; /* course de defilement entre deux cartes */ --stack-shrink:.08; /* retrecissement par carte encore a venir */ /* Pied de page qui se decouvre (effet repris du site Zenvelle) : il part --footer-lift plus haut, cache sous la page, et rejoint sa place pendant qu il entre dans l ecran. Zenvelle faisait 300 px sur un pied de page de 538 : la meme proportion donne 210 px sur nos 377. */ --footer-lift:210px; --logo-h:36px; /* signature complete (nom + mention) */ --logo-word:26px; /* signature d une seule ligne : lettres pleine boite */ --logo-icon:32px; /* embleme seul, pose a cote du nom ecrit */ --icon-sm:16px; /* icone qui accompagne le texte d un lien */ --icon-md:20px; /* picto pose dans une pastille (cartes contact) */ /* ── Rayons ─────────────────────────────── */ --radius-xs:6px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-card:20px; --radius-xl:24px; --radius-2xl:32px; --radius-full:9999px; --radius-thumb:14px; /* photos et vignettes (realisations, articles) */ /* ── Ombres ─────────────────────────────── */ --shadow-xs:0 1px 1px 0 rgba(0,0,0,.10); --shadow-sm:0 .6px .42px -1px rgba(0,0,0,.12), 0 2.29px 1.6px -2px rgba(0,0,0,.11), 0 10px 7px -3px rgba(0,0,0,.08); --shadow-md:0 .8px 2.07px -.75px rgba(0,0,0,.06), 0 2.41px 6.28px -1.5px rgba(0,0,0,.06), 0 6px 15.6px -2.25px rgba(0,0,0,.06); --shadow-lg:0 5px 12px rgba(0,0,0,.10), 0 22px 22px rgba(0,0,0,.09), 0 49px 29px rgba(0,0,0,.05); --shadow-header:0 1px 2px rgba(11,12,43,.04),0 12px 32px rgba(11,12,43,.08); --ring-card:0 0 0 1px #E8E6FA; --ring-focus:0 0 0 3px #5C77FF; } /* Seuls la gouttiere et le rythme vertical changent sur telephone : les tailles de texte sont deja fluides. */ @media (max-width:809px){ :root{ --gutter:16px; --section-y:72px; --nav-offset:24px; --nav-bar-min:54px; --nav-logo-h:42px; --nav-h:86px; --showcase-h:clamp(190px,34vw,280px); --showcase-gap:8px; --showcase-space:8px; --digest-thumb-h:150px; --footer-lift:140px; /* pied de page plus haut que l ecran */ } }