/* ══════════════════════════════════════════════
   THÈME : Voyage
   Rouge #e6173c · Or #9e8844 · Sable #f9f7f3
   Fonts : Montserrat (titres) + Raleway (corps)
══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Raleway:wght@300;400;700&display=swap');

/* ── Variables ── */
:root {
    --bg:           #ffffff;
    --text:         #292b2c;
    --text-muted:   #666;
    --accent:       #e6173c;
    --or:           #9e8844;
    --fond-sable:   #f9f7f3;
    --fond-gris:    #eeeeee;
    --nav-icon:     #292b2c;
    --font-heading: 'Montserrat', sans-serif;
    --font-body:    'Raleway', sans-serif;
    --header-h:     72px;
}

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

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    line-height: 1.25;
}

a { color: var(--accent); }

/* ── Utilitaires ── */
.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-uppercase, .text-uppercase * { text-transform: uppercase; }
.mt-3  { margin-top: 3rem; }
.rouge { color: var(--accent); }
.or    { color: var(--or); }

.fond-sable { background-color: var(--fond-sable); }
.fond-gris  { background-color: var(--fond-gris); }

.section { padding: 5rem 0; }

/* ── Site header ──
   La barre sticky est affichée via body.theme-voyage dans style.css.
   Ici on gère uniquement les styles visuels.
── */
.site-header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s ease;
}

.site-header-inner {
    display: flex;
    align-items: center;
    height: var(--header-h);
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Logo : nom du site depuis config.json */
.site-logo {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Point rouge après le logo (décoratif) */
.site-logo::after {
    content: '.';
    color: var(--accent);
}

.site-logo:hover { color: var(--text); }

/* ── Boutons ── */
.btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    transition: background 0.25s ease, border-color 0.25s ease;
    cursor: pointer;
    border: 2px solid transparent;
}

.btn-rouge {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.btn-rouge:hover {
    background: #cc092f;
    border-color: #cc092f;
}

.btn-outline {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
}

.btn-outline:hover {
    background: var(--accent);
    color: #fff;
}

/* ── Hero ──
   Background : défini par inline style sur .hero ou via la variable --hero-bg.
   Par défaut : dégradé bleu foncé (remplacer par url('assets/...'))
── */
.hero {
    background-image: var(--hero-bg,
        linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%));
    background-size: cover;
    background-position: center;
    min-height: 75vh;
    position: relative;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: #fff;
}

.hero-overlay .container { width: 100%; }

.hero h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
}

.hero p {
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin-bottom: 2rem;
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Valeurs ── */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2.5rem;
}

.ic-container {
    width: 90px;
    height: 90px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}

.valeur-item h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--or);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.valeur-item p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* ── Titre de section ── */
.section-titre {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
}

.section-intro {
    max-width: 580px;
    margin: 0 auto 2.5rem;
    color: var(--text-muted);
    font-size: 1rem;
}

/* ── Carte offre ── */
.offre-card {
    display: flex;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0,0,0,0.07);
    max-width: 900px;
    margin: 2rem auto;
}

.offre-visuel {
    flex: 1;
    min-height: 260px;
    overflow: hidden;
}

.offre-visuel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.offre-card:hover .offre-visuel img {
    transform: scale(1.04);
}

.offre-content {
    flex: 1;
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
}

.offre-content h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    text-transform: uppercase;
    color: var(--accent);
    letter-spacing: 0.04em;
    margin: 0;
}

.offre-content p {
    color: var(--text-muted);
    margin: 0;
}

/* ── Contenu éditables : pas de marges parasites ── */
.theme-voyage .page-content {
    padding: 0;
}

/* ── Hamburger : centrage vertical dans le header ── */
/* (la barre fait var(--header-h), le hamburger est fixed top:1.4rem) */
/* On garde la position actuelle, elle s'aligne naturellement avec le header 72px */

/* ── Responsive ── */
@media (max-width: 768px) {
    .offre-card        { flex-direction: column; }
    .offre-visuel      { min-height: 200px; }
    .hero              { min-height: 60vh; }
    .section           { padding: 3rem 0; }
    .offre-content     { padding: 2rem 1.5rem; }
}