/*******************************************************************************
* TITRE DE PAGE
* Styles pour les titres de chaque pages
* Sources : N/A
*******************************************************************************/

.about-section .section-title {
  background: linear-gradient(to right, hsl(207, 100%, 30%), #439fd2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.actualites .section-title {
  color: #1070a4;
}

.actualites .section-title::after {
  background: #1070a4;
}

.equipes .section-title {
  color: #1070a4;
}

.equipes .section-title::after {
  background: #1070a4;
}

.programmes .section-title {
  color: #1070a4;
}

.programmes .section-title::after {
  background: #1070a4;
}

/* Section des professionnels */
.professionnels {
  padding: 2rem;
  margin: 2rem 0;
}

/* Responsive design */
@media screen and (max-width: 768px) {
  .section-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }
}

/*******************************************************************************
* MENU ET NAVIGATION
* Styles pour la barre de navigation principale
* Source : menu.css
*******************************************************************************/
/* Barre de navigation principale */
.menu {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 999;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0;
}

/* Container du menu */
.menu-container {
  max-width: 1800px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}

/* Logo */
.menu-container .logo {
  width: 180px;
  display: block;
  margin: 0;
}

.menu-container .logo img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
}

/* Liste de navigation */
.menu-container ul {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 2rem;
  margin: 0;
  padding: 0;
  width: auto;
  justify-content: flex-end;
}

/* Liens de navigation */
.menu-container ul li a {
  color: #333;
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
  padding: 0.5rem 0;
  position: relative;
  transition: color 0.3s ease;
}

/* Effet de soulignement au survol */
.menu-container ul li a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #1070a4;
  transition: width 0.3s ease;
}

.menu-container ul li a:hover {
  color: #1070a4;
}

.menu-container ul li a:hover::after {
  width: 100%;
}

html {
  scroll-behavior: smooth;
}

/* Menu mobile */
.mobile-menu {
  display: none;
  width: 100%;
  position: sticky;
  top: 0;
  height: 80px;
  background: #fff;
  z-index: 1000;
  padding-inline: 20px;
  align-items: center;
  box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.07);
}

/* Media queries */
@media screen and (max-width: 810px) {
  .mobile-menu {
    display: flex;
  }

  .menu {
    display: none;
  }

  .menu-container {
    flex-direction: column;
    height: 100vh;
  }

  .menu-container ul {
    flex-direction: column;
    gap: 1rem;
  }

  .menu-container .logo {
    width: 250px;
    margin-bottom: 20px;
  }
}

/*******************************************************************************
* HEADER ET FOOTER
* Styles pour l'en-tête et le pied de page
* Source : head-foot.css
*******************************************************************************/
header {
  height: 40vh;
  background: url(../img/msp/MSP_preview2.png);
  background-position: center;
  background-size: cover;
  color: #ffffff;
  text-align: center;
}

header div.principal {
  display: flex;
  flex-direction: column;
  height: 90%;
  width: 100%;
  align-items: center !important;
  justify-content: center;
}

header div.principal h4 {
  margin-top: -20px;
  padding: 20px;
}

footer {
  margin: 0;
  padding-top: 30px;
  color: black;
  width: 100%;
}

footer .footer-details {
  background-color: #ffffff;
}

footer .footer-details .footer-inner {
  padding-top: 20px;
  width: 100%;
  height: 300px;
  background-image: linear-gradient(
      180deg,
      rgb(24, 97, 117) 0%,
      rgba(2, 82, 105, 0.4) 100%
    ),
    url(../img/msp/MSP_preview2.png);
  background-size: cover;
  box-shadow: inset 0 -50px 0 0 #fff;
}

.footer-inner .equipes-foot {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: auto;
  height: 85px;
  margin-left: 40px;
  margin-right: 40px;
}

.footer-inner .equipes-foot h3 {
  color: #fff !important;
}

.footer-inner .equipes-foot h4 {
  font-size: 25px;
  color: #fff;
}

.footer-inner .equipes-foot button {
  width: 200px;
  height: 40px;
  border-radius: 30px;
  border: 2px solid #399d3f;
  transition: all 0.5s ease-in-out;
}

.footer-inner .equipes-foot button:hover {
  width: 200px;
  height: 40px;
  border-radius: 30px;
  border: 2px solid #399d3f;
  color: #fff;
  text-decoration: underline;
  background-color: #1070a4;
}

.footer-inner .info-MSP {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.footer-inner .info-MSP .adresse {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: justify;
  border: 3px solid #399d3f;
  border-right: 0;
  background-color: #ffffff;
  width: 30%;
  height: 180px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

footer .info-MSP .num-msp {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: justify;
  border: 3px solid #399d3f;
  border-left: 0;
  background-color: #ffffff;
  width: 30%;
  height: 180px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

footer .info-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: 25px;
  margin-right: 25px;
}

footer .info-footer nav {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

footer .info-footer .CGU-foot {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

footer .info-footer nav li,
footer .info-footer .CGU-foot li {
  list-style: none;
}

footer .info-footer nav li a,
footer .info-footer .CGU-foot li a {
  color: #000000;
  text-decoration: none;
}

footer .footer-details .apropos-foot {
  font-weight: 600;
  font-size: 20px;
  margin: 15px;
}

footer .social-media {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

footer .copy-social-footer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  margin-left: 25px;
  margin-right: 25px;
}

footer .copy-social-footer .social-media a {
  color: #000000;
  text-decoration: none;
  text-align: center;
}

footer .copy-social-footer .social-media p {
  margin-right: 15px;
  border: 1px solid #000000;
  border-radius: 50%;
  text-align: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/*******************************************************************************
* BOUTONS D'ACTION
* Style unifié pour les boutons principaux du site
* Inclut des animations fluides au survol
* Utilisé pour : "En savoir plus", "Voir toutes nos actualités"
*******************************************************************************/
.btn-primary {
  display: inline-block;
  padding: 12px 30px;
  background-color: #3aaa35;
  color: white !important;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border: 2px solid #3aaa35;

  /* Configuration de la transition */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Effet de brillance au survol */
.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: all 0.6s;
  z-index: -1;
}

/* Animation au survol */
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(58, 170, 53, 0.3);
  background-color: #2b8f26;
  border-color: #2b8f26;
}

/* Animation de la brillance au survol */
.btn-primary:hover::before {
  left: 100%;
}

/* Style pour le conteneur du bouton (centrage) */
.btn-container {
  display: flex;
  justify-content: flex-start;
  padding-left: 2rem;
  width: 100%;
  max-width: 1800px;
}

/* Style spécifique pour la section "A propos" */
.about-section .btn-container {
  padding-left: calc(2rem + 2%);
}

/* Style spécifique pour la section actualités */
.actualites .btn-container {
  padding-left: calc(2rem + 2%);
}

#contact-msp {
  display: inline-block;
  padding: 12px 30px;
  background-color: #3aaa35;
  /* Couleur de base verte */
  color: white !important;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border: none;
  position: relative;
  overflow: hidden;
  /* Cache le débordement du dégradé */
  z-index: 1;
  transition: all 0.3s ease;
}

/* Élément qui contiendra notre vague de dégradé */
#contact-msp::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  /* Commence hors du bouton sur la gauche */
  width: 100%;
  /* Largeur égale au bouton */
  height: 100%;
  /* Dégradé qui traverse tout l'élément */
  background: linear-gradient(
    to right,
    #3aaa35,
    /* Commence en vert */ #1070a4,
    /* Transition vers le bleu */ #3aaa35 /* Revient au vert */
  );
  opacity: 0;
  /* Invisible par défaut */
  z-index: -1;
  transition: opacity 0.3s ease;
}

/* Au survol, on active l'animation */
#contact-msp:hover::before {
  opacity: 1;
  animation: gradientWave 3s linear infinite;
}

/* Effet de soulèvement au survol */
#contact-msp:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(58, 170, 53, 0.3);
}

/* Animation de la vague de dégradé */
@keyframes gradientWave {
  0% {
    left: -100%;
    /* Commence hors du bouton à gauche */
  }

  100% {
    left: 100%;
    /* Termine hors du bouton à droite */
  }
}

/* Désactive l'ancien effet de soulignement */
#contact-msp::after {
  display: none;
}

#scrollUp {
  position: fixed;
  bottom: 10px;
  right: -100px;
  opacity: 1;
}

/* Bouton newsletter */
.position {
  display: flex;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}

.newsletter {
  border: 1px solid #439fd2;
  background-color: #439fd2;
  border-radius: 30px;
  padding: 5px;
  margin: 10px;
  transition: all 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
}

.newsletter:hover {
  background-color: #3aaa35;
  border-color: #3aaa35;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(58, 170, 53, 0.2);
}

.newsletter::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: all 0.6s ease;
}

.newsletter:hover::before {
  left: 100%;
}

