* {
  padding: 0px;
  margin: 0px;
}

@font-face {
  font-family: "Designer";
  src: url("/logo/font/Designer.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "OpenSans-Regular";
  src: url("/logo/font/OpenSans-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

/*sans point= général et avec point= juste les class + .class1 .class2= parent et enfant /// Typo: 1rem=16px=taille basique optimal*/

/*début Le site en lui-même et alignement des big sctuctures__________________________________________________________________________________________________________*/
body { /*Le corp du site*/
  background-image: url("/logo/decoration/fond-body.webp");
  background-size: 400px 400px;
  background-position:center;
  background-attachment: scroll;
  background-repeat: repeat; /* L'image va se répéter en X et en Y à l'infini */
  width: 100%; /*il prend le max de place (c'est le site en lui-même)*/
  height: auto;
  
  font-family: 'OpenSans-Regular', serif;
  color: rgba(200,230,240,1) ;
  letter-spacing: 0.05em; /* Ajoute un léger espace entre chaque lettre pour aérer */
  line-height: 1.6;       /* Augmente l'espace entre les lignes (hauteur de ligne) */

}
#inside-body { /*Aligne de haut en bas et gère l'ensemble Header/main/Footer PARENTS (100% du body)*/
  display:flex;
  flex-direction: column;
  align-items:center;
  width: 100%;
  gap: 15px; /*sépare entre eux*/
}
/*Fin Le site en lui-même et alignement des big sctuctures___________________________________________________________________________________________________________*/

/*début ENFANTs DE inside-body (El famoso Big structures)____________________________________________________________________________________________________________*/
header { 
  background-color: (255, 0, 0, 0.1); /*!!!!!!!!!rouge*/
  width: 100%;
  height: auto;   
}
main {
  background-color: (255, 0, 0,0.1); /*!!!!!!!!!rouge*/
  width: 100%;
  height: auto;
}
footer {
  background-color: rgba(255, 0, 0,0.1); /*!!!!!!!!!rouge*/
  width: 100%;
  height: auto;
}
/*Fin ENFANTs DE inside-body (El famoso Big structures)_____________________________________________________________________________________________________________*/
















/*Début Enfants des Big structures (tous bridées à 1800 sécu grand ecrans)__________________________________________________________________________________________*/
header #contenu-banniere-pc, #foot,
main #inside-main { 
  width: 100%;
  max-width: 1800px; /*Sécurité écran géant*/
  margin: 0 auto; /*Garde centré axe vertical, sinon se colle à gauche par défaut*/
}









#contenu-banniere-pc {
  display: flex;
  align-content: center; /*centrer ligne horizontale*/
  justify-content: center;
  width: 100%;
  height: auto;
  background-color: rgba(39, 101, 245,0.0); /*!!!!!!!!!Violet*/
  border-radius: 10px;
}
/*Début enfant (inside-body->header->grand-ecran->x)*/
#banniere-pc { /*fond décoré banniere illimité*/
background-color:;                                                           /*Jaune*/
  background-image: url(/logo/decoration/fond-pc.webp);
  background-repeat: repeat;
  background-position: center;
  background-size: auto 100%; /*Le fond fait 1800 comme le reste, il remplie donc la div contenu-banniere-pc en trichant et "auto" lui fait garder son ratio*/
}
header img { /*Toutes les img du header, PC ou TEL*/
  width: 100%;
  height: auto;
}
/*Fin enfant (inside-body->header->grand-ecran->x)*/







#inside-main { /*Enfant de MAIN et Parent de bar-centre+Bar-droite*/
  display: flex;
  justify-content: space-between;
  background-color:;                                /*Bleu*/
  gap: 10px
}






#bar-centre { 
  display: flex;
  flex-direction: column;
  gap:15px;
  background-color: ;                               /*Vert*/
  float: none;
  border-radius: 20px;
  box-sizing:border-box; /*bride le bloc à la taille ordonnée, sans quoi il additionne les padding (marges internes), contours ect.. */
}
#bar-centre .introduction { /*Gère les modules "introduction" à l'interieur de la bar centrale général*/
  padding: 0px 15px 20px 15px;
  gap:15px;
  box-sizing:border-box;
  border-radius:15px;
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.5);
}
#navhaut-tel, /*Couleur fond à tout ces éléments (ps: vigule = plusieurs id/class partagent même paramètres*/
#bar-centre .introduction {
    background-color: rgba(40,10,70,0.1);
    background-size: cover;
}


