/* =====================================================================
   FAKHAMA B.B.2C — Feuille de style globale
   Charte graphique : Fond crème #F8F4EA · Bleu Nuit #0B1E3D
                       Doré (accent) · Vert éco-responsable (accent)
   ===================================================================== */

:root {
    --color-cream: #F8F4EA;
    --color-navy: #0B1E3D;
    --color-gold: #F59E0B;
    --color-green: #10B981;
}

/* ---------------------------------------------------------------------
   Typographie de base
   --------------------------------------------------------------------- */
body {
    font-family: 'Inter', sans-serif;
}

.font-display {
    font-family: 'Playfair Display', serif;
}

/* ---------------------------------------------------------------------
   Défilement fluide (smooth scroll)
   Le décalage (scroll-margin-top) évite que la navbar fixe ne cache
   le haut de chaque section lors du défilement vers une ancre.
   --------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

section[id] {
    scroll-margin-top: 7rem;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ---------------------------------------------------------------------
   Sélection de texte & focus clavier — cohérents avec la charte
   --------------------------------------------------------------------- */
::selection {
    background-color: var(--color-gold);
    color: var(--color-navy);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Scrollbar personnalisée (navigateurs WebKit)
   --------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-navy);
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-gold);
    border-radius: 9999px;
    border: 2px solid var(--color-navy);
}

/* ---------------------------------------------------------------------
   Menu mobile (burger)
   --------------------------------------------------------------------- */
#mobile-menu.is-open {
    display: flex;
}

/* ---------------------------------------------------------------------
   Toast de confirmation (soumission du formulaire de contact)
   --------------------------------------------------------------------- */
#toast {
    transform: translateY(1.5rem);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

#toast.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* État d'erreur (échec d'envoi Formspree) : bascule l'accent vert vers un rouge discret */
#toast.is-error > div {
    border-color: rgba(220, 38, 38, 0.35);
}

#toast.is-error [data-toast-title] + p svg,
#toast.is-error > div > div:first-child {
    background-color: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.3);
}

#toast.is-error > div > div:first-child svg {
    color: #F87171;
}

/* ---------------------------------------------------------------------
   Champ de formulaire marqué en erreur (validation JS légère)
   --------------------------------------------------------------------- */
.field-error {
    border-color: #DC2626 !important;
    box-shadow: 0 0 0 1px #DC2626;
}