.newsletter a {
  padding: 5px;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.newsletter:hover a {
  color: white !important;
}

/*******************************************************************************
* PRESENTATION ET CONTENU PRINCIPAL
* Styles pour les sections de présentation
* Sources : programmes.css, professions.css, actu.css, apropos.css
*******************************************************************************/
/*******************************************************************************
* PRESENTATION ET CONTENU PRINCIPAL - VERSION MODIFIÉE
* Styles pour les sections de présentation avec séparation claire des responsabilités
* REMPLACE la section existante dans votre styles.css (lignes ~1000-1300)
*******************************************************************************/

/* Conteneur principal des présentations en deux colonnes - RÈGLES GÉNÉRIQUES UNIQUEMENT */
.premieres-presentations {
  display: flex;
  gap: 30px; /* Espacement entre les colonnes */
  align-items: flex-start; /* Alignement en haut */
  margin: 20px 0;
  padding: 0 20px;

  /* Assure un affichage flexible sur différentes tailles d'écran */
  flex-wrap: wrap;
}

/* Colonne de gauche - Contenu textuel - RÈGLES GÉNÉRIQUES CONSERVÉES */
.premieres-presentations .gauche {
  /* Prend environ 60% de l'espace disponible */
  flex: 1 1 60%;
  min-width: 400px; /* Largeur minimale pour la lisibilité du texte */
  line-height: 1.1;
  font-size: 16px;
}

.premieres-presentations .gauche h2 {
  border-left: 2px solid #00569b;
  color: #00569b;
  margin-bottom: 0;
  padding-left: 15px;
  width: 100%;
}

.premieres-presentations .gauche h4 {
  border-left: 2px solid #00569b;
  color: #00569b;
  padding-top: 15px;
  padding-left: 15px;
  width: 100%;
}

.premieres-presentations .gauche p {
  border-left: 2px solid #00569b;
  color: #000000;
  margin-top: 0;
  padding-top: 20px;
  padding-left: 15px;
  width: 100%;
}

.premieres-presentations .gauche ul {
  list-style-type: circle;
  border-left: 2px solid #00569b;
  padding-left: 30px;
  padding-top: 10px;
}

.premieres-presentations .gauche small {
  border-left: 2px solid #00569b;
  padding-left: 30px;
  color: #00569b;
  font-size: 17px;
  font-weight: 600;
}

/* Colonne de droite - RÈGLES GÉNÉRIQUES POUR CONTENU NORMAL (images, etc.) */
.premieres-presentations .droite {
  /* Prend l'espace restant */
  flex: 0 1 auto;

  /* Dimensions génériques raisonnables pour tout type de contenu */
  width: 400px;
  min-width: 300px;
  max-width: 500px;
  height: 600px; /* Hauteur automatique pour contenu normal */

  /* Positionnement et apparence de base */
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: #f8f9fa; /* Couleur de fond pendant le chargement */

  /* Animation douce lors du redimensionnement */
  transition: all 0.3s ease;
}

/* Images génériques dans la colonne droite */
.premieres-presentations .droite img {
  width: 100%;
  height: auto; /* Préserve les proportions naturelles */
  border-radius: 30px;
  box-shadow: 10px 15px 11px rgba(0, 0, 0, 0.5);
  display: block;
}

/*==============================================================================
 * RÈGLES SPÉCIFIQUES AUX PDFs - NOUVELLES CLASSES MODIFICATRICES
 * Ces règles ne s'appliquent QUE quand vous ajoutez la classe .with-pdf
 * Usage: <div class="premieres-presentations with-pdf">
 *==============================================================================*/

/* Modification de la colonne droite UNIQUEMENT pour les PDFs */
.premieres-presentations.with-pdf .droite {
  /* Redéfinition complète avec vos calculs PDF existants */

  /* Calcul intelligent de la largeur selon la viewport - VOS RÈGLES CONSERVÉES */
  width: calc(40vw - 60px); /* 40% de la viewport moins les marges */
  min-width: 300px; /* Largeur minimale pour que le PDF reste lisible */
  max-width: 500px; /* Largeur maximale pour éviter un PDF trop grand */

  /* Calcul de la hauteur selon le ratio A4 (1:1.414) - VOS RÈGLES CONSERVÉES */
  height: calc((40vw - 60px) * 1.414); /* Hauteur = largeur × ratio A4 */
  min-height: 424px; /* Hauteur minimale (300px × 1.414) */
  max-height: 707px; /* Hauteur maximale (500px × 1.414) */

  /* Styles visuels spécifiques aux documents PDF */
  background: #ffffff; /* Fond blanc comme une page de document */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); /* Ombre plus prononcée pour simuler une page */
  border: 1px solid #e0e0e0; /* Bordure subtile pour délimiter le document */
}

/* L'élément embed du PDF - VOS RÈGLES CONSERVÉES */
.premieres-presentations.with-pdf .droite embed {
  width: 100%; /* Remplit complètement son conteneur */
  height: 100%; /* Remplit complètement son conteneur */
  border: none; /* Supprime les bordures par défaut */
  border-radius: 8px; /* Coins arrondis pour l'esthétique */

  /* Améliore le rendu sur les écrans haute résolution */
  image-rendering: auto;
  image-rendering: crisp-edges;

  /* Assure un affichage fluide */
  object-fit: contain; /* Le PDF s'adapte sans déformation */
}

/* Indicateur de chargement pour le PDF - AMÉLIORATION DE VOS RÈGLES */
.premieres-presentations.with-pdf .droite::before {
  content: "📄 Chargement du document PDF...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  color: #6c757d;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  background: rgba(255, 255, 255, 0.95);
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  /* Disparaît une fois le PDF chargé */
  z-index: 1;
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

/* Cache l'indicateur une fois le PDF chargé */
.premieres-presentations.with-pdf .droite embed + * {
  display: none;
}

/*==============================================================================
 * RESPONSIVE DESIGN - MODIFICATION DE VOS MEDIA QUERIES EXISTANTES
 * Séparation des règles génériques et spécifiques aux PDFs
 *==============================================================================*/

/* Design responsive pour tablettes - RÈGLES GÉNÉRIQUES */
@media screen and (max-width: 1024px) {
  .premieres-presentations {
    gap: 20px;
  }

  .premieres-presentations .gauche {
    flex: 1 1 55%;
    min-width: 350px;
  }

  .premieres-presentations .droite {
    /* Règles génériques pour contenu normal */
    width: 350px;
    max-width: 400px;
  }

  /* Règles spécifiques aux PDFs sur tablette */
  .premieres-presentations.with-pdf .droite {
    width: calc(45vw - 40px);
    height: calc((45vw - 40px) * 1.414);
    min-width: 280px;
    max-width: 400px;
    min-height: 396px;
    max-height: 566px;
  }
}

/* Point de rupture critique à 1000px - MODIFICATION DE VOTRE RÈGLE EXISTANTE */
@media screen and (max-width: 1000px) {
  .premieres-presentations {
    /* Passage en disposition verticale pour optimiser l'espace et la lisibilité */
    flex-direction: column;
    gap: 30px; /* Espacement généreux entre texte et contenu visuel */
    align-items: stretch; /* Les éléments utilisent toute la largeur disponible */
  }

  .premieres-presentations .gauche {
    /* Le texte occupe maintenant toute la largeur */
    flex: none;
    width: 100%;
    min-width: auto;

    /* Suppression de la bordure gauche devenue inutile - VOS RÈGLES CONSERVÉES */
    border-left: none !important;
    padding-left: 0 !important;

    /* Amélioration de la lisibilité et de l'espacement du texte */
    max-width: 800px; /* Limite la largeur pour une lecture optimale */
    margin: 0 auto; /* Centre le contenu sur les grands écrans */
    padding: 25px 20px; /* Espacement interne confortable */
    line-height: 1.7; /* Interligne plus généreux pour faciliter la lecture */
    font-size: 16px; /* Taille de police légèrement augmentée */

    /* Espacement entre les paragraphes pour améliorer la structure visuelle */
    & p {
      margin-bottom: 1.2em;
    }

    /* Amélioration de l'espacement des titres */
    & h2,
    & h3,
    & h4 {
      margin-top: 1.5em;
      margin-bottom: 0.8em;
      line-height: 1.3;
    }

    /* Premier titre sans marge supérieure */
    & h2:first-child,
    & h3:first-child,
    & h4:first-child {
      margin-top: 0;
    }
  }

  .premieres-presentations .droite {
    /* Contenu générique - largeur flexible */
    width: 100%;
    max-width: 600px; /* Largeur maximale raisonnable */
    margin: 0 auto; /* Centre le contenu */
    height: 600px; /* Hauteur automatique pour images et contenu normal */

    /* Amélioration visuelle - VOS STYLES CONSERVÉS */
    border-radius: 12px; /* Coins plus arrondis pour un look moderne */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); /* Ombre plus douce */
  }

  /* Règles spéciales pour les PDFs en mode vertical - VOS CALCULS CONSERVÉS */
  .premieres-presentations.with-pdf .droite {
    /* Le PDF s'adapte à la largeur mais garde ses proportions A4 */
    width: 100%;
    max-width: 600px; /* Largeur maximale pour éviter un PDF trop grand */
    margin: 0 auto; /* Centre le PDF */

    /* Calcul de hauteur basé sur la largeur effective - VOS RÈGLES */
    height: calc(min(100vw - 40px, 600px) * 1.414);
    min-height: 400px;
    max-height: 848px; /* 600px × 1.414 */
  }
}

/* Design responsive pour tablettes moyennes - VOS RÈGLES CONSERVÉES */
@media screen and (max-width: 768px) {
  .premieres-presentations .gauche {
    /* Ajustements spécifiques pour tablettes */
    max-width: 100%;
    padding: 20px 15px;
    font-size: 15px;
    line-height: 1.6;
  }

  .premieres-presentations .droite {
    max-width: 500px;
  }

  .premieres-presentations.with-pdf .droite {
    max-width: 500px;
    height: calc(min(100vw - 30px, 500px) * 1.414);
    max-height: 707px;
    border-radius: 10px;
  }
}

/* Design responsive pour petits écrans et mobiles - VOS RÈGLES ADAPTÉES */
@media screen and (max-width: 480px) {
  .premieres-presentations .droite {
    /* Sur mobile, utilise la largeur complète pour contenu normal */
    width: 100%;
    max-width: none;
    height: 600px; /* Hauteur auto pour images */
  }

  .premieres-presentations.with-pdf .droite {
    /* Sur mobile, PDFs utilisent des proportions spécifiques */
    width: 100%;
    height: calc(
      100vw * 0.95 * 1.414
    ); /* 95% de la largeur d'écran × ratio A4 */
    max-height: 500px; /* Limite pour éviter un PDF trop haut sur mobile */
    border-radius: 4px; /* Coins moins arrondis sur très petit écran */
  }

  .premieres-presentations.with-pdf .droite::before {
    font-size: 12px;
  }
}

/* Styles pour une meilleure intégration avec le reste du design - VOS EFFETS CONSERVÉS */
.premieres-presentations .droite:hover {
  transform: translateY(-2px); /* Légère élévation au survol */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Gestion des erreurs de chargement PDF - NOUVELLE FONCTIONNALITÉ */
.premieres-presentations.with-pdf .droite embed[src=""]:after {
  content: "📄 Document PDF non disponible";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #dc3545;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}
/*******************************************************************************
* EQUIPES ET CARTES
* Styles pour la section des équipes et les cartes du personnel
* Source : equi-v1.css
*******************************************************************************/
.equipes {
  padding: 30px;
  color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.equipes h1,
.equipes p {
  text-align: center;
}

.equipes .equipes-cartes {
  max-width: 1600px;
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

/* Styles de base pour les cartes d'équipe */
.equipes .equipes-cartes .carte {
  /* Structure de base */
  height: 280px;
  width: 205px;
  padding: 20px;
  margin-bottom: 20px;
  margin-right: 20px;
  border-radius: 30px;

  /* Organisation du contenu */
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* Style visuel initial */
  background-color: #e2dedf;
  background-image: linear-gradient(35deg, #fff 0%, #1070a4 100%);
  color: black;
  font-size: 10px;

  /* Effets et interactions */
  position: relative;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Styles des images dans les cartes */
.equipes .equipes-cartes .carte img {
  height: 80px;
  width: 80px;
  border-radius: 18px;
  position: relative;
  z-index: 2;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Style du titre dans les cartes */
.equipes .equipes-cartes .carte h1 {
  font-size: 20px;
  position: relative;
  z-index: 2;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Effets au survol de la carte */
.equipes .equipes-cartes .carte:hover {
  /* Changement de taille */
  height: 300px;
  width: 225px;
  font-size: 23px;

  /* Effets visuels */
  transform: translateY(-10px);
  box-shadow: 0 20px 25px rgba(16, 112, 164, 0.2);
  background-image: linear-gradient(35deg, #fff 0%, #1070a4 100%);
}

/* Transformation de l'image au survol */
.equipes .equipes-cartes .carte:hover img {
  height: 90px;
  width: 90px;
  transform: rotate(5deg);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Animation du titre au survol */
.equipes .equipes-cartes .carte:hover h1 {
  transform: scale(1.1);
  color: #003050;
}

/* Amélioration des cartes équipes sur mobile */
@media screen and (max-width: 810px) {
  /* Grille responsive pour les cartes */
  .equipes .equipes-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    padding: 0 10px;
    max-width: 600px;
    margin: 30px auto;
  }

  /* Cartes plus grandes et mieux proportionnées */
  .equipes .equipes-cartes .carte {
    height: 160px;
    width: 100%;
    padding: 15px 10px;
    margin: 0;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
  }

  /* Images adaptées */
  .equipes .equipes-cartes .carte img {
    height: 60px;
    width: 60px;
    border-radius: 15px;
    flex-shrink: 0;
    transition: all 0.3s ease;
  }

  /* Titres avec gestion du débordement */
  .equipes .equipes-cartes .carte h1 {
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    margin: 0;
    word-wrap: break-word;
    hyphens: auto;
    width: 100%;
    max-width: 100%;
    padding: 0 5px;
  }

  /* État de survol adapté */
  .equipes .equipes-cartes .carte:hover {
    height: 170px;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(16, 112, 164, 0.15);
  }

  .equipes .equipes-cartes .carte:hover img {
    height: 65px;
    width: 65px;
    transform: scale(1.05);
  }

  .equipes .equipes-cartes .carte:hover h1 {
    font-size: 15px;
    color: #003050;
  }
}

/* Pour les très petits écrans (moins de 480px) */
@media screen and (max-width: 480px) {
  .equipes .equipes-cartes {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 15px;
  }

  .equipes .equipes-cartes .carte {
    height: 150px;
    padding: 12px 8px;
  }

  .equipes .equipes-cartes .carte img {
    height: 55px;
    width: 55px;
  }

  .equipes .equipes-cartes .carte h1 {
    font-size: 13px;
  }
}

/* Pour les titres très longs comme "Masseur-Kinésithérapeute" */
@media screen and (max-width: 810px) {
  #masseur-kine h1 {
    font-size: 12px;
    line-height: 1.1;
  }

  #audio-prothesiste h1 {
    font-size: 13px;
  }
}

/* Styles spécifiques pour chaque type de professionnel */
#medecin {
  border: 2px solid #5dade2;
}

#medecin-i {
  background-color: #5dade2;
}

#infirmier {
  border: 2px solid #a569bd;
}

#infirmier-i {
  background-color: #a569bd;
}

#sage-femme {
  border: 2px solid #ec407a;
}

#sage-femme-i {
  background-color: #ec407a;
}

#masseur-kine {
  border: 2px solid #ec7063;
}

#masseur-kine-i {
  background-color: #ec7063;
}

