/* --------#RECUPERER landscape-------- */
/* --------#COMMUN TOUT LE SITE-------- */

/* defini le bold */
strong {
  font-weight: 650;
}

/* ajoute espace en bas de page */
body::after {
  content: "";
  display: block;
  height: 8em;
}


/* FOND */
@media (orientation: portrait) {
  #backgroundVideo {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
    opacity: 0.9;
  }
}


/* BLOQUE LA VIDEO en paysage */
.landscape-video {
  display: none;
}
.portrait-video {
  display: block;
}



.h1-commun {
  color: #1E2A38;
  font-size: 1.4em;
  font-weight: normal;
  text-transform: none;
  margin-top: -1em;
  margin-bottom: 1em;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.5);
  display: inline-block; /* Pour que le fond ne s'étende que sur la largeur du texte */
  padding: 0.3em 0.5em 0.3em; /* Padding de 0.3em sur les côtés et en haut/bas */
  border-radius: 0.3em; /* Bords arrondis */
  border: 0.1em solid #1E2A38; /* Contour avec la couleur spécifiée */
}

.h1-commun-avec-fond {
  display: table; /* Pour que l'élément soit de type bloc mais s'ajuste à la largeur du contenu */
  margin: 0 auto 1em auto; 
  color: #1E2A38;
  font-size: 1.2em!important;
  font-weight: normal;
  text-transform: none;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 0.5em 1em !important;
  border-radius: 0.6em;
  border: 0.1em solid #1E2A38;
  margin-bottom: 1em!important;
}

/* CONTENU PARAGRAPHE */
.H2-commun {
  color:#1E2A38;
  font-size: 1.4em;
  font-weight: normal;
  text-transform: none;
  margin-top: 4em;
  margin-bottom: 0.5em;
  text-align: center;
}

/* CONTENEUR TEXTE CENTRAL */
.content-overlay {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 35em; /* Définissez ici la largeur maximale souhaitée */
  margin: 0 auto;   /* Centre le conteneur horizontalement */
  padding: 2em;
  color: #1E2A38;
  margin-bottom: 5em;
  line-height: 1.3em;
  margin-top: 0em;
}



/* CONTENU PARAGRAPHE */
.contenu_paragraphe {
  text-align: center; /* Centrer le texte */
  font-family: "Gill Sans", sans-serif;
  font-size: 1em;
  line-height: 0.7;
  color: #1E2A38;
  margin: 0.5em 0;
  margin-left: auto;
  margin-right: auto;
}





  /* BOUTON COMMUN */
  .button_commun {
    margin-top: 0em;
    margin-bottom: 0.5em;
    display: inline-block;
    transition: all 0.2s ease-in;
    position: relative;
    overflow: hidden;
    z-index: 1;
    color: #1E2A38;
    padding: 0.5em 0.5em;
    cursor: pointer;
    font-size: 0.9em;
    border-radius: 0.5em;
    background: #F5F5F7;
    border: 0.2em solid #1E2A38;
  }
  
  .button_commun:active {
    color: #666;
    box-shadow: inset 0.25em 0.25em 0.75em #c5c5c5, inset -0.25em -0.25em 0.75em #F5F5F7;
  }
  
  .button_commun:before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scaleY(1) scaleX(1.25);
    top: 100%;
    width: 140%;
    height: 180%;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
  }
  
  .button_commun:after {
    content: "";
    position: absolute;
    left: 55%;
    transform: translateX(-50%) scaleY(1) scaleX(1.45);
    top: 180%;
    width: 160%;
    height: 190%;
    color: #F5F5F7;
    background-color: #1E2A38;
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
  }
  
  .button_commun:hover {
    color: #F5F5F7;
    border: 0.0625em solid #1E2A38;
  }
  
  .button_commun:hover:before {
    top: -35%;
    background-color: #1E2A38;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
  }
  
  .button_commun:hover:after {
    top: -45%;
    background-color: #1E2A38;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
  }


  /* INPUT COMMUN */
  .input_commun {
    width: 15em;
    border-radius: 0.625em;
    outline: 0.125em solid #1E2A38;
    border: 0;
    font-family: "Gill Sans", sans-serif;
    background-color: #e2e2e2;
    outline-offset: 0.125em;
    padding: 0.5em 1rem;
    transition: 0.25s;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    
  }
  .input_commun {
    outline-offset: 0.3125em;
    background-color: #F5F5F7;
  }


/* PREVIEW COMMUN */
.preview_commun {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: none; /* affichée via JS en mode flex */
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.preview-content {
  background: #F5F5F7;
  padding: 20px;
  border-radius: 4px;
  width: 80%;
  max-width: 600px;
  position: relative;
  
}

/* Pour espacer les lignes du texte de la preview */
.preview-content p {
  line-height: 1.6;
  margin: 10px 0;
  
}
/* croix de la   preview */
.close-button {
  cursor: pointer;
}

.preview_commun .contenu_paragraphe {
  line-height: 1.8; /* ou toute autre valeur souhaitée */
}



.lecteur-video-commun {
  width: 80%;
  max-width: 800px;
  margin: 2em auto;
  display: block;
  border: 2px solid #ccc;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  margin-bottom: -1em;
}






/* ====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================*/

/* --------#BASE-------- */



main {
  padding: 1.25em;
  flex: 1;
}

body {
  margin: 0;
  font-family: "Gill Sans", sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


/* HEADER */
header {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5em 1em;
  position: relative;
}

header img {
  max-height: 15em;
  width: auto;
}

/* LOGO DE GAUCHE  */
.logo {
  width: 13em; /* Conserver la largeur souhaitée */
  height: 13em; /* Conserver la hauteur souhaitée */
  margin-top: 1em;
  margin-left: 3em;
  background-image: url("../img/logo_clip4zik_5.png"); /* Nouvelle image par défaut */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-image 0.3s ease; /* Pour une transition douce lors du survol */
}

/* Effet de survol */
.logo:hover {
  background-image: url("../img/logo_clip4zik_3.png"); /* Image au survol */
}

.header-buttons {
  position: absolute;
  top: 1em;
  right: 1em;
  display: flex;
  gap: 0.9375em; 
}

.header-middle {
  flex: 1; /* Occupe l'espace restant */
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center; /* Centre les boutons dans cette zone */
  gap: 1em; /* Espace entre les boutons */
  margin: 0; /* Supprimez les marges supplémentaires (par ex. margin-left: 14em) */
}

/* Zone gauche et droite avec une largeur fixe identique */
.header-left, 
.header-right {
  flex: 0 0 20vw; /* Par exemple, 15em ; ajustez selon vos besoins */
}
  
/* Conteneur gauche : logo */
.header-left {
  display: flex;
  align-items: center;
}
















/* SUPER BOUTONS */

/* Style général des boutons dans la nav */
.header-middle button {
  font-size: 1em!important;
  cursor: pointer;
  padding: 0.5em 1em;
  white-space: nowrap; /* Empêche le texte de se couper sur plusieurs lignes */
  right: 2em;
}


.super_button_4 {
  margin-left: 0em; /* ou la valeur qui vous convient */
}



.super_button_1,
.super_button_2,
.super_button_3,
.super_button_4 {
  font-size: 0.9rem!important;
  font-family: "Gill Sans", sans-serif !important;
  color: #F5F5F7; /* Couleur du texte */
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 1em 0em 1em 1em;
  background-color: transparent;
  cursor: pointer;
  box-shadow: 0.25em 0.375em 0.5em rgba(0, 0, 0, 0.3); 
  border: 0.25em solid;
  border-radius: 0.9375em; 
  position: relative;
  overflow: visible !important;
  z-index: 100;
  transition: box-shadow 250ms, transform 250ms, filter 50ms;
  white-space: nowrap; /* Empêche le texte de se couper sur plusieurs lignes */
}

/* Hover state */
.super_button_1:hover,
.super_button_2:hover,
.super_button_3:hover,
.super_button_4:hover {
  background-color: #575a5e;
  color: #F5F5F7; /* Couleur du texte */
  transform: translate(0.125em, 0.125em); 
  box-shadow: 0.25em 0.375em 0.2em rgba(0, 0, 0, 0.6); 
}

/* Active state */
.super_button_1:active,
.super_button_2:active,
.super_button_3:active,
.super_button_4:active {
  filter: saturate(0.75);
}

/* Pseudo-élément pour l'effet de survol */
.super_button_1::after,
.super_button_2::after,
.super_button_3::after,
.super_button_4::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #8E8E93;
  z-index: -1;
  transform: translateX(-100%);
  transition: transform 250ms;
}

.super_button_1:hover::after,
.super_button_2:hover::after,
.super_button_3:hover::after,
.super_button_4:hover::after {
  transform: translateX(0);
}

/* Optionnel : Si vous avez une structure interne avec .bgContainer et .arrowContainer */
/* Exemple pour .bgContainer */
.super_button_1 .bgContainer,
.super_button_2 .bgContainer,
.super_button_3 .bgContainer,
.super_button_4 .bgContainer {
  position: relative;
  display: flex;
  justify-content: start;
  align-items: center;
  overflow: visible !important;
  max-width: 35%; /* Ajustez si nécessaire */
  font-size: 2em;
  font-weight: 600;
}

.super_button_1 .bgContainer > span,
.super_button_2 .bgContainer > span,
.super_button_3 .bgContainer > span,
.super_button_4 .bgContainer > span {
  position: relative;
  transform: translateX(-100%);
  transition: all 250ms;
}

.super_button_1:hover .bgContainer > span,
.super_button_2:hover .bgContainer > span,
.super_button_3:hover .bgContainer > span,
.super_button_4:hover .bgContainer > span {
  transform: translateX(0);
}

/* Et pour .arrowContainer */
.super_button_1 .arrowContainer,
.super_button_2 .arrowContainer,
.super_button_3 .arrowContainer,
.super_button_4 .arrowContainer {
  padding: 1em;
  margin-inline-end: 1em;
  border: 0.25em solid;
  border-radius: 50%;
  background-color: transparent;
  position: relative;
  overflow: visible !important;
  transition: transform 250ms, background-color 250ms;
  z-index: 100;
}

.super_button_1 .arrowContainer::after,
.super_button_2 .arrowContainer::after,
.super_button_3 .arrowContainer::after,
.super_button_4 .arrowContainer::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  transform: translateX(-100%);
  z-index: -1;
  transition: transform 250ms ease-in-out;
}

.super_button_1:hover .arrowContainer::after,
.super_button_2:hover .arrowContainer::after,
.super_button_3:hover .arrowContainer::after,
.super_button_4:hover .arrowContainer::after {
  transform: translateX(0);
}

.super_button_1:hover .arrowContainer,
.super_button_2:hover .arrowContainer,
.super_button_3:hover .arrowContainer,
.super_button_4:hover .arrowContainer {
  transform: translateX(0.3125em); 
}

.super_button_1:active .arrowContainer,
.super_button_2:active .arrowContainer,
.super_button_3:active .arrowContainer,
.super_button_4:active .arrowContainer {
  transform: translateX(0.5em); 
}

.super_button_1 .arrowContainer svg,
.super_button_2 .arrowContainer svg,
.super_button_3 .arrowContainer svg,
.super_button_4 .arrowContainer svg {
  vertical-align: middle;
}

/* AFFICHAGE AU SURVOL SUPERS BOUTONS*/

.survol_button_menu {
  font-family: "Gill Sans", sans-serif !important;
  position: relative; /* Permet de positionner le tooltip par rapport au bouton */
  overflow: visible !important; /* Autorise le tooltip à dépasser */
}

.survol_button_menu[data-tooltip]::after {
  content: attr(data-tooltip);
  display: inline-block;           /* La largeur s'ajuste au contenu */
  position: absolute;
  left: 50%;
  top: -110%;
  transform: translateX(-50%);
  background-color: transparent;
  color: #1E2A38;
  padding: 0.5em 0.75em;
  border-radius: 0.3125em;
  white-space: nowrap;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease 0.5s, visibility 0s linear;
}

/* Affichage du tooltip au survol */
.survol_button_menu:hover[data-tooltip]::after {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Styles individuels pour personnaliser chaque tooltip */
/* Pour le bouton "Clip vidéo" */
.tooltip_clip[data-tooltip]::after {
  left: -18%;
  top: -130%;  
  background-color: transparent; 
  color: #1E2A38;
}

/* Pour le bouton "Flux vidéo" */
.tooltip_flux[data-tooltip]::after {
  left: -20%;
  top: 135%;  
  background-color: transparent; 
  color: #1E2A38;
}

/* Pour le bouton "Visionner" */
.tooltip_visionner[data-tooltip]::after {
  left: 0%;
  top: -130%;  
  background-color: transparent; 
  color: #1E2A38;
}

/* Pour le bouton "En attendant" */
.tooltip_enattendant[data-tooltip]::after {
  background-color: #D0D0D0;
  color: #222222;
}












/* PARTIE DROITE GENERALE*/
.header-right {
  position: relative;
  display: flex;
  justify-content: center; /* Centre horizontalement le contenu */
  align-items: center;   /* Aligne le contenu en bas */
  height: 100%;            /* (Optionnel, selon la hauteur souhaitée de l'en-tête) */
}

/*CONTENEUR 4 ICONES !!! (connecté avec, compte-menu, mail, drapeaux)*/
.header-right-container {
  position: absolute;
  bottom: 1em;          /* Positionné en bas de l’en-tête */
  right: 0;           /* Collé à droite */
  display: flex;
  align-items: center;
}
/*Texte “connecté avec” */
#cc {
  font-size: 1.1em;   /* passe de 0.9em à 0.8em */
}


.language-selector {
  display: flex;
  gap: 0.5em;
  align-items: center;
}

/*LES 2 DRAPEAUX seuls*/
#lang-fr,
#lang-en {
  position: relative;
  top: 4em; /* Déplace les drapeaux de 10px vers le bas */
  left: -6em;
  cursor: pointer;
}

/*MAIL seul*/
#contact-icon {
  position: relative;
  left: -6em; /* Décale de 10px vers la droite */
  top: 4em;
  cursor: pointer;
}

#contact-icon:hover {
  content: url("../img/envoyer-un-mail-gris.png");
}








/* MENU DROITE si non connecté  */

/* Conteneur SE CONNECTER et S'INSCRIRE */
.header-right-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  align-items: center;
  justify-content: center;
  position: relative;
  left: -3em; /* décale vers la gauche -8 */
  top: -1em;
}


/* Style de base pour les boutons avec les classes se_connecter_base et inscription_base */
.se_connecter_base,
.contact_button-on-base,
.inscription_base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: "Gill Sans", sans-serif;
  font-size: 1rem;
  color: #F5F5F7;
  background: transparent;
  border: none;
  outline: none;
  padding: 0rem;
  transition: all 0.2s;
}

/* Pseudo-élément pour le trait à gauche */
.se_connecter_base::before,
.contact_button-on-base::before,
.inscription_base::before {
  content: "";
  position: absolute;
  background-color: #1E2A38;
  height: 0.1em;
  width: 0;
  top: 50%;
  right: calc(100% + 0.5em);
  transform: translateY(-50%);
  transition: width 0.5s ease;
}

/* Pseudo-élément pour le trait à droite */
.se_connecter_base::after,
.contact_button-on-base::after,
.inscription_base::after {
  content: "";
  position: absolute;
  background-color: #1E2A38;
  height: 0.1em;
  width: 0;
  top: 50%;
  left: calc(100% + 0.5em);
  transform: translateY(-50%);
  transition: width 0.5s ease;
}

/* Au survol, les traits s'étendent à 2em */
.se_connecter_base:hover::before,
.contact_button-on-base:hover::before,
.inscription_base:hover::before {
  width: 2em;
}

.se_connecter_base:hover::after,
.contact_button-on-base:hover::after,
.inscription_base:hover::after {
  width: 2em;
}











/* PARTIE DROITE SI CONNECTE */

/* "CONNECTE AVEC : MAIL" SI CONNECTE AVEC (mail) */
.info_connexion_entete {
  font-family: "Gill Sans", sans-serif;
  font-size: 0.9em;
  color: #F5F5F7;
  margin: 0.5em -2em;
  text-align: left;
  font-weight: 300;
}

/* CONTENEUR ICONE PROFIL */
.compte-menu {
  position: relative;
  top: 4em;
  right: 1.5em;
  margin: 0;
  z-index: 1000;
  cursor: pointer;
}

/* SOUS CONTENEUR PROFIL MON COMPTE */
.compte-trigger {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

/* MENU TOMBANT*/
.compte-dropdown {
  position: absolute;
  top: 100%;
  left: -4em;
  margin-top: 0.5em;
  opacity: 0;
  visibility: hidden;
  background: #708090;
  padding: 0.5em;
  box-shadow: 0 0.125em 0.5em rgba(0, 0, 0, 0.2);
  z-index: 10;
  width: 9em;
  border-radius: 0.625em;
  transition: opacity 0.2s ease, visibility 0s ease 2s;
}

.compte-trigger:hover .compte-dropdown {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Style des boutons du dropdown */
.compte-dropdown button {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  color: #F5F5F7;
  padding: 0.5em;
  text-align: center;
  cursor: pointer;
}

.compte-dropdown button:hover {
  background: rgba(0, 0, 0, 0.1);
}



/* LOGOS mail et drapeaux */
.header-right-container img,
.compte-trigger img {
  width: 2em;
  height: auto;
  margin-left: 0;   /* Supprimez toute marge indésirable */
}


















/* FOOTER */
footer {
  position: fixed;       /* reste en bas */
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4em;           /* Hauteur fixe */
  background: linear-gradient(to top,
    rgba(0,0,0,0.8) 0%,
    rgba(0,0,0,0)   100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.footer-container {
  display: flex;
  width: 100%;
  justify-content: space-between; /* On sépare en 3 colonnes : gauche / centre / droite */
  align-items: center;
}

/* Pour le pied de page en portrait, on cache le bloc landscape et on affiche le bloc portrait */
.footer-landscape {
  display: none;
}

.footer-portrait {
  display: block;
  text-align: center;
  padding: 1em;
}

/* Le texte du footer portrait */
#footer_videos_portrait {
  margin-bottom: 0.5em;
  font-size: 0.9em;
  color: #F5F5F7;
  font-style: italic;
}

/* L'image du footer portrait : centrée et redimensionnée si besoin */
.footer-portrait-image {
  display: none;
  margin: 0 auto;
  max-width: 80%;
  height: auto;
  margin-bottom: 3em;
}


/* Bouton « Donate »*/
.button_donate{
  height: 2em;          /* demandé */
  width: auto;
  display: block;       /* pour pouvoir le centrer avec margin auto */
  margin: 0 auto 0.2em; /* centré + 0.5 em sous l’image */
  cursor: pointer;
  transition: filter .2s ease;
  position: relative;
  top: -3em;

}

.button_donate:hover{
  filter: brightness(.85);   /* léger assombrissement au survol */
}


/* PLACEMENT DU TEXTE VIDEOS FOURNIES */

/* TEXTE "videos fournies par" */
.texte_video_fourni_par {
  color: #F5F5F7;  /* Couleur souhaitée pour "Vidéos fournies par" */
  font-style: italic;
  font-size: 1.1em;
}

/* Remonte le texte "Vidéos fournies par Pexels ❤️" */
#footer_videos_portrait{
  position: relative;
  top: -2em;          /* Monte de 2 em – ajustez selon votre goût */
  margin-bottom: 0;   /* (optionnel) annule le petit espace bas */
}

/* TEXTE/lien "Pexels ❤️" */
.texte_pexel,
.texte_pexel:link,
.texte_pexel:visited {
  color: #F5F5F7 !important;
  font-size: 1.1em;
  font-style: italic;
  text-decoration: none;
  font-weight: 0.1em;
  
}

.texte_pexel:hover,
.texte_pexel:active {
  color: #F7CAC9 !important;
  text-decoration: underline;
  text-decoration-thickness: 0.0625em; 
}









/* ====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================*/
/* --------#CONNEXION-------- */




/* Conteneur de la page Connexion */
.connexion-content {
  text-align: center;       /* Centre le contenu */
  margin: 0 auto;           /* Centre horizontalement */
  max-width: 30em;          /* Largeur maximale (à ajuster selon vos besoins) */
  padding: 1em;             /* Espacement intérieur */
  color: #1E2A38;           /* Couleur du texte */
}

/* Nouveau conteneur pour le contenu de connexion avec fond blanc */
.login-container {
  background-color: rgba(245, 245, 247, 0.5); /* Fond avec 50% d'opacité */
  padding: 1em;                       /* Un bon padding pour aérer le contenu */
  max-width: 30em;                    /* Même largeur que .connexion-content */
  margin: 1em auto;                   /* Centré avec un espace vertical en haut et en bas */
  border-radius: 1em;                 /* Bords arrondis */
  box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.1); /* Légère ombre portée pour le relief */
  z-index: 1;                         /* Pour être au-dessus du fond vidéo */
  position: relative;                 /* Positionnement relatif pour les éventuels éléments internes */
}


/* INPUT*/
.connexion-content input[type="email"],
.connexion-content input[type="password"] {
  border-radius: 0.625em;
  outline: 0.125em solid #F7CAC9;
  border: 0;
  font-family: "Gill Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: #e2e2e2;
  outline-offset: 0.1875em;
  padding: 0.5em 1rem;
  transition: 0.25s;
}

.connexion-content input[type="email"]:focus,
.connexion-content input[type="password"]:focus {
  outline-offset: 0.3125em;
  background-color: #F5F5F7;
}





/* ajoute marge sous email */
#connexionForm input[type="email"] {
  margin-bottom: 1em; /* Ajustez la valeur selon vos préférences */
  background-color: #f0f0f0;
}


/* titre des pages  */
.connexion-content h1 {
  color:#1E2A38;
  font-size: 1.5em;
  font-weight: normal;
  text-transform: none; /* Pour éviter la transformation en majuscules */
  margin-top: 0em;
  margin-bottom: 2em;
}

/* Boutons sur la page Connexion */
.connexion-buttons {
  display: flex;
  flex-direction: column;   /* Aligne les éléments en colonne */
  align-items: center;      /* Centre les éléments horizontalement */
  gap: 0em;                 /* Espacement de 1em entre les boutons */
  margin-top: 0.5em;          /* Optionnel : espace au-dessus du conteneur */
  margin-bottom: -1em;
}

.button_connexion_on_connexion_page {
  margin-top: 2em;
  margin-bottom: 2em;
  display: inline-flex;       /* Pour que le bouton s'adapte au contenu en ligne */
  align-items: center;          /* Centrage vertical du contenu */
  justify-content: center;      /* Centrage horizontal du contenu */
  position: relative;           /* Pour que les pseudo-éléments soient positionnés par rapport à ce bouton */
  font-family: "Gill Sans", sans-serif;
  font-size: 1rem;
  color: #1E2A38;              /* Couleur du texte par défaut */
  background: transparent;
  border: none;
  outline: none;
  padding: 0rem;
  transition: all 0.2s;
}

/* Pseudo-élément pour le trait à gauche */
.button_connexion_on_connexion_page::before {
  content: "";
  position: absolute;
  background-color: #1E2A38;  /* Même couleur que le texte par défaut */
  height: 0.1em;
  width: 0;                 /* Pas visible par défaut */
  top: 50%;                 /* Centré verticalement */
  right: calc(100% + 0.5em);              /* Positionné juste à gauche du bouton */
  transform: translateY(-50%);
  transition: width 0.5s ease;
}

/* Pseudo-élément pour le trait à droite */
.button_connexion_on_connexion_page::after {
  content: "";
  position: absolute;
  background-color: #1E2A38;
  height: 0.1em;
  width: 0;
  top: 50%;              /* Centré verticalement */
  left: calc(100% + 0.5em);            /* Positionné juste à droite du bouton */
  transform: translateY(-50%);
  transition: width 0.5s ease;
}

/* Au survol, les traits s'étendent à 2em */
.button_connexion_on_connexion_page:hover::before {
  width: 2em;
}

.button_connexion_on_connexion_page:hover::after {
  width: 2em;
}

#errorMessage {
  color: red;
}





/* ---- MDP PERDU ---- */
.bouton_mdp_perdu,
.bouton_envoi_mail{
  margin-top: 2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: "Gill Sans", sans-serif;
  font-size: 1rem;
  color: #1E2A38;
  background: transparent;
  border: none;
  outline: none;
  padding: 0rem;
  transition: all 0.2s;
}

.bouton_mdp_perdu::before,
.bouton_envoi_mail::before,
.bouton_mdp_perdu::after,
.bouton_envoi_mail::after{
  content: "";
  position: absolute;
  background-color: #1E2A38;
  height: 0.1em;
  width: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: width 0.5s ease;
}
.bouton_mdp_perdu::before,
.bouton_envoi_mail::before{ right: calc(100% + 0.5em); }
.bouton_mdp_perdu::after,
.bouton_envoi_mail::after { left : calc(100% + 0.5em); }

.bouton_mdp_perdu:hover::before,
.bouton_envoi_mail:hover::before,
.bouton_mdp_perdu:hover::after,
.bouton_envoi_mail:hover::after{
  width: 2em;
}

/* input et message */
.input_mail_perdu {
  margin-top: 2em;
  padding: 0.4em 0.6em;
  font-size: 0.9em;
  font-family: "Gill Sans", sans-serif;
  border: 0.2em solid #888;
  border-radius: 0.3em;
  text-align: center;
  height: 1.8em; /* Ajustez cette valeur selon la hauteur souhaitée */
  box-sizing: border-box; /* Assure que le padding et la bordure sont inclus dans la hauteur totale */
}

.texte_mail_mdp_change{
  margin-top:0.8em;
  font-size:0.9rem;
  color:#1E2A38;
  text-align:center;
}





/* PUB */
.fixed-ad-co {
  display:none;
  position: fixed;
  top: 60%;
  transform: translateY(-50%);
  z-index: 1000;
  width: 120px;
  height: 600px;
}

.fixed-ad-co-left {
  left: 0;
}

.fixed-ad-co-right {
  right: 0;
}




/* ====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================*/
/* --------#INSCRIPTION-------- */


/* Conteneur principal pour inscription */
.inscription-content {
  text-align: center;
  margin: 0 auto;
  max-width: 30em;
  padding: 2em;
  color: #1E2A38;
}

.conteneur_fond_blanc {
  background-color: rgba(255, 255, 255, 0.4);
  padding: 2em;               /* Espacement intérieur */
  border-radius: 1em;         /* Coins arrondis */
  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
  margin: 2em auto;           /* Centrer horizontalement et ajouter un espace vertical */
}

/* Conteneur principal mise en forme */
.inscription-content form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* Espace de 1rem entre chaque élément du formulaire */
  align-items: center;
}

/* TITRE H1 de la page */
.inscription-content h1 {
  color:#1E2A38;
  font-size: 1.5em;
  font-weight: normal;
  text-transform: none;
  margin-top: -1em;
  margin-bottom: 2em;
}


.input_pseudo:focus {
  outline-offset: 0.3125em;
  background-color: #F5F5F7;
}


/* Inputs pour inscription */
.input_pseudo,
.inscription-content input[type="email"],
.inscription-content input[type="password"],
.inscription-content input[type="text"] {
  width: 12em;
  border-radius: 0.625em;
  outline: 0.125em solid #F7CAC9;
  border: 0;
  font-family: "Gill Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
               'Helvetica Neue', sans-serif;
  background-color: #e2e2e2;
  outline-offset: 0.125em;
  padding: 0.5em 1rem;
  transition: 0.25s;
}


.inscription-content input[type="email"]:focus,
.inscription-content input[type="password"]:focus,
.inscription-content input[type="text"]:focus {
  outline-offset: 0.3125em;
  background-color: #F5F5F7;
}



/* bouton envoyer code */
.bouton_envoyer_code_validation {
  margin-top: 1rem; /* Ajoute de l'espace au-dessus du bouton */
  margin-bottom: -1em;
  padding: 0.5em 0.5em;
  font-size: 0.8em;

  text-transform: none;
  font-weight: 200;
  color: #F5F5F7;
  background-color: #8E8E93;
  border: none;
  border-radius: 2.8125em;
  box-shadow: 0em 0.5em 0.9375em rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
}

.bouton_envoyer_code_validation:hover {
  background-color: #F7CAC9;
  box-shadow: 0em 0.9375em 1.25em #708090(46, 229, 157, 0.4);
  color: #F5F5F7;
  transform: translateY(-0.4375em);
}

.bouton_envoyer_code_validation:active {
  transform: translateY(-0.0625em);
}