.mascotte {
  width: 100px;
  height: auto;
  float: left;        /* float = l'élement prend son espace et pousse le reste*/
  margin-right: 25px; /* Pousse le texte horizontalement pour qu'il ne colle pas au gif */
  margin-bottom: 15px;/* Pousse le texte vers le bas si le texte dépasse sous le gif */

}
.illustration-epingle {
  width: auto;
  height: 80px;
  float: right;        /* float = l'élement prend son espace et pousse le reste*/
  margin-left: 15px; /* Pousse le texte horizontalement pour qu'il ne colle pas au gif */
  margin-bottom: 15px;/* Pousse le texte vers le bas si le texte dépasse sous le gif */
}
.introduction p {
  margin-top: 7.7%;
}








#bar-droite {
  background-color: green;
  width: 30%;
  
}














/*Début footer (enfant inside-body->footer)*/

#foot {
  background-color: blue;
  display: flex;
  align-content: center; /*centrer ligne horizontale*/
  justify-content: center;
  padding:10px;
  box-sizing: border-box; /*Bride taille pour ne pas additionner padding etc..*/
}
footer i {
  text-decoration: none;
  color:white;
}
#afoot { /*bouton CGU*/
  background-color: #4CAF50; /* Vert clair */
  border: none;
  color: white;
  padding: 5px 2px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  margin: 2px 2px;
  cursor: pointer;
  border-radius: 5px;
  box-sizing:border-box; /*bride le bloc à la taille ordonnée, sans quoi il additionne les padding (marges internes), contours ect.. */
}
/*Fin footer (enfant inside-body->footer)*/

































.petit-ecran { /*Caché par défaut (pc)*/
  display: none;
}

@media (max-width: 1110px) {
    main #inside-main #bar-droite {
        display: none;
    }
}



@media (max-width: 768px) { /*Officie dès le format atteint)*/


  .grand-ecran {
    display: none; /* mode: cacher la div */
  }
  .petit-ecran {
    display: block; /* mode: afficher la div */
  }
body { /*le fond scroll avec le pouce pour éviter les bugs*/
  background-attachment: scroll; 
    }
    
/*Ficher mascotte et aligne epingle+titre article*/
#inside-main .introduction .mascotte {
  display: none;
}
#inside-main .introduction .titre-introduction-tel {
  float: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

}






















/* Début VIDEO YOUTUBE SUR DIV*/
.video {
  position: relative;
  padding-bottom: 56.25%; /* Ratio 16:9 */
  height: 0;
  overflow: hidden;
  max-width: 100%; /* S'assure que la div ne dépasse pas la largeur du parent */
  box-sizing:border-box; /*bride le bloc à la taille ordonnée, sans quoi il additionne les padding (marges internes), contours ect.. */
}
.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 600px) { /*Redimention vidéo sur téléphone*/
  #video {
    max-width: 100%;
    margin: 0 auto;
  }
}
.video-youtube {
  height: 315px;
  width:560px;
  max-width: 100%;
}
/* Fin VIDEO YOUTUBE SUR DIV MUSIQUE*/














#navhaut-tel {
  background-color: rgba(0,255,240,1);
  font-family: Designer;
  
  
  padding: 10px;
  margin: 0px 0px 10px 0px;
  box-sizing:border-box;
  border-radius:15px;
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.2);
  width: 100%;;
}