#pharmacien {
  border: 2px solid #52be80;
}

#pharmacien-i {
  background-color: #52be80;
}

#dieteticien {
  border: 2px solid #f4d03f;
}

#dieteticien-i {
  background-color: #f4d03f;
}

#psychologue {
  border: 2px solid #eb984e;
}

#psychologue-i {
  background-color: #eb984e;
}

#podologue {
  border: 2px solid #aab7b8;
}

#podologue-i {
  background-color: #aab7b8;
}

#audio-prothesiste {
  border: 2px solid #8d6e63;
}

#audio-prothesiste-i {
  background-color: #8d6e63;
}

#opticien {
  border: 2px solid #009966;
}

#opticien-i {
  background-color: #009966;
}

#coordinatrice {
  border: 2px solid #66cccc;
}

#coordinatrice-i {
  background-color: #66cccc;
}

/*******************************************************************************
* NUMÉROS UTILES
* Styles pour la section des numéros utiles
* Source : num.css
*******************************************************************************/
.num-utile {
  padding: 2rem;
  border-radius: 20px;
  margin: 2rem auto;
  max-width: 1200px;
  width: 100%;
}

.num-utile h3 {
  font-size: 2rem;
  color: #00569b;
  margin-bottom: 2rem;
  text-align: center;
  position: relative;
}

.num-utile h3::after {
  content: "";
  display: block;
  width: 100px;
  height: 4px;
  background: #439fd2;
  margin: 1rem auto;
  border-radius: 2px;
}

.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  padding: 1.5rem;
}

