/*
* Fichier : mini-ateliers.css
* Ce fichier contient les styles spécifiques à la page des mini-ateliers.
* Les styles sont basés sur le framework Bootstrap pour la mise en page
* et la librairie AOS pour les animations au défilement.
*/

/* ===== Variables CSS (pour la cohérence des couleurs) ===== */
:root {
  --primary-color: #19243e; /* Bleu foncé H2P */
  --secondary-color: #dfaf02; /* Jaune doré H2P */
  --tertiary-color: #333332; /* Gris foncé H2P */
  --quaternary-color: #f6f6f6; /* Gris clair H2P */
  --gradient-primary: linear-gradient(135deg, #19243e, #19243e);
  --gradient-secondary: linear-gradient(135deg, #dfaf02, #d39e00);
  --gradient-tertiary: linear-gradient(135deg, #333332, #2b2b2a);
  --gradient-quaternary: linear-gradient(135deg, #f6f6f6, #dddddd);
}

/* ===== Styles généraux des sections et du titre de page ===== */
.section {
  padding: 60px 0;
  overflow: hidden;
}

.page-title h1 {
  font-size: 3rem;
  font-weight: 700;
  color: #19243e; /* Titre en bleu foncé H2P */
}

.page-title .breadcrumbs ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.page-title .breadcrumbs a {
  color: rgba(
    25,
    36,
    62,
    0.7
  ); /* Liens breadcrumbs en bleu foncé H2P transparent */
  text-decoration: none;
}

.page-title .breadcrumbs a:hover {
  color: #19243e; /* Survol en bleu foncé H2P */
}

/* ===== Styles spécifiques aux cartes de services ===== */

.service-item {
  position: relative;
  overflow: hidden;
  padding: 30px;
  background: #f6f6f6; /* Fond en gris clair H2P */
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

/* Effet de survol */
.service-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.service-item .icon {
  margin-right: 20px;
  font-size: 3rem;
  line-height: 1;
  color: #dfaf02; /* Icône en jaune doré H2P */
}

.service-item .title {
  font-size: 1.5rem;
  font-weight: 300;
  margin-bottom: 10px;
  color: #19243e; /* Titre en bleu foncé H2P */
}

.service-item .description {
  color: #333332; /* Description en gris foncé H2P */
  font-size: 1rem;
}

.service-item .readmore {
  position: relative;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  color: var(--primary-color); /* Lien en bleu foncé H2P */
  text-decoration: none;
  transition: all 0.3s ease;
}

/* L'icône de flèche à droite du lien */
.service-item .readmore i {
  font-size: 1rem;
  vertical-align: middle;
  transition: transform 0.3s ease;
}

.service-item:hover .readmore i {
  transform: translateX(5px);
}

/* Styles pour le bouton d'appel à l'action */
.cta-btn {
  background-color: var(--secondary-color); /* Bouton en jaune doré H2P */
  color: white;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: bold;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.cta-btn:hover {
  background-color: #19243e; /* Survol en bleu foncé H2P */
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Styles pour les modales */
.modal-content {
  border-radius: 10px;
}

.modal-header {
  border-bottom: none;
  padding-bottom: 0;
}

.modal-title {
  font-weight: 700;
  color: var(--primary-color); /* Titre de la modale en bleu foncé H2P */
}

.modal-body img {
  border-radius: 8px;
}

/* Styles pour la section d'introduction */
.introduction h3 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-color); /* Titre en bleu foncé H2P */
}

.introduction p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--tertiary-color); /* Texte en gris foncé H2P */
}