@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&display=swap');

:root {
    --color-bg: #fbf7f1;
    --color-surface: #ffffff;
    --color-surface-alt: #f5efe4;
    --color-text: #24312b;
    --color-muted: #75766d;
    --color-border: #e9e0d2;
    --color-primary: #dd6b35;
    --color-primary-dark: #c25a2a;
    --color-primary-light: #fdece1;
    --color-accent: #0f5d52;
    --color-accent-light: #e5f2ef;
    --color-success: #16a34a;
    --color-success-light: #ecfdf3;
    --color-danger: #dc2626;
    --color-danger-light: #fef2f2;
    --color-warning: #d97706;
    --color-warning-light: #fffaeb;
    --color-purple: #7c3aed;
    --color-purple-light: #f5f3ff;
    --color-blue: #2563eb;
    --color-blue-light: #eff4ff;
    --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --radius: 11px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(36, 26, 16, 0.05);
    --shadow-md: 0 4px 12px rgba(36, 26, 16, 0.07), 0 1px 3px rgba(36, 26, 16, 0.08);
    --shadow-lg: 0 12px 32px rgba(36, 26, 16, 0.12), 0 2px 6px rgba(36, 26, 16, 0.06);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 28px 20px 72px;
}

.page-narrow {
    max-width: 520px;
    margin: 0 auto;
    padding: 28px 18px 72px;
}

h1 { font-family: var(--font-heading); font-size: 1.55rem; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    margin: 30px 0 4px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-border);
    letter-spacing: -0.01em;
}
h2:first-of-type { margin-top: 8px; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.card {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 22px;
    margin-bottom: 18px;
    animation: fadeInUp 0.4s ease-out;
}
.card-accent-danger { border-left-color: var(--color-danger); }
.card-accent-accent { border-left-color: var(--color-accent); }

@media (prefers-reduced-motion: reduce) {
    .card { animation: none; }
}

/* Brand mark + top navigation */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: var(--color-text);
}
.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.brand-name {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.08rem;
    letter-spacing: -0.01em;
}
.brand-tagline {
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-top: 1px;
}
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--color-primary), #f2a35f);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1rem;
    box-shadow: var(--shadow-sm);
}

.topbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    row-gap: 8px;
    column-gap: 16px;
    padding: 14px 24px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }

.nav-toggle-spacer { display: none; }

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--color-text);
    cursor: pointer;
}

@media (max-width: 560px) {
    .topbar { padding: 12px 16px; }
    .nav-toggle { display: block; order: 1; }
    .topbar .brand { order: 2; flex: 1; justify-content: center; text-align: center; }
    .nav-toggle-spacer { display: block; order: 3; width: 38px; flex-shrink: 0; }
    .topbar nav {
        display: none;
        order: 4;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding-top: 8px;
        margin-top: 2px;
        border-top: 1px solid var(--color-border);
    }
    .topbar nav.open { display: flex; }
    .topbar nav a { padding: 9px 10px; font-size: 0.9rem; }
}
.topbar nav a {
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-muted);
    padding: 7px 12px;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}
.topbar nav a:hover { background: var(--color-surface-alt); color: var(--color-text); }
.topbar nav a.active { color: var(--color-primary); background: var(--color-primary-light); }

/* Filtre de période (tableau de bord) : centré sur grand écran, aligné à gauche sur mobile pour
   laisser assez de place aux champs de date sans qu'ils se resserrent. */
.period-filter-row { justify-content: center; }
@media (max-width: 640px) {
    .period-filter-row { justify-content: flex-start; }
}

