/* Styles de base adaptés à l'Huile Magique */
body {
    background-color: rgb(221, 209, 204); /* Ton sable de l'huile */
    cursor: url('/curseur.gif'), default;
    margin: 0;
    padding: 0;
}

* { box-sizing: border-box; }

/* --- TYPOGRAPHIE (Tailles exactes du nouveau site) --- */
h1 { font-family: "nyala", "Book Antiqua"; text-align: center; font-size: 1.8rem; color: purple; font-weight: bold; margin: 10px 0; }
h2 { font-family: "nyala", "Book Antiqua"; text-align: center; font-size: 1.5rem; color: purple; font-weight: bold; margin-top: 15px; }
h3 { font-family: "Book Antiqua", "Trebuchet MS", Verdana; font-size: 1.4rem; text-align: left; margin: 10px 30px; color: purple; }
h6 { font-family: "nyala", "Book Antiqua"; text-align: center; margin: 0; font-size: 1.75rem; color: purple; font-weight: bold; }

p { 
    font-family: "nyala", "Book Antiqua"; font-size: 1.2rem; text-align: left; 
    margin: 1.375rem 20px 0 20px; text-indent: 30px; color: purple; word-wrap: break-word; 
}

ul li { 
    font-family: "nyala", "Book Antiqua"; font-size: 1.25rem; text-align: left; 
    margin: 5px 30px; text-indent: 30px; color: purple; 
}

/* --- STRUCTURE (FLEXBOX) --- */
.main-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px;
}

.menu-gauche { flex: 0 0 170px; margin-right: 10px; }
.main-content { flex: 1; }

/* --- LES BLOCS (KYRANT) --- */
.kyrant {
    background: rgb(214, 200, 192); /* Sable foncé */
    width: 98%;
    text-align: center;
    margin: 10px auto;
    font-weight: 600;
    color: #993399;
    border-radius: 10px;
    border: 3px solid #933193; /* Bordure violette de 3px */
    padding: 10px;
}

/* Les sections internes (ton trait fin) */
.kyrant-section-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.item {
    flex: 1;
    border: thin solid #993399; /* Ton trait fin */
    border-radius: 8px;
    padding: 10px;
}

/* --- MENU GAUCHE --- */
A.menu {
    text-align: center; width: 168px; padding: 3px; margin: 0 auto 18px auto;
    font-size: 1.25rem; background-color: rgb(211, 255, 211); text-decoration: none;
    border: 4px groove #933193; border-radius: 7px;
    font-family: "Book Antiqua", "Trebuchet MS", Verdana;
    display: block; color: #851866;
}

/* --- INFOBULLES : DESIGN MODERNE + FIX POSITION MOBILE + FIX GOOGLE --- */
.info {
    color: #0000FF; /* Mots cliquables en bleu */
    text-decoration: underline;
    cursor: help;
    position: relative; /* Indispensable pour l'alignement */
    
    /* BLOQUE LA RECHERCHE AUTO GOOGLE SUR MOBILE */
    -webkit-user-select: none; 
    user-select: none;
    touch-action: manipulation;
}

.info span {
    display: none;
    position: absolute;
    top: 25px; /* Décalage sous le mot */
    
    /* CENTRAGE AUTOMATIQUE MOBILE ET DESKTOP */
    left: 50%;
    transform: translateX(-50%);
    width: 90vw; /* Largeur adaptée au téléphone */
    max-width: 280px; /* Limite la taille sur ordinateur */
    
    background-color: #fce4ec; /* Votre fond rose clair */
    color: #4A004A; /* Texte violet foncé */
    border: 2px solid #4A004A; /* Bordure violette épaisse */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
    z-index: 999;
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: normal; /* Évite que le texte de la bulle soit en gras */
}

.info:hover span {
    display: block;
}

.temoignage {
    background-color: rgb(255, 244, 219); 
    width: 90%;
    margin: 20px auto;
    border: 2px solid #933193; 
    border-radius: 10px;
    padding: 15px;
}
.temoignage {
    color: #000;
}


/* Bloc avec le vert du menu */
.kyravert {
    background-color: rgb(211, 255, 211) !important; /* Ton vert menu */
    width: 98%;
    margin: 10px auto;
    border: 3px solid #933193; /* Grosse bordure violette */
    border-radius: 10px;
    padding: 10px;
}

/* On s'assure que les items à l'intérieur n'ont pas de fond propre */
.kyravert .item {
    background-color: transparent !important;
    border: thin solid #933193; /* Trait fin violet */
    border-radius: 8px;
    padding: 10px;
    flex: 1;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .main-container, .kyrant-section-flex { flex-direction: column; }
    .menu-gauche { width: 100%; margin-bottom: 20px; }
    h1 { font-size: 1.5rem; }
    p, ul li { font-size: 1.10rem; }
}