/* ============================================================================
   style_site_public.css — Site public de reservation (vitrine + fiche)
   Charte : vert chene / ocre, Fraunces (titres) + Karla (texte).
   Prefixe de classes : sp-
   ============================================================================ */

:root {
    --sp-vert: #21402F;
    --sp-vert-sombre: #16291F;
    --sp-feuille: #58805F;
    --sp-feuille-pale: #E7EFE7;
    --sp-ocre: #C98D2E;
    --sp-ocre-pale: #F7EFDD;
    --sp-fond: #FBFAF7;
    --sp-carte: #FFFFFF;
    --sp-ligne: #E4E0D5;
    --sp-encre: #26302A;
    --sp-encre-douce: #6B7369;
    --sp-radius: 14px;
    --sp-ombre: 0 2px 10px rgba(33, 64, 47, .07), 0 12px 30px rgba(33, 64, 47, .06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation: none !important; transition: none !important; }
}

.sp-body {
    font-family: 'Karla', system-ui, sans-serif;
    background: var(--sp-fond);
    color: var(--sp-encre);
    line-height: 1.55;
    font-size: 16px;
}
.sp-body h1, .sp-body h2, .sp-body h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    line-height: 1.15;
    color: var(--sp-vert);
}
.sp-body a { color: inherit; }
.sp-body button { font-family: inherit; cursor: pointer; }
.sp-body img { max-width: 100%; display: block; }

.sp-wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* ── Boutons & focus ────────────────────────────────────────────────────── */
.sp-btn {
    display: inline-block;
    border: none;
    border-radius: 10px;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}
.sp-btn:focus-visible, .sp-body button:focus-visible,
.sp-body a:focus-visible, .sp-body select:focus-visible,
.sp-body input:focus-visible, .sp-body textarea:focus-visible {
    outline: 3px solid var(--sp-ocre);
    outline-offset: 2px;
}
.sp-btn-vert { background: var(--sp-vert); color: #fff; }
.sp-btn-vert:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(33, 64, 47, .25); }
.sp-btn-vert:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.sp-btn-ghost { background: transparent; color: var(--sp-vert); border: 1.5px solid var(--sp-vert); }
.sp-btn-bloc { width: 100%; text-align: center; font-size: 16px; padding: 14px; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.sp-header { background: var(--sp-fond); border-bottom: 1px solid var(--sp-ligne); position: sticky; top: 0; z-index: 50; }
.sp-header .sp-wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.sp-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sp-vert); }
.sp-logo svg { width: 30px; height: 30px; }
.sp-logo b { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 19px; color: var(--sp-vert); }
.sp-logo small { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-encre-douce); }
.sp-nav { margin-left: auto; display: flex; align-items: center; gap: 24px; font-size: 15px; }
.sp-nav a { text-decoration: none; color: var(--sp-encre-douce); font-weight: 500; }
.sp-nav a:hover { color: var(--sp-vert); }

