*, *::before, *::after {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box; /* secu anti debordement universelle + vire marge des navigateurs*/
}

@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;
}


/*ANIMATION KEYFRAMES*/
@keyframes tourner {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}
@keyframes tourner-et-grossir {
  from { transform: rotate(360deg) scale(1.2); }
  to { transform: rotate(0deg) scale(1.2); }
}
@keyframes shake { /* Definit animation */
  0% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-2px, 1px) rotate(-0.5deg); }
  40% { transform: translate(1px, -1px) rotate(0.5deg); }
  60% { transform: translate(-1px, 2px) rotate(0deg); }
  80% { transform: translate(2px, 1px) rotate(-0.5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

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

.no-scroll { /*pour figer le scroll à l'ouverture image via JS*/
  overflow: hidden;
}
/*________________________________________________________________________________________________________*/
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 { /*Parent de --> Header(100%)/main(100%)/Footer(100%) PARENTS */
  display:flex;
  flex-direction: column;
  align-items:center;
  width: 100%;
  gap: 0.94rem; /*sépare entre eux*/
}
/*-------*/
header { /* header 100% parent de --> barrière 100% --> contenue barriere(bar centre+droite),..*/
  background-color:; /*!!!!!!!!!rouge*/
  width: 100%;
  height: auto; 
}
main { /* main 100% parent de --> inside-main --> bar centre et bar droite..*/
  background-color:; /*!!!!!!!!!rouge*/
  width: 100%;
  height: auto;
}
footer { /* footer 100% parent de --> foot*/
  background-color:; /*!!!!!!!!!rouge*/
  width: 100%;
  height: auto;
}
/*________________________________________________________________________________________________________*/


/* parents bridés 1800px, contenient les blocs généraux*/ /*voir "responsive"*/
header #contenu-banniere-pc, #foot, footer #bloc-pub-footer,
main #inside-main { 
  width: 75%;
  max-width: 1800px; /*Sécurité écran géant*/
  margin: 0 auto; /*Garde centré axe vertical, sinon se colle à gauche par défaut*/
}


/*Contenu de header___________*/
#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*/
}
#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;
}
header img { /*Toutes les img du header, PC ou TEL*/
  width: 100%;
  height: auto;
}



/*Contenu MAIN --> inside main ____________________________________________________________________________________*/
#inside-main { /*Enfant de MAIN et Parent de bar-centre+Bar-droite*/
  display: flex;
  justify-content: space-between;
  background-color:;         /*jaune*/
  gap: 2.19rem
}

