/* Style général inspiré d'une carte de visite */
body, html {
    font-size: 16px;
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Zen Kurenaido', sans-serif; /* Police manuscrite fine */
    background-color: #f7f3ed; /* Couleur papier washi / crème clair */
    color: #2c2c2c; /* Gris très foncé, moins agressif que le noir */
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

/* Partie gauche : s'adapte à la taille de l'image */
.left-side {
    flex: 0 0 auto; /* Ne grandit pas, ne rétrécit pas */
    width: 35%;      /* Ajustez ce pourcentage pour régler la taille de l'image */
    background-image: url('estampe.jpg'); 
    background-size: cover; /* On utilise cover pour remplir TOUT l'espace sans blanc */
    background-position: center;
    background-repeat: no-repeat;
}

/* Partie droite : prend tout l'espace restant */
.right-side {
    flex: 1; 
    overflow-y: auto;
    background-color: #f7f3ed;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 60px 40px;
}

.content {
    max-width: 700px; /* Augmenté de 450px à 700px */
    width: 90%;       /* Sécurité pour les petits écrans */
    text-align: center;
    margin: 0 auto;   /* Centre le bloc de texte dans la partie blanche */
}
/* On retire les marges du titre pour ne pas décaler le logo */
h1 {
    font-family: 'Zen Antique', serif;
    font-size: 2.2rem;
    letter-spacing: 0.2em;
    margin: 0 !important; /* Force la marge à zéro */
    color: #1a1a1a;
    text-transform: uppercase;
}

/* On règle l'espace du logo : 30px en haut et en bas */
.logo-milieu {
    display: block;
    margin: 30px auto !important; /* 30px en haut/bas, auto pour centrer gauche/droite */
    max-width: 80px;
    height: auto;
}

/* On retire la marge du haut du sous-titre */
.subtitle {
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    color: #8c7e6d;
    margin-top: 0 !important;
    margin-bottom: 60px;
    display: block;
}

/* Pour les paragraphes (corps du texte) */
p {
    font-family: 'Zen Kurenaido', sans-serif;
    line-height: 1.5;   /* Réduit de 2 à 1.5 pour un texte plus serré */
    font-size: 1.4rem;  /* Votre taille actuelle */
    color: #555;
    margin-bottom: 20px; /* Espace entre les paragraphes eux-mêmes */
}

/* Pour les titres de rubriques (Le Soin, Formation...) */
h2 {
    font-family: 'Zen Antique', serif;
    font-size: 1.8rem; /* Agrandit les titres de sections */
    margin-top: 50px;
    font-weight: normal;
    color: #4a4a4a;
}

/* Bouton minimaliste */
.button {
    display: inline-block;
    margin-top: 40px;
    padding: 12px 40px;
    border: 1px solid #2c2c2c; /* Bordure fine au lieu d'un bloc plein */
    color: #2c2c2c;
    text-decoration: none;
    font-size: 1.5rem;
    letter-spacing: 2px;
    transition: all 0.4s;
}

.button:hover {
    background-color: #2c2c2c;
    color: #f7f3ed;
}

/* Cacher la barre de défilement pour un look plus propre */
.right-side::-webkit-scrollbar {
    width: 0px;
}
.logo-milieu {
    display: block;
    margin: 10px auto; /* Espace autour du logo */
    max-width: 80px;   /* Change ce chiffre (ex: 60px ou 100px) pour ajuster la taille */
    height: auto;      /* Garde les proportions de l'image */
}
/* Adaptation pour téléphones */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* L'image passe au-dessus du texte */
        height: auto;
    }
    
    .left-side {
        height: 300px; /* Hauteur de l'image sur mobile */
        width: 100%;
    }
    
    .right-side {
        padding: 40px 20px;
    }
}