.numeros > div {
  position: relative;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding-top: 1.8rem;
  padding: 1.5rem;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.numeros > div::before {
  position: absolute;
  top: -10px;
  left: 15px;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  color: white;
}

.numeros > div:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.numeros h1 {
  font-size: 1.8rem;
  color: #439fd2;
  margin-bottom: 0.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.numeros h1::before {
  content: "📞";
  font-size: 1.5rem;
}

.numeros p {
  color: #495057;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

.urgence::before {
  content: "URGENCE";
  background-color: #dc3545;
}

.aide::before {
  content: "AIDE";
  background-color: #28a745;
}

.sante::before {
  content: "SANTÉ";
  background-color: #007bff;
}

.services::before {
  content: "SERVICES";
  background-color: #6610f2;
}

/* Style pour les catégories d'urgence */
.urgence h1 {
  color: #dc3545;
}

/* Style pour les numéros d'aide */
.aide h1 {
  color: #28a745;
}

/* Style pour les numéros de santé */
.sante h1 {
  color: #007bff;
}

/* Style pour les numéros de services public */
.services h1 {
  color: #6610f2;
}

/*******************************************************************************
* ACTUALITÉS
* Styles pour la section actualités
* Source : actu.css
*******************************************************************************/
/* Organisation de la grille d'actualités */
.grp-actu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* Style de base des cartes */
.actu-carte {
  position: relative;
  height: 400px;
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Face avant de la carte */
.actu-front {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.actu-front .img-container {
  height: 65%;
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  padding: 1rem;
}

/* Ajout d'une transition fluide pour le chargement des images */
.actu-front .img-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #f5f5f5, #ffffff, #f5f5f5);
  animation: loading 1.5s infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.actu-front .img-container.loading::before {
  opacity: 1;
}

@keyframes loading {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.actu-front img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
  border: 2px solid rgba(16, 112, 164, 0.3);
  border-radius: 10px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Effet de survol amélioré */
.actu-carte:hover .actu-front img {
  border-color: #1070a4;
  transform: scale(1.02);
}

/* Style de la date */
.actu-date {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgba(16, 112, 164, 0.9);
  color: white;
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 0.9rem;
  backdrop-filter: blur(5px);
  z-index: 1;
}

/* Style du titre sur la face avant */
.actu-front h3 {
  padding: 1rem;
  margin: 0;
  margin-top: 1rem;
  font-size: 1.2rem;
  color: #333 !important;
  text-align: center;
}

/* Face arrière avec les détails */
.actu-details {
  position: absolute;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: white;
  padding: 2rem;
  /* Ajout de l'opacité initiale à 0 */
  opacity: 0;
  /* Combinaison des transitions pour le mouvement et l'opacité */
  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 2;
}

/* Bouton de fermeture */
.close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
  padding: 5px 10px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #333;
}

/* Bouton "En savoir plus" */
.btn-savoir-plus {
  display: inline-block;
  padding: 12px 25px;
  background: #3aaa35;
  color: white !important;
  text-decoration: none;
  border-radius: 25px;
  text-align: center;
  transition: all 0.3s ease;
  margin-top: auto;
}

.btn-savoir-plus:hover {
  background: #2b8f26;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(58, 170, 53, 0.2);
}

/* État actif - affichage des détails */
.actu-carte.active .actu-details {
  right: 0;
  opacity: 1;
}

/* Resposive design */
@media (max-width: 768px) {
  .actu-details {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    transform: translateX(100%);
    opacity: 0;
    /* Modification des transitions pour le mobile */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  }

  .actu-front .img-container {
    height: 60%;
    /* Légèrement plus petit sur mobile */
  }

  .actu-carte.active .actu-details {
    transform: translateX(0);
    opacity: 1;
  }

  .close-btn {
    top: 20px;
    right: 20px;
    font-size: 2rem;
  }
}

.actualites-disclaimer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.5rem auto;
  padding: 0.75rem;
  max-width: 600px;
  background-color: rgba(16, 112, 164, 0.05);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.actualites-disclaimer i {
  color: #1070a4;
  font-size: 0.9rem;
}

.actualites-disclaimer p {
  margin: 0;
  font-size: 0.8rem;
  font-style: italic;
  color: #666;
  line-height: 1.4;
}

/*******************************************************************************
* AGENDA
* Styles pour la section agenda
* Source : actu.css
*******************************************************************************/

.agen-mois {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.posi-agen {
  margin-bottom: 20px;
}

.agen-mois .posi-agen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.agen-mois .posi-agen .carte-agen {
  display: flex;
  flex-direction: row;
  border-radius: 15px;
  background-color: #fff;
  width: 100%;
  border: 1px solid #52be80;
  margin-bottom: 1px;
}

.agen-mois .posi-agen .carte-agen .date {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 20%;
  background-color: #1070a4;
  padding: 20px;
  border-bottom-left-radius: 15px;
  border-top-left-radius: 15px;
  font-size: 20px;
}

.agen-mois .posi-agen .carte-agen .button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 20%;
  background-color: #fff;
  padding: 20px;
  border-bottom-right-radius: 15px;
  border-top-right-radius: 15px;
  font-size: 20px;
}

.agen-mois .posi-agen .carte-agen .button button {
  display: flex;
  justify-content: center;
  align-items: center;
}

.agen-mois .posi-agen .carte-agen .details {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  padding-right: 5px;
  flex-direction: column;
}

.agen-mois .posi-agen .carte-agen .details h1 {
  font-size: 20px;
  margin: 5px;
}

.agen-mois .posi-agen .carte-agen .details button {
  float: right;
  width: 200px;
  height: 20px;
}

.agen-mois h1 {
  margin-right: 50px;
  margin-left: auto;
}

.agen-mois button {
  margin-left: auto;
  margin-right: auto;
  width: 200px;
  height: 50px;
  font-size: 15px;
  border: 1px solid#00569B;
  background-color: #00569b;
  color: #fff;
  border-radius: 30px;
  transition: all 0.7s ease;
}

.agen-mois button:hover {
  border: 1px solid#002b4e;
  background-color: #002b4e;
  color: #fff;
  text-decoration: underline;
}

.agenda button a {
  color: #fff !important;
}

/* Styles de la popup */
.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.5s ease;
}

.popup-content {
  background: linear-gradient(145deg, #ffefba, #ffffff);
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  position: relative;
  max-width: 600px;
  width: 90%;
  text-align: center;
  animation: zoomIn 0.3s ease;
}

.popup-content video {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  background: #fff;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.close:hover {
  background: #ff0000;
  color: #fff;
  transform: scale(1.1);
}

/* Responsive design amélioré pour l'agenda mobile */
@media screen and (max-width: 810px) {
  /* Réorganisation de la carte en colonne pour mobile */
  .agen-mois .posi-agen .carte-agen {
    flex-direction: column;
    width: 100%;
    min-height: auto;
    padding: 0;
    margin-bottom: 1rem;
  }

  /* Date en haut sur toute la largeur */
  .agen-mois .posi-agen .carte-agen .date {
    width: 100%;
    padding: 15px;
    border-radius: 15px 15px 0 0;
    font-size: 16px;
    font-weight: 600;
  }

  /* Zone de détails avec padding approprié */
  .agen-mois .posi-agen .carte-agen .details {
    width: 100%;
    padding: 20px 15px;
    text-align: left;
  }

  /* Titre plus petit mais lisible */
  .agen-mois .posi-agen .carte-agen .details h1 {
    font-size: 18px;
    margin-bottom: 10px;
    line-height: 1.2;
  }

  /* Description visible et stylée */
  .agen-mois .posi-agen .carte-agen .details p {
    display: block; /* Rend la description visible */
    font-size: 14px;
    line-height: 1.4;
    color: #666;
    margin: 0;
  }

  /* Zone du bouton en bas */
  .agen-mois .posi-agen .carte-agen .button {
    width: 100%;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 0 0 15px 15px;
    border-top: 1px solid #e9ecef;
  }

  /* Bouton adapté pour mobile */
  .agen-mois .posi-agen .carte-agen .button button {
    width: 100%;
    max-width: 200px;
    padding: 10px 20px;
    font-size: 14px;
  }
}

/* Pour les très petits écrans */
@media screen and (max-width: 480px) {
  .agen-mois .posi-agen .carte-agen .date {
    font-size: 14px;
    padding: 12px;
  }

  .agen-mois .posi-agen .carte-agen .details {
    padding: 15px 12px;
  }

  .agen-mois .posi-agen .carte-agen .details h1 {
    font-size: 16px;
  }

  .agen-mois .posi-agen .carte-agen .details p {
    font-size: 13px;
  }
}

/*******************************************************************************
* PROGRAMMES
* Styles améliorés pour la section programmes
* Source : programmes.css
*******************************************************************************/

/* === SECTION PROGRAMMES SUR LA PAGE D'ACCUEIL === */

.section.programmes {
  padding: 60px 0;
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f4f8 100%);
  margin: 40px 0;
  border-radius: 0; /* Pour s'étendre sur toute la largeur */
}

.programmes-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* === CARTES PROGRAMMES VERSION APERÇU === */
.programme-card-preview {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  height: 380px; /* Hauteur fixe pour l'uniformité */
}

.programme-card-preview:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.programme-card-preview .card-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.7)
  );
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

/* === MEDIA DES CARTES === */
.programme-card-preview .card-media {
  height: 180px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.programme-card-preview .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.programme-card-preview:hover .card-media img {
  transform: scale(1.05);
}

/* Image de substitution avec icône */
.programme-card-preview .placeholder-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  color: white;
  font-size: 3rem;
}

.programme-card-preview .placeholder-image i {
  opacity: 0.8;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* === CONTENU DES CARTES === */
.programme-card-preview .card-content {
  padding: 24px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.programme-card-preview .card-content h2 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: #2c3e50;
  line-height: 1.3;
  min-height: 50px; /* Hauteur minimale pour l'alignement */
  display: flex;
  align-items: center;
}

.programme-card-preview .card-content .description {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0 0 20px 0;
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* === LIENS DES CARTES === */
.programme-card-preview .card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #667eea;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9rem;
  padding: 10px 16px;
  border-radius: 8px;
  background: rgba(102, 126, 234, 0.1);
  transition: all 0.3s ease;
  align-self: flex-start;
}

.programme-card-preview .card-link:hover {
  background: rgba(102, 126, 234, 0.2);
  color: #5a67d8;
  transform: translateX(2px);
}

.programme-card-preview .card-link i {
  transition: transform 0.3s ease;
  font-size: 0.8rem;
}

.programme-card-preview .card-link:hover i {
  transform: translateX(3px);
}

/* === EFFET DE COULEUR PERSONNALISÉE === */
.programme-card-preview .card-inner[style*="background-color"] {
  background: linear-gradient(
    145deg,
    var(--couleur-carte, #667eea),
    rgba(255, 255, 255, 0.1)
  ) !important;
}

.programme-card-preview .card-inner[style*="background-color"] .card-media {
  background: inherit;
  opacity: 0.9;
}

/* === ADAPTATION RESPONSIVE POUR PREVIEW === */
@media (max-width: 768px) {
  .section.programmes {
    padding: 40px 0;
    margin: 20px 0;
  }

  .programmes-preview {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 15px;
  }

  .programme-card-preview {
    height: auto;
    min-height: 350px;
  }

  .programme-card-preview .card-media {
    height: 160px;
  }

  .programme-card-preview .card-content {
    padding: 20px 16px;
  }

  .programme-card-preview .card-content h2 {
    font-size: 1.2rem;
    min-height: auto;
  }
}

@media (max-width: 480px) {
  .programme-card-preview .card-content h2 {
    font-size: 1.1rem;
  }

  .programme-card-preview .card-content .description {
    font-size: 0.9rem;
  }

  .programme-card-preview .card-link {
    font-size: 0.85rem;
    padding: 8px 12px;
  }
}

/* === TITRE DE SECTION === */
.section.programmes .section-title {
  text-align: center;
  margin-bottom: 50px;
  color: #2c3e50;
  position: relative;
}

.section.programmes .section-title:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

/* === CONTENEUR BOUTON === */
.section.programmes .btn-container {
  text-align: center;
  margin-top: 40px;
}

.section.programmes .btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.section.programmes .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.section.programmes .btn-primary:before {
  content: "👩‍⚕️";
  margin-right: 5px;
}

/* === SECTION PROGRAMMES COMPLÈTE === */

.programmes-section {
  padding: 4rem 2rem;
  background-color: rgb(243, 252, 243);
}

/* === GRILLE PROGRAMMES RESPONSIVE === */
.programmes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1400px;
  margin: 2rem auto;
}

/* === CARTES PROGRAMMES === */
.programme-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
  background: white;
  height: 380px;
}

.programme-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.card-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-media {
  height: 65%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
}

.programme-card:hover .card-media img {
  transform: scale(1.05);
}

.card-content {
  padding: 1.5rem;
  background: white;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-content h2 {
  font-size: 1.25rem;
  color: #1070a4;
  margin-bottom: 0.5rem;
}

.description {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 1rem;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #3aaa35 !important;
  font-weight: 500;
  transition: gap 0.3s ease;
}

.card-link:hover {
  gap: 1rem;
}

/* === RESPONSIVE DESIGN PROGRAMMES (comme les cartes d'équipes) === */

/* Tablettes (max-width: 1024px) - 3 cartes par ligne */
@media screen and (max-width: 1024px) {
  .programmes-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 900px;
    padding: 0 1rem;
  }

  .programme-card {
    height: 360px;
  }
}

/* Tablettes moyennes (max-width: 768px) - 2 cartes par ligne */
@media screen and (max-width: 768px) {
  .programmes-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
    max-width: 600px;
  }

  .programme-card {
    height: 340px;
  }

  .card-content h2 {
    font-size: 1.1rem;
  }

  .card-content {
    padding: 1.2rem;
  }
}

/* Mobiles (max-width: 480px) - 1 carte par ligne */
@media screen and (max-width: 480px) {
  .programmes-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 350px;
    padding: 0 0.5rem;
  }

  .programme-card {
    height: 320px;
  }

  .card-content h2 {
    font-size: 1rem;
  }

  .card-content {
    padding: 1rem;
  }

  .description {
    font-size: 0.85rem;
  }
}

