/* ============================================================================ VENTILO.IO - COUCHE 1/4 : TOKENS ---------------------------------------------------------------------------- Source UNIQUE des valeurs de design du site vitrine. Aucune autre feuille, aucun attribut style="" n'a le droit d'écrire une couleur, un rayon, une ombre, une durée ou une taille de texte en dur : tout passe par un token défini ici. Ordre de chargement (imposé, cf. partials/header.php) : 1. tokens.css les valeurs <- ce fichier 2. base.css HTML nu + typo + a11y 3. components.css le design system 4. pages.css les compositions propres à une page Convention de nommage : --v-* token de design (miroir du thème MatDash de l'app, LightTheme.js) .vs-* classe du site (vs = ventilo site). Jamais de classe sans préfixe : une classe nue entrerait en collision avec Bootstrap. ========================================================================== */ :root { /* ── 1. MARQUE ──────────────────────────────────────────────────────────── Le violet est le SEUL accent du site. Toute autre couleur est un état (succès, alerte, erreur, info) ou une décoration de pastille, jamais un deuxième accent de marque. */ --v-primary: #4e426a; --v-primary-hover: #413758; --v-primary-active: #372e4b; --v-secondary: #140c2b; /* nuit : titres + fond du pied de page */ /* Rose de marque. Deux valeurs, deux usages, à ne jamais intervertir : --v-pink décor et grands aplats (icône, fond, filet). 2,77:1, donc INTERDIT en texte courant. --v-pink-ink la même intention en texte lisible : 4,86:1 sur blanc, 4,52:1 sur --v-bg. C'est celle des liens et des mentions. */ --v-pink: #ff6692; --v-pink-ink: #d6246b; /* ── 2. ÉTATS ───────────────────────────────────────────────────────────── -ink = déclinaison lisible en petit texte (>= 4,5:1 sur son propre fond). -bg = aplat de fond de la pastille correspondante. */ --v-info: #46caeb; --v-info-ink: #107a94; --v-info-bg: #ecfafd; --v-success: #36c76c; --v-success-ink: #238045; --v-success-bg: #ebf9f0; --v-warning: #ffae1f; --v-warning-ink: #9e6500; --v-warning-bg: #fff7e9; --v-error: #ff6692; --v-error-ink: #d6246b; --v-error-bg: #fff0f4; --v-primary-bg: #edecf0; /* aplat violet des pastilles */ /* Palette du CHEMIN du parcours (user, 04/09/2026). Quatre pastels, un par acte : ils ne portent aucune information - l'ordre des etapes est deja dit par la frise et par les textes - ils marquent seulement qu'on a change de temps. C'est la seule entorse a la regle « le violet est le seul accent », et elle vaut UNIQUEMENT pour ce trait decoratif. Assez clairs pour rester un fond, jamais utilisables en texte. */ --v-trait-1: #c2e6ff; /* bleu - Financez */ --v-trait-2: #ffc2fd; /* rose - Communiquez */ --v-trait-3: #c2ffc3; /* vert - Rassemblez */ --v-trait-4: #ffc2c2; /* rouge - Federez */ /* OR. Decoratif lui aussi, et volontairement distinct de --v-warning : cet ambre-la signale un etat, celui-ci ne fait que briller. Les deux ne doivent pas bouger ensemble. Un seul emploi : l'etoile de l'entree « Vie etudiante » dans l'en-tete. */ --v-gold: #f2b02e; /* l'or qui brille : etoile, fin de degrade */ --v-gold-bg: #fdf2dd; /* aplat de l'etiquette doree, comme les -bg d'etat */ --v-gold-ink: #8f6110; /* le meme, assombri jusqu'a etre LISIBLE en texte sur blanc (4,9:1) - meme logique que pink / pink-ink : une teinte pour l'aplat, une pour le texte, et on ne les intervertit jamais. */ /* BLEU CIEL (user, 13/09/2026). Decoratif, un seul emploi : l'autocollant « 5 minutes » du hero de /etudiant/app/, dont le fond est un ciel. Meme teinte que le ciel de l'image (#63c7fe), assombrie jusqu'a etre lisible sur la plaque blanche - meme logique que gold / gold-ink : --v-sky bout vif du degrade, 3,06:1 sur blanc (seuil des grands titres, jamais en texte courant) ; --v-sky-ink bout sombre, 5,36:1 sur blanc. */ --v-sky: #029aee; --v-sky-ink: #0170ac; /* DEGRADES FLOUS (user, 13/09/2026) : la direction artistique de /etudiant/app/, tiree des fonds colores des captures de l'app (taches de couleur floues sur fond clair, grain fin). Teintes VITAMINEES : saturees mais lumineuses (user : les premieres etaient trop sombres, les suivantes trop ternes). Decoratifs, un emploi pour l'instant : les pastilles « Etape n ». Chaque valeur est un fond complet, taches radiales superposees sur une teinte de base. Texte pose dessus : toujours --v-secondary (nuit), au moins 6:1 sur la tache la plus foncee. */ --v-blur-bleu-rose: radial-gradient(60% 90% at 12% 85%, #8b8ff9 0%, transparent 70%), radial-gradient(55% 80% at 85% 20%, #f7a8ee 0%, transparent 70%), #eef0ff; --v-blur-orange: radial-gradient(55% 95% at 35% 40%, #fff6ec 0%, transparent 70%), radial-gradient(50% 80% at 70% 95%, #fff08a 0%, transparent 70%), #ffb56b; --v-blur-vert: radial-gradient(55% 95% at 10% 70%, #b2f55a 0%, transparent 70%), radial-gradient(50% 80% at 55% 25%, #d4ff9e 0%, transparent 70%), radial-gradient(45% 80% at 92% 45%, #8fe6c0 0%, transparent 70%), #e9fbe8; --v-blur-rose-corail: radial-gradient(55% 90% at 40% 60%, #ff8f7a 0%, transparent 70%), radial-gradient(50% 80% at 82% 15%, #fff3a0 0%, transparent 70%), #ffc2f7; /* ── 3. SURFACES ET TEXTE ───────────────────────────────────────────────── Règle de surface du site (identique à celle de l'app) : une carte est BLANCHE, sans bordure ni ombre. Elle n'est donc lisible que posée sur une section teintée. D'où deux fonds de section, et un seul fond de carte. */ --v-surface: #ffffff; /* carte, et section claire */ --v-bg: #f4f7fb; /* section teintée : le fond qui détoure les cartes */ --v-text: #29343d; /* texte courant, 12,7:1 sur blanc */ --v-muted: #736b84; /* texte secondaire, 5,0:1 sur blanc, 4,7:1 sur --v-bg */ --v-border: #e0e6eb; /* filet de séparation UNIQUEMENT (hr, bord de champ) */ --v-on-dark: #ffffff; --v-on-dark-muted: rgba(255, 255, 255, .85); /* ── 4. ÉLÉVATION ───────────────────────────────────────────────────────── Le site n'a PAS d'ombre. La hiérarchie se lit au fond, pas au relief. Seule exception : un élément qui flotte réellement au-dessus du flux et doit s'en détacher, soit UN cas et un seul, le méga-menu de l'en-tête. Ce token n'a pas d'autre usage légitime. */ --v-overlay-shadow: 0 16px 44px rgba(20, 12, 43, .16); /* ── 5. FORMES ──────────────────────────────────────────────────────────── Le rayon décroît avec l'imbrication : conteneur > bloc interne > contrôle. Un rayon unique partout est le réflexe que le design system doit éviter. */ --v-radius-lg: 24px; /* carte, bandeau, panneau */ --v-radius-md: 16px; /* bloc à l'intérieur d'une carte, pastille d'icône */ --v-radius-sm: 12px; /* bouton, champ de saisie */ --v-radius-xs: 10px; /* entrée de menu, puce compacte */ --v-radius-pill: 999px; /* étiquette, jeton, bouton rond */ /* RAYONS DES CONTRÔLES CLIQUABLES. Un rayon fixe appliqué à trois hauteurs de bouton donne trois formes différentes : à 12px, le bouton du hero (48px) est juste arrondi, celui de 32px est presque une pastille. Le rapport est donc tenu constant - UN QUART DE LA HAUTEUR, celui du bouton du hero, qui fait référence (user, 04/09/2026). Un contrôle qui tire sa hauteur de son texte (réponse du configurateur, option de bascule) prend le rayon de la taille normale : c'est sa parenté de commande qui compte, pas sa hauteur réelle. */ --v-radius-btn-lg: 12px; /* commande de 48px */ --v-radius-btn: 10px; /* commande de 40px */ --v-radius-btn-sm: 8px; /* commande de 32px */ /* ── 6. ESPACEMENT ──────────────────────────────────────────────────────── Échelle de 4 px. Aucune valeur d'espacement hors de cette liste. */ --v-space-1: 0.25rem; /* 4px */ --v-space-2: 0.5rem; /* 8px */ --v-space-3: 0.75rem; /* 12px */ --v-space-4: 1rem; /* 16px */ --v-space-5: 1.25rem; /* 20px */ --v-space-6: 1.5rem; /* 24px */ --v-space-8: 2rem; /* 32px */ --v-space-10: 2.5rem; /* 40px */ --v-space-12: 3rem; /* 48px */ --v-space-14: 3.5rem; /* 56px */ --v-space-16: 4rem; /* 64px */ --v-space-20: 5rem; /* 80px */ --v-space-24: 6rem; /* 96px */ --v-space-32: 8rem; /* 128px - le plus grand ecart de la page, sous la bascule du parcours ou montent les cretes */ /* Hauteurs de bouton, calees sur stripe.com (mesure du 03/09/2026 : hero 48 px / padding horizontal 24 px / texte 16 px, en-tete 40 px / 20 px / 14 px). On pilote la HAUTEUR et non le padding vertical : la valeur est alors exacte quelle que soit la bordure ou l'interlignage, alors qu'une addition de paddings derape des qu'un bouton gagne un contour. */ --v-btn-h-lg: 48px; --v-btn-h: 40px; --v-btn-h-sm: 32px; /* Rythme vertical des sections. La valeur basse sert au mobile. */ --v-section-y: var(--v-space-14); --v-section-y-lg: var(--v-space-20); /* ── 7. TYPOGRAPHIE ─────────────────────────────────────────────────────── Une seule famille, Manrope, comme l'app. Le contraste vient de la taille et de la graisse, pas d'une deuxième police. Sept crans, pas un de plus. */ --v-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --v-text-h1: clamp(2.3rem, 5vw, 3.6rem); --v-text-h2: clamp(1.8rem, 3vw, 2.4rem); --v-text-h3: 1.25rem; --v-text-lead: 1.2rem; --v-text-body: 1rem; --v-text-sm: 0.875rem; --v-text-label: 0.78rem; --v-lh-tight: 1.05; /* H1 */ --v-lh-snug: 1.2; /* H2, H3 */ --v-lh-base: 1.6; /* texte courant */ --v-lh-loose: 1.7; /* pages légales, textes longs */ --v-tracking-h1: -0.03em; --v-tracking-h2: -0.02em; --v-tracking-h3: -0.01em; --v-tracking-label: 0.06em; /* petites capitales : on écarte */ --v-weight-regular: 400; --v-weight-medium: 500; --v-weight-semibold: 600; --v-weight-bold: 700; --v-weight-black: 800; /* Largeurs de lecture. Un paragraphe ne dépasse jamais --v-measure. */ --v-measure: 65ch; /* texte courant */ --v-measure-tight: 48ch; /* accroche de hero, chapeau de section */ /* ── 8. MOUVEMENT ───────────────────────────────────────────────────────── Trois durées. Toute transition du site utilise l'une d'elles. N'animer que transform et opacity : le reste déclenche un recalcul. */ --v-ease: cubic-bezier(.2, .8, .2, 1); --v-duration-1: 120ms; /* retour immédiat : pression, couleur */ --v-duration-2: 200ms; /* survol, ouverture d'un petit élément */ --v-duration-3: 320ms; /* apparition d'un panneau */ /* ── 9. PLANS ───────────────────────────────────────────────────────────── Toute valeur de z-index vient d'ici. Pas de 9999. */ --v-z-base: 0; --v-z-raised: 1; /* calque au-dessus d'un fond, dans le même bloc */ --v-z-overlay: 2; /* voile de lisibilité sur une photo */ --v-z-content: 3; /* contenu par-dessus le voile */ --v-z-sticky: 1030; /* en-tête collant */ --v-z-float: 1040; /* bouton de retour en haut */ --v-z-skip: 1080; /* lien d'évitement : toujours au-dessus de tout */ /* ── 9 bis. HAUTEUR DE L'EN-TÊTE ───────────────────────────────────────── L'en-tête est collant et occupe donc de la place dans le flux. Un hero plein écran doit retrancher cette hauteur, sinon son bas passe sous la ligne de flottaison. La valeur ci-dessous n'est qu'un repli : le script du pied de page écrit la hauteur réelle, qui varie quand le menu passe sur deux lignes. */ --v-header-h: 77px; /* ── 10. FOCUS ──────────────────────────────────────────────────────────── Un anneau unique pour tout le site. Il n'est JAMAIS supprimé, sur aucun élément : c'est la seule indication dont dispose une navigation clavier. */ --v-focus-ring: 0 0 0 3px rgba(78, 66, 106, .35); --v-focus-offset: 2px; /* ══ ALIGNEMENT DE BOOTSTRAP 5.3 SUR LA CHARTE ═══════════════════════════ Bootstrap est piloté par ses propres variables : on les redéfinit ici plutôt que de réécrire ses composants. Ne rien surcharger de Bootstrap ailleurs que dans ce bloc. */ --bs-primary: #4e426a; --bs-primary-rgb: 78, 66, 106; --bs-secondary: #140c2b; --bs-secondary-rgb: 20, 12, 43; --bs-body-font-family: var(--v-font); --bs-body-color: #29343d; --bs-body-color-rgb: 41, 52, 61; --bs-body-bg: #ffffff; --bs-emphasis-color: #140c2b; --bs-border-color: #e0e6eb; --bs-border-radius: var(--v-radius-sm); --bs-border-radius-lg: var(--v-radius-lg); --bs-border-radius-xl: var(--v-radius-lg); --bs-link-color: #4e426a; --bs-link-color-rgb: 78, 66, 106; --bs-link-hover-color: #372e4b; }