/* ===================================================================== MI12 FUN CENTER — variables.css Direction artistique : « ARCADE PENCHÉE ». >>> Toutes les couleurs, typographies et mesures sont dans ce fichier. <<< D'OÙ VIENT CETTE DIRECTION -------------------------- Même énergie que Fit Five — affiche de sport, noir profond, typo condensée très grasse, arêtes vives, un seul accent rouge — mais MI12 ne doit pas en être le clone : les deux rouges sont presque identiques (#E4032E contre #E30613) et deux sites clients jumeaux, ça se voit. La différence vient du logo du client lui-même : c'est un PARALLÉLOGRAMME INCLINÉ. Cette inclinaison de 8° devient la signature de tout le site — Fit Five est droit, MI12 est penché. Blocs, boutons, séparateurs, cartouches : tout suit le même angle que le logo. LE ROUGE EST CELUI DE LA MARQUE ------------------------------- #E4032E, relevé dans assets/logo.svg (classe .st0). Contrastes WCAG : blanc sur le rouge ............ 4,83:1 (AA) -> --on-accent sombre sur le rouge ........... 4,08:1 (échec) le rouge en petit texte ....... 4,08:1 (échec) -> --accent-ink Le rouge ne sert donc qu'aux aplats, bordures et grands titres ; pour du texte rouge on prend --accent-ink, même teinte éclaircie (5,20:1). ===================================================================== */ :root { /* ---------- Accent unique, verrouillé sur tout le site ---------- --accent aplats, bordures, grands titres (jamais petit texte) --accent-ink petit texte rouge sur fond sombre — 5,20:1 (AA) --accent-soft survol d'un aplat : on ASSOMBRIT, pour que le blanc posé dessus reste lisible */ --accent: #E4032E; --accent-ink: #FC2750; --accent-soft: #B80225; --accent-glow: rgba(228, 3, 46, 0.26); --accent-deep: #8E0C1E; /* ---------- Base sombre (une seule famille : gris froid) ---------- */ --void: #08070B; /* le plus profond : footer, fonds de section */ --bg-0: #0C0A0F; /* fond principal de la page */ --surface: #16131A; /* cartes, champs */ --surface-2: #201C26; /* survols, états actifs */ --line: rgba(255, 255, 255, 0.10); --line-strong:rgba(255, 255, 255, 0.22); /* ---------- Texte ---------- */ --text: #F5F2F4; /* 17,7:1 sur le fond de page */ --text-muted: #A9A2AE; /* 7,9:1 */ --text-dim: #8A8394; /* 5,4:1 — reste lisible, jamais décoratif */ --on-accent: #FFFFFF; /* texte posé SUR l'accent — 4,83:1 (AA) */ /* ---------- Statuts (console et disponibilités) ------------------ L'accent étant rouge, « occupé » n'a pas besoin d'un second rouge : il réutilise l'accent. Un rouge de plus serait un rouge de trop. */ --free: #4ADE80; --soon: #FBBF24; --busy: var(--accent); --closed: #8A8394; /* ---------- Typographie ------------------------------------------ UNE seule famille, Archivo, exploitée sur son axe de LARGEUR. Une famille variable évite de charger quatre fontes pour obtenir quatre graisses, et l'axe de chasse donne le contraste « affiche » sans changer de police. jersey ultra-condensé 900 -> titres géants, chiffres cond condensé 800 -> sous-titres, cartouches label semi-condensé 700 -> boutons, nav, sur-titres body normal 400/500 -> paragraphes ------------------------------------------------------------------ */ --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", sans-serif; --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --w-jersey: 62.5%; --w-cond: 75%; --w-label: 87.5%; --w-normal: 100%; /* Le titre d'accueil fait QUATRE lignes en ultra-condensé : au-delà de 6,4rem il mange l'écran entier et pousse l'accroche et les boutons sous la ligne de flottaison. */ --fs-hero: clamp(2.5rem, 7.4vw, 6.4rem); --fs-h1: clamp(2.4rem, 6.5vw, 5rem); --fs-h2: clamp(2rem, 5vw, 3.9rem); --fs-h3: clamp(1.15rem, 2vw, 1.55rem); --fs-lead: clamp(1.02rem, 1.5vw, 1.2rem); --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.75rem; /* ---------- L'inclinaison, signature du logo ---------------------- 8° : assez pour se voir, assez peu pour que le texte reste droit (on penche les BLOCS, jamais les paragraphes). --skew-fix rétablit l'aplomb du contenu à l'intérieur d'un bloc penché. */ --skew: -8deg; --skew-fix: 8deg; /* ---------- Mesures ---------- */ --maxw: 1320px; --maxw-narrow: 820px; --gutter: clamp(18px, 4vw, 40px); --header-h: 82px; /* ---------- Rythme vertical --------------------------------------- Resserré le 27/07/2026. L'accueil s'est allongé (avis, partenaires, FAQ) et il fallait le raccourcir, pas l'étirer : un visiteur qui doit faire six écrans avant d'atteindre la FAQ ne l'atteint jamais, et une page qui n'en finit pas dilue ses mots-clés. --space-xl est passé de 84-156 px à 56-104 px : environ 40 % de hauteur en moins sur les dix sections, sans rien supprimer. */ --space-xs: 8px; --space-sm: 16px; --space-md: 26px; --space-lg: 40px; --space-xl: clamp(46px, 5.6vw, 84px); /* ---------- Formes : tout droit ---------------------------------- Aucun rayon nulle part. La seule courbe du site est le cercle des pastilles d'état. C'est ce qui donne l'arête « affiche ». */ --r-sm: 0px; --r-card: 0px; --r-pill: 0px; --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.38); --shadow: 0 18px 44px rgba(0, 0, 0, 0.50); --shadow-lg: 0 34px 80px rgba(0, 0, 0, 0.62); --glow: 0 0 0 1px var(--accent-glow), 0 14px 44px var(--accent-glow); /* ---------- Mouvement -------------------------------------------- Le site est très animé (demande client). Trois durées seulement, une seule courbe : au-delà, le mouvement devient du bruit. */ --t-fast: 0.16s cubic-bezier(0.2, 0.7, 0.3, 1); --t: 0.30s cubic-bezier(0.2, 0.7, 0.3, 1); --t-slow: 0.72s cubic-bezier(0.16, 1, 0.3, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --z-header: 1000; --z-modal: 2000; --z-toast: 3000; } /* ---------- Utilitaires typographiques (axe de largeur) ---------- */ .t-jersey { font-family: var(--font-display); font-stretch: var(--w-jersey); font-weight: 900; text-transform: uppercase; line-height: 0.84; letter-spacing: -0.01em; } .t-cond { font-family: var(--font-display); font-stretch: var(--w-cond); font-weight: 800; text-transform: uppercase; line-height: 0.95; } .t-label { font-family: var(--font-display); font-stretch: var(--w-label); font-weight: 700; text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 0.18em; } .t-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Le bloc penché, et son contenu remis d'aplomb. */ .skewed { transform: skewX(var(--skew)); } .skewed > * { transform: skewX(var(--skew-fix)); } /* ===================================================================== ACCESSIBILITÉ DU MOUVEMENT Le site est volontairement très animé. Cette règle n'est donc pas une politesse : c'est elle qui le rend utilisable par quelqu'un que le mouvement rend malade. Tout s'arrête, rien ne disparaît. ===================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Les éléments révélés au défilement doivent rester VISIBLES. */ .reveal, .reveal > * { opacity: 1 !important; transform: none !important; } }