/* === STYLES SPÉCIFIQUES POUR CHAQUE PROGRAMME === */
#sante-femme .card-content {
  background: linear-gradient(35deg, #fff, #f8bbd0);
  border-bottom: 3px solid #e91e63;
}

#capital-sante .card-content {
  background: linear-gradient(35deg, #fff, #81d4fa);
  border-bottom: 3px solid #03a9f4;
}

#aidants .card-content {
  background: linear-gradient(35deg, #fff, #9fa8da);
  border-bottom: 3px solid #03a9f4;
}

#moustigre .card-content {
  background: linear-gradient(35deg, #fff, #bdbdbd);
  border-bottom: 3px solid #757575;
}

#diabete .card-content {
  background: linear-gradient(35deg, #fff, #fff176);
  border-bottom: 3px solid #fbc02d;
}

#sante-mental .card-content {
  background: linear-gradient(35deg, #fff, #5868be);
  border-bottom: 3px solid #43519e;
}

#tkt .card-content {
  background: linear-gradient(35deg, #fff, #fff176);
  border-bottom: 3px solid #fbc02d;
}

#soins-palliatifs .card-content {
  background: linear-gradient(35deg, #fff, #aed581);
  border-bottom: 3px solid #689f38;
}

#lut-cancer .card-content {
  background: linear-gradient(35deg, #fff, #af7ac5);
  border-bottom: 3px solid #9b59b6 ;
}

/* === BOUTONS PDF === */
.button-pdf {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.button-pdf a {
  margin: 15px;
  border-radius: 25px;
  border: 1px solid #439fd2;
  padding: 5px;
  color: #000;
  text-decoration: none;
  background-color: #439fd2;
  transition: all 0.7s ease;
}

.button-pdf a:hover {
  border: 1px solid #00569b;
  background-color: #00569b;
  padding: 10px;
  color: #fff !important;
  text-decoration: underline;
}

/* === IMAGES PROGRAMMES === */
.img-prog h3 {
  margin: 20px 0px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.img-prog h3 a {
  border: 1px solid #439fd2;
  background-color: #439fd2;
  border-radius: 30px;
  padding: 5px;
  width: 370px;
  text-align: center;
}

.img-prog .place-img {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  margin-left: 50px;
  margin-right: 50px;
}

.img-prog .place-img img {
  width: 200px;
  margin-bottom: 10px;
}

/* === STYLES SPÉCIFIQUES PROGRAMMES (BORDURES) === */
#sante-femme {
  border: 2px solid #e91e63;
  background-image: linear-gradient(35deg, #fff, #f8bbd0);
}

#capital-sante {
  border: 2px solid #03a9f4;
  background-image: linear-gradient(35deg, #fff, #81d4fa);
}

#aidants {
  border: 2px solid #03a9f4;
  background-image: linear-gradient(35deg, #fff, #9fa8da);
}

#moustigre {
  border: 2px solid #757575;
  background-image: linear-gradient(35deg, #fff, #bdbdbd);
}

#diabete {
  border: 2px solid #fbc02d;
  background-image: linear-gradient(35deg, #fff, #fff176);
}

#sante-mental {
  border: 2px solid #11369b;
  background-image: linear-gradient(35deg, #fff, #061257);
}

#sante-mental-i {
  height: 220px;
  width: auto;
  transition: all 0.5s ease;
}

#sante-mental-i:hover {
  height: 235px;
  width: auto;
}

#tkt {
  border: 2px solid #fbc02d;
  background-image: linear-gradient(35deg, #fff, #fff176);
}

