/* Styles pour les titres */
.prose h2 {
  font-size: 1.8rem !important;
  color: #2d2d2d !important;
  margin-bottom: 0.5rem !important;
}

.prose h2 span {
  color: #4776b7 !important;
}

.prose h3 {
  font-size: 1.5rem !important;
  color: #2d2d2d !important;
  margin-top: 0 !important;
}

.service-button {
  display: flex !important;
  align-items: center !important;
  width: 740px !important;
  max-width: 90% !important;
  background-color: #4776b7 !important;
  color: white !important;
  padding: 1.25rem 2rem !important;
  border-radius: 0.5rem !important;
  margin: 1rem auto !important;
  transition: all 0.3s ease !important;
}

.service-button .icon-space {
  width: 24px !important;
  height: 24px !important;
  margin-right: 1.5rem !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.service-button .icon-space svg {
  width: 24px !important;
  height: 24px !important;
  stroke: white !important;
  fill: none !important;
}

.service-button .text-space {
  font-size: 1.1rem !important;
  flex-grow: 1 !important;
  min-width: 0 !important; /* Permet au texte de se rétrécir si nécessaire */
  word-wrap: break-word !important; /* Permet au texte de se wrap */
}

/* Media Queries pour la responsivité des boutons */
@media (max-width: 768px) {
  .service-button {
    width: 100% !important;
    padding: 1rem 1.5rem !important;
  }

  .service-button .text-space {
    font-size: 1rem !important;
  }
}

@media (max-width: 480px) {
  .service-button {
    padding: 0.875rem 1.25rem !important;
  }

  .service-button .icon-space {
    margin-right: 1rem !important;
  }

  .service-button .text-space {
    font-size: 0.95rem !important;
  }
}

.flex-block {
  display: flex !important;
  gap: 2rem !important;
  margin: 2rem 0 !important;
  align-items: center !important; /* Par défaut centré verticalement */
}

.flex-block .image-container,
.flex-block .content-container {
  flex: 1 !important;
}

/* Images standards */
.flex-block img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 0.5rem !important;
  object-fit: cover !important;
}

/* Styles spécifiques pour les layouts double-image */
.flex-block.double-image {
  align-items: flex-start !important;
}

.flex-block.double-image .content-container {
  padding-top: 0 !important;
  margin-top: 0 !important;
  width: 50% !important;
}

.flex-block.double-image .image-container {
  width: 50% !important;
}

.image-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  width: 100% !important;
}

.image-stack img {
  width: 100% !important;
  height: auto !important;
  border-radius: 0.5rem !important;
  display: block !important;
  margin: 0 !important;
  object-fit: cover !important;
}

/* Style du texte */
.flex-block.double-image p {
  margin-top: 0 !important;
  text-align: justify !important;
  color: #4B5563 !important;
  line-height: 1.7 !important;
}

/* Ajustements spécifiques pour le header Paris */
.paris-header {
  margin-bottom: 2rem !important;
}

.paris-header .flex-block {
  align-items: flex-start !important; /* Spécifique au header */
}

.paris-header .flex-block .content-container {
  flex: 1.5 !important; /* Spécifique au header */
}

.breadcrumb {
  font-size: 0.9rem !important;
  color: #4776b7 !important;
  margin-bottom: 0.5rem !important;
}

.breadcrumb-link {
  transition: all 0.2s ease !important;
}

/* Styles pour les boutons d'action */
.action-buttons {
  display: flex !important;
  gap: 1rem !important;
  margin-top: 2rem !important;
  width: 100% !important;
}

.w-48 {
  width: 12rem !important;
}

.h-12 {
  height: 3rem !important;
}

.rounded-full {
  border-radius: 9999px !important;
}

.font-extrabold {
  font-weight: 800 !important;
}

.fill-[#13559F] {
  fill: #13559F !important;
}

.w-5 {
  width: 1.25rem !important;
}

.h-5 {
  height: 1.25rem !important;
}

