/* Styles CSS */
body {
font-family: Arial, sans-serif;
margin: 0;
background-color: #f5faff; /* Bleu très très clair */
}

header {
position: sticky;
top: 0; /* Le header reste collé en haut de la page */
z-index: 100;
background-color: #010028; /* Bleu noir */
color: #fff;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}

header .logo {
font-weight: bold;
}

header .contact-info {
display: flex;
gap: 20px;
}

header .contact-info a {
color: #fff;
text-decoration: none;
}

.linkedin-icon {
    font-size: 24px; /* Taille de l'icône */
    color: #0077b5; /* Couleur officielle LinkedIn */
    text-decoration: none; /* Supprime le soulignement */
    transition: color 0.3s ease-in-out;
}

.linkedin-icon:hover {
    color: #005582; /* Couleur plus foncée au survol */
}

/* effets de style sur texte */
.outline{
  /* Fallback text color */
  color: #fff;
  /* Firefox, Chrome, Edge and Safari all support --webkit-text-stroke and --webkit-text-fill-color */
  -webkit-text-stroke: 0.025em #fff;
  -webkit-text-fill-color: transparent;
  font-size: 3.5rem;
  font-weight: bold;
}
.outline::selection {
  -webkit-text-fill-color: #fff;
}

.bigest {
  font-size: 1.5rem;
  font-weight: bold;
}

.green {
	color: #90dd8e;	
}

.hero .green {
	font-size: 1.3rem;
}

.yellow {
 color:#ffd629;
}

.dark-blue {
}

.hero {
background-color: #00338c; /* Bleu principal */
color: #fff;
padding: 50px 20px;
text-align: center;
}

.hero h1 {
font-family: 'Avory I PE', sans-serif;
font-size: 2.5em;
margin-bottom: 20px;
color: #fff;
}

.hero p {
font-size: 1.2em;
margin-bottom: 30px;
}

/* Pavé d'introduction aux services et autres */

.offer-overview {
  width: 100%;
  padding: 30px 20px;
  background-color: #f5faff; /* Fond bleu très clair (à adapter) */
  box-sizing: border-box;
  text-align: center; /* Centrer le contenu */
}

.offer-overview-container {
  max-width: 1200px; /* Largeur maximale du contenu (à adapter) */
  margin: 0 auto; /* Centre le conteneur */
  padding: 0 20px; /* Marge interne pour le responsive */
}

.offer-overview h2 {
  font-family: "Avory I PE", sans-serif;
  color: #00338c; /* Bleu principal */
  font-size: 2.5em;
  margin-bottom: 20px;
}

.offer-overview p {
  font-size: 1.1em;
  line-height: 1.6;
  margin-bottom: 15px;
}

/* Styles pour les écrans plus petits (responsive) */
@media (max-width: 768px) {
  .offer-overview {
    padding: 15px 10px;
  }

  .offer-overview-container {
    padding: 0 10px;
  }

  .offer-overview h2 {
    font-size: 2em; /* Réduire la taille du titre */
  }
}

/* Gestion bandeau références */
/* Section Clients */
/* Section Clients (Habillage Sexy) */
.clients-band {
    background-color: #00338c; /* Bleu principal comme fond */
    color: #fff; /* Texte en blanc */
    padding: 60px 20px; /* Espace plus important */
    text-align: center;
    position: relative;
    overflow: hidden; /* Important pour les effets de bordure */
}

.clients-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative; /* Pour le z-index */
    z-index: 2; /* Place le contenu au-dessus de l'effet de fond */
}

.clients-band h2 {
    font-family: 'Avory I PE', sans-serif;
    color: #ffd629; /* Jaune principal pour le titre */
    font-size: 2.2em; /* Titre plus grand */
    margin-bottom: 40px; /* Espace plus important */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Ombre portée pour le titre */
}

.clients-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 22px; /* Espacement plus important entre les logos */
    position: relative;
    z-index: 2; /* Place les logos au-dessus de l'effet de fond */
}