#lut-cancer {
  border: 2px solid #7d3c98;
  background-image: linear-gradient(35deg, #fff, #af7ac5);
}

#soins-palliatifs {
  border: 2px solid #689f38;
  background-image: linear-gradient(35deg, #fff, #aed581);
}
/**********************/
/* ID des sections */
#accueil {
  color: #1070a4 !important;
}

#actualites {
  color: #1070a4 !important;
}

#apropos {
  color: #1070a4 !important;
}

#equipes {
  color: #1070a4 !important;
}

#programmes {
  color: #1070a4 !important;
}

#liens {
  color: #1070a4 !important;
}

/*******************************************************************************
* FLIP CARDS
* Styles pour les cartes avec effet de retournement
* Source : flip-card.css
*******************************************************************************/

.pro-cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
}

/* Styles pour les flip cards des professionnels */
.pro-flip-card {
  margin: 0 auto;
  width: 240px;
  height: 320px;
  perspective: 1000px;
  text-align: center;
}

.pro-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.pro-flip-card:hover .pro-card-inner {
  transform: rotateY(180deg);
}

.pro-card-front,
.pro-card-back {
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.pro-card-front {
  background-image: url("images/front.jpg");
  background-size: cover;
  background-position: center center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}

.pro-card-front:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(0deg, black, #439fd2);
  opacity: 0.8;
}

.pro-card-front .pro-card-content {
  z-index: 1;
  color: white;
}

.pro-card-front .pro-card-content h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.pro-card-front .pro-card-content p {
  color: #ececec;
  margin: 0.25rem 0;
}

.pro-card-back {
  transform: rotateY(180deg);
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pro-card-back .pro-card-image {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  border: solid 1px #cecece;
  border-radius: 100%;
  background-size: cover;
  background-position: center center;
}

.pro-card-back p {
  margin-top: 12px;
}

.pro-card-back .pro-card-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}

.pro-card-back .pro-card-icons a {
  font-size: 18px;
  color: white;
  background: black;
  width: 42px;
  height: 42px;
  border-radius: 100%;
  margin: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity 0.2s;
}

.pro-card-back .pro-card-icons a:hover {
  cursor: pointer;
  opacity: 0.7;
}

/* Responsive design */
@media screen and (max-width: 768px) {
  .pro-flip-card {
    width: 220px;
    height: 300px;
  }

  .pro-card-front .pro-card-content h2 {
    font-size: 1.3rem;
  }
}

/*******************************************************************************
* CARTES POUR LES CABINETS
* Styles pour les cartes qui représente et donne des informations sur les 
* cabinets
* Source : equipes.css
*******************************************************************************/

/* Section des cabinets avec effets de survol améliorés */
.cabinet-section {
  padding: 30px;
  color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cabinet-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 30px;
}

.cabinet-card {
  /* Structure de base */
  width: 300px;
  padding: 25px;
  border-radius: 25px;
  position: relative;
  overflow: hidden;

  /* Style visuel initial */
  background: linear-gradient(145deg, #87ceeb, #3498db);
  color: black;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

  /* Organisation du contenu */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;

  /* Animation de base */
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Effet de brillance au survol */
.cabinet-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: 0.6s;
}

.cabinet-card:hover::before {
  left: 100%;
}

/* Effet de transformation au survol */
.cabinet-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 15px 30px rgba(52, 152, 219, 0.3);
  background: linear-gradient(145deg, #3498db, #2980b9);
}

.cabinet-card h1 {
  font-size: 24px;
  color: #000;
  margin-bottom: 1rem;
  font-weight: 600;
  transition: transform 0.3s ease;
}

.cabinet-card:hover h1 {
  transform: scale(1.05);
}

.cabinet-card p {
  font-size: 16px;
  margin: 0.25rem 0;
  color: #000;
  transition: all 0.3s ease;
}

.cabinet-card:hover p {
  color: #fff;
}

.cabinet-card a {
  color: #000 !important;
  text-decoration: none;
  font-weight: 500;
  margin-top: 0.5rem;
  padding: 5px 10px;
  border-radius: 15px;
  transition: all 0.3s ease;
  position: relative;
}

.cabinet-card:hover a {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1);
}

/* Effet de pulsation sur le lien au survol */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.cabinet-card:hover a:hover {
  background: rgba(255, 255, 255, 0.2);
  animation: pulse 1.5s infinite;
}

/* Responsive design */
@media screen and (max-width: 768px) {
  .cabinet-card {
    width: 280px;
    padding: 20px;
  }

  .cabinet-card h1 {
    font-size: 20px;
  }

  .cabinet-card p {
    font-size: 14px;
  }
}

/*******************************************************************************
* MEDIA QUERIES
* Adaptations responsives pour différentes tailles d'écran
* Regroupement de toutes les media queries
*******************************************************************************/
@media screen and (max-width: 810px) {
  .premieres-presentations .gauche {
    width: 100%;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .premieres-presentations .droite {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  .mobile-menu {
    display: flex;
  }

  .menu {
    display: none;
  }

  .menu-container {
    width: 100%;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
  }

  .menu-listing {
    flex-direction: column;
  }

  .menu-listing a {
    box-sizing: border-box;
    display: block;
    font-size: 1.5rem;
  }

  .logo {
    width: 250px;
    margin-bottom: 20px;
  }

  footer .footer-details .footer-inner {
    height: 500px;
  }

  footer .footer-details .footer-inner .equipes-foot {
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
  }

  footer .footer-details .info-MSP .adresse {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: justify;
    border: 3px solid #399d3f;
    border-bottom: 0;
    background-color: #ffffff;
    width: 80%;
    height: 180px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 0;
  }

  footer .footer-details .info-MSP .num-msp {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: justify;
    border: 3px solid #399d3f;
    border-top: 0;
    background-color: #ffffff;
    width: 80%;
    height: 180px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 0;
  }

  footer .info-footer {
    margin: 20px;
    align-items: center;
    justify-content: center;
  }

  footer .info-footer nav {
    margin-bottom: 15px;
  }

  footer .info-footer img {
    margin-bottom: 15px;
  }
}

/*******************************************************************************
* GALERIE D'IMAGES POUR SOUS-PAGES PROGRAMMES
* Styles pour le système de prévisualisation d'images moderne
* Remplace le système javascript:display_photo()
*******************************************************************************/

/* Modale principale de la galerie */
.gallery-modal {
  display: none; /* Masqué par défaut */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000; /* Au-dessus de tous les autres éléments */
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

/* Animation d'apparition de la modale */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Conteneur principal de la galerie */
.gallery-content {
  position: relative;
  max-width: 50vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: scaleIn 0.3s ease;
}

/* Animation d'apparition du contenu */
@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Bouton de fermeture */
.gallery-close {
  position: absolute;
  top: -50px;
  right: 0;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: white;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  z-index: 10001;
}

.gallery-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

/* Boutons de navigation */
.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: white;
  font-size: 28px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  z-index: 10001;
}

.gallery-nav:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.1);
}

/* Bouton précédent */
.gallery-prev {
  left: -70px;
}

/* Bouton suivant */
.gallery-next {
  right: -70px;
}

/* Conteneur de l'image principale */
.gallery-image-container {
  position: relative;
  max-width: 95vw; /* Laisse un peu de marge sur les côtés */
  max-height: 95vh; /* Laisse de la place pour les informations en bas */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  overflow: visible; /* Permet à l'image de dépasser si nécessaire */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Image principale - Taille naturelle JAMAIS agrandie */
#gallery-main-image {
  /* L'image ne peut JAMAIS être plus grande que sa taille naturelle */
  max-width: min(
    100%,
    95vw
  ); /* Limite à la taille d'écran OU à la taille naturelle */
  max-height: min(
    100%,
    90vh
  ); /* Limite à la hauteur d'écran OU à la taille naturelle */
  width: auto; /* Préserve les proportions */
  height: auto; /* Préserve les proportions */
  object-fit: scale-down; /* Réduit si nécessaire, mais n'agrandit JAMAIS */
  transition: opacity 0.3s ease;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

  /* Forcer la taille naturelle - pas d'agrandissement */
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}

/* Indicateur de chargement */
.gallery-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 18px;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.7);
  padding: 15px 25px;
  border-radius: 25px;
  backdrop-filter: blur(10px);
}

/* Section d'informations */
.gallery-info {
  margin-top: 20px;
  text-align: center;
  color: white;
}

.gallery-info h3 {
  margin: 0 0 10px 0;
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.gallery-info p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.1);
  padding: 8px 15px;
  border-radius: 15px;
  backdrop-filter: blur(10px);
  display: inline-block;
}

