/* --- RESPONSIVE DESIGN --- 
@media (max-width: 900px) {
 
}

@media (max-width: 500px) {
 .bloc_serieux{
margin-top : 60px;

 }
}*/









/* Style général */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
}




      .container {
            max-width: 900px;
            margin: auto;
            padding: 20px;
 background: linear-gradient(to bottom, #fcdcad, #ffffff);
    color: #333;
              border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            text-align : center;
  
        }
             
 .container_origine {
             max-width: 900px;
            margin: auto;
            padding: 20px;
            background: transparent;
              border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;

        }

          .container2 {
            max-width: 900px;
            margin: auto;
            background: transparent;
            border-radius: 10px;
        }


        .site-header2 {
    width: calc(100% /*+ 40px*/); /* 40px = 20px à gauche + 20px à droite */
  /*  margin-left: -20px;*/
  /*  margin-right: -20px;*/
  background-image: url('img/imagehaut2.png');
  background-size: cover;
  background-position: center;
  padding: 135px 0; /* Pas de padding sur les côtés pour utiliser toute la largeur */


}

/* Titre principal */
h1 {
    text-align: center;
    color: #ffcb4f;
    font-size: 2.5em;
    margin-bottom: 20px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}




/*********************************************************************************************************************************************************
***********************************************************************************************************************************************************
***************************************************************GRAND TITRE*******************************************************************************
***********************************************************************************************************************************************************
*************************************************************************************************************************************************************/
.titre_gros_img {
    display: flex; /* ✅ Utilisation de flexbox */
    align-items: center; /* ✅ Centre verticalement l'image et le texte */
    justify-content: center; /* ✅ Centre horizontalement dans le conteneur */
    gap: 15px; /* ✅ Espacement entre l'image et le texte */
    margin-bottom : 10px;
}
    .titre_gros_img img {
   height : auto ;
   width : 100% ;
   max-width : 350px;
    margin-top : 200px;

  }

.titre_gros_img2 {
    display: flex; /* ✅ Utilisation de flexbox */
    align-items: center; /* ✅ Centre verticalement l'image et le texte */
    justify-content: center; /* ✅ Centre horizontalement dans le conteneur */
    gap: 15px; /* ✅ Espacement entre l'image et le texte */
    margin-bottom : 40px;
     margin-top : 200px;
}

  .titre_gros_img2 img {
   height : auto ;
   width : 100% ;
   max-width : 600px;
  }

  .titre_gros_img3 {
    display: flex; /* ✅ Utilisation de flexbox */
    align-items: center; /* ✅ Centre verticalement l'image et le texte */
    justify-content: center; /* ✅ Centre horizontalement dans le conteneur */
    gap: 15px; /* ✅ Espacement entre l'image et le texte */
    margin-bottom : 40px;
}

  .titre_gros_img3 img {
   height : auto ;
   width : 100% ;
   max-width : 300px;
  }

  .titre_gros_img4 {
    display: flex; /* ✅ Utilisation de flexbox */
    align-items: center; /* ✅ Centre verticalement l'image et le texte */
    justify-content: center; /* ✅ Centre horizontalement dans le conteneur */
    gap: 15px; /* ✅ Espacement entre l'image et le texte */
    margin-bottom : 40px;
     margin-top : 200px;
}

  .titre_gros_img4 img {
   height : auto ;
   width : 100% ;
   max-width : 260px;
  }

.titre_gros_img5 {
    display: flex; /* ✅ Utilisation de flexbox */
    align-items: center; /* ✅ Centre verticalement l'image et le texte */
    justify-content: center; /* ✅ Centre horizontalement dans le conteneur */
    gap: 15px; /* ✅ Espacement entre l'image et le texte */
    margin-bottom : 40px;
    margin-top : 200px;
}

  .titre_gros_img5 img {
   height : auto ;
   width : 100% ;
   max-width : 400px;
  }

  .titre_gros_img6 {
    display: flex; /* ✅ Utilisation de flexbox */
    align-items: center; /* ✅ Centre verticalement l'image et le texte */
    justify-content: center; /* ✅ Centre horizontalement dans le conteneur */
    gap: 15px; /* ✅ Espacement entre l'image et le texte */
    margin-bottom : 40px;
}

  .titre_gros_img6 img {
   height : auto ;
   width : 100% ;
   max-width : 400px;
    margin-top : 200px;
  }


/*.img_logo {
    width: 50px;  
    height: auto; 
}*/

.titre_gros_img h1 {
    margin: 0; /* ✅ Supprime les marges pour un bon alignement */
    font-size: 2em; /* ✅ Ajuste la taille du texte */
       color: var(--primary-color);
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}   


/* --- RESPONSIVE DESIGN --- */
@media (max-width: 900px) {
    .titre_gros_img img {

   max-width : 400px;
  }
      .titre_gros_img2 img {

   max-width : 500px;
  }
        .titre_gros_img3 img {

   max-width : 300px;
  }
          .titre_gros_img3 img {

   max-width : 260px;
  }
            .titre_gros_img3 img {

   max-width : 400px;
  }

}

@media (max-width: 440px) {


    .titre_gros_img img {

   max-width : 250px;
  }
      .titre_gros_img2 img {

   max-width : 400px;
  }
        .titre_gros_img3 img {

   max-width : 200px;
  }
          .titre_gros_img4 img {

   max-width : 180px;
  }
            .titre_gros_img5 img {

   max-width : 260px;
  }
              .titre_gros_img6 img {

   max-width : 280px;
  }
 
}


/* Logo responsive */
.img_logo {
    width: 90%;      /* prend toute la largeur possible dans son container */
    max-width: auto; /* jamais plus large que 900px */
    height: auto;     /* garde le ratio */
    display: block;   /* élimine l’espace blanc sous l’image */
    margin-right: auto;   /* centre l’image dans son container */

}

/* Container logo */
.logocli {
    width: 80%;
    height :auto;
    max-width: auto; /* même largeur max que l’image */
    margin: 0 auto;   /* centre le container */
    padding: 0 10px;  /* un petit padding pour respirer */
      margin-right: auto;   /* centre l’image dans son container */
}





/*********************************************************************************************************************************************************
***********************************************************************************************************************************************************
***************************************************************FIN GRAND TITRE*******************************************************************************
***********************************************************************************************************************************************************
*************************************************************************************************************************************************************/

/*********************************************************************************************************************************************************
***********************************************************************************************************************************************************
***************************************************************QUI SUIS JE ?*******************************************************************************
***********************************************************************************************************************************************************
*************************************************************************************************************************************************************/
/* Conteneur du titre */
.titretuto {
  display: flex;
  align-items: center;
  gap: 15px; /* espace entre carré et titre */
  margin: 30px 0;
}

/* Carré animé */
.carrecouleur {
  width: 20px;
  height: 20px;
  background-color: #ffaa31;
  border-radius: 0%; /* carré initial */
  animation: carre-round 1s infinite alternate;
}


/* Conteneur du titre */
.titretuto2 {
  display: flex;
  align-items: center;
  gap: 20px; /* espace entre carré et titre */
  margin: 30px 0;
}

/* Carré animé */
.carrecouleur2 {
  width: 40px;
  height: 40px;
  background-color: #ffaa31;
  border-radius: 0%; /* carré initial */
  animation: carre-round 1s infinite alternate;
}

/* Animation : carré → rond → carré → rond ... */
@keyframes carre-round {
  0% {
    border-radius: 0%;
    transform: scale(1);
  }
  50% {
    border-radius: 50%;
    transform: scale(1.2); /* léger zoom pour dynamisme */
  }
  100% {
    border-radius: 0%;
    transform: scale(1);
  }
}

/* Titre stylé mais sobre */
.titretuto h2 {
  font-family: 'Orbitron', sans-serif; /* futuriste mais sobre */
  font-weight: 500;
  font-size: 1.8rem;
  color: #333;
  margin: 0;
}

/* Titre stylé mais sobre */
.titretuto2 h1 {
  font-family: 'Orbitron', sans-serif; /* futuriste mais sobre */
  font-weight: 500;
  font-size: 3.5rem;
  color: #333;
  margin: 0;
}



/* Style par défaut pour grand écran */
.bloc_prez {
  display: grid;
  position : relative;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  max-width: 900px;
  margin: auto;
  color: #333;
  gap: 0; /* Aucune marge entre les blocs */
}

.bloc_prez::before {
  content: none;
}

.text_blocprez {
  max-width: 333px;
  opacity: 0;                   /* Texte invisible */
  transition: opacity 0.3s ease;/* Transition pour l'apparition */
  text-align: left;
}

.img_logo_prez {
  opacity: 0;                   /* Image cachée par défaut */
   transition: opacity 0.5s ease;/* Transition pour l'apparition */
  width: 50px; /* Taille ajustable */
  height: auto; /* Maintient le ratio */
  padding: 20px;
}

.blochaut_g, .blochaut_d, .blocbas_g, .blocbas_d {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  font-weight: bold;
  width: 430px;
  height: 200px;
  margin: auto;
}

/* Personnalisation par bloc */
.blochaut_g {
  border-top-left-radius: 10px;
  background-image: url('img_prez/didi_hg.png');  
}
.blochaut_g:hover {
  background-image: url('img_prez/didi_hg2.png');
}
.blochaut_g:hover .text_blocprez {
  opacity: 1;
}
.blochaut_g:hover .img_logo_prez {
  opacity: 1;
}

.blochaut_d {
  border-top-right-radius: 10px;
  background-image: url('img_prez/didi_hd.png');
}
.blochaut_d:hover {
  background-image: url('img_prez/didi_hd2.png');
}
.blochaut_d:hover .text_blocprez {
  opacity: 1;
}
.blochaut_d:hover .img_logo_prez {
  opacity: 1;
}

.blocbas_g {
  border-bottom-left-radius: 10px;
  background-image: url('img_prez/didi_bg.png');
}
.blocbas_g:hover {
  background-image: url('img_prez/didi_bg2.png');
}
.blocbas_g:hover .text_blocprez {
  opacity: 1;
}
.blocbas_g:hover .img_logo_prez {
  opacity: 1;
}

.blocbas_d {
  border-bottom-right-radius: 10px;
  background-image: url('img_prez/didi_bd.png');
}
.blocbas_d:hover {
  background-image: url('img_prez/didi_bd2.png');
}
.blocbas_d:hover .text_blocprez {
  opacity: 1;
}
.blocbas_d:hover .img_logo_prez {
  opacity: 1;
}

/* Media query pour écrans petits (mobile, tablette) */
@media only screen and (max-width: 1024px) {









  .bloc_prez {
    grid-template-columns: 1fr; /* Une seule colonne */
    grid-template-rows: auto;   /* Lignes ajustées selon le contenu */
    max-width: 100%;
  }

  .blochaut_g, .blochaut_d, .blocbas_g, .blocbas_d {
    width: 100%;   /* Occupe toute la largeur */
    height: auto;  /* Hauteur automatique */
    margin: 0;     /* Supprimer la marge */
  }
  
  /* Images de fond adaptées aux petits écrans */
  .blochaut_g {
      background-image: url('img_prez/didi_hg2.png');
         opacity: 0.5;    
  }
  .blochaut_g:hover {
  background-image: url('img_prez/didi_hg_mobile.png');
}

  .blochaut_d {
  background-image: url('img_prez/didi_hd2.png');
   border-top-right-radius: 0px;
      opacity: 0.5;    
  }
  .blochaut_d:hover {
  background-image: url('img_prez/didi_hd_mobile.png');
}


  .blocbas_g {

  background-image: url('img_prez/didi_bg2.png');
   border-bottom-left-radius: 0px;
      opacity: 0.5;    
  }
  .blocbas_g:hover {
  background-image: url('img_prez/didi_bg_mobile.png');
}


  .blocbas_d {
  background-image: url('img_prez/didi_bd2.png');
     opacity: 0.5;    
  }
    .blocbas_d:hover {
  background-image: url('img_prez/didi_bd_mobile.png');
}
  
.text_blocprez {
  max-width: 333px;
  opacity: 1;                   /* Texte invisible */
  transition: opacity 0.3s ease;/* Transition pour l'apparition */
  text-align: left;
}

.img_logo_prez {
  opacity: 1;                   /* Image cachée par défaut */
   transition: opacity 0.5s ease;/* Transition pour l'apparition */
  width: 50px; /* Taille ajustable */
  height: auto; /* Maintient le ratio */
  padding: 20px;
}


.bloc_prez::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('img_prez/didivi.png') center/cover no-repeat;
    opacity: 0.1;       /* Image semi-transparente */
  }


  }