/*__________*/
#bar-centre { 
  background-color:;
  display: flex;
  flex-direction: column;
  gap:0.94rem;
  background-color: ;        /*Vert*/
  float: none;
  border-radius: 20px;
  width: auto;
  height: auto;
  box-sizing:border-box; /*bride le bloc à la taille ordonnée, sans quoi il additionne les padding (margesinternes), contours ect.. */
}
.introduction { /*Gère les modules "introduction" à l'interieur de la bar centrale général*/
  padding: 10px 15px 15px 15px;
  gap:0.94rem;
  border-radius:15px;
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.5);
  position: relative; /* Indispensable pour caler la bordure */
  background: rgba(40, 10, 70, 0.5); /* Ton fond violet transparent à 0.5 */
  z-index: 1; /* Force le texte à rester au-dessus */
}
.introduction::before { /*imite box, fais dégradé en dessous et masque la partie sous la box*/
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0; /* Épouse parfaitement les bords */
  border-radius: 15px; /*Même arrondi que la box*/
  padding: 3px; /*épaisseur bordure*/
  /* dégradé*/
  background: linear-gradient(to right, #cc80ee, #03e7cf); 
  /* Le masque: vide l'intérieur du dégradé pour ne laisser que le contour */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1; /* Se cache juste derrière le texte pour ne pas gêner */
  pointer-events: none; /* Sécurité anti-clic */
}




/*____________*/
.mascotte {
 /*c'est le coussin de .introduction*/
  top: 0px; left: 0px;
  width: 6.25rem;
  height: auto;
  margin-left: 5px;
  float: left;
}
.illustration-epingle {
  float: right;
  width: auto;
  height: 5rem;
}
.introduction p { /*Texte standard dans div introduction*/
  background-color:;
  width: 90%;
  margin: 0 auto;
}
.g-centre { /*Centre le texte <p> horizontalement*/
  background-color:;
  color: rgba(200,230,240,1);
  text-align: center;
  width: 80%;
  margin: 0 auto;
  margin-top: 5%;
}
.g-centre[name="no-margin"] {
  margin-top: 0px;
}

/*-----*/
@media (max-width: 1024px) { /**/
  .g-centre, .introduction p {
    width: 100%;
  }
}
/*-----*/

h2 { /*Les titres police Designer introduction*/
 overflow: hidden;
 background-color:; /*vert*/
 font-family: 'Designer', serif;
 font-weight: 400;
 padding-top: 40px;
 padding-left: 15px;
}

@media (max-width: 480px) {
#inside-main .introduction .titre-introduction_pour_TAB-TEL {
  float: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  }
}
/*Citations automatiques------------*/
#box-citation_et-bouton { /*section + logo refresh en dehors*/
  background: linear-gradient(to right, rgba(204,128,238,1), rgba(3,231,207,1));
  display: flex;
  justify-content: space-between;
  align-items: center;
  height:auto;
  width: 100%;
  
  padding: 0px 30px 0px 30px;

  border-radius: 15px;
  gap:25px;
}
#box-citation_et-bouton section { 
  display: flex;
  align-items: center; /* Aligné sur le texte tant que c'est sur une ligne */
  font-style: italic;
}
#box-citation_et-bouton #bouton-refresh-citation {
  width: 3.25rem;
  height: 3.25rem;
}

/*ANIMATION BOUTON */
#bouton-refresh-citation:hover {
  transition: transform 0.5s ease-in-out;
  animation: tourner-et-grossir 2s linear infinite;
}
#bouton-refresh-citation {
  animation: tourner 20s linear infinite;
  transition: all 0.5s ease-in-out;
}
/*_____*/
















@media (max-width: 480px){
  #box-citation_et-bouton {
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top:5px;
    padding-bottom: 5px;
  }
  #box-citation_et-bouton section {
    box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: rgba(40,10,70,0.3);
    padding-left: 5px;
  }  
  
}
.sticker, #sticker-random-citation { /*Les sticker Onches*/
 width:auto;
 height:4rem;
 border-radius: 10px;
 margin: 0px 5px 0px 5px;
 box-sizing: border-box;
}
.sticker[name="animation"]{
  animation: shake 1s infinite linear; /*Applique keyframes*/
}

/*----------------*/

















/*__Bar droite _________________________________________________________________________________*/

/*Si je veux placer coussin sur canapé, je relative canapé et absolute le coussin --- Le salon= modules-bar-droite/ le canapé=box-module / le coussin= h4*/

#inside-main #bar-droite {
  background-color:;
  display: flex;
  flex-direction: column;
  margin-bottom: 0px;
  width: 100%;
  height: auto;
  border-radius: 10px;
  gap: 30px;
}
/*début dégradé bas*/
#contour_faux-fond {
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, rgba(204,128,230,1), rgba(3,231,207,1));
  border-radius: 15px;
  padding: 3px;
/* LE MASQUE MAGIQUE : Il applique un fondu transparent vers le haut sur TOUTE la div */
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 90%);
          mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 90%);
  
}
#interieur_faux-fond { 
  width: 100%;
  height: 100%;
  padding: 0px 15px 15px 15px;
  border-radius:15px;
  background: linear-gradient(to top, rgba(40,10,70,1), rgba(40,10,70,0));
}
/*FIN dégradé bas*/

