/* Supprimer les marges par défaut */
body, html {
  margin: 0;
  padding: 0;
}


.conteneur-a-propos {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* plutôt que 'left' */
	justify-content: center;
	background: #F1F1F1;
	width: 100%;
	max-width: 1050px;
	margin: 0 auto;          /* centre horizontalement */

  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #242424;
  padding: 40px 0 60px 0;
}

.bloc-a-propos {
  display: flex;
  width: 100%;
  max-width: 1050px;
  flex-direction: row;      
  justify-content: center;
  align-items: center;
  gap: 20px;
  background: #929292;
  border-radius: 20px;
  padding: 30px;
  
  /* IMPORTANT : inclure le padding dans la largeur du bloc uniquement */
  box-sizing: border-box;
}

.bloc-photo-a-propos {
	display: flex;
	flex-direction: row;   
	width: 40%;
	align-items: flex-start; /* plutôt que 'left' */
	padding: 15px;           /* optionnel : espace interne */
    box-sizing: border-box;  /* inclut le padding dans la largeur */	
}

.image-christophe-dupont {
    width: 100%;      /* occupe tout l’espace disponible dans le bloc */
    max-width: 100%;  /* ne dépasse jamais le bloc */
    height: auto;     /* conserve les proportions */
    display: block;   /* pour éviter l’espace sous l’image */
	border-radius: 16px;
}

.bloc-texte-a-propos {
	display: flex;
	width: 60%;
	flex-direction: column;  
	align-items: flex-start; /* plutôt que 'left' */

	gap: 20px 15px;
	justify-content: top;
	
}

.titre-h2-a-propos {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-size: 22px;
	color: #F1F1F1;
	font-weight: 600;
	margin-block-start: 1px;
	margin-block-end: 2px;
	margin-inline-start: 0px;
	margin-inline-end: 0px;

}

.titre-h3-a-propos {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-size: 17px;
	color: #F1F1F1;
	font-weight: 500;
	margin-block-start: 1px;
	margin-block-end: 1px;
	margin-inline-start: 0px;
	margin-inline-end: 0px;

}

.paragraphe-a-propos {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	color: #F1F1F1;
	font-weight: 400;
	margin-block-start: 1px;
	margin-block-end: 1px;
	margin-inline-start: 0px;
	margin-inline-end: 0px;

}

.paragraphe2-a-propos {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	color: #F1F1F1;
	font-weight: 300;
	margin-block-start: 1px;
	margin-block-end: 1px;
	margin-inline-start: 0px;
	margin-inline-end: 0px;

}

.signature {
	width: 40%;
}


@media (max-width: 767px) {

    .conteneur-a-propos {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 20px 10px 40px 10px !important;   /* padding minimal et forcé */
        box-sizing: border-box;
    }

    .bloc-a-propos {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 35px 5px 20px 5px !important;      /* réduit et force le padding */
        box-sizing: border-box;
        gap: 10px;
    }

    .bloc-photo-a-propos {
        display: flex;
        flex-direction: column;
        width: 95%;
        max-width: 100%;
        align-items: center;
        padding: 2px !important;       /* padding minimal */
        box-sizing: border-box;
    }

    .bloc-photo-a-propos img {
        width: 85%;
        height: auto;
        display: block;
        border-radius: 12px;
    }

    .bloc-texte-a-propos {
        display: flex;
        flex-direction: column;  
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        padding: 0 20px !important;     /* padding horizontal réduit */
        gap: 8px;                       /* espace vertical minimal */
        box-sizing: border-box;
        text-align: center;
    }

    .titre-h2-a-propos {
        font-size: 20px;
        margin: 0 0 5px 0 !important;
    }

    .titre-h3-a-propos {
        font-size: 16px;
        margin: 0 0 5px 0 !important;
    }

    .paragraphe-a-propos {
        font-size: 15px;
        margin: 0 0 5px 0 !important;
    }

    .paragraphe2-a-propos {
        font-size: 12px;
        margin: 0 0 5px 0 !important;
    }

    .signature {
        width: 60%;
        max-width: 200px;
        height: auto;
        display: block;
        margin: 5px auto 0 auto !important;
    }
}








::-webkit-scrollbar {
    width: .7vw;
    height: .7vw;
    background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background-color: #832525;
    border-radius: 15px;
}

::-webkit-scrollbar-track {
    background-color: #b7bbba;
    border-radius: 100vw;
    margin-block: .5em;
    border: .05em solid #f1f1f1;
}

::selection {
    background-color: #832525;
    color: #f1f1f1;
}