#verificationSuccessMsg {
  margin-top: 1em;
  margin-bottom: 1em;
  font-size: 1em;
  color: #1E2A38; /* Vous pouvez ajuster la couleur selon vos besoins */
}




/* bouton s'inscrire */
.button_inscrire_on_inscrire_page {
  margin-top: 2em;
  margin-bottom: 0em;
  display: inline-flex;       /* Pour que le bouton s'adapte au contenu en ligne */
  align-items: center;          /* Centrage vertical du contenu */
  justify-content: center;      /* Centrage horizontal du contenu */
  position: relative;           /* Pour que les pseudo-éléments soient positionnés par rapport à ce bouton */
  font-family: "Gill Sans", sans-serif;
  font-size: 1rem;
  color: #1E2A38;              /* Couleur du texte par défaut */
  background: transparent;
  border: none;
  outline: none;
  padding: 0rem;
  transition: all 0.2s;
}

/* Pseudo-élément pour le trait à gauche */
.button_inscrire_on_inscrire_page::before {
  content: "";
  position: absolute;
  background-color: #1E2A38;  /* Même couleur que le texte par défaut */
  height: 0.1em;
  width: 0;                 /* Pas visible par défaut */
  top: 50%;                 /* Centré verticalement */
  right: calc(100% + 0.5em);              /* Positionné juste à gauche du bouton */
  transform: translateY(-50%);
  transition: width 0.5s ease;
}

/* Pseudo-élément pour le trait à droite */
.button_inscrire_on_inscrire_page::after {
  content: "";
  position: absolute;
  background-color: #1E2A38;
  height: 0.1em;
  width: 0;
  top: 50%;              /* Centré verticalement */
  left: calc(100% + 0.5em);            /* Positionné juste à droite du bouton */
  transform: translateY(-50%);
  transition: width 0.5s ease;
}

/* Au survol, les traits s'étendent à 2em */
.button_inscrire_on_inscrire_page:hover::before {
  width: 2em;
}

.button_inscrire_on_inscrire_page:hover::after {
  width: 2em;
}

.mail_banned {
  color: rgb(181, 0, 0);
  font-size: 0.9em;
  margin-top: 0.5em;
  font-style: italic;
}




/* (Par exemple, pour les messages d'erreur) */
#inscriptionError {
  color: red;
}


/* message « compte déjà existant » */
.texte_mail_existe_deja{
  margin-top:0.5em;
  font-family:"Gill Sans",sans-serif;
  font-size:0.9rem;
  color:#D02626;           /* rouge discret */
  text-align:center;
}




/* PUB */
.fixed-ad {
  display:none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  width: 120px;
  height: 600px;
}

.fixed-ad-left {
  left: 0;
}

.fixed-ad-right {
  right: 0;
}



/* ====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================*/


/* --------#INDEX-------- */

/* BACKGROUND Portrait : français */
.background-index {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
  opacity: 0.9;
}



body {
  background-color: #8E8E93;
}


body.index-background {
    background-size: 60% auto !important;
}

/* GIF */
.intro-index-gif {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  transform: translate(-50%, -50%);
}

/* bouton actualiser */
.actualiser-index {
  width: 20%;       /* Définit la largeur à 10% du conteneur parent */
  display: block;   /* Pour que l'image respecte la largeur définie */
  margin: 30em auto 0; /* 1em en haut, auto pour centrer horizontalement */
  cursor: pointer;  /* Change le curseur pour indiquer que l'image est cliquable */
  position: relative;  /* Si nécessaire, pour définir le z-index */
  z-index: 10;         /* S'assurer qu'elle se trouve au-dessus */
  pointer-events: auto; /* Pour que l'image reçoive les clics */
}

/* Styles pour le player vidéo d'intro sur la page index */
.intro-video-container {
  text-align: center;
  margin-top: 1em;
}

.intro-video-container video {
  width: 40%;
  display: block;
  margin: 0 auto;
}


/* VERSION TEXTE ANCIENNE */
.content-overlay h1 {
  font-family: "Gill Sans", sans-serif;
  font-size: 1.3em;      /* Taille de police fixée à 0.5em */
  color: #1E2A38;        /* Couleur souhaitée */
  margin: 0em 0;       /* Optionnel : ajustez la marge */
  margin-bottom: 1.5em;
  margin-top: -1em;
  
}


/* TEXTE INDEX */
.content-overlay p {
  font-family: "Gill Sans", sans-serif;
  font-size: 1em;
  line-height: 1.4;
  color: #1E2A38;
  margin: 0.5em 0;
  text-align: left;
  margin-left: 10em;
  margin-right: 0;
}

.texte-ho-no {
  font-size: 1.8em;
  font-weight: bold;
  color: #1E2A38;
}





/* Pour modifier l'espace entre chaque bouton, ajustez le gap ici */
.button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3em;  /* Par exemple, 2em pour un écart de 2 em entre les boutons */
    margin: 3em 0;
}

/* Styles de base pour tous les boutons dans .button-container */
.button-container button {
    padding: 0.5em;
    font-size: 0.8125em;
    cursor: pointer;
    border: none;
}

.button_connexion { 
    margin-top: 0.9375em;
    font-family: "Gill Sans", sans-serif;
    background: linear-gradient(145deg, #08aad0, #05a0c0);  /* Dégradé rétro */
    color: #08aad0;
    border: 0.125em dashed #f62928;   /* Bordure en pointillés pour effet kitsch */
    padding: 0.9375em 1.25em;
    font-size: 0.75em !important;
    cursor: pointer;
    width: 9.375em;
    text-transform: uppercase;
    font-weight: bold;
    box-shadow: 0.375em 0.375em 0em #febc13;  /* Ombre prononcée */
    transition: all 0.2s;
    border-radius: 0.625em;  /* Coins arrondis */
    white-space: nowrap;  /* Empêche le retour à la ligne */
    /* Motif de fond rétro en diagonale */
    background-image: linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%, transparent 75%, transparent);
    background-size: 1.25em 1.25em;
}

.button_connexion:hover {
    color: #F5F5F7;
    background: #08aad0;  /* Fond passe en couleur unie au survol */
    box-shadow: 0.125em 0.125em 0em #f62928;
    transform: translate(0.125em, 0.125em);
}

.button_inscription {
    margin-top: 0.9375em;
    font-family: "Gill Sans", sans-serif;
    background: radial-gradient(circle, #05a0c0, #08aad0);  /* Fond radial rétro */
    color: #f62928;
    border: 0.125em double #f62928;  /* Bordure double pour un look kitsch différent */
    padding: 0.9375em 1.25em;
    font-size: 0.75em !important;
    cursor: pointer;
    width: 9.375em;
    text-transform: uppercase;
    font-weight: bold;
    box-shadow: 0.25em 0.25em 0em #febc13;
    transition: all 0.2s;
    border-radius: 1.25em;  /* Forme plus arrondie */
    white-space: nowrap;
    /* Fond texturé en motif à damier léger (SVG intégré) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><rect width='10' height='10' fill='rgba(255,255,255,0.1)'/><rect x='10' y='10' width='10' height='10' fill='rgba(255,255,255,0.1)'/></svg>");
    background-size: 1.25em 1.25em;
}

.button_inscription:hover {
    color: #f62928;
    background: radial-gradient(circle, #febc13, #f9bd8c);
    box-shadow: 0.125em 0.125em 0em #f62928;
    transform: translate(0.125em, 0.125em);
}

.clickable {
  color: #1E2A38;
  text-decoration: none;
}

.clickable:hover {
  color: #8a1866;
}












/* ====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================*/


/* --------#AUDIO FORME ONDE-------- */

/* /* CONTENEUR GLOBAL 1 divise 3 partie*/ 
.zone_audio_pub {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 6vh; /* Pour éviter l'entête */
  margin-bottom: 6vh; /* Pour éviter le pied de page */
}

/*fond blanc*/ 
.conteneur-fond-blanc-audio {
  background-color: rgba(255, 255, 255, 0.5);
  padding-top: 1em;
  padding-right: 0em;
  padding-bottom: 1em;
  padding-left: 0m;
  border-radius: 1em;         /* Coins arrondis */
  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
  margin: 2em auto;           /* Centrer horizontalement et ajouter un espace vertical */
}

/* CONTENEUR GLOBAL 2 elements centraux */
.conteneur_page_audio {
  position: static;
  top: 50%;
  left: 50%;
  transform: none;
  text-align: center;
}


/* texte analyse */
/* texte analyse */
.texte_analyse_audio {
  text-align: center;
  font-family: "Gill Sans", sans-serif;
  font-size: 1.2em;
  color: #10020b;
  margin: 0.5em 0;
  margin-top: 0em;
  white-space: pre-wrap;
  line-height: 1.5em;
}


/* Barre de progression */
.barre_prog_analyse_audio {
  width: 70%;
  max-width: 1000em;
  height: 1em;
  background-color: transparent;
  border: 0.150em solid #1E2A38;
  border-radius: 0.5em;
  margin: 1em auto;
  overflow: hidden;
}

.barre_prog_analyse_audio .barre_fill {
  height: 100%;
  width: 0%;
  background-color: #1E2A38;
  transition: width 0.3s ease-out;
}

/* FORME d'ONDE */
#waveform {
  display: block;
  background: transparent;  /* Fond transparent */
  margin: 1em auto;
  border: none;             /* Pas de bordure */
  border-radius: 0;
  max-width: 70%;
}


/* bouton ok*/
.bouton_ok_audio {
  margin-top: 2em!important;
  margin-bottom: 10em!important;
  margin: 0 auto;
  display: block;
  transition: all 0.2s ease-in;
  position: relative;
  overflow: hidden;
  z-index: 1;
  color: #1E2A38;
  padding: 0.5em 0.5em;
  cursor: pointer;
  font-size: 0.9em;
  border-radius: 0.5em;
  background: #F5F5F7;
  border: 0.2em solid #1E2A38;
  box-shadow: 0.375em 0.375em 0.75em #c5c5c5, -0.375em -0.375em 0.75em #F5F5F7;
}

.bouton_ok_audio:active {
  color: #666;
  box-shadow: inset 0.25em 0.25em 0.75em #c5c5c5, inset -0.25em -0.25em 0.75em #F5F5F7;
}

.bouton_ok_audio:before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.bouton_ok_audio:after {
  content: "";
  position: absolute;
  left: 55%;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;
  width: 160%;
  height: 190%;
  color: #F5F5F7;
  background-color: #1E2A38;
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.bouton_ok_audio:hover {
  color: #F5F5F7;
  border: 0.0625em solid #1E2A38;
}

.bouton_ok_audio:hover:before {
  top: -35%;
  background-color: #1E2A38;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.bouton_ok_audio:hover:after {
  top: -45%;
  background-color: #1E2A38;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}








/* PUB */
.fixed-ad-analyse-audio {
  display:none;
  position: fixed;
  top: 60%;
  transform: translateY(-50%);
  z-index: 1000; /* Pour qu'elles apparaissent au-dessus du contenu */
  width: 336px;
  height: 280px;
}

.fixed-ad-analyse-audio.fixed-ad-left {
  left: 0;
}

.fixed-ad-analyse-audio.fixed-ad-right {
  right: 0;
}











/* ====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================*/
/* --------#CHOIX CLIP et ZAP-------- */


/* =======================================================================
   CONTENU
   ======================================================================= */
   .choix_clip-content {
    font-family: "Gill Sans", sans-serif; /* Police gill sans */
    text-align: center;                   /* Centre le contenu global */
    position: relative;
    z-index: 1;                           /* Pour être au-dessus de la vidéo de fond */
    margin-top: 2em;                      /* Ajustez selon votre mise en page */
  }

  .conteneur-fond-blanc {
    background-color: rgba(255, 255, 255, 0.4);
    display: inline-block;
    margin: 0 auto;      /* Centre horizontalement */
    padding-top: 0em;
    padding-bottom: 2em;
    padding-left: 2em;
    padding-right: 2em;
    box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
    border-radius: 1em;
  }
  


  
  /* =======================================================================
     TEXTE
     ======================================================================= */

  /* Pour le H1 (id=cc-title) spécifiquement */
  .choix_clip-content h1 {
    color: #1E2A38;
    font-size: 1.5em;
    font-weight: normal;
    text-transform: none;
    margin-top: 1em;
    margin-bottom: 1.5em;
  }


  /*  contenu de l'input nom du clip */
  .input_nom_clip::placeholder,
  .input_keyword::placeholder {
    text-align: center;
    font-size: 1em; /* ajustez la taille selon vos besoins */
    /* Optionnel : personnalisez la couleur */
    color: #666;
  }


  .texte_contenu_creation {
    color: #1E2A38;
    font-family: "Gill Sans", sans-serif;
    font-size: 0.8em;
    font-style: italic;
  }
  
  .texte_sous_titre {
    color: #1E2A38;
    font-size: 1.5em;
    font-weight: normal;
    text-transform: none;
    margin-top: 2em;
    margin-bottom: 1em;
  }

  .texte_h2_plus_petit {
    color: #1E2A38;
    font-size: 1em;
    font-weight: normal;
    text-transform: none;
    margin-top: -1em;
    margin-bottom: 2em;
  }

  .texte_contenu {
    color: #1E2A38;
    font-family: "Gill Sans", sans-serif;
    font-size: 1em;
  }

  
  /* =======================================================================
     CONTENEURS
     ======================================================================= */
  

  /* 1) conteneur_nom_clip */
  .conteneur_nom_clip {
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center;     /* Centre verticalement */
    margin-bottom: 3em;
    gap: 1em;                /* Un petit espace entre label et input */
  }
  
  /* 2) conteneur_choix_fichier */
  .conteneur_choix_musique {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 1em;
    gap: 1em;
  }
  
  /* 3) conteneur_musique_originale */
  .conteneur_musique_originale {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5em;
  }
  

  

  /* 4) conteneur_des themes */
  .conteneur_themes {
    width: 80%;       
    max-width: 12.5em;     /* Limite maximale */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Les éléments à l'intérieur seront alignés à gauche */
    margin: 0 auto 1em auto;          /* Centre le conteneur dans la page */
    margin-bottom: 1em;
    transform: translateX(5em);
    gap: 0.5em;
  }
  

  
  
  /* 5) conteneur_mots_cle */
  .conteneur_mots_cle {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: -0.5em;
    gap: 0em;
  }
  
  /* 6) conteneur_effets */
  .conteneur_effets {
    width: 80%;           
    max-width: 12.5em;     /* Limite maximale */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Les éléments à l'intérieur seront alignés à gauche */
    margin: 0 auto 1em auto;          /* Centre le conteneur dans la page */
    margin-bottom: 0em;
    transform: translateX(5em);
    gap: 0.5em;
  }
  
  /* =======================================================================
     INPUTS
     ======================================================================= */
  /* infos musique originale */
  .info_musique_originale {
    margin-top: 1em;
  }
  
    /* pour chaque input individuelle */
  .input_nom_clip {
    margin-top: 1em;
    width: 15em;
    border-radius: 0.625em;
    outline: 0.125em solid #1E2A38;
    border: 0;
    font-family: "Gill Sans", sans-serif;
    background-color: #e2e2e2;
    outline-offset: 0.125em;
    padding: 0.5em 1rem;
    transition: 0.25s;
    margin-bottom: 1.5em;
    
  }
  .input_nom_clip:focus {
    outline-offset: 0.3125em;
    background-color: #F5F5F7;
  }

  /* pour chaque input individuelle */
  .input_keyword {
  margin-top: 0em;
  width: 15em;
  border-radius: 0.625em;
  outline: 0.125em solid #1E2A38;
  border: 0;
  font-family: "Gill Sans", sans-serif;
  background-color: #e2e2e2;
  outline-offset: 0.125em;
  padding: 0.5em 1rem;
  transition: 0.25s;
  margin-bottom: 1.5em;
  
}
.input_keyword:focus {
  outline-offset: 0.3125em;
  background-color: #F5F5F7;
}


  
  /* Pour le <input type="file"> */
  .input_choix_fichier {
    font-family: "Gill Sans", sans-serif;
    outline: 0.125em solid #1E2A38;
    border: none;
    border-radius: 0.625em;
    padding: 0.3em;
    background-color: #e2e2e2;
    outline-offset: 0.125em;
    transition: 0.25s;
  }
  .input_choix_fichier:focus {
    outline-offset: 0.3125em;
    background-color: #F5F5F7;
  }


  /* Pour le <input type="file"> */
  .input_choix_fichier {
    font-family: "Gill Sans", sans-serif;
    outline: 0.125em solid #1E2A38;
    border: none;
    border-radius: 0.625em;
    padding: 0.3em;
    background-color: #e2e2e2;
    outline-offset: 0.125em;
    transition: 0.25s;
  }
  .input_choix_fichier:focus {
    outline-offset: 0.3125em;
    background-color: #F5F5F7;
  }

  /* ESPACE ENTREE IMPUT MOT CLE *
  /* Espace entre texte et input de mots clé */
  .conteneur_mots_cle label {
    margin-right: 0.5em;  /* espace entre le texte (label) et l'input */
  }



/* PUB CHOIX ZAP */
  .fixed-ad-choix-zap {
    display:none;
    position: fixed;
    top: 60%;
    transform: translateY(-50%);
    z-index: 1000;
    width: 120px;
    height: 600px;
  }
  
  .fixed-ad-choix-zap.left {
    left: 0;
  }
  
  .fixed-ad-choix-zap.right {
    right: 0;
  }
  


/* PUB CHOIX CLIP */
  .fixed-ad-choix-clip {
    display:none;
    position: fixed;
    top: 60%;
    transform: translateY(-50%);
    z-index: 1000; /* Assure que les images restent au-dessus du contenu */
    width: 120px;
    height: 600px;
  }
  
  .fixed-ad-choix-clip.left {
    left: 0;
  }
  
  .fixed-ad-choix-clip.right {
    right: 0;
  }
  

  

  
  /* =======================================================================
     CHECKBOX 
     ======================================================================= */

/* Uniformisation des checkbox et radio personnalisés */
input.checkbox_musique_originale,
.checkbox_themes input[type="radio"],
.checkbox_effets input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 1.2em;
  height: 1.2em;
  border: 0.125em solid #1E2A38;
  border-radius: 50%;            /* Forme ronde */
  background-color: #F5F5F7;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Au survol : changer le background */
input.checkbox_musique_originale:hover,
.checkbox_themes input[type="radio"]:hover,
.checkbox_effets input[type="checkbox"]:hover {
  background-color: #F7CAC9;
}

/* Au clic ou sélectionné : background devient #580F41 */
input.checkbox_musique_originale:active,
.checkbox_themes input[type="radio"]:active,
.checkbox_effets input[type="checkbox"]:active,
input.checkbox_musique_originale:checked,
.checkbox_themes input[type="radio"]:checked,
.checkbox_effets input[type="checkbox"]:checked {
  background-color: #1E2A38;
}

/* force l'alignement checkbox avec texte */
input.checkbox_musique_originale,
.checkbox_themes input[type="radio"],
.checkbox_effets input[type="checkbox"],
.texte_contenu {
  vertical-align: middle;
}


  
  /* =======================================================================
     BOUTONS
     ======================================================================= */
  
  /* Bouton "Télécharger une musique sur le web" */
  .button_musique_web {
    /* On supprime la largeur fixe pour que le bouton s'adapte au contenu */
    border-radius: 0.625em;
    outline: 0.125em solid #1E2A38;
    border: 0;
    font-family: "Gill Sans", sans-serif;
    background-color: #F5F5F7;
    outline-offset: 0.125em;
    padding: 0.5em 1rem;
    transition: 0.25s;
    cursor: pointer;
    color: #1E2A38;
  }
  
  .button_musique_web:focus {
    outline-offset: 0.3125em;
    background-color: #F7CAC9;
  }
  
  .button_musique_web:hover {
    outline: 0.125em solid #1E2A38;
    background-color: #F7CAC9;
    color: #1E2A38;
  }
  
  
  
  /* BOUTON OK */
  .button_ok_choix_clip {
    margin-top: 5em;
    display: inline-block;
    transition: all 0.2s ease-in;
    position: relative;
    overflow: hidden;
    z-index: 1;
    color: #1E2A38;
    padding: 0.5em 0.5em;
    cursor: pointer;
    font-size: 0.9em;
    border-radius: 0.5em;
    background: #F5F5F7;
    border: 0.2em solid #1E2A38;
    box-shadow: 0.375em 0.375em 0.75em #a8a8a8, -0.375em -0.375em 0.75em #a8a8a8;
  }
  
  .button_ok_choix_clip:active {
    color: #666;
    box-shadow: inset 0.25em 0.25em 0.75em #c5c5c5, inset -0.25em -0.25em 0.75em #F5F5F7;
  }
  
  .button_ok_choix_clip:before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scaleY(1) scaleX(1.25);
    top: 100%;
    width: 140%;
    height: 180%;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
  }
  
  .button_ok_choix_clip:after {
    content: "";
    position: absolute;
    left: 55%;
    transform: translateX(-50%) scaleY(1) scaleX(1.45);
    top: 180%;
    width: 160%;
    height: 190%;
    color: #F5F5F7;
    background-color: #1E2A38;
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
  }
  
  .button_ok_choix_clip:hover {
    color: #F5F5F7;
    border: 0.0625em solid #1E2A38;
  }
  
  .button_ok_choix_clip:hover:before {
    top: -35%;
    background-color: #1E2A38;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
  }
  
  .button_ok_choix_clip:hover:after {
    top: -45%;
    background-color: #1E2A38;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
  }
   /* ---------- overlay plein écran + spinner ---------- */
  #loadingOverlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:10000;
  }

  /* spinner responsive sans garde-fous */
  #loadingOverlay .spinner{
    width :5vw;              /* 10 % de la largeur d’écran */
    height:5vw;
    border:calc(0.7vw) solid #fff;   /* ≈ 14 % du diamètre */
    border-top-color:transparent;
    border-radius:50%;
    animation:spin 1s linear infinite;
  }

  @keyframes spin{
    to{ transform:rotate(360deg); }
  }

  













  /* ====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================*/
/* --------#WAIT GENERAL (audio, clip, zap)-------- */

/* #WAIT_AUDIO et WAIT_CLIP*/

/* conteneur */
.wait_audio_container {
  text-align: center;
  font-family: "Gill Sans", sans-serif;
  margin: 0 auto;
  width: 100%;
}

/* CONTENEUR wait_audio et wait_clip */
.pub-image-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  gap: 1em;
}

/* Style de la vidéo centrale */
.message-ferme-fenetre {
  max-width: 100%;
  height: auto;
  border: none;
  border-radius: 0.5em;
}

/* Style de la vidéo centrale wait-zap */
.message-attend {
  max-width: 100%!important;
  margin-top: -3em;
  height: auto;
  border: none;
  border-radius: 0.5em;
}

/* Style des images latérales */
.pub-image {
  max-width: 100%;
  height: auto;
}






/* WAIT ZAP */
/* CONTENEUR DES PUBS */
.conteneur_wait_zap {
  text-align: center;
  font-family: "Gill Sans", sans-serif;
  margin: 0 auto;
  width: 100%;
  margin-top: 12em;
}

.conteneur_wait_zap img,
.conteneur_wait_zap video {
  max-width: 100%;
  height: auto;
  border: none;
  border-radius: 0.5em;
}







/* #TRAITEMENT ZAP */
.conteneur_traitement_zap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  margin-top: 2em;
}

.conteneur_traitement_zap img,
.conteneur_traitement_zap video {
  max-width: 100%;
  height: auto;
  border: none;
  border-radius: 0.5em;
}







/* #PUB de tous les wait */
.fixed-ad-tous-les-wait {
  display:none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  width: 120px;
  height: 600px;
}

.fixed-ad-tous-les-wait.left {
  left: 0;
}

.fixed-ad-tous-les-wait.right {
  right: 0;
}

















/* ====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================*/
/* --------#LECTEUR CLIP-------- */



/* FOND BLANC*/
.conteneur_fond_blanc_lecteur {
  position: relative;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 2em;               /* Vous pouvez ajuster le padding selon vos besoins */
  border-radius: 0.5em;         /* Coins arrondis */
  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
  margin: 2em auto;           /* Centre l’élément horizontalement */
  /* MODIFIE LA TAILLE dessous */
  max-width: 42em;            /* Largeur maximale souhaitée */
  width: fit-content;         /* S’adapte précisément au contenu (pour navigateurs récents) */
  text-align: center;         /* Pour centrer le contenu interne */
}




/* LECTEUR*/
/* pour MODIFIER LA TAILLE max width du fond blanc */
.lecteur_clip_final {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}



/* CONTENEUR LECTEUR + 2 BOUTONS*/
.container_2buttons_et_lecteur {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* CONTENEUR 2 BOUTONS */
.container_buttons_final_clip {
  text-align: center;
  margin-top: 1em;
}

/* TITRE NOM DU CLIP */
.h1-lecteur-clip {
  color:#1E2A38;
  font-size: 1.2em;
  font-weight: normal;
  text-transform: none;
  margin-top: -1em;
  margin-bottom: 1em;
  text-align: center;
}

/* SOUS TITRE NOM DU CLIP */
.H2-lecteur-clip {
  color: #1E2A38;
  font-size: 1.1em;
  font-style: italic;
  font-weight: normal;
  text-transform: none;
  margin-top: -1em;
  margin-bottom: 0.5em;
  text-align: center;
  font-family: "Gill Sans", sans-serif;
}


/* Espace horizontal entre les deux boutons */
.container_buttons_final_clip > button:not(:last-child) {
  margin-right: 0em; /* Ajuste la valeur selon la taille d'espace souhaitée */
}

/* BOUTONS DE LA PAGE */
.button_modif_final_clip {
    margin-top: 0em;
    display: inline-block;
    transition: all 0.2s ease-in;
    position: relative;
    overflow: hidden;
    z-index: 1;
    color: #1E2A38;
    padding: 0.5em 0.5em;
    cursor: pointer;
    font-size: 0.9em;
    border-radius: 0.5em;
    background: #F5F5F7;
    border: 0.2em solid #1E2A38;
}

.button_modif_final_clip:active {
    color: #666;
    box-shadow: inset 0.25em 0.25em 0.75em #c5c5c5, inset -0.25em -0.25em 0.75em #F5F5F7;
}

.button_modif_final_clip:before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scaleY(1) scaleX(1.25);
    top: 100%;
    width: 140%;
    height: 180%;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
}

.button_modif_final_clip:after {
    content: "";
    position: absolute;
    left: 55%;
    transform: translateX(-50%) scaleY(1) scaleX(1.45);
    top: 180%;
    width: 160%;
    height: 190%;
    background-color: #1E2A38;
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
}

.button_modif_final_clip:hover{
    color: #F5F5F7;
    border: 0.0625em solid #1E2A38;
}

.button_modif_final_clip:hover:before {
    top: -35%;
    background-color: #1E2A38;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.button_modif_final_clip:hover:after{
    top: -45%;
    background-color: #1E2A38;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}






/* BOUTONS partager et telecharger */
.conteneur_boutons_share_download_lecteur{
  position:absolute;          /* relatif au .conteneur_fond_blanc_lecteur */
  right:2em;
  bottom:2em;
  display:flex;
  align-items:center;
  gap:.8em;                   /* espace entre les deux icônes */
}

/* Icône TÉLÉCHARGER (png) */
.button_download_final_clip{
  width:1.4em;
  height:auto;
  cursor:pointer;
  transition:transform .2s;
  padding:0;
  background:none;
  border:none;
}
.button_download_final_clip:hover{ transform:scale(1.05); }
/* on neutralise d’anciens pseudo-éléments éventuels */
.button_download_final_clip::before,
.button_download_final_clip::after{ display:none!important; content:none!important; }








/* SHARE */
.bouton_share_sur_lecteur{
  position:absolute;
  right:2.5em;
  bottom:0em;
  width:1.4em;
  height:auto;
  cursor:pointer;
  transition:transform .2s;
}
.bouton_share_sur_lecteur:hover{ transform:scale(1.05); }

/* 2) popup share (overlay full‑screen) */
.popup_share{
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,.6);
  display:flex; justify-content:center; align-items:center;
  z-index:1000;
}
.popup_share_inner{
  background:#F5F5F7;
  padding:3em;
  border-radius:.8em;
  text-align:center;
  min-width:20em;
  box-shadow:0 0 .8em rgba(0,0,0,.4);
  position:relative;
}

/* croix de fermeture */
.close_share_popup{
  position:absolute;
  top:.5em; right:.6em;
  font-size:1.2em;
  cursor:pointer;
}

