/* ==========================================================================
   Relievo — accueil, refonte « verre liquide »
   Page statique, aucune dépendance réseau (police servie en local).

   Système :
   · Fond signature .............. planche topographique + bandes d'altitude
   · Verre réel .................. .glass et ses variantes (transparent, pas fumé)
   · Données cartographiques ..... .code / .datum (mono) = dispositif structurant
   ========================================================================== */

@font-face {
    font-family: "Sigmar";
    src: url("assets/fonts/sigmar-v9-latin-regular.woff2") format("woff2");
    font-display: swap;
}

:root {
    /* Encre */
    --ink:        #191815;
    --ink-2:      #211d17;

    /* Élévation : chaud en bas, frais en haut */
    --terracotta: #ce8f74;   /* accent — basses terres */
    --sage:       #8ba888;   /* accent-2 — hauteurs */

    /* Texte */
    --text:       #f6f1e9;
    --muted:      #b3aa9c;   /* muet, réchauffé (pas de gris neutre) */

    /* Verre — volontairement très transparent : le relief passe au travers. */
    --glass-fill:   rgba(255, 255, 255, 0.035);
    --glass-edge:   rgba(255, 255, 255, 0.26);
    --glass-sheen:  rgba(255, 255, 255, 0.45);
    --glass-shade:  rgba(0, 0, 0, 0.22);

    /* Type */
    --display: "Segoe UI Variable Display", "Inter", system-ui, -apple-system, sans-serif;
    --body:    "Segoe UI Variable Text", "Inter", system-ui, -apple-system, sans-serif;
    --mono:    "Cascadia Mono", "SF Mono", ui-monospace, Consolas, monospace;

    --nav-h: 66px;
    --annonce-h: 42px;
    --edge: clamp(1.25rem, 4vw, 4rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--body);
    color: var(--text);
    background: var(--ink);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { color: inherit; }

:focus-visible {
    outline: 2px solid var(--terracotta);
    outline-offset: 3px;
    border-radius: 4px;
}

img { max-width: 100%; display: block; }

.shell {
    width: min(1240px, 100% - var(--edge) * 2);
    margin-inline: auto;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0; z-index: 10000;
    padding: 0.6rem 1rem;
    background: var(--terracotta);
    color: #1a1a1a;
    font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   FOND SIGNATURE
   Trois couches fixes : bandes d'altitude (couleur), planche de courbes,
   grille de coordonnées. Le verre les réfracte via backdrop-filter.
   -------------------------------------------------------------------------- */

.terrain {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        /* halos d'ambiance */
        radial-gradient(70rem 50rem at 80% -5%, color-mix(in srgb, var(--terracotta) 20%, transparent), transparent 60%),
        radial-gradient(60rem 60rem at 5% 40%, color-mix(in srgb, var(--sage) 15%, transparent), transparent 60%),
        radial-gradient(70rem 55rem at 60% 108%, color-mix(in srgb, var(--terracotta) 12%, transparent), transparent 60%),
        /* bandes d'altitude : sage en haut → terracotta en bas */
        linear-gradient(to bottom,
            color-mix(in srgb, var(--sage) 8%, var(--ink)) 0%,
            var(--ink) 42%,
            var(--ink) 68%,
            color-mix(in srgb, var(--terracotta) 9%, var(--ink)) 100%);
}

/* Courbes de niveau animées (dessinées par app.js). Se lisent à travers le
   verre transparent des panneaux — c'est ce qui les fait paraître vitreux.
   Repli statique si le canvas ne tourne pas (voir .terrain.static). */
.terrain-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.55;
    mix-blend-mode: screen;
}

.terrain.static .terrain-canvas { display: none; }
.terrain.static {
    background-image:
        url("assets/topo.svg"),
        radial-gradient(70rem 50rem at 80% -5%, color-mix(in srgb, var(--terracotta) 20%, transparent), transparent 60%),
        radial-gradient(60rem 60rem at 5% 40%, color-mix(in srgb, var(--sage) 15%, transparent), transparent 60%),
        radial-gradient(70rem 55rem at 60% 108%, color-mix(in srgb, var(--terracotta) 12%, transparent), transparent 60%),
        linear-gradient(to bottom,
            color-mix(in srgb, var(--sage) 8%, var(--ink)) 0%,
            var(--ink) 42%, var(--ink) 68%,
            color-mix(in srgb, var(--terracotta) 9%, var(--ink)) 100%);
    background-size: cover;
    background-position: center;
}

/* --------------------------------------------------------------------------
   VERRE — transparent, pas fumé.
   L'effet vient des bords lumineux + saturation + transparence, non du flou.
   -------------------------------------------------------------------------- */

.glass {
    position: relative;
    background: var(--glass-fill);
    -webkit-backdrop-filter: blur(6px) saturate(1.9) brightness(1.06);
    backdrop-filter: blur(6px) saturate(1.9) brightness(1.06);
    border: 1px solid var(--glass-edge);
    box-shadow:
        inset 0 1px 0 var(--glass-sheen),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 -1px 0 var(--glass-shade),
        0 30px 60px -34px rgba(0, 0, 0, 0.8);
    border-radius: 22px;
}

/* Navigation : verre frappé, très transparent — le contenu défile
   visiblement derrière. C'est LE header « glass » demandé. */
.nav.glass {
    background: rgba(255, 255, 255, 0.03);
    -webkit-backdrop-filter: blur(16px) saturate(1.8);
    backdrop-filter: blur(16px) saturate(1.8);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),
        0 20px 45px -26px rgba(0, 0, 0, 0.75);
}

