/* =========================================================
SCALI ADS - main.css
Variables, reset, typographie, layout global
Police chargée via dans le de chaque page HTML (pas ici
en @import CSS) : un @import bloque le rendu tant que main.css n'est
pas lui-même téléchargé et lu, alors qu'un dans le peut
être découvert et chargé en parallèle dès le parsing du HTML.
========================================================= */
/* ---------- Variables ----------
Système de tokens sémantiques : la page est blanche par défaut
(racine = thème clair). Les sections sombres portent la classe
.dark, qui réassigne localement ces mêmes tokens -> tout le
reste du CSS (cartes, textes, bordures) bascule automatiquement.
------------------------------------------------------------ */
:root {
/* Surfaces / texte - thème blanc (défaut) */
--surface-page: #ffffff;
--surface-card: #f5f2f0;
--surface-card-2: #eeebe7;
--ink: #0b0b0d;
--ink-soft: #45434c;
--ink-mute: #6b6975;
--ink-faint: #9c9aa3;
--line: rgba(10, 10, 15, 0.10);
--line-mid: rgba(10, 10, 15, 0.18);
--scrim: rgba(10, 10, 15, 0.03);
--hover-scrim: rgba(10, 10, 15, 0.04);
--logo-shadow: rgba(15, 10, 8, 0.22);
/* Accent (identique quel que soit le fond) */
--orange: #ff5a1f;
--pink: #ff2d6e;
--gradient-accent: linear-gradient(135deg, var(--orange) 0%, var(--pink) 100%);
--border-accent: rgba(255, 90, 31, 0.35);
--glow-accent: rgba(255, 45, 110, 0.35);
--glow-accent-soft: rgba(255, 90, 31, 0.14);
/* Typography */
--font-display: "Inter Tight", "Inter", "Helvetica Neue", Arial, sans-serif;
--font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
--font-logo: "Anton", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
/* Sizing */
--maxw: 1240px;
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 22px;
--radius-pill: 999px;
/* Shadows (toujours sombres/portées, fonctionnent sur fond clair ou sombre) */
--shadow-card: 0 10px 30px rgba(20, 16, 14, 0.12), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
--shadow-deep: 0 30px 80px rgba(20, 16, 14, 0.18), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
--shadow-cta: 0 10px 30px rgba(255, 45, 110, 0.3), 0 0 0 1px rgba(255, 90, 31, 0.5) inset;
}
/* ---------- Thème sombre (bandes ~25%) ---------- */
.dark {
--surface-page: #08080a;
--surface-card: #111114;
--surface-card-2: #17171c;
--ink: #ffffff;
--ink-soft: #c9c9ce;
--ink-mute: #98979f;
--ink-faint: #68666f;
--line: rgba(255, 255, 255, 0.08);
--line-mid: rgba(255, 255, 255, 0.15);
--scrim: rgba(255, 255, 255, 0.03);
--hover-scrim: rgba(255, 255, 255, 0.06);
--logo-shadow: rgba(255, 255, 255, 0.14);
--shadow-card: 0 10px 30px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
--shadow-deep: 0 30px 80px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
background: var(--surface-page);
color: var(--ink);
}
/* Bande grise (3e ton, exact gris Brainlab repéré par l'utilisateur : #F5F2F0).
Les cartes à l'intérieur redeviennent blanches (--surface-card inversé). */
.grey {
--surface-page: #f5f2f0;
--surface-card: #ffffff;
--surface-card-2: #fbfaf9;
background: var(--surface-page);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
overflow-x: hidden;
max-width: 100%;
}
body {
margin: 0;
padding: 0;
background: var(--surface-page);
color: var(--ink);
font-family: var(--font-body);
font-weight: 400;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
max-width: 100%;
position: relative;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
input, select, textarea { font: inherit; color: inherit; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ---------- Typography helpers ---------- */
.h-display {
font-family: var(--font-display);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.05;
font-size: clamp(2.4rem, 5vw, 4.4rem);
color: var(--ink);
}
.h-section {
font-family: var(--font-display);
font-weight: 800;
letter-spacing: -0.015em;
line-height: 1.1;
font-size: clamp(1.9rem, 3.4vw, 2.9rem);
color: var(--ink);
}
.accent {
font-family: var(--font-display);
font-weight: 800;
font-style: normal;
background: var(--gradient-accent);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
padding: 0 0.02em;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.76rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ink-soft);
background: var(--scrim);
border: 1px solid var(--border-accent);
border-radius: var(--radius-pill);
box-shadow: 0 0 22px var(--glow-accent-soft);
}
.eyebrow::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--gradient-accent);
flex-shrink: 0;
}
.muted { color: var(--ink-mute); font-weight: 400; }
.muted-strong { color: var(--ink-soft); font-weight: 500; }
/* ---------- Layout ---------- */
.container {
width: 100%;
max-width: var(--maxw);
margin: 0 auto;
padding: 0 24px;
}
section { position: relative; }
.section-pad { padding: 100px 0; }
@media (max-width: 768px) {
.section-pad { padding: 64px 0; }
}
.section-head {
max-width: 680px;
margin-bottom: 48px;
}
.section-head p {
margin-top: 16px;
font-size: 1.05rem;
color: var(--ink-mute);
}
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}