/* champ URL + bouton copier */
.input_share_url{
  width:100%;
  padding:.6em;
  border:0.2em solid #708090;
  border-radius:.4em;
  font-size:1em;
}
.bouton_copie_url{
  margin-top:1em;
  padding:.5em 1.2em;
  font-size:1em;
  border:none;
  border-radius:.4em;
  background:#1E2A38;
  color:#F5F5F7;
  cursor:pointer;
}
.bouton_copie_url:hover{ background:#708090; }

/* petit message de retour */
.message_url_copie{
  margin-top:.6em;
  font-size:.9em;
  color:#708090;
}









/* POPUP */
.ad-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}

/* IMAGE PUB*/
.ad-image {
width: 70%;    /* Augmentez cette valeur pour agrandir l'image */
height: auto;
display: block;
margin: 0 auto;
}

.ad-popup-inner {
  position: relative;
  width: 100%;
  max-width: 40em;
}

/* compte a rebours*/
.countdown-overlay {
  position: absolute;
  top: 0em;
  right: 5em;
  background: rgba(255,255,255,0.8);
  padding: 0.3125em 0.625em;
  font-size: 1.25em;
  border-radius: 0.3125em;
}

/*croix pour fermer*/
.close-popup-button {
  position: absolute;
  top: 0em;
  right: 5em;
  font-size: 1.25em;
  padding: 0.3125em 0.625em;
  display: none;
}

.popup p {
  font-size: 1.125em;
  margin-bottom: 1.25em;
}

/* Bouton “soutenir” centré sous le GIF */
.bouton_soutenir_telechargement {
  position: absolute;
  bottom: 2em;             /* distance depuis le bas de la popup (ajustez si besoin) */
  left: 50%;               /* axe horizontal centré */
  transform: translateX(-50%);
  height: 2em;             /* comme demandé */
  cursor: pointer;
  z-index: 10;
}






/* SI PAS DE VIDEO */
.container_no_video {
  margin-top: 4em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(245, 245, 247, 0.7); /* #F5F5F7 avec 70 % d’opacité */
  padding: 2em;
  border-radius: .7em;
  margin: 4em auto 0;
  width: 60%;
}

.texte_trop_long {
  text-align: center; /* Centrer le texte */
  font-family: "Gill Sans", sans-serif;
  font-size: 1em;
  line-height: 1;
  color: #1E2A38;
  margin: 0.5em 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3em;
}

/* BOUTONS RECREER CLIP */
.bouton_recreer_clip {
  margin-top: 0em;
  display: inline-block;
  transition: all 0.2s ease-in;
  position: relative;
  overflow: hidden;
  z-index: 1;
  color: #1E2A38;
  padding: 0.5em 0.5em;
  cursor: pointer;
  font-size: 0.9em;
  border-radius: 0.5em;
  background: #F5F5F7;
  border: 0.2em solid #1E2A38;
}

.bouton_recreer_clip:active {
  color: #666;
  box-shadow: inset 0.25em 0.25em 0.75em #c5c5c5, inset -0.25em -0.25em 0.75em #F5F5F7;
}

.bouton_recreer_clip:before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}


.bouton_recreer_clip:after {
  content: "";
  position: absolute;
  left: 55%;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;
  width: 160%;
  height: 190%;
  background-color: #1E2A38;
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.bouton_recreer_clip:hover {
  color: #F5F5F7;
  border: 0.0625em solid #1E2A38;
}


.bouton_recreer_clip:hover:before {
  top: -35%;
  background-color: #1E2A38;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.bouton_recreer_clip:hover:after  {
  top: -45%;
  background-color: #1E2A38;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}


/* PUB */
.ad-lecteur {
  display: none;
  position: fixed;
  top: 55%;
  width: 120px;
  height: 600px;
  z-index: 1500; /* Ajustez le z-index si nécessaire */
}

/* Pub positionnée à gauche */
.ad-left {
  left: 0%;  /* Ajustez la valeur selon l'espacement désiré depuis le bord gauche */
  transform: none;
}

/* Pub positionnée à droite */
.ad-right {
  right: 0%;  /* Ajustez la valeur selon l'espacement désiré depuis le bord droit */
  transform: none;
}














/* ====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================*/
/* --------#MODIFICATIONS-------- */


/* ===================== CONTENEUR GLOBAL ===================== */

/* FOND BLANC*/
.conteneur_tout_modif {
  background-color: rgba(255, 255, 255, 0.5);  /* Fond blanc */
  padding-top: 2em;
  padding-bottom: 2em;
  padding-left: 0em;
  padding-right: 0em;
  border-radius: 0.5em;         /* Coins arrondis */
  box-shadow: 0 0.125em 0.5em rgba(0, 0, 0, 0.1);  /* Légère ombre portée */
  margin: 2em auto;             /* Centre horizontalement avec un espace vertical */
  max-width: 50em;              /* Ajuste la largeur selon tes besoins */
}

.conteneur_player_et_boutons {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  max-width: 50em; /* ajustez selon vos besoins */
}

.h1-modif {
  color:#1E2A38;
  font-size: 1.2em;
  font-weight: normal;
  text-transform: none;
  margin-top: -1em;
  margin-bottom: 1em;
  text-align: center;
}

/* ===================== CONTENEUR POUR LES BOUTONS DE NAVIGATION ===================== */
.conteneur_boutons_defile {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 0.625em; /* rapproché du titre */
  margin-bottom: 0.625em; /* rapproché de la timeline */
}

/* ===================== BOUTONS NAVIGATION (PRECEDENT ET SUIVANT) ===================== */
/* numéro de la vidéo */
.texte_numero_video {
  text-align: center; /* Centrer le texte */
  font-family: "Gill Sans", sans-serif;
  font-size: 1em;
  line-height: 0.7;
  color: #1E2A38;
  margin-top: -0.5em;
}

/* Bouton "Précédent" modifié */
.bouton-precedent {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  margin: 0em 1em;
  margin-bottom: 0em;
  margin-top: -0.5em;
}
.bouton-precedent::before {
  content: "<";
  font-size: 2em;
  color: #1E2A38;
}

/* Bouton "Suivant" modifié */
.bouton-suivant {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  margin: 0em 1em;
  margin-bottom: 0em;
  margin-top: -0.5em;
}
.bouton-suivant::before {
  content: ">";
  font-size: 2em;
  color: #1E2A38;
}


/* ===================== TIMELINE ===================== */
/* Conteneur de la timeline */
.conteneur_timeline {
  display: flex;
  justify-content: center;
  margin: 1em 0; /* rapproché des autres éléments */
}

/* La timeline elle-même */
.timeline_seule {
  width: 40%; /* 80% de la largeur du lecteur */
  height: 0.25em;
  background-color: #708090;
  position: relative;
  cursor: pointer;
  border-radius: 0.125em;
  /* Ajout d'une flèche à droite pour indiquer la fin */
}


/* Le curseur sur la timeline */
.curseur {
  position: absolute;
  top: -0.375em;
  left: 0%;
  width: 1em;
  height: 1em;
  background-color: #1E2A38;
  border-radius: 50%;
  box-shadow: 0 0 0.25em rgba(0,0,0,0.3);
  transition: left 0.1s;
}

/* ===================== LECTEUR VIDEO PRINCIPAL ===================== */
.lecteur-modif {
  width: 80%;
  max-width: 42.5em;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ===================== BOUTONS SOUS LE PLAYER (REMPLACER & FINIR) ===================== */
 
/* texte remplace par :*/
.texte-remplace-par {
  text-align: center; /* Centrer le texte */
  font-family: "Gill Sans", sans-serif;
  font-size: 1em;
  line-height: 0.7;
  color: #1E2A38;
  margin: 0.5em 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-style: italic;
}

/* Boutons pour remplacer */
.bouton-remplacer,
.bouton-remplacer-perso,
.bouton-nouvelle-video,
.choisir-video {
  margin-top: 0em;
  margin-bottom: 0em;
  display: inline-block;
  transition: all 0.2s ease-in;
  position: relative;
  overflow: hidden;
  z-index: 1;
  color: #1E2A38;
  padding: 0.5em 0.5em;
  cursor: pointer;
  font-size: 0.9em;
  border-radius: 0.5em;
  background: #F5F5F7;
  border: 0.2em solid #1E2A38;
}

.bouton-remplacer:before,
.bouton-remplacer-perso:before,
.bouton-nouvelle-video:before,
.choisir-video:before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.bouton-remplacer:after,
.bouton-remplacer-perso:after,
.bouton-nouvelle-video:after,
.choisir-video:after {
  content: "";
  position: absolute;
  left: 55%;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;
  width: 160%;
  height: 190%;
  background-color: #1E2A38;
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.bouton-remplacer:hover,
.bouton-remplacer-perso:hover,
.bouton-nouvelle-video:hover,
.choisir-video:hover {
  color: #F5F5F7;
  border: 0.0625em solid #1E2A38;
}

.bouton-remplacer:hover:before,
.bouton-remplacer-perso:hover:before,
.bouton-nouvelle-video:hover:before,
.choisir-video:hover:before {
  top: -35%;
  background-color: #1E2A38;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.bouton-remplacer:hover:after,
.bouton-remplacer-perso:hover:after,
.bouton-nouvelle-video:hover:after,
.choisir-video:hover:after {
  top: -45%;
  background-color: #1E2A38;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}


/* conteneur des modif de noms */
.conteneur_modif_noms {
  text-align: center;
  margin: 0em 0;
}

/* texte modifie les noms */
.texte_modifie {
  text-align: center; /* Centrer le texte */
  font-family: "Gill Sans", sans-serif;
  font-size: 1em;
  line-height: 0.7;
  color: #1E2A38;
  margin: 0.5em 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
  margin-bottom: 0.5em;
  font-style: italic;
  font-weight: normal; /* Ajouté pour enlever le gras */
}

.input_modif_nom_clip,
.input_modif_nom_groupe {
  width: 45%;
  padding: 0.3em;
  margin: 0 2%;
  font-size: 1em;
  border: 0.125em solid #1E2A38;
  border-radius: 0.5em;
  margin-bottom: 0.6em;
}

.text_placeholder_modif_nom::placeholder {
  color: #999;
  font-style: italic;
  font-size: 0.8em;
}




/* FILTRE */
.conteneur_modif_filtre {
  text-align: center;
  margin: 1em 0;
}

.texte_modifie_filtre {
  text-align: center;
  font-family: "Gill Sans", sans-serif;
  font-size: 1em;
  line-height: 0.7;
  color: #1E2A38;
  margin: 0.5em 0;
  font-style: italic;
  margin-bottom: 1em;
}


/* Style pour les checkbox des filtres */
.checkboxes_filtre label {
  font-family: "Gill Sans", sans-serif;
  font-size: 1em;
  color: #1E2A38;
  margin: 0.5em 0;
}


.check-box-modif-couleurs,
.check-box-modif-NB {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 1.2em;
  height: 1.2em;
  border: 0.125em solid #1E2A38;
  border-radius: 50%;            /* Forme ronde */
  background-color: #F5F5F7;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Au survol : changer le background */
.check-box-modif-couleurs:hover,
.check-box-modif-NB:hover {
  background-color: #F7CAC9;
}

/* Au clic ou sélectionné : background devient #580F41 */
.check-box-modif-couleurs:active,
.check-box-modif-NB:active,

.check-box-modif-couleurs:checked,
.check-box-modif-NB:checked {
  background-color: #1E2A38;
}

/* force l'alignement checkbox avec texte */
.check-box-modif-couleurs,
.check-box-modif-NB,
.texte_modifie_filtre {
  vertical-align: middle;
}







/* BOUTON J'AI FINI */
.bouton-fini {
  display: inline-flex;       /* Pour que le bouton s'adapte au contenu en ligne */
  align-items: center;          /* Centrage vertical du contenu */
  justify-content: center;      /* Centrage horizontal du contenu */
  position: relative;           /* Pour que les pseudo-éléments soient positionnés par rapport à ce bouton */
  font-family: "Gill Sans", sans-serif;
  font-size: 1rem;
  color: #1E2A38;            /* Couleur du texte par défaut */
  background: transparent;
  border: none;
  outline: none;
  padding: 0rem;
  transition: all 0.2s;
  margin-top: 2em;
}

/* Pseudo-élément pour le trait à gauche */
.bouton-fini::before {
  content: "";
  position: absolute;
  background-color: #1E2A38; /* Même couleur que le texte par défaut */
  height: 0.1em;
  width: 0;                 /* Pas visible par défaut */
  top: 50%;                 /* Centré verticalement */
  right: calc(100% + 0.5em);              /* Positionné juste à gauche du bouton */
  transform: translateY(-50%);
  transition: width 0.5s ease;
}

/* Pseudo-élément pour le trait à droite */
.bouton-fini::after {
  content: "";
  position: absolute;
  background-color: #1E2A38;
  height: 0.1em;
  width: 0;
  top: 50%;              /* Centré verticalement */
  left: calc(100% + 0.5em);            /* Positionné juste à droite du bouton */
  transform: translateY(-50%);
  transition: width 0.5s ease;
}

/* Au survol, les traits s'étendent à 2em */
.bouton-fini:hover::before {
  width: 2em;
}

.bouton-fini:hover::after {
  width: 2em;
}

/* ===================== FENÊTRE DE PRÉVISUALISATION PEXEL ===================== */
/* PREVISUALISATION "une des videos pexel" */
.fenetre-preview {
  display: none;
  position: fixed;
  top: 40%;
  left: 49%;
  transform: translate(-50%, -50%);
  background: #F5F5F7;
  border: 0.0625em solid #ccc;
  padding: 1.25em;
  margin: 1em;
  z-index: 1000;
  width: 70%;
  max-width: calc(100% - 2em); /* marge de 1em de chaque côté */
  box-shadow: 0 0.25em 0.5em rgba(0,0,0,0.2);
}


/* TITRE FENETRE PREVU PEXEL */
.titre-preview {
  color:#1E2A38;
  font-size: 1.2em;
  font-weight: normal;
  text-transform: none;
  text-align: center;
  margin-top: -0.5em;
}

.lecteur-previsualisation {
  width: 100%;
  max-width: 42.5em;
  height: auto;
  display: block;
  margin: 0 auto;
}



/* Boutons dans la fenêtre de prévisualisation */
.modal-buttons {
  display: flex;
  justify-content: center;
  margin-top: 1.25em;
}

.bouton-nouvelle-video,
.choisir-video {
  font-size: 0.75em;
  padding: 0.625em 1.25em;
  margin: 0 0.625em;
}

/* Croix pour fermer la prévisualisation */
.croix-ferme-fenetre {
  position: absolute;
  top: 0.3125em;
  right: 0.625em;
  font-size: 1.125em;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}



/* ===================== FENÊTRE DE PRÉVISUALISATION PERSO ===================== */
.fenetre-preview-video-perso {
  display: none;
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #F5F5F7;
  border: 0.125em solid #1E2A38;
  border-radius: 0.625em;
  padding: 1.5em;
  max-width: 60%;
  width: 90%;
  z-index: 1500;
}

/* Titre "Choisis le passage" */
.H2-video-perso {
  color:#1E2A38;
  font-size: 1.2em;
  font-weight: normal;
  text-transform: none;
  text-align: center;
  margin-top: 1em;
}

/* Input file + bouton "Charger la vidéo" */
#fileVideoPerso {
  display: block;       /* S’assure qu’il occupe toute la ligne */
  margin: 1em auto;     /* Le centre horizontalement */
}


.bouton-charger-video {
  display: block;
  margin: 0 auto 1em auto;
  padding: 0.5em 1em;
  font-size: 0.9em;
  background: #F5F5F7;
  border: 0.125em solid #1E2A38;
  border-radius: 0.5em;
  color: #1E2A38;
  cursor: pointer;
}

.bouton-charger-video:disabled {
  background: #ccc;
  color: #999;
  border-color: #999;
  cursor: not-allowed;
}

/* Textes d'erreur */
.texte-3min-max,
.texte-400mo-max,
.texte-400mo-3min-max {
  margin: 0.5em auto;
  text-align: center;
  font-size: 0.9em;
  color: #c00;
  display: none; /* On les affichera en JS */
}
.erreur_segment_trop_court {
  color: red;
  font-family: "Gill Sans", sans-serif;
  font-size: 1em;
  margin-top: 0.5em;
  text-align: center;
}


/* Lecteur local */
#previewLocalPlayer {
  width: 100%;
  margin: 1em 0;
}

/* Texte "met le curseur..." */
.texte-seq-voulue {
  font-size: 0.9em;
  color: #1E2A38;
  text-align: center;
  margin-bottom: 0.75em;
  margin-top: -1em;
  margin-bottom: 1em;
}

/* Bouton "ok" (choix passage) */
.bouton-ok-choix-passage {
  display: block !important; /* Force l'affichage en bloc */
  margin: 1em auto;          /* Centre horizontalement le bouton */
  padding: 0.5em 1em;
  font-size: 0.9em;
  background: #F5F5F7;
  border: 0.125em solid #1E2A38;
  border-radius: 0.5em;
  color: #1E2A38;
  cursor: pointer;
  text-align: center;
  margin-bottom: -0.5em;
}



/* L'animation d'attente + texte */
.animation-attente-upload-video {
  width: 4em;
  height: 4em;
  margin: 1em auto;
  background-image: url("../img/arrow-upload.gif"); /* exemple, chargez votre animation */
  background-repeat: no-repeat;
  background-size: contain;
}

.texte-attente-upload-video {
  font-size: 1em;
  color: #1E2A38;
  text-align: center;
  margin-bottom: 1em;
}






/* ====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================*/
/* --------#LECTEUR_ZAP-------- */



/* CONTENEUR GLOBAL */
#playerWrapper {
  position: relative;
  width: 40vw;
  height: calc(40vw * 0.5625); /* Ratio 16:9 */
  margin: 4em auto 0 auto;
  background: black;
  margin-bottom: 15em;
}



/* CONTENEUR DES VIDEOS */
.container_video_player_A_B {
  position: absolute; /* ou fixed, selon le contexte */
  left: 50%;
  transform: translateX(-50%);
  width: 200%;
  height: 200%;
  background: black;
}



/* Plein écran pour le conteneur vidéo */
.container_video_player_A_B:-webkit-full-screen,
.container_video_player_A_B:-moz-full-screen,
.container_video_player_A_B:-ms-fullscreen,
.container_video_player_A_B:fullscreen {
  width: 100vw;
  height: 100vh;
  margin: 0;
}

/* Styles pour les vidéos dans le conteneur */
.container_video_player_A_B video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translate(-50%, -50%);
}




/* BOUTON GRAND ECRAN */
.bouton_grand_ecran {
  display: inline-block;
  transition: all 0.2s ease-in;
  position: absolute;
  transform: translateX(-50%);
  top: -3em; /* Positionné au-dessus du conteneur des vidéos ; ajustez cette valeur si besoin */
  left: 50%;
  overflow: hidden;
  z-index: 1;
  color: #1E2A38;
  padding: 0.5em 0.5em;
  cursor: pointer;
  font-size: 0.9em;
  border-radius: 0.5em;
  background: #F5F5F7;
  border: 0.2em solid #1E2A38;
}

.bouton_grand_ecran:active {
  color: #666;
  box-shadow: inset 0.25em 0.25em 0.75em #c5c5c5, inset -0.25em -0.25em 0.75em #F5F5F7;
}

.bouton_grand_ecran:before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.bouton_grand_ecran:after {
  content: "";
  position: absolute;
  left: 55%;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;
  width: 160%;
  height: 190%;
  color: #F5F5F7;
  background-color: #1E2A38;
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.bouton_grand_ecran:hover {
  color: #F5F5F7;
  border: 0.0625em solid #1E2A38;
}

.bouton_grand_ecran:hover:before {
  top: -35%;
  background-color: #1E2A38;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.bouton_grand_ecran:hover:after {
  top: -45%;
  background-color: #1E2A38;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}














/* ====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================*/
/* --------#WTV visonneuse-------- */





/* Conteneur principal de la page WTV */
.wtv_container {
  max-width: 75em; 
  margin: 0 auto;
  padding: 1em;
  text-align: center;
  position: relative;
  z-index: 1;
}



/* MENU DEROULANT*/
.paste-button {
  position: relative;
  display: block;
  font-family: "Gill Sans", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.button {
  background-color: #1E2A38;
  color: #F5F5F7;
  padding: 0.625em 0.9375em;
  font-size: 0.9375em;
  border: 0.125em solid transparent;
  border-radius: 0.9375em;
  cursor: pointer;
  margin-bottom: 0em;
}

.button::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.3125em; /* Espace entre le triangle et le texte */
  border-left: 0.3125em solid transparent;
  border-right: 0.3125em solid transparent;
  border-top: 0.3125em solid white; /* Triangle blanc pointant vers le bas */
}


.dropdown-content {
  display: none;
  font-size: 0.8125em;
  position: absolute;  /* Positionné par rapport à .paste-button */
  z-index: 1;
  min-width: 12.5em;
  background-color: #1E2A38;
  border: 0.125em solid #1E2A38;
  border-radius: 0em 0.9375em 0.9375em 0.9375em;
  box-shadow: 0em 0.5em 1em 0em rgba(0,0,0,0.2);
  left: 50%;       /* Centré par rapport au parent */
  top: 100%;       /* Juste en dessous du bouton */
  transform: translateX(-50%);
}



.dropdown-content a {
  color: #F5F5F7;
  padding: 0.5em 0.625em;
  text-decoration: none;
  display: block;
  transition: 0.1s;
}

.dropdown-content a:hover {
  background-color: #1E2A38;
  color: #F5F5F7;
}

.dropdown-content a:focus {
  background-color: #212121;
  color: #F5F5F7;
}

.dropdown-content #top:hover {
  border-radius: 0em 0.8125em 0em 0em;
}

.dropdown-content #bottom:hover {
  border-radius: 0em 0em 0.8125em 0.8125em;
}

.paste-button:hover button {
  border-radius: 0.9375em 0.9375em 0em 0em;
}

.paste-button:hover .dropdown-content {
  display: block;
}




/* VIDEOS */
#videos_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  
}

/* Conteneur de chaque vidéo et infos associées */
.conteneur_video_wtv {
  display: block;            /* Mode bloc pour occuper toute la largeur de son contenu */
  text-align: center;        /* Centrer le texte dans le conteneur */
  margin: 1em 0;
  padding: 1em;
  max-width: 40em;           /* Largeur max pour limiter l'espace en cas de contenu très large */
  background-color: rgba(255, 255, 255, 0.5);  /* Fond blanc */
  border-radius: 0.2em; /* Bords arrondis */
}

/* ajoute un espace sous la derniere video */
#videos_container .conteneur_video_wtv:last-child {
  margin-bottom: 8em;
}

/* ajoute un espace sur la 1ere video */
#videos_container .conteneur_video_wtv:first-child {
  margin-top: 3em;
}

/* Zone du lecteur vidéo */
.video_player {
  margin: 0em auto;          /* Centrage horizontal */
  width: 25em;               /* Largeur fixe pour le lecteur */
  
}
.video_player video {
  width: 100%;               /* Le lecteur occupe 100% de la largeur du conteneur */
  height: auto;
  
}






/* INFOS TEXTES */
.video-info-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5em;
}

.video-info-top .nom-groupe {
  font-weight: 500;
  font-size: 1em;
  color: #1E2A38;
}

/* Ligne inférieure : informations en deux colonnes */
.video-info-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Vous pouvez ajouter un margin-top au lien si besoin */
  gap: 0.5em;
}




/* NOM DU GROUPE */
.texte_nom_groupe {
  color: #1E2A38;
  font-weight: bold;
  font-size: 1em;
  margin-bottom: -1em;
}

/* LIEN MUSIQUE */
.texte_lien_musique {
  font-size: 0.9em;
  font-weight: normal;
  margin-top: -0.5em; /* Augmentez cette valeur pour plus d'espace */
  text-decoration: none;
}
.texte_lien_musique a {
  color: #1E2A38;
  text-decoration: underline;
  text-decoration: none;
}
.texte_lien_musique a:visited {
  color: #1E2A38;
  text-decoration: none;
}
.texte_lien_musique a:hover {
  color: #1E2A38;
  text-decoration: none;
}




/* FAVORIS */
.favoris-container {
  display: flex;
  align-items: center;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  cursor: pointer;
}

.favoris-icon {
  width: 1em;
  height: auto;
  margin-right: 0.3em;
}

.text-favoris {
  font-size: 0.9em;
  color: #1E2A38;
  text-decoration: none;
  cursor: pointer;
}

.audio-icon {
  width: 1em; /* Ajustez selon vos préférences */
  height: auto;
  margin-right: 0.3em; /* pour séparer l'image du texte */
  vertical-align: middle; /* pour aligner la base de l'icône avec le texte */
}


.text-favoris:hover {
  color: #1E2A38;
}

.favoris-likes-row {
  display: flex;
  align-items: center;
  justify-content: space-between; /* ou "flex-start" si vous préférez serrer à gauche */
  width: 100%;
  margin-bottom: 0.5em; /* petit espace en bas */
}

/* Le bloc qui contient le nombre de j'aime et le label j'aime */
.wtv-likes-block {
  display: flex;
  align-items: center;
  gap: 0.3em; /* espace entre le nombre et le mot "j'aime" */
}
/* Le nombre de j'aime */
.wtv-likes-number {
  color: #1E2A38;
}
/* Le texte "j'aime" (ou "likes") */
.text_j_aime_wtv {
  color: #1E2A38;
  font-size: 0.9em; /* ajustez selon vos goûts */
  cursor: default;  /* pas cliquable */
}




/* TEXTE PSEUDO*/
.creator-info {
  font-family: "Gill Sans", sans-serif;
  text-align: right;
  font-style: italic; /* exemple de style */
}


.creator-info a {
  text-decoration: none; /* enlève le soulignement */
  color: inherit;        /* optionnel : garde la même couleur que le parent */
}

.creator-info a:hover {
  text-decoration: underline; /* si vous souhaitez remettre un soulignement au survol, sinon mettez none */
}






/* SIGNALEMENT*/
.texte_inapropriate_wtv {
  margin-top: 0.5em;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.texte_inapropriate_wtv .report_inappropriate_btn {
  font-family: "Gill Sans", sans-serif;
  font-size: 0.9em;
  color: #1E2A38; /* Couleur d'exemple */
}
.texte_inapropriate_wtv .report_inappropriate_btn:hover {
  color: #1E2A38;
}


.signale-icon {
  width: 1em; /* Ajustez selon vos préférences */
  height: auto;
  margin-right: 0.3em; /* pour séparer l'image du texte */
  vertical-align: middle; /* pour aligner la base de l'icône avec le texte */
}


/* admin : nom de la video */
.admin-video-name {
  text-align: center; /* Centrer le texte */
  font-family: "Gill Sans", sans-serif;
  font-style: italic; /* Met le texte en italique */
  font-size: 1em;
  line-height: 0.7;
  color: #1E2A38;
  margin: 0.5em 0;
  margin-top: 1em;
  margin-left: auto;
  margin-right: auto;
}


/* POPUP #1 et #2 fond */
.popup_fond-decran {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1E2A38;
  opacity: 0.7;
  z-index: 4500; /* Doit être inférieur aux popups (5000 et 6000) */
}


/* POPUP #1 */
.popup_signalement {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #FFFFFF;
  border: 0.125em solid #1E2A38;
  border-radius: 0.625em;
  padding: 2em;
  z-index: 5000; /* Au-dessus des autres */
  width: 20em;
}

/* TITRE POPUP1  */
#wtv-report-popup-title {
  color:#1E2A38;
  font-size: 1.5em;
  font-weight: normal;
  text-transform: none;
  margin-top: 0em;
  margin-bottom: 1em;
  text-align: center;
}