.clients-logos img {
    max-width: 180px; /* Logos un peu plus grands */
    height: auto;
    border-radius: 10px; /* Bords légèrement arrondis pour les logos */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3); /* Ombre portée pour les logos */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transitions pour le survol */
}

.clients-logos img:hover {
    transform: translateY(-5px) scale(1.05); /* Légère translation et zoom au survol */
    box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.4); /* Ombre plus prononcée au survol */
}

/* Effet de bordure (optionnel, nécessite de connaître la couleur de fond de votre body) */
.clients-band::before,
.clients-band::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 20px; /* Hauteur de la bordure */
    background-color: #f5faff; /* Bleu très clair (couleur de fond du body) */
    z-index: 1; /* Place la bordure derrière le contenu mais au-dessus du fond */
}

.clients-band::before {
    top: 0;
}

.clients-band::after {
    bottom: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .clients-band {
        padding: 40px 15px;
    }

    .clients-band h2 {
        font-size: 1.8em;
        margin-bottom: 30px;
    }

    .clients-logos {
        gap: 20px;
    }

    .clients-logos img {
        max-width: 140px;
    }
}

/* Les CTA */

.cta-button, .cta-button-training, .cta-button-why-training {
background-color: #ffd629; /* Jaune principal */
color: #010028; /* Bleu noir */
padding: 15px 30px;
text-decoration: none;
border-radius: 25px;
font-weight: bold;
transition: background-color 0.3s ease;
border: none;
display: inline-block;
}

.cta-button-training {
background-color: #010028;
color:#ffffff; /* Blanc */
}

.cta-button:hover {
background-color: #fff5cc; /* Jaune plus clair */
}

.cta-button-training:hover {
background-color: #00338c; /* Bleu principal */
}

.cta-button-why-training {
	background-color: #90dd8e;
	color:#00338c;
	margin: 0 0 20px 0;
}

.cta-button-why-training:hover {
	background-color: #e7ffe6;
}
.separettik {
	padding: 30px 0 0 0;
	text-align: center;
}

.services {
padding: 30px 20px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}

.service-block {
background-color: #fff;
border-radius: 15px; /* Arrondi plus prononcé */
padding: 30px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
border: 2px solid transparent; /* Bordure transparente par défaut */
}

.service-block:nth-child(odd) {
background-color: #cce1ff; /* Bleu plus clair pour les blocs impairs */
}

.service-block:nth-child(even) {
background-color: #e7ffe6; /* Vert plus clair pour les blocs pairs */
}

.service-block:hover {
border-color: #ffd629; /* Bordure jaune au survol */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Ombre plus prononcée au survol */
}

.service-block h2, h2 {
font-family: 'Avory I PE', sans-serif;
color: #00338c; /* Bleu principal */
margin-bottom: 15px;
font-size: 1.5em;
}

.service-block .icon {
/* Style pour les icônes, par exemple des images ou des icônes de police */
height: 80px;
width: 80px;
margin-bottom: 15px;
}

.service-block p {
margin-bottom: 20px;
flex-grow: 1;
}

footer {
background-color: #010028; /* Bleu noir */
color: #fff;
text-align: center;
padding: 10px 20px;
}

@media (max-width: 768px) {
.services {
grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur les tablettes */
}
}

@media (max-width: 480px) {
header {
flex-direction: column;
gap: 10px;
}

.services {
grid-template-columns: 1fr; /* 1 colonne sur les téléphones */
}
}
/* Style pour l'icône de téléphone */
.phone-icon {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid #fff; /* Couleur blanche pour correspondre au header */
border-radius: 50%;
position: relative;
margin-right: 10px; /* Ajustez l'espacement selon vos besoins */
vertical-align: middle; /* Aligner l'icône avec le texte */
}