.modules-bar-droite#decoration-bottom_bar-droite {
  height: 100%;
  margin-top: auto;
}
.modules-bar-droite { /*Boite invisible (titre + boite led)*/
  background-color:; /*bleu*/
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}
.titres-modules-bar-droite { /*titre et son fond*/
  background-color: rgba(40,10,70,1);
  position:absolute; /*le coussin de la box*/
  z-index: 10;
  font-family: "Designer";
  margin-bottom: 0px;
  padding: 0px 5px 0px 5px;
  border-radius: 15px;
}
.box-inside-modules-bar-droite { /*boite LED*/
  background-color: rgba(40,10,70,1); /*rouge pale*/
  box-shadow: 3px -3px 5px rgba(204, 128, 238, 1),  -3px 3px 5px rgba(3, 231, 207, 1); /*rose bleu*/
  position: relative; /*la canapé du titre*/
  margin-top:1rem;
  padding: 15px 5px 5px 5px;
  box-sizing: border-box;
  display: flex;
  flex-direction:column;
  align-items: center;
  text-align: center;
  width: 100%;
  border-radius: 15px;
}
.modules-bar-droite .box-inside-modules-bar-droite iframe { /*repondeur*/
 width: 100%;
 height: 28.125rem;
 border-radius: 15px;
}
.modules-bar-droite .titres-modules-bar-droite h4 {
  font-size: 1.25rem;
}
/**/
/*PUBLICITAY*/
.modules-bar-droite#publicite_verticale { /*Class et ID collés= sur la même balise (comme un <class="ici" name="ici">)*/
  display: flex;
  gap: 20px;
}
.modules-bar-droite#publicite_verticale img {
  width: 100%;
  border-radius: 15px;
}
/*-------*/

h4 {  /*titres modules bar droites*/                                              
 font-size: 1.7rem;
}
#mon-compteur a, #mon-compteur img {
  background-color:red;
  display: block; /*supprime les marges chelous du compteur*/
  margin: 10px 0px 10px 0px;
  box-shadow: 2.5px -2.5px 7.5px rgba(204, 128, 238, 1),  -2.5px 2.5px 7.5px rgba(3, 231, 207, 1); /*rose bleu*/
}
/*_______________________________________________________________________*/
/*mail center et bar droite*/
.mail-contact {
  background-color:; /*Jaune*/
  width: 16.875rem;
  height: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
}
.mail-contact img {
  width: 7.5rem;
  height: auto;
  
}
.mail-contact img:hover {
  animation: shake 0.8s linear infinite;
}

.mail-contact p, .mail-contact a {
  text-align: center;
}
.introduction[name="widget"] {
  display: none;
}
@media (max-width: 1024px) { /*div widget*/
.introduction[name="widget"] {
  display: block;
  }
}
#widgets_centraux {
  background-color:;
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /*"retour à la ligne" si côte à côte blindé*/
  margin-top: 10px;
  padding: 5px;
  height: auto;
  gap:15px;
  
  width: 100%;
  margin: 0 auto;
}
.box_led_widget_centre-LED {
 background-color:;
 display: flex;
 flex-direction: column;
 align-items: center;
 width: auto;
 padding: 5px;
 
}
.box_led_widget_centre-LED .titre {
  background-color: rgba(40,10,70,1);
  font-family: Designer;
  display: inline-block;
  margin-bottom: -40px;
  z-index: 10;
  padding: 5px;
 
}
.box_led_widget_centre-LED .LED{
  background-color: rgba(40,10,70,1);
  box-shadow: 3px -3px 5px rgba(204, 128, 238, 1),  -3px 3px 5px rgba(3, 231, 207, 1); /*rose bleu*/
  text-align: center;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:1.875rem;
  margin-top:20px;
  padding: 15px 5px 5px 5px;
}

.LED #mon-compteur {
  background-color:; /*vert*/
  display: inline;
  margin-left:40px;
  margin-right: 40px;
}
/*_____________________________________________________*/




/*Contenu footer --> inside main________________________*/
#foot {
  background-color: rgba(40,10,70,0.5);
  border-radius: 15px;
  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..*/
  text-align: center;
  margin-top: 15px;
  position: relative; /* Indispensable pour caler la bordure */
  z-index: 1; /* Force le texte à rester au-dessus */  
  
}
#foot::before { /*imite box, fais dégradé en dessous et masque la partie sous la box (contours dégradé)*/
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0; /* Épouse parfaitement les bords */
  border-radius: 15px; /*Même arrondi que la box*/
  padding: 3px; /*épaisseur bordure*/
  /* dégradé*/
  background: linear-gradient(to right, #cc80ee, #03e7cf); 
  /* Le masque: vide l'intérieur du dégradé pour ne laisser que le contour */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1; /* Se cache juste derrière le texte pour ne pas gêner */
  pointer-events: none; /* Sécurité anti-clic */
}
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: 0.93rem;
  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.. */
}