/* ── Messages flash ─────────────────────────────────────────────────────── */
.sp-alert { border-radius: 10px; padding: 12px 18px; margin: 18px 0 0; font-size: 15px; }
.sp-alert-success { background: var(--sp-feuille-pale); color: var(--sp-vert); border: 1px solid #C5DAC7; }
.sp-alert-error { background: #FBEAE5; color: #8A3B2A; border: 1px solid #EBC7BC; }

/* ── Hero (vitrine) ─────────────────────────────────────────────────────── */
.sp-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding: 64px 24px 56px; }
.sp-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--sp-feuille); font-weight: 700; margin-bottom: 18px; }
.sp-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--sp-ocre); }
.sp-hero h1 { font-size: clamp(34px, 4.6vw, 54px); margin-bottom: 18px; }
.sp-hero h1 em { font-style: italic; color: var(--sp-ocre); }
.sp-lead { font-size: 18px; color: var(--sp-encre-douce); max-width: 46ch; margin-bottom: 28px; }
.sp-hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.sp-hero-photo { position: relative; border-radius: 20px 20px 20px 90px; overflow: hidden; box-shadow: var(--sp-ombre); aspect-ratio: 4 / 3.4; }
.sp-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.sp-hero-badge { position: absolute; left: 18px; bottom: 18px; background: #fff; border-radius: 12px; padding: 10px 16px; box-shadow: var(--sp-ombre); font-size: 13px; }
.sp-hero-badge b { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 16px; color: var(--sp-vert); }

/* ── Bandeau de reassurance ─────────────────────────────────────────────── */
.sp-reassure { border-top: 1px solid var(--sp-ligne); border-bottom: 1px solid var(--sp-ligne); background: #fff; }
.sp-reassure .sp-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 22px 24px; }
.sp-reassure div { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.sp-reassure svg { width: 26px; height: 26px; flex: none; color: var(--sp-feuille); }
.sp-reassure b { display: block; color: var(--sp-vert); }

/* ── Grille des logements (vitrine) ─────────────────────────────────────── */
.sp-list { padding: 64px 0; }
.sp-sec-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 30px; gap: 20px; }
.sp-sec-head h2 { font-size: clamp(26px, 3vw, 36px); }
.sp-sec-head p { color: var(--sp-encre-douce); max-width: 52ch; }
.sp-vide { color: var(--sp-encre-douce); font-style: italic; padding: 30px 0; }
.sp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.sp-card { background: var(--sp-carte); border: 1px solid var(--sp-ligne); border-radius: var(--sp-radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.sp-card:hover { transform: translateY(-4px); box-shadow: var(--sp-ombre); }
.sp-card-photo { position: relative; aspect-ratio: 16 / 10; display: block; background: var(--sp-feuille-pale); }
.sp-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.sp-photo-absente { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--sp-encre-douce); font-size: 14px; }
.sp-dispo-tag { position: absolute; top: 12px; left: 12px; background: #fff; border-radius: 99px; padding: 5px 12px; font-size: 12px; font-weight: 700; color: var(--sp-vert); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.sp-dispo-libre::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3E9A5C; margin-right: 6px; }
.sp-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sp-card h3 { font-size: 21px; }
.sp-card-meta { font-size: 13.5px; color: var(--sp-encre-douce); }
.sp-card-ville { font-size: 13.5px; color: var(--sp-feuille); font-weight: 700; }
.sp-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px dashed var(--sp-ligne); }
.sp-prix { font-size: 14px; color: var(--sp-encre-douce); }
.sp-prix b { font-family: 'Fraunces', Georgia, serif; font-size: 22px; color: var(--sp-vert); }
.sp-card-foot a { font-weight: 700; color: var(--sp-vert); text-decoration: none; font-size: 15px; }
.sp-card-foot a::after { content: " →"; }

/* ── Section "pourquoi en direct" ───────────────────────────────────────── */
.sp-direct { background: var(--sp-vert); color: #EDF2EC; padding: 64px 0; }
.sp-direct h2 { color: #fff; font-size: clamp(26px, 3vw, 34px); margin-bottom: 34px; }
.sp-direct h2 em { color: var(--sp-ocre); font-style: italic; }
.sp-direct-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.sp-direct h3 { color: #fff; font-size: 19px; margin-bottom: 8px; }
.sp-direct p { font-size: 15px; color: #C6D3C6; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.sp-footer { background: var(--sp-vert-sombre); color: #9FB1A2; padding: 40px 0; font-size: 14px; }
.sp-footer .sp-wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sp-footer b { color: #fff; font-family: 'Fraunces', Georgia, serif; font-size: 17px; }
.sp-footer a { color: #C6D3C6; text-decoration: none; }

/* ── Fiche logement ─────────────────────────────────────────────────────── */
.sp-crumb { padding: 20px 0 0; font-size: 14px; }
.sp-crumb a { color: var(--sp-feuille); text-decoration: none; font-weight: 600; }
.sp-fiche-head { padding: 14px 0 22px; display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sp-fiche-head h1 { font-size: clamp(28px, 3.4vw, 42px); }
.sp-fiche-loc { color: var(--sp-encre-douce); font-size: 15px; margin-top: 6px; }
.sp-facts { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-facts span { background: #fff; border: 1px solid var(--sp-ligne); border-radius: 10px; padding: 8px 14px; font-size: 13.5px; font-weight: 500; }
.sp-facts b { color: var(--sp-vert); }

/* Galerie : 5 photos = 1 grande + 4 ; degrade selon le nombre disponible */
.sp-gallery { display: grid; gap: 12px; border-radius: 18px; overflow: hidden; }
.sp-gallery-5, .sp-gallery-4, .sp-gallery-3 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 200px 200px; }
.sp-gallery-2 { grid-template-columns: 2fr 1fr; grid-template-rows: 320px; }
.sp-gallery-1 { grid-template-columns: 1fr; grid-template-rows: 380px; }
.sp-g { position: relative; background: var(--sp-feuille-pale); }
.sp-g img { width: 100%; height: 100%; object-fit: cover; }
.sp-gallery-5 .sp-g1, .sp-gallery-4 .sp-g1, .sp-gallery-3 .sp-g1 { grid-row: 1 / 3; }
.sp-gallery-3 .sp-g3 { grid-column: 2 / 4; }
.sp-g-plus { position: absolute; right: 12px; bottom: 12px; background: #fff; border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 700; color: var(--sp-vert); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.sp-g { cursor: pointer; }
.sp-g img { transition: transform .3s ease; }
.sp-g:hover img { transform: scale(1.04); }
.sp-g:focus-visible { outline: 3px solid var(--sp-ocre); outline-offset: 2px; }

/* ── Visionneuse plein écran ────────────────────────────────────────────── */
.sp-lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(22, 41, 31, .92); }
.sp-lightbox[hidden] { display: none; }
.sp-lb-scene { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; max-height: 100%; }
.sp-lb-scene img { max-width: min(1100px, 82vw); max-height: 82vh; object-fit: contain; border-radius: 10px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.sp-lb-compteur { color: #EDF2EC; font-size: 14px; letter-spacing: .04em; }
.sp-lb-fermer { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; transition: background .15s ease; }
/* Fleches ancrees aux bords de l'ecran : position fixe, independante de la photo */
.sp-lb-prec, .sp-lb-suiv { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: none; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 34px; line-height: 1; cursor: pointer; transition: background .15s ease; }
.sp-lb-prec { left: 24px; }
.sp-lb-suiv { right: 24px; }
.sp-lb-fermer:hover, .sp-lb-prec:hover, .sp-lb-suiv:hover { background: rgba(255, 255, 255, .26); }
.sp-lb-fermer:focus-visible, .sp-lb-prec:focus-visible, .sp-lb-suiv:focus-visible { outline: 3px solid var(--sp-ocre); outline-offset: 2px; }
@media (max-width: 640px) {
    .sp-lightbox { padding: 12px; }
    .sp-lb-prec, .sp-lb-suiv { width: 42px; height: 42px; font-size: 28px; }
    .sp-lb-prec { left: 8px; }
    .sp-lb-suiv { right: 8px; }
    .sp-lb-scene img { max-width: 96vw; max-height: 74vh; }
}

.sp-fiche-grid { display: grid; grid-template-columns: 1fr 400px; gap: 44px; padding: 36px 0 72px; align-items: start; }
.sp-fiche-main h2 { font-size: 24px; margin: 34px 0 14px; }
.sp-fiche-main h2:first-child { margin-top: 0; }
.sp-fiche-main p { color: #3D463F; margin-bottom: 12px; max-width: 68ch; }

.sp-equip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.sp-equip-grid h3 { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-feuille); margin-bottom: 10px; font-family: 'Karla', system-ui, sans-serif; font-weight: 700; }
.sp-equip-grid ul { list-style: none; }
.sp-equip-grid li { padding: 7px 0 7px 26px; font-size: 15px; border-bottom: 1px dashed var(--sp-ligne); position: relative; }
.sp-equip-grid li::before { content: "✓"; position: absolute; left: 2px; color: var(--sp-vert); font-weight: 700; }

.sp-infos-pratiques { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 6px; }
.sp-infos-pratiques div { background: #fff; border: 1px solid var(--sp-ligne); border-radius: 12px; padding: 14px 16px; font-size: 14px; }
.sp-infos-pratiques b { display: block; color: var(--sp-vert); margin-bottom: 2px; }

.sp-options { list-style: none; max-width: 480px; }
.sp-options li { display: flex; justify-content: space-between; gap: 20px; padding: 8px 0; font-size: 15px; border-bottom: 1px dashed var(--sp-ligne); }
.sp-options li span:last-child { font-weight: 700; color: var(--sp-vert); white-space: nowrap; }

/* ── Widget de reservation ──────────────────────────────────────────────── */
.sp-resa { position: sticky; top: 88px; background: #fff; border: 1px solid var(--sp-ligne); border-radius: 18px; box-shadow: var(--sp-ombre); padding: 22px; }
.sp-resa-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.sp-resa-prix { font-family: 'Fraunces', Georgia, serif; font-size: 26px; color: var(--sp-vert); }
.sp-resa-prix small { font-family: 'Karla', system-ui, sans-serif; font-size: 14px; color: var(--sp-encre-douce); }
.sp-direct-tag { display: inline-block; background: var(--sp-ocre-pale); color: #8A6118; font-size: 12px; font-weight: 700; border-radius: 99px; padding: 4px 10px; margin-bottom: 14px; }

.sp-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sp-cal-nav b { font-family: 'Fraunces', Georgia, serif; font-size: 16px; color: var(--sp-vert); text-transform: capitalize; }
.sp-cal-nav button { border: 1px solid var(--sp-ligne); background: #fff; border-radius: 8px; width: 32px; height: 32px; font-size: 16px; color: var(--sp-vert); }
.sp-cal-nav button:disabled { opacity: .35; cursor: default; }

.sp-cal { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.sp-cal th { font-weight: 700; color: var(--sp-encre-douce); padding: 4px 0; font-size: 11px; text-transform: uppercase; }
.sp-cal td { text-align: center; padding: 0; height: 38px; }
.sp-cal td button { width: 100%; height: 34px; border: none; background: transparent; border-radius: 8px; font-size: 13px; color: var(--sp-encre); }
.sp-cal td button:hover:not(:disabled) { background: var(--sp-feuille-pale); }
.sp-cal td button:disabled { color: #C8C4B8; text-decoration: line-through; cursor: default; }
.sp-cal td button.sp-jour-arr, .sp-cal td button.sp-jour-dep { background: var(--sp-vert); color: #fff; font-weight: 700; }
.sp-cal td button.sp-jour-arr { border-radius: 8px 0 0 8px; }
.sp-cal td button.sp-jour-dep { border-radius: 0 8px 8px 0; }
.sp-cal td button.sp-jour-in { background: var(--sp-feuille-pale); border-radius: 0; color: var(--sp-vert); font-weight: 600; }

.sp-cal-legende { display: flex; gap: 16px; font-size: 12px; color: var(--sp-encre-douce); margin: 10px 0 4px; }
.sp-cal-legende i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 5px; vertical-align: -1px; }
.sp-leg-sel { background: var(--sp-vert); }
.sp-leg-occ { background: #fff; border: 1px solid var(--sp-ligne); }

.sp-cal-hint { font-size: 13px; color: var(--sp-encre-douce); text-align: center; margin: 10px 0 14px; }
.sp-cal-hint.sp-cache { display: none; }

.sp-resume { display: none; background: var(--sp-fond); border: 1px solid var(--sp-ligne); border-radius: 12px; padding: 12px 14px; font-size: 14px; margin: 10px 0 14px; }
.sp-resume.sp-resume-visible { display: block; }
.sp-resume-dates { font-weight: 700; color: var(--sp-vert); }
.sp-resume table { width: 100%; margin-top: 8px; font-size: 13.5px; border-collapse: collapse; }
.sp-resume td { padding: 3px 0; color: var(--sp-encre-douce); }
.sp-resume td:last-child { text-align: right; color: var(--sp-encre); white-space: nowrap; }
.sp-resume-total td { border-top: 1px solid var(--sp-ligne); padding-top: 7px; font-weight: 700; color: var(--sp-vert); font-size: 14px; }

/* ── Formulaire de demande ──────────────────────────────────────────────── */
.sp-resa-form input[type="text"], .sp-resa-form input[type="email"],
.sp-resa-form input[type="tel"], .sp-resa-form textarea, .sp-resa-form select {
    width: 100%;
    border: 1px solid var(--sp-ligne);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: 'Karla', system-ui, sans-serif;
    background: #fff;
    margin-bottom: 10px;
    color: var(--sp-encre);
}
.sp-resa-form textarea { resize: vertical; }
.sp-form-row { display: flex; gap: 10px; align-items: center; }
.sp-form-row label { font-size: 13px; color: var(--sp-encre-douce); white-space: nowrap; margin-bottom: 10px; }
.sp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sp-resa-note { font-size: 12.5px; color: var(--sp-encre-douce); text-align: center; margin-top: 10px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .sp-hero { grid-template-columns: 1fr; padding: 44px 24px 40px; }
    .sp-hero-photo { aspect-ratio: 16 / 10; border-radius: 18px 18px 18px 60px; }
    .sp-reassure .sp-wrap { grid-template-columns: 1fr 1fr; }
    .sp-cards { grid-template-columns: 1fr 1fr; }
    .sp-direct-cols { grid-template-columns: 1fr; }
    .sp-fiche-grid { grid-template-columns: 1fr; }
    .sp-resa { position: static; }
}
@media (max-width: 640px) {
    .sp-cards { grid-template-columns: 1fr; }
    .sp-gallery-5, .sp-gallery-4, .sp-gallery-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 160px 120px; }
    .sp-gallery-5 .sp-g1, .sp-gallery-4 .sp-g1, .sp-gallery-3 .sp-g1 { grid-row: auto; grid-column: 1 / 3; }
    .sp-gallery-5 .sp-g4, .sp-gallery-5 .sp-g5 { display: none; }
    .sp-equip-grid { grid-template-columns: 1fr; }
    .sp-infos-pratiques { grid-template-columns: 1fr; }
    .sp-nav a:first-child { display: none; }
}