.phone-icon::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
width: 6px;
height: 11px;
border: 3px solid #fff; /* Couleur blanche */
border-top: none;
border-right: none;
border-bottom-left-radius: 5px; /* Arrondi pour la forme du combiné */
}
.phone-link{
color: #fff;
text-decoration: none;
}
/* Style au survol */
.phone-link:hover .phone-icon {
background-color: #fff5cc;
border-color: #fff5cc;
}
.phone-link:hover .phone-icon::before{
border-color: #010028;
}
.phone-link:hover{
color: #fff5cc;
}
.ecoindex {
color: #ffd629;
}

/* Style pour l'accessibilité (lecteurs d'écran) */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}

/* Style pour le menu */

:root {
--bg-color: #f5faff;
--text-color: #010028;
--highlight-color: #ffd629;
--menu-bg: #010028;
--menu-hover: #cce1ff;
--menu-link-color: #ffffff;
--font-size: 16px;
}


nav {
background: var(--menu-bg);
padding: 0.5em;
position: relative;
}

.menu {
list-style: none;
padding: 0;
margin: 0;
display: none;
flex-direction: column;
align-items: center;
}

.menu li {
margin: 0.5em 0;
}

.menu a {
text-decoration: none;
color: var(--menu-link-color);
font-family: 'Salo Regular', sans-serif;
font-weight: bold;
padding: 0.5em;
}

.menu a:hover, .menu a:focus {
color: var(--text-color);
background: var(--menu-hover);
border-radius: 5px;
}

.menu-toggle {
background: none;
border: none;
font-size: 1.5em;
color: #ffffff;
cursor: pointer;
display: block;
margin: 0 auto;
}

@media (min-width: 767px) {
.menu {
display: flex;
flex-direction: row;
justify-content: center;
}
.menu-toggle {
display: none;
}
}

/* Styles pour contenu pleine page */

