/*
 * Header refonte navy — styles complémentaires.
 * NE PAS importer dans app.css (convention projet).
 */

/* Logo sizing — fallback si h-8/h-36 absents du bundle prod Tailwind. */
header img[alt="Villa O'Kalm"] {
    max-height: 32px;
    width: auto;
    object-fit: contain;
}
footer img[alt="Villa O'Kalm"] {
    width: 100%;
    max-width: 280px;
    height: auto;
    object-fit: contain;
}

/* Burger open state : sur fond navy, bg-navy serait invisible — on remplace
   par une surbrillance cream subtile pour signifier l'état actif */
header .burger.open {
    background: rgba(251, 248, 243, 0.12);
    color: #FBF8F3;
    border-color: rgba(251, 248, 243, 0.25);
}

/* Nav desktop — fallback anti-retour à la ligne (complément à whitespace-nowrap Tailwind).
   Protège en prod si la classe est purgée du bundle. */
header nav a {
    white-space: nowrap;
}

/* Mobile menu stagger — extension pour item 8.
   app.css couvre jusqu'à nth-child(7) (7 items d'origine).
   Le menu compte désormais 8 items ("Accueil" supprimé du header, logo = retour accueil). */
.mm-sheet.open .mm-list li:nth-child(8) a { transition-delay: .38s; opacity: 1; transform: none; }

/* ── Mobile menu dark theme override ─────────────────────────────────
   app.css définit le menu en fond cream/navy (non modifiable).
   Ce bloc surcharge en cascade pour aligner sur le dark #181E26
   du header et du footer.
   Tokens : dark=#181E26  cream=#FBF8F3  sun=#F4C542  navy=#1E3A4C
   ────────────────────────────────────────────────────────────────── */

/* Fond du sheet + ombre renforcée sur fond sombre */
.mm-sheet {
    background: #181E26;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.50);
}

/* Trait de drag (handle) */
.mm-handle {
    background: rgba(251, 248, 243, 0.15);
}

/* Eyebrow "MENU" */
.mm-head .mm-eyebrow {
    color: rgba(251, 248, 243, 0.50);
}

/* Titre "Où voulez-vous aller ?" */
.mm-title {
    color: #FBF8F3;
}
/* ".mm-title i { @apply text-sun italic }" reste inchangé en app.css — soleil conservé */

/* Séparateurs entre items */
.mm-list a {
    border-bottom-color: rgba(251, 248, 243, 0.08);
}

/* Icônes circulaires */
.mm-list .ic {
    background: rgba(251, 248, 243, 0.08);
    color: #FBF8F3;
    border-color: rgba(251, 248, 243, 0.10);
}

/* Label principal */
.mm-list .lbl {
    color: #FBF8F3;
}

/* Sous-titre */
.mm-list .sub {
    color: rgba(251, 248, 243, 0.50);
}

/* Chevron droite */
.mm-list .arr {
    color: rgba(251, 248, 243, 0.30);
}

/* Footer du sheet : légèrement plus sombre que le sheet pour distinguer */
.mm-foot {
    background: #111720;
    border-top-color: rgba(251, 248, 243, 0.08);
    box-shadow: none;
}

/* "Contact direct" libellé */
.mm-foot .row {
    color: rgba(251, 248, 243, 0.70);
}
/* ".mm-foot .row a.num { @apply text-sun }" reste inchangé — numéro tel en soleil */

/* CTA "Réserver un séjour" → bg-sun text-navy, cohérent avec bouton header */
.mm-cta {
    background: #F4C542;
    color: #1E3A4C;
}
.mm-cta:hover {
    background: #E8B629;
    color: #1E3A4C;
}