/* ============================================================
global.css : Reset, variables CSS, typographie, utilitaires
Sublime Gestion Site Vitrine
============================================================ */
/*
FONTS : À inclure dans le de chaque page HTML :
*/
/* === RESET === */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
tab-size: 4;
}
body {
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.55;
letter-spacing: -0.011em;
color: var(--ink);
background-color: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
border: none;
background: none;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.02em;
}
p, li, dd {
line-height: 1.55;
}
p:not([class]) + p:not([class]) {
margin-top: 1em;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* L'attribut hidden l'emporte toujours, même sur un display:flex/grid posé
par une classe (bug rencontré trois fois sur les démos). */
[hidden] {
display: none !important;
}
/* === CUSTOM PROPERTIES === */
:root {
/* --- Palette officielle --- */
--noir: #231F20;
--orange: #E75C1F;
--orange-hover: #D14E15;
--bg: #F5F3EE;
--bg-card: #FFFFFF;
--bg-dark: #1A1A1F;
--bg-dark-2: #23232B;
--cream: #FAF3E8;
--ink: #1A1A1F;
--ink-2: #2D3142;
--muted: #6B7280;
--muted-light: #9CA3AF;
--border: #E8E4DB;
--border-dark: rgba(255, 255, 255, 0.08);
--success: #10B981;
/* --- Canaux RGB pour transparences --- */
--noir-rgb: 35, 31, 32;
--orange-rgb: 231, 92, 31;
--ink-rgb: 26, 26, 31;
--success-rgb: 16, 185, 129;
--error-rgb: 239, 68, 68;
/* --- Espacements --- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
/* --- Rayons --- */
--radius-xs: 6px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-2xl: 28px;
--radius-pill: 100px;
/* --- Ombres --- */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.06);
/* --- Easing --- */
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
/* --- Durées --- */
--dur-fast: 150ms;
--dur-base: 250ms;
--dur-slow: 400ms;
--dur-reveal: 800ms;
/* --- Layout --- */
--container-max: 1200px;
--container-pad: 24px;
/* --- Section padding --- */
--section-py: 80px;
}
@media (min-width: 768px) {
:root {
--container-pad: 32px;
--section-py: 96px;
}
}
@media (min-width: 1240px) {
:root {
--container-pad: 40px;
--section-py: 128px;
}
}
/* === SELECTION TEXTE === */
::selection {
background-color: var(--noir);
color: var(--bg);
}
::-moz-selection {
background-color: var(--noir);
color: var(--bg);
}
/* === FOCUS GLOBAL === */
:focus {
outline: none;
}
:focus-visible {
outline: 2px solid var(--orange);
outline-offset: 3px;
border-radius: var(--radius-xs);
}
/* === TYPOGRAPHIE === */
/* H1 hero */
.h1-hero {
font-family: 'Inter', sans-serif;
font-size: clamp(48px, 8vw, 96px);
font-weight: 600;
letter-spacing: -0.045em;
line-height: 1.0;
color: var(--ink);
}
/* H1 accent (Instrument Sans italic orange) */
.h1-accent {
font-family: 'Instrument Sans', serif;
font-size: clamp(48px, 8vw, 96px);
font-weight: 500;
font-style: italic;
letter-spacing: -0.025em;
line-height: 1.0;
color: var(--orange);
}
/* H2 section */
h2,
.h2 {
font-size: clamp(32px, 4vw, 48px);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.1;
}
/* H3 */
h3,
.h3 {
font-size: 24px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.2;
}
/* H4 */
h4,
.h4 {
font-size: 18px;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.3;
}
/* Body large */
.body-lg {
font-size: 19px;
font-weight: 400;
line-height: 1.5;
}
/* Body standard */
.body-md {
font-size: 16px;
font-weight: 400;
line-height: 1.55;
}
/* Caption */
.caption {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
}
/* Label small */
.label-sm {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.02em;
}
/* === LAYOUT === */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.section {
padding-block: var(--section-py);
}
/* === GRILLES === */
.grid-2 {
display: grid;
gap: var(--space-6);
}
.grid-3 {
display: grid;
gap: var(--space-6);
}
.grid-4 {
display: grid;
gap: var(--space-6);
}
@media (min-width: 768px) {
.grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
grid-template-columns: repeat(2, 1fr);
}
.grid-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
grid-template-columns: repeat(4, 1fr);
}
}
/* === UTILITAIRES COULEUR === */
.text-orange { color: var(--orange); }
.text-muted { color: var(--muted); }
.text-ink { color: var(--ink); }
.text-ink-2 { color: var(--ink-2); }
.text-white { color: #FFFFFF; }
.text-success { color: var(--success); }
/* === UTILITAIRES FOND === */
.bg-default { background-color: var(--bg); }
.bg-card { background-color: var(--bg-card); }
.bg-dark { background-color: var(--bg-dark); }
.bg-dark-2 { background-color: var(--bg-dark-2); }
.bg-cream { background-color: var(--cream); }
/* === UTILITAIRES TEXTE === */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
/* === UTILITAIRES FLEX === */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }
/* === ESPACEMENTS === */
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }
/* === ACCESSIBILITÉ === */
/* Masqué visuellement, accessible au lecteur d'écran */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* === SÉPARATEURS === */
.divider {
width: 100%;
height: 1px;
background-color: var(--border);
border: none;
margin-block: var(--space-8);
}
.divider--dark {
background-color: var(--border-dark);
}
/* === LIEN TEXTE === */
.link {
color: var(--orange);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(var(--orange-rgb), 0.4);
transition: text-decoration-color var(--dur-base) var(--ease-standard);
}
.link:hover {
text-decoration-color: var(--orange);
}
/* === SCROLLBAR CUSTOM === */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: var(--bg);
}
::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
background: var(--muted-light);
}