/* Améliorations pour les images miniatures dans la galerie */
.place-img a {
  display: block;
  transition: all 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.place-img a::before {
  content: "🔍";
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(16, 112, 164, 0.9);
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s ease;
  z-index: 2;
}

.place-img a:hover::before {
  opacity: 1;
  transform: scale(1);
}

.place-img a:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.place-img a:hover img {
  transform: scale(1.05);
}

/* Responsive design pour mobile */
@media screen and (max-width: 768px) {
  .gallery-content {
    max-width: 98vw;
    max-height: 98vh;
  }

  .gallery-close {
    top: -40px;
    right: 0;
    width: 35px;
    height: 35px;
    font-size: 20px;
  }

  .gallery-nav {
    width: 45px;
    height: 45px;
    font-size: 24px;
  }

  .gallery-prev {
    left: -60px;
  }

  .gallery-next {
    right: -60px;
  }

  .gallery-image-container {
    max-width: 98vw; /* Plus d'espace horizontal sur mobile */
    max-height: 85vh; /* Plus d'espace vertical aussi */
  }

  /* Image mobile - JAMAIS d'agrandissement */
  #gallery-main-image {
    /* Sur mobile, encore plus strict sur la taille naturelle */
    max-width: min(
      100%,
      96vw
    ); /* Ne dépasse jamais la largeur d'écran OU la taille naturelle */
    max-height: min(
      100%,
      80vh
    ); /* Ne dépasse jamais la hauteur d'écran OU la taille naturelle */
    width: auto;
    height: auto;
    object-fit: scale-down; /* Réduit seulement si l'image est trop grande */

    /* Optimisation de l'affichage sur petit écran */
    image-rendering: auto;
    image-rendering: crisp-edges;
  }

  .gallery-info h3 {
    font-size: 18px;
  }

  .gallery-info p {
    font-size: 12px;
  }
}

/* Pour les très petits écrans */
@media screen and (max-width: 480px) {
  .gallery-nav {
    position: fixed;
    top: auto;
    bottom: 20px;
    transform: none;
  }

  .gallery-prev {
    left: 20px;
    bottom: 80px;
  }

  .gallery-next {
    right: 20px;
    bottom: 80px;
  }

  .gallery-close {
    top: 20px;
    right: 20px;
  }
}

/**********************************************************************************\
|* EVENEMENTS & PHRASE MISE EN AVANT
|* Elle permettent de mettre la photo de profil de chaque professionnel sur le site.
|* Source : index.css
\**********************************************************************************/

/* Section événements */
#events {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  font-size: 0.9rem;
  background: linear-gradient(135deg, #3892e8 0%, #1070a4 100%);
  color: white;
  font-size: 1.3rem;
  font-weight: 600;
  width: 100%;
}

#events a {
  color: white !important;
  text-decoration: underline;
  font-weight: 900;
  margin-left: 10px;
}

/* === BARRE D'ANNONCES MODERNE ET ESTHÉTIQUE === */

/* 
 * PRINCIPE DE DESIGN : Cette approche privilégie l'élégance sobre et la sophistication
 * plutôt que les effets tape-à-l'œil. Chaque propriété CSS a été choisie pour contribuer
 * à une expérience visuelle harmonieuse et professionnelle.
 */

#events-container {
  /* 
   * FOND PRINCIPAL : Dégradé subtil qui évoque la modernité sans être agressif
   * Les couleurs sont suffisamment contrastées pour être lisibles tout en restant douces
   */
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.95) 0%,
    /* Bleu principal avec transparence légère */ rgba(29, 98, 33, 0.95) 100%
      /* Violet sophistiqué pour la profondeur */
  );

  /* 
   * GLASSMORPHISM : Effet de verre moderne qui ajoute de la sophistication
   * Le backdrop-filter crée un flou élégant derrière le conteneur
   */
  backdrop-filter: blur(20px) saturate(180%);

  /* 
   * BORDURES MODERNES : Utilisation de la transparence pour créer des contours subtils
   * Ces bordures s'intègrent naturellement dans le design global
   */
  border: 1px solid rgba(255, 255, 255, 0.25);

  /* 
   * OMBRAGE SOPHISTIQUÉ : Plusieurs couches d'ombres pour créer de la profondeur
   * La première ombre est douce et étendue, la seconde est plus précise
   */
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3),
    /* Ombre principale colorée */ 0 2px 16px rgba(0, 0, 0, 0.1),
    /* Ombre de définition */ inset 0 1px 0 rgba(255, 255, 255, 0.4); /* Lumière interne pour l'effet 3D */

  /* 
   * ESPACEMENTS GÉNÉREUX : Le design moderne privilégie l'espace pour la respirabilité
   * Ces valeurs créent un équilibre visuel agréable
   */
  padding: 24px 32px;

  /* 
   * TYPOGRAPHIE : Couleur et alignement optimisés pour la lisibilité
   */
  color: white;
  text-align: center;

  /* 
   * POSITIONNEMENT : Assure que le conteneur reste au-dessus des autres éléments
   */
  position: relative;
  z-index: 100;
  overflow: hidden; /* Contient les éléments décoratifs */

  /* 
   * TRANSITION DOUCE : Permet des changements d'état fluides lors des interactions
   */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 
 * EFFET DE SURVOL CONTENEUR : Interaction subtile qui enrichit l'expérience utilisateur
 * Le changement est perceptible sans être distrayant
 */
#events-container:hover {
  transform: translateY(-2px); /* Légère élévation pour l'interactivité */
  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.4),
    0 4px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* 
 * ÉLÉMENT DÉCORATIF SUBTIL : Ajoute de la richesse visuelle sans distraction
 * Cet pseudo-élément crée une texture lumineuse discrète
 */
#events-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;

  /* 
   * LIGNE LUMINEUSE : Simule un reflet de lumière en haut du conteneur
   * Cette technique ajoute de la dimension sans complexité
   */
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.8) 50%,
    transparent 100%
  );
}

/* === STYLES DES ANNONCES INDIVIDUELLES === */

/* 
 * CONCEPTION MODULAIRE : Chaque annonce est un module indépendant mais harmonieux
 * Cette approche facilite la maintenance et assure la cohérence visuelle
 */
.events-item {
  /* 
   * FOND INTELLIGENT : Transparence calibrée pour la lisibilité sur le dégradé parent
   * Cette technique crée de la hiérarchie visuelle sans conflits de couleurs
   */
  background: rgba(255, 255, 255, 0.15);

  /* 
   * EFFETS DE PROFONDEUR : Combinaison de flou et de transparence pour la modernité
   */
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;

  /* 
   * ESPACEMENTS ÉQUILIBRÉS : Proportions calculées pour la lisibilité optimale
   * Ces valeurs respectent les principes de proximité en design
   */
  padding: 18px 24px;
  margin: 12px 0;

  /* 
   * POSITIONNEMENT : Assure que le contenu reste accessible et bien structuré
   */
  position: relative;
  z-index: 10;

  /* 
   * TRANSITIONS HARMONIEUSES : Toutes les interactions suivent la même courbe temporelle
   * Cette cohérence renforce l'impression de qualité et de professionnalisme
   */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 
 * INTERACTION SOPHISTIQUÉE : Le survol enrichit l'expérience sans être intrusif
 * Ces effets renforcent l'interactivité tout en maintenant l'élégance
 */
.events-item:hover {
  background: rgba(255, 255, 255, 0.25); /* Éclaircissement subtil */
  transform: translateY(-1px); /* Micro-élévation pour le feedback visuel */

  /* 
   * OMBRAGE RENFORCÉ : Le survol intensifie la sensation de profondeur
   */
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.2), 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* === TYPOLOGIE D'ANNONCES AVEC IDENTITÉ VISUELLE === */

/* 
 * SYSTÈME CHROMATIQUE : Chaque type d'annonce a sa propre identité visuelle
 * mais reste cohérent avec le design global
 */

/* ANNONCES INFORMATIVES : Ton vert apaisant pour l'information standard */
.events-info {
  border-left: 4px solid #4caf50; /* Accent coloré pour la catégorisation */

  /* 
   * OMBRAGE THÉMATIQUE : La couleur de l'ombre correspond au type d'annonce
   * Cette technique renforce subtilement la catégorisation visuelle
   */
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.2);
}

/* ANNONCES D'URGENCE : Rouge énergique mais contrôlé pour l'attention immédiate */
.events-urgence {
  border-left: 4px solid #ff5252;
  box-shadow: 0 4px 15px rgba(255, 82, 82, 0.3);

  /* 
   * INDICATION VISUELLE RENFORCÉE : Fond légèrement différent pour l'urgence
   * Cette variation subtile attire l'attention sans être agressive
   */
  background: rgba(255, 255, 255, 0.2);
}

/* ANNONCES PROMOTIONNELLES : Orange chaleureux pour l'engagement positif */
.events-promotion {
  border-left: 4px solid #ff9800;
  box-shadow: 0 4px 15px rgba(255, 152, 0, 0.25);
}

