* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--cream);
    color: var(--navy);
    font-family: 'Open Sauce Sans', -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Quicksand', sans-serif;
    color: var(--navy);
    font-weight: 700;
    margin: 0;
    text-wrap: balance;
}
p { margin: 0 0 var(--space-4); max-width: 68ch; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--orange); }
img { max-width: 100%; height: auto; display: block; }
.rb-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-5); }
.rb-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: var(--space-3);
    display: block;
}
.rb-section { padding-block: var(--space-8); }
@media (max-width: 640px) {
    .rb-container { padding: 0 var(--space-4); }
    .rb-section { padding-block: var(--space-6); }
}

/* Apparition douce au scroll (Task 1 Step 7 — reveal.js bascule .is-visible) */
.rb-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.rb-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .rb-reveal { opacity: 1; transform: none; transition: none; }
}

.rb-band--light { background: var(--cream); }
.rb-band--tint { background: color-mix(in srgb, var(--peach) 10%, var(--cream)); }
.rb-band--navy { background: var(--navy); }
.rb-band--dark { background: #010f28; }
.rb-band--navy, .rb-band--dark { color: #fff; }
.rb-band--navy h1, .rb-band--navy h2, .rb-band--navy h3, .rb-band--navy h4, .rb-band--navy p,
.rb-band--dark h1, .rb-band--dark h2, .rb-band--dark h3, .rb-band--dark h4, .rb-band--dark p { color: #fff; }
.rb-band--navy .rb-eyebrow, .rb-band--dark .rb-eyebrow { color: var(--peach); }
.rb-band--navy a, .rb-band--dark a { color: var(--peach); }