/* =====================================================
   ESPACES ZEN — STYLES
   Version nettoyée
===================================================== */


/* texte commentaire pour savoir où modifier les items*/
.text-muted {display:none!important}

/* =====================================================
   VARIABLES
===================================================== */

:root {
    /* Couleurs inspirées du logo */
    --couleur-principale: #342D27;      /* brun/noir doux du logo */
    --couleur-secondaire: #638C18;      /* vert avocat-lime du logo */
    --couleur-secondaire-foncee: #39510e;
    --couleur-accent: #638C18;
    --couleur-or: #D9B36C;

    /* Neutres */
    --couleur-texte: #2F3430;
    --couleur-texte-doux: #68706A;
    --couleur-fond: #FFFFFF;
    --couleur-fond-doux: #F4F7EC;
    --couleur-blanc: #FFFFFF;
    --couleur-bordure: #E5E8DE;

    /* Compatibilité avec les anciens noms déjà utilisés */
    --zen: var(--couleur-secondaire);
    --zen-dark: var(--couleur-secondaire-foncee);
    --zen-soft: var(--couleur-fond-doux);
    --zen-gold: var(--couleur-or);

    /* Effets */
    --rayon: 1.25rem;
    --ombre: 0 10px 30px rgba(52, 45, 39, .08);
    --transition: all .25s ease;
}


/* =====================================================
   BASE
===================================================== */

body {
    font-family: "Nunito Sans", sans-serif;
    color: var(--couleur-texte);
    background-color: var(--couleur-fond);
    font-size: 1rem;
    line-height: 1.7;
}

img {
    max-width: 100%;
}

a {
    color: var(--couleur-secondaire);
}

a:hover {
    color: var(--couleur-secondaire-foncee);
}


/* =====================================================
   TYPOGRAPHIE
===================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Cormorant Garamond", serif;
    color: var(--couleur-principale);
    font-weight: 600;
    line-height: 1.2;
}

h1 {
    font-size: clamp(2.3rem, 5vw, 4.5rem);
    line-height: 1.05;
}

.handwriting {
    font-family: "Marck Script", cursive;
    color: var(--couleur-secondaire-foncee);
    font-weight: normal;
    line-height: 1.2;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.eyebrow {
    color: var(--couleur-secondaire);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .8rem;
}


/* =====================================================
   UTILITAIRES
===================================================== */

.bg-soft {
    background: var(--couleur-fond-doux);
}

.badge-zen {
    background: rgba(99, 140, 24, .12);
    color: var(--couleur-secondaire-foncee);
}


/* =====================================================
   NAVIGATION
===================================================== */

.logo-nav {
    width: 42px;
    height: 42px;
    object-fit: contain;
}


/* =====================================================
   HERO
===================================================== */

.hero {
    background:
        radial-gradient(circle at top right, rgba(99, 140, 24, .16), transparent 32%),
        radial-gradient(circle at bottom left, rgba(217, 179, 108, .12), transparent 30%),
        linear-gradient(135deg, #FFFFFF 0%, var(--couleur-fond-doux) 100%);
}


/* =====================================================
   BOUTONS
===================================================== */

.btn-zen {
    background: var(--couleur-secondaire-foncee);
    color: var(--couleur-blanc);
    border: 1px solid var(--couleur-secondaire-fonce);
    border-radius: 999px;
    font-weight: 700;
    transition: var(--transition);
}

.btn-zen:hover,
.btn-zen:focus {
    background: var(--couleur-secondaire);
    color: var(--couleur-blanc);
    border-color: var(--couleur-secondaire);
    transform: translateY(-2px);
}

.btn-reserver {
    margin-top: .5rem;
    width: 100%;
    border-radius: 999px;
    padding: .8rem 1.4rem;
    font-weight: 700;
    transition: var(--transition);
}

.btn-reserver:hover {
    transform: translateY(-2px);
}


/* =====================================================
   CARTES
===================================================== */

.card-body .h4 {
    color:var(--couleur-secondaire-foncee);
    font-weight:900;
}

.card-zen {
    border-radius: var(--rayon);
    overflow: hidden;
    border: 1px solid var(--couleur-bordure);
    box-shadow: var(--ombre);
}

.expert-photo {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #F3F3F3;
}

.expert-title {
    font-weight: 600;
    color: var(--couleur-accent);    
}
.location-photo {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #F3F3F3;
}



/* =====================================================
   RÉSEAUX SOCIAUX
===================================================== */

.liens-reseaux {
    display: flex;
    gap: .8rem;
    margin: 1.25rem 0;
}

.liens-reseaux a {
    color: var(--couleur-secondaire);
    font-size: 1.9rem;
    line-height: 1;
    text-decoration: none;
    transition: var(--transition);
}

.liens-reseaux a:hover {
    color: var(--couleur-secondaire-foncee);
    transform: translateY(-3px) scale(1.08);
}

.liens-reseaux {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-height: 42px;
    margin: 1.25rem 0;
}

.liens-reseaux a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--couleur-accent);
    font-size: 1.8rem;
    text-decoration: none;
}

.liens-reseaux i {
    display: inline-block;
    line-height: 1;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 767.98px) {
    .handwriting {
        font-size: 2rem;
    }

    .liens-reseaux {
        gap: .65rem;
    }
}