/* ANNONCES D'ÉVÉNEMENTS : Bleu cohérent avec le thème général */
.events-evenement {
  border-left: 4px solid #2196f3;
  box-shadow: 0 4px 15px rgba(33, 150, 243, 0.25);
}

/* === TYPOGRAPHIE MODERNE ET LISIBLE === */

/* 
 * HIÉRARCHIE TEXTUELLE : La typographie guide naturellement la lecture
 * Chaque paramètre contribue à une expérience de lecture optimale
 */
.events-item p {
  margin: 0; /* Suppression des marges par défaut pour un contrôle précis */

  /* 
   * LISIBILITÉ OPTIMISÉE : Ces valeurs sont calibrées pour la lecture sur écran
   * La hauteur de ligne et l'espacement créent une respiration textuelle agréable
   */
  line-height: 1.6; /* Espacement vertical généreux pour la lisibilité */
  font-weight: 500; /* Poids de police équilibré : ni trop fin ni trop épais */
  letter-spacing: 0.3px; /* Espacement des caractères pour la clarté */

  /* 
   * CONTRASTE TEXTUEL : L'ombre de texte améliore la lisibilité sur fond coloré
   * Cette technique assure une lecture confortable dans tous les contextes
   */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

  /* 
   * TAILLE ADAPTATIVE : La police s'ajuste automatiquement selon l'écran
   * Cette approche moderne assure une lisibilité constante
   */
  font-size: clamp(14px, 2vw, 16px);
}

/* === ADAPTATION RESPONSIVE INTELLIGENTE === */

/* 
 * APPROCHE MOBILE-FIRST : Les ajustements préservent l'esthétique sur tous les écrans
 * Cette stratégie assure une expérience cohérente indépendamment du dispositif
 */
@media (max-width: 768px) {
  #events-container {
    /* 
     * ESPACEMENTS ADAPTÉS : Réduction proportionnelle pour les petits écrans
     * Ces ajustements maintiennent l'équilibre visuel sur mobile
     */
    padding: 20px 24px;
    margin: 12px 8px;
    border-radius: 12px; /* Légère réduction pour l'harmonie mobile */
  }

  .events-item {
    padding: 16px 20px;
    margin: 10px 0;
    border-radius: 10px;
  }

  /* 
   * OPTIMISATION TACTILE : Ajustements pour l'interaction mobile
   * Ces changements améliorent l'expérience sur écran tactile
   */
  .events-item:hover {
    transform: none; /* Suppression du survol sur mobile pour éviter les problèmes tactiles */
  }
}

/* === ACCESSIBILITÉ ET PRÉFÉRENCES UTILISATEUR === */

/* 
 * RESPECT DES PRÉFÉRENCES : Adaptation automatique aux besoins d'accessibilité
 * Cette considération démontre un design inclusif et professionnel
 */
@media (prefers-reduced-motion: reduce) {
  /* 
   * STABILITÉ VISUELLE : Suppression des transitions pour les utilisateurs sensibles
   * Cette adaptation respecte les besoins de santé et de confort visuel
   */
  #events-container,
  .events-item {
    transition: none;
  }

  #events-container:hover,
  .events-item:hover {
    transform: none; /* Maintien de la position pour éviter les distractions */
  }
}

/* 
 * CONTRASTE ÉLEVÉ : Adaptation pour les besoins de visibilité renforcée
 * Cette règle améliore automatiquement la lisibilité quand nécessaire
 */
@media (prefers-contrast: high) {
  #events-container {
    background: linear-gradient(135deg, #4a5fc7 0%, #6b4c93 100%);
    border: 2px solid white;
  }

  .events-item {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.5);
  }
}

/**********************************************************************************\
|* PHOTO DE PROFIL DES PROFESSIONNELS
|* Elle permettent de mettre la photo de profil de chaque professionnel sur le site.
|* Source : index.css
\**********************************************************************************/

#trezieres-christiane-i {
  background-image: url(../img/pros/pic/Christiane_PIC_coo.jpg);
}

#ollivier-gouagna-gaelle-i {
  background-image: url(../img/pros/pic/Gaelle_PIC_coo.jpg);
}

#jutso-veque-karine-i {
  background-image: url(../img/pros/pic/Karine_PIC_die.jpeg);
}

#filhol-fleurial-catherine-i {
  background-image: url(../img/pros/pic/);
}

#rouzies-cecile-i {
  background-image: url(../img/pros/pic/Cecile_PIC_inf.jpg);
  background-position: 50% 40%;
  background-size: 200%;
}

#mader-pernou-christelle-i {
  background-image: url(../img/pros/pic/Christelle_PIC_inf.jpg);
  background-position: center;
  background-size: 160%;
}

#michel-nathalie-i {
  background-image: url(../img/pros/pic/Nathalie_PIC_inf.jpg);
  background-position: 50% 10%;
  background-size: 140%;
}

#dalet-beatrice-i {
  background-image: url(../img/pros/pic/Betty_PIC_inf.jpg);
}

#verdier-cindy-i {
  background-image: url(../img/pros/pros/);
}

#foucras-jean-philippe-i {
  background-image: url(../img/pros/pic/Jean-philippe_PIC_inf.jpg);
  background-position: 45% 30%;
  background-size: 130%;
}

#bonneaud-manuela-i {
  background-image: url(../img/pros/pic/Manuela_PIC_inf.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
}

#hamiti-nais-i {
  background-image: url(../img/pros/pic/Nais_PIC_inf.jpg);
  background-position: 40% 50%;
  background-size: 100%;
}

#therondel-valerie-i {
  background-image: url(../img/pros/pic/Valerie_PIC_inf.jpg);
  background-position: 50% 40%;
  background-size: 170%;
}

#aubert-isabelle-i {
  background-image: url(../img/pros/pic/Isabelle_PIC_inf.jpg);
}

#gayral-sandrine-i {
  background-image: url(../img/pros/pic/Sandrine_PIC_inf.jpg);
  background-position: 50% 70%;
  background-size: 100%;
}

#ramos-alcazar-miguel-i {
  background-image: url(../img/pros/pic/Miguel_PIC_kin.jpg);
}

#zlotowska-katarzyna-i {
  background-image: url(../img/pros/pic/Katrzyna_PIC_kin.jpg);
  background-position: 50% 10%;
  background-size: 90%;
}

#kim-escudero-marta-i {
  background-image: url(../img/pros/pic/Marta_PIC_kin.jpg);
}

#llin-violeta-i {
  background-image: url(../img/pros/pic/Violeta_PIC_kin.jpg);
  background-position: 50% 40%;
  background-size: 130%;
}

#sanchez-andréa-i {
  background-image: url(../img/pros/pic/Andréa_PIC_kin.jpg);
}

#rives-michel-i {
  background-image: url(../img/pros/pic/Michel_PIC_med.jpg);
  background-position: 0% 50%;
  background-size: 110%;
}

#venu-didier-i {
  background-image: url(../img/pros/pic/Didier_PIC_mec.jpg);
  background-position: 30% 37%;
  background-size: 230%;
}

#tranier-sonia-i {
  background-image: url(../img/pros/pic/Sonia_PIC_opt.jpg);
}

#charignon-dumas-julie-i {
  background-image: url(../img/pros/pic/Julie_PIC_pha.jpg);
  background-position: 90% 40%;
  background-size: 170%;
}

#maurel-aurelie-i {
  background-image: url(../img/pros/pic/Aurelie_PIC_pha.jpg);
}

#durand-melusine-i {
  background-image: url(../img/pros/pic/Melusine_PIC_pha.jpg);
}

#gilbert-olivier-i {
  background-image: url(../img/pros/pic/Oliver_PIC_pod.jpg);
  background-size: 110%;
}

#ossorio-pablo-i {
  background-image: url(../img/pros/pic/Pablo_PIC_psy.jpg);
  background-position: 70% 50%;
  background-size: 120%;
}

#saur-claire-i {
  background-image: url(../img/pros/pic/Claire_PIC_sag.jpg);
  background-position: 60% 40%;
  background-size: 350%;
}

#puech-bastien-i {
  background-image: url(../img/pros/pic/Bastien_PIC_aud.jpg);
  background-position: 0% 50%;
}

#coudel-violaine-i {
  background-image: url(../img/pros/pic/Violaine_PIC_inf.jpg);
}

#gay-anais-i {
  background-image: url(../img/pros/pic/Anais_PIC_die.jpg);
  background-position: 50% 10%;
  background-size: 120%;
}

#basalmo-nathalie-i{
  background-image: url(../img/pros/pic/Nathalie_PIC_psy.jpg);
  background-position: 23% 90%;
  background-size: 120%;
}

#delpuech-severine-i {
  background-image: url(../img/pros/pic/Severine_PIC_psy.jpg);
    background-position:50% 10%;
  background-size: 85.9%;
}