/*********************************************************************************************************************************************************
***********************************************************************************************************************************************************
***************************************************************FIN QUI SUIS JE ?*******************************************************************************
***********************************************************************************************************************************************************
*************************************************************************************************************************************************************/


/*********************************************************************************************************************************************************
***********************************************************************************************************************************************************
***************************************************************MES EXIGENCES *******************************************************************************
***********************************************************************************************************************************************************
*************************************************************************************************************************************************************/
/* Style par défaut pour grand écran */
.bloc_prez2 {
 display: flex;              /* Active Flexbox */
  justify-content: center;    /* Centre les éléments horizontalement */
  align-items: center;        /* Centre les éléments verticalement */
  gap: 100px;                  /* Optionnel : espace entre les cercles */
}


#cercle1{

  background:#f1867c;
    opacity : 0.5;
  border-radius:50%;
  width:160px;
  height:160px;
  border:2px solid #679403; 
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

            display: flex;              /* Active Flexbox dans le cercle */
  justify-content: center;    /* Centre horizontalement le contenu */
  align-items: center;        /* Centre verticalement le contenu */
  text-align: center;         /* Centre le texte */
  color: #fff;                /* Couleur du texte (blanc) */
  font-size: 16px;            /* Taille du texte */
  font-weight : bold;
    padding : 4px;
}

