* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* background-color: #f5e2d7; /* Couleur de fond pâle beige/orange */
    background-image: url('images/gen/bg2.jpg'); /* Chemin vers votre image de texture */
    /* background-size: cover; /* Couvre toute la section */
    background-position: center; /* Centre l'image de texture */
	font-family: Arial, sans-serif;
}

.container {
    text-align: center;
    padding: 20px;
}

h1 {
    font-family: 'Georgia', serif; /* Police à empattement */
	color: #403152;
    margin-bottom: 20px;
}

.header-image {
    width: 100%; /* Ajustez la taille selon vos besoins */
    max-width: 600px; /* Limitez la largeur maximale */
    height: auto;
    margin-bottom: 20px;
}

.section {
    justify-content: center;
    align-items: center;
    border: 3px solid #ffcc99; /* épaisseur et couleur du liseré principal */
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin: 20px auto; /* Centrer la section */
    width: fit-content; /* Ajuste la largeur au contenu */
	max-width: 100%; /* pour que l'élément ne dépasse pas l'écran */
    background-image: url('images/bg1.jpg'); /* Chemin vers votre image de texture */
    background-size: cover; /* Couvre toute la section */
    background-position: center; /* Centre l'image de texture */
}

.titre-section {
    text-align: center;
    font-weight: bold;
    margin-bottom: 15px;
    width: 100%; /* prend toute la largeur du cadre */
	color: #14516E;           /* couleur du texte */
    font-family: 'Georgia', serif; /* police */
    font-size: 1.2em;         /* taille du texte */
}

.inner-section {
    display: flex;    /* garde l’alignement côte à côte de l’image + bloc droit */
    align-items: center; /* centre verticalement les enfants */
	justify-content: flex-start; /* garde la disposition gauche-droite */
    border: 1px solid #403152; /* Pour le liseré */
	/* border-color: #403152; */
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    padding: 10px; /* Ajustez la marge intérieure */
    margin-left: 20px; /* Ajustez pour espacer de l'image */
    margin-right: 20px; /* Ajustez pour espacer de l'image */
	background-color: #EEEEF080;
}

.lien-similaire {
    color: #007BFF;  /* Remplace par la couleur de tes liens */
    text-decoration: none;  /* Si tu veux garder le soulignement */
    cursor: pointer;  /* Si tu veux que le curseur soit en forme de main */
}

.image {
    width: auto;    /* Ajustez la taille selon vos besoins */
    max-width: 300px; /* limite la largeur de la grande image */
    height: auto;
	display: block; /* important pour que la hauteur soit considérée */
    margin-right: 20px;
    margin-left: 20px;
}

.image-portrait {
    width: 150px; /* Ajustez la taille selon vos besoins */
    height: auto;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer; /* le curseur change pour montrer que c'est cliquable */
    border-radius: 8px; /* coins arrondis (optionnel) */
}

.image-portrait:hover {
  transform: scale(1.05); /* zoom léger */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* ombre élégante */
}

.content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.small-caps {
        font-variant: small-caps; /* utilise les petites majuscules */
		font-size: 1.3em; /* augmente la taille de 30%, à ajuster selon besoins */
}
.small-caps::first-letter {
    text-transform: uppercase; /* pour rendre la première lettre en majuscule */
}

.bloc-global {
	display: flex; 
	align-items: flex-start; 
	gap: 15px; /* espace entre blocs gauche et droit */
}

.bloc-gauche {
    /* float: left;   <-- supprimé */
    margin-right: 10px;
}

.bloc-droit {
    display: flex; 
	flex-direction: column;
	align-items: center; /* centre horizontalement les éléments */
	justify-content: center; /* centre verticalement l’intérieur si nécessaire */
	overflow: hidden; /* s'adapte à côté du float */
	margin-top: auto;
    margin-bottom: auto;
	margin-right: 15px;
	margin-left: 15px;
	border: 1px solid #403152; 
	border-radius: 10px; 
	padding-top: 5px;      /* petit espace en haut */
    padding-right: 8px;   /* conserve les côtés */
    padding-bottom: 10px;
    padding-left: 8px; 
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
	background-color: #EEEEF080;	
	}

.bloc-droit ul {
    margin: 10px 0 0 0;
    padding: 0;
    list-style: none;
	text-align: center; /* centre les textes dans la liste */
    width: 100%;        /* prend toute la largeur du bloc droit */
}

ul {
    list-style-type: none; /* Enlève les puces */
}

ul li {
    margin: 5px 0;
}

ul li a {
    text-decoration: none; /* Enlève le soulignement */
    color: #007bff; /* Couleur des liens */
}

ul li a:hover {
    text-decoration: underline; /* Souligne au survol */
}