#bloc-pub-footer {
  background-color: yellow;
  display: flex;
  width: 100%;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
}
@media (max-width: 480px) {
  #bloc-pub-footer {
    display: none;
  }
}
/*_____________________________________________________*/







/* RESPONSIVE ___________________________*/

      /*planqués de base (pc)*/
.petit-ecran, #navigation_tablette, .introduction #bouton-v1-tablette_tel,
#bouton-div-pliable1 {
  display: none;
}



/*__________*/
@media (max-width:1200px) {
  header #contenu-banniere-pc, #foot, footer #bloc-pub-footer,
  main #inside-main { 
  width: 87%;
  max-width: 1800px; /*Sécurité écran géant*/
  margin: 0 auto; /*Garde centré axe vertical, sinon se colle à gauche par défaut*/
}
  
}
@media (max-width: 1024px) {
  
header #contenu-banniere-pc, #foot, footer #bloc-pub-footer,
main #inside-main { 
  width: 95%;
  max-width: 1800px; /*Sécurité écran géant*/
  margin: 0 auto; /*Garde centré axe vertical, sinon se colle à gauche par défaut*/
}
  
#foot{
margin-top: 15px;
}

main #inside-main #bar-droite {
        display: none;
    }
    
#bar-centre {
  width: 100%;
}
    
#navigation_tablette { /*bah logo bas header*/
  background-color: rgba(0,255,240,1);
  display: flex;
  justify-content: space-between;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 10px;
  font-family: Designer;
  color: rgba(40,10,70,1);
}
#navigation_tablette a {
 color: rgba(40,10,70,1);
}
#navigation_tablette a:hover {
 color: rgba(230,0,130,1);
}

.introduction #bouton-v1-tablette_tel, #bouton-div-pliable1 { /*Bouton screen div*/
  display: block;
}
}

/*-----------------------------*/
@media (max-width: 480px) { /*Officie dès le format atteint)*/
header #contenu-banniere-pc, #foot, footer #bloc-pub-footer,
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*/
}


.grand-ecran, #navigation_tablette, #inside-main .introduction .mascotte {
    display: none; /* mode: cacher la div */
  }
.petit-ecran {
    display: flex; /* mode: afficher la div */
    flex-direction: column;
    align-items: center;
  }

body { /*le fond scroll avec le pouce pour éviter les bugs*/
  background-attachment: scroll; 
    }
}




/*------*/
.petit-ecran #visiter-site-tel {
  background-color: rgba(0,255,240,1); /*turquoise*/
  font-family: Designer;
  display: flex;
  justify-content: center;
  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%;;
}
.petit-ecran #visiter-site-tel a {
  text-decoration: none;
  color: rgba(40,10,70,1);
}

/* Début Menu déroulant header JAVASCRIPT (mobile)*/
nav li {
  display: inline-block;
  position: relative;
  z-index: 5;
}
nav .sous-menu li {
  display: block;
  width: 100%;
}
nav li .sous-menu a {
  background-color: rgba(200,230,240,1); /*bleu clair pâle*/
  display: flex;
  width: 100%; 
  border-radius: 10px;
  padding: 8px 5px; 
}
nav a {
  display: block;
  text-decoration: none;
  color: #333;
  box-sizing: border-box;
}
nav .sous-menu {
  display: none;
  position: absolute;
  background-color: rgba(40,10,70,1);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border: 2px solid rgba(230,0,130,1);
  list-style: none;
  padding: 0px;
  margin: 0;
  min-width: 150px; 
}
nav li:hover .sous-menu { 
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
}
.sous-menu .active {
  display: block;
}