#cercle2{
 opacity : 0.5;
  background:#8be377;
  border-radius:50%;
  width:160px;
  height:160px;
  border:2px solid #679403; 
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

            display: flex;              /* Active Flexbox dans le cercle */
  justify-content: center;    /* Centre horizontalement le contenu */
  align-items: center;        /* Centre verticalement le contenu */
  text-align: center;         /* Centre le texte */
  color: #fff;                /* Couleur du texte (blanc) */
  font-size: 16px;            /* Taille du texte */
  font-weight : bold;
  padding : 5px;
}

#cercle2:hover{
 opacity : 1;
}
#cercle1:hover{
 opacity : 1;
}

/*********************************************************************************************************************************************************
***********************************************************************************************************************************************************
***************************************************************MES CONVICTIONS *******************************************************************************
***********************************************************************************************************************************************************
*************************************************************************************************************************************************************/

        .bloc_prez3 {
            max-width: 100%;
            margin: auto;
    
 background-color : #ffffff;
  
        }

        .rose_rectangle {
min-height : 100px;
 background-color : #ffebe7;
 margin-left : -20px;
  margin-right : -20px;

        }

                .cont{
                  position : relative;

        }

.text_rose {
  padding : 40px 35px 40px 140px;
  text-align : left;
font-weight : bold;
  color : #ff8e77;

}