.full-width-section {
	  width: 100%;
	  padding: 50px 20px;
	  background-color: #f5faff; /* Fond bleu très clair (à adapter) */
	  box-sizing: border-box; /* Inclut le padding dans la largeur totale */
	}

	.container {
	  max-width: 1200px; /* Largeur maximale du contenu (à adapter) */
	  margin: 0 auto; /* Centre le conteneur */
	  padding: 0 20px; /* Marge interne pour le responsive */
	}

	.profile-summary {
	  background-color: #fff;
	  border-radius: 15px;
	  padding: 30px;
	  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.profile-summary p {
	  font-size: 1em;
	  line-height: 1.6;
	  margin-bottom: 15px;
	}

	/* Styles pour les écrans plus petits (responsive) */
	@media (max-width: 768px) {
	  .full-width-section {
		padding: 30px 10px;
	  }

	  .container {
		padding: 0 10px;
	  }

	  .profile-summary {
		padding: 20px;
	  }
	}
	.espaceur {
	margin: 0 20px;
	}


/* Style pour formulaire de contact */
.contact-intro {
	max-width: 760px;
	margin: 0 auto;
	padding: 0;
}
.contact-form {
	max-width: 700px;
	margin: 0 auto;
	padding: 30px;
	background-color: #fff;
	border-radius: 15px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.contact-form label {
	display: block;
	margin-bottom: 8px;
	font-weight: bold;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
	width: 100%;
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-sizing: border-box;
}

.contact-form textarea {
	height: 150px;
}

.contact-form .cta-button {
	width: 100%;
}

.message-sent {
	text-align: center;
	margin-top: 20px;
	font-weight: bold;
}

.error {
	color: red;
}
 @media (max-width: 768px) {
	.contact-form, .contact-intro{
		padding: 20px;
	}
}

@media (max-width: 480px) {
	header {
		flex-direction: column;
		gap: 10px;
	}
	.contact-form input[type="text"],
	.contact-form input[type="email"],
	.contact-form textarea {
		margin-bottom: 15px;
	}
}

/* Styles pour page formations */
.formations {
  padding: 50px 20px 0 20px;
  background-color: #f5faff; /* Fond bleu très clair */
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-title {
  font-family: "Avory I PE", sans-serif;
  color: #00338c; /* Bleu principal */
  font-size: 2em;
  text-align: center;
  margin-bottom: 30px;
}

.formation-block {
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  color: #fff; /* Texte en blanc par défaut */
}

/* Couleurs distinctives pour chaque bloc */
.blue-block {
  background-color: #cce1ff; /* Bleu clair */
}
/* #e7ffe6 */
.yellow-block {
  background-color: #fff5cc; /* Jaune clair */
}


.yellow-block .bold, .blue-block .bold {
  color: #00338c;
}

.dark-blue-block  {
  background-color: #010028; /* Bleu foncé */
}

.formation-title {
  font-family: "Avory I PE", sans-serif;
  font-size: 1.7em;
  margin-bottom: 15px;
  color: #00338c;
  
}


.formation-description,
.formation-objectif,
.formation-public,
.formation-modalites {
  font-size: 1.1em;
  line-height: 1.6;
  margin-bottom: 10px;
  color: #010028;
}

.dark-blue-block .formation-title, .dark-blue-block .formation-description, .dark-blue-block .formation-objectif, .dark-blue-block .formation-public, .dark-blue-block .formation-modalites {
color: #ffffff;
}

.bold {
  font-weight: bold;
}

/* Styles pour les écrans plus petits (responsive) */
@media (max-width: 768px) {
  .formation-block {
    padding: 20px;
    margin-bottom: 20px;
  }

  .formation-title {
    font-size: 1.5em;
	color: #00338c;
  }

  .formation-objectif,
  .formation-public,
  .formation-modalites {
    font-size: 1em;
	color: #010028;
  }
}
/* Style pour page accompagnement */
/* Style général de la section */
.full-width-section.rse-accompagnement {
  background-color: #f5faff; /* Fond bleu très clair */
  padding: 50px 20px;
}

.rse-accompagnement .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.rse-content {
  background-color: #fff;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Styles des titres */
.rse-content h2 {
  font-family: "Avory I PE", sans-serif;
  color: #00338c; /* Bleu principal */
  font-size: 2em;
  margin-bottom: 20px;
}

.rse-content h3 {
  font-family: "Avory I PE", sans-serif;
  color: #00338c; /* Bleu principal */
  font-size: 1.7em;
  margin-bottom: 15px;
}

.rse-content h4 {
  font-family: "Avory I PE", sans-serif;
  color: #010028; /* Bleu foncé */
  font-size: 1.4em;
  margin-top: 30px;
  margin-bottom: 10px;
}

/* Styles des paragraphes et listes */
.rse-content p {
  font-size: 1em;
  line-height: 1.6;
  margin-bottom: 15px;
}

.rse-content ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 20px;
  text-align: left;
}

.rse-content li {
  font-size: 1em;
  line-height: 1.6;
  margin-bottom: 5px;
}

/* Optionnel : style pour les puces */
.rse-content li::before {
  content: "•";
  color: #ffd629; /* Jaune principal */
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

/* Styles des boutons d'appel à l'action */
.rse-content .cta-button {
  background-color: #ffd629; /* Jaune principal */
  color: #010028; /* Bleu foncé */
  padding: 10px 20px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
  display: inline-block;
  margin-top: 10px;
}

.rse-content .cta-button:hover {
  background-color: #fff5cc; /* Jaune plus clair */
}

/* Styles pour les lignes de services */
.services-row-accompagnement {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px; /* Augmentation de la marge entre les lignes */
}

/* Styles des blocs de service */
.service-block-accompagnement {
  padding: 25px; /* Augmentation du padding */
  margin-bottom: 0px;
  border-radius: 10px;
  width: calc(33% - 10px); /* Augmentation de l'espace entre les blocs */
  box-sizing: border-box;
}

.service-block-accompagnement h5 {
  font-family: "Avory I PE", sans-serif;
  font-size: 1.3em; /* Augmentation de la taille du titre */
  font-weight: bold;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px; /* Augmentation de la marge sous le titre */
  color: #010028;
}

.service-block-accompagnement .icon {
  font-size: 1.6em; /* Augmentation de la taille de l'icône */
  margin-right: 10px;
  color: #00338c;
}

/* Couleurs alternées pour les blocs de service */
.service-audit {
  background-color: #cce1ff; /* Bleu plus clair */
}

.service-accompagnement {
  background-color: #e7ffe6; /* Vert plus clair */
}

.service-strategie {
  background-color: #fff5cc; /* Jaune plus clair */
}

.service-rapport {
  background-color: #cce1ff; /* Bleu plus clair pour le 4e bloc */
}

/* Styles pour les écrans plus petits (responsive) */
@media (max-width: 768px) {
  .full-width-section.rse-accompagnement {
    padding: 30px 10px;
  }

  .rse-accompagnement .container {
    padding: 0 10px;
  }

  .rse-content {
    padding: 20px;
  }

  .rse-content h2 {
    font-size: 1.8em;
  }

  .rse-content h3 {
    font-size: 1.5em;
  }

  .rse-content h4 {
    font-size: 1.3em;
  }

  .services-row-accompagnement {
    flex-direction: column; /* Disposition verticale pour mobile */
    margin-bottom: 0;
  }

  .service-block-accompagnement {
    width: 100%; /* Chaque bloc prend toute la largeur */
    margin-bottom: 20px;
    padding: 20px;
  }
  .service-block-accompagnement h5 {
    font-size: 1.2em;
    margin-bottom: 10px;
  }
  .service-block-accompagnement	 .icon {
    font-size: 1.5em;
    margin-right: 5px;
  }
}

#back-to-top {
  position: fixed; /* Reste visible lors du défilement */
  bottom: 20px;
  right: 20px;
  display: none; /* Caché par défaut */
  background-color: #00338c; /* Bleu principal de la charte */
  color: #ffffff;
  border: none;
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
  opacity: 0.8; /* Légèrement transparent */
  transition: opacity 0.3s ease; /* Transition fluide pour l'opacité */
  z-index: 100; /* Assure que le bouton reste au-dessus du contenu */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Légère ombre pour le relief */
}

#back-to-top:hover {
  opacity: 1; /* Opaque au survol */
}

#back-to-top svg {
  display: block; /* S'assure que le SVG remplit bien le bouton */
}

/* Parallax content */
.parallax-section {
  position: relative;
  width: 100%;
  height: 400px; /* Hauteur de la section (à adapter) */
  overflow: hidden;
}

.parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 250%; /* Hauteur supérieure à la section pour l'effet de parallaxe */
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Fixe l'image en arrière-plan */
  z-index: -1; /* Place l'image en arrière-plan */
}

