/* La teinte de l'ORBE — enregistree via @property pour que sa rotation au scroll soit une vraie transition fluide, pas un saut. Le JS (orbe.js) la fait tourner sur tout le spectre avec la molette. */ @property --orbe-teinte { syntax: ''; inherits: true; initial-value: 25deg; } :root { --orbe-teinte: 25deg; /* ---- Couleurs ---- */ /* Fond du dégradé : gris neutre, légèrement froid et éclairci — un fond plus clair rend les rubans plus pastel sans toucher à leur saturation. */ --color-bg: #ADB1B7; /* ---- Dégradé général « aurore » ---- SOTA sur trois plans : — OKLCH : les dégradés interpolent en `in oklch` (CSS Color 4), perceptuellement uniforme — pas de zone morte grise entre bleu et orange, pas de banding structurel sRGB ; — palette DÉRIVÉE : deux ancres seulement, tous les tokens sont calculés par la syntaxe de couleur relative — changer l'ambiance = deux teintes ; — animation compositeur pur : deux couches en rotation inverse (champ et aurore conique), transform uniquement, zéro repaint. */ --aurore-froid: oklch(0.62 0.10 255); --aurore-chaud: oklch(0.74 0.13 55); --degrade-bleu: oklch(from var(--aurore-froid) 0.72 0.10 h); --degrade-gris: oklch(from var(--aurore-froid) 0.80 0.015 h); --degrade-peche: oklch(from var(--aurore-chaud) 0.88 0.06 h); --degrade-orange: var(--aurore-chaud); /* la profondeur du coin haut et la brume lumineuse du bas */ --degrade-abysse: oklch(from var(--aurore-froid) 0.46 0.09 calc(h + 15)); --degrade-socle: oklch(from var(--aurore-chaud) 0.93 0.05 calc(h + 12)); /* Le champ pivote de ±--champ-balancement ; l'aurore conique fait des tours complets en sens inverse. Durées PREMIÈRES (47, 89) : pas de battement. */ --champ-taille: 200vmax; --champ-balancement: 8deg; --aurore-duree: 89s; --aurore-opacite: 0.45; /* Hauteur de la brume du socle — le brouillard dans lequel le bas du cube disparaît. */ /* 42% et non 55% : la nappe de bas de page a ete descendue avec le halo du cube, pour la meme raison — elle montait trop haut. */ --socle-hauteur: 42%; /* ---- Voile de verre dépoli ---- Couche `backdrop-filter` posée entre les taches et le grain : le dégradé se lit À TRAVERS du verre. Le grain reste net par-dessus — c'est ce contraste verre lisse / matière qui fait le glassmorphisme. */ --voile-flou: var(--f-34); --voile-saturation: 1.21; /* Aucun flou sur le champ : un dégradé linéaire est lisse par construction, et le banding résiduel est déjà cassé par le grain. */ --champ-saturation: 1.18; /* Une seule couche, donc une seule durée. 47 s (nombre premier) : assez lent pour se lire comme une lumière qui tourne, jamais comme une rotation. */ --champ-duree: 47s; /* ---- Scrim de lisibilité ---- Assombrissement LINÉAIRE en biais depuis le bord gauche, sous la colonne de texte. Il remplace la vignette : un dégradé radial elliptique assombrissant les bords dessinait lui-même un ovale clair au centre de l'écran — c'était lui, l'ovale, quel que soit le dégradé posé dessous. */ --scrim-force: 0.30; --scrim-etendue: 55%; /* ---- Figure ---- Le buste n'est pas une image posée sur le fond : deux MASQUES de densité découpés dans sa luminance — le modelé sombre du marbre, puis ses hautes lumières — modulent le dégradé vivant. La figure est faite DU fond ; quand la diagonale de couleur pivote, elle change de teinte avec lui. */ --figure-hauteur: 89vh; --figure-droite: 5vw; --figure-ombre: rgba(15, 19, 26, 0.38); --figure-lumiere: rgba(255, 255, 255, 0.55); /* ---- Le cube ---- Le motif de la marque, geant, dessine DANS le degrade : trois losanges en clip-path, chaque face est un degrade des tokens. Les aretes ne sont que des sauts de luminosite entre faces — aucune ligne tracee. */ --cube3-taille: 76vmin; /* 69 %, et non plus 62 : le cube est au centre du MUR — la part d'or droite de l'ecran (38.2 + 61.8/2), la gauche etant le panneau craie du texte. */ --cube3-x: 69%; --cube3-y: 52%; /* Flou du verre des faces : ce que le fond devient en traversant le cube. */ --cube3-verre: var(--f-21); /* Densite de la nappe de brouillard interne : translucide — on voit le pied du petit cube et l'interieur du volume a travers. Un seul bouton pour toute la nappe (fond, col, voiles, colonne, volutes). */ --nappe-densite: 55%; /* Le COL devant le pied du petit cube est le seul calque dont le metier est d'AVALER : il est donc OPAQUE, la ou la nappe reste translucide. A 55% le pied se lisait encore a travers, et sa lisibilite variait au fil du gradient qui tourne — il y avait des moments ou le bas du cube reapparaissait. */ --col-densite: 100%; /* Progression de la descente : 0 en haut de page, 1 un viewport plus bas. Pilotee par brume.js ; le brouillard montant en derive. */ --defilement: 0; /* Le blanc GRISE vers lequel le brouillard vire a la descente : quasi neutre, un souffle de froid — l'echo du gris du fond de page (--color-bg), pas un blanc chaud. */ --degrade-craie: oklch(0.955 0.005 255); /* ---- Grain ---- Remis en procédural, et pour une raison précise : un dégradé CSS est parfaitement lisse, et un dégradé lisse en plein écran révèle le *banding* — ces bandes de transition visibles sur les écrans 8 bits. Le grain les masque. Il est statique, donc il ne coûte rien par image. */ --grain-opacite: 0.25; --grain-taille: 200px; --color-text: #FFFFFF; /* Un seul token pour deux usages : le mot « studio » et les liserés entre les cubelets du logo. C'est ce qui garantit qu'ils restent exactement de la même teinte — deux valeurs séparées auraient dérivé à la première retouche. */ --color-brand-studio: #545450; /* Encre des pastilles du cube. Token distinct de --color-text : le texte est passé au blanc, le cube doit rester noir. */ --color-cube: #1B1B1B; --color-text-muted: rgba(255, 255, 255, 0.7); --color-line: #BDBDB9; /* Le gris des cards du volet : le gris de fond de page assombri, plutot qu'un gris invente — il reste de la meme famille froide que tout le reste, et suit --color-bg si celui-ci bouge. */ --carte-fond: oklch(from var(--color-bg) 0.74 0.008 h); /* Plus aucun filet entre les colonnes : --color-line reste disponible pour les traits à venir, mais n'est plus utilisé nulle part. */ /* ---- Police ---- */ --font-main: 'Outfit', 'Segoe UI', system-ui, sans-serif; --fw-thin: 100; --fw-extralight: 200; --fw-light: 300; --fw-medium: 500; --fw-extrabold: 800; /* ---- Echelle Fibonacci ---- */ --f-1: 1px; --f-2: 2px; --f-3: 3px; --f-5: 5px; --f-8: 8px; --f-13: 13px; --f-21: 21px; --f-34: 34px; --f-55: 55px; --f-89: 89px; --f-144: 144px; --f-233: 233px; --f-377: 377px; --f-610: 610px; --f-987: 987px; --f-1597: 1597px; /* ---- Echelle Lucas (inter-Fibonacci) ---- */ --l-4: 4px; --l-7: 7px; --l-11: 11px; --l-18: 18px; --l-29: 29px; --l-47: 47px; --l-76: 76px; --l-123: 123px; --l-199: 199px; --l-322: 322px; --l-521: 521px; --l-843: 843px; --l-1364: 1364px; /* ---- Tailles de texte ---- */ --text-display: var(--l-123); --text-h1: var(--f-34); --text-h2: var(--l-47); --text-h3: var(--l-29); --text-h4: var(--f-21); --text-body-lg: var(--f-21); --text-body: var(--l-18); --text-sm: var(--f-13); --text-caption: var(--l-11); /* ---- Interlignes ---- */ --lh-display: var(--f-144); --lh-h1: var(--l-47); --lh-h2: var(--f-55); --lh-h3: var(--f-34); --lh-h4: var(--f-34); --lh-body-lg: var(--f-34); --lh-body: var(--l-29); --lh-sm: var(--f-21); --lh-caption: var(--l-18); /* ---- Interlettrage ---- */ --ls-tight: -0.021em; --ls-snug: -0.013em; --ls-normal: 0; --ls-wide: 0.034em; --ls-caps: 0.055em; --rail-gap: var(--f-55); /* Largeur de la colonne du rail. 377 est le premier terme de la suite qui dépasse les 370px dont le titre a besoin pour tenir sur UNE ligne. */ --titre-largeur: var(--f-377); /* Hauteur RÉSERVÉE au titre, en nombre de lignes. Sans elle, « Référencement SEO et GEO » occupe deux lignes là où les autres titres en occupent une. Le groupe étant centré verticalement, tout le bloc — logotype compris — glissait de 23,5px d'une page à l'autre. À relever si un titre plus long apparaît : la réserve doit couvrir le pire cas, sinon le glissement revient. */ --titre-lignes: 2; /* ---- Grille ---- */ --grid-columns: 13; --grid-gap: var(--f-21); --container-max: var(--l-1364); --container-pad: var(--f-34); /* ---- Marque ---- */ --brand-inset: var(--l-123); --canvas-inset: var(--f-89); --brand-size: var(--f-21); --brand-gap: var(--f-13); /* ---- Repère menu ---- Même retrait que le bas de la barre d'intention : les deux éléments flottants sont ainsi à la même distance de leur bord. */ --menu-inset: var(--f-34); /* ---- Le heros : LE MUR (aout 2026) ---- La scene d'aurore est le fond, plein ecran, comme toujours. Un PANNEAU craie opaque la coupe a gauche sur la petite part d'or (38.2 %) et porte tout le texte : logotype en haut, h1 au tiers d'or, paragraphe et Scroll en bas, sur la ligne de la barre. A droite, le mur fuit par trois bords. */ --panneau-largeur: 38.2vw; --hero-haut: var(--l-123); /* sous l'en-tete : 48 de bande + 75 d'air */ --hero-bas: calc(var(--barre-bas) + var(--barre-hauteur) + var(--f-34)); /* la ligne de la barre */ --hero-titre: 38.2vh; /* le h1 commence au tiers d'or */ --logo-encre: #000000; /* ---- Les etiquettes de l'en-tete ---- Paves NOIRS (choix de Quentin, malgre la palette monochrome claire : c'est le contraste de matiere qui les fait tenir sur le verre), texte blanc ; la page courante s'inverse en craie — la meme craie que le brouillard blanchi, pour rester dans la famille. */ --etiquette-fond: #000000; --etiquette-encre: #FFFFFF; --etiquette-actif-fond: var(--degrade-craie); --etiquette-actif-encre: #000000; /* La largeur minimale des paves de navigation : le texte a gauche, du vide a droite. */ --etiquette-min: var(--l-123); /* Durée d'un quart de tour, et pause entre deux quarts de tour. Le cube doit rester un détail périphérique : c'est le repos qui règle sa présence, pas la vitesse du geste. */ --cube-rotation: 610ms; --cube-repos: 5210ms; --cube-derive: 11; /* Fraction de la vitesse restant après une seconde. Ne sert plus qu'à l'amortissement interne : l'entraînement par le scroll est parti avec le cube du logotype, seul abonné qu'il avait. */ --cube-glisse: 0.21; /* ---- La barre de l'assistant (chatbar IA) ---- Un pave noir de la famille de l'en-tete : 34 de haut (la hauteur des etiquettes, et la ligne que les autres composants prennent pour « le bas de la barre »), 199 de large ferme (« Parler au studio » + la fleche), 377 ouvert — la premiere valeur de la suite ou une phrase s'ecrit. Bas a 34, comme le bandeau du h1 et « Scroll ». Coin 3 (--radius-xs). */ --barre-hauteur: var(--f-34); --barre-fermee: var(--l-199); --barre-largeur: var(--f-377); --barre-bas: var(--f-34); --barre-cubelet: var(--f-8); /* ---- L'etagere des projets (volet Webdesign) ---- La hauteur ou les cards commencent a RALENTIR (etagere.js) : sous le titre WEBDESIGN, qui est sticky a --f-89 et mesure --text-display (line-height 1), plus une respiration de 55. Et la cadence d'arrivee : un ecran entre deux cards. */ --etagere-butee: calc(var(--f-89) + var(--text-display) + var(--f-55)); --etagere-cadence: 100vh; /* La reserve de flux vide en fin de colonne : ce que le ralenti consomme — une card retenue occupe plus de page qu'une card qui file. */ --etagere-tenue: 100vh; /* La largeur d'une card, en part du rail, et le pas dont chaque suivante est decalee vers la droite. Section d'or : 61.8 + 2 x 19.1 = 100 — la troisieme finit au bord droit, et de chacune des precedentes reste une bande de 19.1. */ --etagere-card: 61.8%; --etagere-pas: 19.1%; /* Les teintes du cube de la barre. DÉLIBÉRÉMENT DÉCORRÉLÉES du grand cube : celui-ci vit dans l'aurore et prend ses couleurs du dégradé qu'il filtre, l'icône est un objet à part, en verre gris. Trois niveaux de luminosité — le haut capte la lumière, le flanc droit la reçoit de biais, le gauche est dans l'ombre. C'est cet écart qui fait le volume, pas les lignes. */ --barre-cube-teinte: var(--color-text); --barre-cube-haut: 0.42; --barre-cube-droite: 0.26; --barre-cube-gauche: 0.14; /* Le gris des joints est celui de la barre — entre deux cubelets, on voit la matière de la barre repasser devant. Même teinte que --barre-verre, opacité relevée : à 0.28 sur un trait de 0.7px, le joint ne se lit pas. */ --barre-cube-joint: rgba(0, 0, 0, 0.55); --barre-cube-trait: 0.7; --barre-cube-arete: 1.1; /* Verre fumé plutôt que clair : le texte de la barre est blanc et le dégradé du fond est clair. Un verre laiteux ferait tomber le contraste à moins de 2:1 ; un verre sombre le remonte tout en restant translucide. */ --barre-verre: rgba(0, 0, 0, 0.28); --barre-flou: var(--f-13); /* ---- Rayons et traits ---- */ --radius-xs: var(--f-3); --radius-sm: var(--f-5); --radius-md: var(--f-8); --radius-lg: var(--f-13); --radius-xl: var(--f-21); --border-hair: var(--f-1); --border-thin: var(--f-2); --border-thick: var(--f-3); } /* Palier tablette : 987px */ @media (max-width: 987px) { :root { --text-display: var(--l-76); --text-h1: var(--l-29); --text-h2: var(--l-29); --text-h3: var(--f-21); --lh-display: var(--f-89); --lh-h1: var(--f-34); --lh-h2: var(--f-34); --lh-h3: var(--f-34); --grid-columns: 8; --brand-inset: var(--l-76); --canvas-inset: var(--f-55); --rail-gap: var(--f-34); /* En tablette le rail ne peut pas s'offrir 377px sans étouffer le canevas : le titre passe sur deux lignes, ce qui reste conforme à la demande. */ --titre-largeur: var(--f-233); /* « Studio créatif — webdesign & contenu » occupe TROIS lignes dans la colonne de 233px : la réserve suit, sinon le logotype glisse d'une page à l'autre (la règle du pire cas, voir DESIGN-SYSTEM). */ --titre-lignes: 3; } } /* Palier mobile : 610px */ @media (max-width: 610px) { :root { --figure-hauteur: 55vh; --figure-droite: 0vw; --text-display: var(--l-47); --text-h1: var(--l-29); --text-h2: var(--f-21); --text-h3: var(--l-18); --lh-display: var(--f-55); --lh-h1: var(--f-34); --lh-h2: var(--f-34); --lh-h3: var(--l-29); --grid-columns: 5; --grid-gap: var(--f-13); --container-pad: var(--f-21); --brand-inset: var(--l-47); --canvas-inset: var(--l-47); --rail-gap: var(--f-21); --brand-size: var(--f-13); --brand-gap: var(--f-8); --menu-inset: var(--f-21); --barre-bas: var(--f-21); } }