/* ============================================================================ VENTILO AI - COUCHE 1/4 : TOKENS ---------------------------------------------------------------------------- La SOURCE UNIQUE des valeurs de design de la landing (DA sombre, validee le 27/09/2026). Aucune autre feuille, aucun attribut style="" n'ecrit une couleur, une taille de texte, un espacement, un rayon ou une ombre en dur : tout passe par une variable d'ici. Ordre de chargement (partials/header.php) : 1. tokens.css les valeurs <- ce fichier 2. base.css le HTML nu (remise a zero, typo de base) 3. components.css les briques communes : mise en page, titres, matiere en relief, boutons, en-tete, pied, barre de chat 4. pages.css les sections, composees avec ces briques Nommage : --v-* pour les variables, .vs-* pour les classes. DEUX THEMES (user, 28/09/2026) : SOMBRE par defaut, CLAIR au choix du visiteur (bascule du pied de page, assets/js/theme.js). Le theme est l'attribut data-theme de , pose avant la peinture (header.php). Le bloc ci-dessous est le sombre ; le clair ne redefinit que les couleurs et les ombres, plus bas. Ce qui est pose sur une image ou une video (hero, bandeau des pages interieures, en-tete tant qu'il est transparent) reste sombre dans les deux themes : classe .vs-dark. ========================================================================== */ :root, .vs-dark, .vs-header:not(.is-scrolled) { color-scheme: dark; /* ── 1. COULEURS ───────────────────────────────────────────────────────── Fond sideral tres sombre, surfaces un cran au-dessus, texte blanc. */ --v-bg: #17140f; /* fond de page */ --v-bg-rgb: 23, 20, 15; /* le meme, en composantes (voiles) */ --v-surface: #221e18; /* surface : pied de page, cadres media */ --v-bg-tint: #1d1a14; /* bande nuancee : entre le fond et la surface */ --v-text: #ffffff; /* titres et texte fort */ --v-text-muted: rgba(255, 255, 255, .62); /* texte courant, sous-titres */ --v-text-faint: rgba(255, 255, 255, .42); /* mentions (copyright) */ --v-hairline: rgba(255, 255, 255, .06); /* filet de lumiere : bord de surface */ /* Filet d'ombre : bord bas d'une bande, de l'en-tete. */ --v-edge-shadow: rgba(0, 0, 0, .45); /* Logo (fichier blanc) : tel quel en sombre, noirci en clair. */ --v-logo-filter: none; /* Chevron des listes deroulantes, couleur du texte attenue. */ --v-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='rgba(255,255,255,.55)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19 9L12 15L5 9'/%3E%3C/svg%3E"); /* ACCENT ORANGE (user, 29/09/2026) : la couleur primaire de Ventilo AI, la MEME que la plateforme (_app_ventilo_ai, primary #FB6C00, enfonce #E55F00), et le meme dosage : l'action principale (bouton plein), ce qui est CHOISI (onglet, question ouverte, theme) et quelques signes (badges, coches, fleche d'envoi). Tout le reste reste neutre. Il remplace le degrade orange -> rose. Jamais de degrade. --v-primary-ink : l'orange pose en TEXTE ou en icone, sur le fond ; en clair, la teinte enfoncee, un peu plus lisible sur le fond pale. */ --v-primary: #fb6c00; --v-primary-pressed: #e55f00; --v-on-primary: #ffffff; --v-primary-ink: #fb6c00; --v-primary-rgb: 251, 108, 0; /* ── 2. TYPOGRAPHIE ────────────────────────────────────────────────────── Une seule famille, DM Sans (axe optique), chargee dans header.php. */ --v-font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --v-fs-title: clamp(2.25rem, 4.6vw, 4rem); /* titre de section (h2) */ --v-lh-title: 1.04; --v-fs-lead: 1.125rem; /* sous-titre, texte d'accroche */ --v-lh-lead: 1.6; --v-fs-caption: clamp(1.0625rem, 1.5vw, 1.25rem); /* legende sous un media */ --v-lh-caption: 1.45; --v-fs-body: 1rem; --v-lh-body: 1.6; --v-fs-card-title: clamp(1.375rem, 2vw, 1.75rem); /* titre d'une carte (h2 en grille) */ --v-fs-small: .9375rem; /* pied de page, liens secondaires */ --v-fs-tiny: .875rem; /* mentions, badge */ /* ── 3. ESPACEMENT ─────────────────────────────────────────────────────── Echelle de 4px. Plus trois ecarts de composition, les memes partout. */ --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-16: 4rem; /* 64px */ --v-space-20: 5rem; /* 80px */ /* Largeur de reference du contenu (user, 27/09/2026) : 880px au plus, jamais plus large que le conteneur, et bornee par 60 % de la hauteur d'ecran au format des images (2688 x 1520). Tout s'y aligne : sections, en-tete, pied de page. */ --v-content: min(100%, 880px, 60vh * 2688 / 1520); /* Ecart entre deux sections : le MEME partout. Chaque section ne porte que cet ecart au-dessus d'elle (.vs-section). */ --v-section-gap: clamp(96px, 12vw, 176px); /* Hauteur de l'en-tete fixe (logo 28px + 2 x 24px de marge, etat defile) : ce qu'une page doit laisser libre en haut. */ --v-header-h: 84px; /* Marge INTERIEURE d'une bande nuancee (haut et bas) : bien plus serree que l'ecart entre sections, qui reste, lui, a l'exterieur de la bande. */ --v-band-pad: clamp(48px, 5vw, 72px); /* Ecart sous une tete de section (titre + sous-titre). */ --v-head-gap: clamp(32px, 4vw, 48px); /* Ecart entre un media et sa legende. */ --v-caption-gap: clamp(24px, 3vw, 36px); /* ── 4. FORMES ─────────────────────────────────────────────────────────── Le rayon decroit avec l'imbrication : conteneur > bloc > commande. */ --v-radius-lg: 24px; /* carte, plaque, cadre media */ --v-radius-md: 20px; /* question de FAQ */ --v-radius-sm: 12px; /* bouton */ /* MATIERE EN RELIEF DES COMMANDES (user, 27/09/2026) : neumorphisme, d'apres Airbnb et le soft UI, ici en SOMBRE (surface #221e18 sur le fond #17140f). Exception demandee a la regle sans ombre, reservee aux commandes (onglets, boutons, cartes cliquables, barre de chat). Regles suivies : - une seule source de lumiere, en haut a gauche, pour tout le site ; - le bouton est de la couleur de la surface sur laquelle il est pose ; - au repos, PAS d'ombre portee (user) : seules deux aretes dessinent l'epaisseur, un filet de lumiere en haut a gauche et un filet d'ombre en bas a droite ; - un leger degrade de surface : bombe (convexe) quand ca sort, creuse (concave) quand c'est enfonce ; - en sombre, la lumiere est tres faible (blanc a quelques %) et l'ombre est du noir franc : c'est l'ombre qui porte le relief. Pour que le passage d'un etat a l'autre s'ANIME au lieu de sauter, chaque etat anime a exactement la meme liste de dix ombres, dans le meme ordre, avec le meme type (interieure / exterieure) a chaque place : une ombre inutile vaut 0 et transparente. places 1-2 aretes (interieures) places 3-5 creux (interieures, a zero quand ca sort) places 6-10 relief (exterieures) */ --v-neu-text: #ffffff; --v-neu-text-muted: rgba(255, 255, 255, .55); /* Texte grave dans la matiere : un filet sombre juste au-dessus. */ --v-neu-engrave: 0 -1px 0 rgba(0, 0, 0, .55); /* Degrades de surface, en paires (haut gauche, bas droite). */ --v-neu-convex-a: #2b2721; /* ca sort : clair en haut a gauche */ --v-neu-convex-b: #1d1a15; --v-neu-hover-a: #29251f; /* un onglet a plat qui se souleve a peine */ --v-neu-hover-b: #1f1c17; --v-neu-concave-a: #181511; /* c'est enfonce : sombre en haut a gauche */ --v-neu-concave-b: #27231d; --v-neu-well-a: #1b1814; /* champ grave, un peu moins creux */ --v-neu-well-b: #26221c; --v-neu-clear: rgba(34, 30, 24, 0); /* a plat : aucune teinte */ /* A plat : rien ne depasse (onglet non selectionne). */ --v-neu-flat: inset 0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0); /* Aretes seules : l'etat de repos des boutons et des cartes. */ --v-neu-edge: inset 1px 1px 1px rgba(255, 255, 255, .07), inset -1px -1px 1px rgba(0, 0, 0, .55), inset 0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0); /* Plaque : la barre de chat du hero, qui sort de la video. Aretes et ombre portee sombre, empilee (1, 3, 7, 14px). Non animee. */ --v-neu-plate: inset 1px 1px 1px rgba(255, 255, 255, .07), inset -1px -1px 1px rgba(0, 0, 0, .55), 1px 1px 2px rgba(0, 0, 0, .25), 3px 3px 6px rgba(0, 0, 0, .22), 7px 7px 14px rgba(0, 0, 0, .18), 14px 14px 28px rgba(0, 0, 0, .14); /* Creux leger : un champ de saisie grave dans la matiere. */ --v-neu-well: inset 1px 1px 1px rgba(0, 0, 0, .5), inset -1px -1px 1px rgba(255, 255, 255, .05), inset 2px 2px 5px rgba(0, 0, 0, .4), inset 4px 4px 10px rgba(0, 0, 0, .2), inset -3px -3px 8px rgba(255, 255, 255, .03), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0); /* Survol leger d'un onglet a plat : il se souleve a peine. */ --v-neu-hint: inset 1px 1px 1px rgba(255, 255, 255, .06), inset -1px -1px 1px rgba(0, 0, 0, .45), inset 0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 1px 1px 2px rgba(0, 0, 0, .3), 2px 2px 4px rgba(0, 0, 0, .2), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0); /* Enfonce dans la matiere, comme tamponne (onglet selectionne, bouton presse). Les aretes s'inversent : l'ombre en haut a gauche, la lumiere en bas a droite. */ --v-neu-pressed: inset 1px 1px 1px rgba(0, 0, 0, .6), inset -1px -1px 1px rgba(255, 255, 255, .06), inset 3px 3px 6px rgba(0, 0, 0, .5), inset 6px 6px 14px rgba(0, 0, 0, .28), inset -3px -3px 8px rgba(255, 255, 255, .035), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0); /* Le fond du geste : un instant plus enfonce que l'etat final, avant de remonter se poser (animation de selection). */ --v-neu-deep: inset 1px 1px 2px rgba(0, 0, 0, .7), inset -1px -1px 1px rgba(255, 255, 255, .05), inset 4px 4px 8px rgba(0, 0, 0, .6), inset 9px 9px 18px rgba(0, 0, 0, .34), inset -3px -3px 8px rgba(255, 255, 255, .03), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0); /* Bouton PLEIN (l'accent orange) : deux aretes et une ombre courte au repos, ombres a l'interieur quand il est enfonce (le fond passe alors a --v-primary-pressed). Memes valeurs que --ai-neu-solid-* de la plateforme (src/scss/_neu.scss). Quatre ombres a chaque etat, memes types a chaque place, pour que le passage s'anime. */ --v-neu-solid-edge: inset 1px 1px 1px rgba(255, 255, 255, .3), inset -1px -1px 1px rgba(90, 30, 0, .45), 1px 1px 2px rgba(0, 0, 0, .25), 2px 2px 6px rgba(0, 0, 0, .2); --v-neu-solid-pressed: inset 1px 1px 2px rgba(90, 30, 0, .55), inset 3px 3px 6px rgba(90, 30, 0, .22), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0); /* Texte grave dans l'orange : un filet brun, pas le noir du neutre. */ --v-solid-engrave: 0 -1px 0 rgba(90, 30, 0, .35); /* Rythme : on s'enfonce vite, on remonte plus lentement, avec un tout petit rebond (comme un vrai bouton a ressort). */ --v-neu-in: .14s cubic-bezier(.3, 0, .5, 1); --v-neu-out: .42s cubic-bezier(.34, 1.4, .64, 1); } /* ── THEME CLAIR ───────────────────────────────────────────────────────────── La palette claire de la PLATEFORME (_app_ventilo_ai, theme/LightTheme.js) : fond #F4F7FB, blanc pour ce qui en sort, texte #29343D (alignement du 28/09/2026 : les deux produits ne font qu'un). Meme matiere, meme lumiere en haut a gauche ; en clair, la lumiere (blanc franc) dessine l'arete haute, l'ombre est le gris-bleu du texte tres dilue. Memes valeurs que src/scss/_neu.scss de la plateforme. Tailles, espacements et rayons ne changent pas. La barre de chat du hero (.vs-prompt) passe aussi en clair (user, 29/09/2026), bien que posee sur la video sombre : elle reprend ici les couleurs claires, le reste du hero reste en portee sombre. */ :root[data-theme="light"], :root[data-theme="light"] .vs-prompt { color-scheme: light; --v-bg: #f4f7fb; --v-bg-rgb: 244, 247, 251; --v-surface: #ffffff; --v-bg-tint: #fafbfd; --v-text: #29343d; --v-text-muted: rgba(41, 52, 61, .66); --v-text-faint: rgba(41, 52, 61, .46); --v-hairline: rgba(41, 52, 61, .08); --v-edge-shadow: rgba(41, 52, 61, .12); --v-logo-filter: brightness(0); --v-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='rgba(41,52,61,.55)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19 9L12 15L5 9'/%3E%3C/svg%3E"); --v-primary-ink: #e55f00; --v-neu-text: #29343d; --v-neu-text-muted: rgba(41, 52, 61, .58); --v-neu-engrave: 0 1px 0 rgba(255, 255, 255, .8); --v-neu-convex-a: #ffffff; --v-neu-convex-b: #eaeff5; --v-neu-hover-a: #fdfeff; --v-neu-hover-b: #edf1f6; --v-neu-concave-a: #e3e9f0; --v-neu-concave-b: #fbfcfe; --v-neu-well-a: #e8edf3; --v-neu-well-b: #fafbfd; --v-neu-clear: rgba(244, 247, 251, 0); --v-neu-edge: inset 1px 1px 1px rgba(255, 255, 255, .9), inset -1px -1px 1px rgba(41, 52, 61, .16), inset 0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0); --v-neu-plate: inset 1px 1px 1px rgba(255, 255, 255, .9), inset -1px -1px 1px rgba(41, 52, 61, .16), 1px 1px 2px rgba(41, 52, 61, .08), 3px 3px 6px rgba(41, 52, 61, .07), 7px 7px 14px rgba(41, 52, 61, .06), 14px 14px 28px rgba(41, 52, 61, .05); --v-neu-well: inset 1px 1px 1px rgba(41, 52, 61, .18), inset -1px -1px 1px rgba(255, 255, 255, .8), inset 2px 2px 5px rgba(41, 52, 61, .12), inset 4px 4px 10px rgba(41, 52, 61, .06), inset -3px -3px 8px rgba(255, 255, 255, .6), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0); --v-neu-hint: inset 1px 1px 1px rgba(255, 255, 255, .85), inset -1px -1px 1px rgba(41, 52, 61, .12), inset 0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 1px 1px 2px rgba(41, 52, 61, .1), 2px 2px 4px rgba(41, 52, 61, .07), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0); --v-neu-pressed: inset 1px 1px 1px rgba(41, 52, 61, .2), inset -1px -1px 1px rgba(255, 255, 255, .85), inset 3px 3px 6px rgba(41, 52, 61, .14), inset 6px 6px 14px rgba(41, 52, 61, .08), inset -3px -3px 8px rgba(255, 255, 255, .7), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0); --v-neu-deep: inset 1px 1px 2px rgba(41, 52, 61, .24), inset -1px -1px 1px rgba(255, 255, 255, .8), inset 4px 4px 8px rgba(41, 52, 61, .18), inset 9px 9px 18px rgba(41, 52, 61, .1), inset -3px -3px 8px rgba(255, 255, 255, .6), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0); --v-neu-solid-edge: inset 1px 1px 1px rgba(255, 255, 255, .38), inset -1px -1px 1px rgba(150, 55, 0, .32), 1px 1px 2px rgba(41, 52, 61, .045), 2px 2px 6px rgba(230, 95, 0, .17); --v-neu-solid-pressed: inset 1px 1px 2px rgba(130, 45, 0, .42), inset 3px 3px 6px rgba(130, 45, 0, .18), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0); }