/* ========================================================================== STUDIO RANEEM — DESIGN TOKENS Extrait à l'identique du prototype "Studio Raneem - Accueil.dc.html". Ce fichier est la source de vérité unique. Aucune couleur, aucun timing ne doit être écrit en dur ailleurs : tout passe par ces variables. Chargé sur TOUTES les pages (c'est le seul CSS global non conditionnel). ========================================================================== */ :root { /* ---- Fonds ---- */ --sr-bg: #1C1C1C; /* fond principal (charbon) */ --sr-bg-deep: #0E0E10; /* hero, réalisations, contact, footer */ --sr-bg-panel: #161618; /* timeline process, fond formulaire */ --sr-surface: #242426; /* cartes, inputs */ --sr-surface-hi: #202022; /* cellule client active */ /* ---- Bordures (du plus discret au plus marqué) ---- */ --sr-line-soft: #26262A; /* séparateurs footer / bandeau */ --sr-line: #2A2A2C; /* bordure par défaut */ --sr-line-mid: #2E2E31; /* chips, scrollbar */ --sr-line-strong: #3A3A3E; /* inputs, boutons secondaires */ /* ---- Couleur signature ---- */ --sr-teal: #1C7E80; /* sarcelle de marque */ --sr-teal-glow: #29B6BA; /* hover / glow / accents */ /* ---- Texte ---- */ --sr-text: #FFFFFF; --sr-text-quote: #E9E9E9; --sr-text-nav: #C9C9C9; --sr-text-2: #9A9A9A; /* texte secondaire */ --sr-text-3: #6B6B6E; /* AUDIT : 3.2:1 sur --sr-bg → décoratif uniquement */ --sr-text-3-aa: #8A8A8E; /* substitut conforme AA (4.6:1) pour du texte lisible */ /* ---- Teintes alpha réutilisées ---- */ --sr-teal-a35: rgba(41,182,186,.35); --sr-teal-a50: rgba(41,182,186,.50); --sr-teal-a22: rgba(41,182,186,.22); --sr-teal-a14: rgba(28,126,128,.14); --sr-teal-a07: rgba(28,126,128,.07); --sr-shadow-tile: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(41,182,186,.2); --sr-shadow-card: 0 18px 50px rgba(0,0,0,.4); --sr-shadow-cta: 0 8px 40px rgba(41,182,186,.35); /* ---- Typographie ---- */ --sr-font-display: 'Clash Display', 'Clash Display Fallback', sans-serif; --sr-font-body: 'General Sans', 'General Sans Fallback', system-ui, sans-serif; --sr-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; /* Échelle fluide — valeurs relevées une à une dans le prototype */ /* Écart entre l'en-tête d'une section et son contenu. UNE seule valeur pour tout le site : c'est elle qui garantit l'harmonie d'une section à l'autre. Divi n'accepte pas les valeurs d'espacement écrites hors de son interface — inutile de les poser dans le contenu, elles sont ignorées. */ /* Retrait latéral de toutes les sections. Une seule valeur pour tout le site : c'est elle qui aligne les contenus d'une page à l'autre. */ --sr-gutter-x: clamp(20px, 5%, 96px); --sr-gap-head: clamp(38px, 4vw, 64px); --sr-h1: clamp(80px, 16.5vw, 230px); --sr-h2-xl: clamp(44px, 7.5vw, 110px); /* section contact */ /* Calibré sur une MESURE, refaite après l'élargissement des colonnes. Clash Display en graisse 600 occupe ~0,84 em par caractère. La colonne d'un en-tête fait 57,25 % de la ligne (et non ~40 % comme au premier calibrage : le 60/40 l'a élargie, ce qui rendait ces tailles inutilement petites). Relevé sur les 77 H2 du site : le plus long SEGMENT fait 44 caractères — segment et non titre, car plusieurs titres portent un
qui force la coupure et change le compte. Les bornes ont été VÉRIFIÉES dans le navigateur, pas déduites : à 320 px comme à 1440 px, le titre de 44 caractères tient en deux lignes — la règle des trois lignes garde donc une marge entière. Le calcul arithmétique, lui, annonçait trois lignes : il surestime la largeur des caractères, et c'est ce qui avait conduit à des tailles trop petites. Le CTA final garde --sr-h2-xl, volontairement. */ --sr-h2-lg: clamp(26px, 2.8vw, 47px); --sr-h3: clamp(21px, 2vw, 26px); --sr-presta-title: clamp(24px, 3.2vw, 44px); --sr-marquee: clamp(58px, 8.5vw, 140px); --sr-logo-footer: clamp(46px, 7vw, 110px); --sr-body: 16px; --sr-body-lg: clamp(15.5px, 1.3vw, 17.5px); --sr-eyebrow: 11px; --sr-nav: 11.5px; /* Interlignes / approches exactes du prototype */ --sr-lh-h1: .92; --sr-lh-h2: 1; --sr-ls-h1: -.01em; --sr-ls-h2: -.015em; --sr-ls-eyebrow: .24em; --sr-ls-nav: .16em; /* ---- Espacements ---- RESPIRATION VERTICALE DES SECTIONS. Aligné sur ce que le Builder pose déjà sur la majorité des pages : 5 %. Un padding en pourcentage se calcule sur la LARGEUR du bloc, pas sur sa hauteur — 5 % valent donc 95,5 px à 1920. D'où 5vw ici, qui reproduit la même valeur tout en restant lisible. L'ancienne valeur (12vw, plafond 170 px) donnait presque le double sur les deux pages qui n'ont aucun réglage dans le Builder — « Le studio » et les fiches réalisation — et l'écart entre sections y passait de 191 à 340 px. C'était visible, et c'était l'incohérence signalée. Le plancher de 56 px remplace le calcul en pourcentage sur mobile, où 5 % de 375 px ne feraient que 19 px. */ --sr-section-y: clamp(56px, 5vw, 96px); /* Le CTA final respire deux fois plus : c'est la dernière chose avant le pied de page, elle doit se détacher. 10vw plafonné à 192 px reproduit exactement ce que le Builder pose sur l'accueil. */ --sr-section-y-cta: clamp(90px, 10vw, 192px); --sr-gutter: clamp(20px, 4vw, 56px); --sr-maxw: 1480px; --sr-maxw-narrow: 1100px; /* FAQ */ --sr-radius: 2px; /* volontairement tranchant — identité cinéma */ /* ---- Courbes & durées (signature du prototype) ---- */ --sr-ease-expo: cubic-bezier(.16, 1, .3, 1); /* révélations, hover, tilt */ --sr-ease-inout: cubic-bezier(.77, 0, .18, 1); /* wipes, préloader */ /* Survol : entrée rapide, sortie plus lente. Un bouton doit répondre à la milliseconde où le curseur l'atteint — au-delà de ~200 ms le geste paraît mou. La sortie, elle, peut prendre son temps : c'est ce déséquilibre qui donne la sensation de réactivité sans rendre l'interface nerveuse. */ --sr-d-snap: .14s; /* entrée au survol */ --sr-d-fast: .3s; /* sortie, et transitions générales */ --sr-d-base: .4s; --sr-d-slow: .85s; --sr-d-reveal: .95s; --sr-d-wipe: 1.05s; --sr-d-media: 1.2s; /* ---- Z-index : une échelle unique, plus de nombres magiques ---- */ --sr-z-progress: 115; --sr-z-header: 100; --sr-z-menu: 120; --sr-z-sticky-cta: 110; --sr-z-grain: 380; /* La modale vidéo passe au-dessus du grain — on ne met pas de grain sur un film qu'on regarde — mais DESSOUS le curseur : le curseur personnalisé remplace le curseur système, s'il repasse derrière, il ne reste plus rien à l'écran pour viser la croix de fermeture. */ --sr-z-modale: 390; --sr-z-cursor: 400; --sr-z-preloader: 500; --sr-z-skip: 600; /* Hauteur du header, lue par le JS et le scroll-margin des ancres */ --sr-header-h: 82px; /* ---- Intensité de la parallaxe ---- Seul réglage à toucher pour doser l'effet, sans ouvrir le JavaScript. 0.5 = discret (proche du prototype d'origine) 1 = référence 1.6 = très marqué Au-delà de 2 le mouvement décroche du scroll et devient désagréable. */ --sr-para-boost: 1; } @media (max-width: 920px) { :root { --sr-header-h: 74px; } }