.popup_signalement_inner {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.croix_fermer_signalement {
  position: absolute;
  top: 0.3em;
  right: 0.5em;
  font-size: 1.4em;
  cursor: pointer;
}

/* Inputs de signalement */
.input_signalement {
  font-family: "Gill Sans", sans-serif;
  font-size: 0.9em;
  border: 0.125em solid #ccc;
  border-radius: 0.3125em;
  padding: 0.4em;
  outline: none;
}
.input_signalement:focus {
  border-color: #1E2A38;
}

.erreur_format_timing {
  text-align: center; /* Centrer le texte */
  font-family: "Gill Sans", sans-serif;
  font-size: 1em;
  line-height: 0.7;
  color: #1E2A38;
  margin: 0.5em 0;
  margin-left: auto;
  margin-right: auto;
}



/* Bouton envoyer */
.bouton_envoyer_signalement {
  margin-top: 1em;
  margin-bottom: 1em;
  display: inline-block;
  transition: all 0.2s ease-in;
  position: relative;
  overflow: hidden;
  z-index: 1;
  color: #1E2A38;
  padding: 0.5em 0.5em;
  cursor: pointer;
  font-size: 0.9em;
  border-radius: 0.5em;
  background: #F5F5F7;
  border: 0.2em solid #1E2A38;
  box-shadow: 0.375em 0.375em 0.75em #c5c5c5, -0.375em -0.375em 0.75em #F5F5F7;
}

.bouton_envoyer_signalement:active {
  color: #666;
  box-shadow: inset 0.25em 0.25em 0.75em #c5c5c5, inset -0.25em -0.25em 0.75em #F5F5F7;
}

.bouton_envoyer_signalement:before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.bouton_envoyer_signalement:after {
  content: "";
  position: absolute;
  left: 55%;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;
  width: 160%;
  height: 190%;
  color: #F5F5F7;
  background-color: #1E2A38;
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.bouton_envoyer_signalement:hover {
  color: #F5F5F7;
  border: 0.0625em solid #1E2A38;
}

.bouton_envoyer_signalement:hover:before {
  top: -35%;
  background-color: #1E2A38;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.bouton_envoyer_signalement:hover:after {
  top: -45%;
  background-color: #1E2A38;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}




/* POPUP #2 : confirmation "Signalement envoyé" */
.popup_signalement_envoye {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.95);
  border: 0.125em solid #1E2A38;
  border-radius: 0.625em;
  width: 18em;
  padding: 1.5em;
  text-align: center;
  z-index: 6000; /* Au-dessus du #1 */
}
.texte_popup_signalement_envoye {
  font-family: "Gill Sans", sans-serif;
  font-size: 1em;
  color: #1E2A38;
  margin: 0;
}




/* ------------------------------------------------------------------
   PARTAGE WTV
------------------------------------------------------------------ */

/* texte du bouton partager */
.text_partager_wtv {
  font-family: "Gill Sans", sans-serif;
  font-size: 0.9em;
  color: #1E2A38; /* Couleur d'exemple */
}

.conteneur_global_share {
  display: flex;
  gap: .5rem;
  margin-top: 1rem;
}

.texte_share_wtv {
  margin-top: .4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  gap: 0.5em;
}

.bouton_share_sur_wtv {
  width: 1.2em;
  height: 1.2em;
  /* icône grise par défaut */
  content: url("/static/img/share-gris.png");
  transition: transform .2s;
}

.bouton_share_sur_wtv:hover {
  /* au survol, on bascule sur l’icône bleue */
  content: url("/static/img/share-bleu.png");
  transform: scale(1.1);
}

/* ---- popup partage ---- */
.popup_share_wtv {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  padding: 1.6rem 2rem;           /* inchangé, rem ok */
  border-radius: .5em;           /* 8px → 0.5em */
  box-shadow: 0 .5em 1.25em rgba(0,0,0,.25); /* 8px → 0.5em, 20px → 1.25em */
  z-index: 5000;
  max-width: 90%;
  width: 28.75em;                /* 460px → 28.75em */
}


#wtv-share-url-input {
  flex: 1;
  padding: .4rem .6rem;
  font-size: .95rem;
  border: 0.1em solid #708090;
  border-radius: .25em;          /* 4px → 0.25em */
  background: #F5F5F7;
  width: 100%;
}

.bouton_copie_url_wtv {
  padding: .4rem .8rem;
  border: none;
  background: #1E2A38;
  color: #F5F5F7;
  border-radius: .50em;          /* 4px → 0.25em */
  cursor: pointer;
}

.bouton_copie_url_wtv:hover {
  filter: brightness(1.1);
}

.message_url_copie_wtv {
  margin-top: .7rem;
  font-size: .9rem;
  color: #708090;
  text-align: center;
  display: none;
}

.close_share_popup_wtv {
  position: absolute;
  top: .4rem; right: .6rem;
  font-size: 1.2rem;
  cursor: pointer;
}






/* PUB */
.fixed-ad-wtv {
  display:none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  width: 120px;
  height: 600px;
}


.fixed-ad-wtv.left {
  left: 0;
}

.fixed-ad-wtv.right {
  right: 0;
}





/* ====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================*/
/* --------#PROFIL PERSO-------- */

/* PETITS TITRES */

.H2-profil-perso {
  color: #1E2A38;
  font-size: 1.2em;
  font-weight: 550;
  text-transform: none;
  margin-top: 4em;
  margin-bottom: 1em;
  text-align: center;
  padding: 0.2em 0.4em;          /* Ajoute de l'espace autour du texte */
  border: 0.1em solid #1E2A38;  /* Bordure avec une couleur contrastée */
  border-radius: 0.3em;          /* Coins arrondis pour un look moderne */
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Ombre légère pour l'effet de profondeur */
  display: inline-block;       /* Pour que la largeur s'adapte au contenu */
}

/* NOM de USER */
.texte-nom-user {
  text-align: center; /* Centrer le texte */
  font-family: "Gill Sans", sans-serif;
  font-size: 1.2em;
  line-height: 0.7;
  color: #F5F5F7;
  margin: 0.5em 0;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.3); /* Ombre portée */
  letter-spacing: 0.1em;
}

/* fleche ! NOM de USER */
.texte-nom-user::before {
  content: "→ ";  /* Affiche une flèche suivie d'un espace */
  display: inline-block;
  margin-right: 0.2em; /* Ajoute un espacement entre la flèche et le texte */
  font-size: inherit;  /* Utilise la même taille de police que l'élément parent */
  color: inherit;      /* Utilise la même couleur que l'élément parent */
}


/* Conteneur général de la page personnelle */
.conteneur-page-perso {
  max-width: 32em; /* ajustez selon vos besoins */
  margin: 0 auto;
  text-align: center;
  padding: 2em;
}


/* CLIPS CREES */

/* FOND DES CLIPS CREES */
.clips-list-container {
  background-color: rgba(255, 255, 255, 0.5);  /* Fond blanc */
  padding: 1em;               /* Espace intérieur pour aérer */
  border-radius: 8px;         /* Coins arrondis */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Ombre légère pour le relief */
  margin: 1em auto;           /* Centré avec un léger espace vertical */
  max-width: 90%;             /* Vous pouvez ajuster selon votre mise en page */
}

/* graphisme des boutons liste clips */ 
.bouton-liste-clips {
  padding: 0.3em 0.5em;
  border: unset;
  border-radius: 0.5em;
  color: #212121;
  z-index: 1;
  background: #e8e8e8;
  font-family: "Gill Sans", sans-serif;
  position: relative;
  font-size: 1em;
  -webkit-box-shadow: 0.25em 0.5em 1.1875em -0.1875em rgba(0,0,0,0.27);
  box-shadow: 0.25em 0.5em 1.1875em -0.1875em rgba(0,0,0,0.27);
  transition: all 250ms;
  overflow: hidden;
}
 
.bouton-liste-clips::before {
  content: "";
  color:#e8e8e8;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: 0.5em;
  background-color: #1E2A38;
  z-index: -1;
  -webkit-box-shadow: 0.25em 0.5em 1.1875em -0.1875em rgba(0,0,0,0.27);
  box-shadow: 0.25em 0.5em 1.1875em -0.1875em rgba(0,0,0,0.27);
  transition: all 250ms;
}

 
.bouton-liste-clips:hover {
  color: #e8e8e8;
}
 
.bouton-liste-clips:hover::before {
  width: 100%;
}








/* Liste des clips créés ESPACEMENT */
.liste-clips-crees {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Aligne les éléments à gauche */
  margin: 0;             /* Supprime les marges automatiques */
  text-align: left;      /* Texte aligné à gauche */
  width: 100%;
  margin-bottom: 0em;
}


/* Chaque ligne de la liste est désormais en flex pour pouvoir contrôler l'espacement */
.liste-clips-crees li {
  display: flex;
  justify-content: center; /* Centre le contenu de chaque li */
  align-items: center;
  gap: 2em;
  margin-bottom: 0.5em;
}


/* Le lien pour visionner le clip prend toute la place disponible */
.liste-clips-crees li a.cc-clip-view {
  text-decoration: none;
  color: #1E2A38;
  text-align: left;
}

/* Le lien "Supprimer ce clip" conserve ses styles par défaut */
.liste-clips-crees li a.cc-clip-delete {
  text-decoration: none;
  color: #1E2A38;
  white-space: nowrap;
  font-size: 0.9em;
  cursor: pointer;
}

.cc-clip-delete {
  font-size: 0.9em;
  color: #1E2A38;
  text-decoration: none;
  cursor: pointer;
}

.cc-clip-delete:hover {
  color: #1E2A38;
}






/* LECTEURS */
/* Conteneur pour les lecteurs de clips favoris */
.conteneur_lecteur_profil_perso {
  margin-top: 1em;
}

/* Style pour chaque lecteur de clip favoris */
.lecteur_profil_perso {
  position: relative;
  width: 100%;
  max-width: 25em; 
  margin: 1em auto; /* espacement entre chaque */
  display: block;
  margin-top: -0.5em;
}



/* INFOS TOP */
/*  conteneur */
.conteneur_infos_clip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5em;
  padding: 0 0.5em;
  max-width: 25em; /* même largeur que le lecteur */
  margin-left: auto;
  margin-right: auto;
  overflow: hidden; /* optionnel pour cacher le débordement */
}

/*  nom du groupe */
.texte_nom_groupe_profil_perso {
  font-size: 1em;         /* Ajustez la taille si nécessaire */
  color: #1E2A38;         /* Couleur choisie */
  font-weight: bold;      /* Met en valeur le nom du groupe */
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Style pour le texte du créateur et ses infos */
.texte_createur_profil_perso {
  text-align: right;
  margin-left: auto; 
  font-family: "Gill Sans", sans-serif;
  font-size: 1em;
  line-height: 0.7;
  color: #1E2A38;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.3em;
}



/* VIDEOS FAVORIS */
/* FOND BLANC FAVORIS */
.conteneur_video_favori {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 0.8em 0.5em 0em 0.5em; /* top, right, bottom, left */
  margin-bottom: 2em;
  border-radius: 0.5em;
  box-shadow: 0 0.25em 0.5em rgba(0,0,0,0.1);
}

/* Conteneur des favoris placé dans le flux normal, sous le lecteur */
.favoris-container-profil-perso {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -0.5em;  /* espace entre le lecteur et le bloc favoris */
  margin-bottom: 3em;
  border-radius: 0.25em;
}

/* Style de l'icône */
.favoris-icon-profil-perso {
  width: 1em;
  height: auto;
  margin-right: 0.5em;
}

/* Style du texte */
.text-favoris-profil-perso {
  font-size: 0.9em;
  color: #1E2A38;
  text-decoration: none;
  cursor: pointer;
}

.pas_de_favoris {
  text-align: center; /* Centrer le texte */
  font-family: "Gill Sans", sans-serif;
  font-size: 1em;
  line-height: 0.7;
  color: #1E2A38;
  margin: 0.5em 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 8em;
}

/* BOUTONS SUPP DES FAVORIS */
.btn-toggle-favoris {
  cursor: pointer;
  background-color: transparent;
  border-radius: 0.5em;
  padding: 0.5em 1em;
  transition: background-color 0.3s, transform 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  margin-bottom: 1em;
}

.btn-toggle-favoris:hover {
  background-color: transparent;
  transform: translateY(-2px);
}






/* ---- CHANGE MDP ---- */
.texte_modif_mdp {
  display: block;
  font-family: "Gill Sans", sans-serif;
  margin: 1rem auto;
  text-align: center;
  cursor: pointer;
  color: #F5F5F7; /* violet clair, adapte si besoin */
  position: relative; /* Ajouté pour permettre le positionnement de l'ombre */
  z-index: 1; /* Assure que le texte est au-dessus de l'ombre */
}
/* OMBRE */
.texte_modif_mdp::before {
  content: "";
  position: absolute;
  top: -0.5em; /* Ajustez pour étendre l'ombre au-dessus du texte */
  left: 9em; /* Réduit la largeur de l'ombre */
  right: 9em; /* Réduit la largeur de l'ombre */
  bottom: -0.5em; /* Ajustez pour étendre l'ombre en dessous du texte */
  background: rgba(30, 42, 56, 0.3); /* #1E2A38 avec 30% d'opacité */
  z-index: -1; /* Place l'ombre derrière le texte */
  filter: blur(1.5em); /* Flou pour rendre l'ombre diffuse, en unités em */
  border-radius: 0.5em; /* Optionnel : arrondir les coins de l'ombre */
}


.input_change_mdp {
  width: 30%; /* 280px / 16px = 17.5em */
  max-width: 80%;
  margin: 0.5em auto;
  padding: 0.6em 0.8em;
  font-size: 0.9em;
  font-family: "Gill Sans", sans-serif;
  border: 0.0625em solid #888; /* 1px / 16px = 0.0625em */
  border-radius: 0.375em; /* 6px / 16px = 0.375em */
}

.bouton_changer_mdp {
  margin: 1em auto;
  padding: 0.5em 0.5em;
  font-size: 0.9em;
  font-family: "Gill Sans", sans-serif;
  background: #708090; /* Couleur mise à jour */
  color: #F5F5F7;
  border: none;
  border-radius: 0.375em; /* 6px / 16px = 0.375em */
  cursor: not-allowed;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.bouton_changer_mdp.enabled {
  cursor: pointer;
  opacity: 1;
}

.msg_change_mdp {
  text-align: center;
  font-size: 0.95em;
  color: #fff;
}

.texte_suivre_prog {
  display: block;
  background: transparent;
  border: none;
  font-family: "Gill Sans", sans-serif;
  font-size: 1em;
  color: #F5F5F7; /* violet clair, adapte si besoin */
  text-shadow: 0 0 0.8em rgba(30, 42, 56, 0.6);
  margin: 0.5rem auto;
  margin-top: -0.5em;
  text-align: center;
  cursor: pointer;
  position: relative; /* Ajouté pour permettre le positionnement de l'ombre */
  z-index: 1; /* Assure que le texte est au-dessus de l'ombre */
}








/* PUB */
.fixed-ad-profil {
  display:none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  width: 120px;
  height: 600px;
}

.fixed-ad-profil.left {
  left: 0;
}

.fixed-ad-profil.right {
  right: 0;
}










/* ====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================*/
/* --------#PROFIL-VISIT-------- */


/* PAGE PROFIL DU CREATEUR */
.profil_visit_container {
  max-width: 60em;
  margin: 3em auto; /* centre la zone */
  text-align: center;
  position: relative;
  z-index: 1; /* au-dessus de la vidéo de fond */
}

.profil_visit_video_block {
  margin: 2em 0;
}

.profil_visit_video_block video {
  width: 80%; 
  max-width: 43.75em;  /* par exemple */
  display: block;
  margin: 0 auto;
}

/* CONTENEUR VIDEO */
.conteneur_video_wtv_profil_visit {
  display: block;           
  text-align: center;       
  margin: 0em 0;
  padding: 1em;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0.5em;
  max-width: 40em; /* limite la largeur */
  margin: 2em auto; /* centre horizontalement */
}

/* ajoute un espace sous la derniere video */
#videos_container .conteneur_video_wtv_profil_visit:last-child {
  margin-bottom: 8em;
}

/* ajoute un espace sur la 1ere video */
#videos_container .conteneur_video_wtv_profil_visit:first-child {
  margin-top: 3em;
}


/* LECTEUR */
.video_player_profil_visit {
  margin: 0 auto;
  width: 25em; /* Largeur fixe */
}
.video_player_profil_visit video {
  width: 100%;
  height: auto;
}

/* Bas : conteneur favoris (sous le player) */
.video-info-bottom-profil-visit {
  display: flex;
  align-items: center;
  justify-content: flex-start;  
  margin-top: 0.5em;
  margin-left: 0.3em;
  gap: 1em;
}

/* La partie supérieure gauche pour le nom du groupe */
.video-info-top-profil-visit {
  display: flex;
  align-items: center;
  justify-content: flex-start; 
  margin-bottom: 0.5em;
  margin-left: 0.3em; /* petit décalage */
}
.nom-groupe-profil-visit {
  font-size: 1em;
  color: #1E2A38;
  text-align: left;
  margin-left: 0.5em;
}

/* PUB*/
.fixed-ad-profil-visit {
  display:none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  width: 120px;
  height: 600px;
}

.fixed-ad-profil-visit.left {
  left: 0;
}

.fixed-ad-profil-visit.right {
  right: 0;
}





/* ====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================*/
/* --------#ERREUR-------- */



.erreur-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Gill Sans", sans-serif;
  color: #1E2A38; /* vous pouvez ajuster la couleur si nécessaire */
  position: relative;
  z-index: 1;
}

#erreur-title {
  color: #1E2A38;
  font-family: "Gill Sans", sans-serif;
  font-size: 1.2em;
  font-weight: normal;
  text-transform: none;
  text-align: center;
}

.conteneur-fond-blanc-erreur {
  background-color: rgba(255, 255, 255, 0.5);
  padding-top: 2em;
  padding-right: 4em;
  padding-bottom: 2em;
  padding-left: 4em;
  border-radius: 1em;         /* Coins arrondis */
  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
  margin: 2em auto;           /* Centrer horizontalement et ajouter un espace vertical */
  display: inline-block;      /* Ajuste la largeur au contenu */
}



/* ====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================*/
/* --------#LIMITE ATTEINTE-------- */


#limite-title {
  color: #1E2A38;
  font-family: "Gill Sans", sans-serif;
  font-size: 1.2em;
  font-weight: normal;
  text-transform: none;
  text-align: center;
}






/* ====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================*/
/* --------#CONTACT-------- */

.content-overlay-contact h1 {
  color:#1E2A38;
  font-size: 1.4em;
  font-weight: normal;
  text-transform: none;
  margin-top: -1em;
  margin-bottom: 1em;
  text-align: center;
}

.conteneur-fond-blanc-contact {
  background-color: rgba(255, 255, 255, 0.5);
  padding-top: 2em;
  padding-right: 3em;
  padding-bottom: 1em;
  padding-left: 3em;
  border-radius: 1em;         /* Coins arrondis */
  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
  margin: 2em auto;           /* Centrer horizontalement et ajouter un espace vertical */
  display: inline-block;      /* Ajuste la largeur au contenu */
}


.contact-content {
  text-align: center;
  padding: 2em;
  font-family: "Gill Sans", sans-serif;
  position: relative;
  z-index: 1;
  color: #1E2A38; /* Couleur du texte, modifiable selon vos besoins */
}
p {
  color: #1E2A38 /* Couleur bleue pour tous les paragraphes */
}







/* ====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================*/
/* --------#TOUS LES UTILISATEURS-------- */


/* Conteneur global pour la liste des utilisateurs */
.conteneur_liste_tous_les_utilisateurs {
  margin: 0em auto;
  max-width: 10em;
  display: flex;
  flex-direction: column;
  gap: 0em;
  text-align: center;
}

.conteneur-fond-blanc-tous-users {
  background-color: rgba(255, 255, 255, 0.5);
  padding-top: 2em;
  padding-right: 5em;
  padding-bottom: 2em;
  padding-left: 5em;
  border-radius: 1em;         /* Coins arrondis */
  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
  margin: 2em auto;           /* Centrer horizontalement et ajouter un espace vertical */
}




/* BOUTONS VERS UTILISATEURS */
/* Espacement entre les boutons */
.conteneur_liste_tous_les_utilisateurs .bouton_tous_les_utilisateurs {
  margin-bottom: 1em;
}

/* Marge plus grande uniquement sur le dernier bouton */
.conteneur_liste_tous_les_utilisateurs .bouton_tous_les_utilisateurs:last-child {
  margin-bottom: 8em;
}
/* boutons */
.bouton_tous_les_utilisateurs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: "Gill Sans", sans-serif;
  font-size: 1rem;
  color: #1E2A38;
  background: transparent;
  border: none;
  outline: none;
  padding: 0rem;
  transition: all 0.2s;
  cursor: pointer;
}

/* Traits à gauche et droite */
.bouton_tous_les_utilisateurs::before,
.bouton_tous_les_utilisateurs::after {
  content: "";
  position: absolute;
  background-color: #1E2A38;
  height: 0.1em;
  width: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: width 0.5s ease;
}

/* placement des traits */
.bouton_tous_les_utilisateurs::before {
  right: calc(100% + 0.1em);
}
.bouton_tous_les_utilisateurs::after {
  left: calc(100% + 0.1em);
}

/* Effet survol (les traits apparaissent) */
.bouton_tous_les_utilisateurs:hover::before,
.bouton_tous_les_utilisateurs:hover::after {
  width: 4em;
}






/* ====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================*/
/* --------#SHARE-------- */










.conteneur_global_share {
  position: relative;
  margin: 10em auto;
  padding-top: 2em;
  padding-left: 3em;
  padding-bottom: 2em;
  padding-right: 3em;
  display: flex!important;
  flex-direction: column!important;      /* empile titre + player verticalement */
  align-items: center!important;         /* centre le player horizontalement */
  justify-content: flex-start!important; /* place tout en haut */
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 1em;
  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
  max-width: 60%;
}

.player_video_share {
  width: 100%;        /* 70% de la largeur du conteneur */
  height: auto;
  border-radius: 0.5em;
  align-self: center; /* centre le player */
}

/* 1) ENTETE DE TITRE */
.share_header {
  display: flex;
  justify-content: space-between;  /* titre à gauche, groupe à droite */
  width: 100%;
}

.titre_video_share {
  align-self: flex-start;  /* colle à gauche du conteneur */
  margin-bottom: 0em;      /* espace avant la vidéo */
  font-family: "Gill Sans", sans-serif;
  font-size: 1.4em;
  line-height: 1.2;
  color: #1E2A38;
}

.groupe_video_share {
  align-self: flex-start;  /* s’aligne verticalement en haut de la ligne header */
  text-align: right;       /* texte right‑aligned à l’intérieur de son conteneur */
  /* hérite de la taille du bloc header, donc fin du mot = fin du player */
  font-family: "Gill Sans", sans-serif;
  font-size: 1.4em;
  line-height: 1.2;
  color: #1E2A38;
}

/* ligne pseudo sous le player */
.pseudo_video_share {
  margin-top: 1.3em;
  font-family: "Gill Sans", sans-serif;
  font-size: 1.2em;
  color: #1E2A38;
  text-align: center;
  width: 100%;
  text-decoration: underline;
}

.pseudo_video_share:hover {
  text-decoration: underline;
}















/* ====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================*/
/* --------#ADMIN-------- */



.H1-console-admin {
  color:#1E2A38;
  font-size: 1.8em;
  font-weight: normal;
  text-transform: none;
  margin-top: -1em;
  margin-bottom: 1em;
  text-align: center;
}

.bouton_admin_parametre {
  display: block;
  width: 12.5em;
  margin: 1em auto;
  padding: 0.75em;
  font-size: 1rem;
  font-family: "Gill Sans", sans-serif;
  color: #FFFFFF;
  background-color: #1E2A38;
  border: none;
  border-radius: 0.625em;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.bouton_admin_parametre:hover {
  background-color: #708090;
}

.bouton_admin_signalement {
  display: block;
  width: 12.5em;
  margin: 1em auto;
  padding: 0.75em;
  font-size: 1rem;
  font-family: "Gill Sans", sans-serif;
  color: #FFFFFF;
  background-color: #1E2A38;
  border: none;
  border-radius: 0.625em;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.bouton_admin_signalement:hover {
  background-color: #708090;
}

.bouton_admin_infos {
  display: block;
  width: 12.5em;
  margin: 1em auto;
  padding: 0.75em;
  font-size: 1rem;
  font-family: "Gill Sans", sans-serif;
  color: #FFFFFF;
  background-color: #1E2A38;
  border: none;
  border-radius: 0.625em;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.bouton_admin_infos:hover {
  background-color: #708090;
}

.bouton_admin_gestion_clips {
  display: block;
  width: 12.5em;
  margin: 1em auto;
  padding: 0.75em;
  font-size: 1rem;
  font-family: "Gill Sans", sans-serif;
  color: #FFFFFF;
  background-color: #1E2A38;
  border: none;
  border-radius: 0.625em;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-bottom: 8em;
}

.bouton_admin_gestion_clips:hover {
  background-color: #708090;
}



/* ---------------------------------------------- */
/* --------#gestion-------- */


.gestion-container > :last-child {
  margin-bottom: 8em;
}


/* ---------------------------------------------- */
/* --------#infos-------- */
#btn-users-clips-telecharges {
  margin-bottom: 8em;
}






/* ====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================*/
/* --------#MAINTENANCE-------- */


/* ==== Maintenance page ==== */
.maintenance-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;          /* Remplit la hauteur de la fenêtre */
  flex-direction: column; /* Si vous voulez ajouter du texte dessous */
}

.gif_maintenance {
  margin-top: -30em;
  width: 25%;  /* Ajustez selon vos besoins */
  max-width: 100%;
  height: auto;
  display: block;
}









/* ====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================*/
/* --------#PROGRESSION-------- */

.prog-clip-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0;
}


.texte_envoie_mail {
  min-width: 21em;
  display: table; /* Pour que l'élément soit de type bloc mais s'ajuste à la largeur du contenu */
  margin: 0 auto 1em auto; 
  color: #1E2A38;
  font-size: 1.1em;
  font-weight: normal;
  text-transform: none;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 0.5em 1em !important;
  border-radius: 0.6em;
  border: 0.1em solid #1E2A38;
  margin-bottom: 2em;
}

.prog-clip-block,
.clip-white-bg {
  min-width: 22em;
  background: rgba(255,255,255,0.70);
  border-radius: 0.6em;
  box-shadow: 0 2px 18px rgba(0,0,0,0.08);
  padding: 1.1em 1.6em 1.1em 1.6em;
  margin-bottom: 2.2em;
  display: inline-block;
  max-width: 400px;
  text-align: center;

}



.clip-date, .clip-status, .clip-estimee {
  display: block;
  margin-bottom: 0.45em;
  font-size: 1.1em;
}
.clip-status, .clip-estimee {
  margin-left: 0.2em;
}

#prog-total-clips {
  margin-bottom: 2em !important;
}

.progressbar_baby {
  width: 100%;
  max-width: 340px;
  height: 1.2em;
  background: #e9e9ec;
  border-radius: 0.6em;
  box-shadow: 0 1px 8px rgba(0,0,0,0.05);
  margin-top: 2em;
  margin-bottom: 2em;
  overflow: hidden;
  position: relative;
  display: block;
}

.progressbar_baby_inner {
  background: linear-gradient(90deg,  #eeba00 0%, #ffeb88 100%);
  height: 100%;
  width: 0;
  border-radius: 0.6em;
  transition: width 0.6s cubic-bezier(.4,1.3,.5,1); /* fluide ! */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #222;
  font-size: 0.9em;
  position: relative;
}

.progressbar_baby_text {
  width: 100%;
  text-align: center;
  z-index: 2;
  color: #222;
  font-size: 0.9em;
  position: relative;
  user-select: none;
}

.bouton_voir_clip {
  text-align: center; /* Centrer le texte */
  font-family: "Gill Sans", sans-serif;
  font-size: 1.1em;
  line-height: 0.7;
  color: #1E2A38;
  margin: 0.5em 0;
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: color 0.3s ease;
}

.bouton_voir_clip:hover,
.bouton_voir_clip:active {
  color: #580F41;
}








/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/* ++++++++ #entre 1023 et 821++++++++ */


/* --- Catégorie 2 : écrans en portrait de largeur inférieure ou égale à 1024px et supérieure à 412px --- */
@media screen and (max-width: 1023px) and (min-width: 821px) {
  /* Placez ici vos ajustements spécifiques pour la catégorie 2 en portrait */



/* BASE.HTML*/
  .logo {
    width: 11em;       /* passe de 13em à 10em */
    height: 11em;      /* idem */
    margin-left: 2em;  /* réduit l’écart à gauche */
  }
  /* boutons centraux */
  .header-middle button {
    font-size: 1.1em !important;        /* réduit la taille du texte */
    padding: 0.4em 0.8em;               /* moins de padding */
  }
  /* position “connecté avec” */
  .info_connexion_entete {
    position: absolute;
    top: -1em;
    right: 6em;
  }
  /*Texte “connecté avec” */
  #cc {
    font-size: 1.1em;   /* passe de 0.9em à 0.8em */
  }
  /*Icône “mon compte” */
  .compte-menu {
    top: 3.9em;      /* remonte légèrement */
    right: 7.5em; /* rapproche vers le centre */
    width: 1.3em;      /* largeur désirée */
    height: auto;    /* pour garder les proportions */
  }
  .compte-dropdown button {
    font-size: 0.9em;       /* Ajuste la taille du texte */
  }
  /* MENU DROITE si non connecté  */
  /* taille positionnement inscritpion et connexion */
  .header-right-buttons {
    left: -4em; /* Ajustez la valeur selon vos besoins */
    top: -1em;
  }
  .se_connecter_base,
  .inscription_base {
    font-size: 1em;
  }
  /* TEXTE "videos fournies par" */
  .texte_video_fourni_par {
    color: #F5F5F7;  /* Couleur souhaitée pour "Vidéos fournies par" */
    font-style: italic;
    font-size: 1.1em;
  }

  /* Remonte le texte "Vidéos fournies par Pexels ❤️" */
  #footer_videos_portrait{
    position: relative;
    top: -2.5em;          /* Monte de 2 em – ajustez selon votre goût */
    margin-bottom: 0;   /* (optionnel) annule le petit espace bas */
  }

  /* TEXTE/lien "Pexels ❤️" */
  .texte_pexel,
  .texte_pexel:link,
  .texte_pexel:visited {
    color: #F5F5F7 !important;
    font-size: 1.1em;
    font-style: italic;
    text-decoration: none;
    font-weight: 0.1em;
    
  }

  .texte_pexel:hover,
  .texte_pexel:active {
    color: #F7CAC9 !important;
    text-decoration: underline;
    text-decoration-thickness: 0.0625em; 
  }






