#page-content{
	font-size: 18px;
}

h2{
	font-family: "Poppins";
	font-size: 16px !important;
	font-weight: bold;
	color: #000000 !important;
	display: inline-block; /* pour que la bordure s'adapte à la largeur du texte */
}

h5{
	font-family: "Poppins";
	font-size: 19px;
	font-weight: bold;
	color: #403d42;
}

#page-content img{
	width: 100%;
	border-radius: 18px;

}

#page-content img:hover {
  transform: scale(1.02); /* léger zoom au survol */
}

#photos-offset {
  display: flex;
  gap: 16px;              /* espace entre les images */
  justify-content: space-between;
  height: 435px;
}

#photos-offset img:first-child {
	flex: 2;
}

#photos-offset img {
  flex: 1;                /* chaque image prend la même largeur */
  aspect-ratio: 3 / 4;    /* garde les proportions verticales similaires */
  object-fit: cover;      /* coupe proprement l’image sans la déformer */
  border-radius: 16px;    /* coins arrondis */
  width: 100%;
  height: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* petit effet visuel optionnel */
  transition: transform 0.3s ease;
}


/* Version responsive : empile les images sur petit écran */
@media (max-width: 992px) {
  #photos-offset {
    flex-direction: column;
  }
  #photos-offset img {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

.faconnage {
  display: flex;
  flex-wrap: wrap;        /* permet le retour à la ligne */
  gap: 16px;              /* espace entre les images */
  justify-content: center;
}

/* images */
.faconnage img {
  flex: 1 1 calc(25% - 16px);  /* 4 par ligne environ */
  border-radius: 16px;
  object-fit: cover;
  width: calc(25% - 16px);
  aspect-ratio: 4 / 3;         /* garde une hauteur uniforme */
  height: auto;
  display: block;
}

/* légèrement plus petit sur écrans moyens */
@media (max-width: 1200px) {
  .faconnage img {
    flex: 1 1 calc(33.333% - 16px);  /* 3 par ligne */
  }
}

/* tablettes */
@media (max-width: 768px) {
  .faconnage img {
    flex: 1 1 calc(50% - 16px);  /* 2 par ligne */
  }
}

/* mobiles */
@media (max-width: 480px) {
  .faconnage img {
    flex: 1 1 100%;  /* 1 par ligne */
  }
}

.images-flex {
  display: flex;
  gap: 16px;                /* espace entre les deux colonnes */
  align-items: stretch;     /* même hauteur des colonnes */
}

/* colonne gauche : deux images empilées */
.col-gauche {
  display: flex;
  flex-direction: column;
  flex: 1;                  /* prend environ 50% */
  gap: 16px;
}

/* colonne droite : une image pleine hauteur */
.col-droite {
  flex: 1;                  /* prend aussi environ 50% */
}

.images-flex{
	height: 480px;
}

/* styles communs des images */
.images-flex img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* rogne proprement sans déformation */
  border-radius: 16px;
  display: block;
}

/* responsive : empile les blocs en mobile */
@media (max-width: 992px) {
  .images-flex {
    flex-direction: column;
  }
  .col-gauche {
    flex-direction: row;
  }
  .col-gauche img {
    height: auto;
    aspect-ratio: 1 / 1;    /* images carrées sur mobile */
  }
	#photos-offset {
	  height: auto;
	}
}


.photos-equipement-numerique{
	flex-direction: column;
	gap: 16px;
}

.block-intro p{
	font-size: 20px;
	text-align: center;
}

.col-md-10 p{
	font-family: "Poppins";
	font-size: 18px;
	text-align: center;
}

.block-info p{
	font-size: 16px;
}

#container-info .d-flex{
	gap: 45px;
}
.d-flex{
	justify-content: center;
}

.block-info{
	width: 250px;
	height: 90px;
	border-radius: 50px;
	color: #403d42;
	text-align: center;
	background: #e4ddd4;
	border-radius: 16px;
	margin-top: 20px;
	padding: 10px;
}