/*DEBUT IMAGES _______________________________________________________________*/
/*PORTFOLIO*/
.introduction .bulle-grande[name="PORTFOLIO"] { /*corrige et annule .bulle-grande existante*/
  background-color:; /*vert*/
  background:transparent;
  border: none;
  box-shadow: none;
  display: flex;
  justify-content: space-between;
  gap:15px
}
.bulle-grande section {
  background-color: rgba(40,10,70,0.5); /*Violet foncé*/
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,1);
  box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;
  padding:15px;
}
#SDO_2026, #pacman, #fanart {
  width: 90%;
  margin-top:3px;
  box-shadow: 3px 3px 5px rgba(250,240,255,0.5);
}
/**/
@media (max-width: 1024px) {
.introduction span.p-centre { /*(cliquez pour ouvrire qui disparait)*/
  display: none;
}
.introduction .bulle-grande[name="PORTFOLIO"] {
  display: flex;
  flex-direction: column;
  padding: 0px;
  }
.bulle-grande section {
  width: 100%;
}
}
/**/

/*SCREEN DU JEU VIDEO*/
.introduction .bulle-grande#gallerie_screens_JV img{
  max-width: 300px;
  height: auto;
}
.introduction .bulle-grande#gallerie_screens_JV {
  display: flex;
  flex-direction: row;
}
/**/
/*BOITE IMG (Overlay cliquable, FULL screen (tout en bas du HTML)*/
.boite_a_images-fullscreen {
  display: none;
  position: fixed;
  background-color: rgba(40,10,70,0.6);
  width: 100vw;
  height: 100vh;
  top:0; left: 0;
  z-index: 20; /*les titres des modules-bar-droite sont à 10*/
  justify-content: center;
  align-items: center;
}
.boite_a_images-fullscreen.active { /*le flex quand active pour centrer image*/
  display: flex;
}
.boite_a_images-fullscreen img{
  display: none;
  max-height: 90vh;
  max-width: 90vw;
  object-fit: contain;
  box-shadow: 8px -8px 15px rgba(204, 128, 238, 1),  -8px 8px 15px rgba(3, 231, 207, 1); /*rose bleu*/
}



/* Début VIDEO YOUTUBE SUR DIV________________________________________________*/

.colonne-playlist { /*parents qui gère l'emplacement des playlist*/
  
  box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
  
  padding: 0px 0px 10px 0px;
  display: flex;
  flex-direction: row; /*aligne sur une ligne horizontale*/
  margin-bottom: 1.25rem;
  margin-top:1.2rem; 
  border-radius: 15px;
}

.introduction .colonne-playlist .video .masque-invisible-redirection { /*remplce logo natif de l'iframe qui bug pour redirection sur playlist*/
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;  /* Largeur de la zone du logo YouTube */
  height: 3.75rem; /* Hauteur de la zone du barre de contrôle */
  background: transparent; /* Totalement invisible */
  z-index: 10;  /* Passe au-dessus de l'iframe */
  cursor: pointer;
}
.introduction .colonne-playlist .video { /*Bloc qui contient la vidéo*/
    background-color: green;
    position: relative;
    margin: 0 auto; /*pour centrer (justify et aligne non car no flex)*/
    margin-top:3.125rem; /*pousse le texte pour la pastille*/
    width: 33%;
    height: 0;              /*width gère la taille, padding-bottom feint le ratio 16:9*/ 
    padding-bottom: 25%;
    box-shadow: 1.5px -1.5px 5px rgba(204, 128, 238, 1),  -1.5px 1.5px 5px rgba(3, 231, 207, 1); /*rose bleu*/
    margin-bottom: 10px; /*eloigne bas div pour dégradé*/
    border-radius: 15px;
}
.introduction .video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 15px;
}

@media (max-width: 1200px) {
  .colonne-playlist {
    display: flex;
    flex-direction: column;
  }
  .introduction .colonne-playlist .video {
    width: 90%;
    height: 0;              /*width gère la taille, padding-bottom feint le ratio 16:9*/ 
    padding-bottom: 60%;
    box-shadow: 8px -8px 15px rgba(204, 128, 238, 1),  -8px 8px 15px rgba(3, 231, 207, 1); /*rose bleu*/
  }
}