/* CONNEXION.HTML"*/
  /* PUB */
  .fixed-ad-co {
    display:none;
    top: 60%;
  }





/* INSCRIPTION.HTML"*/
  /* conteneur */
  .conteneur_fond_blanc {
    width: 30%;
    margin: 0 auto; /* centre horizontalement */
  }
  /* PUB */
  .fixed-ad {
    top: 50%;
  }






/* INDEX.HTML"*/
  .intro-index-gif {
    width: 100%;           /* réduit la largeur à 40% de son conteneur */
  }






/* CHOIX.HTML"*/
.conteneur-fond-blanc {
  width: 60%;        /* passe à 60% de la largeur de son parent */
  margin: 1.5em auto;/* un peu d’espace vertical + centrage horizontal */
  padding: 1em;      /* réduire ou ajuster le padding si besoin */
}



/* PROFIL.HTML"*/
  /* 2) fond blanc liste clips */
  .clips-list-container {
    padding: 1em;      /* moins de padding */
    padding-left: 5em;
  }

  .texte-nom-user {
    font-size: 1.2em;
    margin: 0.3em 0;
  }

  .texte_modif_mdp {
    font-size: 1.2em;
    margin: 0.5em 0;
    margin-top: 2em;
  }
  .texte_suivre_prog {
    font-size: 1.2em;
    margin-top: 0.5em;
  }
  #pr-no-clip {
    font-size: 1em;     /* taille de texte réduite */
  }





/* PROFIL_VISIT.HTML"*/
  .nom-groupe-profil-visit {
    font-size: 0.9em;
    color: #1E2A38;
    text-align: left;
    margin-left: 0.5em;
  }


/* WTV.HTML"*/
  /* Règle pour élargir la pop-up et réduire sa hauteur */
  .popup_share_wtv {
    width: 50% !important;
    padding: 1em 1.5em;          /* moins de padding vertical */
    box-shadow: 0 .5em 1em rgba(0,0,0,0.25);
  }

  /* Optionnel : réduire un peu la taille du champ et du bouton interne */
  #wtv-share-url-input {
    font-size: 0.9em;
  }
  .bouton_copie_url_wtv {
    padding: 0.4em 0.8em;
    font-size: 0.9em;
  }






/* TOUS LES UTILISATEURS.HTML"*/
  /* 2) Conteneur blanc */
  .conteneur-fond-blanc-tous-users {
    display: inline-block;
    width: 40%;            /* passe de inline-block auto à 80% */
    padding: 1em;          /* ajoute de l’air autour */
  }




/* MAINTENANCE.HTML"*/
  /* 2) Agrandir le GIF */
  .gif_maintenance {
    width: 60%;           /* agrandit à 60% de la largeur de l’écran (ajuste si besoin) */
    height: auto;
  }





}









/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/* ++++++++ #entre 820 et 601++++++++ */


/* --- Catégorie 3 : écrans en portrait de largeur inférieure ou égale à 412px et supérieure à 375px --- */
@media screen and (max-width: 820px) and (min-width: 601px) {


/* BASE.HTML*/
  .h1-commun {
    font-size: 1.1em;
  }
  .logo {
    width: 7em;       /* passe de 13em à 10em */
    height: 7em;      /* idem */
    margin-left: 0em;  /* réduit l’écart à gauche */
    margin-right: 3em;
  }
  /* boutons centraux */
  .header-middle {
    gap: 1em;          /* passe de 3em à 2em */
  }
  .header-middle button {
    position: relative;
    left: 0em;    /* décale tout le groupe de boutons */
    font-size: 0.9em !important;        /* réduit la taille du texte */
    padding: 0.4em 0.8em;               /* moins de padding */
  }
  /* position “connecté avec” */
  .info_connexion_entete {
    position: absolute;
    top: 0em;
    right: 0em;
  }
  /*Texte “connecté avec” */
  #cc {
    font-size: 0.8em;   /* passe de 0.9em à 0.8em */
    margin: 0.3em 0.5em;/* moins d’espacement */
  }
  /*Drapeaux & icône mail */
  #contact-icon {
    top: 3em;     /* remonte un peu */
    left: -2em;   /* rapproche vers le centre */
    width: 1.6em;      /* largeur désirée */
    height: auto;    /* pour garder les proportions */
  }
  #lang-fr,
  #lang-en {
    top: 3em;     /* idem */
    left: -2em;   /* idem */
    width: 1.5em;      /* largeur désirée */
    height: auto;    /* pour garder les proportions */
  }
  /*Icône “mon compte” */
  .compte-menu {
    top: 2.9em;      /* remonte légèrement */
    right: 2.5em; /* rapproche vers le centre */
  }
  /*image de l'Icône “mon compte” */
  .compte-trigger > img {
    width: 1.7em;    /* ajustez à la taille que vous souhaitez */
    height: auto;
  }
  /*menu deroulant de “mon compte” */
  .compte-dropdown button {
    font-size: 0.7em;       /* Ajuste la taille du texte */
  }
  /* MENU DROITE si non connecté  */
  /* taille positionnement inscritpion et connexion */
  .header-right-buttons {
    left: -2em; /* Ajustez la valeur selon vos besoins */
    top: -1em;
  }
  .se_connecter_base,
  .inscription_base {
    font-size: 0.7em;
  }

  /* Bouton « Donate »*/
  .button_donate{
    position: relative;
    top: -1em;
    right: 0em;
    height: 1.7em;          /* demandé */
    width: auto;
  }
  

  /*texte video fourni par pexel */
  .texte_video_fourni_par {
    color: #F5F5F7;  
    font-style: italic;
    font-size: 1em;
  }
  .texte_pexel,
  .texte_pexel:link,
  .texte_pexel:visited {
    color: #F5F5F7 !important;  /* remplace #FF0000 par ta couleur */
    font-size: 1em;
  }
  /* on cible le paragraphe juste au-dessus de l’image leaderboard portrait */
  #footer_videos_portrait {
    /* ajustez la valeur selon le décalage désiré */
    position: relative;
    top: -1em;
    font-size: 0.9rem;  /* si vous voulez aussi réduire légèrement la taille */
  }






/* INDEX.HTML*/
  /* Rapetisse le GIF d’intro */
  .intro-index-gif {
    width: 500%;       /* ou un max-width fixe, ex. max-width: 15rem; */
    height: auto;
  }

  /* Remonte et ajuste la taille du logo actualiser */
  .actualiser-index {
    width: 5em; 
    height: auto;
    margin-top: 15em;
  }





  
/* CONNEXION.HTML"*/
  /* PUB */
  .fixed-ad-co {
    display:none;
    width: 15%;
    height: auto;
  }
  /* Nouveau conteneur pour le contenu de connexion avec fond blanc */
  .login-container {
    max-width: 55%;                    /* Même largeur que .connexion-content */
  }
  /* titre */
  .connexion-content h1 {
    font-size: 1em;     /* réduit la taille du titre */
  }
  /* labels, paragraphes */
  .connexion-content label,
  .connexion-content p,
  #lost-msg,
  #errorMessage {
    font-size: 0.7em;     /* texte un peu plus petit */
  }
  /* champs de saisie */
  .connexion-content input[type="email"],
  .connexion-content input[type="password"] {
    font-size: 0.7em;     /* réduit la police à l’intérieur */
  }
  /* rapetisser le texte tapé dans les inputs */
  .login-container .connexion-content input[type="email"],
  .login-container .connexion-content input[type="password"] {
    font-size: 0.7em; /* ou 0.9em selon ton goût */
  }
  /* boutons */
  .connexion-buttons .button_connexion_on_connexion_page,
  .bouton_mdp_perdu,
  .bouton_envoi_mail {
    font-size: 0.7em;     /* réduit le texte des boutons */
    padding: 0.5em 1em;   /* moins de padding */
  }
  /* le formulaire « mot de passe perdu » */
  #lost-form input,
  #lost-form button {
    font-size: 0.7em;
    padding: 0.4em 0.8em;
  }
  .button_connexion_on_connexion_page {
    margin-top: 2em;
    margin-bottom: 0em;
  }







/* INSCRIPTION.HTML"*/
  .conteneur_fond_blanc {
    width: 55%;
    margin: 0 auto; /* centre horizontalement */
  }
  /* PUB */
  .fixed-ad {
    width: 15%;
    height: auto;
  }

    #inscriptionTitle {
    font-size: 1em;     /* jouez sur la valeur pour obtenir la taille souhaitée */
    line-height: 1.2;
  }

  /* réduire les libellés (pseudo, email, mot de passe, etc.) */
  .inscription-content label {
    font-size: 0.7em;
  }

  /* réduire le texte des paragraphes d’erreur / d’info */
  .inscription-content p {
    font-size: 0.7em;
  }

  /* réduire les champs input */
  .inscription-content input {
    font-size: 0.7em;
    padding: 0.5em;      /* optionnel : réduire aussi leur padding */
  }

  /* réduire les boutons “envoyer le code” et “s’inscrire” */
  .inscription-content button {
    font-size: 0.7em;
    padding: 0.5em 1em;   /* ajustez si besoin */
  }

  #sendCodeButton {
    font-size: 0.7em;       /* taille du texte */
    padding: 0.4em 0.8em;   /* réduit le padding */
  }
  .mail_banned {
    font-size: 0.7em;
  }
  #verificationSuccessMsg {
    font-size: 0.7em;
  }








/* CHOIX.HTML */

  /* pubs*/
  .fixed-ad-choix-clip {
    display:none;
    width: 15%;      /* ou tout autre % que vous désirez */
    height: auto;    /* conserve le ratio de l’image */
  }
  .h1-commun-avec-fond {
    font-size: 0.9em!important;      /* réduire la taille */
    padding: 0.3em;        /* ajuster le padding si besoin */
  }

  /* 2) Tous les H2 */
  .texte_sous_titre,
  #cc-themes-heading,
  #cc-keywords-heading,
  #cc-effects-heading {
    font-size: 0.9em;        /* réduire la taille */
  }

  /* 3) Tous les textes « normaux » (labels, options, paragraphes sauf la checkbox « j’ai créé… ») */
  .texte_contenu,
  .cc-theme-option,
  .cc-effect-option,
  .texte_h2_plus_petit,
  .texte_contenu_creation {
    font-size: 0.7em;
  }

  /* 4) Les inputs textuels */
  .input_keyword,
  #input_nom_groupe,
  #input_lien_musique {
    font-size: 0.7em;
  }

  .input_nom_clip {
    font-size: 0.7em;
    margin-bottom: -1em;
  }

  .input_choix_fichier {
    font-size: 0.7em;       /* police plus petite */
  }

  /* boutons telecharger musique */
  #cc-download-btn {
    font-size: 0.7em;
    padding: 0.5em 1em;
  }
  /* boutons ok */
  .button_ok_choix_clip {
    font-size: 0.7em;
    padding: 0.5em 1em;
  }

  
  

/* WAIT-AUDIO.HTML et clip*/
  .fixed-ad-tous-les-wait {
    display:none;
    width: 15%;      /* ou tout autre % que vous désirez */
    height: auto;    /* conserve le ratio de l’image */
  }






/* LECTEUR */
  /* PUB */
  .ad-lecteur {
    display: none;
    position: fixed;
    top: 35%;
    width: 14%;      /* ou tout autre % que vous désirez */
    height: auto;    /* conserve le ratio de l’image */
  }
  /* conteneur fond blanc*/
  .conteneur_fond_blanc_lecteur {
    width: 65%;        /* passez à 90% du viewport */
    padding: 1em;      /* un peu moins de padding */
    margin: 0 auto;    /* centre horizontalement */
  }
  /* réduit la taille du titre du clip au-dessus du lecteur */
  #clipNameTitle {
    font-size: 0.9em;         /* adapte selon ton besoin */
    margin-top: 0em;
  }
  /* bouton modifier le clip*/
  .button_modif_final_clip {
    font-size: 0.7em;        /* par exemple 90% de la taille normale */
  }
  /* bouton share et download*/
  .button_download_final_clip,
  .bouton_share_sur_lecteur {
    width: 1em;  /* ou en % : ex. width: 8%; */
    height: auto;
  }
  /* 1) Contenant fond blanc */
  .container_no_video {
    width: 60%;           /* moins large */
    padding: 1em;         /* moins de padding */
    font-size: 0.9em;     /* texte global un peu plus petit */
  }

  /* 2) Texte à l’intérieur */
  .container_no_video p {
    font-size: 0.9em;     /* réduire la taille du texte */
    line-height: 1.3;     /* garde une bonne lisibilité */
  }

  /* 3) Bouton « C’est parti » */
  .container_no_video .bouton_recreer_clip {
    padding: 0.5em 1em;   /* bouton plus compact */
    font-size: 0.8em;     /* texte du bouton plus petit */
  }
  





/* MODIFICATIONS.HTML*/
  /* 1) On rapetisse le « cadre » blanc */
  .conteneur_tout_modif {
    width: 55%;        /* passe de 100% à 80% de la largeur */
    margin: 1em auto;  /* recentre horizontalement et ajoute un peu d’espace vertical */
    padding: 2em;      /* si vous aviez un padding fixe, vous pouvez le réduire ici */
  }
  .h1-modif {
    font-size: 1em;  /* ou la valeur que tu préfères */
  }
  /* rapetisser le compteur “vidéo n°…” */
  .texte_numero_video {
    font-size: 0.9em; /* ajuste la valeur selon ton goût */

  }  
  /* bouton precedent et suivant*/
  .conteneur_boutons_defile .bouton-precedent,
  .conteneur_boutons_defile .bouton-suivant {
      font-size: 0.7em;
  }

  /* 2) On rapetisse le lecteur vidéo */
  #videoPlayer,
  .lecteur-modif {
    width: 100%;       /* prend 100% de son parent (qui fait maintenant 80% de l’écran) */
    height: auto;      /* conserve les proportions */
  }
  /*2) boutons par... */
  .bouton-remplacer,
  .bouton-remplacer-perso {
    font-size: 0.7em;      /* réduire la taille du texte */
    padding: 0.4em 0.8em;  /* réduire l’espacement intérieur */
  }


  /*POPUP "une de tes videos"*/
  .fenetre-preview-video-perso {
    width: 55%;
  }
  /*  POPUP "une videos pexel"*/
  .fenetre-preview {
    width: 55%;
  }

  /* Titre « Choisis ta vidéo » (pop-up perso) */
  .fenetre-preview-video-perso h2,
  #videoPersoTitle {
    font-size: 1em;        /* réduit la taille du titre */
  }

  /* — réduire la taille des libellés textes — */
  .texte-remplace-par,
  .texte_modifie,
  .texte_modifie_filtre,
  #preview-title,
  #videoPersoChoosePassage,
  .texte-seq-voulue {
    font-size: 0.8em;
  }

  /* — réduire les boutons de sélection / prévisualisation — */
  .bouton-charger-video,      /* « Charger la vidéo » */
  .bouton-ok-choix-passage,   /* « ok » */
  .choisir-video,             /* « Cette vidéo me plaît » */
  .bouton-nouvelle-video {    /* « Voir une autre vidéo » */
    font-size: 0.7em;
  }

  /* — réduire les champs de saisie — */
  .input_modif_nom_clip,
  .input_modif_nom_groupe {
    font-size: 0.8em;
  }
    /* rapetisser les libellés “couleurs” et “noir et blanc” */
  .text-modif-couleurs,
  .text-modif-NB {
    font-size: 0.8em;
  }

  /* — agrandir le bouton « J'ai fini de modifier » — */
  .bouton-fini {
    font-size: 0.9em;
  }

  







/* WTV.HTML"*/
  .h1-commun {
    font-size: 1em; /* au lieu de 2rem par exemple */
  }
  /* bouton a trier"*/
  #wtv-dropdownButton {
    font-size: 0.8em;     /* 75% de la taille courante (à ajuster) */
    padding: 0.5em 0.5em;  /* et tu peux réduire un peu les paddings si besoin */
  }

  /* Réduit la largeur de chaque carte et centre */
  .conteneur_video_wtv {
    width: 60%;
    margin: 1em auto;   /* espace vertical + centrage horizontal */
    padding: 1em;          /* <— ici : 1em tout autour */
  }

  /* on s’assure que le wrapper prend toute la largeur disponible */
  .conteneur_video_wtv .video_player {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* la vidéo elle‐même fait 60% du conteneur et reste centrée */
  .conteneur_video_wtv .video_player video {
    width: 100%;
    height: auto;
  }

  /* Ajuste la taille de la typo dans la carte */
  .conteneur_video_wtv .nom-groupe,
  .conteneur_video_wtv .creator-info,
  .conteneur_video_wtv .texte_lien_musique,
  .conteneur_video_wtv .texte_inapropriate_wtv,
  .conteneur_video_wtv .texte_share_wtv,
  .conteneur_video_wtv .favoris-likes-row,
  .conteneur_video_wtv .wtv-likes-block {
    font-size: 0.8em;  /* réduis légèrement la police */
  }
  /* ---- popup partage ---- */
  .popup_share_wtv {
    background: transparent;
    box-shadow: 0 .5em 1.25em rgba(0,0,0,.0); /* 8px → 0.5em, 20px → 1.25em */

  }
  .close_share_popup_wtv {
    top: 10em;
    right: 4.5em;
    z-index: 2000;
  }
  /* —— Popup de signalement (1) —— */
  .popup_signalement {
    /* largeur et hauteur */
    width: 60%;           /* ex : 400px environ */
    padding: 1.5em 1em;    /* moins de padding vertical */
  }

  /* le conteneur interne (titre + inputs + bouton) */
  .popup_signalement_inner {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.75em;           /* espace entre les éléments */
    font-size: 0.8em;      /* taille de police un peu plus petite */
  }

  /* titre de la popup */
  #wtv-report-popup-title {
    font-size: 1em;     /* réduit de 1.5em à 1.25em */
    margin-bottom: 0.75em;
  }

  /* boutons et champs */
  .input_signalement {
    font-size: 0.85em;
    padding: 0.35em;
    width: 70%;
    
  }
  .bouton_envoyer_signalement {
    font-size: 0.85em;
    padding: 0.4em 0.6em;
    width: 40%;
  }

  /* —— Popup de confirmation (2) —— */
  .popup_signalement_envoye {
    width: 50%;           /* ex : 320px */
    padding: 1em;
  }
  .texte_popup_signalement_envoye {
    font-size: 0.8em;      /* taille de police de la phrase */
    line-height: 1;      /* hauteur de ligne un peu plus confortable */
  }


  /* PUB */
  .fixed-ad-profil {
    display:none;
    position: fixed;
    top: 60%;
    width: 14%;      /* ou tout autre % que vous désirez */
    height: auto;    /* conserve le ratio de l’image */
  }






  


/* SHARE.HTML */
  /* Réduit le conteneur principal et le centre */
/* 1) Le conteneur blanc prend 75% ou 90% selon ton break-point */
.conteneur_global_share {
  margin-top: 1em!important;
  width: 70% !important;        /* ou 90% si tu veux */
  max-width: none !important;   /* écrase l’ancienne limite */
  padding: 1em !important;    /* padding plus fin */
  margin: 1em auto;             /* centré */
}

/* 2) Le lecteur occupe 100% du conteneur */
.player_video_share {
  width: 100% !important;
  height: auto;
}

/* 3) L’en-tête fait 100% et distribue bien l’espace */
.share_header {
  display: flex !important;
  justify-content: space-between;
  width: 100% !important;
  padding: 0;                   /* supprime tout padding résiduel */
  margin: 0;                    /* supprime toute marge */
}

/* 4) Les titres collés aux bords */
.share_header .titre_video_share,
.share_header .groupe_video_share {
  margin: 0;                    /* plus de marge */
  padding: 0;                   /* plus de padding */
  font-size: 0.9em;             /* ta taille responsive */
}

/* 5) Le pseudo sous le player */
.pseudo_video_share {
  width: 100% !important;
  font-size: 0.9em;
  margin: 0.5em 0 0;            /* petit espace au-dessus seulement */
}








/*PROFIL*/
  /* ——— CONTENEUR ET TITRES ——— */
  .conteneur-page-perso {
    max-width: 65%;
    padding: 1em;
  }
  /* H1 “Tu es sur ta page personnelle” */
  .h1-commun#pr-main-title {
    font-size: 1em;
    margin-top: 1em;
    margin-bottom: 0.5em;
  }
  /* Texte d’accueil (pseudo) */
  .texte-nom-user {
    font-size: 1em;
    margin: 0.3em 0;
  }
  /* Lien “Modifier mon mot de passe” */
  .texte_modif_mdp {
    font-size: 1em;
    margin: 0.5em 0;
    margin-top: 2em;
  }
  .texte_suivre_prog {
    font-size: 1em;
    margin-top: 0.5em;
  }

  /* ——— FORMULAIRE MDP ——— */
  #pwd-change-container .input_change_mdp {
    width: 50%;
    height: 1em;
    font-size: 0.7em;
    margin: 0.4em auto;
  }
  #pwd-change-container #btn-change-pwd {
    font-size: 0.7em;
    padding: 0.4em 0.6em;
    width: 30%;
  }

  /* ——— TITRES SECONDAIRES H2 ——— */
  .H2-profil-perso {
    font-size: 0.9em;
    margin-top: 2em;
    margin-bottom: 0.5em;
    padding: 0.1em 0.3em;
  }

  /* ——— CLIPS CRÉÉS ——— */
  .clips-list-container {
    padding: 0.5em;
  }
  .liste-clips-crees li {
    gap: 1em;
    margin-bottom: 0.3em;
  }
  .bouton-liste-clips {
    font-size: 0.8em;
    padding: 0.2em 0.4em;
  }
  .cc-clip-delete {
    font-size: 0.8em!important;
  }

  /* ——— FAVORIS ——— */
  .conteneur_video_favori {
    margin-bottom: 1em;
  }
  .favoris-icon,
  .favoris-icon-profil-perso {
    width: 0.8em;   /* ajuste à la taille désirée, ex. 0.8em ou 1em */
    height: auto; /* garde l’aspect ratio */
  }
  .lecteur_profil_perso {
    width: 100%;
    margin: 0.5em auto;
  }
  .texte_nom_groupe_profil_perso,
  .texte_createur_profil_perso {
    font-size: 0.7em;
  }
  .text-favoris-profil-perso {
    font-size: 0.7em;
  }
  .pas_de_favoris {
    font-size: 0.7em;
    margin-bottom: 4em;
  }








/* TOUS LES UTILISATEURS*/
  /*titre */
  #tlu-title {
    font-size: 0.8em;       /* ou 1em selon ton goût */
    margin: 0.5em 0;        /* réduit l’espace au-dessus/ci-dessous */
  }
  /* Réduit la largeur du conteneur blanc */
  .conteneur-fond-blanc-tous-users {
    display: inline-block !important;
    width: 20% !important;       /* passe de auto/100% à 90% de l’écran */
  }

  /* Les “boutons” utilisateurs (div cliquables) */
  .bouton_tous_les_utilisateurs {
    font-size: 0.8em;         /* rapetisse le texte */
    display: block;           /* force un retour à la ligne */
    width: auto;
    max-width: 100%;
  }





/* PROFIL-VISIT.HTML */
  /* PUB */
  .fixed-ad-profil-visit {
    display:none;
    width: 14%;
    height: auto;
  }

  /* 1) Titre principal */
  #pv-title {
    font-size: 0.9em;      /* plus petit */
  }

  /* 2) Conteneur global */
  .profil_visit_container {
    padding: 0.5em;        /* moins de padding */
  }

  /* 3) Chaque « carte » blanche */
  .conteneur_video_wtv_profil_visit {
    max-width: 65%;        /* presque toute la largeur dispo */
    margin: 0.5em auto;    /* centrée avec moins d’espaces */
    padding: 1em;        /* plus compact */
    border-radius: 0.25em;
  }

  .video_player_profil_visit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;        /* <— AJOUTÉ */
  }
  
  .video_player_profil_visit video {
    width: 100%;         /* prend 70 % de la largeur du wrapper */
    max-width: 100%;
    height: auto;
    margin: 0;          /* plus besoin de auto */
    display: block;
  }

  /* 5) Texte « ajouter/supprimer des favoris » */
  .text-favoris {
    font-size: 0.8em;      /* plus petit */
  }

  /* 6) Icône cœur */
  .favoris-icon {
    width: 1em;            /* réduit la taille */
    height: auto;
    margin-right: 0.3em;
  }
  .nom-groupe-profil-visit {
    font-size: 0.8em;
    color: #1E2A38;
    text-align: left;
    margin-left: 0.5em;
  }






 /* ERREUR */
  /* 1) Réduit et centre le conteneur blanc */
  .conteneur-fond-blanc-erreur {
    width: 80%;            /* au lieu de 100% */
    max-width: 20em;       /* limite absolue sur très petits écrans */
    margin: 2em auto;    /* séparateur vertical + centrage */
    padding: 1.5em 1.5em;   /* moins de padding */
    border-radius: 0.5em;
    background-color: rgba(255,255,255,0.8);
  }

  /* 2) Texte d’erreur plus petit */
  #erreur-title {
    font-size: 0.9em;      /* plutôt que 2em ou valeur par défaut */
    line-height: 1.2;      /* serre un peu les lignes */
    margin: 0;             /* pour éviter un top/bottom trop grand */
  }

/* LIMITE ATTEINTE.HTML"*/

  #limite-title {
    font-size: 1.2em;
  }




/* MAINTENANCE.HTML"*/
  /* 1) Descendre le conteneur pour mettre le GIF plus bas */
  .maintenance-content {
    margin-top: 3em;      /* pousse tout le bloc vers le bas */
    display: flex;        /* pour centrer horizontalement */
    justify-content: center;
  }

  /* 2) Agrandir le GIF */
  .gif_maintenance {
    width: 50%;           /* agrandit à 60% de la largeur de l’écran (ajuste si besoin) */
    height: auto;
  }





/* CONTACT */
  /* 1) Conteneur principal blanc */
  .conteneur-fond-blanc-contact {
    width: 70%;             /* moins large */
    margin: 1.5em auto;     /* centré + espacé verticalement */
    padding: 1em 1em;    /* plus compact */
    border-radius: 0.5em;
  }

  /* 2) Titre */
  #contact-title {
    font-size: 1em;       /* rapetissé */
    line-height: 1;       /* plus serré */
    margin: 0 0 0.5em;      /* retouche des marges */
  }

  /* 3) Paragraphes */
  .conteneur-fond-blanc-contact p {
    font-size: 0.8em;       /* un peu plus petit */
    line-height: 1.3;       /* confort de lecture */
    margin: 0.4em 0;        /* espacement vertical réduit */
  }









