/* --------#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 */
#backgroundVideo {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
object-fit: cover;
z-index: -1;
opacity: 0.8; /* Même opacité que sur index */
}
:root {
--background-video-url: url("../videos/fond_ecran/couloir.mp4");
}
/* BLOQUE LA VIDEO en portrait */
.landscape-video {
display: block;
}
.portrait-video {
display: none;
}
.h1-commun {
color: #1E2A38;
font-size: 1.4em;
font-weight: normal;
text-transform: none;
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-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 */
display: flex;
align-items: center;
justify-content: center; /* Centre les boutons dans cette zone */
gap: 3em; /* 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 15em; /* 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: 0.8em;
cursor: pointer;
padding: 0.5em 1em;
white-space: nowrap; /* Empêche le texte de se couper sur plusieurs lignes */
}
.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: #F5F5F7;
}
/* Pour le bouton "Flux vidéo" */
.tooltip_flux[data-tooltip]::after {
left: -20%;
top: 135%;
background-color: transparent;
color: #F5F5F7;
}
/* Pour le bouton "Visionner" */
.tooltip_visionner[data-tooltip]::after {
left: 0%;
top: -130%;
background-color: transparent;
color: #F5F5F7;
}
/* 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;
}
.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 */
transform: translateX(-8em); /* même rendu mais sans élargir la page */
cursor: pointer;
}
/*MAIL seul*/
#contact-icon {
position: relative;
left: -8em; /* 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: -4em; /* Ajustez la valeur selon vos besoins */
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: #F5F5F7;
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: #F5F5F7;
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 1em;
text-align: left;
font-weight: 300;
}
/* CONTENEUR ICONE PROFIL */
.compte-menu {
position: relative;
top: 4em;
right: -1em;
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(90deg,
#F5F5F7 0%,
#F5F5F7 30%,
#F5F5F7 30%,
transparent 70%,
transparent 70%,
transparent 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 paysage, on affiche le bloc landscape et on cache le bloc portrait */
.footer-landscape {
display: block;
}
.footer-portrait {
display: none;
}
.footer-left,
.footer-center {
flex: 1; /* Chaque partie occupe la même largeur */
text-align: center;
}
/* PUB gauche */
.footer-left-image {
display: none;
position: fixed;
bottom: 0;
left: 0;
height: 4em; /* Adapte à la hauteur du footer */
width: auto;
z-index: 11;
}
/* PUB droite */
.footer-right-image {
display: none;
position: fixed;
bottom: 0;
right: 0;
height: 4em; /* Adapte à la hauteur du footer */
width: auto;
z-index: 11;
}
.footer-center {
width: 100%;
text-align: center;
position: relative;
z-index: 12;
}
/* Partie centrale : contient la phrase “Vidéos fournies par ...” */
.footer-center p {
font-size: 0.9em;
margin: 0.1em 0;
font-family: "Gill Sans", sans-serif;
color: #F5F5F7;
font-weight: 300;
text-align: center; /* Centré */
}
/* Bouton « Donate »*/
.button_donate{
height: 1.5em; /* 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;
}
.button_donate:hover{
filter: brightness(.85); /* léger assombrissement au survol */
}
/* PLACEMENT DU TEXTE VIDEOS FOURNIES */
.footer-right {
margin-right: 1em;
margin-top: -5em;
flex: 1;
text-align: right;
}
/* TEXTE "videos fournies par" */
.texte_video_fourni_par {
color: #1E2A38; /* Couleur souhaitée pour "Vidéos fournies par" */
font-style: italic;
font-size: 0.9em;
}
/* TEXTE/lien "Pexels ❤️" */
.texte_pexel,
.texte_pexel:link,
.texte_pexel:visited {
color: #1E2A38 !important;
font-size: 0.9em;
font-style: italic;
text-decoration: none;
font-weight: 0.1em;
}
.texte_pexel:hover,
.texte_pexel:active {
color: #1E2A38 !important;
text-decoration: underline;
text-decoration-thickness: 0.0625em;
}
/* ====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================*/
/* --------#CAPTCHA -------- */
/* TITRE */
.titre-h1-captcha {
color:#1E2A38;
font-size: 1em;
font-weight: normal;
text-transform: none; /* Pour éviter la transformation en majuscules */
margin-top: -2em;
margin-bottom: 0em;
}
/* Conteneur */
.content-overlay-captcha {
position: relative;
z-index: 1;
text-align: center;
max-width: 45em; /* 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;
}
.captcha-text {
text-align: center;
margin-top: 0.2em;
font-size: 1.5em;
font-family: "Gill Sans", sans-serif;
color: #1E2A38;
}
.captcha-container {
position: relative; /* Pour que les éléments absolus se positionnent par rapport à ce conteneur */
width: 25em;
height: 25em;
margin: auto;
margin-top: -7em;
}
/* Grille divisée en 9 cellules */
.captcha-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 0.3125em;
width: 100%;
height: 100%;
background-color: transparent;
}
/* Chaque cellule utilise la même image, mais en l'agrandissant pour simuler une division en 9 parties */
.captcha-cell {
cursor: pointer;
background-size: 300% 300%; /* Divise l'image en 9 parties */
/* Les positions seront définies individuellement ci-dessous */
}
/* Lorsqu'une cellule est sélectionnée */
.captcha-cell.selected {
border: 0.5em solid #F7CAC9;
box-shadow: none;
}
/* Survol des cellules non sélectionnées */
.captcha-cell:not(.selected):hover {
border: 0.2em solid #F7CAC9;
}
/* Positionnement de l'image pour chaque cellule afin de n'afficher que la partie correspondante */
/* Cellule 1 : coin supérieur gauche */
.captcha-grid > .captcha-cell:nth-child(1) { background-position: 0% 0%; }
/* Cellule 2 : haut, centre */
.captcha-grid > .captcha-cell:nth-child(2) { background-position: 50% 0%; }
/* Cellule 3 : coin supérieur droit */
.captcha-grid > .captcha-cell:nth-child(3) { background-position: 100% 0%; }
/* Cellule 4 : milieu, gauche */
.captcha-grid > .captcha-cell:nth-child(4) { background-position: 0% 50%; }
/* Cellule 5 : centre */
.captcha-grid > .captcha-cell:nth-child(5) { background-position: 50% 50%; }
/* Cellule 6 : milieu, droite */
.captcha-grid > .captcha-cell:nth-child(6) { background-position: 100% 50%; }
/* Cellule 7 : coin inférieur gauche */
.captcha-grid > .captcha-cell:nth-child(7) { background-position: 0% 100%; }
/* Cellule 8 : bas, centre */
.captcha-grid > .captcha-cell:nth-child(8) { background-position: 50% 100%; }
/* Cellule 9 : coin inférieur droit */
.captcha-grid > .captcha-cell:nth-child(9) { background-position: 100% 100%; }
/* Conteneur pour les boutons du captcha */
.captcha-buttons {
display: flex;
justify-content: center;
align-items: center;
margin-top: 1em;
gap: 1em;
padding-bottom: 6em;
}
/* Boutons "actualiser" */
.button_refresh_captcha {
position: absolute; /* Positionnement absolu par rapport à .captcha-container */
top: 0.5em; /* Ajustez cette valeur pour le positionner verticalement */
right: -4em; /* Ajustez cette valeur pour le positionner horizontalement */
padding: 0;
border: none;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
z-index: 10; /* S'assurer qu'il est au-dessus */
}
/* Image "actualiser" */
.button_refresh_captcha img {
width: 3em;
height: 3em;
object-fit: contain;
}
/* ====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================*/
/* --------#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: 0em; /* 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: 0.5em;
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: 0em;
}
.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: 336px;
height: 280px;
}
.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;
}
/* FOND BLANC */
.conteneur_fond_blanc {
background-color: rgba(255, 255, 255, 0.5);
padding-top: 3em;
padding-right: 1em;
padding-bottom: 2em;
padding-left: 1em;
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: 60%;
transform: translateY(-50%);
z-index: 1000;
width: 336px;
height: 280px;
}
.fixed-ad-left {
left: 0;
}
.fixed-ad-right {
right: 0;
}
/* ====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================*/
/* --------#INDEX-------- */
/* ajoute un bas de page*/
body {
padding-bottom: 10em;
background-color: #8E8E93;
}
body.index-background {
background-size: 60% auto !important;
}
/* BACKGROUND Landscape : 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.2;
}
/* GIF */
.intro-index-gif {
position: absolute;
top: 50%;
left: 50%;
width: 60%;
transform: translate(-50%, -50%);
}
/* bouton actualiser */
.actualiser-index {
width: 10%; /* Définit la largeur à 10% du conteneur parent */
display: block; /* Pour que l'image respecte la largeur définie */
margin: 20em 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 */
}
.actualiser-index {
transition: transform 0.5s ease-out; /* Pour revenir doucement à la position initiale au survol terminé */
}
.actualiser-index:hover {
animation: diceShake 0.5s ease-in-out infinite;
}
@keyframes diceShake {
0% { transform: rotate(0deg) translate(0, 0); }
10% { transform: rotate(2deg) translate(-2px, 2px); }
20% { transform: rotate(-2deg) translate(2px, -2px); }
30% { transform: rotate(2deg) translate(-2px, 2px); }
40% { transform: rotate(-2deg) translate(2px, -2px); }
50% { transform: rotate(2deg) translate(-2px, 2px); }
60% { transform: rotate(-2deg) translate(2px, -2px); }
70% { transform: rotate(2deg) translate(-2px, 2px); }
80% { transform: rotate(-2deg) translate(2px, -2px); }
90% { transform: rotate(2deg) translate(-2px, 2px); }
100% { transform: rotate(0deg) translate(0, 0); }
}
/* 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,");
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_audio {
text-align: center;
font-family: "Gill Sans", sans-serif;
font-size: 1.2em;
color: #1E2A38;
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;
}
/* INPUT NOM CLIP */
.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;
}
/* INPUT MOTS CLES */
.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_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: 336px;
height: 280px;
}
.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: 21em;
height: 17.5em;
}
.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: #708090;
}
/* 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: #708090;
}
.button_musique_web:hover {
outline: 0.125em solid #1E2A38;
background-color: #708090;
color: #F5F5F7;
}
/* 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 {
display: flex;
justify-content: center;
align-items: center;
gap: 1em;
margin-top: 2em;
}
/* Style de la vidéo centrale */
.message-ferme-fenetre {
max-width: 30%;
margin-top: -3em;
height: auto;
border: none;
border-radius: 0.5em;
}
/* Style de la vidéo centrale wait-zap */
.message-attend {
max-width: 30%!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: 2em;
}
.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: 60%;
transform: translateY(-50%);
z-index: 1000;
width: 336px;
height: 280px;
}
.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: 35em; /* 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;
}
/* SOUS 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; }
.bouton_donate_lecteur {
position: absolute;
bottom: 2em;
left: 1.5em;
z-index: 10;
}
.bouton_donate_lecteur img {
display: block;
height: 1.5em; /* ajustez selon la hauteur souhaitée */
width: auto;
}
/* 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 {
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: -2em;
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: 40%;
width: 336px;
height: 280px;
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: 70%;
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 */
.fenetre-preview {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #F5F5F7;
border: 0.0625em solid #ccc;
padding: 1.25em;
margin: 1em;
z-index: 1000;
width: auto;
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: #1E2A38;
cursor: pointer;
}
/* ===================== FENÊTRE DE PRÉVISUALISATION PERSO ===================== */
.fenetre-preview-video-perso {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #F5F5F7;
border: 0.125em solid #1E2A38;
border-radius: 0.625em;
padding: 1.5em;
max-width: 35%;
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 pour les vidéos (nouvelle classe) */
.container_video_player_A_B {
position: relative;
width: 100%;
height: 100%;
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: #708090;
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: #F5F5F7;
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: transparent;
width: 100%;
}
.bouton_copie_url_wtv {
padding: .4rem .8rem;
border: none;
background: #1E2A38;
color: #F5F5F7;
border-radius: .25em; /* 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: 60%;
transform: translateY(-50%);
z-index: 1000;
width: 336px;
height: 280px;
}
.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: 2px solid #1E2A38; /* Bordure avec une couleur contrastée */
border-radius: 8px; /* 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-left: 4em;
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 */
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;
}
.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 */
}
.msg_change_mdp {
text-align: center;
font-size: 0.95em;
color: #fff;
}
/* PUB */
.fixed-ad-profil {
display: none;
position: fixed;
top: 60%;
transform: translateY(-50%);
z-index: 1000;
width: 336px;
height: 280px;
}
.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: space-between; /* ← au lieu de flex-start */
margin-bottom: 0.5em;
margin-left: 0.3em;
}
.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: 60%;
transform: translateY(-50%);
z-index: 1000;
width: 336px;
height: 280px;
}
.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: 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 */
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: 0 auto;
max-width: 10em;
display: flex;
flex-direction: column;
gap: 0em;
text-align: center;
align-items: 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;
}
/* boutons */
.bouton_tous_les_utilisateurs {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
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-------- */
/* SHARE.HTML */
.conteneur_global_share {
position: relative;
margin: 0em auto;
padding-top: 2em;
padding-left: 3em;
padding-bottom: 3em;
padding-right: 3em;
display: flex;
flex-direction: column; /* empile titre + player verticalement */
align-items: center; /* centre le player horizontalement */
justify-content: flex-start; /* 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: 40%;
}
.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%;
margin-bottom: 1em;
}
.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.2em;
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.2em;
line-height: 1.2;
color: #1E2A38;
}
/* ligne pseudo sous le player */
.pseudo_video_share {
margin-top: 1em;
font-family: "Gill Sans", sans-serif;
font-size: 1.2em;
color: #1E2A38;
text-align: center;
width: 100%;
cursor: pointer;
}
.pseudo_video_share:hover {
text-decoration: underline;
}
/* ====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================*/
/* --------#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: -35em;
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: 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: 20em;
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;
}
.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: 1em;
position: relative;
user-select: none;
}
.bouton_voir_clip {
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;
text-decoration: none;
color: inherit;
cursor: pointer;
transition: color 0.3s ease;
}
.bouton_voir_clip:hover,
.bouton_voir_clip:active {
color: #580F41;
}
/* ====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================
====================================================================================================================================================*/
/* --------#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;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/* ++++++++ #entre 1281 et 1025++++++++ */
/* --- Catégorie 2 : écrans en landscape de largeur inférieure ou égale à 1280px et supérieure à 800px --- */
@media screen and (max-width: 1280px) and (min-width: 1025px) {
/* Placez ici vos ajustements spécifiques pour la catégorie 2 en landscape */
/* MODIFICATIONS.HTML : POPUP "une de tes videos"*/
.fenetre-preview-video-perso {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #F5F5F7;
border: 0.125em solid #1E2A38;
border-radius: 0.625em;
padding: 1.5em;
max-width: 40%;
width: 90%;
z-index: 1500;
}
/* MODIFICATIONS.HTML : POPUP "une videos pexel"*/
.fenetre-preview {
display: none;
position: fixed;
top: 50%;
left: 49%;
transform: translate(-50%, -50%);
background: #F5F5F7;
border: 0.0625em solid #ccc;
padding: 1.25em;
margin: 1em;
z-index: 1000;
width: auto;
max-width: 40%;
box-shadow: 0 0.25em 0.5em rgba(0,0,0,0.2);
}
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/* ++++++++ #entre 1024 et 801++++++++ */
/* --- Catégorie 3 : écrans en landscape de largeur inférieure ou égale à 800px --- */
@media screen and (max-width: 1024px) and (min-width: 801px) {
/* BASE.HTML*/
.h1-commun {
font-size: 1.2em;
}
.logo {
width: 10em; /* passe de 13em à 10em */
height: 10em; /* idem */
margin-left: 1em; /* réduit l’écart à gauche */
}
/* boutons centraux */
.header-middle {
gap: 2em; /* 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 */
}
/*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: -6em; /* rapproche vers le centre */
width: 1.8em; /* largeur désirée */
height: auto; /* pour garder les proportions */
}
#lang-fr,
#lang-en {
top: 3em; /* idem */
transform: translateX(-6em); /* même rendu mais sans élargir la page */
width: 1.7em; /* largeur désirée */
height: auto; /* pour garder les proportions */
}
/*Icône “mon compte” */
.compte-menu {
top: 2.9em; /* remonte légèrement */
right: -1em; /* rapproche vers le centre */
width: 1.2em; /* largeur désirée */
height: auto; /* pour garder les proportions */
}
/* 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.8em;
}
/* FOOTER */
footer {
position: fixed; /* reste en bas */
bottom: 0;
left: 0;
width: 100%;
height: 4em; /* Hauteur fixe */
background: linear-gradient(90deg,
#F5F5F7 0%,
#F5F5F7 10%,
#F5F5F7 20%,
transparent 70%,
transparent 70%,
transparent 100%);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
/* couleur du texte video fourni par */
.texte_video_fourni_par {
color: #F5F5F7;
font-style: italic;
font-size: 0.9em;
}
.texte_pexel,
.texte_pexel:link,
.texte_pexel:visited {
color: #F5F5F7 !important; /* remplace #FF0000 par ta couleur */
}
/* INDEX.HTML */
/* logo qui actualise */
.actualiser-index {
position: relative;
top: 5em; /* remonte de 2em au lieu de redéfinir la marge */
margin: 0 auto;
}
/* CHOIX.HTML */
/* pubs*/
.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: 25%; /* ou tout autre % que vous désirez */
height: auto; /* conserve le ratio de l’image */
}
.fixed-ad-choix-clip.left {
left: 0;
}
.fixed-ad-choix-clip.right {
right: 0;
}
/* WAIT_AUDIO.HTML */
.fixed-ad-tous-les-wait {
display: none;
position: fixed;
top: 60%;
transform: translateY(-50%);
z-index: 1000;
width: 25%; /* ou tout autre % que vous désirez */
height: auto; /* conserve le ratio de l’image */
}
.fixed-ad-tous-les-wait.left {
left: 0;
}
.fixed-ad-tous-les-wait.right {
right: 0;
}
/* LECTEUR.HTML */
/* PUB */
.ad-lecteur {
display: none;
position: fixed;
top: 40%;
width: 25%; /* ou tout autre % que vous désirez */
height: auto; /* conserve le ratio de l’image */
z-index: 1500; /* Ajustez le z-index si nécessaire */
}
/* conteneur fond blanc*/
.conteneur_fond_blanc_lecteur {
width: 45%; /* passez à 90% du viewport */
padding: 1.5em; /* un peu moins de padding */
margin: 0 auto; /* centre horizontalement */
}
/* bouton modifier le clip*/
.button_modif_final_clip {
padding: 0.5em 1em; /* au lieu de 1em 2em par défaut */
font-size: 0.8em; /* par exemple 90% de la taille normale */
}
/* bouton share et download*/
.button_download_final_clip,
.bouton_share_sur_lecteur {
width: 1.3em; /* ou en % : ex. width: 8%; */
height: auto;
}
/* MODIFICATIONS.HTML*/
/* 1) On rapetisse le « cadre » blanc */
.conteneur_tout_modif {
width: 50%; /* 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 */
}
/* 2) On rapetisse le lecteur vidéo */
#videoPlayer,
.lecteur-modif {
width: 100%; /* prend 100% de son parent (qui fait maintenant 80% de l’écran) */
max-width: 40em; /* ou toute autre valeur en px pour limiter la largeur max */
height: auto; /* conserve les proportions */
}
/*2) boutons par... */
.bouton-remplacer,
.bouton-remplacer-perso {
font-size: 0.8em; /* 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 {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #F5F5F7;
border: 0.125em solid #1E2A38;
border-radius: 0.625em;
padding: 1.5em;
max-width: 40%;
width: 90%;
z-index: 1500;
}
/* POPUP "une videos pexel"*/
.fenetre-preview {
display: none;
position: fixed;
top: 50%;
left: 49%;
transform: translate(-50%, -50%);
background: #F5F5F7;
border: 0.0625em solid #ccc;
padding: 1.25em;
margin: 1em;
z-index: 1000;
width: auto;
max-width: 40%;
box-shadow: 0 0.25em 0.5em rgba(0,0,0,0.2);
}
/* PROFIL.HTML"*/
/* PUB */
.fixed-ad-profil {
display: none;
position: fixed;
top: 60%;
transform: translateY(-50%);
z-index: 1000;
width: 25%;
height: auto;
}
.fixed-ad-profil.left {
left: 0;
}
.fixed-ad-profil.right {
right: 0;
}
/* PROFIL_VISIT.HTML"*/
.nom-groupe-profil-visit {
font-size: 0.9em;
color: #1E2A38;
text-align: left;
margin-left: 0.5em;
}
/* WTV.HTML"*/
/* bouton a trier"*/
#wtv-dropdownButton {
font-size: 0.9em; /* 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 {
max-width: 30em; /* ou 80% selon ce que tu préfères */
width: 100%;
margin: 1em auto; /* espace vertical + centrage horizontal */
padding: 1em; /* optionnel : ajuste l’espace interne */
}
/* Force la vidéo à remplir son conteneur réduit */
.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: 1em; /* réduis légèrement la police */
}
/* CONNEXION.HTML"*/
/* PUB */
.fixed-ad-co {
display: none;
position: fixed;
top: 60%;
transform: translateY(-50%);
z-index: 1000;
width: 25%;
height: auto;
}
/* Nouveau conteneur pour le contenu de connexion avec fond blanc */
.login-container {
max-width: 20em; /* Même largeur que .connexion-content */
}
/* INSCRIPTION.HTML"*/
.conteneur_fond_blanc {
width: 30%;
margin: 0 auto; /* centre horizontalement */
}
/* CONTACT.HTML"*/
.conteneur-fond-blanc-contact {
max-width: 50%;
}
.content-overlay-contact h1 {
font-size: 1.2em;
}
.conteneur-fond-blanc-contact p {
font-size: 1em; /* Réduit la taille du corps de texte */
line-height: 1;
margin-bottom: 0.75em;
}
/* PROFIL-VISIT.HTML"*/
/* PUB*/
.fixed-ad-profil-visit {
display: none;
width: 25%;
height: auto;
}
/* ERREUR.HTML"*/
/* 1) Réduit la largeur et le padding du conteneur blanc */
.conteneur-fond-blanc-erreur {
width: 30%; /* ou la valeur en % que tu préfères */
}
/* 2) Réduit la taille du titre d’erreur */
#erreur-title,
.conteneur-fond-blanc-erreur h1 {
font-size: 1em; /* ajuste comme tu veux (au lieu de 2em par défaut) */
}
/* PROGRESSION.HTML"*/
.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: 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: 20em;
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.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;
}
/* LIMITE ATTEINTE.HTML"*/
#limite-title {
font-size: 1em;
}
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/* ++++++++ #entre 800 et 681++++++++ */
/* --- Catégorie 3 : écrans en landscape de largeur inférieure ou égale à 800px --- */
@media screen and (max-width: 800px) and (min-width: 681px) {
/* BASE.HTML*/
.h1-commun {
font-size: 1.2em;
}
.logo {
width: 6em; /* passe de 13em à 10em */
height: 6em; /* idem */
margin-left: 1em; /* réduit l’écart à gauche */
}
/* boutons centraux */
.header-middle {
gap: 2em; /* 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: 1em;
right: 3.5em;
}
/*Texte “connecté avec” */
#cc {
font-size: 0.7em; /* passe de 0.9em à 0.8em */
margin: 0.3em 0.5em;/* moins d’espacement */
}
/*Drapeaux & icône mail */
#contact-icon {
top: 4em; /* remonte un peu */
left: -3em; /* rapproche vers le centre */
width: 1.5em; /* largeur désirée */
height: auto; /* pour garder les proportions */
}
#lang-fr,
#lang-en {
top: 4em; /* idem */
transform: translateX(-3em); /* même rendu mais sans élargir la page */
width: 1.5em; /* largeur désirée */
height: auto; /* pour garder les proportions */
}
/*Icône “mon compte” */
.compte-menu {
top: 3.9em; /* remonte légèrement */
right: 4em; /* rapproche vers le centre */
width: 1em; /* largeur désirée */
height: auto; /* pour garder les proportions */
}
.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: 1em; /* Ajustez la valeur selon vos besoins */
top: -1em;
}
.se_connecter_base,
.inscription_base {
font-size: 0.8em;
}
/* FOOTER */
footer {
position: fixed; /* reste en bas */
bottom: 0;
left: 0;
width: 100%;
height: 4em; /* Hauteur fixe */
background: linear-gradient(90deg,
transparent 0%,
transparent 30%,
transparent 30%,
transparent 70%,
transparent 70%,
transparent 100%);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
/* Bouton « Donate »*/
.button_donate{
position: relative;
top: 0em;
right: 0em;
height: 1.1em; /* 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_landscape {
/* 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"*/
.intro-index-gif{
width: 40vw;
left: 50% !important;
top: 50% !important; /* centre vertical/horizontal */
transform: translate(-50%, -50%) !important;
}
/* bouton actualiser */
.actualiser-index{
width: 6vw;
height: auto;
cursor: pointer;
margin-bottom: 10em;
}
/* CHOIX.HTML */
/* pubs*/
.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: 25%; /* ou tout autre % que vous désirez */
height: auto; /* conserve le ratio de l’image */
}
.fixed-ad-choix-clip.left {
left: 0;
}
.fixed-ad-choix-clip.right {
right: 0;
}
.h1-commun-avec-fond {
font-size: 1em!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.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 */
}
/* 5) Les boutons */
.button_ok_choix_clip,
#cc-download-btn {
font-size: 0.8em;
padding: 0.5em 1em;
}
/* WAIT_AUDIO.HTML */
.fixed-ad-tous-les-wait {
display: none;
position: fixed;
top: 60%;
transform: translateY(-50%);
z-index: 1000;
width: 25%; /* ou tout autre % que vous désirez */
height: auto; /* conserve le ratio de l’image */
}
.fixed-ad-tous-les-wait.left {
left: 0;
}
.fixed-ad-tous-les-wait.right {
right: 0;
}
/* LECTEUR.HTML */
/* PUB */
.ad-lecteur {
display : none;
position: fixed;
top: 40%;
width: 25%; /* ou tout autre % que vous désirez */
height: auto; /* conserve le ratio de l’image */
z-index: 1500; /* Ajustez le z-index si nécessaire */
}
/* conteneur fond blanc*/
.conteneur_fond_blanc_lecteur {
width: 45%; /* passez à 90% du viewport */
padding: 1.5em; /* 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 */
}
/* bouton modifier le clip*/
.button_modif_final_clip {
padding: 0.5em 1em; /* au lieu de 1em 2em par défaut */
font-size: 0.7em; /* par exemple 90% de la taille normale */
}
/* bouton share et download*/
.button_download_final_clip,
.bouton_share_sur_lecteur {
width: 1.2em; /* ou en % : ex. width: 8%; */
height: auto;
}
/* MODIFICATIONS.HTML*/
/* 1) On rapetisse le « cadre » blanc */
.conteneur_tout_modif {
width: 44%; /* 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.8em; /* ajuste la valeur selon ton goût */
}
/* 2) On rapetisse le lecteur vidéo */
#videoPlayer,
.lecteur-modif {
width: 100%; /* prend 100% de son parent (qui fait maintenant 80% de l’écran) */
max-width: 40em; /* ou toute autre valeur en px pour limiter la largeur max */
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 {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #F5F5F7;
border: 0.125em solid #1E2A38;
border-radius: 0.625em;
padding: 1.5em;
max-width: 40%;
width: 90%;
z-index: 1500;
}
/* POPUP "une videos pexel"*/
.fenetre-preview {
display: none;
position: fixed;
top: 50%;
left: 49%;
transform: translate(-50%, -50%);
background: #F5F5F7;
border: 0.0625em solid #ccc;
padding: 1.25em;
margin: 1em;
z-index: 1000;
width: auto;
max-width: 40%;
box-shadow: 0 0.25em 0.5em rgba(0,0,0,0.2);
}
/* — 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.9em;
}
/* — 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.8em;
}
/* — réduire les champs de saisie — */
.input_modif_nom_clip,
.input_modif_nom_groupe {
font-size: 0.9em;
}
/* rapetisser les libellés “couleurs” et “noir et blanc” */
.text-modif-couleurs,
.text-modif-NB {
font-size: 0.9em;
}
/* — agrandir le bouton « J'ai fini de modifier » — */
.bouton-fini {
font-size: 1em;
}
/* PROFIL.HTML"*/
/* PUB */
.fixed-ad-profil {
display: none;
position: fixed;
top: 60%;
transform: translateY(-50%);
z-index: 1000;
width: 25%;
height: auto;
}
.fixed-ad-profil.left {
left: 0;
}
.fixed-ad-profil.right {
right: 0;
}
/* 1) Titres H1 et H2 */
#pr-main-title {
font-size: 1em; /* au lieu de 2em */
}
.H2-profil-perso {
font-size: 1em; /* au lieu de 1.5em */
}
.texte_suivre_prog {
font-size: 0.8em;
}
/* Nom d’utilisateur */
#pr-profil-text,
.texte-nom-user {
font-size: 0.9em;
}
/* Lien “Modifier mon mot de passe” */
#pr-change-pwd,
.texte_modif_mdp {
font-size: 0.8em;
}
/* Inputs “nouveau mot de passe” & “confirmation” */
.input_change_mdp {
font-size: 0.7em;
}
/* Bouton “valider” */
#btn-change-pwd {
font-size: 0.8em;
padding: 0.4em 0.8em; /* ajustez si besoin */
}
/* Message “Mot de passe modifié” */
#pwd-change-msg,
.msg_change_mdp {
font-size: 0.9em;
}
/* 2) Réduire les « fenêtres » à fond blanc */
.clips-list-container,
.conteneur_lecteur_profil_perso {
width: 73%; /* au lieu de 100% ou auto */
margin: 1em auto; /* recadrage centré */
padding: 0.5em; /* moins de padding */
}
/* 3) Réduire les lecteurs vidéo */
.lecteur_profil_perso {
width: 90%; /* vidéo plus petite */
height: auto;
}
/* 4) Boutons qui redirigent vers les clips */
.bouton-liste-clips {
font-size: 0.8em; /* texte un peu plus petit */
padding: 0.4em 0.8em; /* moins de padding */
}
/* 5) Textes « supprimer ce clip », « nom du groupe », « ajouter/supprimer aux favoris » */
.cc-clip-delete,
.texte_nom_groupe_profil_perso,
.texte_createur_profil_perso,
.text-favoris-profil-perso {
font-size: 0.8em; /* 80% de la taille d’origine */
}
/* PROFIL_VISIT.HTML"*/
.nom-groupe-profil-visit {
font-size: 0.8em;
color: #1E2A38;
text-align: left;
margin-left: 0.5em;
}
/* WTV.HTML"*/
.h1-commun {
font-size: 1.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: 53%;
margin: 1em auto; /* espace vertical + centrage horizontal */
padding: 1em; /* <— ici : 1em tout autour */
}
/* Force la vidéo à remplir son conteneur réduit */
.conteneur_video_wtv .video_player video {
width: 90%;
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 */
}
/* CONNEXION.HTML"*/
/* PUB */
.fixed-ad-co {
display: none;
position: fixed;
top: 60%;
transform: translateY(-50%);
z-index: 1000;
width: 25%;
height: auto;
}
/* Nouveau conteneur pour le contenu de connexion avec fond blanc */
.login-container {
max-width: 20em; /* 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 */
.connexion-buttons .button_connexion_on_connexion_page,
.bouton_mdp_perdu,
.bouton_envoi_mail {
font-size: 0.8em; /* 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: 30%;
margin: 0 auto; /* centre horizontalement */
}
/* PUB */
.fixed-ad {
display: none;
width: 30%;
height: auto;
}
#inscriptionTitle {
font-size: 1.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.85em;
}
/* réduire le texte des paragraphes d’erreur / d’info */
.inscription-content p {
font-size: 0.85em;
}
/* réduire les champs input */
.inscription-content input {
font-size: 0.85em;
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 */
}
/* CONTACT.HTML"*/
.conteneur-fond-blanc-contact {
max-width: 50%;
}
.content-overlay-contact h1 {
font-size: 1.2em;
}
.conteneur-fond-blanc-contact p {
font-size: 1em; /* Réduit la taille du corps de texte */
line-height: 1;
margin-bottom: 0.75em;
}
/* PROFIL-VISIT.HTML"*/
/* PUB*/
.fixed-ad-profil-visit {
display: none;
width: 25%;
height: auto;
}
/* 1) Réduire le titre “Clips de …” */
#pv-title {
font-size: 1em; /* à ajuster selon ton goût */
line-height: 1.2;
}
/* 2) Réduire les conteneurs blancs qui contiennent chaque lecteur */
.conteneur_video_wtv_profil_visit {
width: 55%; /* passe de 100% (ou auto) à 80% */
padding: 1em; /* réduit le padding */
box-sizing: border-box;
}
/* 3) Réduire le lecteur vidéo */
.video_player_profil_visit video {
width: 90%; /* remplit désormais le conteneur réduit */
height: auto;
}
/* 4) Réduire l’icône cœur */
.favoris-container .favoris-icon {
width: 0.9em; /* à ajuster */
height: auto;
}
/* 5) Réduire le texte “ajouter/supprimer des favoris” */
.favoris-container .text-favoris {
font-size: 0.8em;
}
/* TOUS LES UTILISATEURS.HTML"*/
/* 1) Titre “Tous les utilisateurs du site” */
#tlu-title {
font-size: 0.9em; /* diminue la taille */
}
/* 2) Conteneur blanc */
.conteneur-fond-blanc-tous-users {
display: inline-block;
width: 35%; /* passe de inline-block auto à 80% */
padding: 1em; /* ajoute de l’air autour */
}
/* 3) Texte de la liste (boutons utilisateurs) */
.bouton_tous_les_utilisateurs {
font-size: 0.9em; /* rapetisse le texte */
}
/* Si tu veux réduire aussi le container interne */
.conteneur_liste_tous_les_utilisateurs {
font-size: 0.9em; /* rapetisse tout le texte par défaut */
}
/*SHARE.HTML"*/
/* 1) Réduire le conteneur blanc global et le centrer */
.conteneur_global_share {
width: 100%; /* passe de 80–100% à 60% */
padding: 1em; /* un peu de padding interne */
}
/* 2) Rapetisser les textes */
.titre_video_share,
.groupe_video_share,
.pseudo_video_share {
font-size: 0.8em; /* 80% de la taille d’origine */
}
/* 3) Rapetisser le lecteur vidéo */
.player_video_share {
width: 100%; /* 80% de la largeur du conteneur réduit */
}
/* MAINTENANCE.HTML"*/
/* 1) Descendre le conteneur pour mettre le GIF plus bas */
.maintenance-content {
margin-top: 7em; /* pousse tout le bloc vers le bas */
display: flex; /* pour centrer horizontalement */
justify-content: center;
}
/* 2) Agrandir le GIF */
.gif_maintenance {
width: 35%; /* agrandit à 60% de la largeur de l’écran (ajuste si besoin) */
height: auto;
}
/* ERREUR.HTML"*/
/* 1) Réduit la largeur et le padding du conteneur blanc */
.conteneur-fond-blanc-erreur {
width: 30%; /* ou la valeur en % que tu préfères */
}
/* 2) Réduit la taille du titre d’erreur */
#erreur-title,
.conteneur-fond-blanc-erreur h1 {
font-size: 1em; /* ajuste comme tu veux (au lieu de 2em par défaut) */
}
/* LIMITE ATTEINTE.HTML"*/
#limite-title {
font-size: 1em;
}
/* PROGRESSION.HTML"*/
.prog-clip-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
gap: 0;
}
.texte_envoie_mail {
min-width: 20em;
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.7em;
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: 12.5em;
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.7em;
}
.clip-status, .clip-estimee {
margin-left: 0.2em;
}
#prog-total-clips {
margin-bottom: 2em !important;
}
.progressbar_baby {
width: 100%;
max-width: 21em;
height: 0.9em;
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.7em;
position: relative;
user-select: none;
}
.bouton_voir_clip {
text-align: center; /* Centrer le texte */
font-family: "Gill Sans", sans-serif;
font-size: 0.6em;
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 680 et 556++++++++ */
/* --- Catégorie 3 : écrans en landscape de largeur inférieure ou égale à 800px --- */
@media screen and (max-width: 680px) and (min-width: 556px) {
main {
padding: 0; /* on annule le padding sur mobile */
}
html,body{
overflow-x:hidden; /* au cas où un élément dépasserait encore */
}
/* CONTENU PARAGRAPHE */
.contenu_paragraphe {
font-size: 0.6em;
line-height: 0.7;
color: #1E2A38;
}
/* BASE.HTML*/
header {
width: 100%;
max-width: 100%;
left: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
background-size: cover;
background-position: top left;
background-repeat: no-repeat;
}
.h1-commun {
font-size: 1em;
}
.logo {
width: 6em; /* passe de 13em à 10em */
height: 6em; /* idem */
margin-left: 0em; /* réduit l’écart à gauche */
}
/* boutons centraux */
.header-middle {
position: relative;
right: 1em; /* décale l’élément vers la droite de 2em */
flex-direction: column; /* colonne au lieu de row */
align-items: center; /* centre horizontalement */
gap: 1em; /* espacement vertical entre boutons */
}
.header-middle button {
font-size: 0.5em !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: 5em;
}
/*Texte “connecté avec” */
#cc {
font-size: 0.6em; /* 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: -3em; /* rapproche vers le centre */
width: 1.3em; /* largeur désirée */
height: auto; /* pour garder les proportions */
}
#lang-fr,
#lang-en {
top: 3em; /* idem */
transform: translateX(-3em); /* même rendu mais sans élargir la page */
width: 1.3em; /* largeur désirée */
height: auto; /* pour garder les proportions */
}
/*Icône “mon compte” */
.compte-menu {
top: 3em; /* remonte légèrement */
right: 3.5em; /* rapproche vers le centre */
}
/*image de l'Icône “mon compte” */
.compte-trigger > img {
width: 1.3em; /* ajustez à la taille que vous souhaitez */
height: auto;
}
.compte-dropdown button {
font-size: 0.5em; /* 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: -2em;
}
.se_connecter_base,
.inscription_base {
font-size: 0.6em;
margin-bottom: -3em!important;
}
/* FOOTER */
footer {
background: linear-gradient(to top,
rgba(0,0,0,0.3) 0%,
rgba(0,0,0,0) 100%);
}
/* cache une image */
.footer-right-image {
display: none !important;
}
/*centre la pub restante */
.footer-left-image {
display: none !important;
left: 50% !important;
transform: translateX(-50%) !important;
height: 2.8em;
}
/*remonter le texte “Vidéos fournies par…” */
.footer-center p {
position: relative;
top: 0.3em; /* ajuste cette valeur jusqu’à la position voulue */
right: 0em;
}
/* Bouton « Donate »*/
.button_donate{
position: relative;
top: 0.3em;
right: 0em;
height: 0.9em; /* demandé */
width: auto;
}
/*texte video fourni par pexel */
.texte_video_fourni_par {
color: #F5F5F7;
font-style: italic;
font-size: 0.6em;
}
.texte_pexel,
.texte_pexel:link,
.texte_pexel:visited {
color: #F5F5F7 !important; /* remplace #FF0000 par ta couleur */
font-size: 0.6em;
}
/* INDEX.HTML */
/* logo qui actualise */
.actualiser-index {
position: relative;
top: 4em; /* remonte de 2em au lieu de redéfinir la marge */
margin: 0 auto;
}
.intro-index-gif {
position: absolute;
top: 50%;
left: 50%;
width: 70%;
transform: translate(-50%, -50%);
}
/* CONNEXION.HTML"*/
/* Nouveau conteneur pour le contenu de connexion avec fond blanc */
.login-container {
width: 40%!important; /* Même largeur que .connexion-content */
margin: 0 auto !important; /* <— centrage horizontal */
}
/* titre */
.connexion-content h1 {
font-size: 0.7em!important; /* réduit la taille du titre */
}
/* labels, paragraphes */
.connexion-content label,
.connexion-content p,
#lost-msg,
#errorMessage {
font-size: 0.6em!important; /* texte un peu plus petit */
}
/* champs de saisie */
.connexion-content input[type="email"],
.connexion-content input[type="password"] {
font-size: 0.6em!important; /* 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.6em!important; /* ou 0.9em selon ton goût */
}
/* boutons */
.connexion-buttons .button_connexion_on_connexion_page,
.bouton_mdp_perdu,
.bouton_envoi_mail {
font-size: 0.6em; /* 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.6em;
padding: 0.4em 0.8em;
}
.button_connexion_on_connexion_page {
margin-top: 2em;
margin-bottom: 0em;
}
/* INSCRIPTION.HTML"*/
.conteneur_fond_blanc {
width: 40%!important;
margin: 0 auto; /* centre horizontalement */
}
/* PUB */
.fixed-ad {
display: none;
width: 28%!important;
height: auto;
}
#inscriptionTitle {
font-size: 0.7em!important; /* 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.6em!important;
}
/* réduire le texte des paragraphes d’erreur / d’info */
.inscription-content p {
font-size: 0.6em;
}
/* réduire les champs input */
.inscription-content input {
font-size: 0.6em;
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!important;
padding: 0.5em 1em; /* ajustez si besoin */
}
#sendCodeButton {
font-size: 0.6em!important; /* taille du texte */
padding: 0.4em 0.8em; /* réduit le padding */
}
/* 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 */
}
/* pubs*/
.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: 25%; /* ou tout autre % que vous désirez */
height: auto; /* conserve le ratio de l’image */
}
.h1-commun-avec-fond {
font-size: 0.7em!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.6em; /* 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.6em;
}
/* 4) Les inputs textuels */
.input_keyword,
#input_nom_groupe,
#input_lien_musique {
font-size: 0.6em;
}
.input_nom_clip {
font-size: 0.6em;
margin-bottom: -1em;
}
.input_choix_fichier {
font-size: 0.6em; /* police plus petite */
}
/* 5) Les boutons */
.button_ok_choix_clip,
#cc-download-btn {
font-size: 0.6em!important;
padding: 0.5em 1em;
}
/* WAIT_AUDIO.HTML */
.fixed-ad-tous-les-wait {
display: none;
position: fixed;
top: 40%;
transform: translateY(-50%);
z-index: 1000;
width: 25%; /* ou tout autre % que vous désirez */
height: auto; /* conserve le ratio de l’image */
}
.pub-image-container img,
#pubVideo {
max-width: 15em;
height: auto; /* conserve le ratio */
display: block;
margin: 0 auto; /* le centre horizontalement */
position: relative;
left: 0em; /* décale l’élément vers la droite de 2em */
top: -5em;
}
/* LECTEUR.HTML */
/* PUB */
.ad-lecteur {
display: none;
position: fixed;
top: 40%;
width: 25%; /* ou tout autre % que vous désirez */
height: auto; /* conserve le ratio de l’image */
z-index: 1500; /* Ajustez le z-index si nécessaire */
}
/* conteneur fond blanc*/
.conteneur_fond_blanc_lecteur {
width: 45%; /* passez à 90% du viewport */
padding: 1.5em; /* 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.7em; /* adapte selon ton besoin */
}
/* bouton modifier le clip*/
.button_modif_final_clip {
padding: 0.3em 0.3em; /* au lieu de 1em 2em par défaut */
font-size: 0.6em; /* par exemple 90% de la taille normale */
}
/* bouton share et download*/
.button_download_final_clip,
.bouton_share_sur_lecteur {
width: 0.7em; /* ou en % : ex. width: 8%; */
height: auto;
}
.popup_share_inner {
/* On annule le min-width fixe */
min-width: auto;
max-width: 50%;
padding: 0.5em;
}
.popup_share_inner .input_share_url {
/* Hauteur réduite à 1 em */
height: 1em;
/* Largeur à 80 % du conteneur */
width: 80%;
/* Police plus petite */
font-size: 0.6em;
/* Ajuster le padding vertical pour centrer le texte */
padding: 0.5em 0.6em;
/* Facultatif : réduire la bordure pour que ça reste harmonieux */
border-width: 0.15em;
margin-top: 1em;
margin-bottom: 1em;
}
/* Popup share : bouton « Copier » */
.popup_share_inner .bouton_copie_url {
/* Police plus petite */
font-size: 0.6em;
/* Padding ajusté pour garder un bon confort d’usage */
padding: 0.3em 0.8em;
}
.popup_share .close_share_popup {
position: absolute;
top: 0em; /* distance depuis le haut de l’écran */
right: 0.3em; /* distance depuis le bord droit de l’écran */
font-size: 0.7em;
cursor: pointer;
z-index: 1001; /* au-dessus de l’overlay semi-transparent */
}
/* on réduit la popup à 50% de la largeur de l’écran */
.ad-popup-inner {
width: 50vw; /* ou 50% selon votre goût */
max-width: none; /* désactive la limite à 40em */
}
/* l’image occupe tout l’intérieur de la popup */
.ad-image {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
/* pour que les overlays absolus soient positionnés par rapport à l’image */
.ad-image-container {
position: relative;
}
/* repositionne le compte à rebours dans le coin sup-droite de la pub */
.countdown-overlay {
position: absolute;
top: 0.5em; /* ajustez l’espacement si besoin */
right: 0.5em;
font-size: 0.6em; /* passe de 1.25em à 1em */
}
/* idem pour la croix de fermeture */
.close-popup-button {
font-size: 0.6em; /* passe de 1.25em à 1em */
position: absolute;
top: 0.1em;
right: 0.1em;
display: block; /* pour qu’elle soit visible dès l’ouverture */
}
/* Popup “soutien” : on rapetisse le bouton PayPal */
#adPopup .bouton_soutenir_telechargement {
width: 20%; /* par exemple 40% de la largeur de la popup */
max-width: 10em; /* limite la taille absolue */
height: auto;
}
/* MODIFICATIONS.HTML*/
/* 1) On rapetisse le « cadre » blanc */
.conteneur_tout_modif {
width: 40%; /* 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: 0.7em; /* ou la valeur que tu préfères */
}
/* rapetisser le compteur “vidéo n°…” */
.texte_numero_video {
font-size: 0.6em; /* ajuste la valeur selon ton goût */
}
/* bouton precedent et suivant*/
.conteneur_boutons_defile .bouton-precedent,
.conteneur_boutons_defile .bouton-suivant {
font-size: 0.6em;
}
/* 2) On rapetisse le lecteur vidéo */
#videoPlayer,
.lecteur-modif {
width: 100%; /* prend 100% de son parent (qui fait maintenant 80% de l’écran) */
max-width: 40em; /* ou toute autre valeur en px pour limiter la largeur max */
height: auto; /* conserve les proportions */
}
/*2) boutons par... */
.bouton-remplacer,
.bouton-remplacer-perso {
font-size: 0.5em; /* 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 {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #F5F5F7;
border: 0.125em solid #1E2A38;
border-radius: 0.625em;
padding: 1.5em;
max-width: 40%;
width: 90%;
z-index: 1500;
}
/* POPUP "une videos pexel"*/
.fenetre-preview {
display: none;
position: fixed;
top: 50%;
left: 49%;
transform: translate(-50%, -50%);
background: #F5F5F7;
border: 0.0625em solid #ccc;
padding: 1.25em;
margin: 1em;
z-index: 1000;
width: auto;
max-width: 40%;
box-shadow: 0 0.25em 0.5em rgba(0,0,0,0.2);
}
/* — 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.6em;
}
/* — 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.6em;
}
/* — réduire les champs de saisie — */
.input_modif_nom_clip,
.input_modif_nom_groupe {
font-size: 0.6em;
}
/* rapetisser les libellés “couleurs” et “noir et blanc” */
.text-modif-couleurs,
.text-modif-NB {
font-size: 0.6em;
}
/* — agrandir le bouton « J'ai fini de modifier » — */
.bouton-fini {
font-size: 0.6em;
}
/* PROFIL.HTML"*/
/* PUB */
.fixed-ad-profil {
display: none;
position: fixed;
top: 50%;
transform: translateY(-50%);
z-index: 1000;
width: 25%;
height: auto;
}
/* ——— CONTENEUR ET TITRES ——— */
.conteneur-page-perso {
max-width: 60%;
padding: 1em;
}
/* H1 “Tu es sur ta page personnelle” */
.h1-commun#pr-main-title {
font-size: 0.7em;
margin-top: 1em;
margin-bottom: 0.5em;
position: relative;
left: -0em; /* décale l’élément vers la droite de 2em */
}
/* Texte d’accueil (pseudo) */
.texte-nom-user {
font-size: 0.6em;
margin: 0.3em 0;
}
/* Lien “Modifier mon mot de passe” */
.texte_modif_mdp {
font-size: 0.6em;
margin: 0.5em 0;
margin-top: 1.5em;
}
.texte_suivre_prog {
font-size: 0.6em;
margin-top: 0.5em;
}
/* ——— FORMULAIRE MDP ——— */
#pwd-change-container .input_change_mdp {
width: 50%;
height: 1em;
font-size: 0.6em;
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 {
border: 1px solid #1E2A38; /* Bordure avec une couleur contrastée */
font-size: 0.6em;
margin-top: 2em;
margin-bottom: 0.5em;
padding: 0.5em 0.5em;
}
/* ——— 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.6em;
padding: 0.2em 0.4em;
position: relative;
right: 3em; /* décale l’élément vers la droite de 2em */
}
.cc-clip-delete {
font-size: 0.6em!important;
}
/* ——— FAVORIS ——— */
.conteneur_video_favori {
margin-bottom: 1em;
}
.favoris-icon,
.favoris-icon-profil-perso {
width: 0.6em; /* 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.6em;
}
.text-favoris-profil-perso {
font-size: 0.6em;
}
.pas_de_favoris {
font-size: 0.6em;
margin-bottom: 4em;
}
/* PROFIL_VISIT.HTML"*/
.nom-groupe-profil-visit {
font-size: 0.7em;
color: #1E2A38;
text-align: left;
margin-left: 0.5em;
}
/* WTV.HTML"*/
.h1-commun {
font-size: 0.7em; /* au lieu de 2rem par exemple */
}
/* bouton a trier"*/
#wtv-dropdownButton {
font-size: 0.6em; /* 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: 45%;
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 {
font-size: 0.6em; /* réduis légèrement la police */
}
.conteneur_video_wtv .texte_lien_musique {
font-size: 0.5em; /* réduis légèrement la police */
}
.conteneur_video_wtv .favoris-likes-row {
font-size: 0.9em; /* réduis légèrement la police */
}
.conteneur_video_wtv .wtv-likes-block {
font-size: 0.6em; /* 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: 2em;
right: 7.8em;
z-index: 2000;
}
/* Titre et texte à l’intérieur */
#popupShareWtv h2,
#popupShareWtv .texte_popup_signalement_envoye,
#popupShareWtv .message_url_copie_wtv {
font-size: 0.6em; /* taille réduite pour mobile */
}
/* Input URL de partage */
#wtv-share-url-input {
font-size: 0.6em; /* même taille de texte */
padding: 0.4em; /* adaptation du padding */
width: 100%; /* plein conteneur */
box-sizing: border-box;
}
/* Bouton “Copier” */
#wtv-share-copy-btn {
font-size: 0.6em; /* police réduite */
padding: 0.4em 0.8em; /* padding adapté */
margin-top: 0.5em; /* un peu d’espace au-dessus */
}
/* —— 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.6em; /* 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.6em;
padding: 0.35em;
width: 70%;
}
.bouton_envoyer_signalement {
font-size: 0.6em;
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.6em; /* 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: 25%; /* 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: 45% !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.6em; /* ta taille responsive */
}
/* 5) Le pseudo sous le player */
.pseudo_video_share {
width: 100%;
font-size: 0.6em;
margin: 0.5em 0 0; /* petit espace au-dessus seulement */
}
/* PROFIL-VISIT.HTML */
/* PUB */
.fixed-ad-profil-visit {
display: none;
width: 25%;
height: auto;
}
/* 1) Titre principal */
#pv-title {
font-size: 0.7em; /* 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: 45%; /* 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.6em; /* plus petit */
}
/* 6) Icône cœur */
.favoris-icon {
width: 1em; /* réduit la taille */
height: auto;
margin-right: 0.3em;
}
/* TOUS LES UTILISATEURS*/
/*titre */
#tlu-title {
font-size: 0.7em; /* 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.6em; /* rapetisse le texte */
display: block; /* force un retour à la ligne */
width: auto;
max-width: 100%;
}
/* 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.6em; /* plutôt que 2em ou valeur par défaut */
line-height: 1; /* serre un peu les lignes */
margin: 0; /* pour éviter un top/bottom trop grand */
}
/* LIMITE ATTEINTE.HTML"*/
#limite-title {
font-size: 0.6em;
}
/* MAINTENANCE.HTML"*/
/* 1) Descendre le conteneur pour mettre le GIF plus bas */
.maintenance-content {
margin-top: 8em; /* pousse tout le bloc vers le bas */
display: flex; /* pour centrer horizontalement */
justify-content: center;
}
/* 2) Agrandir le GIF */
.gif_maintenance {
width: 40%; /* agrandit à 60% de la largeur de l’écran (ajuste si besoin) */
height: auto;
}
/* CONTACT */
/* 1) Conteneur principal blanc */
.conteneur-fond-blanc-contact {
width: 45%; /* 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.7em; /* rapetissé */
line-height: 1; /* plus serré */
margin: 0 0 0.5em; /* retouche des marges */
}
/* 3) Paragraphes */
.conteneur-fond-blanc-contact p {
font-size: 0.6em; /* 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: 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: 0.6em;
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: 20em;
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: 1em;
}
.clip-status, .clip-estimee {
margin-left: 0.2em;
}
#prog-total-clips {
margin-bottom: 2em !important;
}
.progressbar_baby {
width: 100%;
max-width: 21em;
height: 0.9em;
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.7em;
position: relative;
user-select: none;
}
.bouton_voir_clip {
text-align: center; /* Centrer le texte */
font-family: "Gill Sans", sans-serif;
font-size: 1.5em;
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 555 et 450++++++++ */
/* --- Catégorie 3 : écrans en landscape de largeur inférieure ou égale à 800px --- */
@media screen and (max-width: 555px) and (min-width: 450px) {
main {
padding: 0; /* on annule le padding sur mobile */
}
html,body{
overflow-x:hidden; /* au cas où un élément dépasserait encore */
}
/* BASE.HTML*/
header {
width: 100%;
max-width: 100%;
left: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
background-size: cover;
background-position: top left;
background-repeat: no-repeat;
}
.h1-commun {
font-size: 0.6em;
}
.logo {
width: 4.5em; /* passe de 13em à 10em */
height: 4.5em; /* idem */
margin-left: 0em; /* réduit l’écart à gauche */
}
/* boutons centraux */
.header-middle {
position: relative;
right: 1em; /* décale l’élément vers la droite de 2em */
flex-direction: column; /* colonne au lieu de row */
align-items: center; /* centre horizontalement */
gap: 0.3em; /* espacement vertical entre boutons */
}
.header-middle button {
font-size: 0.4em !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: 10em;
}
/*Texte “connecté avec” */
#cc {
font-size: 0.5em; /* passe de 0.9em à 0.8em */
margin: 0.3em 0.5em;/* moins d’espacement */
}
/*Drapeaux & icône mail */
#contact-icon {
top: 2.5em;
left: -5em; /* rapproche vers le centre */
width: 0.9em; /* largeur désirée */
height: auto; /* pour garder les proportions */
}
#lang-fr,
#lang-en {
top: 2.5em;
left: -2em; /* rapproche vers le centre */
transform: translateX(-3em); /* même rendu mais sans élargir la page */
width: 0.9em; /* largeur désirée */
height: auto; /* pour garder les proportions */
}
/*Icône “mon compte” */
.compte-menu {
top: 2.5em;
left: -5.5em; /* rapproche vers le centre */
}
/*image de l'Icône “mon compte” */
.compte-trigger > img {
width: 1em; /* ajustez à la taille que vous souhaitez */
height: auto;
}
.compte-dropdown button {
font-size: 0.4em; /* Ajuste la taille du texte */
}
/* MENU DROITE si non connecté */
/* taille positionnement inscritpion et connexion */
.header-right-buttons {
top: -0.5em;
left: -2.5em; /* rapproche vers le centre */
}
.se_connecter_base,
.inscription_base {
font-size: 0.4em;
}
/* FOOTER */
footer {
background: linear-gradient(to top,
rgba(0,0,0,0.3) 0%,
rgba(0,0,0,0) 100%);
}
/* cache une image */
.footer-right-image {
display: none !important;
}
/*centre la pub restante */
.footer-left-image {
display: none !important;
left: 50% !important;
transform: translateX(-50%) !important;
height: 2.8em;
}
/*remonter le texte “Vidéos fournies par…” */
.footer-center p {
position: relative;
top: 0.8em; /* ajuste cette valeur jusqu’à la position voulue */
right: 0em;
}
/* Bouton « Donate »*/
.button_donate{
position: relative;
top: 1em;
right: 0em;
height: 0.6em; /* demandé */
width: auto;
}
/*texte video fourni par pexel */
.texte_video_fourni_par {
color: #F5F5F7;
font-style: italic;
font-size: 0.5em;
}
.texte_pexel,
.texte_pexel:link,
.texte_pexel:visited {
color: #F5F5F7 !important; /* remplace #FF0000 par ta couleur */
font-size: 0.5em;
}
/* INDEX.HTML */
/* logo qui actualise */
.actualiser-index {
position: relative;
top: 3em; /* remonte de 2em au lieu de redéfinir la marge */
margin: 0 auto;
}
.intro-index-gif {
position: absolute;
top: 50%;
left: 50%;
width: 80%;
transform: translate(-50%, -50%);
}
/* CONNEXION.HTML"*/
/* Nouveau conteneur pour le contenu de connexion avec fond blanc */
.login-container {
width: 60%!important; /* Même largeur que .connexion-content */
margin: 0 auto !important; /* <— centrage horizontal */
padding: 0.2em 0.2em;
}
/* titre */
.connexion-content h1 {
font-size: 0.6em!important; /* réduit la taille du titre */
}
/* labels, paragraphes */
.connexion-content label,
.connexion-content p,
#lost-msg,
#errorMessage {
font-size: 0.5em!important; /* texte un peu plus petit */
}
/* champs de saisie */
.connexion-content input[type="email"],
.connexion-content input[type="password"] {
font-size: 0.5em!important; /* 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.5em!important; /* ou 0.9em selon ton goût */
}
/* boutons */
.connexion-buttons .button_connexion_on_connexion_page,
.bouton_mdp_perdu,
.bouton_envoi_mail {
font-size: 0.5em; /* réduit le texte des boutons */
padding: 0.3em 0.5em; /* moins de padding */
}
/* le formulaire « mot de passe perdu » */
#lost-form input,
#lost-form button {
font-size: 0.5em;
padding: 0.3em 0.4em;
}
.button_connexion_on_connexion_page {
margin-top: 1em;
margin-bottom: 0em;
}
/* INSCRIPTION.HTML"*/
.conteneur_fond_blanc {
width: 50%!important;
margin: 0 auto; /* centre horizontalement */
padding: 1em 1em;
}
/* PUB */
.fixed-ad {
display: none;
width: 28%!important;
height: auto;
}
#inscriptionTitle {
font-size: 0.6em!important; /* 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.5em!important;
}
/* réduire le texte des paragraphes d’erreur / d’info */
.inscription-content p {
font-size: 0.5em;
}
/* réduire les champs input */
.inscription-content input {
font-size: 0.5em;
padding: 0.3em; /* optionnel : réduire aussi leur padding */
}
/* réduire les boutons “envoyer le code” et “s’inscrire” */
.inscription-content button {
font-size: 0.6em!important;
padding: 0.3em 0.3em; /* ajustez si besoin */
}
#sendCodeButton {
font-size: 0.5em!important; /* taille du texte */
padding: 0.5em 0.5em; /* réduit le padding */
}
/* 1️⃣ On resserre l’espacement automatique du flex-column */
.inscription-content form{
gap:0.55rem; /* 0.5rem → 0.35rem : ajuste selon ton goût */
}
/* 2️⃣ Les
provoquent une ligne vide : on les neutralise
uniquement dans ce formulaire pour ne pas casser le reste du site */
.inscription-content form > br{
display:none;
}
/* 3️⃣ Messages sous l’email et sous le bouton code ➜ marges mini */
#mailBannedError,
#verificationSuccessMsg{
margin:0.25em 0; /* haut & bas à 0.25 em */
}
/* 4️⃣ Bouton « Recevoir un code » ➜ marges cohérentes et positives */
.bouton_envoyer_code_validation{
margin:0.5em 0; /* au lieu de 1rem et -1em */
}
/* 5️⃣ (option) On réduit un peu l’écart avant le bouton “S’inscrire” */
.button_inscrire_on_inscrire_page{
margin-top:1.2em; /* 2em → 1.2em */
}
/* CHOIX.HTML */
.conteneur-fond-blanc {
width: 50%; /* 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 */
}
/* pubs*/
.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: 25%; /* ou tout autre % que vous désirez */
height: auto; /* conserve le ratio de l’image */
}
.h1-commun-avec-fond {
font-size: 0.6em!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.6em; /* 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.5em;
}
/* 4) Les inputs textuels */
.input_keyword,
#input_nom_groupe,
#input_lien_musique {
font-size: 0.5em;
}
.input_nom_clip {
font-size: 0.5em;
margin-bottom: -1em;
height: 0.5em;
width: 10em;
}
/* == Redimensionnement des champs "Mots-clés" == */
.input_keyword {
height: 0.6em; /* hauteur fixe à 40px */
width: 10em;
}
/* 1) Réduire globalement la police de l’input file */
.input_choix_fichier {
font-size: 0.5em !important; /* ajuste la taille du texte */
line-height: 1.2; /* pour que l’input ne soit pas trop grand */
height: auto; /* laisser le navigateur ajuster la hauteur */
width: 20em; /* ou la largeur que vous souhaitez */
padding: 0.2em; /* espace interne réduit */
box-sizing: border-box;
}
/* 2) Cibler le bouton interne sous WebKit/Chromium */
.input_choix_fichier::-webkit-file-upload-button {
font-size: 0.5rem; /* même taille que l’input */
padding: 0.2em 0.4em; /* ajuster le remplissage si besoin */
margin: 0; /* supprime tout margin par défaut */
line-height: 1; /* s’assurer que le bouton ne grossit pas */
}
/* 3) Cibler le bouton interne sous Firefox */
.input_choix_fichier::-moz-file-upload-button {
font-size: 0.5rem;
padding: 0.2em 0.4em;
line-height: 1;
}
/* 4) Cibler l’intitulé « Aucun fichier choisi » (chez certains navigateurs, c’est le même input) */
.input_choix_fichier {
font-size: 0.5rem; /* diminue aussi le texte du label à droite */
}
/* Optionnel : forcer la hauteur minimale si l’input devient trop petit */
.input_choix_fichier {
min-height: 1.5em;
}
/* 5) Les boutons */
.button_ok_choix_clip,
#cc-download-btn {
font-size: 0.5em!important;
padding: 0.4em 0.5em;
}
/* Pour la checkbox "J'ai créé cette musique" */
input.checkbox_musique_originale {
width: 0.8em; /* Ajustez cette valeur pour changer la largeur de la checkbox */
height: 0.8em; /* Ajustez cette valeur pour changer la hauteur de la checkbox */
}
/* Pour les checkboxes des thèmes */
.checkbox_themes input[type="radio"] {
width: 0.8em!important; /* Ajustez cette valeur pour changer la largeur de la checkbox */
height: 0.8em!important; /* Ajustez cette valeur pour changer la hauteur de la checkbox */
}
/* Pour les checkboxes des filtres */
.checkbox_effets input[type="checkbox"] {
width: 0.8em; /* Ajustez cette valeur pour changer la largeur de la checkbox */
height: 0.8em; /* Ajustez cette valeur pour changer la hauteur de la checkbox */
}
/* WAIT_AUDIO.HTML */
.fixed-ad-tous-les-wait {
display: none;
position: fixed;
top: 60%;
transform: translateY(-50%);
z-index: 1000;
width: 25%; /* ou tout autre % que vous désirez */
height: auto; /* conserve le ratio de l’image */
}
.pub-image-container img,
#pubVideo {
max-width: 11em;
height: auto; /* conserve le ratio */
display: block;
margin: 0 auto; /* le centre horizontalement */
position: relative;
left: 0em; /* décale l’élément vers la droite de 2em */
top: -2em;
}
/* LECTEUR.HTML */
/* PUB */
.ad-lecteur {
display: none;
position: fixed;
top: 40%;
width: 25%; /* ou tout autre % que vous désirez */
height: auto; /* conserve le ratio de l’image */
z-index: 1500; /* Ajustez le z-index si nécessaire */
}
/* conteneur fond blanc*/
.conteneur_fond_blanc_lecteur {
width: 45%; /* passez à 90% du viewport */
padding: 1.5em; /* 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.7em; /* adapte selon ton besoin */
}
/* bouton modifier le clip*/
.button_modif_final_clip {
padding: 0.5em 1em; /* au lieu de 1em 2em par défaut */
font-size: 0.5em!important; /* par exemple 90% de la taille normale */
}
/* bouton share et download*/
.button_download_final_clip,
.bouton_share_sur_lecteur {
width: 0.6em; /* ou en % : ex. width: 8%; */
height: auto;
}
.popup_share_inner {
/* On annule le min-width fixe */
min-width: auto;
max-width: 50%;
padding: 0.5em;
}
.popup_share_inner .input_share_url {
/* Hauteur réduite à 1 em */
height: 1em;
/* Largeur à 80 % du conteneur */
width: 80%;
/* Police plus petite */
font-size: 0.6em;
/* Ajuster le padding vertical pour centrer le texte */
padding: 0.2em 0.2em;
/* Facultatif : réduire la bordure pour que ça reste harmonieux */
border-width: 0.15em;
margin-top: 1em;
margin-bottom: 1em;
}
.popup_share .close_share_popup {
position: absolute;
top: 0em; /* distance depuis le haut de l’écran */
right: 0.3em; /* distance depuis le bord droit de l’écran */
font-size: 0.6em;
cursor: pointer;
z-index: 1001; /* au-dessus de l’overlay semi-transparent */
}
/* on réduit la popup à 50% de la largeur de l’écran */
.ad-popup-inner {
width: 40vw; /* ou 50% selon votre goût */
max-width: none; /* désactive la limite à 40em */
}
/* l’image occupe tout l’intérieur de la popup */
.ad-image {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
/* pour que les overlays absolus soient positionnés par rapport à l’image */
.ad-image-container {
position: relative;
}
/* repositionne le compte à rebours dans le coin sup-droite de la pub */
.countdown-overlay {
position: absolute;
top: 0.5em; /* ajustez l’espacement si besoin */
right: 0.5em;
font-size: 0.4em; /* passe de 1.25em à 1em */
}
/* idem pour la croix de fermeture */
.close-popup-button {
font-size: 0.4em; /* passe de 1.25em à 1em */
position: absolute;
top: 0.1em;
right: 0.1em;
display: block; /* pour qu’elle soit visible dès l’ouverture */
}
#copyShareUrlBtn {
font-size: 0.5em; /* Ajustez cette valeur selon vos besoins */
}
#donateButton {
width: 25%; /* Ajustez cette valeur selon vos besoins */
height: auto; /* Conserve le ratio de l'image */
position: relative; /* ou absolute selon votre mise en page */
top: -1.5em; /* Déplace le bouton de 1em vers le bas par rapport à sa position normale */
}
/* MODIFICATIONS.HTML*/
/* 1) On rapetisse le « cadre » blanc */
.conteneur_tout_modif {
width: 40%; /* 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: 0.6em; /* ou la valeur que tu préfères */
}
/* rapetisser le compteur “vidéo n°…” */
.texte_numero_video {
font-size: 0.5em; /* ajuste la valeur selon ton goût */
}
.timeline_seule .curseur {
position: relative; /* Assurez-vous que le positionnement est relatif ou absolu */
top: -0.2em; /* Déplace le curseur de 0.2em vers le bas */
width: 0.5em; /* Ajustez cette valeur pour changer la largeur du curseur */
height: 0.5em; /* Ajustez cette valeur pour changer la hauteur du curseur */
}
/* bouton precedent et suivant*/
.conteneur_boutons_defile .bouton-precedent,
.conteneur_boutons_defile .bouton-suivant {
font-size: 0.5em;
}
/* 2) On rapetisse le lecteur vidéo */
#videoPlayer,
.lecteur-modif {
width: 100%; /* prend 100% de son parent (qui fait maintenant 80% de l’écran) */
max-width: 40em; /* ou toute autre valeur en px pour limiter la largeur max */
height: auto; /* conserve les proportions */
}
/*2) boutons par... */
.bouton-remplacer,
.bouton-remplacer-perso {
font-size: 0.5em; /* réduire la taille du texte */
padding: 0.2em 0.4em; /* réduire l’espacement intérieur */
}
/*POPUP "une de tes videos"*/
.fenetre-preview-video-perso {
font-size: 0.5em;
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #F5F5F7;
border: 0.125em solid #1E2A38;
border-radius: 0.625em;
padding: 1.5em;
max-width: 40%;
width: 80%;
z-index: 1500;
}
/* POPUP "une videos pexel"*/
.fenetre-preview {
display: none;
position: fixed;
top: 50%;
left: 49%;
transform: translate(-50%, -50%);
background: #F5F5F7;
border: 0.0625em solid #ccc;
padding: 1.25em;
margin: 1em;
z-index: 1000;
width: auto;
max-width: 40%;
box-shadow: 0 0.25em 0.5em rgba(0,0,0,0.2);
}
input[type="file"] {
font-size: 0.6em;
margin-bottom: 0.5em;
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
font-size: 0.5em;
padding: 0.15em 0.3em;
}
/* — 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.5em;
}
/* — 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.5em;
}
/* — réduire les champs de saisie — */
.input_modif_nom_clip,
.input_modif_nom_groupe {
font-size: 0.5em;
}
/* rapetisser les libellés “couleurs” et “noir et blanc” */
.text-modif-couleurs,
.text-modif-NB {
font-size: 0.5em;
}
.check-box-modif-couleurs,
.check-box-modif-NB {
width: 0.7em; /* Ajustez cette valeur pour changer la largeur de la checkbox */
height: 0.7em; /* Ajustez cette valeur pour changer la hauteur de la checkbox */
margin: 0.3em 0.5em 0.3em 0; /* Ajustez les marges si nécessaire */
}
/* — agrandir le bouton « J'ai fini de modifier » — */
.bouton-fini {
font-size: 0.5em;
}
/* PROFIL.HTML"*/
/* PUB */
.fixed-ad-profil {
display: none;
position: fixed;
top: 60%;
transform: translateY(-50%);
z-index: 1000;
width: 25%;
height: auto;
}
/* ——— CONTENEUR ET TITRES ——— */
.conteneur-page-perso {
max-width: 60%;
padding: 1em;
}
/* H1 “Tu es sur ta page personnelle” */
.h1-commun#pr-main-title {
font-size: 0.7em;
margin-top: 1em;
margin-bottom: 0.5em;
position: relative;
left: -0em; /* décale l’élément vers la droite de 2em */
}
/* Texte d’accueil (pseudo) */
.texte-nom-user {
font-size: 0.5em;
margin: 0.3em 0;
}
/* Lien “Modifier mon mot de passe” */
.texte_modif_mdp {
font-size: 0.5em;
margin: 0.5em 0;
margin-top: 1em;
}
.texte_suivre_prog {
font-size: 0.5em;
margin-top: 0.5em;
}
/* Réduction de la taille et des marges pour "Aucun clip généré" */
#pr-no-clip {
font-size: 0.6em; /* taille de texte réduite */
}
/* ——— FORMULAIRE MDP ——— */
#pwd-change-container .input_change_mdp {
width: 50%;
height: 1em;
font-size: 0.5em;
margin: 0.4em auto;
}
#pwd-change-container #btn-change-pwd {
font-size: 0.5em;
padding: 0.4em 0.6em;
width: 30%;
}
/* ——— TITRES SECONDAIRES H2 ——— */
.H2-profil-perso {
border: 1px solid #1E2A38; /* Bordure avec une couleur contrastée */
padding: 0.5em 0.5em;
font-size: 0.6em;
}
/* ——— 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.5em;
padding: 0.2em 0.4em;
position: relative;
right: 3em; /* décale l’élément vers la droite de 2em */
}
.cc-clip-delete {
font-size: 0.5em!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.5em;
}
.text-favoris-profil-perso {
font-size: 0.5em;
}
.pas_de_favoris {
font-size: 0.5em;
margin-bottom: 4em;
}
/* PROFIL_VISIT.HTML"*/
.nom-groupe-profil-visit {
font-size: 0.6em;
color: #1E2A38;
text-align: left;
margin-left: 0.5em;
}
/* WTV.HTML"*/
.h1-commun {
font-size: 0.6em; /* au lieu de 2rem par exemple */
}
/* bouton a trier"*/
.button#wtv-dropdownButton {
font-size: 0.5em;
}
.paste-button .dropdown-content a {
font-size: 0.6em; /* Ajustez cette valeur à votre convenance */
}
/* Réduit la largeur de chaque carte et centre */
.conteneur_video_wtv {
width: 45%;
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.5em; /* réduis légèrement la police */
}
/* Réduire la hauteur de l’icône cœur à 0.7em, conserver les proportions */
img.favoris-icon {
height: 0.7em;
width: auto;
}
/* ---- 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 {
font-size: 0.7em;
top: 4.5em;
right: 13.4em;
z-index: 2000;
}
/* Réduit la taille du bouton « copier » dans la popup de partage */
#wtv-share-copy-btn,
.bouton_copie_url_wtv {
font-size: 0.5em; /* ajuste selon ton besoin (par ex. 0.5em, 0.4em…) */
padding: 0.3em 0.5em; /* si tu veux aussi réduire l’intérieur du bouton */
}
/* Réduit la taille du texte de l’URL dans la popup de partage */
#wtv-share-url-input {
font-size: 0.5em; /* ajuste selon ton besoin */
padding: 0.3em; /* pour que le champ ne prenne pas trop de place */
}
/* —— 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.6em; /* taille de police un peu plus petite */
}
/* titre de la popup */
#wtv-report-popup-title {
font-size: 0.5em; /* réduit de 1.5em à 1.25em */
margin-bottom: 0.75em;
}
/* boutons et champs */
.input_signalement {
font-size: 0.6em;
padding: 0.35em;
width: 70%;
}
.bouton_envoyer_signalement {
font-size: 0.6em;
padding: 0.4em 0.6em;
width: 40%;
}
.wtv-listen-label {
font-size: 0.6em; /* Ajustez la valeur selon vos besoins */
}
/* —— Popup de confirmation (2) —— */
.popup_signalement_envoye {
width: 50%; /* ex : 320px */
padding: 1em;
}
.texte_popup_signalement_envoye {
font-size: 0.6em; /* 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: 25%; /* 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: 45% !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 */
.titre_video_share,
.groupe_video_share {
margin: 0; /* plus de marge */
padding: 0; /* plus de padding */
font-size: 0.6em; /* ta taille responsive */
}
/* 5) Le pseudo sous le player */
.pseudo_video_share {
width: 100%;
font-size: 0.6em;
margin: 0.5em 0 0; /* petit espace au-dessus seulement */
}
/* PROFIL-VISIT.HTML */
/* PUB */
.fixed-ad-profil-visit {
display: none;
width: 25%;
height: auto;
}
/* 1) Titre principal */
#pv-title {
font-size: 0.6em; /* 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: 45%; /* 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.5em; /* plus petit */
}
/* TOUS LES UTILISATEURS*/
/*titre */
#tlu-title {
font-size: 0.6em; /* 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.5em; /* rapetisse le texte */
display: block; /* force un retour à la ligne */
width: auto;
max-width: 100%;
}
/* 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.5em; /* 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.5em;
}
/* MAINTENANCE.HTML"*/
/* 1) Descendre le conteneur pour mettre le GIF plus bas */
.maintenance-content {
margin-top: 14em; /* pousse tout le bloc vers le bas */
display: flex; /* pour centrer horizontalement */
justify-content: center;
}
/* 2) Agrandir le GIF */
.gif_maintenance {
width: 35%; /* agrandit à 60% de la largeur de l’écran (ajuste si besoin) */
height: auto;
}
/* CONTACT */
/* 1) Conteneur principal blanc */
.conteneur-fond-blanc-contact {
width: 45%; /* 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.6em; /* rapetissé */
line-height: 1; /* plus serré */
margin: 0 0 0.5em; /* retouche des marges */
}
/* 3) Paragraphes */
.conteneur-fond-blanc-contact p {
font-size: 0.5em; /* 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: 22em;
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.5em;
font-weight: normal;
text-transform: none;
text-align: center;
background-color: rgba(255, 255, 255, 0.5);
padding: 0.5em 0.5em !important;
border-radius: 0.6em;
border: 0.1em solid #1E2A38;
margin-bottom: 2em;
}
.prog-clip-block,
.clip-white-bg {
min-width: 10em;
background: rgba(255,255,255,0.70);
border-radius: 0.6em;
box-shadow: 0 2px 18px rgba(0,0,0,0.08);
padding: 1em 1em 1em 1em;
margin-bottom: 1.5em;
display: inline-block;
max-width: 400px;
text-align: center;
}
.clip-date, .clip-status, .clip-estimee {
display: block;
margin-bottom: 0.45em;
font-size: 0.5em;
}
.clip-status, .clip-estimee {
margin-left: 0.2em;
}
#prog-total-clips {
margin-bottom: 2em !important;
}
.progressbar_baby {
width: 100%;
max-width: 21em;
height: 0.5em;
background: #e9e9ec;
border-radius: 0.6em;
box-shadow: 0 1px 8px rgba(0,0,0,0.05);
margin-top: 1em;
margin-bottom: 0.5em;
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.6em;
position: relative;
}
.progressbar_baby_text {
width: 100%;
text-align: center;
z-index: 2;
color: #222;
font-size: 0.6em;
position: relative;
user-select: none;
}
.bouton_voir_clip {
text-align: center; /* Centrer le texte */
font-family: "Gill Sans", sans-serif;
font-size: 0.5em;
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;
}
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/* ++++++++ #moins de 449++++++++ */
/* --- Catégorie 3 : écrans en landscape de largeur inférieure ou égale à 800px --- */
@media screen and (max-width: 449px) {
main {
padding: 0; /* on annule le padding sur mobile */
}
html,body{
overflow-x:hidden; /* au cas où un élément dépasserait encore */
}
/* BASE.HTML*/
header {
width: 100%;
max-width: 100%;
left: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
background-size: cover;
background-position: top left;
background-repeat: no-repeat;
}
.h1-commun {
font-size: 0.6em;
}
.logo {
width: 4.5em; /* passe de 13em à 10em */
height: 4.5em; /* idem */
margin-left: 0em; /* réduit l’écart à gauche */
}
/* boutons centraux */
.header-middle {
position: relative;
right: 4em; /* décale l’élément vers la droite de 2em */
flex-direction: column; /* colonne au lieu de row */
align-items: center; /* centre horizontalement */
gap: 0.3em; /* espacement vertical entre boutons */
}
.header-middle button {
font-size: 0.4em !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: 27em;
}
/*Texte “connecté avec” */
#cc {
font-size: 0.4em; /* passe de 0.9em à 0.8em */
margin: 0.3em 0.5em;/* moins d’espacement */
}
/*Drapeaux & icône mail */
#contact-icon {
top: 2.5em;
left: -10.7em; /* rapproche vers le centre */
width: 0.9em; /* largeur désirée */
height: auto; /* pour garder les proportions */
}
#lang-fr,
#lang-en {
top: 2.5em;
left: -7.6em; /* rapproche vers le centre */
transform: translateX(-3em); /* même rendu mais sans élargir la page */
width: 0.9em; /* largeur désirée */
height: auto; /* pour garder les proportions */
}
/*Icône “mon compte” */
.compte-menu {
top: 2.5em;
left: -11em; /* rapproche vers le centre */
}
/*image de l'Icône “mon compte” */
.compte-trigger > img {
width: 1em; /* ajustez à la taille que vous souhaitez */
height: auto;
}
.compte-dropdown button {
font-size: 0.4em; /* Ajuste la taille du texte */
}
/* MENU DROITE si non connecté */
/* taille positionnement inscritpion et connexion */
.header-right-buttons {
top: -0.5em;
left: -5em; /* rapproche vers le centre */
}
.se_connecter_base,
.inscription_base {
font-size: 0.4em;
}
/* FOOTER */
footer {
background: linear-gradient(to top,
rgba(0,0,0,0.3) 0%,
rgba(0,0,0,0) 100%);
}
/* cache une image */
.footer-right-image {
display: none !important;
}
/*centre la pub restante */
.footer-left-image {
display: none !important;
left: 50% !important;
transform: translateX(-50%) !important;
height: 2.8em;
}
/*remonter le texte “Vidéos fournies par…” */
.footer-center p {
position: relative;
top: 0.8em; /* ajuste cette valeur jusqu’à la position voulue */
right: 0em;
}
/* Bouton « Donate »*/
.button_donate{
position: relative;
top: 1em;
right: 0em;
height: 0.6em; /* demandé */
width: auto;
}
/*texte video fourni par pexel */
.texte_video_fourni_par {
color: #F5F5F7;
font-style: italic;
font-size: 0.4em;
}
.texte_pexel,
.texte_pexel:link,
.texte_pexel:visited {
color: #F5F5F7 !important; /* remplace #FF0000 par ta couleur */
font-size: 0.4em;
}
/* INDEX.HTML */
/* logo qui actualise */
.actualiser-index {
display: none !important;
position: relative;
top: 3em; /* remonte de 2em au lieu de redéfinir la marge */
margin: 0 auto;
}
.intro-index-gif {
position: absolute;
top: 60%;
left: 50%;
width: 35vw; /* et non 80 % du conteneur */
transform: translate(-50%, -50%);
}
/* CONNEXION.HTML"*/
/* Nouveau conteneur pour le contenu de connexion avec fond blanc */
.login-container {
width: 60%!important; /* Même largeur que .connexion-content */
margin: 0 auto !important; /* <— centrage horizontal */
padding: 0.2em 0.2em;
}
/* titre */
.connexion-content h1 {
font-size: 0.5em!important; /* réduit la taille du titre */
}
/* labels, paragraphes */
.connexion-content label,
.connexion-content p,
#lost-msg,
#errorMessage {
font-size: 0.4em!important; /* texte un peu plus petit */
}
/* champs de saisie */
.connexion-content input[type="email"],
.connexion-content input[type="password"] {
font-size: 0.4em!important; /* 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.4em!important; /* ou 0.9em selon ton goût */
}
/* boutons */
.connexion-buttons .button_connexion_on_connexion_page,
.bouton_mdp_perdu,
.bouton_envoi_mail {
font-size: 0.4em; /* réduit le texte des boutons */
padding: 0.3em 0.5em; /* moins de padding */
}
/* le formulaire « mot de passe perdu » */
#lost-form input,
#lost-form button {
font-size: 0.4em;
padding: 0.3em 0.4em;
}
.button_connexion_on_connexion_page {
margin-top: 1em;
margin-bottom: 0em;
}
/* INSCRIPTION.HTML"*/
.conteneur_fond_blanc {
width: 50%!important;
margin: 0 auto; /* centre horizontalement */
padding: 1em 1em;
}
/* PUB */
.fixed-ad {
display: none;
width: 28%!important;
height: auto;
}
#inscriptionTitle {
font-size: 0.5em!important; /* 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.4em!important;
}
/* réduire le texte des paragraphes d’erreur / d’info */
.inscription-content p {
font-size: 0.4em;
}
/* réduire les champs input */
.inscription-content input {
font-size: 0.4em;
padding: 0.3em; /* optionnel : réduire aussi leur padding */
}
/* réduire les boutons “envoyer le code” et “s’inscrire” */
.inscription-content button {
font-size: 0.5em!important;
padding: 0.3em 0.3em; /* ajustez si besoin */
}
#sendCodeButton {
font-size: 0.4em!important; /* taille du texte */
padding: 0.5em 0.5em; /* réduit le padding */
}
/* 1️⃣ On resserre l’espacement automatique du flex-column */
.inscription-content form{
gap:0.55rem; /* 0.5rem → 0.35rem : ajuste selon ton goût */
}
/* 2️⃣ Les
provoquent une ligne vide : on les neutralise
uniquement dans ce formulaire pour ne pas casser le reste du site */
.inscription-content form > br{
display:none;
}
/* 3️⃣ Messages sous l’email et sous le bouton code ➜ marges mini */
#mailBannedError,
#verificationSuccessMsg{
margin:0.25em 0; /* haut & bas à 0.25 em */
}
/* 4️⃣ Bouton « Recevoir un code » ➜ marges cohérentes et positives */
.bouton_envoyer_code_validation{
margin:0.5em 0; /* au lieu de 1rem et -1em */
}
/* 5️⃣ (option) On réduit un peu l’écart avant le bouton “S’inscrire” */
.button_inscrire_on_inscrire_page{
margin-top:1.2em; /* 2em → 1.2em */
}
/* CHOIX.HTML */
.conteneur-fond-blanc {
width: 50%; /* 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 */
}
/* pubs*/
.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: 25%; /* ou tout autre % que vous désirez */
height: auto; /* conserve le ratio de l’image */
}
.h1-commun-avec-fond {
font-size: 0.5em!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.4em; /* 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.4em;
}
/* 4) Les inputs textuels */
.input_keyword,
#input_nom_groupe,
#input_lien_musique {
font-size: 0.4em;
}
.input_nom_clip {
font-size: 0.4em;
margin-bottom: -1em;
height: 0.5em;
width: 10em;
}
/* == Redimensionnement des champs "Mots-clés" == */
.input_keyword {
height: 0.6em; /* hauteur fixe à 40px */
width: 10em;
}
/* 1) Réduire globalement la police de l’input file */
.input_choix_fichier {
font-size: 0.4em !important; /* ajuste la taille du texte */
line-height: 1.2; /* pour que l’input ne soit pas trop grand */
height: auto; /* laisser le navigateur ajuster la hauteur */
width: 20em; /* ou la largeur que vous souhaitez */
padding: 0.2em; /* espace interne réduit */
box-sizing: border-box;
}
/* 2) Cibler le bouton interne sous WebKit/Chromium */
.input_choix_fichier::-webkit-file-upload-button {
font-size: 0.4rem; /* même taille que l’input */
padding: 0.2em 0.4em; /* ajuster le remplissage si besoin */
margin: 0; /* supprime tout margin par défaut */
line-height: 1; /* s’assurer que le bouton ne grossit pas */
}
/* 3) Cibler le bouton interne sous Firefox */
.input_choix_fichier::-moz-file-upload-button {
font-size: 0.4rem;
padding: 0.2em 0.4em;
line-height: 1;
}
/* 4) Cibler l’intitulé « Aucun fichier choisi » (chez certains navigateurs, c’est le même input) */
.input_choix_fichier {
font-size: 0.4rem; /* diminue aussi le texte du label à droite */
}
/* Optionnel : forcer la hauteur minimale si l’input devient trop petit */
.input_choix_fichier {
min-height: 1.5em;
}
/* 5) Les boutons */
.button_ok_choix_clip,
#cc-download-btn {
font-size: 0.4em!important;
padding: 0.4em 0.5em;
}
/* Pour la checkbox "J'ai créé cette musique" */
input.checkbox_musique_originale {
width: 0.6em; /* Ajustez cette valeur pour changer la largeur de la checkbox */
height: 0.6em; /* Ajustez cette valeur pour changer la hauteur de la checkbox */
}
/* Pour les checkboxes des thèmes */
.checkbox_themes input[type="radio"] {
width: 0.6em!important; /* Ajustez cette valeur pour changer la largeur de la checkbox */
height: 0.6em!important; /* Ajustez cette valeur pour changer la hauteur de la checkbox */
}
/* Pour les checkboxes des filtres */
.checkbox_effets input[type="checkbox"] {
width: 0.6em; /* Ajustez cette valeur pour changer la largeur de la checkbox */
height: 0.6em; /* Ajustez cette valeur pour changer la hauteur de la checkbox */
}
/* 1️⃣ Thèmes (« Bonne humeur », « Humain », …) */
.conteneur_themes{
gap:0.1em !important; /* écart vertical entre chaque option */
margin-bottom:0.5em; /* écart sous le bloc complet */
}
.checkbox_themes{ margin:0; } /* annule toute marge interne résiduelle*/
/* 2️⃣ Mots-clés (Mot-clé 1 … Mot-clé 4) */
.conteneur_mots_cle{
gap:0.1em !important; /* écart vertical entre les 4 lignes */
}
.conteneur_mots_cle input,
.conteneur_mots_cle label{
margin:0; /* supprime le margin-bottom des inputs */
}
.input_keyword{ margin-bottom:0.5em; } /* dernier fignolage */
/* 3️⃣ Filtres (« Couleur » / « Noir et blanc ») */
.conteneur_effets{
gap:0em !important; /* écart vertical entre les deux cases */
margin-bottom:0.2em; /* écart sous le bloc complet */
}
.checkbox_effets{ margin:0; } /* évite une marge parasite éventuelle */
.container_2buttons_et_lecteur{
margin-top: -0.8em !important; /* rapproché du lecteur vidéo */
}
/* WAIT_AUDIO.HTML */
.fixed-ad-tous-les-wait {
display: none;
position: fixed;
top: 60%;
transform: translateY(-50%);
z-index: 1000;
width: 25%; /* ou tout autre % que vous désirez */
height: auto; /* conserve le ratio de l’image */
}
.pub-image-container img,
#pubVideo {
max-width: 11em;
height: auto; /* conserve le ratio */
display: block;
margin: 0 auto; /* le centre horizontalement */
position: relative;
left: 0em; /* décale l’élément vers la droite de 2em */
top: -3.5em;
}
/* LECTEUR.HTML */
/* PUB */
.ad-lecteur {
display: none;
position: fixed;
top: 40%;
width: 25%; /* ou tout autre % que vous désirez */
height: auto; /* conserve le ratio de l’image */
z-index: 1500; /* Ajustez le z-index si nécessaire */
}
/* conteneur fond blanc*/
.conteneur_fond_blanc_lecteur {
width: 45%; /* 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.5em; /* adapte selon ton besoin */
}
/* bouton modifier le clip*/
.button_modif_final_clip {
padding: 0.3em 0.8em; /* au lieu de 1em 2em par défaut */
font-size: 0.4em!important; /* par exemple 90% de la taille normale */
}
/* bouton share et download*/
.button_download_final_clip,
.bouton_share_sur_lecteur {
width: 0.6em; /* ou en % : ex. width: 8%; */
height: auto;
}
.popup_share_inner {
/* On annule le min-width fixe */
min-width: auto;
max-width: 50%;
padding: 0.5em;
}
.popup_share_inner .input_share_url {
/* Hauteur réduite à 1 em */
height: 1em;
/* Largeur à 80 % du conteneur */
width: 80%;
/* Police plus petite */
font-size: 0.6em;
/* Ajuster le padding vertical pour centrer le texte */
padding: 0.2em 0.2em;
/* Facultatif : réduire la bordure pour que ça reste harmonieux */
border-width: 0.15em;
margin-top: 1em;
margin-bottom: 1em;
}
.popup_share .close_share_popup {
position: absolute;
top: 0em; /* distance depuis le haut de l’écran */
right: 0.3em; /* distance depuis le bord droit de l’écran */
font-size: 0.5em;
cursor: pointer;
z-index: 1001; /* au-dessus de l’overlay semi-transparent */
}
/* on réduit la popup à 50% de la largeur de l’écran */
.ad-popup-inner {
width: 40vw; /* ou 50% selon votre goût */
max-width: none; /* désactive la limite à 40em */
}
/* l’image occupe tout l’intérieur de la popup */
.ad-image {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
/* pour que les overlays absolus soient positionnés par rapport à l’image */
.ad-image-container {
position: relative;
}
/* repositionne le compte à rebours dans le coin sup-droite de la pub */
.countdown-overlay {
position: absolute;
top: 0.5em; /* ajustez l’espacement si besoin */
right: 0.5em;
font-size: 0.4em; /* passe de 1.25em à 1em */
}
/* idem pour la croix de fermeture */
.close-popup-button {
font-size: 0.4em; /* passe de 1.25em à 1em */
position: absolute;
top: 0.1em;
right: 0.1em;
display: block; /* pour qu’elle soit visible dès l’ouverture */
}
#copyShareUrlBtn {
font-size: 0.4em; /* Ajustez cette valeur selon vos besoins */
}
#donateButton {
width: 25%; /* Ajustez cette valeur selon vos besoins */
height: auto; /* Conserve le ratio de l'image */
position: relative; /* ou absolute selon votre mise en page */
top: -1.5em; /* Déplace le bouton de 1em vers le bas par rapport à sa position normale */
}
/* MODIFICATIONS.HTML*/
/* 1) On rapetisse le « cadre » blanc */
.conteneur_tout_modif {
width: 40%; /* 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: 0.6em; /* ou la valeur que tu préfères */
}
/* rapetisser le compteur “vidéo n°…” */
.texte_numero_video {
font-size: 0.5em; /* ajuste la valeur selon ton goût */
}
.timeline_seule .curseur {
position: relative; /* Assurez-vous que le positionnement est relatif ou absolu */
top: -0.2em; /* Déplace le curseur de 0.2em vers le bas */
width: 0.5em; /* Ajustez cette valeur pour changer la largeur du curseur */
height: 0.5em; /* Ajustez cette valeur pour changer la hauteur du curseur */
}
/* bouton precedent et suivant*/
.conteneur_boutons_defile .bouton-precedent,
.conteneur_boutons_defile .bouton-suivant {
font-size: 0.5em;
}
/* 2) On rapetisse le lecteur vidéo */
#videoPlayer,
.lecteur-modif {
width: 100%; /* prend 100% de son parent (qui fait maintenant 80% de l’écran) */
max-width: 40em; /* ou toute autre valeur en px pour limiter la largeur max */
height: auto; /* conserve les proportions */
}
/*2) boutons par... */
.bouton-remplacer,
.bouton-remplacer-perso {
font-size: 0.5em; /* réduire la taille du texte */
padding: 0.2em 0.4em; /* réduire l’espacement intérieur */
}
/*POPUP "une de tes videos"*/
.fenetre-preview-video-perso {
font-size: 0.5em;
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #F5F5F7;
border: 0.125em solid #1E2A38;
border-radius: 0.625em;
padding: 1.5em;
max-width: 40%;
width: 80%;
z-index: 1500;
}
/* POPUP "une videos pexel"*/
.fenetre-preview {
display: none;
position: fixed;
top: 50%;
left: 49%;
transform: translate(-50%, -50%);
background: #F5F5F7;
border: 0.0625em solid #ccc;
padding: 1.25em;
margin: 1em;
z-index: 1000;
width: auto;
max-width: 40%;
box-shadow: 0 0.25em 0.5em rgba(0,0,0,0.2);
}
input[type="file"] {
font-size: 0.6em;
margin-bottom: 0.5em;
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
font-size: 0.5em;
padding: 0.15em 0.3em;
}
/* — 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.5em;
}
/* — 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.5em;
}
/* — réduire les champs de saisie — */
.input_modif_nom_clip,
.input_modif_nom_groupe {
font-size: 0.5em;
}
/* rapetisser les libellés “couleurs” et “noir et blanc” */
.text-modif-couleurs,
.text-modif-NB {
font-size: 0.5em;
}
.check-box-modif-couleurs,
.check-box-modif-NB {
width: 0.7em; /* Ajustez cette valeur pour changer la largeur de la checkbox */
height: 0.7em; /* Ajustez cette valeur pour changer la hauteur de la checkbox */
margin: 0.3em 0.5em 0.3em 0; /* Ajustez les marges si nécessaire */
}
/* — agrandir le bouton « J'ai fini de modifier » — */
.bouton-fini {
font-size: 0.5em;
}
/* PROFIL.HTML"*/
/* PUB */
.fixed-ad-profil {
display: none;
position: fixed;
top: 60%;
transform: translateY(-50%);
z-index: 1000;
width: 25%;
height: auto;
}
/* ——— CONTENEUR ET TITRES ——— */
.conteneur-page-perso {
max-width: 60%;
padding: 1em;
}
/* H1 “Tu es sur ta page personnelle” */
.h1-commun#pr-main-title {
font-size: 0.7em;
margin-top: 1em;
margin-bottom: 0.5em;
position: relative;
left: -0em; /* décale l’élément vers la droite de 2em */
}
/* Texte d’accueil (pseudo) */
.texte-nom-user {
font-size: 0.5em;
margin: 0.3em 0;
}
/* Lien “Modifier mon mot de passe” */
.texte_modif_mdp {
font-size: 0.5em;
margin: 0.5em 0;
margin-top: 2em;
}
.texte_suivre_prog {
font-size: 0.5em;
margin-top: 0.5em;
}
/* ——— FORMULAIRE MDP ——— */
#pwd-change-container .input_change_mdp {
width: 50%;
height: 1em;
font-size: 0.5em;
margin: 0.4em auto;
}
#pwd-change-container #btn-change-pwd {
font-size: 0.5em;
padding: 0.4em 0.6em;
width: 30%;
}
/* ——— TITRES SECONDAIRES H2 ——— */
.H2-profil-perso {
border: 1px solid #1E2A38; /* Bordure avec une couleur contrastée */
padding: 0.5em 0.5em;
font-size: 0.6em;
}
/* ——— 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.5em;
padding: 0.2em 0.4em;
position: relative;
right: 3em; /* décale l’élément vers la droite de 2em */
}
.cc-clip-delete {
font-size: 0.5em!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.5em;
}
.text-favoris-profil-perso {
font-size: 0.5em;
}
.pas_de_favoris {
font-size: 0.5em;
margin-bottom: 4em;
}
/* PROFIL_VISIT.HTML"*/
.nom-groupe-profil-visit {
font-size: 0.6em;
color: #1E2A38;
text-align: left;
margin-left: 0.5em;
}
/* WTV.HTML"*/
.h1-commun {
font-size: 0.6em; /* au lieu de 2rem par exemple */
}
/* bouton a trier"*/
.button#wtv-dropdownButton {
font-size: 0.5em;
}
.paste-button .dropdown-content a {
font-size: 0.6em; /* Ajustez cette valeur à votre convenance */
}
/* Réduit la largeur de chaque carte et centre */
.conteneur_video_wtv {
width: 45%;
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.5em; /* réduis légèrement la police */
}
/* Réduire la hauteur de l’icône cœur à 0.7em, conserver les proportions */
img.favoris-icon {
height: 0.7em;
width: auto;
}
/* ---- 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 {
font-size: 0.7em;
top: 4.5em;
right: 13.4em;
z-index: 2000;
}
/* Réduit la taille du bouton « copier » dans la popup de partage */
#wtv-share-copy-btn,
.bouton_copie_url_wtv {
font-size: 0.5em; /* ajuste selon ton besoin (par ex. 0.5em, 0.4em…) */
padding: 0.3em 0.5em; /* si tu veux aussi réduire l’intérieur du bouton */
}
/* Réduit la taille du texte de l’URL dans la popup de partage */
#wtv-share-url-input {
font-size: 0.5em; /* ajuste selon ton besoin */
padding: 0.3em; /* pour que le champ ne prenne pas trop de place */
}
/* —— 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.6em; /* taille de police un peu plus petite */
}
/* titre de la popup */
#wtv-report-popup-title {
font-size: 0.5em; /* réduit de 1.5em à 1.25em */
margin-bottom: 0.75em;
}
/* boutons et champs */
.input_signalement {
font-size: 0.6em;
padding: 0.35em;
width: 70%;
}
.bouton_envoyer_signalement {
font-size: 0.6em;
padding: 0.4em 0.6em;
width: 40%;
}
.wtv-listen-label {
font-size: 0.6em; /* Ajustez la valeur selon vos besoins */
}
/* —— Popup de confirmation (2) —— */
.popup_signalement_envoye {
width: 50%; /* ex : 320px */
padding: 1em;
}
.texte_popup_signalement_envoye {
font-size: 0.6em; /* 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: 25%; /* 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: 45% !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 */
.titre_video_share,
.groupe_video_share {
margin: 0; /* plus de marge */
padding: 0; /* plus de padding */
font-size: 0.6em; /* ta taille responsive */
}
/* 5) Le pseudo sous le player */
.pseudo_video_share {
width: 100%;
font-size: 0.6em;
margin: 0.5em 0 0; /* petit espace au-dessus seulement */
}
/* PROFIL-VISIT.HTML */
/* PUB */
.fixed-ad-profil-visit {
display: none;
width: 25%;
height: auto;
}
/* 1) Titre principal */
#pv-title {
font-size: 0.6em; /* 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: 45%; /* 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.5em; /* plus petit */
}
/* TOUS LES UTILISATEURS*/
/*titre */
#tlu-title {
font-size: 0.6em; /* 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.5em; /* rapetisse le texte */
display: block; /* force un retour à la ligne */
width: auto;
max-width: 100%;
}
/* 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.5em; /* 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.5em;
}
/* MAINTENANCE.HTML"*/
/* 1) Descendre le conteneur pour mettre le GIF plus bas */
.maintenance-content {
margin-top: 14em; /* pousse tout le bloc vers le bas */
display: flex; /* pour centrer horizontalement */
justify-content: center;
}
/* 2) Agrandir le GIF */
.gif_maintenance {
width: 35%; /* agrandit à 60% de la largeur de l’écran (ajuste si besoin) */
height: auto;
}
/* CONTACT */
/* 1) Conteneur principal blanc */
.conteneur-fond-blanc-contact {
width: 45%; /* 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.6em; /* rapetissé */
line-height: 1; /* plus serré */
margin: 0 0 0.5em; /* retouche des marges */
}
/* 3) Paragraphes */
.conteneur-fond-blanc-contact p {
font-size: 0.5em; /* 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.4em;
font-weight: normal;
text-transform: none;
text-align: center;
background-color: rgba(255, 255, 255, 0.5);
padding: 0.5em 0.5em !important;
border-radius: 0.6em;
border: 0.1em solid #1E2A38;
margin-bottom: 2em;
}
.prog-clip-block,
.clip-white-bg {
min-width: 8.8em;
background: rgba(255,255,255,0.70);
border-radius: 0.6em;
box-shadow: 0 2px 18px rgba(0,0,0,0.08);
padding: 1em 1em 1em 1em;
margin-bottom: 1.5em;
display: inline-block;
max-width: 400px;
text-align: center;
}
.clip-date, .clip-status, .clip-estimee {
display: block;
margin-bottom: 0.45em;
font-size: 0.4em;
}
.clip-status, .clip-estimee {
margin-left: 0.2em;
}
#prog-total-clips {
margin-bottom: 2em !important;
}
.progressbar_baby {
width: 100%;
max-width: 21em;
height: 0.5em;
background: #e9e9ec;
border-radius: 0.6em;
box-shadow: 0 1px 8px rgba(0,0,0,0.05);
margin-top: 1em;
margin-bottom: 0.5em;
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.4em;
position: relative;
}
.progressbar_baby_text {
width: 100%;
text-align: center;
z-index: 2;
color: #222;
font-size: 0.4em;
position: relative;
user-select: none;
}
.bouton_voir_clip {
text-align: center; /* Centrer le texte */
font-family: "Gill Sans", sans-serif;
font-size: 0.4em;
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;
}
}