/* Reflet spéculaire diagonal — la « lumière qui glisse » du verre. */
.glass::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(255, 255, 255, 0.03) 22%,
        transparent 45%
    );
}

/* Scrim local : posé DANS le verre, derrière le seul texte, quand le fond
   est trop chargé pour rester lisible. N'assombrit pas tout le panneau. */
.glass--scrim > * { position: relative; z-index: 1; }
.glass--scrim::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(120% 100% at 30% 40%, rgba(20,18,15,0.5), transparent 75%);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   DONNÉES CARTOGRAPHIQUES — dispositif structurant
   -------------------------------------------------------------------------- */

.code {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--sage) 55%, #fff);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.datum {
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: #d7cfc1;
    font-variant-numeric: tabular-nums;
}

/* Voile local, uniquement derrière le texte des panneaux transparents. */
.pillar, .product-body, .place-body {
    background: linear-gradient(to bottom, rgba(16, 14, 11, 0.12), rgba(16, 14, 11, 0.34));
}

/* --------------------------------------------------------------------------
   BANDEAU + NAVIGATION
   -------------------------------------------------------------------------- */

.annonce {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    /* Hauteur auto : le texte passe à 2 lignes sur mobile. min-height garde le
       gabarit desktop ; sa hauteur réelle est mesurée en JS et réinjectée dans
       --annonce-h pour que la nav et le hero se recalent (sinon la 2e ligne
       débordait de la bande et se tassait sous la nav). */
    min-height: var(--annonce-h);
    display: grid;
    place-items: center;
    padding: 6px 1rem;
    background: var(--terracotta);
    color: #1a1a1a;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.25;
    letter-spacing: 0.2px;
    text-align: center;
}

.nav {
    position: fixed;
    top: calc(var(--annonce-h) + 14px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 900;
    width: min(1240px, 100% - var(--edge));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: var(--nav-h);
    padding: 0 0.7rem 0 1.5rem;
    border-radius: 999px;
}

.logo {
    font-family: "Sigmar", var(--display);
    font-size: 1.2rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--text);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.nav-links a {
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--muted);
    transition: color 0.2s, background 0.2s;
}
.nav-links a:hover,
.nav-links a[aria-current] { color: var(--text); background: rgba(255,255,255,0.09); }

.nav-cart {
    display: grid; place-items: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
}

.lang { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.06em; padding-left: 0.4rem; }
.lang a { text-decoration: none; opacity: 0.6; }
.lang a[aria-current] { opacity: 1; font-weight: 700; color: var(--terracotta); }
.lang span { opacity: 0.35; margin: 0 0.2rem; }

.burger {
    display: none;
    width: 44px; height: 44px;
    flex-direction: column; justify-content: center; gap: 5px;
    border: 0; border-radius: 50%;
    background: rgba(255,255,255,0.08);
    cursor: pointer;
}
.burger span { width: 18px; height: 2px; margin: 0 auto; background: var(--text); border-radius: 2px; transition: 0.25s; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    padding: calc(var(--annonce-h) + var(--nav-h) + 3rem) var(--edge) clamp(2.5rem, 6vh, 5rem);
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Voile bas pour ancrer le panneau sur une photo claire. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to top, rgba(20,18,15,0.55), transparent 45%);
}

.hero-panel {
    position: relative;
    z-index: 1;
    max-width: 40rem;
    padding: clamp(1.75rem, 3vw, 2.75rem);
    border-radius: 34px;
    /* Le hero se pose sur une photo claire, pas sur le fond sombre comme les
       autres panneaux : on assombrit un peu plus pour garder le même rendu
       givré ET la lisibilité du texte. */
    background: rgba(20, 18, 15, 0.32);
}

.hero h1 {
    margin: 0;
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(2.3rem, 6vw, 4.4rem);
    line-height: 1.03;
    letter-spacing: -0.03em;
}
.hero h1 em {
    display: block;
    font-style: normal;
    font-weight: 800;
    color: var(--terracotta);
}

