/* Styles spécifiques pour la Technothèque et autres sections */

/* Styles pour la mise en page des titres Filtres et Technothèque */
@media (min-width: 768px) {
    /* Structure principale */
    #explorer > div {
        display: flex !important;
    }
    
    /* Colonne de gauche avec titre Filtres */
    #explorer > div > div:first-child {
        width: 25% !important;
    }
    
    /* Titre Filtres */
    #explorer > div > div:first-child > h2:first-child {
        display: block !important;
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Colonne de droite avec titre Technothèque */
    #explorer > div > div:last-child {
        width: 75% !important;
    }
    
    /* Titre Technothèque */
    #explorer > div > div:last-child > h1:first-child {
        display: block !important;
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        margin-bottom: 1rem !important;
    }
}

/* Styles pour corriger l'affichage des liens dans les sections de détails techniques */
.prose a {
    /* Styles de base pour tous les appareils */
    display: inline-block !important;
    color: #0078a0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    margin: 0.2em 0.4em 0.2em 0 !important;
    padding: 0.2em 0.5em !important;
    border-radius: 4px !important;
    border: 1px solid #0078a0 !important;
    background-color: rgba(0, 120, 160, 0.05) !important;
    transition: all 0.2s ease !important;
}

.prose a:hover {
    background-color: rgba(0, 120, 160, 0.1) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Styles spécifiques pour les grands écrans */
@media (min-width: 768px) {
    .prose a {
        display: inline-block !important;
        margin: 0 0.3em !important;
        padding: 0.1em 0.4em !important;
    }
    
    /* Ajouter l'icône uniquement sur desktop avec ::after */
    .prose a::after {
        content: "\f35d" !important; /* Code Unicode pour fa-external-link-alt */
        font-family: "Font Awesome 5 Free" !important;
        font-weight: 900 !important;
        display: inline-block !important;
        margin-left: 0.3em !important;
        font-size: 0.8em !important;
        vertical-align: middle !important;
        opacity: 0.7 !important;
        transition: opacity 0.2s ease !important;
    }
    
    .prose a:hover::after {
        opacity: 1 !important;
    }
}

/* Styles spécifiques pour les petits écrans */
@media (max-width: 767px) {
    .prose a {
        display: inline-block !important;
        margin: 0.3em 0 !important;
        padding: 0.3em 0.6em !important;
        text-align: center !important;
        width: auto !important;
    }
    
    /* Classe spéciale pour les paragraphes contenant des liens */
    .prose .links-container {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5em !important;
        margin-top: 0.5em !important;
        margin-bottom: 0.5em !important;
    }
}

/* Styles pour les images des formations */
.formation-image-container {
  height: 240px; /* Hauteur fixe pour toutes les images */
  position: relative;
  overflow: hidden;
}

/* Styles pour les images de détail des formations */
.formation-detail-image {
  background-color: #f5f5f5; /* Fond gris clair pour les images */
  max-height: 100%;
  margin: 0 auto; /* Centrer l'image */
  object-fit: contain; /* Afficher l'image entière sans la couper */
}

/* Styles pour le contenu des formations */
.formation-content h1,
.formation-content h2,
.formation-content h3,
.formation-content h4,
.formation-content h5,
.formation-content h6 {
  color: #007C91;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Styles spécifiques pour les sections de description et détails techniques */
.tech-description {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media (max-width: 768px) {
    .tech-description {
        padding: 0.25rem !important;
        margin-left: -0.25rem;
        width: calc(100% + 0.5rem);
        max-width: none;
    }
    
    .tech-content-section {
        padding: 0.75rem 0.5rem !important;
        margin-left: -0.25rem;
        width: calc(100% + 0.5rem);
        max-width: none;
    }
    
    .prose.max-w-none {
        max-width: none !important;
        width: 100%;
    }
    
    /* Améliorer l'affichage du contenu HTML dans les descriptions */
    .tech-description h2 {
        font-size: 1.4rem !important;
        margin-top: 1.2rem !important;
        margin-bottom: 0.8rem !important;
    }
    
    .tech-description h3 {
        font-size: 1.2rem !important;
        margin-top: 1rem !important;
        margin-bottom: 0.6rem !important;
    }
    
    .tech-description p {
        margin-bottom: 0.8rem !important;
        text-align: justify;
    }
    
    .tech-description a {
        word-break: break-word;
    }
    
    /* Optimiser l'espace des conteneurs */
    .p-6.tech-content-container {
        padding: 0.5rem !important;
    }
    
    /* Ajuster la grille pour mobile */
    .grid.grid-cols-1.md\:grid-cols-2.gap-6.md\:gap-8 {
        gap: 1rem !important;
    }
}

/* Styles pour les titres dans les détails techniques */
.tech-description h1, 
.tech-description h2, 
.tech-description h3, 
.tech-description h4, 
.tech-description h5, 
.tech-description h6,
.w-full h1,
.w-full h2,
.w-full h3,
.w-full h4,
.w-full h5,
.w-full h6 {
  color: #007C91;
  margin-top: 1.2em;
  margin-bottom: 0.8em;
  font-weight: 600;
  line-height: 1.3;
}

/* Styles spécifiques pour le contenu HTML riche */
.w-full a {
  color: #3498db;
  text-decoration: underline;
  word-break: break-word;
}

.w-full ul, .w-full ol {
  padding-left: 1.5rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.w-full li {
  margin-bottom: 0.5rem;
}

.w-full p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

@media (max-width: 768px) {
  /* Styles pour la classe prose sur mobile */
  .prose {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
  }
  
  .prose h2 {
    font-size: 1.3rem !important;
    margin-top: 1.2rem !important;
    margin-bottom: 0.8rem !important;
  }
  
  .prose h3 {
    font-size: 1.1rem !important;
    margin-top: 1rem !important;
    margin-bottom: 0.6rem !important;
  }
  
  .prose p {
    margin-bottom: 0.8rem !important;
    text-align: justify !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }
  
  .prose ul, .prose ol {
    padding-left: 1.2rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.8rem !important;
  }
  
  .prose li {
    margin-bottom: 0.4rem !important;
    font-size: 0.95rem !important;
  }
  
  /* Ajustement pour les liens externes */
  .prose a {
    display: inline-block !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
  }
  
  /* Ajuster l'espacement du conteneur principal */
  .container.mx-auto.px-4.py-8 {
    padding: 1rem 0.5rem !important;
  }
  
  /* Ajuster les conteneurs des sections */
  .mb-8.bg-white.p-2.md\:p-6,
  .mb-8.bg-gray-50.p-2.md\:p-6 {
    padding: 0.75rem 0.5rem !important;
  }
}

.tech-description h2 {
  font-size: 1.4rem;
  border-bottom: 1px solid rgba(0, 124, 145, 0.2);
  padding-bottom: 0.3em;
}

.tech-description h3 {
  font-size: 1.2rem;
}

/* Amélioration de l'espacement des paragraphes */
.tech-description p {
  margin-bottom: 1em;
  line-height: 1.6;
}

/* Amélioration de l'affichage sur mobile */
@media (max-width: 767px) {
  .tech-description {
    padding: 0.5rem !important;
  }
  
  .tech-content-container {
    padding: 1rem !important;
  }
  
  .mb-8 {
    margin-bottom: 1.5rem !important;
  }
}

.formation-content h1 {
  font-size: 2rem;
  border-bottom: 2px solid #E0F2F5;
  padding-bottom: 0.5rem;
}

.formation-content h2 {
  font-size: 1.75rem;
  border-bottom: 1px solid #E0F2F5;
  padding-bottom: 0.5rem;
}

.formation-content h3 {
  font-size: 1.5rem;
}

.formation-content h4 {
  font-size: 1.25rem;
}

.formation-content p {
  margin-bottom: 1.25rem;
  line-height: 1.6;
}

.formation-content strong,
.formation-content b {
  color: #007C91;
  font-weight: 600;
}

.formation-content ul,
.formation-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.formation-content ul li,
.formation-content ol li {
  margin-bottom: 0.5rem;
  position: relative;
}

.formation-content ul li::before {
  content: '•';
  color: #007C91;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

.formation-content blockquote {
  background-color: #F0F0F0;
  border-left: 4px solid #007C91;
  padding: 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0.5rem;
  position: relative;
  font-style: italic;
}

.formation-content blockquote::before {
  content: '"';
  font-size: 4rem;
  color: #007C91;
  opacity: 0.2;
  position: absolute;
  top: -1rem;
  left: 0.5rem;
}

.formation-content img {
  border-radius: 0.5rem;
  margin: 1.5rem 0;
  max-width: 100%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.formation-content a {
  color: #007C91;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.formation-content a:hover {
  color: #005A6A;
}

.formation-content code {
  background-color: #E0F2F5;
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  font-family: monospace;
  font-size: 0.9em;
}

.formation-content pre {
  background-color: #1E1E1E;
  color: #fff;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}

.formation-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.formation-content table th {
  background-color: #E0F2F5;
  color: #007C91;
  font-weight: 600;
  text-align: left;
  padding: 0.75rem;
  border: 1px solid #ccc;
}

.formation-content table td {
  padding: 0.75rem;
  border: 1px solid #ccc;
}

.formation-content table tr:nth-child(even) {
  background-color: #f8f8f8;
}

/* Mise en forme des détails techniques */
.technical-details-formatted ul {
  list-style: none;
  padding-left: 0;
  margin-top: 1rem;
}

.technical-details-formatted ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.technical-details-formatted ul li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--turquoise-dark);
  font-weight: bold;
  font-size: 1.2rem;
}

/* Style pour les tableaux dans les détails techniques */
.technical-details-formatted table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.technical-details-formatted table th,
.technical-details-formatted table td {
  padding: 0.75rem;
  border: 1px solid #e2e8f0;
}

.technical-details-formatted table th {
  background-color: var(--turquoise-100);
  color: var(--turquoise-dark);
  font-weight: 600;
  text-align: left;
}

.technical-details-formatted table tr:nth-child(even) {
  background-color: #f8fafc;
}

/* Mise en forme des données clés */
.technical-details-formatted p {
  margin-bottom: 0.75rem;
}

/* Style pour les valeurs numériques */
.technical-details-formatted strong {
  color: var(--turquoise-dark);
  font-weight: 600;
}

/* Optimisation mobile */
@media (max-width: 768px) {
  .pdf-download-button {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }
  
  .technical-details-formatted table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  .section-title {
    font-size: 1.25rem;
  }
}

/* Animation pour les boutons d'action */
.action-button {
  transition: all 0.3s ease;
}

.action-button:hover {
  transform: translateY(-2px);
}

/* Style pour la section "Voir aussi" */
.related-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.related-link {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.related-link:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.related-link-icon {
  margin-right: 0.75rem;
  color: var(--turquoise-dark);
}