label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 0.87rem; color: var(--color-text); }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=url], input[type=tel], input[type=file], select {
    height: 43px;
    box-sizing: border-box;
    line-height: 21px;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Flèche dessinée en pur CSS (dégradé), plus fiable qu'une image SVG encodée selon les navigateurs. */
    background-image:
        linear-gradient(45deg, transparent 50%, var(--color-muted) 50%),
        linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
    background-position:
        right 18px center,
        right 13px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
}

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=url], input[type=tel], input[type=file], textarea, select {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.98rem;
    font-family: inherit;
    margin-bottom: 15px;
    background-color: var(--color-surface);
    color: var(--color-text);
    transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

textarea { min-height: 90px; resize: vertical; }

.file-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
    margin-bottom: 16px;
}
.file-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 11px 20px;
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: background 0.15s, transform 0.05s, box-shadow 0.15s;
}
button:hover, .btn:hover { background: var(--color-primary-dark); box-shadow: var(--shadow-md); }
button:active, .btn:active { transform: translateY(1px); }
button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-secondary { background: var(--color-surface); color: var(--color-text); border: 1.5px solid var(--color-border); box-shadow: none; }
.btn-secondary:hover { background: var(--color-surface-alt); }
.btn-danger { background: var(--color-danger); }
.btn-warning { background: var(--color-warning); }
.btn-warning:hover { background: #b45f04; }
/* Bouton de réinitialisation complète : distinct du rouge vif générique (.btn-danger, utilisé
   partout ailleurs pour des suppressions ponctuelles) - plus sobre pour une action bien plus rare
   et lourde de conséquences, mais toujours net (gras) pour ne pas passer inaperçu. */
.btn-reset-data { background: #b91c1c; font-weight: 700; }
.btn-reset-data:hover { background: #991b1b; }
.btn-small { padding: 7px 13px; font-size: 0.83rem; border-radius: 8px; }
.btn-block { width: 300px; max-width: 100%; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; vertical-align: top; }
th { color: var(--color-muted); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
tbody tr { transition: background 0.1s; }
tbody tr:hover { background: var(--color-surface-alt); }
tbody tr:last-child td { border-bottom: none; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Rangée de badges de réassurance sur la page voyageur (pas de puce, juste une icône + texte) */
.reassure-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.reassure-row-tight { row-gap: 4px; }
.badge-reassure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--color-accent-light);
    color: var(--color-accent);
}
.badge-pending_guest_info { background: var(--color-warning-light); color: var(--color-warning); }
.badge-link_sent { background: var(--color-blue-light); color: var(--color-blue); }
.badge-id_uploaded { background: var(--color-accent-light); color: var(--color-accent); }
.badge-info_sent { background: var(--color-success-light); color: var(--color-success); }
.badge-cancelled { background: var(--color-surface-alt); color: var(--color-muted); }
.badge-completed_no_cin { background: var(--color-danger-light); color: var(--color-danger); }

.flash { padding: 13px 16px; border-radius: var(--radius); margin-bottom: 18px; font-size: 0.92rem; font-weight: 500; border: 1px solid transparent; }
.flash-success { background: var(--color-success-light); color: #166534; border-color: #bbf7d0; }
.flash-error { background: var(--color-danger-light); color: #991b1b; border-color: #fecaca; }

.help-text { color: var(--color-muted); font-size: 0.85rem; margin-top: -9px; margin-bottom: 15px; }
h2 + .help-text { margin-top: 6px; }

.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.inline-form .field { flex: 1; min-width: 140px; margin-bottom: 0; }
.inline-form input, .inline-form select { margin-bottom: 0; }
.inline-form .field select { max-width: 420px; }

/* Largeurs fixes (desktop) pour le filtre de la liste des réservations : en classe plutôt qu'en
   style en ligne, pour que la règle mobile ci-dessous (même spécificité, mais déclarée après)
   reprenne bien la main et empile les champs en pleine largeur sous 480px. */
.inline-form .field-w220 { flex: 0 0 auto; width: 220px; }
.inline-form .field-w180 { flex: 0 0 auto; width: 180px; }
.inline-form .field-w130 { flex: 0 0 auto; width: 130px; }
.inline-form .field-w200 { flex: 0 0 auto; width: 200px; }

@media (max-width: 480px) {
    /* Un champ par ligne : sur mobile, l'icône native du sélecteur de date chevauche le texte
       si deux champs partagent la largeur, quelle que soit leur taille. Le plafond de largeur est
       posé sur le champ lui-même (pas sur .field), sinon il annule le flex-basis:100% et empêche
       le retour à la ligne. */
    .inline-form .field { flex-basis: 100%; min-width: 0; }
    .inline-form .field input, .inline-form .field select { max-width: 260px; }
}

/* Cartes de réservation (liste réservations.php) */
.res-list { display: flex; flex-direction: column; gap: 14px; }
.res-card {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 18px 20px;
    transition: box-shadow 0.15s;
    animation: fadeInUp 0.3s ease-out;
}
.res-card:hover { box-shadow: var(--shadow-md); }
.res-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.res-property { font-family: var(--font-heading); font-weight: 700; font-size: 1.03rem; color: var(--color-text); }
.res-dates { color: var(--color-muted); font-size: 0.86rem; margin-top: 4px; }
.res-guest {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--color-border);
    font-size: 0.9rem;
}
.res-actions { margin-top: 14px; align-items: center; }
.res-actions .field { min-width: 170px; }

/* Mini-graphique de taux d'occupation mensuel (tableau de bord) */
.occupancy-chart { display: flex; align-items: stretch; gap: 2px; margin: 6px 0 10px; }
.occupancy-col { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.occupancy-value { height: 28px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; white-space: nowrap; }
.occupancy-value-nights { font-size: 0.62rem; color: var(--color-muted); line-height: 1.2; }
.occupancy-value-pct { font-size: 0.72rem; font-weight: 600; color: var(--color-text); line-height: 1.2; }
.occupancy-track { height: 48px; width: 100%; display: flex; align-items: flex-end; border-bottom: 1px solid var(--color-border); }
.occupancy-bar { width: 100%; background: var(--color-muted); opacity: 0.4; border-radius: 3px 3px 0 0; min-height: 2px; }
.occupancy-bar-current { background: var(--color-primary); opacity: 1; }
.occupancy-label { font-size: 0.62rem; color: var(--color-muted); margin-top: 3px; text-transform: capitalize; white-space: nowrap; }

/* Dashboard stat tiles */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-tile {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 10px 18px;
    text-align: center;
}
.stat-tile .stat-value { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.stat-tile .stat-label { color: var(--color-muted); font-size: 0.8rem; font-weight: 600; margin-top: 6px; }

/* Section marker used on the guest-facing multi-part form */
.section-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 0.85rem;
    margin-right: 8px;
}

/* ---------- Page marketing (public/index.php) ---------- */
.mkt-layout { display: flex; align-items: flex-start; }
.mkt-sidebar {
    display: none;
    flex-direction: column;
    width: 288px;
    flex-shrink: 0;
    background: linear-gradient(165deg, #ffd9b8 0%, #f2a35f 100%);
    border-right: none;
    padding: 28px 22px;
    position: sticky;
    top: 0;
    height: 100vh;
    box-sizing: border-box;
    color: #14211d;
}
.mkt-sidebar-logo {
    width: 132px;
    height: 132px;
    border-radius: 24px;
    box-shadow: 0 6px 18px rgba(20, 33, 29, 0.18);
    margin: 0 auto 16px;
    display: block;
}
.mkt-back-to-top { transition: opacity 0.15s; }
.mkt-back-to-top:hover, .mkt-back-to-top:focus-visible { opacity: 0.75; }
.mkt-sidebar .brand { justify-content: center; width: 100%; }
.mkt-sidebar .brand-text { align-items: center; text-align: center; }
.mkt-sidebar .brand { margin-bottom: 6px; color: #14211d; }
.mkt-sidebar .brand-tagline { color: rgba(20, 33, 29, 0.65); }
.mkt-sidebar-law {
    margin-top: 18px;
    padding: 12px 13px;
    background: rgba(255, 255, 255, 0.45);
    border-left: 3px solid rgba(20, 33, 29, 0.4);
    border-radius: 0 10px 10px 0;
}
.mkt-sidebar-law-badge { display: block; font-weight: 800; font-size: 0.86rem; color: #14211d; margin-bottom: 5px; }
.mkt-sidebar-law p { color: rgba(20, 33, 29, 0.8); font-size: 0.84rem; line-height: 1.5; margin: 0; }
.mkt-sidebar-pitch { color: rgba(20, 33, 29, 0.8); font-size: 0.9rem; line-height: 1.55; margin: 18px 0 26px; }
.mkt-sidebar-links { display: flex; flex-direction: column; gap: 5px; }
.mkt-sidebar-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.5);
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    color: #14211d;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.97rem;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mkt-sidebar-links a:hover { background: rgba(255, 255, 255, 0.75); color: #0a0f0d; border-color: rgba(255, 255, 255, 0.95); }
.mkt-sidebar-trust {
    margin: 22px 0;
    padding: 14px 14px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.mkt-sidebar-trust span { color: rgba(20, 33, 29, 0.85); font-size: 0.86rem; display: flex; align-items: center; gap: 8px; }
.mkt-sidebar-foot { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.mkt-sidebar-foot .btn { width: 100%; text-align: center; box-sizing: border-box; }
.mkt-sidebar-foot .btn-secondary { background: rgba(255, 255, 255, 0.4); color: #14211d; border-color: rgba(20, 33, 29, 0.3); box-shadow: none; }
.mkt-sidebar-foot .btn-secondary:hover { background: rgba(255, 255, 255, 0.6); }
.mkt-main { flex: 1; min-width: 0; }

.mkt-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    max-width: 1100px;
    margin: 0 auto;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-bg);
    box-shadow: 0 1px 0 rgba(20, 33, 29, 0.08);
}
.mkt-nav-links { display: flex; align-items: center; gap: 8px; }
.mkt-nav-links a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--color-surface-alt);
    transition: background 0.15s, color 0.15s;
}
.mkt-nav-links a:hover { background: var(--color-primary-light); color: var(--color-primary); }
.mkt-nav-links a.mkt-nav-cta { background: var(--color-primary); color: #fff; }
.mkt-nav-links a.mkt-nav-cta:hover { background: var(--color-primary-dark); color: #fff; }
@media (max-width: 640px) {
    .mkt-nav-links a.mkt-nav-hide-mobile { display: none; }
}

@media (min-width: 900px) {
    .mkt-sidebar { display: flex; }
    .mkt-nav { display: none; }
}

.mkt-hero {
    max-width: 760px;
    margin: 0 auto;
    padding: 8px 20px 20px;
    text-align: center;
}
@media (max-width: 640px) {
    .mkt-hero { padding: 0 20px 12px; }
    .mkt-nav { padding: 10px 20px; }
}
.mkt-hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(1.7rem, 5vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
}
.mkt-hero-brand { color: var(--color-primary); }
.mkt-hero-fluid { color: var(--color-accent); }
.mkt-hero p.lead { font-size: 1.08rem; color: var(--color-muted); max-width: 560px; margin: 0 auto 26px; }
.mkt-cta-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.mkt-cta-row .btn { padding: 13px 26px; border-radius: 999px; font-size: 0.98rem; }

.mkt-section { max-width: 1100px; margin: 0 auto; padding: 56px 20px; }
.mkt-section-alt {
    background: linear-gradient(180deg, var(--color-surface) 0%, #f5d7c3 100%);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.mkt-section-tint {
    background: linear-gradient(180deg, var(--color-surface) 0%, #c3e6dd 100%);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.mkt-eyebrow {
    display: block;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 10px;
}
.mkt-h2 {
    font-family: var(--font-heading);
    text-align: center;
    font-size: clamp(1.35rem, 3.5vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    max-width: 620px;
    margin: 0 auto 40px;
    line-height: 1.25;
}

/* Mockup téléphone (page marketing) : recréation statique en CSS du formulaire voyageur mobile,
   pour montrer "c'est bien sur mobile" sans dépendre d'une vraie capture d'écran à maintenir. */
.phone-mockup {
    width: 260px;
    margin: 0 auto;
    background: #1a1712;
    border-radius: 36px;
    padding: 10px;
    box-shadow: var(--shadow-lg, 0 20px 40px rgba(0,0,0,0.25));
    position: relative;
}
.phone-notch {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 18px;
    background: #1a1712;
    border-radius: 0 0 12px 12px;
    z-index: 2;
}
.phone-screen {
    background: var(--color-bg);
    border-radius: 26px;
    padding: 30px 14px 16px;
    text-align: left;
    overflow: hidden;
}
.phone-statusbar { display: flex; justify-content: space-between; font-size: 0.6rem; font-weight: 700; color: var(--color-text); margin-bottom: 10px; }
.phone-brand { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; margin-bottom: 10px; }
.phone-greeting { font-weight: 800; font-size: 0.82rem; margin: 0 0 2px; }
.phone-intro { font-size: 0.68rem; color: var(--color-muted); margin: 0 0 12px; line-height: 1.3; }
.phone-field-row { display: flex; align-items: center; gap: 6px; margin: 10px 0 5px; }
.phone-field-label { font-size: 0.68rem; font-weight: 700; }
.phone-upload-btn {
    font-size: 0.62rem;
    font-weight: 700;
    text-align: center;
    background: var(--color-surface);
    border: 1.5px dashed var(--color-border);
    border-radius: 8px;
    padding: 7px;
    color: var(--color-muted);
}
.phone-input {
    font-size: 0.66rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 6px 8px;
    margin-top: 5px;
    color: var(--color-text);
}
.phone-sig-pad {
    background: #fff;
    border: 1.5px solid var(--color-border);
    border-radius: 8px;
    height: 40px;
    margin-top: 4px;
    padding: 2px 6px;
}
.phone-sig-pad svg { width: 100%; height: 100%; }
.phone-submit-btn {
    margin-top: 14px;
    background: var(--color-primary);
    color: #fff;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 9px;
    border-radius: 999px;
}
@media (max-width: 480px) {
    .phone-mockup { width: 220px; }
}

.mkt-section-phone { padding-top: 12px; }
@media (max-width: 640px) {
    .mkt-section-phone { padding-top: 0; }
}

.mkt-law-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.mkt-law-tile { text-align: center; padding: 10px; }
.mkt-law-tile .num { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; color: var(--color-primary); }
.mkt-law-tile .lbl { font-weight: 700; margin-top: 4px; }
.mkt-law-tile .desc { color: var(--color-muted); font-size: 0.88rem; margin-top: 6px; }

.mkt-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.mkt-step { text-align: center; }
.mkt-step .step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 999px;
    background: var(--color-primary); color: #fff;
    font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem;
    margin-bottom: 14px;
}
.mkt-step h3 { font-family: var(--font-heading); font-size: 1rem; margin: 0 0 8px; }
.mkt-step p { color: var(--color-muted); font-size: 0.9rem; margin: 0; }

.mkt-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.mkt-feature-card {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 22px;
}
.mkt-feature-card .icon { font-size: 1.5rem; margin-bottom: 10px; }
.mkt-feature-card h3 { font-family: var(--font-heading); font-size: 0.98rem; margin: 0 0 8px; }
.mkt-feature-card p { color: var(--color-muted); font-size: 0.88rem; margin: 0; }

/* Echelle de tarifs dégressive par nombre de logements - volontairement différente d'une grille
   de cartes classique (façon "3 formules côte à côte") : ici un seul prix continu qui baisse à
   mesure qu'on ajoute des logements, présenté comme une progression plutôt que des offres à choisir. */
.mkt-pricing-scale {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 980px;
    margin: 0 auto;
}
.mkt-pricing-step {
    background: linear-gradient(165deg, rgba(92, 217, 201, 0.16) 0%, rgba(48, 199, 181, 0.1) 100%);
    border: 1.5px solid rgba(48, 199, 181, 0.22);
    border-radius: 18px;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 1 1 150px;
    min-width: 140px;
    text-align: center;
    box-shadow: 0 8px 20px -12px rgba(15, 93, 82, 0.35);
}
.mkt-pricing-step .step-count { font-weight: 700; font-size: 0.88rem; color: var(--color-muted); }
.mkt-pricing-step .step-price {
    font-family: var(--font-heading);
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mkt-pricing-step .step-price small { font-size: 0.65rem; font-weight: 700; color: var(--color-muted); letter-spacing: 0; margin-top: 2px; }
.mkt-pricing-step .step-badge {
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(15, 93, 82, 0.13);
    color: var(--color-accent);
    padding: 4px 10px;
    border-radius: 999px;
}
/* Dernière tuile (Pro / conciergeries) : mise en valeur avec le orange de la marque (couleur des
   CTA/glow ailleurs sur le site) plutôt que le turquoise des 3 autres, pour signaler visuellement
   qu'elle inclut des avantages en plus (hotline, formation) et pas juste un tarif dégressif. */
.mkt-pricing-step.featured {
    background: linear-gradient(165deg, #ef9866 0%, var(--color-primary) 100%);
    border-color: transparent;
    box-shadow: 0 14px 30px -10px rgba(221, 107, 53, 0.5);
    transform: translateY(-6px);
}
.mkt-pricing-step.featured .step-count,
.mkt-pricing-step.featured .step-price,
.mkt-pricing-step.featured .step-price small { color: #fff; }
.mkt-pricing-step.featured .step-badge { background: rgba(255, 255, 255, 0.25); color: #fff; }
.step-perks { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.76rem; font-weight: 600; }
.step-perks li { color: rgba(255, 255, 255, 0.95); }
.step-perks li::before { content: "✓ "; }
.mkt-pricing-arrow { display: flex; align-items: center; color: var(--color-border); font-size: 1.4rem; font-weight: 300; }
@media (max-width: 720px) {
    .mkt-pricing-scale { flex-direction: column; align-items: stretch; }
    .mkt-pricing-arrow { transform: rotate(90deg); align-self: center; }
    .mkt-pricing-step.featured { transform: none; }
}

.mkt-footer { text-align: center; padding: 40px 20px; color: var(--color-muted); font-size: 0.85rem; }
.mkt-footer a { color: var(--color-muted); }

/* Liste de lignes compacte (sans tableau), pour rester lisible sur mobile sans défilement horizontal */
.row-list { border-top: 1px solid var(--color-border); margin-top: 4px; }
.row-list-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.row-list-item .main { font-weight: 600; font-size: 0.92rem; }
.row-list-item .sub { color: var(--color-muted); font-size: 0.82rem; margin-top: 2px; }
.row-list-item .side { text-align: right; flex-shrink: 0; }
@media (max-width: 480px) {
    .row-list-item .side { text-align: left; width: 100%; }
}

/* Halo lumineux sous les boutons principaux de la page marketing, façon clicgest.ma */
.mkt-glow-btn { box-shadow: 0 12px 24px -8px rgba(221, 107, 53, 0.45); }
.mkt-glow-btn:hover { box-shadow: 0 14px 28px -8px rgba(221, 107, 53, 0.55); }

/* Apparition en douceur au défilement (façon clicgest.ma / Elementor) */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.mkt-pricing-step.featured.reveal.is-visible { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .mkt-pricing-step.featured.reveal { transform: translateY(-6px); }
}
@media (max-width: 720px) {
    .mkt-pricing-step.featured.reveal.is-visible { transform: none; }
}

/* Calendrier des réservations par logement (calendar.php) */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}
.cal-weekday {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-muted);
    padding: 4px 0 8px;
    text-transform: uppercase;
}
.cal-day {
    min-height: 52px;
    height: 100%;
    background: var(--color-surface-alt);
    border-radius: 3px;
    padding: 4px 5px;
    overflow: hidden;
    box-sizing: border-box;
}
.cal-day.out-month { opacity: 0.35; }
.cal-day.today .num { color: var(--color-primary); }
.cal-day .num { display: block; font-weight: 700; font-size: 0.78rem; }
.cal-day .guest {
    display: block;
    font-size: 0.62rem;
    font-weight: 600;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 560px) {
    .cal-day { min-height: 40px; padding: 3px 4px; }
    .cal-day .num { font-size: 0.7rem; }
    .cal-day .guest { font-size: 0.56rem; }
}

/* Barre de progression (sauvegarde avant reset) */
.progress-track {
    background: var(--color-surface-alt);
    border-radius: 999px;
    height: 14px;
    overflow: hidden;
    margin: 14px 0 10px;
}
.progress-fill {
    background: var(--color-primary);
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease-out;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #16130f;
        --color-surface: #201b15;
        --color-surface-alt: #2a231b;
        --color-text: #f2ece1;
        --color-muted: #b3a999;
        --color-border: #3a3125;
        --color-primary-light: #3a2416;
        --color-accent-light: #143631;
        --color-success-light: #10281c;
        --color-danger-light: #2c1618;
        --color-warning-light: #2b220f;
        --color-purple-light: #241a3d;
        --color-blue-light: #1a2540;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
        --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
    }
    input, textarea, select { background: var(--color-surface-alt); color: var(--color-text); }
    .btn-secondary { background: var(--color-surface-alt); }
}