@import url('https://fonts.googleapis.com/css2?family=Esteban&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body{
	padding:0;
	margin:0em;
	background:#F9F9F9;
}

img.logo{
	width:200px;
	padding: 2em 0 0 2em;
}
a.btn_retour_d {
    display: flex;          /* transforme en flexbox */
    align-items: center;    /* centre verticalement */
    padding-left: 2em;
    height: 4em;            /* hauteur fixe pour centrer */
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    text-transform: uppercase; 
    font-size: 1.2em; 
    color: #A9A9A9;
    text-decoration: none;  /* au besoin */
}




.titre_bloc_d {
    width: 100%;
    display: flex;
    justify-content: space-between; /* titre à gauche, rubrique à droite */
    align-items: center; /* centre verticalement */
    /*padding: 15px 25px;*/
    box-sizing: border-box;
		padding-bottom:0.6em;
		border-bottom:1px #D4D4D4 solid; 
}

.titre_bloc_d h1 {
    margin:0;
	font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    letter-spacing: 0.25rem;
	font-size:1.8em; 
	color:#666;
	
	
}

.rubrique_d {
    font-family: 'Montserrat', sans-serif;
    font-weight: 100 !important;
	font-style: italic;
	text-transform: uppercase;
    font-size: 1.8em;
    color:#999; /* couleur de la rubrique, modifiable */
	padding-left:1.5em;
	letter-spacing: 0.5rem;
}

/* Responsive : sur petit écran, titre au-dessus de la rubrique */
@media (max-width: 768px) {
    .titre_bloc_d {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5em;
    }
    
    .titre_bloc_d h1 {
        font-size: 1.6em;
    }

    .titre_bloc_d .rubrique_d {
        font-size: 0.9em;
    }
}

/* === Zone de contenu principale sous le H1 === */
.projet_detail_d {
    display: flex;
    flex-direction: column;
    align-items: center; /* centre horizontalement tout le contenu */
	
}

/* Bloc d’introduction (image gauche + texte droite) */
.bloc_intro_d {
    display: flex;
    flex-direction: row;
   /* align-items: center; */         /* centre verticalement l’image et le texte */
    justify-content: center;
    gap: 2em;                     /* espace entre image et texte */
    width: 70%;
    margin: 2em 2em 0 2em;
	
	border-top:1px #D4D4D4 solid;
	border-bottom:1px #D4D4D4 solid;
}

.bloc_info_d{
	padding-top: 1.5em;
	padding-right:3.5em;
}

/* Image à gauche */
.intro_image_d {
    flex: 0 0 35%;                /* largeur fixe à ~1/3 du bloc */
    max-width: 400px;
	padding-left:3.5em;
}

.intro_image_d img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    object-fit: cover;
}

/* Description à droite */
.intro_desc_d {
    flex: 1;                      /* occupe le reste de la largeur */
    font-family: "Esteban", serif;
	font-weight: 400;
	font-style: normal;
    font-size: 1em;
    color: #666;
	padding-top:1em;
}

.projet_detail_d .wysiwyg_d{
	margin-top:0em;
	padding-top:0em;
}

/* Texte principal du projet */
.wysiwyg_d {
    width: 70%;
    margin:0;
	padding:0;
  font-family: "Esteban", serif;
	font-weight: 400;
	font-style: normal;
    font-size: 1em;
   border-bottom: 1px #D4D4D4 solid;
   padding-bottom:2em;
    color: #333;
}

/* Responsive : pile sur mobile */
@media (max-width: 900px) {
    .bloc_intro_d {
        flex-direction: column;
        text-align: center;
    }

    .intro_image_d {
        max-width: 90%;
    }

    .intro_desc_d {
        width: 90%;
    }
}


/* Les 3 sous-blocs (desc, vignette, texte) font 90% de la largeur de la page */
.projet_detail_d .desc_d,
.projet_detail_d img {
    width: 70%;
    max-width: 1200px;     /* optionnel */
   margin: 1.5em auto;    /* espace vertical + centrage horizontal */
    box-sizing: border-box;
}

/* Image à 100% de la largeur disponible du bloc (donc 90% de la page) */
.projet_detail_d img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 4px; 
}

/* Optionnel : styliser un peu la description */
.projet_detail_d .desc_d {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1em;
    color: #444;
    text-align: justify;
}

/* Optionnel : un peu d’espace dans le texte principal */
.projet_detail_d .wysiwyg_d {
    font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-style: normal;
    font-size: 1em;
    color: #666;
}

.projet_detail_d .wysiwyg_d p{
   width:100%;
}


ul li a {
    display: block;
    color: #A9A9A9 !important;
    width: 40px;
    height: 40px;
    line-height: 40px;
    /* border: 2px solid #C8C8C8; */
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
	content: "\f1b4";
}

.footer .pictos ul li a i.fa{
	font-size:1.2em !important;
}