/* Début Menu déroulant header JAVASCRIPT ?? (mobile)*/
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
nav li {
  display: inline-block;
  position: relative;
}
nav a {
  display: block;
  
  text-decoration: none;
  color: #333;
  box-sizing:border-box; /*bride le bloc à la taille ordonnée, sans quoi il additionne les padding (marges internes), contours ect.. */
}
nav .sous-menu {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
nav li:hover .sous-menu { /*interieur du menu*/
  display: block;
  padding: 10px;
}
.sous-menu .active {
  display: block;
  padding: 10px;
}














.text-traits-dark { /*Trait de séparation (mise en page articles)*/
  color: rgba(80,110,150,1);
  font-weight: bold;
  text-shadow: 0 0 3px rgba(80,110,150,1), 0 0 10px rgba(80,110,150,1);
}
.g-centre { /*Centre le texte <p> horizontalement*/
  color: rgba(200,230,240,1);
  text-align: center;
}
.p-centre { /*Centre le texte <p> horizontalement et le rend petit (16 de base=top)*/
color: rgba(200,230,240,1);
  text-align: center;
  font-size: 0.75rem;
}
a { /*lien cliquables généraux */
 text-decoration:none;
 color: rgba(0,255,240,1);
 font-size: 17px;
}
a:hover { /*change les paramètres en survolant (liens cliquables généraux)*/
 color: rgba(230,0,130,1); 
 transition: 0.2s ease-in-out;
}


h2 { /*Les titres police Designer bien fat*/
 margin-bottom: 10px;
 font-family: 'Designer', serif;
 font-weight: 400;
}

/* début MISE EN PAGE GENERALE*/  
h4 {                                                            /*A SUPPRIMER ????*/
 margin-bottom: 20px;
 font-size: 1.7rem;
}





















.logo-madzona { /*Madzona what (entete-intro)*/
  width:150px;
  height:auto;
  margin: 0px 10px 20px 0px;
}
.sticker { /*Les sticker Onches*/
 width:70px;
 height:auto;
 border-radius: 10px;
 margin: 0px 5px 0px 5px;
}

.entete-intro { /*Aligne logo + petite bulle (gondoles introductions)*/
 display:flex;
 align-items:center;
}

.bulle-petite { /*Petit module fond violet (gondoles div/ réutilisables)*/
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
 text-decoration: none;
 color:white;
 font-weight:700;
 background-color:#B666D2;
 padding: 10px;
 border-radius: 5px;
 margin-bottom: 20px;
 
}
.bulle-petite:hover { /*annule tout pour balise <a>*/
  transition: all 0.2s ease-in-out;
  color: #ffffff;        /* annule rouge générale */
}

/*début liste des topics */
.bulle-grande { /*Grand modules Fond violet (réutilisable)*/
  display: flex;
  flex-wrap: wrap;                  /*permet au texte de passer à la ligne proprement */
  justify-content: center;          /* Centre le tout horizontalement */
  align-items: center;              /* Centre verticalement */
  text-align: center;              /* Aligne bien le texte au milieu */
  padding: 12px;                   /* Donne un peu d'air pour que le texte ne colle pas aux bords */
  text-decoration: none;            /* annule le style de la typo du body*/
  color: #ffffff;                  /* Force tout le texte à l'intérieur en blanc pur */
  background-color: rgba(50,1,77,0.75);
  box-shadow: 3px 4px 3px rgba(0, 0, 0, 0.2);
  border: 2px solid #943AC9;
  border-radius: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.bulle-grande:hover { /*annule tout pour balise <a>*/
  transition: all 0.2s ease-in-out;
  color: #ffffff;        /* annule rouge générale */
}
.module-liste { /*Bulles topics flottantes de la liste des topics (réutilisable)*/
 text-decoration: none; /* annule le style de la typo */
 color: #ffffff; /* Force tout le texte à l'intérieur en blanc pur */
 display: flex;
 align-items: center; /* Centre verticalement le texte et le sticker */
 justify-content: space-between; /* Pousse le texte à gauche, le sticker à droite */
 margin: 10px 5px 10px 5px;
 padding: 1px 15px 1px 15px;
 background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(140, 140, 255, 0.6));
 border-radius: 500px; /* Des angles légèrement arrondis pour chaque bloc */
 border: 3px solid rgba(255, 227, 250,0.50); 
 transition: all 0.2s ease; /* On change 'background-color' par 'all' pour animer aussi la bordure ! */
 height: 75px;
 box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.2);
 box-sizing:border-box; /*bride le bloc à la taille ordonnée, sans quoi il additionne les padding (marges internes), contours ect.. */
}
.module-liste:hover { /*annule tout et bloc devient jaune*/
  background-color: #FCFB05;
  transition: all 0.2s ease-in-out;
  color: #ffffff;        /* annule rouge générale */
  transform: scale(1.1);
  box-shadow: 10px 15px 20px rgba(0, 0, 0, 0.3);
}
/*Fin liste des topics */
/* fin MISE EN PAGE GENERALE*/