/* PROGRESSION */
  .prog-clip-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0;
  }


  .texte_envoie_mail {
    min-width: 25em;
    display: table; /* Pour que l'élément soit de type bloc mais s'ajuste à la largeur du contenu */
    margin: 0 auto 1em auto; 
    color: #1E2A38;
    font-size: 0.9em;
    font-weight: normal;
    text-transform: none;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 0.5em 1em !important;
    border-radius: 0.6em;
    border: 0.1em solid #1E2A38;
    margin-bottom: 2em;
  }

  .prog-clip-block,
  .clip-white-bg {
    min-width: 22em;
    background: rgba(255,255,255,0.70);
    border-radius: 0.6em;
    box-shadow: 0 2px 18px rgba(0,0,0,0.08);
    padding: 1.1em 1.6em 1.1em 1.6em;
    margin-bottom: 2.2em;
    display: inline-block;
    max-width: 400px;
    text-align: center;

  }



  .clip-date, .clip-status, .clip-estimee {
    display: block;
    margin-bottom: 0.45em;
    font-size: 0.9em;
  }
  .clip-status, .clip-estimee {
    margin-left: 0.2em;
  }

  #prog-total-clips {
    margin-bottom: 2em !important;
  }

  .progressbar_baby {
    width: 100%;
    max-width: 340px;
    height: 1.2em;
    background: #e9e9ec;
    border-radius: 0.6em;
    box-shadow: 0 1px 8px rgba(0,0,0,0.05);
    margin-top: 2em;
    margin-bottom: 2em;
    overflow: hidden;
    position: relative;
    display: block;
  }

  .progressbar_baby_inner {
    background: linear-gradient(90deg,  #eeba00 0%, #ffeb88 100%);
    height: 100%;
    width: 0;
    border-radius: 0.6em;
    transition: width 0.6s cubic-bezier(.4,1.3,.5,1); /* fluide ! */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
    font-size: 0.9em;
    position: relative;
  }

  .progressbar_baby_text {
    width: 100%;
    text-align: center;
    z-index: 2;
    color: #222;
    font-size: 0.9em;
    position: relative;
    user-select: none;
  }

  .bouton_voir_clip {
    text-align: center; /* Centrer le texte */
    font-family: "Gill Sans", sans-serif;
    font-size: 0.9em;
    line-height: 0.7;
    color: #1E2A38;
    margin: 0.5em 0;
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: color 0.3s ease;
  }

  .bouton_voir_clip:hover,
  .bouton_voir_clip:active {
    color: #580F41;
  }




}







/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/* ++++++++ #entre 600 et 415++++++++ */


/* --- Catégorie 3 : écrans en portrait de largeur inférieure ou égale à 412px et supérieure à 375px --- */
@media screen and (max-width: 600px) and (min-width: 415px) {


/* BASE.HTML*/
  .h1-commun {
    font-size: 1.1em;
  }
  .logo {
    width: 7em;       /* passe de 13em à 10em */
    height: 7em;      /* idem */
    margin-left: 0em;  /* réduit l’écart à gauche */
    margin-right: 3em;
  }
  /* boutons centraux */
  .header-middle {
    gap: 1em;          /* passe de 3em à 2em */
  }
  .header-middle button {
    font-size: 0.8em !important;        /* réduit la taille du texte */
    padding: 0.4em 0.8em;               /* moins de padding */
  }
  /* position “connecté avec” */
  .info_connexion_entete {
    position: absolute;
    top: 0em;
    right: 0em;
  }
  /*Texte “connecté avec” */
  #cc {
    display:none;
  }
  /*Drapeaux & icône mail */
  #contact-icon {
    top: 1.5em;     /* remonte un peu */
    left: 0em;   /* rapproche vers le centre */
    width: 1.6em;      /* largeur désirée */
    height: auto;    /* pour garder les proportions */
  }
  #lang-fr,
  #lang-en {
    top: 1.5em;     /* idem */
    left: 0em;   /* idem */
    width: 1.5em;      /* largeur désirée */
    height: auto;    /* pour garder les proportions */
  }
  /*Icône “mon compte” */
  .compte-menu {
    top: 1.5em;      /* remonte légèrement */
    right: 0.5em; /* rapproche vers le centre */
  }
  /*image de l'Icône “mon compte” */
  .compte-trigger > img {
    width: 1.7em;    /* ajustez à la taille que vous souhaitez */
    height: auto;
  }
  /*menu deroulant de “mon compte” */
  .compte-dropdown button {
    font-size: 0.7em;       /* Ajuste la taille du texte */
  }
  /* MENU DROITE si non connecté  */
  /* taille positionnement inscritpion et connexion */
  .header-right-buttons {
    left: -2em; /* Ajustez la valeur selon vos besoins */
    top: -1em;
  }
  .se_connecter_base,
  .inscription_base {
    font-size: 0.7em;
  }
  /* Bouton « Donate »*/
  .button_donate{
    position: relative;
    top: 0em;
    right: 0em;
    height: 1.3em;          /* demandé */
    width: auto;
  }


  /* Remonte le texte "Vidéos fournies par Pexels ❤️" */
  #footer_videos_portrait{
    position: relative;
    top: -0.5em!important;          /* Monte de 2 em – ajustez selon votre goût */
    margin-bottom: 0;   /* (optionnel) annule le petit espace bas */
  }


  /*texte video fourni par pexel */
  .texte_video_fourni_par {
    color: #F5F5F7;  
    font-style: italic;
    font-size: 0.8em;
  }
  .texte_pexel,
  .texte_pexel:link,
  .texte_pexel:visited {
    color: #F5F5F7 !important;  /* remplace #FF0000 par ta couleur */
    font-size: 0.8em;
  }
  /* on cible le paragraphe juste au-dessus de l’image leaderboard portrait */
  #footer_videos_portrait {
    /* ajustez la valeur selon le décalage désiré */
    position: relative;
    top: 0.5em;
    font-size: 0.9rem;  /* si vous voulez aussi réduire légèrement la taille */
  }














/* INDEX.HTML*/
  /* Rapetisse le GIF d’intro */
  .intro-index-gif {
    width: 500%;       /* ou un max-width fixe, ex. max-width: 15rem; */
    height: auto;
  }

  /* Remonte et ajuste la taille du logo actualiser */
  .actualiser-index {
    width: 3em; 
    height: auto;
    margin-top: 11em;
  }





  
/* CONNEXION.HTML"*/
  /* PUB */
  .fixed-ad-co {
    display:none;
    width: 15%;
    height: auto;
  }
  /* Nouveau conteneur pour le contenu de connexion avec fond blanc */
  .login-container {
    max-width: 55%;                    /* Même largeur que .connexion-content */
  }
  /* titre */
  .connexion-content h1 {
    font-size: 1em;     /* réduit la taille du titre */
  }
  /* labels, paragraphes */
  .connexion-content label,
  .connexion-content p,
  #lost-msg,
  #errorMessage {
    font-size: 0.7em;     /* texte un peu plus petit */
  }
  /* champs de saisie */
  .connexion-content input[type="email"],
  .connexion-content input[type="password"] {
    font-size: 0.7em;     /* réduit la police à l’intérieur */
  }
  /* rapetisser le texte tapé dans les inputs */
  .login-container .connexion-content input[type="email"],
  .login-container .connexion-content input[type="password"] {
    font-size: 0.7em; /* ou 0.9em selon ton goût */
  }
  /* boutons */
  .connexion-buttons .button_connexion_on_connexion_page,
  .bouton_mdp_perdu,
  .bouton_envoi_mail {
    font-size: 0.7em;     /* réduit le texte des boutons */
    padding: 0.5em 1em;   /* moins de padding */
  }
  /* le formulaire « mot de passe perdu » */
  #lost-form input,
  #lost-form button {
    font-size: 0.7em;
    padding: 0.4em 0.8em;
  }
  .button_connexion_on_connexion_page {
    margin-top: 2em;
    margin-bottom: 0em;
  }







/* INSCRIPTION.HTML"*/
  .conteneur_fond_blanc {
    width: 55%;
    margin: 0 auto; /* centre horizontalement */
  }
  /* PUB */
  .fixed-ad {
    width: 15%;
    height: auto;
  }

    #inscriptionTitle {
    font-size: 1em;     /* jouez sur la valeur pour obtenir la taille souhaitée */
    line-height: 1.2;
  }

  /* réduire les libellés (pseudo, email, mot de passe, etc.) */
  .inscription-content label {
    font-size: 0.7em;
  }

  /* réduire le texte des paragraphes d’erreur / d’info */
  .inscription-content p {
    font-size: 0.7em;
  }

  /* réduire les champs input */
  .inscription-content input {
    font-size: 0.7em;
    padding: 0.5em;      /* optionnel : réduire aussi leur padding */
  }

  /* réduire les boutons “envoyer le code” et “s’inscrire” */
  .inscription-content button {
    font-size: 0.7em;
    padding: 0.5em 1em;   /* ajustez si besoin */
  }

  #sendCodeButton {
    font-size: 0.7em;       /* taille du texte */
    padding: 0.4em 0.8em;   /* réduit le padding */
  }
  .mail_banned {
    font-size: 0.7em;
  }
  #verificationSuccessMsg {
    font-size: 0.7em;
  }








/* CHOIX.HTML */

  /* pubs*/
  .fixed-ad-choix-clip {
    display:none;
    width: 15%;      /* ou tout autre % que vous désirez */
    height: auto;    /* conserve le ratio de l’image */
  }
  .h1-commun-avec-fond {
    font-size: 0.9em!important;      /* réduire la taille */
    padding: 0.3em;        /* ajuster le padding si besoin */
  }

  /* 2) Tous les H2 */
  .texte_sous_titre,
  #cc-themes-heading,
  #cc-keywords-heading,
  #cc-effects-heading {
    font-size: 0.9em;        /* réduire la taille */
  }

  /* 3) Tous les textes « normaux » (labels, options, paragraphes sauf la checkbox « j’ai créé… ») */
  .texte_contenu,
  .cc-theme-option,
  .cc-effect-option,
  .texte_h2_plus_petit,
  .texte_contenu_creation {
    font-size: 0.7em;
  }

  /* 4) Les inputs textuels */
  .input_keyword,
  #input_nom_groupe,
  #input_lien_musique {
    font-size: 0.7em;
  }

  .input_nom_clip {
    font-size: 0.7em;
    margin-bottom: -1em;
  }

  .input_choix_fichier {
    font-size: 0.7em;       /* police plus petite */
  }

  /* boutons telecharger musique */
  #cc-download-btn {
    font-size: 0.7em;
    padding: 0.5em 1em;
  }
  /* boutons ok */
  .button_ok_choix_clip {
    font-size: 0.7em;
    padding: 0.5em 1em;
  }

  
  

/* WAIT-AUDIO.HTML et clip*/
  .fixed-ad-tous-les-wait {
    display:none;
    width: 15%;      /* ou tout autre % que vous désirez */
    height: auto;    /* conserve le ratio de l’image */
  }






/* LECTEUR */
  /* PUB */
  .ad-lecteur {
    display: none;
    position: fixed;
    top: 35%;
    width: 14%;      /* ou tout autre % que vous désirez */
    height: auto;    /* conserve le ratio de l’image */
  }
  /* conteneur fond blanc*/
  .conteneur_fond_blanc_lecteur {
    width: 65%;        /* passez à 90% du viewport */
    padding: 1em;      /* un peu moins de padding */
    margin: 0 auto;    /* centre horizontalement */
  }
  /* réduit la taille du titre du clip au-dessus du lecteur */
  #clipNameTitle {
    font-size: 0.9em;         /* adapte selon ton besoin */
    margin-top: 0em;
  }
  /* bouton modifier le clip*/
  .button_modif_final_clip {
    font-size: 0.7em;        /* par exemple 90% de la taille normale */
  }
  /* bouton share et download*/
  .button_download_final_clip,
  .bouton_share_sur_lecteur {
    width: 1em;  /* ou en % : ex. width: 8%; */
    height: auto;
  }
  /* 1) Contenant fond blanc */
  .container_no_video {
    width: 60%;           /* moins large */
    padding: 1em;         /* moins de padding */
    font-size: 0.9em;     /* texte global un peu plus petit */
  }

  /* 2) Texte à l’intérieur */
  .container_no_video p {
    font-size: 0.9em;     /* réduire la taille du texte */
    line-height: 1.3;     /* garde une bonne lisibilité */
  }

  /* 3) Bouton « C’est parti » */
  .container_no_video .bouton_recreer_clip {
    padding: 0.5em 1em;   /* bouton plus compact */
    font-size: 0.8em;     /* texte du bouton plus petit */
  }
  





/* MODIFICATIONS.HTML*/
  /* 1) On rapetisse le « cadre » blanc */
  .conteneur_tout_modif {
    width: 55%;        /* passe de 100% à 80% de la largeur */
    margin: 1em auto;  /* recentre horizontalement et ajoute un peu d’espace vertical */
    padding: 2em;      /* si vous aviez un padding fixe, vous pouvez le réduire ici */
  }
  .h1-modif {
    font-size: 1em;  /* ou la valeur que tu préfères */
  }
  /* rapetisser le compteur “vidéo n°…” */
  .texte_numero_video {
    font-size: 0.9em; /* ajuste la valeur selon ton goût */

  }  
  /* bouton precedent et suivant*/
  .conteneur_boutons_defile .bouton-precedent,
  .conteneur_boutons_defile .bouton-suivant {
      font-size: 0.7em;
  }

  /* 2) On rapetisse le lecteur vidéo */
  #videoPlayer,
  .lecteur-modif {
    width: 100%;       /* prend 100% de son parent (qui fait maintenant 80% de l’écran) */
    height: auto;      /* conserve les proportions */
  }
  /*2) boutons par... */
  .bouton-remplacer,
  .bouton-remplacer-perso {
    font-size: 0.7em;      /* réduire la taille du texte */
    padding: 0.4em 0.8em;  /* réduire l’espacement intérieur */
  }


  /*POPUP "une de tes videos"*/
  .fenetre-preview-video-perso {
    width: 55%;
  }
  /*  POPUP "une videos pexel"*/
  .fenetre-preview {
    width: 55%;
  }

  /* Titre « Choisis ta vidéo » (pop-up perso) */
  .fenetre-preview-video-perso h2,
  #videoPersoTitle {
    font-size: 1em;        /* réduit la taille du titre */
  }

  /* — réduire la taille des libellés textes — */
  .texte-remplace-par,
  .texte_modifie,
  .texte_modifie_filtre,
  #preview-title,
  #videoPersoChoosePassage,
  .texte-seq-voulue {
    font-size: 0.8em;
  }

  /* — réduire les boutons de sélection / prévisualisation — */
  .bouton-charger-video,      /* « Charger la vidéo » */
  .bouton-ok-choix-passage,   /* « ok » */
  .choisir-video,             /* « Cette vidéo me plaît » */
  .bouton-nouvelle-video {    /* « Voir une autre vidéo » */
    font-size: 0.7em;
  }

  /* — réduire les champs de saisie — */
  .input_modif_nom_clip,
  .input_modif_nom_groupe {
    font-size: 0.8em;
  }
    /* rapetisser les libellés “couleurs” et “noir et blanc” */
  .text-modif-couleurs,
  .text-modif-NB {
    font-size: 0.8em;
  }

  /* — agrandir le bouton « J'ai fini de modifier » — */
  .bouton-fini {
    font-size: 0.9em;
  }

  







/* WTV.HTML"*/
  .h1-commun {
    font-size: 1em; /* au lieu de 2rem par exemple */
  }
  /* bouton a trier"*/
  #wtv-dropdownButton {
    font-size: 0.8em;     /* 75% de la taille courante (à ajuster) */
    padding: 0.5em 0.5em;  /* et tu peux réduire un peu les paddings si besoin */
  }

  /* Réduit la largeur de chaque carte et centre */
  .conteneur_video_wtv {
    width: 60%;
    margin: 1em auto;   /* espace vertical + centrage horizontal */
    padding: 1em;          /* <— ici : 1em tout autour */
  }

  /* on s’assure que le wrapper prend toute la largeur disponible */
  .conteneur_video_wtv .video_player {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* la vidéo elle‐même fait 60% du conteneur et reste centrée */
  .conteneur_video_wtv .video_player video {
    width: 100%;
    height: auto;
  }

  /* Ajuste la taille de la typo dans la carte */
  .conteneur_video_wtv .nom-groupe,
  .conteneur_video_wtv .creator-info,
  .conteneur_video_wtv .texte_lien_musique,
  .conteneur_video_wtv .texte_inapropriate_wtv,
  .conteneur_video_wtv .texte_share_wtv,
  .conteneur_video_wtv .favoris-likes-row,
  .conteneur_video_wtv .wtv-likes-block {
    font-size: 0.8em;  /* réduis légèrement la police */
  }
  /* ---- popup partage ---- */
  .popup_share_wtv {
    background: transparent;
    box-shadow: 0 .5em 1.25em rgba(0,0,0,.0); /* 8px → 0.5em, 20px → 1.25em */

  }
  .close_share_popup_wtv {
    top: 10em;
    right: 4.5em;
    z-index: 2000;
  }
  /* —— Popup de signalement (1) —— */
  .popup_signalement {
    /* largeur et hauteur */
    width: 60%;           /* ex : 400px environ */
    padding: 1.5em 1em;    /* moins de padding vertical */
  }

  /* le conteneur interne (titre + inputs + bouton) */
  .popup_signalement_inner {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.75em;           /* espace entre les éléments */
    font-size: 0.8em;      /* taille de police un peu plus petite */
  }

  /* titre de la popup */
  #wtv-report-popup-title {
    font-size: 1em;     /* réduit de 1.5em à 1.25em */
    margin-bottom: 0.75em;
  }

  /* boutons et champs */
  .input_signalement {
    font-size: 0.85em;
    padding: 0.35em;
    width: 70%;
    
  }
  .bouton_envoyer_signalement {
    font-size: 0.85em;
    padding: 0.4em 0.6em;
    width: 40%;
  }

  /* —— Popup de confirmation (2) —— */
  .popup_signalement_envoye {
    width: 50%;           /* ex : 320px */
    padding: 1em;
  }
  .texte_popup_signalement_envoye {
    font-size: 0.8em;      /* taille de police de la phrase */
    line-height: 1;      /* hauteur de ligne un peu plus confortable */
  }


  /* PUB */
  .fixed-ad-profil {
    display:none;
    position: fixed;
    top: 60%;
    width: 14%;      /* ou tout autre % que vous désirez */
    height: auto;    /* conserve le ratio de l’image */
  }






  


/* SHARE.HTML */
  /* Réduit le conteneur principal et le centre */
/* 1) Le conteneur blanc prend 75% ou 90% selon ton break-point */
.conteneur_global_share {
  margin-top: 1em!important;
  width: 70% !important;        /* ou 90% si tu veux */
  max-width: none !important;   /* écrase l’ancienne limite */
  padding: 1em !important;    /* padding plus fin */
  margin: 1em auto;             /* centré */
}

/* 2) Le lecteur occupe 100% du conteneur */
.player_video_share {
  width: 100% !important;
  height: auto;
}

/* 3) L’en-tête fait 100% et distribue bien l’espace */
.share_header {
  display: flex !important;
  justify-content: space-between;
  width: 100% !important;
  padding: 0;                   /* supprime tout padding résiduel */
  margin: 0;                    /* supprime toute marge */
}

/* 4) Les titres collés aux bords */
.share_header .titre_video_share,
.share_header .groupe_video_share {
  margin: 0;                    /* plus de marge */
  padding: 0;                   /* plus de padding */
  font-size: 0.9em;             /* ta taille responsive */
}

/* 5) Le pseudo sous le player */
.pseudo_video_share {
  width: 100% !important;
  font-size: 0.9em;
  margin: 0.5em 0 0;            /* petit espace au-dessus seulement */
}








/*PROFIL*/
  /* ——— CONTENEUR ET TITRES ——— */
  .conteneur-page-perso {
    max-width: 65%;
    padding: 1em;
  }
  /* H1 “Tu es sur ta page personnelle” */
  .h1-commun#pr-main-title {
    font-size: 1em;
    margin-top: 1em;
    margin-bottom: 0.5em;
  }
  /* Texte d’accueil (pseudo) */
  .texte-nom-user {
    font-size: 0.8em;
    margin: 0.3em 0;
  }
  /* Lien “Modifier mon mot de passe” */
  .texte_modif_mdp {
    font-size: 0.8em;
    margin: 0.5em 0;
    margin-top: 2em;
  }
  .texte_suivre_prog {
    font-size: 0.8em;
    margin-top: 0.5em;
  }
  #pr-no-clip {
    font-size: 0.8em;     /* taille de texte réduite */
    margin-top: 0.5em;    /* moins d’espace au-dessus */
    margin-bottom: 0.5em; /* moins d’espace en-dessous */
    line-height: 1.2;     /* ajustement de l’interlignage si besoin */
  }

  /* ——— FORMULAIRE MDP ——— */
  #pwd-change-container .input_change_mdp {
    width: 50%;
    height: 1em;
    font-size: 0.7em;
    margin: 0.4em auto;
  }
  #pwd-change-container #btn-change-pwd {
    font-size: 0.7em;
    padding: 0.4em 0.6em;
    width: 30%;
  }

  /* ——— TITRES SECONDAIRES H2 ——— */
  .H2-profil-perso {
    font-size: 0.9em;
    margin-top: 2em;
    margin-bottom: 0.5em;
    padding: 0.1em 0.3em;
  }

  /* ——— CLIPS CRÉÉS ——— */
  .clips-list-container {
    padding: 0.5em;
  }
  .liste-clips-crees li {
    gap: 1em;
    margin-bottom: 0.3em;
  }
  .bouton-liste-clips {
    font-size: 0.8em;
    padding: 0.2em 0.4em;
  }
  .cc-clip-delete {
    font-size: 0.8em!important;
  }

  /* ——— FAVORIS ——— */
  .conteneur_video_favori {
    margin-bottom: 1em;
  }
  .favoris-icon,
  .favoris-icon-profil-perso {
    width: 0.8em;   /* ajuste à la taille désirée, ex. 0.8em ou 1em */
    height: auto; /* garde l’aspect ratio */
  }
  .lecteur_profil_perso {
    width: 100%;
    margin: 0.5em auto;
  }
  .texte_nom_groupe_profil_perso,
  .texte_createur_profil_perso {
    font-size: 0.7em;
  }
  .text-favoris-profil-perso {
    font-size: 0.7em;
  }
  .pas_de_favoris {
    font-size: 0.7em;
    margin-bottom: 4em;
  }








/* TOUS LES UTILISATEURS*/
  /*titre */
  #tlu-title {
    font-size: 0.8em;       /* ou 1em selon ton goût */
    margin: 0.5em 0;        /* réduit l’espace au-dessus/ci-dessous */
  }
  /* Réduit la largeur du conteneur blanc */
  .conteneur-fond-blanc-tous-users {
    display: inline-block !important;
    width: 20% !important;       /* passe de auto/100% à 90% de l’écran */
  }

  /* Les “boutons” utilisateurs (div cliquables) */
  .bouton_tous_les_utilisateurs {
    font-size: 0.8em;         /* rapetisse le texte */
    display: block;           /* force un retour à la ligne */
    width: auto;
    max-width: 100%;
  }





/* PROFIL-VISIT.HTML */
  /* PUB */
  .fixed-ad-profil-visit {
    display:none;
    width: 14%;
    height: auto;
  }

  /* 1) Titre principal */
  #pv-title {
    font-size: 0.9em;      /* plus petit */
  }

  /* 2) Conteneur global */
  .profil_visit_container {
    padding: 0.5em;        /* moins de padding */
  }

  /* 3) Chaque « carte » blanche */
  .conteneur_video_wtv_profil_visit {
    max-width: 65%;        /* presque toute la largeur dispo */
    margin: 0.5em auto;    /* centrée avec moins d’espaces */
    padding: 1em;        /* plus compact */
    border-radius: 0.25em;
  }

  .video_player_profil_visit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;        /* <— AJOUTÉ */
  }
  
  .video_player_profil_visit video {
    width: 100%;         /* prend 70 % de la largeur du wrapper */
    max-width: 100%;
    height: auto;
    margin: 0;          /* plus besoin de auto */
    display: block;
  }

  /* 5) Texte « ajouter/supprimer des favoris » */
  .text-favoris {
    font-size: 0.8em;      /* plus petit */
  }

  /* 6) Icône cœur */
  .favoris-icon {
    width: 1em;            /* réduit la taille */
    height: auto;
    margin-right: 0.3em;
  }

  .nom-groupe-profil-visit {
    font-size: 0.7em;
    color: #1E2A38;
    text-align: left;
    margin-left: 0.5em;
  }






  /* ERREUR */
  /* 1) Réduit et centre le conteneur blanc */
  .conteneur-fond-blanc-erreur {
    width: 80%;            /* au lieu de 100% */
    max-width: 20em;       /* limite absolue sur très petits écrans */
    margin: 2em auto;    /* séparateur vertical + centrage */
    padding: 1.5em 1.5em;   /* moins de padding */
    border-radius: 0.5em;
    background-color: rgba(255,255,255,0.8);
  }

  /* 2) Texte d’erreur plus petit */
  #erreur-title {
    font-size: 0.9em;      /* plutôt que 2em ou valeur par défaut */
    line-height: 1.2;      /* serre un peu les lignes */
    margin: 0;             /* pour éviter un top/bottom trop grand */
  }


/* LIMITE ATTEINTE.HTML"*/

  #limite-title {
    font-size: 0.9em;
  }




/* MAINTENANCE.HTML"*/
  /* 1) Descendre le conteneur pour mettre le GIF plus bas */
  .maintenance-content {
    margin-top: 3em;      /* pousse tout le bloc vers le bas */
    display: flex;        /* pour centrer horizontalement */
    justify-content: center;
  }

  /* 2) Agrandir le GIF */
  .gif_maintenance {
    width: 50%;           /* agrandit à 60% de la largeur de l’écran (ajuste si besoin) */
    height: auto;
  }





/* CONTACT */
  /* 1) Conteneur principal blanc */
  .conteneur-fond-blanc-contact {
    width: 70%;             /* moins large */
    margin: 1.5em auto;     /* centré + espacé verticalement */
    padding: 1em 1em;    /* plus compact */
    border-radius: 0.5em;
  }

  /* 2) Titre */
  #contact-title {
    font-size: 1em;       /* rapetissé */
    line-height: 1;       /* plus serré */
    margin: 0 0 0.5em;      /* retouche des marges */
  }

  /* 3) Paragraphes */
  .conteneur-fond-blanc-contact p {
    font-size: 0.8em;       /* un peu plus petit */
    line-height: 1.3;       /* confort de lecture */
    margin: 0.4em 0;        /* espacement vertical réduit */
  }








/* PROGRESSION */
  .prog-clip-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0;
  }


  .texte_envoie_mail {
    min-width: 25em;
    display: table; /* Pour que l'élément soit de type bloc mais s'ajuste à la largeur du contenu */
    margin: 0 auto 1em auto; 
    color: #1E2A38;
    font-size: 0.9em;
    font-weight: normal;
    text-transform: none;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 0.5em 1em !important;
    border-radius: 0.6em;
    border: 0.1em solid #1E2A38;
    margin-bottom: 2em;
  }

  .prog-clip-block,
  .clip-white-bg {
    min-width: 22em;
    background: rgba(255,255,255,0.70);
    border-radius: 0.6em;
    box-shadow: 0 2px 18px rgba(0,0,0,0.08);
    padding: 1.1em 1.6em 1.1em 1.6em;
    margin-bottom: 2.2em;
    display: inline-block;
    max-width: 400px;
    text-align: center;

  }



  .clip-date, .clip-status, .clip-estimee {
    display: block;
    margin-bottom: 0.45em;
    font-size: 0.9em;
  }
  .clip-status, .clip-estimee {
    margin-left: 0.2em;
  }

  #prog-total-clips {
    margin-bottom: 2em !important;
  }

  .progressbar_baby {
    width: 100%;
    max-width: 340px;
    height: 1.2em;
    background: #e9e9ec;
    border-radius: 0.6em;
    box-shadow: 0 1px 8px rgba(0,0,0,0.05);
    margin-top: 2em;
    margin-bottom: 2em;
    overflow: hidden;
    position: relative;
    display: block;
  }

  .progressbar_baby_inner {
    background: linear-gradient(90deg,  #eeba00 0%, #ffeb88 100%);
    height: 100%;
    width: 0;
    border-radius: 0.6em;
    transition: width 0.6s cubic-bezier(.4,1.3,.5,1); /* fluide ! */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
    font-size: 0.9em;
    position: relative;
  }

  .progressbar_baby_text {
    width: 100%;
    text-align: center;
    z-index: 2;
    color: #222;
    font-size: 0.9em;
    position: relative;
    user-select: none;
  }

  .bouton_voir_clip {
    text-align: center; /* Centrer le texte */
    font-family: "Gill Sans", sans-serif;
    font-size: 0.9em;
    line-height: 0.7;
    color: #1E2A38;
    margin: 0.5em 0;
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: color 0.3s ease;
  }

  .bouton_voir_clip:hover,
  .bouton_voir_clip:active {
    color: #580F41;
  }




}