.parallax-content {
  position: relative;
  z-index: 1; /* Place le contenu au-dessus de l'image */
  color: #010028; /* Couleur du texte (à adapter) */
  padding: 30px;
  text-align: center;
}

/* Style pour article type blog */
/* Utilisation de full-width-section et container (déjà définis) */

.full-width-section { /* on conserve ce style qui centre le contenu */
    width: 100%;
    padding: 50px 20px;  /* A Ajuster au besoin */
    background-color: #f5faff;  /* Fond bleu très très clair*/
    box-sizing: border-box;
}

.container { /* On conserve ce style pour centrer le contenu */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
/* Styles spécifiques à l'article */
.article {
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* Pour les coins arrondis de l'image */
  padding: 30px; /* Ajout d'un padding global pour l'article */
}

.article-header {
  margin-bottom: 30px;
  text-align: center; /* Centrer le titre et les métadonnées */
}

.article-title {
  font-family: 'Avory I PE', sans-serif;
  font-size: 2.5em;
  color: #fff; /* Titre en blanc */
  margin-bottom: 10px;
  line-height: 1.2;
  background-color: #010028; /* Fond bleu foncé pour le titre */
  padding: 10px; /* Espacement autour du titre */
  display: inline-block; /* Pour que le fond ne prenne pas toute la largeur */
  border-radius: 5px;
}


.article-meta {
  font-size: 0.9em;
  color: #666;
}

.article-date {
  margin-right: 15px;
}
 .article-author{
    margin-right: 15px;
}

.article-category a {
  color: #00338c;
  text-decoration: none;
}

.article-image {
  margin-bottom: 30px;
}

.article-image img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 15px 15px 0 0; /* Coins arrondis en haut */
}

