/* ----- Variables (Jour par défaut) ----- */

:root{
    /* Fonts */
    --font-title: "Oxanium", sans-serif;
    --font-text: "Montserrat", sans-serif;

    /* JOUR — Cosmic Lodge */
    --bg: #F3EEE7;
    --bg2: #E6DFD4;
    --text: #2B2B2B;
    --accent: #7FA8A0;
    --accent2: #F77F00;
    --structure: #173D2E; 

    /* UI */
    --container: 1120px;
    --gutter: 48px;
    --radius: 16px;
    --border: 1px solid rgba(43,43,43,.12);
    --shadow: 0 10px 24px rgba(0,0,0,.10);
}

/* ----- NUIT — Stellar Coffee ----- */

html[data-theme="night"],
body[data-theme="night"],
body.is-night-mode {
    --bg: #0B0F1A;
    --bg2: #131A2A;
    --text: #E6E9F0;
    --accent: #4CC9F0;
    --accent2: #A5FFD6;
    --structure: #0E1628;
    --border: 1px solid rgba(230,233,240,.14);
    --shadow: 0 14px 34px rgba(0,0,0,.45);
}

/* ----- Base ----- */
body{
    margin: 0;
    font-family: var(--font-text);
    color: var(--text);
    background: var(--bg);
    line-height: 1.7;
    font-size: 18px;
}

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

a{ 
    color: inherit; 
}

.row, .col{
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

section{ 
    padding: 40px 0; 
}

[hidden]{
    display: none !important;
}

/* ----- Typo ----- */
h1, h2, h3, h4 {
    font-family: var(--font-title);
    font-weight: 500;
    margin: 0 0 12px;
}

h1 { 
    font-size: clamp(36px, 5.5vw, 70px);
    letter-spacing: .04em; 
    line-height: 1.15; 
}

h2 { 
    font-size: clamp(24px, 4vw, 48px);
    letter-spacing: .03em; 
    line-height: 1.25; 
}

h3 { 
    font-size: clamp(14px, 2.5vw, 20px);
    letter-spacing: .02em; 
    line-height: 1.3; 
}

h4 { 
    font-size: clamp(8px, 1vw, 12px);
    text-transform: uppercase;
    letter-spacing: .07em; 
    line-height: 1.4;
    color: #A5FFD6;
}

p { 
    margin: 0 0 12px;
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: 1.7;
}

p:last-child{ 
    margin-bottom: 0; 
}

ul {
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: 1.7;
    margin: 0 0 12px;
    padding-left: 1.5em;
    list-style: none;
}

li {
    margin-bottom: 4px;
}

ul li::before {
    content: "✦";
    margin-right: 8px;
    color: var(--text);
}

li:last-child {
    margin-bottom: 0;
}

nav ul li::before, footer ul li::before {
    content: none;
}

/* ----- Switch is-day / is-night ----- */
body[data-theme="night"] .is-day,
body.is-night-mode .is-day{ display: none !important; }

body[data-theme="night"] .is-night,
body.is-night-mode .is-night{ display: inline !important; }

body[data-theme="night"] .is-night[hidden],
body.is-night-mode .is-night[hidden]{ display: inline !important; }

/* ----- Bouton CTA ----- */
.btn-cta {
    display: inline-block;
    font-family: var(--font-title);
    font-size: clamp(10px, 1.2vw, 15px);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: clamp(10px, 1.2vw, 14px) clamp(16px, 1.8vw, 22px);
    border-radius: 999px;
    background: var(--accent);
    color: var(--text);
    text-decoration: none;
    transition: background 180ms ease, color 180ms ease, text-shadow 180ms ease, transform 180ms ease;
    border: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.btn-cta:hover{
    background: var(--accent2);
    text-shadow: 0 0 6px rgba(255,255,255,.55), 0 0 14px rgba(255,255,255,.35);
    transform: translateY(-2px);
}

body[data-theme="night"] .btn-cta:hover,
body.is-night-mode .btn-cta:hover {
    background: var(--accent2);
    color: var(--structure);
}