/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/* ++++++++ #entre 414 et 376++++++++ */


/* --- Catégorie 3 : écrans en portrait de largeur inférieure ou égale à 412px et supérieure à 375px --- */
@media screen and (max-width: 414px) and (min-width: 376px) {
  /* BASE.HTML*/
  .h1-commun {
    font-size: 1.1em;
  }
  .logo {
    width: 6em;       /* passe de 13em à 10em */
    height: 6em;      /* idem */
    margin-left: 0em;  /* réduit l’écart à gauche */
    margin-right: 3em;
  }
  /* boutons centraux */
  .header-middle {
    gap: 1em;          /* passe de 3em à 2em */
  }
  .header-middle button {
    font-size: 0.7em !important;        /* réduit la taille du texte */
    padding: 0.4em 0.8em;               /* moins de padding */
  }
  /* position “connecté avec” */
  .info_connexion_entete {
    position: absolute;
    top: 0em;
    right: 0em;
  }
  /*Texte “connecté avec” */
  #cc {
    display: none;
  }
  /*Drapeaux & icône mail */
  #contact-icon {
    top: 1.5em;     /* remonte un peu */
    left: 0.5em;   /* rapproche vers le centre */
    width: 1.4em;      /* largeur désirée */
    height: auto;    /* pour garder les proportions */
  }
  #lang-fr,
  #lang-en {
    top: 1.5em;     /* idem */
    left: 0.5em;   /* idem */
    width: 1.3em;      /* largeur désirée */
    height: auto;    /* pour garder les proportions */
  }
  /*Icône “mon compte” */
  .compte-menu {
    top: 1.5em;      /* remonte légèrement */
    right: 0em; /* rapproche vers le centre */
  }
  /*image de l'Icône “mon compte” */
  .compte-trigger > img {
    width: 1.5em;    /* ajustez à la taille que vous souhaitez */
    height: auto;
  }
  /*menu deroulant de “mon compte” */
  .compte-dropdown button {
    font-size: 0.7em;       /* Ajuste la taille du texte */
  }
  /* MENU DROITE si non connecté  */
  /* taille positionnement inscritpion et connexion */
  .header-right-buttons {
    left: 0em; /* Ajustez la valeur selon vos besoins */
    top: -1.5em;
  }
  .se_connecter_base,
  .inscription_base {
    font-size: 0.7em;
  }
  /* Bouton « Donate »*/
  .button_donate{
    position: relative;
    top: 0.5em;
    right: 0em;
    height: 1.5em;          /* demandé */
    width: auto;
  }

  /*texte video fourni par pexel */
  .texte_video_fourni_par {
    color: #F5F5F7;  
    font-style: italic;
    font-size: 0.8em;
  }
  .texte_pexel,
  .texte_pexel:link,
  .texte_pexel:visited {
    color: #F5F5F7 !important;  /* remplace #FF0000 par ta couleur */
    font-size: 0.8em;
  }
  /* on cible le paragraphe juste au-dessus de l’image leaderboard portrait */
  #footer_videos_portrait {
    /* ajustez la valeur selon le décalage désiré */
    position: relative;
    top: 0em;
    font-size: 0.9rem;  /* si vous voulez aussi réduire légèrement la taille */
  }
  footer {
    position: fixed;       /* reste en bas */
    bottom: 0;
    left: -4em;
    width: 130%;
    height: 4em;           /* Hauteur fixe */
    background: linear-gradient(to top,
      rgba(0,0,0,0.8) 0%,
      rgba(0,0,0,0)   100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
  }








/* INDEX.HTML*/
  /* Rapetisse le GIF d’intro */
  .intro-index-gif {
    width: 800%;       /* ou un max-width fixe, ex. max-width: 15rem; */
    height: auto;
  }

  /* Remonte et ajuste la taille du logo actualiser */
  .actualiser-index {
    width: 3em; 
    height: auto;
    margin-top: 17em;
  }








/* CONNEXION.HTML"*/
  /* PUB */
  .fixed-ad-co {
    display:none;
    width: 18%;
    height: auto;
    top: 50%;
  }
  /* Nouveau conteneur pour le contenu de connexion avec fond blanc */
  .login-container {
    max-width: 55%;                    /* Même largeur que .connexion-content */
  }
  /* titre */
  .connexion-content h1 {
    font-size: 1em;     /* réduit la taille du titre */
  }
  /* labels, paragraphes */
  .connexion-content label,
  .connexion-content p,
  #lost-msg,
  #errorMessage {
    font-size: 0.7em;     /* texte un peu plus petit */
  }
  /* champs de saisie */
  .connexion-content input[type="email"],
  .connexion-content input[type="password"] {
    font-size: 0.7em;     /* réduit la police à l’intérieur */
  }
  /* rapetisser le texte tapé dans les inputs */
  .login-container .connexion-content input[type="email"],
  .login-container .connexion-content input[type="password"] {
    font-size: 0.7em; /* ou 0.9em selon ton goût */
  }
  /* boutons */
  .connexion-buttons .button_connexion_on_connexion_page,
  .bouton_mdp_perdu,
  .bouton_envoi_mail {
    font-size: 0.7em;     /* réduit le texte des boutons */
    padding: 0.5em 1em;   /* moins de padding */
  }
  /* le formulaire « mot de passe perdu » */
  #lost-form input,
  #lost-form button {
    font-size: 0.7em;
    padding: 0.4em 0.8em;
  }
  .button_connexion_on_connexion_page {
    margin-top: 2em;
    margin-bottom: 0em;
  }







/* INSCRIPTION.HTML"*/
  .conteneur_fond_blanc {
    width: 50%;
    margin: 0 auto; /* centre horizontalement */
  }
  /* PUB */
  .fixed-ad {
    width: 18%;
    height: auto;
    top:50%;
  }

    #inscriptionTitle {
    font-size: 1em;     /* jouez sur la valeur pour obtenir la taille souhaitée */
    line-height: 1.2;
  }

  /* réduire les libellés (pseudo, email, mot de passe, etc.) */
  .inscription-content label {
    font-size: 0.7em;
  }

  /* réduire le texte des paragraphes d’erreur / d’info */
  .inscription-content p {
    font-size: 0.7em;
  }

  /* réduire les champs input */
  .inscription-content input {
    font-size: 0.7em;
    padding: 0.5em;      /* optionnel : réduire aussi leur padding */
  }

  /* réduire les boutons “envoyer le code” et “s’inscrire” */
  .inscription-content button {
    font-size: 0.7em;
    padding: 0.5em 1em;   /* ajustez si besoin */
  }

  #sendCodeButton {
    font-size: 0.7em;       /* taille du texte */
    padding: 0.4em 0.8em;   /* réduit le padding */
  }
  .mail_banned {
    font-size: 0.7em;
  }
  #verificationSuccessMsg {
    font-size: 0.7em;
  }








/* CHOIX.HTML */

  /* pubs*/
  .fixed-ad-choix-clip {
    display: none !important;
  }
  .h1-commun-avec-fond {
    font-size: 0.9em!important;      /* réduire la taille */
    padding: 0.3em;        /* ajuster le padding si besoin */
  }

  /* 2) Tous les H2 */
  .texte_sous_titre,
  #cc-themes-heading,
  #cc-keywords-heading,
  #cc-effects-heading {
    font-size: 0.9em;        /* réduire la taille */
  }

  /* 3) Tous les textes « normaux » (labels, options, paragraphes sauf la checkbox « j’ai créé… ») */
  .texte_contenu,
  .cc-theme-option,
  .cc-effect-option,
  .texte_h2_plus_petit,
  .texte_contenu_creation {
    font-size: 0.7em;
  }

  /* 4) Les inputs textuels */
  .input_keyword,
  #input_nom_groupe,
  #input_lien_musique {
    font-size: 0.7em;
  }

  .input_nom_clip {
    font-size: 0.7em;
    margin-bottom: -1em;
  }

  .input_choix_fichier {
    font-size: 0.7em;       /* police plus petite */
  }

  /* boutons telecharger musique */
  #cc-download-btn {
    font-size: 0.7em;
    padding: 0.5em 1em;
  }
  /* boutons ok */
  .button_ok_choix_clip {
    font-size: 0.7em;
    padding: 0.5em 1em;
  }

  
  



/* WAIT-AUDIO.HTML et clip*/
  .fixed-ad-tous-les-wait {
    display:none;
    width: 18%;      /* ou tout autre % que vous désirez */
    height: auto;    /* conserve le ratio de l’image */
    top:50%
  }
  .pub-image-container img,
  #pubVideo {
    /* On le fait occuper 80% de la largeur de l’écran */
    width: 160vw;
    /* On limite sa taille max pour ne pas dépasser l’écran */
    max-width: 20em;
    height: auto;  /* conserve le ratio */
    display: block;
    margin: 0 auto; /* le centre horizontalement */
  }









/* LECTEUR */
  /* PUB */
  .ad-lecteur {
    display: none !important;
  }
  /* conteneur fond blanc*/
  .conteneur_fond_blanc_lecteur {
    margin-top: 7em!important;
    width: 90%;        /* passez à 90% du viewport */
    padding: 1em;      /* un peu moins de padding */
    margin: 0 auto;    /* centre horizontalement */
  }
  /* réduit la taille du titre du clip au-dessus du lecteur */
  #clipNameTitle {
    font-size: 0.9em;         /* adapte selon ton besoin */
    margin-top: 0em;
  }
  /* bouton modifier le clip*/
  .button_modif_final_clip {
    font-size: 0.7em;        /* par exemple 90% de la taille normale */
  }
  /* bouton share et download*/
  .button_download_final_clip,
  .bouton_share_sur_lecteur {
    width: 1em;  /* ou en % : ex. width: 8%; */
    height: auto;
  }
  /* 1) Contenant fond blanc */
  .container_no_video {
    width: 80%;           /* moins large */
    padding: 1em;         /* moins de padding */
    font-size: 0.9em;     /* texte global un peu plus petit */
  }

  /* 2) Texte à l’intérieur */
  .container_no_video p {
    font-size: 0.9em;     /* réduire la taille du texte */
    line-height: 1.3;     /* garde une bonne lisibilité */
  }

  /* 3) Bouton « C’est parti » */
  .container_no_video .bouton_recreer_clip {
    padding: 0.5em 1em;   /* bouton plus compact */
    font-size: 0.8em;     /* texte du bouton plus petit */
  }






  
/* MODIFICATIONS.HTML*/
  /* 1) On rapetisse le « cadre » blanc */
  .conteneur_tout_modif {
    width: 84%;        /* passe de 100% à 80% de la largeur */
    margin: 1em auto;  /* recentre horizontalement et ajoute un peu d’espace vertical */
    padding: 2em;      /* si vous aviez un padding fixe, vous pouvez le réduire ici */
  }
  .h1-modif {
    font-size: 1em;  /* ou la valeur que tu préfères */
  }
  /* rapetisser le compteur “vidéo n°…” */
  .texte_numero_video {
    font-size: 0.9em; /* ajuste la valeur selon ton goût */

  }  
  /* bouton precedent et suivant*/
  .conteneur_boutons_defile .bouton-precedent,
  .conteneur_boutons_defile .bouton-suivant {
      font-size: 0.7em;
  }

  /* 2) On rapetisse le lecteur vidéo */
  #videoPlayer,
  .lecteur-modif {
    width: 100%;       /* prend 100% de son parent (qui fait maintenant 80% de l’écran) */
    height: auto;      /* conserve les proportions */
  }
  /*2) boutons par... */
  .bouton-remplacer,
  .bouton-remplacer-perso {
    font-size: 0.7em;      /* réduire la taille du texte */
    padding: 0.4em 0.8em;  /* réduire l’espacement intérieur */
  }


  /*POPUP "une de tes videos"*/
  .fenetre-preview-video-perso {
    width: 100%!important;
  }
  #previewPersoModal {
    width: 70% !important;        /* presque toute la largeur de l’écran */
    max-width: 400px;             /* ne pas dépasser 400px */
    padding: 1.5em !important;    /* plus d’espace intérieur */
  }
  /*  POPUP "une videos pexel"*/
  .fenetre-preview {
    width: 75%;
  }

  /* Titre « Choisis ta vidéo » (pop-up perso) */
  .fenetre-preview-video-perso h2,
  #videoPersoTitle {
    font-size: 1em;        /* réduit la taille du titre */
  }

  /* — réduire la taille des libellés textes — */
  .texte-remplace-par,
  .texte_modifie,
  .texte_modifie_filtre,
  #preview-title,
  #videoPersoChoosePassage,
  .texte-seq-voulue {
    font-size: 0.8em;
  }

  /* — réduire les boutons de sélection / prévisualisation — */
  .bouton-charger-video,      /* « Charger la vidéo » */
  .bouton-ok-choix-passage,   /* « ok » */
  .choisir-video,             /* « Cette vidéo me plaît » */
  .bouton-nouvelle-video {    /* « Voir une autre vidéo » */
    font-size: 0.7em;
  }

  /* — réduire les champs de saisie — */
  .input_modif_nom_clip,
  .input_modif_nom_groupe {
    font-size: 0.8em;
  }
    /* rapetisser les libellés “couleurs” et “noir et blanc” */
  .text-modif-couleurs,
  .text-modif-NB {
    font-size: 0.8em;
  }

  /* — agrandir le bouton « J'ai fini de modifier » — */
  .bouton-fini {
    font-size: 0.9em;
  }










/* WTV.HTML"*/
  .h1-commun {
    font-size: 0.9em; /* au lieu de 2rem par exemple */
  }
  /* bouton a trier"*/
  #wtv-dropdownButton {
    font-size: 0.8em;     /* 75% de la taille courante (à ajuster) */
    padding: 0.5em 0.5em;  /* et tu peux réduire un peu les paddings si besoin */
  }

  /* Réduit la largeur de chaque carte et centre */
  .conteneur_video_wtv {
    width: 90%;
    margin: 1em auto;   /* espace vertical + centrage horizontal */
    padding: 1em;          /* <— ici : 1em tout autour */
  }

  /* on s’assure que le wrapper prend toute la largeur disponible */
  .conteneur_video_wtv .video_player {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* la vidéo elle‐même fait 60% du conteneur et reste centrée */
  .conteneur_video_wtv .video_player video {
    width: 100%;
    height: auto;
  }

  /* Ajuste la taille de la typo dans la carte */
  .conteneur_video_wtv .nom-groupe,
  .conteneur_video_wtv .creator-info,
  .conteneur_video_wtv .texte_lien_musique,
  .conteneur_video_wtv .texte_inapropriate_wtv,
  .conteneur_video_wtv .texte_share_wtv,
  .conteneur_video_wtv .favoris-likes-row,
  .conteneur_video_wtv .wtv-likes-block {
    font-size: 0.8em;  /* réduis légèrement la police */
  }
  /* ---- popup partage ---- */
  .popup_share_wtv {
    background: transparent;
    box-shadow: 0 .5em 1.25em rgba(0,0,0,.0); /* 8px → 0.5em, 20px → 1.25em */

  }
  .close_share_popup_wtv {
    top: 10em;
    right: 4.5em;
    z-index: 2000;
  }
  /* —— Popup de signalement (1) —— */
  .popup_signalement {
    /* largeur et hauteur */
    width: 60%;           /* ex : 400px environ */
    padding: 1.5em 1em;    /* moins de padding vertical */
  }

  /* le conteneur interne (titre + inputs + bouton) */
  .popup_signalement_inner {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.75em;           /* espace entre les éléments */
    font-size: 0.8em;      /* taille de police un peu plus petite */
  }

  /* titre de la popup */
  #wtv-report-popup-title {
    font-size: 1em;     /* réduit de 1.5em à 1.25em */
    margin-bottom: 0.75em;
  }

  /* boutons et champs */
  .input_signalement {
    font-size: 0.85em;
    padding: 0.35em;
    width: 70%;
    
  }
  .bouton_envoyer_signalement {
    font-size: 0.85em;
    padding: 0.4em 0.6em;
    width: 40%;
  }

  /* —— Popup de confirmation (2) —— */
  .popup_signalement_envoye {
    width: 50%;           /* ex : 320px */
    padding: 1em;
  }
  .texte_popup_signalement_envoye {
    font-size: 0.8em;      /* taille de police de la phrase */
    line-height: 1;      /* hauteur de ligne un peu plus confortable */
  }

  /* PUB */
  .fixed-ad-profil {
    display: none !important;
  }





/*PROFIL*/
  /* ——— CONTENEUR ET TITRES ——— */
  .conteneur-page-perso {
    max-width: 90%;
    padding: 1em;
  }
  /* H1 “Tu es sur ta page personnelle” */
  .h1-commun#pr-main-title {
    font-size: 0.9em;
    margin-top: 1em;
    margin-bottom: 1.5em;
  }
  /* Texte d’accueil (pseudo) */
  .texte-nom-user {
    font-size: 0.8em;
    margin: 0.3em 0;
  }
  /* Lien “Modifier mon mot de passe” */
  .texte_modif_mdp {
    font-size: 0.8em;
    margin: 0.5em 0;
    margin-top: 2em;
  }

  .texte_suivre_prog {
    font-size: 0.8em;
    margin-top: 0.5em;
  }

  #pr-no-clip {
    font-size: 0.8em;     /* taille de texte réduite */
    margin-top: 0.5em;    /* moins d’espace au-dessus */
    margin-bottom: 0.5em; /* moins d’espace en-dessous */
    line-height: 1.2;     /* ajustement de l’interlignage si besoin */
  }
  

  /* ——— FORMULAIRE MDP ——— */
  #pwd-change-container .input_change_mdp {
    width: 50%;
    height: 1em;
    font-size: 0.7em;
    margin: 0.4em auto;
  }
  #pwd-change-container #btn-change-pwd {
    font-size: 0.7em;
    padding: 0.4em 0.6em;
    width: 30%;
  }

  /* ——— TITRES SECONDAIRES H2 ——— */
  .H2-profil-perso {
    font-size: 0.9em;
    margin-top: 2em;
    margin-bottom: 0.5em;
    padding: 0.1em 0.3em;
  }

  /* ——— CLIPS CRÉÉS ——— */
  .clips-list-container {
    padding: 0.5em;
  }
  .liste-clips-crees li {
    gap: 1em;
    margin-bottom: 0.3em;
  }
  .bouton-liste-clips {
    font-size: 0.8em;
    padding: 0.2em 0.4em;
  }
  .cc-clip-delete {
    font-size: 0.8em!important;
  }

  /* ——— FAVORIS ——— */
  .conteneur_video_favori {
    margin-bottom: 1em;
  }
  .favoris-icon,
  .favoris-icon-profil-perso {
    width: 0.8em;   /* ajuste à la taille désirée, ex. 0.8em ou 1em */
    height: auto; /* garde l’aspect ratio */
  }
  .lecteur_profil_perso {
    width: 100%;
    margin: 0.5em auto;
  }
  .texte_nom_groupe_profil_perso,
  .texte_createur_profil_perso {
    font-size: 0.7em;
  }
  .text-favoris-profil-perso {
    font-size: 0.7em;
  }
  .pas_de_favoris {
    font-size: 0.7em;
    margin-bottom: 4em;
  }








/* SHARE.HTML */
  /* 1) Le conteneur blanc prend 75% ou 90% selon ton break-point */
  .conteneur_global_share {
    margin-top: 3em!important;
    width: 94% !important;        /* ou 90% si tu veux */
    max-width: none !important;   /* écrase l’ancienne limite */
    padding: 1em !important;    /* padding plus fin */
    margin: 1em auto;             /* centré */
  }

  /* 2) Le lecteur occupe 100% du conteneur */
  .player_video_share {
    width: 100% !important;
    height: auto;
  }

  /* 3) L’en-tête fait 100% et distribue bien l’espace */
  .share_header {
    display: flex !important;
    justify-content: space-between;
    width: 100% !important;
    padding: 0;                   /* supprime tout padding résiduel */
    margin: 0;                    /* supprime toute marge */
  }

  /* 4) Les titres collés aux bords */
  .share_header .titre_video_share,
  .share_header .groupe_video_share {
    margin: 0;                    /* plus de marge */
    padding: 0;                   /* plus de padding */
    font-size: 0.9em;             /* ta taille responsive */
  }

  /* 5) Le pseudo sous le player */
  .pseudo_video_share {
    width: 100% !important;
    font-size: 0.9em;
    margin: 0.5em 0 0;            /* petit espace au-dessus seulement */
  }






/* TOUS LES UTILISATEURS*/
  /*titre */
  #tlu-title {
    font-size: 0.8em;       /* ou 1em selon ton goût */
    margin: 0.5em 0;        /* réduit l’espace au-dessus/ci-dessous */
  }
  /* Réduit la largeur du conteneur blanc */
  .conteneur-fond-blanc-tous-users {
    display: inline-block !important;
    width: 20% !important;       /* passe de auto/100% à 90% de l’écran */
  }

  /* Les “boutons” utilisateurs (div cliquables) */
  .bouton_tous_les_utilisateurs {
    font-size: 0.8em;         /* rapetisse le texte */
    display: block;           /* force un retour à la ligne */
    width: auto;
    max-width: 100%;
  }










/* PROFIL-VISIT.HTML */
  /* PUB */
  .fixed-ad-profil-visit {
    display: none;
  }

  /* 1) Titre principal */
  #pv-title {
    font-size: 0.9em;      /* plus petit */
  }

  /* 2) Conteneur global */
  .profil_visit_container {
    padding: 0.5em;        /* moins de padding */
  }

  /* 3) Chaque « carte » blanche */
  .conteneur_video_wtv_profil_visit {
    max-width: 90%;        /* presque toute la largeur dispo */
    margin: 0.5em auto;    /* centrée avec moins d’espaces */
    padding: 1em;        /* plus compact */
    border-radius: 0.25em;
  }

  .video_player_profil_visit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;        /* <— AJOUTÉ */
  }
  
  .video_player_profil_visit video {
    width: 100%;         /* prend 70 % de la largeur du wrapper */
    max-width: 100%;
    height: auto;
    margin: 0;          /* plus besoin de auto */
    display: block;
  }

  /* 5) Texte « ajouter/supprimer des favoris » */
  .text-favoris {
    font-size: 0.8em;      /* plus petit */
  }

  /* 6) Icône cœur */
  .favoris-icon {
    width: 1em;            /* réduit la taille */
    height: auto;
    margin-right: 0.3em;
  }
  .nom-groupe-profil-visit {
    font-size: 0.9em;
    color: #1E2A38;
    text-align: left;
    margin-left: 0.5em;
  }






/* ERREUR */
  /* 1) Réduit et centre le conteneur blanc */
  .conteneur-fond-blanc-erreur {
    margin-top: 3em!important;
    width: 80%;            /* au lieu de 100% */
    max-width: 20em;       /* limite absolue sur très petits écrans */
    margin: 2em auto;    /* séparateur vertical + centrage */
    padding: 1.5em 1.5em;   /* moins de padding */
    border-radius: 0.5em;
    background-color: rgba(255,255,255,0.8);
  }

  /* 2) Texte d’erreur plus petit */
  #erreur-title {
    font-size: 0.9em;      /* plutôt que 2em ou valeur par défaut */
    line-height: 1.2;      /* serre un peu les lignes */
    margin: 0;             /* pour éviter un top/bottom trop grand */
  }


/* LIMITE ATTEINTE.HTML"*/

  #limite-title {
    font-size: 0.9em;
  }






/* MAINTENANCE.HTML"*/

  /* 2) Agrandir le GIF */
  .gif_maintenance {
    width: 100%;           /* agrandit à 60% de la largeur de l’écran (ajuste si besoin) */
    height: auto;
  }









  
/* CONTACT */
  /* 1) Conteneur principal blanc */
  .conteneur-fond-blanc-contact {
    margin-top: 4em!important;
    width: 92%;             /* moins large */
    margin: 1.5em auto;     /* centré + espacé verticalement */
    padding: 1em 1em;    /* plus compact */
    border-radius: 0.5em;
  }

  /* 2) Titre */
  #contact-title {
    font-size: 0.8em;       /* rapetissé */
    line-height: 1;       /* plus serré */
    margin: 0 0 0.5em;      /* retouche des marges */
  }

  /* 3) Paragraphes */
  .conteneur-fond-blanc-contact p {
    font-size: 0.8em;       /* un peu plus petit */
    line-height: 1.3;       /* confort de lecture */
    margin: 0.4em 0;        /* espacement vertical réduit */
  }









/* PROGRESSION */
  .prog-clip-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0;
  }


  .texte_envoie_mail {
    min-width: 18em;
    display: table; /* Pour que l'élément soit de type bloc mais s'ajuste à la largeur du contenu */
    margin: 0 auto 1em auto; 
    color: #1E2A38;
    font-size: 0.8em;
    font-weight: normal;
    text-transform: none;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 0.5em 1em !important;
    border-radius: 0.6em;
    border: 0.1em solid #1E2A38;
    margin-bottom: 2em;
  }

  .prog-clip-block,
  .clip-white-bg {
    min-width: 15em;
    background: rgba(255,255,255,0.70);
    border-radius: 0.6em;
    box-shadow: 0 2px 18px rgba(0,0,0,0.08);
    padding: 1.1em 1.6em 1.1em 1.6em;
    margin-bottom: 2.2em;
    display: inline-block;
    max-width: 400px;
    text-align: center;

  }



  .clip-date, .clip-status, .clip-estimee {
    display: block;
    margin-bottom: 0.45em;
    font-size: 0.8em;
  }
  .clip-status, .clip-estimee {
    margin-left: 0.2em;
  }

  #prog-total-clips {
    margin-bottom: 2em !important;
  }

  .progressbar_baby {
    width: 100%;
    max-width: 340px;
    height: 1.2em;
    background: #e9e9ec;
    border-radius: 0.6em;
    box-shadow: 0 1px 8px rgba(0,0,0,0.05);
    margin-top: 2em;
    margin-bottom: 2em;
    overflow: hidden;
    position: relative;
    display: block;
  }

  .progressbar_baby_inner {
    background: linear-gradient(90deg,  #eeba00 0%, #ffeb88 100%);
    height: 100%;
    width: 0;
    border-radius: 0.6em;
    transition: width 0.6s cubic-bezier(.4,1.3,.5,1); /* fluide ! */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
    font-size: 0.8em;
    position: relative;
  }

  .progressbar_baby_text {
    width: 100%;
    text-align: center;
    z-index: 2;
    color: #222;
    font-size: 0.8em;
    position: relative;
    user-select: none;
  }

  .bouton_voir_clip {
    text-align: center; /* Centrer le texte */
    font-family: "Gill Sans", sans-serif;
    font-size: 0.8em;
    line-height: 0.7;
    color: #1E2A38;
    margin: 0.5em 0;
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: color 0.3s ease;
  }

  .bouton_voir_clip:hover,
  .bouton_voir_clip:active {
    color: #580F41;
  }


}




/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/* ++++++++ #entre 375 et 0++++++++ */

/* --- Catégorie 4 : écrans en portrait de largeur inférieure ou égale à 375px --- */
@media screen and (max-width: 375px) {


/* — BASE — */
  html, body{
    max-width:100%;
    overflow-x:hidden;          /* zéro débordement horizontal */
  }

  /* HEADER ­— hauteur + organisation verticale */
  header{
    height:10em;               /* entête plus haute          */
    padding:0;                 /* pas de padding latéral     */
    display:flex;
    flex-direction:column;     /* on empile les blocs        */
    align-items:center;
    justify-content:flex-start;
    position:relative;
  }

  /* dégradé sur toute la largeur / hauteur */
  header::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom,
               rgba(0,0,0,.80) 0%,
               rgba(0,0,0,0)   100%);
    z-index:-1;
  }