.hero p {
    margin: 1.4rem 0 1.9rem;
    max-width: 32rem;
    color: rgba(246, 241, 233, 0.9);
    font-size: clamp(1rem, 1.4vw, 1.12rem);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* --------------------------------------------------------------------------
   BOUTONS
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.2s, background 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary { background: var(--terracotta); color: #1a1a1a; }
.btn-primary:hover { background: color-mix(in srgb, var(--terracotta) 85%, #fff); }

.btn-ghost {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.28);
    color: var(--text);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255,255,255,0.14); }

/* --------------------------------------------------------------------------
   SECTIONS
   -------------------------------------------------------------------------- */

.section { padding: clamp(4rem, 9vh, 7.5rem) 0; }

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vh, 4rem); }
.section-head.center { margin-inline: auto; text-align: center; }

.section-head .code { display: block; margin-bottom: 1rem; }

.section-head h2 {
    margin: 0;
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.section-head p {
    margin: 1.1rem 0 0;
    color: var(--muted);
    font-size: 1.02rem;
}

/* Piliers */
.pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 1.25rem;
}
.pillar { padding: 2.25rem 1.8rem; }
.pillar .icon { font-size: 1.9rem; line-height: 1; }
.pillar h3 {
    margin: 1.1rem 0 0.55rem;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.1rem;
}
.pillar p { margin: 0; color: var(--muted); font-size: 0.93rem; }

/* Catalogue — 5 entrées, une mise en avant */
.catalog {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.25rem;
}
.product {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    grid-column: span 2;
    transition: transform 0.35s cubic-bezier(0.2,0.8,0.2,1);
}
.product:hover { transform: translateY(-6px); }
.product--feature { grid-column: span 3; }
.product--wide { grid-column: span 3; }

.product-top {
    display: grid; place-items: center;
    aspect-ratio: 16 / 9;
    font-size: 3rem;
    border-bottom: 1px solid var(--glass-edge);
}
.product-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.5rem 1.6rem; }
.product .tag {
    align-self: flex-start;
    margin-bottom: 0.7rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--sage);
    color: #16180f;
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.product h3 { margin: 0 0 0.5rem; font-family: var(--display); font-weight: 600; font-size: 1.2rem; }
.product p { margin: 0 0 1.4rem; color: var(--muted); font-size: 0.92rem; }
.product .btn { margin-top: auto; align-self: flex-start; }

/* Lieux — carrousel. `safe center` : peu de fiches → centrées entre les
   flèches ; beaucoup → elles débordent et défilent depuis le début (le mot-clé
   `safe` évite que le début soit rogné et inatteignable au scroll). */
.places-wrap { position: relative; }
.places {
    display: flex;
    justify-content: safe center;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
}
.places::-webkit-scrollbar { display: none; }

.place {
    flex: 0 0 clamp(17rem, 30vw, 22rem);
    scroll-snap-align: start;
    overflow: hidden;
}

.arrow {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    display: grid; place-items: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    color: var(--text);
    font-size: 1.4rem;
    cursor: pointer;
    z-index: 5;
}
.arrow:hover { background: rgba(255,255,255,0.14); }
.arrow--prev { left: -23px; }
.arrow--next { right: -23px; }
/* Ratio calé sur les images recadrées (≈1.50) : cover ne rogne quasi rien. */
.place-photo { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
/* Slides empilées : fondu enchaîné piloté par .active (défilé au survol, JS). */
.place-slide {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.55s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.place-slide.active { opacity: 1; }
.place:hover .place-slide.active { transform: scale(1.04); }

/* Pastilles de progression du défilé. */
.place-dots {
    position: absolute; left: 0; right: 0; bottom: 0.6rem;
    display: flex; justify-content: center; gap: 0.34rem;
    z-index: 2; pointer-events: none;
    opacity: 0; transition: opacity 0.35s ease;
}
.place-photo:hover .place-dots,
.place-dots.show { opacity: 1; }
.place-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
    transition: background 0.3s ease, transform 0.3s ease;
}
.place-dot.active { background: rgba(255, 255, 255, 0.96); transform: scale(1.35); }

.place-body { padding: 1.3rem 1.4rem 1.5rem; }
.place-body h3 { margin: 0 0 0.3rem; font-family: var(--display); font-weight: 600; font-size: 1.15rem; }
.place-body p { margin: 0 0 1.1rem; color: var(--muted); font-size: 0.88rem; }
.place-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.place-price { color: var(--sage) !important; font-family: var(--mono); font-weight: 600; font-size: 0.9rem; }
.place-foot .btn { padding: 0.6rem 1.1rem; font-size: 0.72rem; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.footer { padding: clamp(3rem, 6vh, 5rem) 0 2.5rem; margin-top: clamp(3rem, 6vh, 5rem); }
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 2rem;
}
.footer-col h4 { margin: 0 0 1rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--sage); }
.footer-col p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.footer-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col a { color: var(--muted); text-decoration: none; font-size: 0.9rem; }
.footer-col a:hover { color: var(--terracotta); }
.footer-brand .logo { font-size: 1.4rem; display: inline-block; margin-bottom: 0.8rem; }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(246,241,233,0.1);
    color: var(--muted);
    font-size: 0.82rem;
}
.footer-bottom .footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-bottom a { color: var(--muted); text-decoration: none; }
.footer-bottom a:hover { color: var(--terracotta); }