.image-caption {
    font-size: 0.8em;
    margin-top: 5px;
    color: #333;
}

/* Styles pour le corps de l'article (réutilisation et adaptation) */
.highlight {
            background: #eaf2ff;
            padding: 10px;
            border-left: 4px solid #007bff;
            margin-bottom: 10px;
        }
.article-body {
  font-size: 1.1em;
  line-height: 1.6;
  margin-bottom: 30px;
  color:#333;
}

.article-body h2 {
  font-size: 1.8em;
  color: #00338c;
  margin-top: 30px;
  margin-bottom: 15px;
}

.article-body h3 {
  font-size: 1.4em;
  color: #00338c;
  margin-top: 25px;
  margin-bottom: 10px;
}

.article-body p, /* mutualisation du style des paragraphes */
.article-body ul,
.article-body blockquote
{
  margin-bottom: 15px;
}

.article-body ul {
  list-style: disc;
  margin-left: 20px;
}

.article-body blockquote {
  border-left: 4px solid #00338c;
  padding-left: 20px;
  margin: 20px 0;
  font-style: italic;
  color: #444;
}

.article-body blockquote cite {
  display: block;
  margin-top: 5px;
  font-size: 0.9em;
  font-style: normal;
  color: #666;
}

.article-footer {
  font-size: 0.9em;
  color: #666;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.article-footer a {
  color: #00338c;
  text-decoration: none;
}

/* Styles responsives (réutilisation et adaptation) */
@media (max-width: 768px) {
  .full-width-section {
    padding: 30px 10px; /* Réduction du padding */
  }
  .container{
    padding: 0 10px;
  }
    .article {
        padding: 20px;
    }

  .article-title {
    font-size: 2em; /* Réduction de la taille du titre */
  }
    .article-body {
        font-size: 1em;
    }
}

/* Style général pour la section en deux colonnes */
.two-columns-section {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  padding: 20px;
  background-color: #f5faff;
  /* Pour distribuer l'espace restant */
  justify-content: space-around;
}

/* Style pour la colonne de gauche (image) */
.two-columns-section .column-left {
  width: 35%;
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Style pour la colonne de droite (blocs de services) */
.two-columns-section .column-right {
  width: 65%;
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
    /* Suppression de l'alignement vertical centralisé ici */
  /* align-items: center; */
}

/*On va modifier cette classe pour garantir le centrage :*/
.two-columns-section .column-right .service-block {
    background-color: #fff;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border: 2px solid transparent;
    text-align:center; /* On s'assure que le contenu est centré */
    margin-bottom:2.5em; /* On s'assure qu'il y a bien un espacement, sinon tous les services vont être collés les uns aux autres */
}


/* Style pour l'image pleine largeur */
.two-columns-section .full-width-image {
  width: 100%;
  height: auto;
  border-radius: 10px; /* Pour arrondir les angles de l'image (facultatif) */
}

/* Styles pour le responsive (écrans de smartphone) */
@media (max-width: 768px) {
  .two-columns-section {
    flex-direction: column;
    /* Les éléments ne doivent plus se justifier de la même manière */
    justify-content: normal; /* Annule l'alignement justifié de la section */
      align-items:center;  /*pour s'assurer que les elements se centrent bien, surtout sur de petites résolution*/

  }

  .two-columns-section .column-left,
  .two-columns-section .column-right {
    width: 100%;
    padding: 10px;
    /* Il faut respecifier ici l'alignement, pas sur le serviceBlock*/
    text-align: center; /* Pour garantir l'alignement au centre sur les devices mobiles */
  }
}