/* NOUVELLES MODIFICATIONS POUR "IMAGE À DROITE" */
/* Style similaire au Header Paris */
.flex-block.right-image {
  align-items: flex-start !important;
}

.flex-block.right-image .content-container {
  flex: 1.5 !important;
}

.flex-block.right-image .image-container img {
  border-radius: 0.5rem !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.flex-block.right-image .content-container h1,
.flex-block.right-image .content-container h2 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.2 !important;
}

.flex-block.right-image .content-container h1 span,
.flex-block.right-image .content-container h2 span {
  display: inline !important;
}

.flex-block.right-image .content-container .description {
  margin-top: 1rem !important;
  color: #4B5563 !important;
}

.flex-block.right-image .content-container .action-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  margin-top: 2rem !important;
}
/* FIN DES NOUVELLES MODIFICATIONS */
.flex-block.left-image {
  align-items: flex-start !important;
}

.flex-block.left-image .content-container {
  flex: 1.5 !important;
}

.flex-block.left-image .image-container img {
  border-radius: 0.5rem !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.flex-block.left-image .content-container h1,
.flex-block.left-image .content-container h2 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.2 !important;
}

.flex-block.left-image .content-container h1 span,
.flex-block.left-image .content-container h2 span {
  display: inline !important;
}

.flex-block.left-image .content-container .description {
  margin-top: 1rem !important;
  color: #4B5563 !important;
}

.flex-block.left-image .content-container .action-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  margin-top: 2rem !important;
}

/* Media queries améliorées */
@media (max-width: 1024px) {
  .flex-block.double-image {
      gap: 1.5rem !important;
  }
  
  .flex-block.double-image .content-container,
  .flex-block.double-image .image-container {
      width: 50% !important;
  }
  
  .image-stack {
      gap: 0.75rem !important;
  }
}

@media (max-width: 768px) {
  /* Règles générales pour flex-block en responsive */
  .flex-block {
      flex-direction: column !important;
      gap: 1rem !important;
  }
  
  .flex-block .image-container,
  .flex-block .content-container {
      width: 100% !important;
  }
  
  .flex-block img {
      margin: 0 auto !important;
  }
  
  /* Cas spécial pour le header Paris en responsive */
  .paris-header .flex-block {
      flex-direction: column-reverse !important;
  }
  
  /* Styles spécifiques pour double-image en responsive */
  .flex-block.double-image {
      flex-direction: column !important;
      gap: 1rem !important;
  }
  
  .flex-block.double-image .content-container,
  .flex-block.double-image .image-container {
      width: 100% !important;
  }
  
  .image-stack {
      gap: 1rem !important;
  }
  
  /* Ordre des éléments en mobile */
  .flex-block.left-image.double-image .image-container {
      order: -1 !important;
  }
  
  /* Boutons d'action en responsive */
  .action-buttons {
      flex-direction: column !important;
      gap: 0.75rem !important;
      width: 100% !important;
  }
  
  .w-48 {
      width: 100% !important;
  }
  
  /* Modification pour right-image en responsive */
  .flex-block.right-image {
      flex-direction: column-reverse !important;
  }
}

@media (max-width: 480px) {
  .flex-block.double-image {
      gap: 0.75rem !important;
  }
  
  .image-stack {
      gap: 0.75rem !important;
  }
  
  .flex-block.double-image p {
      line-height: 1.5 !important;
  }
}
/* Styles pour les listes */
ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

ul li {
  position: relative !important;
  padding-left: 2rem !important;
  margin-bottom: 0.75rem !important;
  color: #4B5563 !important;
}

ul li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background-color: #4776B7 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E") !important;
  background-size: 14px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* Masquer sur mobile (par défaut) */
.image-container.hidden.lg\:block {
  display: none;
}

/* Afficher uniquement sur grands écrans */
@media (min-width: 1024px) {
  .image-container.hidden.lg\:block {
    display: block !important;
  }
}