#block-grey-impression{
	padding: 40px 20px;
	margin-bottom: 100px;
}
#block-grey-impression p{
	padding: 0;
	font-size: 16px;
}
#block-grey-impression div{
	align-content: center;
}
#block-grey-huv{
	padding: 75px 30px;
	text-align: center;
}
#block-grey-huv p{
	font-size: 20px;
}
#block-grey-numerique{
	margin-top: 245px;
	padding: 50px 20px;
}
#block-grey-numerique div{
	align-content: center;
}
#block-grey-numerique p{
	padding: 0;
	font-size: 20px;
	margin: 0;
}

h3,h4{
	text-align: center;
	font-family: "Poppins";
	font-size: 20px;
	color: #000000;
}
h4{
	font-weight: normal;
}
.d-flex .chevrons{
	/*width: 80px;*/
}
.block-intro{
	align-content: center;
	height: -webkit-fill-available;
}

#container-info .block-grey{
	padding: 20px
}

#container-info .block-grey{
	height: 100%;
}

.btn-connect:hover{
	box-shadow: 0 3px 15px rgba(0, 0, 0, 0.25);
	color: #333;
}
.btn-magenta:hover{
	box-shadow: 3px 0 15px rgba(0, 0, 0, 0.25) !important;
}

.btn-connect{
	padding: 20px;
	background: #bbd532;
	width: 300px;
	border-radius: 16px;
	text-align: center;
	font-family: "Poppins";
	font-size: 20px;
	font-weight: bold;
	color: white;
}

.btn-connect .link{
	line-height: normal;
}

.btn-connect .chevron{
	stroke: #ffffff;
}

.bg-mangenta{
	background: #983372;
}

.btn-connect img{
	width: 200px !important;
	border-radius: 0 !important;
}

.btn-connect img:hover,.btn-link img:hover{
	transform: none !important;
}

.btn-link img {
    transition: filter 0.3s ease;
}

/* Gauche */
.btn-link img.img-left:hover {
    filter: drop-shadow(-20px 20px 25px rgba(0,0,0,0.5));
}

/* Droite */
.btn-link img.img-right:hover {
    filter: drop-shadow(20px 20px 25px rgba(0,0,0,0.5));
}

.link_site{
	text-align: center;
	width: 100%;
	display: block;
	text-decoration: underline;
	color: #000000;
	margin-bottom: 20px;
}

.img_fleche{
	position: absolute;
	width: 100px !important;
	left: 50%;
	top: -130px;
}

#img_fleche_droite{
	left: 40%;
}

@media(max-width:1440px) {
	.img_fleche{
		left: 30%;
	}

	#img_fleche_droite{
		left: 55%;
	}
}

@media(max-width:1100px) {
	.img_fleche{
		left: 20%;
	}

	#img_fleche_droite{
		left: 60%;
	}
}
@media(max-width:992px) {
	#container-intro{
		flex-direction: column;
		text-align: center;
	}
}
@media(max-width:780px) {
	#container-intro{
	}
	.block-info p{
		font-size: 14px;
	}
	#block-grey-huv,#block-grey-numerique{
		margin-top: 20px;
		font-size: 16px;
		padding: 20px;
	}
	#block-grey-huv p,#block-grey-numerique p{
		font-size: 16px;
		padding: 0;
	}
	#block-grey-numerique{
		margin-top: 20px;
	}
	.block-intro p{
		font-size: 16px;
	}
	#container-info{
		flex-direction: column;
	}
	#pc-sncom{
		visibility: hidden;
		height: 0;
	}
	#pc-espace-devis .pull-right{
		float: none !important;
	}
	#pc-espace-devis,#pc-sncom-clone{
		display: flex !important;
		justify-content: center;
	}
	#pc-sncom-clone{
		margin-top: 50px;
		margin-bottom: 50px;
	}
	.img_fleche{
		display: none;
	}
	#img_fleche_droite{
		top: 270px;
	}
	#container-pc{
		margin-top: 0;
	}
}

@media(max-width:480px) {
	.block-info p{
		font-size: 12px;
	}
}