/* ---------- Design tokens ---------- */
:root {
    --sand:        #f5ede0;
    --sand-deep:   #ece1cc;
    --bark:        #3a2f24;
    --bark-soft:   #5a4a3a;
    --terracotta:  #b8845a;
    --terracotta-2:#a06f47;

    --ease:        cubic-bezier(.2, .7, .2, 1);
    --shadow-md:   0 -10px 40px -20px rgba(58, 47, 36, .55);

    --fs-eyebrow:  clamp(.7rem, .62rem + .28vw, .82rem);
    --fs-body:     clamp(.95rem, .92rem + .15vw, 1.05rem);
    --fs-lede:     clamp(1rem, .95rem + .35vw, 1.18rem);
    --fs-tagline:  clamp(1.2rem, .98rem + 1vw, 1.7rem);
    --fs-brand:    clamp(3rem, 2rem + 5.5vw, 6.5rem);

    --maxw:        640px;

    --banner-h:    clamp(140px, 28vh, 320px);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- Base ---------- */
html, body { min-height: 100%; }
body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 300;
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--bark);
    background: var(--sand);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--bark); color: var(--sand); }

/* ---------- Texture grain (overlay sur tout) ---------- */
.grain {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .28;
    z-index: 10;
    mix-blend-mode: multiply;
}

/* ---------- Layout 3 zones ---------- */
.layout {
    display: grid;
    grid-template-rows: var(--banner-h) 1fr var(--banner-h);
    min-height: 100dvh;
}

/* ---------- Bannières image ---------- */
.banner {
    position: relative;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}
.banner--top {
    background-image: url("../images/banner-top.jpg");
    background-position: center bottom;
}
.banner--bottom {
    background-image: url("../images/banner-bottom.jpg");
    background-position: center top;
}

/* ---------- Zone centrale (hero + footer) ---------- */
.center {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: center;
    padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2rem);
    background: var(--sand);
}

/* ---------- Hero ---------- */
.hero {
    align-self: center;
    justify-self: center;
    max-width: var(--maxw);
    text-align: center;
    position: relative;
    z-index: 2;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    margin: 0 0 1.75rem;
    font-size: var(--fs-eyebrow);
    font-weight: 400;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--terracotta-2);
}
.eyebrow span {
    display: inline-block;
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: .5;
}

.brand {
    margin: 0;
    font-family: "Cormorant Garamond", "Times New Roman", serif;
    font-style: italic;
    font-weight: 400;
    font-size: var(--fs-brand);
    line-height: .95;
    letter-spacing: -.01em;
}
.brand__word {
    display: inline-block;
    background: linear-gradient(135deg, var(--bark) 30%, var(--terracotta-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tagline {
    margin: 1.25rem 0 0;
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: var(--fs-tagline);
    line-height: 1.4;
    color: var(--bark-soft);
}
.tagline em {
    color: var(--terracotta-2);
    font-style: italic;
}

.divider {
    width: 120px;
    height: 12px;
    margin: 1.75rem auto;
    color: var(--terracotta);
    opacity: .7;
}

.lede {
    margin: 0 auto 1.75rem;
    max-width: 32rem;
    color: var(--bark-soft);
    font-size: var(--fs-lede);
    line-height: 1.7;
}

/* ---------- Réseaux sociaux ---------- */
.social {
    display: flex;
    justify-content: center;
    gap: .35rem;
    margin-top: .5rem;
}
.social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: var(--bark-soft);
    transition: color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.social a:hover,
.social a:focus-visible {
    color: var(--terracotta-2);
    background: rgba(184, 132, 90, .12);
    transform: translateY(-2px);
}
.social a:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.social svg { width: 20px; height: 20px; }

/* ---------- Copy / mention ---------- */
.copy {
    margin: 2rem 0 0;
    text-align: center;
    font-size: .78rem;
    letter-spacing: .04em;
    color: var(--bark-soft);
    opacity: .7;
}
.copy a {
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    transition: color .25s var(--ease);
}
.copy a:hover { color: var(--terracotta-2); }

/* ---------- Reveal ---------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .9s var(--ease) .1s, transform .9s var(--ease) .1s;
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    :root { --banner-h: clamp(110px, 22vh, 200px); }
    .social a { width: 40px; height: 40px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}