/* — BLOC ENTETE — */
  /* 1. Logo masqué */
  .header-left,
  .logo{
    display:none !important;
  }

  /* 2. Boutons “Création” + “Contemplation” centrés */
  .header-middle{
    position: relative;
    left: 1.5em;    /* décale tout le groupe de boutons */
    margin-top:0.5em;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0.5em;
  }
  /* boutons centraux */
  .header-middle button{
    display:block !important;  /* force bloc → width auto */
    margin:0 auto;
    width:auto;
    max-width:12em;
    padding:0.5em 1em;
    font-size:0.8em!important;
  }

  /* 3. Ligne :  Mon compte • Contact • Drapeaux */
  .header-right{               /* on garde un conteneur plein‑largeur */
    width:100%;
    position:relative;         /* sert au positionnement absolu plus bas */
  }
  .header-right-container {
    position: absolute !important;  /* on sort du flux */
    top: -8em;                        /* 5em à partir du haut de l’header */
    right: 1em;                      /* 5em à partir du bord droit */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6em;
  }

  /* remet les icônes/drapeaux en flux normal */
  #lang-fr,
  #lang-en{
    position:static !important;
    top:auto; left:auto;
    width: 1.5em;
  }

  #contact-icon{
    position:static !important;
    top:auto; left:auto;
    width: 1.5em;
  }
  /* —— Bouton « Mon compte » fixé en haut-gauche de l’en-tête —— */
  
  header .compte-menu {
    position: absolute !important;  /* se place par rapport au <header> (position:relative) */
    top: 4.8em !important;            /* 1 em sous le haut du header */
    left: -13em !important;           /* 1 em du bord gauche */
    right: auto !important;         /* annule tout right précédent */
    margin: 0 !important;
    z-index: 150;                   /* au-dessus du dégradé */
  }
  /* dropdown toujours aligné sous l’icône */
  header .compte-menu .compte-dropdown {
    left: -3em !important;
  }
  /*menu deroulant de “mon compte” */
  .compte-dropdown button {
    font-size: 0.7em;       /* Ajuste la taille du texte */
  }

  .info_connexion_entete{      /* cache “Connecté avec : …” */
    display:none !important;
  }

  /* 4. Boutons “Se connecter / S’inscrire” empilés en haut‑droite */
  .header-right-buttons{
    position:absolute;
    top:-4em;
    right:12em;
    flex-direction:column;
    gap:0.5em;
    margin:0;
  }
  .header-right-buttons .se_connecter_base,
  .header-right-buttons .inscription_base{
    font-size: 0.8rem;   /* ↘︎ ajuste comme tu veux : 0.6 rem, 0.75 rem… */
    padding: 0.2em 0;    /* facultatif : resserre le haut/bas */
    line-height: 1.1;    /* évite que ça déborde verticalement */
  }


  /* — FOOTER MOBILE — */
  footer {
    height: auto;
    padding: 0.5em 0;
  }
  .footer-landscape {
    display: none !important;
  }
  .footer-portrait {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* pub centrée et fixe */
  .footer-portrait-image {
    position: fixed;
    bottom: -3em;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100%;
    height: auto;
    z-index: 10;
  }
  /* texte au-dessus */
  #footer_videos_portrait {
    position: fixed;
    bottom: -4em;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 0.8em;
    z-index: 10;
  }
  /* Bouton « Donate »*/
  .button_donate{
    position: relative;
    top: 0em;
    right: 0em;
    height: 1.3em;          /* demandé */
    width: auto;
  }
    /* Remonte le texte "Vidéos fournies par Pexels ❤️" */
  #footer_videos_portrait{
    position: relative;
    margin-bottom: 0;   /* (optionnel) annule le petit espace bas */
  }

  

  /*texte video fourni par pexel */
  .texte_video_fourni_par {
    color: #F5F5F7;  
    font-style: italic;
    font-size: 0.8em;
  }
  .texte_pexel,
  .texte_pexel:link,
  .texte_pexel:visited {
    color: #F5F5F7 !important;  /* remplace #FF0000 par ta couleur */
    font-size: 0.8em;
  }
  /* on cible le paragraphe juste au-dessus de l’image leaderboard portrait */
  #footer_videos_portrait {
    /* ajustez la valeur selon le décalage désiré */
    position: relative;
    top: 0.5em;
    font-size: 0.9rem;  /* si vous voulez aussi réduire légèrement la taille */
  }










/* INDEX.HTML*/
  /* ——— Agrandissement GIF et repositionnement du PNG ——— */
  .intro-index-gif {
    width: 20em !important;   /* taille du GIF central */
    height: auto !important;
  }

  .actualiser-index {
    position: fixed !important;       /* on sort l’image du flow pour la positionner par rapport à la fenêtre */
    top: -26em !important;              /* 10em (hauteur du header) − 3em = 7em depuis le haut */
    left: 50% !important;             /* centré horizontalement */
    transform: translateX(-50%) !important;
    width: 4em !important;            /* taille de ton logo blanc */
    height: auto !important;
    cursor: pointer;
    z-index: 100;                      /* au-dessus de tout */
  }






  
/* CONNEXION.HTML"*/
  /* PUB */
  .fixed-ad-co {
    display: none;
  }
  /* Nouveau conteneur pour le contenu de connexion avec fond blanc */
  .login-container {
    max-width: 90%;                    /* Même largeur que .connexion-content */
  }
  /* titre */
  .connexion-content h1 {
    font-size: 1em;     /* réduit la taille du titre */
  }
  /* labels, paragraphes */
  .connexion-content label,
  .connexion-content p,
  #lost-msg,
  #errorMessage {
    font-size: 0.8em;     /* texte un peu plus petit */
  }
  /* champs de saisie */
  .connexion-content input[type="email"],
  .connexion-content input[type="password"] {
    font-size: 0.8em;     /* réduit la police à l’intérieur */
  }
  /* rapetisser le texte tapé dans les inputs */
  .login-container .connexion-content input[type="email"],
  .login-container .connexion-content input[type="password"] {
    font-size: 0.8em; /* ou 0.9em selon ton goût */
  }
  /* boutons */
  .bouton_mdp_perdu,
  .bouton_envoi_mail {
    font-size: 0.8em;     /* réduit le texte des boutons */
    padding: 0.5em 1em;   /* moins de padding */
  }
  /* boutons */
  .connexion-buttons .button_connexion_on_connexion_page {
    font-size: 1em;     /* réduit le texte des boutons */
    padding: 0.5em 1em;   /* moins de padding */
  }
  /* le formulaire « mot de passe perdu » */
  #lost-form input,
  #lost-form button {
    font-size: 0.8em;
    padding: 0.4em 0.8em;
  }
  .button_connexion_on_connexion_page {
    margin-top: 2em;
    margin-bottom: 0em;
  }






 
  
/* INSCRIPTION.HTML"*/
  .conteneur_fond_blanc {
    width: 80%;
    margin: 0 auto; /* centre horizontalement */
  }
  /* PUB */
  .fixed-ad {
    display: none;
  }

    #inscriptionTitle {
    font-size: 1em;     /* jouez sur la valeur pour obtenir la taille souhaitée */
    line-height: 1.2;
  }

  /* réduire les libellés (pseudo, email, mot de passe, etc.) */
  .inscription-content label {
    font-size: 0.8em;
  }

  /* réduire le texte des paragraphes d’erreur / d’info */
  .inscription-content p {
    font-size: 0.8em;
  }

  /* réduire les champs input */
  .inscription-content input {
    font-size: 0.8em;
    padding: 0.5em;      /* optionnel : réduire aussi leur padding */
  }

  /* réduire les boutons “envoyer le code” et “s’inscrire” */
  .inscription-content button {
    font-size: 1em;
    padding: 0.5em 1em;   /* ajustez si besoin */
  }

  #sendCodeButton {
    font-size: 0.8em;       /* taille du texte */
    padding: 0.4em 0.8em;   /* réduit le padding */
  }
  .mail_banned {
    font-size: 0.8em;
  }
  #verificationSuccessMsg {
    font-size: 0.8em;
  }






  
/* CHOIX.HTML */

  /* pubs*/
  .fixed-ad-choix-clip {
    display: none !important;
  }
  .h1-commun-avec-fond {
    font-size: 1em!important;      /* réduire la taille */
    padding: 0.3em;        /* ajuster le padding si besoin */
    margin-top: -3em!important;
  }

  /* 2) Tous les H2 */
  .texte_sous_titre,
  #cc-themes-heading,
  #cc-keywords-heading,
  #cc-effects-heading {
    font-size: 1em;        /* réduire la taille */
  }

  /* 3) Tous les textes « normaux » (labels, options, paragraphes sauf la checkbox « j’ai créé… ») */
  .texte_contenu,
  .cc-theme-option,
  .cc-effect-option,
  .texte_h2_plus_petit,
  .texte_contenu_creation {
    font-size: 0.8em;
  }

  /* 4) Les inputs textuels */
  .input_keyword,
  #input_nom_groupe,
  #input_lien_musique {
    font-size: 0.8em;
  }

  .input_nom_clip {
    font-size: 0.8em;
    margin-bottom: -1em;
  }

  .input_choix_fichier {
    font-size: 0.8em;       /* police plus petite */
  }

  /* boutons telecharger musique */
  #cc-download-btn {
    font-size: 0.8em;
    padding: 0.5em 1em;
  }
  /* boutons ok */
  .button_ok_choix_clip {
    font-size: 0.8em;
    padding: 0.5em 1em;
  }
  /* Réduire les checkbox “effets” et “musique originale” */
  input.checkbox_musique_originale,
  .checkbox_effets input[type="checkbox"] {
    width: 1em;
    height: 1em;
    transform: scale(0.8);
    transform-origin: top left;
  }







/* WAIT-AUDIO.HTML et clip*/
  .fixed-ad-tous-les-wait {
    width: 18%;      /* ou tout autre % que vous désirez */
    height: auto;    /* conserve le ratio de l’image */
    top:75%
  }
  .pub-image-container img,
  #pubVideo {
    /* On le fait occuper 80% de la largeur de l’écran */
    width: 160vw;
    /* On limite sa taille max pour ne pas dépasser l’écran */
    max-width: 20em;
    height: auto;  /* conserve le ratio */
    display: block;
    margin: 0 auto; /* le centre horizontalement */
  }
  








  
/* LECTEUR */
  /* PUB */
  .ad-lecteur {
    display: none !important;
  }
  /* conteneur fond blanc*/
  .conteneur_fond_blanc_lecteur {
    margin-top: 3em!important;
    width: 90%;        /* passez à 90% du viewport */
    padding: 1em;      /* un peu moins de padding */
    margin: 0 auto;    /* centre horizontalement */
  }
  /* réduit la taille du titre du clip au-dessus du lecteur */
  #clipNameTitle {
    font-size: 0.9em;         /* adapte selon ton besoin */
    margin-top: 0em;
  }
  /* bouton modifier le clip*/
  .button_modif_final_clip {
    font-size: 0.7em;        /* par exemple 90% de la taille normale */
  }
  /* bouton share et download*/
  .button_download_final_clip,
  .bouton_share_sur_lecteur {
    width: 1em;  /* ou en % : ex. width: 8%; */
    height: auto;
  }
  /* 1) Contenant fond blanc */
  .container_no_video {
    width: 80%;           /* moins large */
    padding: 1em;         /* moins de padding */
    font-size: 0.9em;     /* texte global un peu plus petit */
  }

  /* 2) Texte à l’intérieur */
  .container_no_video p {
    font-size: 0.9em;     /* réduire la taille du texte */
    line-height: 1.3;     /* garde une bonne lisibilité */
  }

  /* 3) Bouton « C’est parti » */
  .container_no_video .bouton_recreer_clip {
    padding: 0.5em 1em;   /* bouton plus compact */
    font-size: 0.8em;     /* texte du bouton plus petit */
  }


  






/* MODIFICATIONS.HTML*/
  /* 1) On rapetisse le « cadre » blanc */
  .conteneur_tout_modif {
    width: 80%;        /* passe de 100% à 80% de la largeur */
    margin: 1em auto;  /* recentre horizontalement et ajoute un peu d’espace vertical */
    padding: 2em;      /* si vous aviez un padding fixe, vous pouvez le réduire ici */
  }
  .h1-modif {
    font-size: 1em;  /* ou la valeur que tu préfères */
  }
  /* rapetisser le compteur “vidéo n°…” */
  .texte_numero_video {
    font-size: 0.9em; /* ajuste la valeur selon ton goût */

  }  
  /* bouton precedent et suivant*/
  .conteneur_boutons_defile .bouton-precedent,
  .conteneur_boutons_defile .bouton-suivant {
      font-size: 0.7em;
  }

  /* 2) On rapetisse le lecteur vidéo */
  #videoPlayer,
  .lecteur-modif {
    width: 100%;       /* prend 100% de son parent (qui fait maintenant 80% de l’écran) */
    height: auto;      /* conserve les proportions */
  }
  /*2) boutons par... */
  .bouton-remplacer,
  .bouton-remplacer-perso {
    font-size: 0.7em;      /* réduire la taille du texte */
  }


  /*POPUP "une de tes videos"*/
  .fenetre-preview-video-perso {
    width: 100%!important;
  }
  #previewPersoModal {
    width: 70% !important;        /* presque toute la largeur de l’écran */
    max-width: 400px;             /* ne pas dépasser 400px */
    padding: 1.5em !important;    /* plus d’espace intérieur */
  }
  /*  POPUP "une videos pexel"*/
  .fenetre-preview {
    width: 75%;
  }

  /* Titre « Choisis ta vidéo » (pop-up perso) */
  .fenetre-preview-video-perso h2,
  #videoPersoTitle {
    font-size: 1em;        /* réduit la taille du titre */
  }

  /* — réduire la taille des libellés textes — */
  .texte-remplace-par,
  .texte_modifie,
  .texte_modifie_filtre,
  #preview-title,
  #videoPersoChoosePassage,
  .texte-seq-voulue {
    font-size: 0.8em;
  }

  /* — réduire les boutons de sélection / prévisualisation — */
  .bouton-charger-video,      /* « Charger la vidéo » */
  .bouton-ok-choix-passage,   /* « ok » */
  .choisir-video,             /* « Cette vidéo me plaît » */
  .bouton-nouvelle-video {    /* « Voir une autre vidéo » */
    font-size: 0.7em;
  }

  /* — réduire les champs de saisie — */
  .input_modif_nom_clip,
  .input_modif_nom_groupe {
    font-size: 0.8em;
  }
    /* rapetisser les libellés “couleurs” et “noir et blanc” */
  .text-modif-couleurs,
  .text-modif-NB {
    font-size: 0.8em;
  }

  /* — agrandir le bouton « J'ai fini de modifier » — */
  .bouton-fini {
    font-size: 0.9em;
  }






  
/* WTV.HTML"*/
  .h1-commun {
    font-size: 1em; /* au lieu de 2rem par exemple */
  }
  /* bouton a trier"*/
  #wtv-dropdownButton {
    font-size: 0.8em;     /* 75% de la taille courante (à ajuster) */
    padding: 0.5em 0.5em;  /* et tu peux réduire un peu les paddings si besoin */
  }

  /* Réduit la largeur de chaque carte et centre */
  .conteneur_video_wtv {
    width: 90%;
    margin: 1em auto;   /* espace vertical + centrage horizontal */
    padding: 1em;          /* <— ici : 1em tout autour */
  }

  /* on s’assure que le wrapper prend toute la largeur disponible */
  .conteneur_video_wtv .video_player {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* la vidéo elle‐même fait 60% du conteneur et reste centrée */
  .conteneur_video_wtv .video_player video {
    width: 100%;
    height: auto;
  }

  /* Ajuste la taille de la typo dans la carte */
  .conteneur_video_wtv .nom-groupe,
  .conteneur_video_wtv .creator-info,
  .conteneur_video_wtv .texte_lien_musique,
  .conteneur_video_wtv .texte_inapropriate_wtv,
  .conteneur_video_wtv .texte_share_wtv,
  .conteneur_video_wtv .favoris-likes-row,
  .conteneur_video_wtv .wtv-likes-block {
    font-size: 0.8em;  /* réduis légèrement la police */
  }
  /* ---- popup partage ---- */
  .popup_share_wtv {
    background: transparent;
    box-shadow: 0 .5em 1.25em rgba(0,0,0,.0); /* 8px → 0.5em, 20px → 1.25em */

  }
  .close_share_popup_wtv {
    top: 10em;
    right: 4.5em;
    z-index: 2000;
  }
  /* Titre de la pop-up */
  .popup_share_wtv h2 {
    font-size: 1em !important;    /* ou 0.9em selon tes goûts */
    line-height: 1.2 !important;
    margin-bottom: 0.5em;
  }

  /* Champ URL */
  .popup_share_wtv .conteneur_global_share input,
  .popup_share_wtv #wtv-share-url-input {
    font-size: 0.8em !important;
    padding: 0.4em 0.5em !important;
  }

  /* Bouton “Copier” */
  .popup_share_wtv .bouton_copie_url_wtv,
  .popup_share_wtv #wtv-share-copy-btn {
    font-size: 0.8em !important;
    padding: 0.4em 0.6em !important;
    min-width: auto !important;    /* laisse la largeur s’ajuster au contenu */
  }
  /* —— Popup de signalement (1) —— */
  .popup_signalement {
    /* largeur et hauteur */
    width: 80%;           /* ex : 400px environ */
    padding: 1.5em 1em;    /* moins de padding vertical */
  }

  /* le conteneur interne (titre + inputs + bouton) */
  .popup_signalement_inner {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.75em;           /* espace entre les éléments */
    font-size: 0.8em;      /* taille de police un peu plus petite */
  }

  /* titre de la popup */
  #wtv-report-popup-title {
    font-size: 1em;     /* réduit de 1.5em à 1.25em */
    margin-bottom: 0.75em;
  }

  /* boutons et champs */
  .input_signalement {
    font-size: 0.85em;
    padding: 0.35em;
    width: 70%;
    
  }
  .bouton_envoyer_signalement {
    font-size: 0.85em;
    padding: 0.4em 0.6em;
    width: 40%;
  }

  /* —— Popup de confirmation (2) —— */
  .popup_signalement_envoye {
    width: 50%;           /* ex : 320px */
    padding: 1em;
  }
  .texte_popup_signalement_envoye {
    font-size: 0.8em;      /* taille de police de la phrase */
    line-height: 1;      /* hauteur de ligne un peu plus confortable */
  }

  /* PUB */
  .fixed-ad-profil {
    display: none !important;
  }









   
/*PROFIL*/
  /* ——— CONTENEUR ET TITRES ——— */
  .conteneur-page-perso {
    max-width: 90%;
    padding: 1em;
  }
  /* H1 “Tu es sur ta page personnelle” */
  .h1-commun#pr-main-title {
    font-size: 0.9em;
    margin-bottom: 1.5em;
  }
  /* Texte d’accueil (pseudo) */
  .texte-nom-user {
    font-size: 0.8em;
    margin: 0.3em 0;
  }
  /* Lien “Modifier mon mot de passe” */
  .texte_modif_mdp {
    font-size: 0.8em;
    margin: 0.5em 0;
    margin-top: 2em;
  }

  .texte_suivre_prog {
    font-size: 0.8em;
    margin-top: 0.5em;
  }

  #pr-no-clip {
    font-size: 0.8em;     /* taille de texte réduite */
    margin-top: 0.5em;    /* moins d’espace au-dessus */
    margin-bottom: 0.5em; /* moins d’espace en-dessous */
    line-height: 1.2;     /* ajustement de l’interlignage si besoin */
  }

  /* ——— FORMULAIRE MDP ——— */
  #pwd-change-container .input_change_mdp {
    width: 50%;
    height: 1em;
    font-size: 0.7em;
    margin: 0.4em auto;
  }
  #pwd-change-container #btn-change-pwd {
    font-size: 0.7em;
    padding: 0.4em 0.6em;
    width: 30%;
  }

  /* ——— TITRES SECONDAIRES H2 ——— */
  .H2-profil-perso {
    font-size: 0.9em;
    margin-top: 2em;
    margin-bottom: 0.5em;
    padding: 0.1em 0.3em;
  }

  /* ——— CLIPS CRÉÉS ——— */
  .clips-list-container {
    padding: 0.5em;
  }
  .liste-clips-crees li {
    gap: 1em;
    margin-bottom: 0.3em;
  }
  .bouton-liste-clips {
    font-size: 0.8em;
    padding: 0.2em 0.4em;
  }
  .cc-clip-delete {
    font-size: 0.8em!important;
  }

  /* ——— FAVORIS ——— */
  .conteneur_video_favori {
    margin-bottom: 1em;
  }
  .favoris-icon,
  .favoris-icon-profil-perso {
    width: 0.8em;   /* ajuste à la taille désirée, ex. 0.8em ou 1em */
    height: auto; /* garde l’aspect ratio */
  }
  .lecteur_profil_perso {
    width: 100%;
    margin: 0.5em auto;
  }
  .texte_nom_groupe_profil_perso,
  .texte_createur_profil_perso {
    font-size: 0.7em;
  }
  .text-favoris-profil-perso {
    font-size: 0.7em;
  }
  .pas_de_favoris {
    font-size: 0.7em;
    margin-bottom: 4em;
  }


  
  



/* SHARE.HTML */
  /* Réduit le conteneur principal et le centre */
/* 1) Le conteneur blanc prend 75% ou 90% selon ton break-point */
.conteneur_global_share {
  margin-top: 3em!important;
  width: 90% !important;        /* ou 90% si tu veux */
  max-width: none !important;   /* écrase l’ancienne limite */
  padding: 1em !important;    /* padding plus fin */
  margin: 1em auto;             /* centré */
}

/* 2) Le lecteur occupe 100% du conteneur */
.player_video_share {
  width: 100% !important;
  height: auto;
}

/* 3) L’en-tête fait 100% et distribue bien l’espace */
.share_header {
  display: flex !important;
  justify-content: space-between;
  width: 100% !important;
  padding: 0;                   /* supprime tout padding résiduel */
  margin: 0;                    /* supprime toute marge */
}

/* 4) Les titres collés aux bords */
.share_header .titre_video_share,
.share_header .groupe_video_share {
  margin: 0;                    /* plus de marge */
  padding: 0;                   /* plus de padding */
  font-size: 0.8em;             /* ta taille responsive */
}

/* 5) Le pseudo sous le player */
.pseudo_video_share {
  width: 100% !important;
  font-size: 0.8em;
  margin: 0.5em 0 0;            /* petit espace au-dessus seulement */
}




/* TOUS LES UTILISATEURS*/
  /*titre */
  #tlu-title {
    font-size: 0.9em;       /* ou 1em selon ton goût */
    margin: 0.5em 0;        /* réduit l’espace au-dessus/ci-dessous */
  }
  /* Réduit la largeur du conteneur blanc */
  .conteneur-fond-blanc-tous-users {
    display: inline-block !important;
    width: 20% !important;       /* passe de auto/100% à 90% de l’écran */
  }

  /* Les “boutons” utilisateurs (div cliquables) */
  .bouton_tous_les_utilisateurs {
    font-size: 0.8em;         /* rapetisse le texte */
    display: block;           /* force un retour à la ligne */
    width: auto;
    max-width: 100%;
  }








  
  
/* PROFIL-VISIT.HTML */
  /* PUB */
  .fixed-ad-profil-visit {
    display: none;
  }

  /* 1) Titre principal */
  #pv-title {
    font-size: 0.9em;      /* plus petit */
  }

  /* 2) Conteneur global */
  .profil_visit_container {
    padding: 0.5em;        /* moins de padding */
  }

  /* 3) Chaque « carte » blanche */
  .conteneur_video_wtv_profil_visit {
    max-width: 90%;        /* presque toute la largeur dispo */
    margin: 0.5em auto;    /* centrée avec moins d’espaces */
    padding: 1em;        /* plus compact */
    border-radius: 0.25em;
  }

  .video_player_profil_visit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;        /* <— AJOUTÉ */
  }
  
  .video_player_profil_visit video {
    width: 100%;         /* prend 70 % de la largeur du wrapper */
    max-width: 100%;
    height: auto;
    margin: 0;          /* plus besoin de auto */
    display: block;
  }

  /* 5) Texte « ajouter/supprimer des favoris » */
  .text-favoris {
    font-size: 0.8em;      /* plus petit */
  }

  /* 6) Icône cœur */
  .favoris-icon {
    width: 1em;            /* réduit la taille */
    height: auto;
    margin-right: 0.3em;
  }
    .nom-groupe-profil-visit {
    font-size: 0.8em;
    color: #1E2A38;
    text-align: left;
    margin-left: 0.5em;
  }








  
  
/* ERREUR */
  /* 1) Réduit et centre le conteneur blanc */
  .conteneur-fond-blanc-erreur {
    margin-top: 3em!important;
    width: 80%;            /* au lieu de 100% */
    max-width: 20em;       /* limite absolue sur très petits écrans */
    margin: 2em auto;    /* séparateur vertical + centrage */
    padding: 1.5em 1.5em;   /* moins de padding */
    border-radius: 0.5em;
    background-color: rgba(255,255,255,0.8);
  }

  /* 2) Texte d’erreur plus petit */
  #erreur-title {
    font-size: 0.8em;      /* plutôt que 2em ou valeur par défaut */
    line-height: 1.2;      /* serre un peu les lignes */
    margin: 0;             /* pour éviter un top/bottom trop grand */
  }


/* LIMITE ATTEINTE.HTML"*/

  #limite-title {
    font-size: 0.8em;
  }


  








/* MAINTENANCE.HTML"*/

  /* 2) Agrandir le GIF */
  .gif_maintenance {
    width: 100%;           /* agrandit à 60% de la largeur de l’écran (ajuste si besoin) */
    height: auto;
  }
  







  
    
/* CONTACT */
  /* 1) Conteneur principal blanc */
  .conteneur-fond-blanc-contact {
    margin-top: 4em!important;
    width: 92%;             /* moins large */
    margin: 1.5em auto;     /* centré + espacé verticalement */
    padding: 1em 1em;    /* plus compact */
    border-radius: 0.5em;
  }

  /* 2) Titre */
  #contact-title {
    font-size: 0.8em;       /* rapetissé */
    line-height: 1;       /* plus serré */
    margin: 0 0 0.5em;      /* retouche des marges */
  }

  /* 3) Paragraphes */
  .conteneur-fond-blanc-contact p {
    font-size: 0.8em;       /* un peu plus petit */
    line-height: 1.3;       /* confort de lecture */
    margin: 0.4em 0;        /* espacement vertical réduit */
  }




  /* PROGRESSION */
  .prog-clip-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0;
  }


  .texte_envoie_mail {
    min-width: 18em;
    display: table; /* Pour que l'élément soit de type bloc mais s'ajuste à la largeur du contenu */
    margin: 0 auto 1em auto; 
    color: #1E2A38;
    font-size: 0.9em;
    font-weight: normal;
    text-transform: none;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 0.5em 1em !important;
    border-radius: 0.6em;
    border: 0.1em solid #1E2A38;
    margin-bottom: 2em;
  }

  .prog-clip-block,
  .clip-white-bg {
    min-width: 15em;
    background: rgba(255,255,255,0.70);
    border-radius: 0.6em;
    box-shadow: 0 2px 18px rgba(0,0,0,0.08);
    padding: 1.1em 1.6em 1.1em 1.6em;
    margin-bottom: 2.2em;
    display: inline-block;
    max-width: 400px;
    text-align: center;

  }



  .clip-date, .clip-status, .clip-estimee {
    display: block;
    margin-bottom: 0.45em;
    font-size: 0.9em;
  }
  .clip-status, .clip-estimee {
    margin-left: 0.2em;
  }

  #prog-total-clips {
    margin-bottom: 2em !important;
  }

  .progressbar_baby {
    width: 100%;
    max-width: 340px;
    height: 1.2em;
    background: #e9e9ec;
    border-radius: 0.6em;
    box-shadow: 0 1px 8px rgba(0,0,0,0.05);
    margin-top: 2em;
    margin-bottom: 2em;
    overflow: hidden;
    position: relative;
    display: block;
  }

  .progressbar_baby_inner {
    background: linear-gradient(90deg,  #eeba00 0%, #ffeb88 100%);
    height: 100%;
    width: 0;
    border-radius: 0.6em;
    transition: width 0.6s cubic-bezier(.4,1.3,.5,1); /* fluide ! */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
    font-size: 0.8em;
    position: relative;
  }

  .progressbar_baby_text {
    width: 100%;
    text-align: center;
    z-index: 2;
    color: #222;
    font-size: 0.8em;
    position: relative;
    user-select: none;
  }

  .bouton_voir_clip {
    text-align: center; /* Centrer le texte */
    font-family: "Gill Sans", sans-serif;
    font-size: 0.9em;
    line-height: 0.7;
    color: #1E2A38;
    margin: 0.5em 0;
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: color 0.3s ease;
  }

  .bouton_voir_clip:hover,
  .bouton_voir_clip:active {
    color: #580F41;
  }




}