/**/
.introduction .video .pastille-topleft-video { 
 position: absolute; /*2e coussin du conteneur video + qui dit absolute dis sort du flux normal (le texte l'ignore)*/
 top:0; left: 0;
 transform: translateY(-110%); /*sur-élève*/
 text-align: center;
 text-decoration: none;
 color: rgba(250,240,255,1); /*faux blanc*/
 font-weight:700;
 background-color:rgba(200, 0, 255,1); /*violet base*/
 padding: 10px;
 border-radius: 5px;
 margin: 15px 0px 0px 0px;
 width: fit-content;
 box-sizing: border-box;
}
.pastille-topleft-video:hover { /*annule tout pour balise <a>*/
  transition: all 0.2s ease-in-out;
  color: #ffffff;        /* annule rouge générale */
}

/*________________________________________________________________________________________*/






.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);
  word-break: break-word; /* Force les longs mots ou URL à aller à la ligne */
}

.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: 1.06rem;
}
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;
}






/*entete intro V1 */
.logo-madzona { /*Madzona what (CADUQUE*/
  width:9.375rem;
  height:auto;
  margin: 0px 10px 20px 0px;
}
#bouton-v1_pc, #bouton-v1-tablette_tel {
  width: 150px;
  transition: all 0.2s ease-in-out;
}
#bouton-v1_pc:hover, #bouton-v1-tablette_tel:hover {
  animation: shake 0.8s linear infinite;
}
.entete-intro { /*Aligne logo + petite bulle (gondoles introductions)*/
 display:flex;
 align-items:center;
}

.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: rgba(200,230,240,1);                  /* Force tout le texte à l'intérieur en blanc pur */
  box-shadow: 3px 4px 3px rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.bulle-grande[name="separation-degrade"] {
 background-image: linear-gradient(to right, rgba(204, 128, 238, 0.65), rgba(3, 231, 207, 0.65)); /*rose bleu*/
 height: 5px;
 width: 100%;
}
.bulle-grande[name="separation-div-degrade"] {
  background-image: linear-gradient(to right, rgba(204, 128, 238, 1), rgba(3, 231, 207, 1)); /*rose bleu*/
 height: 3.25rem;
 width: 100%;
}
/*---------*/

.module-liste { /*Bulles topics flottantes de la liste des topics (réutilisable)*/
  background-image: url("/logo/assets/bouton-rose.png");
  background-size: 21.875rem auto; /*EL BOUTON en lui même*/
  background-position:center;
  background-repeat: no-repeat;
  text-decoration: none; /* annule le style de la typo */
  color: #ffffff; /* Force tout le texte à l'intérieur en blanc pur */
  display: flex;
  justify-content: center;
  align-items: center;
  padding:2.5rem;
  width: 25rem;
  transition: all 0.2s ease-in-out;
}
.module-liste_2 { /*Bulles topics flottantes de la liste des topics (réutilisable)*/
  background-image: url("/logo/assets/bouton-turquoise.png");
  background-size: 21.875rem auto;
  background-position:center;
  background-repeat: no-repeat;
  text-decoration: none; /* annule le style de la typo */
  color: #ffffff; /* Force tout le texte à l'intérieur en blanc pur */
  display: flex;
  justify-content: center;
  align-items: center;
  padding:2.5rem;
  width: 25rem;
  transition: all 0.2s ease-in-out;
}
.module-liste:hover, .module-liste_2:hover { /*annule tout et bloc devient jaune*/
  transition: all 0.2s ease-in-out;
  color: #ffffff;        /* annule rouge générale */
  transform: scale(1.1);
}

@media (max-width: 480px) {
  .module-liste_2, .module-liste {
    background-size: 100% auto;
  } 
}




/*Bouton back to top*/
#scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  width: 90px;
  height: 90px;
  background-color: #03e7cf;
  color: #280a46;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);

  opacity: 0;                /* Invisible par défaut */
  pointer-events: none;      /* Impossible de cliquer dessus quand il est invisible */
  transition: all 0.3s ease; /* Animation fluide pour l'apparition/disparition */
}

/* La classe que le JavaScript va ajouter pour afficher le bouton */
#scroll-to-top.visible {
  opacity: 0.8;
  pointer-events: auto; /* Redevient cliquable */
}

#scroll-to-top:hover {
  background-color: #cc80ee;
  transform: scale(1.1);
}