/* =====================================================================
   Socle commun des 22 pages du site : l'accueil, la 404, les pages légales,
   les pages du site (presse, questions, preuves, hébergeur, opportunités, histoire, plan du site) et les pages « pour ».
   Police Bricolage, couleurs jour / nuit, base de la page, lien « Aller au contenu »,
   grain du fond, et la mise en page partagée (étiquette du haut, sections).
   Chargé juste avant le <style> de la page : chaque page garde son décor à elle
   (halos .atmo, haut de page, cartes, couleurs .c-*) et peut redéfinir une règle d'ici.
   Le blog a son propre socle (socle.css), aux mêmes couleurs.
   Thème : data-theme="dark" sur <html>, posé tôt en tête de page, géré ensuite par dark-mode.js.
   ===================================================================== */

@font-face {
    font-family: "Bricolage Grotesque";
    src: url("/site-marketing/shared/fonts/bricolage-grotesque.woff2") format("woff2");
    font-weight: 200 800;
    font-stretch: 75% 100%;
    font-style: normal;
    font-display: swap;
}

/* ---- Jetons : jour (bonbons sur lavande) / nuit (néon sur indigo), les mêmes que le blog ---- */
:root {
    --bg: #f3f2ff;
    --ink: #17123d;
    --ink-soft: #4b4680;
    --glass: rgba(255, 255, 255, .58);
    --glass-strong: rgba(255, 255, 255, .8);
    --glass-line: rgba(255, 255, 255, .95);
    --shade: 23, 18, 61;
    --extrude-1: #ddd8ff;
    --extrude-2: #c9c1ff;
    --extrude-3: #b3a8ff;
    --yellow: #ffc93c;
    --pink: #ff5da2;
    --blue: #3d8bff;
    --mint: #2ed8a3;
    --orange: #ff8a3d;
    --violet: #9c6bff;
    --accent: #5b4bff;
    --accent-deep: #2f22b8;
    --gutter: clamp(18px, 5vw, 72px);
    color-scheme: light;
}
:root[data-theme="dark"] {
    --bg: #0d0b29;
    --ink: #f4f2ff;
    --ink-soft: #b3aee3;
    --glass: rgba(30, 26, 78, .5);
    --glass-strong: rgba(34, 29, 88, .78);
    --glass-line: rgba(255, 255, 255, .12);
    --shade: 0, 0, 0;
    --extrude-1: #3a2f9c;
    --extrude-2: #2c2380;
    --extrude-3: #1f1865;
    --accent: #8b7dff;
    --accent-deep: #4a3cd6;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0; min-height: 100vh;
    background: var(--bg); color: var(--ink);
    font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1.0625rem; line-height: 1.55;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
    position: fixed; left: 16px; top: 12px; z-index: 100;
    padding: 10px 18px; border-radius: 999px;
    background: var(--ink); color: var(--bg);
    font-weight: 700; text-decoration: none;
    transform: translateY(-200%); transition: transform .2s;
}
.skip:focus { transform: none; }

/* Fond : le grain, posé sur les halos de couleur (.atmo, propres à chaque page) */
.atmo::after {
    content: ""; position: absolute; inset: 0; opacity: .08;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .atmo::after { filter: invert(1); opacity: .05; }

/* ---- Mise en page partagée : l'étiquette au-dessus du grand titre, les sections ---- */
.kicker {
    display: inline-block; margin: 0 0 18px; padding: 7px 14px; border-radius: 999px;
    background: var(--glass-strong); border: 1px solid var(--glass-line);
    font-size: .88rem; font-weight: 750; letter-spacing: .02em; color: var(--ink-soft);
}
.hero h1 span { display: block; }
.section { max-width: 1280px; margin: 0 auto; padding: clamp(72px, 9vw, 120px) var(--gutter) 0; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}