.scroll-cue {
    position: absolute;
    left: 50%; bottom: 1.6rem;
    transform: translateX(-50%);
    width: 1px; height: 46px;
    background: linear-gradient(to bottom, transparent, var(--terracotta));
    transition: opacity 0.4s;
    z-index: 1;
}
.scroll-cue.hidden { opacity: 0; }

/* --------------------------------------------------------------------------
   ADAPTATIF
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
    .catalog { grid-template-columns: 1fr 1fr; }
    .product, .product--feature, .product--wide { grid-column: span 1; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
    .annonce { font-size: 0.82rem; }
    .nav { padding-left: 1.1rem; }
    .burger { display: flex; }
    .nav-links {
        position: absolute;
        top: calc(100% + 0.6rem); left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0.15rem;
        padding: 0.75rem;
        border-radius: 20px;
        background: rgba(25,23,19,0.9);
        -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
        border: 1px solid var(--glass-edge);
        display: none;
    }
    .nav-links.open { display: flex; }
    .nav-cart { width: auto; justify-content: flex-start; padding: 0.5rem 0.95rem; border-radius: 14px; }
    .catalog { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media (prefers-reduced-transparency: reduce) {
    .glass, .nav {
        background: var(--ink-2);
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
}

/* --------------------------------------------------------------------------
   AJOUTS RELIEVO (hors maquette) : bandeau remise + popup premiere visite
   -------------------------------------------------------------------------- */

/* Bandeau remise global (getDiscountGlobal), affiche sous le hero. */
.promo-strip {
    width: min(1240px, 100% - var(--edge) * 2);
    margin: 2.2rem auto 0;
    padding: 0.9rem 1.4rem;
    border-radius: 16px;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #16180f;
    background: var(--sage);
}

/* Popup premiere visite (annonce octobre 2026). Le panneau porte .glass. */
.rlv-welcome-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(10, 9, 7, 0.66);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.rlv-welcome-backdrop.show { opacity: 1; }
.rlv-welcome-card {
    max-width: 520px;
    width: 100%;
    padding: 2.1rem 1.9rem 1.8rem;
    text-align: center;
    border-radius: 26px;
    background: rgba(25, 23, 19, 0.55);
    transform: translateY(14px) scale(0.98);
    transition: transform 0.25s ease;
}
.rlv-welcome-backdrop.show .rlv-welcome-card { transform: none; }
.rlv-welcome-icon { font-size: 2.2rem; line-height: 1; margin-bottom: 0.5rem; }
.rlv-welcome-card h2 {
    margin: 0 0 1rem;
    font-family: var(--display);
    font-weight: 300;
    font-size: 1.7rem;
    color: var(--text);
}
.rlv-welcome-card p {
    margin: 0 0 0.9rem;
    color: rgba(246, 241, 233, 0.9);
    font-size: 1rem;
    line-height: 1.55;
}
.rlv-welcome-card .btn { margin-top: 0.8rem; }
@media (max-width: 600px) {
    .rlv-welcome-card { padding: 1.6rem 1.3rem 1.4rem; }
    .rlv-welcome-card h2 { font-size: 1.4rem; }
}

/* --------------------------------------------------------------------------
   HEADER LISIBLE SUR LA PHOTO — verre teinté sombre
   --------------------------------------------------------------------------
   Le hero est une photo CLAIRE et le verre du nav était quasi transparent
   (rgba(255,255,255,0.035)) → le texte clair passait mal. Tentative écartée :
   mix-blend-mode:difference (inversion par pixel) — inutilisable ici car sur un
   fond GRIS MOYEN (mur beige, carte verte) le blanc donne du gris moyen →
   contraste ~nul. On teinte donc le verre en SOMBRE frosté : le texte clair
   (--text) redevient lisible partout, l'esprit verre (flou + reflet) est gardé.
   Le voile suit la lettre (fond du pill), pas le mot. */
.nav.glass {
    background: rgba(20, 18, 15, 0.55);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
}
/* Léger halo sombre autour de chaque glyphe : sépare le texte du fond même là
   où le pill laisse passer une zone très claire (sécurité per-lettre). */
.nav .logo,
.nav-links a { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); }