.text_rose2 {
  padding : 40px 35px 90px 140px;
  text-align : left;
font-weight : bold;
  color : #ff8e77;

}

.text_rose3 {
  padding : 40px 35px 90px 140px;
  text-align : left;
font-weight : bold;
  color : #ff8e77;

}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 900px) {



}

@media (max-width: 440px) {

.text_rose3 {
  padding : 30px 35px 25px 180px;
}

 
}

.img_rose {
  position: relative;  
  float : left;
  margin-top : 30px;
  margin-left : 15px;
 width: 70px; /* ✅ Taille ajustable */
  filter: drop-shadow(5px 2px 1px #ff7a5f);

}

.img_rose2 {
  position: relative;  
  float : left;
  margin-top : 30px;
  margin-left : 15px;
 width: 50px; /* ✅ Taille ajustable */
  filter: drop-shadow(5px 2px 1px #a3a3a3);

}
.img_rose3 {
  position: relative;  
  float : left;
  margin-top : 30px;
  margin-left : 15px;
 width: 70px; /* ✅ Taille ajustable */
  filter: drop-shadow(5px 2px 1px #a3a3a3);

}

.img_rose4 {
  position: relative;  
  float : left;
  margin-top : 30px;
  margin-left : 15px;
 width: 70px; /* ✅ Taille ajustable */
height : 120px;
 filter: drop-shadow(5px 2px 1px #ff7a5f);
}

.img_rose5 {
   position: absolute;
    top: -20px;           /* Colle en haut */
    left: -30px;         /* Colle à droite */
    bottom : 100px; 
    width: 150px;
    height: auto;
     z-index: 10; 
      filter: drop-shadow(5px 2px 1px #ff7a5f); 
}

.img_rose6 {
  position: relative;  
  float : left;
  margin-top : 30px;
  margin-left : 15px;
 width: 60px; /* ✅ Taille ajustable */
 filter: drop-shadow(5px 2px 1px #b9b9b9);

}
        .coin_g {
         position : absolute;
 background: url('img_prez/coin_g.png');
 width : 134px;
 height : 67px;
 margin-left : -20px;

        }

              .coin_g2 {
         position : absolute;
 background: url('img_prez/coin_g.png');
 width : 134px;
 height : 67px;
 margin-left : -20px;

        }  

                .coind {
   position: absolute;
    top: -113px;           /* Colle en haut */
    right: -20px;         /* Colle à droite */
    bottom : 200px;
   background: url('img_prez/coind.png') no-repeat; 
    background-size: contain; /* pour que l'image s'adapte */
    width: 325px;
    height: 113px;
     z-index: 10;  

        }

        .gris_rectangle {

min-height : 100px;
 background-color : #f5f5f5;
 margin-left : -20px;
   margin-right : -20px;

        }

        .text_gris {
  padding : 40px 40px 40px 60px;
  text-align : center;
  color : #000000;
}
/* --- RESPONSIVE DESIGN --- */
@media (max-width: 900px) {
  
}

@media (max-width: 500px) {
  
}

.contenu_securite {
  position: relative;
min-height : 100px;
 background-color : #ffffff;
 opacity : 0.9;
 max-width : 900px;
 margin-left : -20px;
margin-right : -20px;
  /* Pas d'overflow ici pour permettre aux animations de surlignage de s'afficher */
  overflow: visible;


}


.contenu_securite2 {
  position: relative;
min-height : 100px;
 background-color : #ffffff;
 opacity : 0.9;
 max-width : 900px;
 margin-left : -20px;
margin-right : -20px;
  /* Pas d'overflow ici pour permettre aux animations de surlignage de s'afficher */
  overflow: visible;
margin-top : 20px;

}



.bloc_convictions {
  display: grid;
  grid-template-columns: 100px 1fr; /* 200px pour l'avatar et le reste pour le texte */
  grid-gap: 20px;                   /* Espace entre les deux blocs */
  max-width: 900px;
  margin-top : 50px;
  color: #333;
  border: dashed #fd9884;
}


.bloc_convictions2 {
  display: grid;
  grid-template-columns: 100px 1fr; /* 200px pour l'avatar et le reste pour le texte */
  grid-gap: 30px;                   /* Espace entre les deux blocs */
  max-width: 900px;
  margin-top : 50px;
  color: #333;
  border: dashed #dfdfdf;
}

/* Bloc de gauche (avatar) */
.bloc_gauche {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  width: 100px;    /* Correspond à la largeur définie dans grid-template-columns */
  height: 200px;
}

/* Bloc de droite (texte de présentation) */
.bloc_droite {
  display: flex;
  align-items: center;      /* Centre verticalement le contenu */
  justify-content: flex-start; /* Aligne le texte à gauche */
  background-color: transparent;

  padding: 0px;            /* Pour ajouter un peu d'espace intérieur */
  margin-left : 20px;
  margin-right : 30px;
  height: auto;
  text-align : left;
}

.img_conv {
    width: 100px; /* ✅ Taille ajustable */
    height: auto; /* ✅ Maintient le ratio */
    margin-left : 50px;
  }
.img_conv2 {
    width: 80px; /* ✅ Taille ajustable */
    height: auto; /* ✅ Maintient le ratio */
    margin-left : 50px;
  }


/* === RESPONSIVE === */

/* Tablettes (moins de 900px) */
@media (max-width: 900px) {
  .bloc_convictions2 {
    grid-template-columns: 80px 1fr;
    gap: 10px;
    max-width: 95%;
  }

  .bloc_gauche {
    height: auto;
  }

  .img_conv, .img_conv2 {
    width: 70px;
  }

  .bloc_droite {
    margin: 0;
    font-size: 0.95rem;
  }

  .titretuto {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .titretuto h2 {
    font-size: 1.3rem;
  }

}

/* Mobiles (moins de 600px) */
@media (max-width: 600px) {
  
  .bloc_convictions2 {
    display: flex;             /* passe en flex */
    flex-direction: column;    /* image au-dessus du texte */
    align-items: center;       /* centre tout le contenu */
    justify-content: center;
    text-align: center;
    max-width: 100%;
    padding: 10px;
    margin: 20px auto;
  }

  .bloc_gauche {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;              /* prend toute la largeur */
    height: auto;
    margin: 0 auto 10px auto; /* espace dessous l’image */
  }

  .img_conv,
  .img_conv2 {
    width: 80px;              /* taille adaptée mobile */
    height: auto;
    margin: 0 auto;           /* ✅ centre horizontalement */
    display: block;           /* indispensable pour margin auto */
  }

  .bloc_droite {
    margin: 0;
    text-align: center;
    width: 90%;
  }

}



.container_bebe_noir {
  margin-top : 80px;
  display: flex;
  align-items: flex-start;
  max-width: 800px;
  gap: 30px;
  margin-bottom : 80px;
}


.container_bebe_noir2 {
  margin-top : 80px;
  display: flex;
  align-items: flex-start;
  max-width: 900px;

}


/* Image à gauche */
.avatar_bebe_noir img {
  width: 80px;
  height: auto;
}

/* Texte à droite */
.texte_passion {
  line-height: 1.6;
  font-size: 16px;
  text-align: left; /* <-- force l’alignement à gauche */
}

.fd_color_passion {
  background-color: #f7e7e3;
  border-left: 4px solid #d8a39b;
  padding: 10px 15px;
  margin: 20px 0;
}


/* Responsive (petits écrans) */
@media (max-width: 600px) {
  .container_bebe_noir {
    flex-direction: column;
    align-items: center;
    text-align: left;
  }

  .avatar_bebe_noir img {
    margin-bottom: 15px;
  }

  .texte_passion {
    font-size: 15px;
  }

}




/*/////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////
////////////////////////SURLIGNAGE TEXTE JAUNE////////////////////////////
//////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////// */
/* Exemple pour le conteneur de texte (s'il faut un style spécifique) */
.container-texte {
  position: relative;
  z-index: -1; /* pour qu'il soit au-dessus des images si besoin */
  padding: 20px;
}

@keyframes highlight {
  to {
    background-position: 0;
  }
}

mark {
  animation: highlight linear forwards;
  animation-timeline: view(60% 20%);
  background: linear-gradient(
    to right,
    oklch(0.86 0.19 84.89 / 1) 50%,
    oklch(0.86 0.19 84.89 / 0) 50%
  );
  background-position: 100%;
  background-size: 200% 100%;
  border-radius: 0.125rem;
  padding-inline: 0.125rem;
}


/*/////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////
////////////////////////FIN SURLIGNAGE TEXTE JAUNE/////////////////////////
//////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////// */

.container-images {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Masque uniquement le débordement des images animées */
  pointer-events: none; /* Pour éviter que ce conteneur ne capte des clics si besoin */
}


/* La girafe, toujours collée à droite */
.girafe {
  position: absolute;
  right: 0;
  top: 10%;       /* Ajustez la position verticale */
  height: 20%;    /* Taille relative du conteneur */
  opacity: 0;     /* Initialement invisible */
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* L'ombre, placée juste en dessous de la girafe */
.girafe-ombre {
  position: absolute;
  right: 0;      /* Légèrement décalée pour simuler une ombre */
  top: calc(5% + 20% + 10px); /* Positionnée sous la girafe */
  height: 20%;    /* Taille de l'ombre */
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* La bulle de BD, positionnée au-dessus de la girafe */
.girafe-bulle {
  position: absolute;
  right: 80px;
  top: calc(4% - 20px);  /* Un peu au-dessus de la girafe */
  height: 15%;    /* Taille de la bulle */
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 900px) {
 
}

@media (max-width: 500px) {
 .girafe {

height : 5%
 }

 .girafe-ombre {
  top: calc(5% + 10% + 10px); /* Positionnée sous la girafe */
height : 5%

 }

 .girafe-bulle {
   top: calc(8% - 30px);  /* Un peu au-dessus de la girafe */
  height : 5%



 }

}

.anotation {
min-height : 120px;
max-width :600px;
 background-color : #f5f5f5;
   border-radius: 10px 0px 0px  10px;
  margin-left: auto; /* Pousse cet élément à droite */
  margin-top : -20px;

  border-left: 0 solid #fda42d;
  transition: border-left 300ms ease-in-out, padding-left 300ms ease-in-out;

}

.anotation:hover {
  padding-left: 0.5rem;
  border-left: 1.5rem solid #fda42d;

}

.anotation > :first-child {
  margin-top: 0;
}

.anotation > :last-child {
  margin-bottom: 0;
}

.anotation_text {
text-align : left ;
max-width : 500px;
margin-left : 15px;
padding-top : 10px;
font-weight : bold;
}


.anotation2 {
  display: flex; /* 🔥 clé pour aligner horizontalement et centrer verticalement */
  align-items: center; /* centre verticalement le contenu */
  background-color: #f5f5f5;
  border-radius: 10px 0 0 10px;
  margin-left: auto; /* aligne le bloc à droite dans son conteneur parent */
  margin-top: 20px;
  min-height: 120px;
  max-width: 600px;

  border-left: 0 solid #fda42d;
  transition: border-left 300ms ease-in-out, padding-left 300ms ease-in-out;
}

.anotation2:hover {
  padding-left: 0.5rem;
  border-left: 1.5rem solid #fda42d;
}

.anotation2 > :first-child {
  margin-top: 0;
}

.anotation2 > :last-child {
  margin-bottom: 0;
}

.anotation_text2 {
  text-align: left;
  max-width: 500px;
  margin-right: 10px;
  font-weight: bold;
  padding: 10px 0;
}

.bloc_serieux {
  position : relative;
  padding-top : 0px;
  display: grid;
  grid-template-columns: 200px 1fr; /* 200px pour l'avatar et le reste pour le texte */
  grid-gap: 20px;                   /* Espace entre les deux blocs */
  max-width: 900px;
  margin-top: 20px;
  margin-bottom :20px;
  color: #333;
}

/* Bloc de gauche (avatar) */
.bloc_gauche_serieux {

  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  width: 300px;    /* Correspond à la largeur définie dans grid-template-columns */
  height: 200px;
}

.bloc_droite_serieux {
  display: flex;
  flex-direction: column;  /* Aligne les éléments verticalement, un par ligne */
  align-items: flex-start; /* Aligne le contenu à gauche */
  background-color: transparent;
  padding-top: 35px;
  margin-left: 60px;
  height: auto;
  max-width: 400px;
  list-style-type: none;
    font-size: 19px;            /* Taille du texte */
  font-weight : bold;

}

/* Réinitialisation des styles par défaut sur les li */
.bloc_droite_serieux li {
  margin: 0;
  padding: 0;
  text-align: left;
  line-height: 1.4; /* Ajustez la hauteur de ligne si besoin */
}

.cercle_3{
  display : flex;
  background:#bcf6ff;

  border-radius:50%;
  width:200px;
  height:200px;

          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

                          /* Active Flexbox dans le cercle */
  justify-content: center;    /* Centre horizontalement le contenu */
  align-items: center;        /* Centre verticalement le contenu */
  text-align: center;         /* Centre le texte */
  color: #000;                /* Couleur du texte (blanc) */
  font-size: 19px;            /* Taille du texte */
  font-weight : bold;
}

.cercle_3:hover {

opacity : 0.5;
border : dashed 8px #1800fc;

}


.cercle_4{
  display : flex;
  background:#ff973a;

  border-radius:50%;
  width:200px;
  height:200px;

          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

                          /* Active Flexbox dans le cercle */
  justify-content: center;    /* Centre horizontalement le contenu */
  align-items: center;        /* Centre verticalement le contenu */
  text-align: center;         /* Centre le texte */
  color: #000;                /* Couleur du texte (blanc) */
  font-size: 19px;            /* Taille du texte */
  font-weight : bold;
}

.cercle_4:hover {

background : #ffd0a6;
border : dashed 8px #ff7800;

}

.cercle_5{
  display : flex;
  background:#e2ccc9;

  border-radius:50%;
  width:200px;
  height:200px;

          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

                          /* Active Flexbox dans le cercle */
  justify-content: center;    /* Centre horizontalement le contenu */
  align-items: center;        /* Centre verticalement le contenu */
  text-align: center;         /* Centre le texte */
  color: #000;                /* Couleur du texte (blanc) */
  font-size: 19px;            /* Taille du texte */
  font-weight : bold;
}


.cercle_5:hover {

 background:#ccaba6;
border : dashed 8px #b58882;

}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 900px) {
 
}

@media (max-width: 500px) {
 .bloc_serieux{
margin-top : 60px;

 }
}

.cercle_6{
  display : flex;
  background:#b0ffa6;

  border-radius:50%;
  width:200px;
  height:200px;

          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

                          /* Active Flexbox dans le cercle */
  justify-content: center;    /* Centre horizontalement le contenu */
  align-items: center;        /* Centre verticalement le contenu */
  text-align: center;         /* Centre le texte */
  color: #000;                /* Couleur du texte (blanc) */
  font-size: 19px;            /* Taille du texte */
  font-weight : bold;
}

.cercle_6:hover {

background :#77bd6e ;
border : dashed 8px #36ee1e;

}


.cercle_7{
  display : flex;
  background:#ffa6a6;

  border-radius:50%;
  width:200px;
  height:200px;

          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

                          /* Active Flexbox dans le cercle */
  justify-content: center;    /* Centre horizontalement le contenu */
  align-items: center;        /* Centre verticalement le contenu */
  text-align: center;         /* Centre le texte */
  color: #000;                /* Couleur du texte (blanc) */
  font-size: 19px;            /* Taille du texte */
  font-weight : bold;
}

.cercle_7:hover {

background : #ff6c6c;
border : dashed 8px #d33838;

}

.global-wrapper {
  position: relative; /* Base de référence pour l'overlay */
}

/* On retire toute hauteur indésirable du conteneur overlay */
.contenu_bebenoir {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 999;
}

.container-images-bebenoir {
  position: absolute;
  top: 20%;
  right: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bebenoir {
  position: absolute;
  right: 20px; /* ajustez selon vos besoins */
  top: 10%;
  height: 30%;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1000;
}
/* Media query pour écrans petits (mobile, tablette) */
@media only screen and (max-width: 1024px) {

  .anotation {
min-height : 100px;
max-width :350px;
 background-color : #f5f5f5;
   border-radius: 10px 0px 0px  10px;
  margin-left: auto; /* Pousse cet élément à droite */
  margin-top : 70px;

  border-left: 0 solid #fda42d;
  transition: border-left 300ms ease-in-out, padding-left 300ms ease-in-out;

}


.anotation_text {

text-align : left ;
max-width : 300px;
margin-left : 15px;
padding-top : 5px;
}

  .bloc_serieux {
    grid-template-columns: 1fr; /* Passage en une seule colonne */
    grid-gap: 10px;             /* Ajustez l'espacement si nécessaire */
    justify-items: center;      /* Centre les éléments horizontalement */
    text-align: center;         /* Centre le texte */
  }



}


.exclam {


float : left;
width : 40px ;
height : auto;
padding-top : 5px;
padding-right : 8px;
paddin-left : 20px;

}

/* Bloc gauche (icône ou image) */
.exclam2 {
  width: 40px;
  height: auto;
  margin-left: 15px;
  margin-right: 15px;
  flex-shrink: 0; /* 🔒 empêche l’icône de se réduire */
}


.tableau_gris {

  margin-top: 20px;
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  max-width: 1000px;
  text-align: center;
}

.bloc_tab {
  position: relative; /* très important */
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 40px 20px 20px 20px; /* laisse la place pour le rond */
  width: 280px;
  overflow: visible; /* ✅ au cas où le rond déborde */
}


/* Effet au survol */
.bloc_tab:hover {
  background-color: #f1f5ff; /* couleur de fond au survol */
  transform: translateY(-5px); /* effet de "lévitation" */
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.moncercle {
  position: absolute;
  top: -15px; /* ✅ remonte un peu le rond pour qu’il soit bien visible */
  left: 10px;
  background: #96e590;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  border: 2px solid #679403;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  color: #000;
  font-size: 18px;
  font-weight: bold;
  z-index: 10; /* ✅ garantit qu’il soit au-dessus de tout */
}

.bloc_tab img {
  width: 150px;
  height: auto;
  margin-bottom: 15px;
}
/* Animation de rotation légère de l’image */
.bloc_tab:hover img {
  transform: rotate(-5deg) scale(1.05); /* petite rotation et zoom */
}
.bloc_tab p {
  font-size: 15px;
  line-height: 1.4;
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 900px) {
  .tableau_gris {
    flex-wrap: wrap; /* les blocs passent à la ligne */
    gap: 20px;
  }

  .bloc_tab {
    width: 90%; /* prend presque toute la largeur */
  }
}

@media (max-width: 500px) {
  .bloc_tab {
    width: 100%;
    padding: 15px;
  }

  .bloc_tab img {
    width: 60px; /* images un peu plus petites */
  }

  .bloc_tab p {
    font-size: 14px;
  }
}


/* --- SLIDER --- */
.slider {
  width: 90%;             /* occupe 90% de l'écran sur desktop */
  max-width: 700px;       /* limite la taille max pour desktop */
  height: 400px;          /* hauteur par défaut, modifiable */
  margin: 20px auto;      /* centré horizontalement */
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

/* Images du slider */
.slider img {
  width: 100%;
  height: 100%;
  object-fit: contain;      /* garde les proportions sans déformer */
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

/* Image active visible */
.slider img.active {
  opacity: 1;
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 900px) {
  .slider {
    width: 95%;
    height: 350px;
  }
}

@media (max-width: 600px) {
  .slider {
    width: 95%;
    height: 350px;  /* réduit la hauteur pour petit écran */
  }
}

@media (max-width: 400px) {
  .slider {
    width: 95%;
    height: 350px;
  }
}


.girafe-container {
  display: flex;
  flex-direction: column; /* place l’image au-dessus du texte */
  align-items: flex-start; /* aligné à gauche */
  margin: 30px 15px;
}

/* Image girafe */
.girafe-img {

 position: relative;
  top: 25px;       /* ajuste la hauteur selon ton image */
  width: 70px;
    left: 350px;      /* On annule la valeur "left" */
  right: auto;     /* ✅ On décale vers la droite */

}

/* ✅ Adaptation tablette (écran moyen) */
@media (max-width: 900px) {
  .girafe-img {
    left: 40%;         /* la girafe revient un peu vers le centre */
  }
}

/* ✅ Adaptation mobile */
@media (max-width: 600px) {
  .girafe-img {
    left: 40%;         /* centrée au-dessus du bloc */
    top: 25px;        /* ajustement vertical si besoin */
    width: 60px;       /* plus petite sur mobile */
  }
}


.rec_vert {

  background-color : #dbffdd;
  padding : 5px 5px 5px 5px ;
  border-radius : 10px 10px 10px 10px ; 
}
.card:hover { background-color : #fdf7e2;  border: 3px dotted #f8dbc3;  }


.numero {

  width : 100px;
  height : auto;
}

.card {
    border: 1px solid #bac6d3;
    border-radius: 8px;
    padding: 1rem;
}
main {
    padding: 1rem 2rem;
    margin: auto;
}
ul {
    margin: 0 0 1.5rem;
    padding: 0;
}

li {
    display: inline-block;
}
/********************************
* Carousel styles
*********************************/
.carousel-items {
    display: flex;
    overflow-x: scroll;
    padding: 1rem 0;
    scroll-snap-type: x mandatory;
}

.carousel-item {
    flex: 1 0 250px;
    margin-left: 1rem;
    scroll-snap-align: start;
}

::-webkit-scrollbar-track {
    background-color: #F5F5F5;
}

::-webkit-scrollbar {
    height: 15px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
    background-color: #3d4852;
    border-radius: 3px;
}


/********************************
* Breakpoints
*********************************/
@media screen and (min-width: 576px) {
    .carousel-item {
        flex-basis: 300px;
    }
}

@media screen and (min-width: 992px) {

 

@media screen and (min-width: 1280px) {
    h1 {
        font-size: 4rem;
    }

    .carousel-item {
        flex-basis: 450px;
    }
}

@media screen and (min-width: 1600px) {

}


/*********************************************************************************************************************************************************
***********************************************************************************************************************************************************
***************************************************************FIN MES CONVICTIONS *******************************************************************************
***********************************************************************************************************************************************************
*************************************************************************************************************************************************************/

/*/////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////
////////////////////////ANIMATION APPARITION IMAGE/////////////////////////
//////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////// */

  .animation {
  view-timeline: --subjectReveal block;
  animation-timeline: --subjectReveal;

  animation-name: appear;
  animation-range-start: entry 25%;
  animation-fill-mode: both;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
}

@keyframes appear {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1,
    transform: scaleX(1);
  }
}

/*/////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////
////////////////////////FIN ANIMATION APPARITION IMAGE//////////////////////
//////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////// */