/*
	Nom de fichier : editeurs_medias.css
    Version : 0.0.1
    Projet : Pégase
    Auteur  : Nicolas Chevallier
    Description : composants des éditeurs de médias
    Date    : 26/03/2025
*/


/*************************************************************************************
**                                 éléments textuels de base                                 **
*************************************************************************************/

.module-design-titre-editeur {
    color: var(--Gray-900, #1F2647);
    font-family: Marianne-Bold;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 150% */
}

.module-design-titre-media {
    color: var(--Gray-900, #1F2647);
    font-family: Marianne-Bold;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px; /* 150% */
}

.module-design-label {
    align-self: stretch;
    color: var(--Gray-700, #363F72);
    font-family: Marianne-Regular;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    margin-bottom: 6px;
}

.module-design-texte {
    overflow: hidden;
    color: var(--Gray-600, #49528E);
    text-overflow: ellipsis;
    font-family: Marianne-Regular;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.module-design-form-label {
    color: var(--Gray-900, #1F2647);
    font-family: Marianne-Medium;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.module-design-form-hint-text {
    color: var(--Gray-600, #49528E);
    font-family: Marianne-Regular;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

/* la classe "obligatoire" est à utiliser pour ajouter un astérisque devant les champs dont la saisie est obligatoire */
.obligatoire::before {
    content: "*";                     
    color: var(--Error-600, #E31B54);                        
    margin-right: 0.3em;                
}

/*************************************************************************************
**                                inputs                                            **
*************************************************************************************/

.module-design-input {
    /*layout*/
    display: flex;
    padding: 10px 14px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    /*style*/
    border-radius: 8px;
    border: 1px solid var(--Gray-300, #B3B8DB);
    background: var(--Base-White, #FFF);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    width: 100%;
    box-sizing: border-box;

    overflow: hidden;
    color: var(--Gray-900, #1F2647);
    text-overflow: ellipsis;
    font-family: Marianne-Regular;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.module-design-input:focus {
    outline: 2px solid #BCF1EB;
}

.module-design-input:invalid {
    border: 1px solid var(--Error-400, #FD6F8E);
}

.module-design-input:invalid:focus {
    border: 1px solid var(--Error-400, #FD6F8E);
    outline: 2px solid var(--Error-400, #FD6F8E);
}

/*cas de l'input qui n'est pas rempli conformément à ce qui est attendu*/
/* .module-design-input.erreur {
    border: 1px solid var(--Error-400, #FD6F8E);
} */


/*************************************************************************************
**                                select                                            **
*************************************************************************************/

.module-design-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.module-design-select-wrapper .custom-select:focus {
    outline: 2px solid #BCF1EB;
}

.module-design-select-wrapper .custom-select {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--Gray-300, #B3B8DB);
    background-color: var(--Base-White, #FFF);
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    cursor: pointer;
    position: relative;
}

.module-design-select-wrapper .custom-select .selected-value {
    font-family: Marianne-Medium;
    font-size: 16px;
    color: var(--Gray-900, #1F2647);
    line-height: 24px;
    font-style: normal;
    font-weight: 500;
}

.module-design-select-wrapper .custom-select::after {
    content: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%207.5L10%2012.5L15%207.5%22%20stroke%3D%22%235965A8%22%20stroke-width%3D%221.66667%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.module-design-select-wrapper .custom-options {
    display: none; 
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--Base-White, #FFF);
    border: 1px solid var(--Gray-300, #B3B8DB);
    border-radius: 8px;
    z-index: 100;
    padding: 0;
    margin: 0;
    list-style: none;
    max-height: 320px;
    cursor: auto;
    box-shadow: 0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;
    margin-top: 2px;
    overflow-y: auto;

}

.module-design-select-wrapper .custom-options li {
    padding: 12px;
    cursor: pointer;
    font-family: Marianne-Medium !important;
    font-size: 16px !important;
    color: var(--Gray-900, #1F2647) !important;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    border-radius: 6px;
    margin: 6px;
}

.module-design-select-wrapper .custom-options li:hover,
.module-design-select-wrapper .custom-options li.active {
    background-color: var(--Gray-50, #F1F3F8);
}

/* Pour afficher le menu au clic */
.module-design-select-wrapper .custom-select.expanded .custom-options {
    display: block;
}


/******************************************************************************************/
/* espacements dans un bloc de formulaire avec label, input ou select, et hint text        *
*******************************************************************************************/



.module-design-bloc-form {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.module-design-bloc-form > :nth-child(1) {
    margin-bottom: 6px;
}

.module-design-bloc-form > :nth-child(2) {
    margin-bottom: 8px;
}

.module-design-bloc-form > :last-child {
    margin-bottom: 0; 
}



/******************************************************************************/
/*                                 tableau résumé 
*******************************************************************************/
table.tableau-resume th {
    color: var(--Gray-600, #49528E);
    font-family: Marianne-Medium;
    font-size: 12px;
    font-style: normal;
    line-height: 18px;
}

table.tableau-resume td:not(:first-child) {
    color: var(--Gray-600, #49528E);
    font-family: Marianne-Regular;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

/* Masquer la 2ème colonne (index 2) en dessous de 600px */
@media (max-width: 600px) {
    table.tableau-resume td:nth-child(2), 
    table.tableau-resume th:nth-child(2) {
      display: none;
    }
  }
  
  /* Masquer la 3ème colonne (index 3) en dessous de 400px */
  @media (max-width: 400px) {
    table.tableau-resume td:nth-child(3), 
    table.tableau-resume th:nth-child(3) {
      display: none;
    }
  }
  


/*******************************************************************************
**                             Le bloc de téléchargement                      **
*******************************************************************************/

.bloc-telechargement-media {
    display: flex;
    max-width: 800px;
    height: 341px;
    padding: 0px 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    border: 2px dashed var(--Gray-300, #B3B8DB);
    background: var(--Base-White, #FFF);
}

.bloc-telechargement-media .text-and-supporting-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.bloc-telechargement-media .text {
    color: var(--Brand-700, #007D83);
    font-family: Marianne-Bold;
    font-size: 14px;
    font-style: normal;
    line-height: 20px;
    margin-bottom: 12px;
}

.bloc-telechargement-media .supporting-text {
    color: var(--Gray-600, #49528E);
    font-family: Marianne-Regular;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; 
}

/*******************************************************************************
**                             Les blocs de type de média                     **
*******************************************************************************/

.groupe-blocs-type-media {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, 1fr);
}

/* Moins de 800px → 2 colonnes */
@media (max-width: 860px) {
    .groupe-blocs-type-media {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Moins de 600px → 1 colonne */
@media (max-width: 599px) {
    .groupe-blocs-type-media {
        grid-template-columns: 1fr;
    }
}


.bloc-type-media {
        display: flex;
        padding: 12px;
        align-items: flex-start;
        gap: 12px;
        border: 1px solid var(--Gray-200, #D5D9EB);
        background: var(--Base-White, #FFF);
        min-width: 0; /* évite le débordement en Grid */    
}

.bloc-type-media svg {
    flex-shrink: 0; 
}

.bloc-type-media .text-and-supporting-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
}

.bloc-type-media .text {
    overflow: hidden;
    color: var(--Gray-700, #363F72);
    text-overflow: ellipsis;
    font-family: Marianne-Medium;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.bloc-type-media .supporting-text {
    align-self: stretch;
    color: var(--Gray-600, #49528E);
    font-family: Marianne-Regular;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
}

/*******************************************************************************
**                             Le groupe de boutons                    **
*******************************************************************************/
.button-group {
    display: flex;
    width: 800px;
    align-items: flex-start;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid var(--Gray-300, #B3B8DB);
    overflow: hidden;

    max-width: 100%;
    overflow-x: auto;
}


.button-group .button-group-base {
    display: flex;
    min-height: 40px;
    padding: 0px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-right: 1px solid var(--Gray-300, #B3B8DB);
    background: var(--Base-White, #FFF);
    cursor: pointer;
}

.button-group .button-group-base.filtre {
    justify-content: space-between;
}

.button-group .button-group-base:last-child {
    border-right: none;
    width: 100%;
}

.button-group .button-group-base:hover {
    background: #eaecf5 !important;
}

.button-group span {
    color: var(--Gray-500, #5965A8);
    font-family: Marianne-Medium;
    font-size: 14px;
    font-style: normal;
    line-height: 20px;
}



.button-group .button-group-base:first-child {
    border-top-left-radius: 8px;
}


.button-group .svg-image svg {
    width: 24px;
    height: 24px;
    stroke: #5965A8 !important; /* Couleur du contour */
    fill: none;       /* Facultatif : évite un remplissage par défaut */
}

    /*******************************************************************************
**                             Les toolbars                    **
*******************************************************************************/



.radius-container {
    border-radius: 8px;
    border: 1px solid var(--Gray-300, #B3B8DB);
    overflow: hidden;
    width: 800px;
    max-width: 100%;
}

.radius-container .toolbar {
    display: flex;
    border-bottom: 1px solid var(--Gray-300, #B3B8DB);
    margin-bottom: 24px;
}


.radius-container .toolbar button.tool-button {
    all: unset !important;
    display: flex !important;
    min-height: 40px !important;
    padding: 0px 12px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    border-right: 1px solid var(--Gray-300, #B3B8DB) !important;
    background: var(--Base-White, #FFF) !important;
    border-radius: 0 !important;
    /* cursor: pointer !important; */
}

.radius-container .toolbar .tool-button:active {
    background-color: red;
}

.radius-container .toolbar .tool-button:focus {
    background-color: red;
}

.radius-container .toolbar button.tool-button:last-child {
    border-right: none !important;
    width: 100% !important;
}

.radius-container .toolbar button.tool-button.filtre {
    justify-content: space-between !important;
}

.radius-container .toolbar .tool-button:hover,
.radius-container .toolbar .tool-button:focus {
    background: #eaecf5 !important;
}

.radius-container .toolbar .tool-button span {
    color: var(--Gray-500, #5965A8);
    font-family: Marianne-Medium;
    font-size: 14px;
    font-style: normal;
    line-height: 20px;
}


/* TESTS */





/*******************************************************************************
**                             Le Canoplayer                                  **
*******************************************************************************/

.vjs-remaining-time-display {
    font-family: Marianne-Regular, sans-serif;
    /* color: red; */
}
    
    
.vjs-playback-rate-value,
.vjs-menu-item-text {
    font-family: Marianne-Regular, sans-serif;
    /* color:red; */
}


.vjs-control-bar {
    color: var(--brand-600, #008f98);
}

/* .vjs-control-bar::before {
    content:'toto1';
} */


span.vjs-menu-item-text {
    color:white !important;
}


/* arrondir le player*/

#video > div, #video video {
    border-radius: 6px;
    border: none !important;
    outline: none !important;
}

#video {
    /* background: red;  */
    border: none !important;
}

#video div.vjs-control-bar button.vjs-control:first-child {
    border-bottom-left-radius: 6px;
}

#video div.vjs-control-bar button.vjs-fullscreen-control {
    border-bottom-right-radius: 6px;
}

#video div.vjs-control-bar button.vjs-mute-control {
    border-bottom-left-radius: 0px !important;
}

#video div.vjs-control-bar div.vjs-playback-rate:hover button {
    /* background-color: yellow; */
    color: white;
}

div.vjs-playback-rate-value {
    /* impossible de forcer la couleur noire, on a une sorte de gris */
}

/* div#vjs-playback-rate-value-label-vjs_video_3_component_316:hover {
    color: white;
} */
/********************************************************************************************/