/* ============================================================ BASE.CSS — Les Demented Brothers Reset, Variables CSS, Typographie (Si vous lisez ce CSS, vous êtes probablement développeur. Ou magicien. Ou les deux. Bienvenue.) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap'); /* ============================================================ VARIABLES ============================================================ */ :root { /* Palette — Rouge / Noir / Blanc */ --noir: #0f0f0f; --rouge: #d41430; --rouge-hover: #ff1a35; --rouge-sombre: #8b0d1e; --blanc: #ffffff; --blanc-off: #f4f4f4; --gris-sombre: #181818; --gris-moyen: #272727; --gris-carte: #1f1f1f; /* Le gris du texte secondaire était #888 : lisible pour un œil de trente ans sur un bon écran, franchement gris sur les autres. #a6a6a6 tient le même rôle discret sans se dérober. */ --gris-texte: #a6a6a6; --gris-clair: #d8d8d8; /* Compatibilité avec les variables existantes */ --or: var(--blanc); --or-pale: var(--blanc-off); --or-sombre: var(--gris-clair); --creme: var(--blanc-off); --rouge-rideau: var(--rouge-sombre); /* Typographies */ --font-titre: 'Bebas Neue', 'Impact', Arial Narrow, sans-serif; --font-corps: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; --font-fou: 'DM Sans', sans-serif; /* Ombres */ --ombre-xl: 0 24px 80px rgba(0, 0, 0, 0.95); --ombre-lg: 0 12px 40px rgba(0, 0, 0, 0.75); --ombre-md: 0 6px 20px rgba(0, 0, 0, 0.55); --ombre-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --ombre-or: 0 0 30px rgba(255, 255, 255, 0.08); --ombre-rouge: 0 0 40px rgba(212, 20, 48, 0.4); --ombre-texte: 0 2px 8px rgba(0, 0, 0, 0.8); /* Layout */ --nav-height: 64px; --max-width: 1200px; --transition: 0.25s ease; --transition-lg: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Radius */ --r-sm: 2px; --r-md: 4px; --r-lg: 8px; } /* ============================================================ RESET ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { /* Tout le site est dimensionné en rem : cette seule valeur commande la taille générale du texte. 16px est la taille par défaut des navigateurs, calibrée pour du texte noir sur blanc. Sur fond noir, à la même taille, le texte paraît plus petit et plus maigre. 17px rattrape l'écart sans rien casser de la mise en page. */ font-size: 17px; scroll-behavior: smooth; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { background-color: var(--noir); color: var(--blanc-off); font-family: var(--font-corps); font-size: 1rem; font-weight: 400; line-height: 1.7; min-height: 100vh; /* overflow-x est posé sur , pas ici : sur il empêche l'overflow de se propager au viewport, ce qui fait du body le conteneur de défilement et casse window.scrollY / window.scrollTo (navbar au scroll, parallaxe, liens #ancre). */ /* Pas de -webkit-font-smoothing: antialiased ici. Sur macOS il amincit les lettres ; c'est joli en texte foncé sur fond clair, et ça rend du blanc sur noir grisâtre et fatigant. On laisse le rendu par défaut, qui épaissit légèrement les traits. */ } /* ============================================================ TYPOGRAPHIE ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-titre); font-weight: 400; /* Bebas Neue n'a qu'une graisse */ letter-spacing: 0.04em; line-height: 1.05; color: var(--blanc); text-shadow: var(--ombre-texte); } h1 { font-size: clamp(3rem, 9vw, 7rem); } h2 { font-size: clamp(2rem, 5vw, 3.8rem); } h3 { font-size: clamp(1.5rem, 3.5vw, 2.6rem); } h4 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); } h5 { font-size: 1.2rem; } h6 { font-family: var(--font-corps); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gris-texte); text-shadow: none; } p { margin-bottom: 1.1rem; color: var(--blanc-off); /* 300 sur fond noir : les pleins des lettres deviennent des filets. 400 est la graisse normale de DM Sans, et le texte redevient franc. */ font-weight: 400; } p:last-child { margin-bottom: 0; } a { color: var(--blanc); text-decoration: none; transition: color var(--transition), opacity var(--transition); } a:hover { color: var(--blanc); opacity: 0.75; } a:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; border-radius: var(--r-sm); } strong, b { font-weight: 600; color: var(--blanc); } em, i { font-style: italic; } ul, ol { list-style: none; } img, video, iframe { max-width: 100%; height: auto; display: block; } button { font-family: inherit; cursor: pointer; border: none; background: none; line-height: inherit; } input, textarea, select { font-family: inherit; font-size: inherit; } /* ============================================================ LAYOUT DE BASE ============================================================ */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; } .section { padding: 5rem 0; } .section--large { padding: 7rem 0; } .section--small { padding: 3rem 0; } /* ============================================================ EN-TÊTES DE SECTION ============================================================ */ .section-header { text-align: center; margin-bottom: 3.5rem; } .section-header h2 { position: relative; display: inline-block; padding-bottom: 0.7rem; } .section-header h2::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--rouge); } .section-header .subtitle { margin-top: 0.8rem; color: var(--gris-clair); font-size: 1.02rem; font-weight: 400; font-style: normal; } /* ============================================================ HELPERS TEXTE ============================================================ */ .text-or { color: var(--blanc) !important; } .text-rouge { color: var(--rouge) !important; } .text-creme { color: var(--blanc-off) !important; } .text-gris { color: var(--gris-texte) !important; } .text-center { text-align: center; } .text-right { text-align: right; } .text-fou { font-family: var(--font-corps) !important; } .text-titre { font-family: var(--font-titre) !important; } .text-upper { text-transform: uppercase; letter-spacing: 0.12em; } .text-italic { font-style: italic; } .text-small { font-size: 0.92rem; } .text-large { font-size: 1.15rem; } .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; } /* ============================================================ ORNEMENT — version épurée (simple ligne) ============================================================ */ .ornement { display: flex; align-items: center; gap: 1rem; margin: 2.5rem 0; color: var(--gris-texte); font-family: var(--font-corps); font-size: 0.75rem; letter-spacing: 0.3em; opacity: 0.5; } .ornement::before, .ornement::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.08); } /* Section alternée (fond légèrement plus clair) */ .velours { background-color: var(--gris-sombre); } /* Rideau : supprimé. On garde la classe pour compatibilité HTML mais sans effet visible. */ .rideau { position: relative; } /* ============================================================ GRILLES ============================================================ */ .grid { display: grid; gap: 1.5rem; } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .grid--5 { grid-template-columns: repeat(5, 1fr); } @media (max-width: 900px) { .grid--5 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .grid--5 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: 1fr; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 768px) { .section { padding: 3.5rem 0; } .section--large { padding: 5rem 0; } } @media (max-width: 480px) { .section { padding: 2.5rem 0; } .container { padding: 0 1rem; } }