@CHARSET "UTF-8";



/* ======== FIX TEMP ========*/

div.authors {
    max-height: initial!important;
    overflow-y: auto;
}


/*=======================================================================================*/
/*======================================== @IMPORT  =====================================*/
/*======================================================================================*/

/* Ceci permet l'import de la font Inria ---------------------------------------------------------------------------- */
@import "https://files.inria.fr/dircom/extranet/fonts-inria-sans.css"; 

/*==========================================================================================*/
/*===================================== ROOT [VARIABLE]  ==================================*/
/*=========================================================================================*/

:root {

/* Variable qui agit sur les couleurs des bordures et le background des widgets ---------------------------------------------------------------------------------------------------------------------------*/
    --widget: #384257; 

/* Variable qui agit sur les couleurs du texte URL "lien" ---------------------------------------------------------------------------------------------------------------------------*/
    --texte-url: #e63312; 

/* Variable qui agit sur les couleurs du texte ---------------------------------------------------------------------------------------------------------------------------*/
    --texte: #444a52; 

/* Variable qui agit sur les couleurs du texte au passage de la souris ------------------------------------------------------------------------------------------------------------*/
    --texte-hover: #e63312;

 /* Variable qui agit sur les couleurs des labels des widgets tels que le nombre de text intégral ---------------------------------------------------------------------------------------------------------------------------*/
    --label:#e63312;

/* Variable qui agit sur les couleurs des menu et des menu déroulants ---------------------------------------------------------------------------------------------------------------------------*/
    --menu:#272f3d;

/* Variable qui agit sur les couleurs des boutons et les mots clés du widget mots clés ---------------------------------------------------------------------------------------------------------------------------*/
    --bouton:#6c6980; 

/* Variable qui agit sur les couleurs des boutons du menu ---------------------------------------------------------------------------------------------------------------------------*/
    --bouton-menu:#e63312; 

/* Variable qui agit sur les couleurs au passage du curseurs sur les éléments tels que les boutons et les mots clés  ---------------------------------------------------------------------------------------------------------------------------*/
    --hover: #8c88a6; 

/* Variable qui agit sur les couleurs au passage du curseurs sur le menu ----------------------------------------------------------------------------------------------------------------*/
    --hover-menu: #B9251A; 

/* Variable qui agit sur les couleurs au passage du curseurs sur le menu ----------------------------------------------------------------------------------------------------------------*/
    --hover-menu2: #384257; 

/* Variable qui permet une animation de transition au passage du curseur ---------------------------------------------------------------------------------------------------------------------------*/
    --transition: .3s cubic-bezier(.25,.8,.5,1); 

/* Rouge Inria  ---------------------------------------------------------------------------------------------------------------------------*/
    --rouge: #e63312; 

}

/*=======================================================================================*/
/*============================ CONTENUS MODIFIABLE (Mode Rapide) =========================*/
/*======================================================================================*/

/* Couleur du fond de la page ------------------------------------------------------------------------------------ */

body, html {
    background-color: #e5e5e5;
}


/* ============================== FONT (POLICE) ============================== */

/* Importation de la font Inria-Sans ------------------------------------------------------------------------------------ */
body { 
    font-family: 'Inria Sans';
}

/* Couleur des liens ( URL-HTML) ------------------------------------------------------------------------------------ */
a { 
    color: var(--texte-url);
}

/* Annulation de la prise en compte de la font sur le bandeau supérieur de la page (logo hal, etc.) ------------------------------------------------------------------------------------ */
button, input, optgroup, select, textarea { 
    font-family: revert; 
}
.user-circle .initials {
font-family: "Noto Sans", sans-serif;
}

/* Texte INRIA-TEMPLATE + Annulation de la prise en compte de la font Inria------------------------------------------------------------------------------------ */
.text-ban {
    font-size: 24px;
    font-weight: bold;
    line-height: 50px;
    font-family: Noto Sans,sans-serif;
    color: #6d2065;
    display: flex;
    background-image: linear-gradient(90deg, rgba(2,0,36,0) 0%, currentcolor 50%, rgba(255,255,255,0) 100%);
    background-repeat: no-repeat;
    background-size: 535px 2px;
    background-position: 50%;
}


/* ============================== Titre & Paragraphes ============================== */

/* Style du Titre h1 ------------------------------------------------------------------------------------ */
.titre-h1 { 
    padding-left: 0px;
    /*border-bottom: 1px solid var(--texte);*/
    color: var(--texte);
    padding-top: 15px;
    text-align: center;
}

/* Style des paragraphe------------------------------------------------------------------------------------ */
.paragraphes { 
    font-size: 16px;
    line-height: 30px;
    color: var(--texte);
    padding: 10px 10px 10px 10px;
}

/* Taille de h3 ------------------------------------------------------------------------------------ */
.h3, h3 {
    font-size: 1rem;
}

/* Style du h1 sur la page Collection ------------------------------------------------------------------------------------ */
.h1-titre-collection {
    font-size: 25px;
    color: var(--texte);
}
/* Style du h1 sur la page Collection ------------------------------------------------------------------------------------ */
.h2-titre-collection {
    padding: 7px 16px 0px 16px;
    background-color: var(--bouton-menu);
    color: #ffffff;
    font-size: 23px;
    width: 20%;
    text-align: center;
}

/* =============================== Bannière ===============================*/

/* Style de la bannière [En-tête] ------------------------------------------------------------------------------------ */
.logo {
    background-size: auto;
    background-repeat: no-repeat;
    height: 250px;
    background-position-x: center;
    background-color: #e5e5e5;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ========================== Widgets -> Commun à tous ==========================*/

/* Marge externe et couleur de l'entête des widgets ------------------------------------------------------------------------------------ */
.section-corps .widget .widget-header { 
    /*background-color: var(--widget);*/
    background-color: transparent;
    padding-top: 15px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color:#000;
}

/* Marge externe et couleur des bordures des widgets ------------------------------------------------------------------------------------ */
 .section-corps .widget {
    margin-bottom: 25px;
    /*border: 1px solid var(--widget);*/
    /* box-shadow: none; */
    /*border-radius: 7px*/
    border: 1px solid #c8cad0;
    box-shadow: 0 3px 4px #00000029;
    border-radius: 3px;
    background-color: #f7f7f7;
}
/* Marge externe et couleur des bordures du widgets Gros Plan ------------------------------------------------------------------------------------ */
.block-widget {
    border: 1px solid #c8cad0;
    box-shadow: 0 3px 4px #00000029;
    border-radius: 3px;
    background-color: #f7f7f7;
    margin-bottom: 25px;
}
/* Marge du contenu du widget Gros Plan ------------------------------------------------------------------------------------ */
.block-widget-contenu {
    padding: 5px 20px 5px 20px;
}

/* Style de En-tete du widget info principal ------------------------------------------------------------------------------------ */
.block-titre {
    display: table;
    margin: 0px 0px 0px 0px;
    padding: 7px 16px 0px 16px;
    background-color: var(--bouton-menu);
    color: #ffffff;
    font-size: 23px;
    width: 100%;
    text-align: center;
}

/* ========================== Label (chiffres qui s'affichent dans le widget) ==========================*/

/* Bloc avec chiffres dans les des widgets ------------------------------------------------------------------------------------ */
.label.label-contrast { 
    background-color: var(--label);
    color: #fff;
    padding: 11px 20px 8px;
    border-radius: 4px;
    font-size: 16px;
}

/* ========================== Widget -> dernière publication ========================== */

/* Style des éléments dans le widget dernière publication ------------------------------------------------------------------------------------ */
.list-deposit .media { 
    margin-top: 0px;
    transition: var(--transition);
    border-left: 2px solid transparent;
    border-bottom: 0px solid;
    padding: 10px;
    font-size: 14px;
}

/* Style du widget dernière publication hover -> (au passage de la souris) ------------------------------------------------------------------------------------ */
.list-deposit .media:hover {  
    border-color: var(--widget);
    background-color: #cdd0d3;
    transform: translatey(-5px);
}

/* Marge interne des éléments du widget dernière publication ------------------------------------------------------------------------------------ */
.list-deposit { 
    padding: 10px 10px;
}

/* Marge externe du texte du widget dernière publication ------------------------------------------------------------------------------------ */
.media-body { 
    margin-left: 10px;
}


/* --------------------------------------------- Widget avec Graphique --------------------------------------------- */

rect { /* Pas de fond blanc sur les graphiques pour des raisons de responsive */
    fill: transparent;
}

/* ================================ Mots-clés (Widget) ================================ */

/* Marge interne du widget Mots clés ------------------------------------------------------------------------------ */
.widget-cloud { 
    padding: 20px;
}

/* Style des mots clés du widget Mots clés ------------------------------------------------------------------------------ */
.widget-cloud .keyword { 
    background-color: var(--bouton);
    color: #fff;
    padding: 4px 12px;
    font-size: 16px;
    border-radius: 0px 7px 0px 7px;
    display: inline-block;
    margin-top: 5px;
    padding-bottom : 0px;
    transition: var(--transition);
}

/* Fond du mots clés widget Mots clés Hover (au passage du curseur) -------------------------------------- */
.widget-cloud .keyword:hover { 
    background-color: var(--hover);
}

/* Widget Actu Liens cliquable ) -------------------------------------- */
.widget-feeds .link span, .widget-feeds .link .btn-link span[class^="icon-"] {
color: var(--texte-url);
}

/* ========================== Widget -> Block Collection ========================== */

/* Style du contenu des widgets dans la page Collection  ------------------------------------------------------------------------------------ */
.block-widget-collection {
    display: grid;
    grid-template-columns: auto auto auto auto;
    justify-items: center;
    margin: 25px auto 25px auto;
    padding: 25px 0 0px 0;
    border: 1px solid #c8cad0;
    box-shadow: 0 3px 4px #00000029;
    border-radius: 3px;
    background-color: #f7f7f7;
    width: 75%;
}
.block-widget-collection-rrr {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-items: center;
    margin: 25px auto -25px auto;
    padding: 25px 0 0px 0;
    border: 1px solid #c8cad0;
    box-shadow: 0 3px 4px #00000029;
    border-radius: 3px;
    background-color: #f7f7f7;
    width: 75%;
}

/* Style des liens btn des collections  ------------------------------------------------------------------------------------ */
.btn-coll {
    padding: 6px 6px 4px 6px;
    transition: var(--transition);
    background-color: transparent;
    border-radius: 0px 7px 0px 7px;
}
.btn-coll:hover {
    background-color: var(--label);
    color: white;
    border-radius: 0px 7px 0px 7px;
}

/*=================================================================================*/
/*========================= CONTENUS MODIFIABLE (Mode avancé) =====================*/
/*================================================================================*/

/* ============================== INTEGRATION VIDEO ==============================  */ 

/* Redimensionnement de l'intégration vidéo et ajout du responsive  ------------------------------------------------------------------------------------ */ 

.embedresize {
   margin-bottom:15px;
}

.embedresize div {
   position: relative;
   height: 0;
   padding-bottom: 56.25%;
}
.embedresize iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   color: transparent;
}

/* ============================ TAG ============================ */

/* Disposition des tags et bouton Collections/Mots Clés/Exporter dans un page de recap des notice --------------------------------------------- */
.hal-bgtext, a.hal-bgtext {
line-height: 2.5rem!important;
display: inline-block!important;
padding: 0px 12px;
margin-top: 5px;
}


/* ============================ Bouton ============================ */

/* Bouton +Déposer aux couleurs de l'Inria --------------------------------------------- */
.btn-primary-orange { 
    background: var(--bouton);
    border: 1px solid var(--bouton);
}

/* Bouton +Déposer aux couleurs de l'Inria --------------------------------------------- */
.btn-primary-orange:hover { 
    background-color: var(--hover);
}

/* ============================ Zone & Barre de Recherche ============================ */

/* Correction d'un décalage de la barre de recherche à droite --------------------------------------------- */
#searchHeaderList { 
    margin: auto !important;
}

/* Correction d'un bug permettant un défilement vertical non nécessaire --------------------------------------------- */
#ssheader-submit {  
    margin-left: 0!important;
    margin-right: 0;
}

/* Correction d'un bug de positionnement de la loupe dans la barre de recherche et mise en couleur (harmonisation) --------------------------------------------- */
.hal-main-search-button { 
    padding: 0 10px;
    color: var(--widget);
}

/* Mise en couleur de la ligne au clic dans la zone de recherche (harmonisation) (harmonisation) --------------------------------------------- */
.hal-main-search-input { 
    background-image: linear-gradient(0deg,var(--bouton-menu) 50%,#0000 0);
    color: var(--texte);
    border-radius:25px;
}

/* Plus grande taille du menu déroulant dans la zone de recherche avancée --------------------------------------------- */
.dropdown-menu.show { 
    max-height: 485px !important;
}

/* Correction de la hauteur des zones de recherches avancées ------------------------------------------------------------------------------------------------------------------------------------------------------ */
div.form-group.row input.input-flex, .input-group > .custom-file, .input-group > .custom-select, .input-group > .form-control, .input-group > .form-control-plaintext { 
    height: 35px;
}

/* Correction de la taille des boutons dans recherche avancée  ----------------------------------------------------------------------------------------------------------------------------------------- */
.input-group span.input-group-btn { 
    width: 87px;
}

/* Correction de la marge des boutons dans recherche avancée ----------------------------------------------------------------------------------------------------------------------------------------- */
div.form-group.row .btn-group-sm > .btn-primary.btn, div.form-group.row .btn-primary.btn-sm {
    margin: auto;
}

/* Correction d'un bug sur le Hover (au passage de la souris) des boutons dans recherche avancée ---------------------------------------------------------------------------------------------------- */
.input-group span.input-group-btn button:hover { 
    background-color: transparent; 
}

 /* Harmonisation des couleurs sur le active des boutons dans recherche avancée --------------------------------------------------------------------------------------------------------------------- */
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
    background-color: var(--hover);
    border-color: var(--hover);
}

/* Uniformisation des couleurs et animations des boutons dans recherche avancée   ------------------------------------------------------------------------------------------------------------------------- */
div.form-group.row span.input-group-btn { 
    background-color: var(--bouton);
    transition: var(--transition)
}

/* Couleur du Bouton Ajouter dans zone de recherche hover (au passage de la souris) ---------------------------------------------------------------------------------------------------------- */
div.form-group.row span.input-group-btn:hover { 
    background-color: var(--hover);
}

/* Couleur du Bouton Lancer la recherche dans zone de recherche avancée ---------------------------------------------------------------------------------------------------------- */
.hal-visualize-button { 
    background-color: var(--bouton);
}

/* Couleur du Bouton Lancer la recherche dans zone de recherche hover (au passage de la souris) ---------------------------------------------------------------------------------------------------------- */
.hal-visualize-button:hover {
    background-color: var(--hover);
}
/* Texte Noir en Hover (au passage de la souris) sur les menus déroulant ---------------------------------------------------------------------------------------------------------- */
ul.dropdown-menu li:not(.not-white):hover a {
    color: #000 !important;
}
/* Meilleurs Ombrage de la barre du CCSD ---------------------------------------------------------------------------------------------------------- */
.sub-header {
    box-shadow: 0 4px 3px #00000029;
}

/* Ajouts d'effet de Transition dans sur les zone dans la page Resultat  ---------------------------------------------------------------------------------------------------------- */
.table-white tr {
    transition: var(--transition);
}

/* ======================================================================================= */
/* ====================================== MENU ========================================== */
/* ===================================================================================== */

/* ============================ Zone du menu ============================ */

/* Style de la zone du menu principal ----------------------------------------------------------------------- */
.website-navigation {
    background: var(--menu);
    min-height: 50px;
    padding-bottom: 0px;
    padding-top: 0px;
    box-shadow: 0 12px 24px 0 rgba(56, 66, 87, 0.31);
}

/* Taille des éléments du menu principal ----------------------------------------------------------------------- */
.nav-pills .nav-link { 
    border-radius: 0px;
    padding-top: 10px !important;
}

/* Couleur des boutons du menu principal ----------------------------------------------------------------------- */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link{
    background-color: var(--bouton-menu);
    color: #fff;
}

/* Couleur des boutons du menu principal en Hover (au passage de la souris) ----------------------------------------------------------------------- */
.website-navigation .nav-pills .nav-link:hover, .website-navigation .nav-pills .show > .nav-link { 
    background: var(--hover-menu);
    color:#fff
}

{ /* Transition (survol du curseur) sur le menu --------------------------------------------------------------------------------------- */
.website-navigation .nav-pills .nav-link 
    transition: var(--transition);
}

/* ============================ Menu déroulant (principal) ============================ */

/* Effet de Transition des menu  --------------------------------------------------------------------------------------- */
.list-group-item {
transition: var(--transition);
}

/* Style du menu déroulant (principal)  --------------------------------------------------------------------------------------- */
.website-navigation .nav-pills .dropdown-menu {
    background: var( --hover-menu2);
    border: 0px;
    border-radius:0px;
    margin: 0px -41px;
    padding: 0px 0px;
}
/* Style du sous-menu déroulant (principal)  --------------------------------------------------------------------------------------- */
.website-navigation .dropdown-menu .dropdown-submenu > .dropdown-menu {
margin-top: 0px;
}
/* Couleur du texte dans le menu déroulant (principal) & transition ----------------------------------------------------------------------- */
.website-navigation .dropdown-menu a { 
    color: #fff;
}

/* Couleur dans le menu déroulant (principal) hover  (au passage de la souris) ----------------------------------------------------------------------- */
.website-navigation .dropdown-menu li.nav-item:hover a { 
    color: #fff!important;
}

/* Couleur du fond dans le menu déroulant (principal) hover  (au passage de la souris) ----------------------------------------------------------------------- */
.dropdown-item:focus, .dropdown-item:hover {
    background-color: var(--hover-menu);
    color: #fff;
}

/* Correction bug du couleur sur les boutons du menu déroulant (principal) hover (au passage de la souris)   -------------------------------------------------------- */
ul.dropdown-menu li:not(.not-white):hover {
background-color: var(--hover-menu) !important;
}


/*==================================================================================*/
/*===================================== GENERALE =====================================*/
/*=================================================================================*/

/* Hauteur du la page par rapport au menu principal ----------------------------------------------------------------------- */
main {
    padding-top: 4rem;
}

/* Correction d'un effet survol inutile dans le menu administrer dans HAL de la barre du CSSD -------------------------------------------------- */
.btn-icon:hover {
    background-color: unset !important;
}

/* Ajout d'un Display inline-block au label pour éviter de les coupés sur 2 lignes  -------------------------------------------------- */
.label.label-primary, .label.label-success, .label.label-warning, .label.label-danger, .label.label-info, .label.label-arxiv, .label.label-default {
display: inline-block;
}

/*=====================================================================================*/
/*===================================== PAGE DEPOT =====================================*/
/*====================================================================================*/

/* Style sur le sous menus dans Fichier / Métadonnées / Validation ----------------------------------------------------------------------- */
#list-item-deposit li.child-item {
    margin-top: 15px;
    transition: var(--transition);
    font-family: noto sans;
}
/* Transition sur  Fichier / Métadonnées / Validation ----------------------------------------------------------------------- */
#list-item-deposit li.main-item:not(first-child) {
    transition: var(--transition);
}
/* Couleur du texte au passage de la souris sur et dans  Fichier / Métadonnées / Validation ----------------------------------------------------------------------- */
#list-item-deposit li:hover a {
color: #fff;
}

/* Background sur les btns à gauche Fichier / Métadonnées / Validation ----------------------------------------------------------------------- */
#list-item-deposit li:hover {
    background-color: var(--hover-menu);
}

/*Effet de transition sur les boutons de la page Dépôt "Je selectionne un type de document " ----------------------------------------------------------------------- */
#modal-typdoc .modal-dialog .typdoc-btn-group {
    transition: var(--transition);
}
/*Effet de transition sur le boutton Récup Métadonnées ----------------------------------------------------------------------- */
.hal-option-button, .hal-privilege-button {
    transition: var(--transition);
}
/*Effet de transition sur les btn exporter dans page vérification ----------------------------------------------------------------------- */
.hal-bgtext, a.hal-bgtext {
    transition: var(--transition);
}

/*Effet de transition sur les btns des block des pages Ressource et En-Tête  ----------------------------------------------------------------------- */
.table-hover tbody tr {
    transition:var(--transition);
}   
.edit-navigation .ui-sortable li > div, #list_typdoc li > table {
    transition:var(--transition);
}

/* ============================================================================================================ */
/* ===========================================  TUTO PAGE CVHAL ================================================ */
/* =========================================================================================================== */

/* Style du Titre h2 ( Visible sur la page Installation et Tuto CVHAL ) ------------------------------------------------------------------------------------ */
.titre-h2-cvhal {
    font-size: 22px;
    margin: 20px 30px;
    padding-top: 5px;
    box-shadow: 3px 3px 5px 0px #0000003b;
    background: var(--bouton-menu);
    color: #fff;
    width: 30%;
    min-width: 200px;
    text-align: center;
}
/*  --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* Style et forme des zones de changement de couleur banniere et widgets  ---------------------------------------------------------------------------------------------- */
.ligne-dl, .ligne-dl-gb, .ligne-dl-m, .ligne-dl-r, .ligne-dl-b, .ligne-dl-rh, .ligne-dl-bh, .ligne-dl-fff, .ligne-dl-000 {
    background: #2f3533;
    color: #ff9d34;
    padding: 20px 0px 15px 35px;
    font-size: 19px;
    border-radius: 15px;
    box-shadow: 0 3px 4px #00000029;
}

/* Couleur du texte des zones de changement de couleur banniere et widgets  ---------------------------------------------------------------------------- */
.ligne-dl-gb, .ligne-dl-m, .ligne-dl-r, .ligne-dl-b, .ligne-dl-rh, .ligne-dl-bh, .ligne-dl-fff, .ligne-dl-000 {color: #fff;}

/* Couleur de fond des zones de changement de couleur widgets ---------------------------------------------------------------------------- */
.ligne-dl-gb {background: #272f3d;}
.ligne-dl-m {background: #6561a8;}
.ligne-dl-r {background: #e53212;}
.ligne-dl-rh {background: #b9251a;}
.ligne-dl-b {background: #1587c9;}
.ligne-dl-bh {background: #0f6597;}
.ligne-dl-fff {background: #000;color: #fff:} 
.ligne-dl-000 {background: #fff;color: #000;}


/* Style du block des boutons de telechargement ---------------------------------------------------------------------------------------------- */
.block-widget-telechargement {
    display: inline-flex;
    flex-direction: column;
}

/* Icone des boutons de telechargement ---------------------------------------------------------------------------------------------- */
.icon-telechargement {
    display: inline-block;
    width: 1.067rem;
    height: 1.333rem;
    background: no-repeat url("../public/picto_telechargement.svg") transparent top left / 100% 100%;
}

/* Style du texte des boutons de telechargement ---------------------------------------------------------------------------------------------- */
.telechargement a {
    font-size: 14px;
    color: var(--texte);
    margin-left: 15px;
    font-weight: 700;
    font-family: Noto Sans,sans-serif;
}

/* Style des boutons de telechargement ---------------------------------------------------------------------------------------------- */
.telechargement {
    padding: 14px 20px;
    border: 2px solid #c8cad0;
    border-radius: 25px;
    margin: 1em auto;
    background: #f7f7f7;
    display: inline-block;
    margin-bottom: 1em;
    min-width: 350px;
}

/* Style du textes dans les blocks widgets du tuto CVHAL ---------------------------------------------------------------------------------------------- */
.paragraphes-dl {
    font-size: 16px;
    color: var(--texte);
    padding: 20px 10px 0px 10px;
}

/* ========================================================================================== */
/* =================================== Menu Accordeon  CVHAL ================================== */
/* ========================================================================================== */

/* ============================== FORME DE L'ACCORDEON ============================== */

.block-accordeon::before {
    content: "";
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, rgba(2,0,36,0) 0%, #272f3d 50%, rgba(255,255,255,0) 100%);
    display: block;
    margin-bottom: 30px;
}

/*Checkbox [+] du menu Accordeon ------------------------------------------------------------------------------------------------------------------------ */
.accordeon [type="checkbox"]:checked + label::before, .accordeon [type="checkbox"]:not(:checked) + label::before {
    background-color: var(--menu);
    border: unset;
    color: #fff;
    content: "+";
    font-weight: 700;
    margin-right: 10px;
    font-size: 24px;
    position: unset;
    transition: unset;
    box-shadow: unset;
    height: 25px;
    width: 25px;
    padding: 1px 0px 0px 0px;
    border-radius: 3px;
    text-align: center;
    transition: var(--transition);
}
.accordeon [type="checkbox"]:checked + label:hover::before, .accordeon [type="checkbox"]:not(:checked) + label:hover::before {
    background-color: var(--hover-menu);
}
/*Checkbox [-] du menu Accordeon ------------------------------------------------------------------------------------------------------------------------ */
.accordeon [type="checkbox"]:checked + label::after, .accordeon [type="checkbox"]:not(:checked) + label::after {
    color: #fff;
    content: "-";
    left: 33px;
    line-height: unset;
    position: absolute;
    top: unset;
    transition: unset;
    background-color: var(--bouton-menu);
    font-size: 24px;
    font-weight: 700;
    height: 25px;
    width: 25px;
    padding: 1px 0px 0px 7px;
    border-radius: 3px;
    transition: var(--transition);
}
.accordeon [type="checkbox"]:checked + label:hover::after, .accordeon [type="checkbox"]:not(:checked) + label:hover::after {
    background-color: var(--hover-menu);
}

/* Marger Exterieur de l'accordeon -------------------------------------------------------------------------------------------------- */
.accordeon {
    padding-right: 5vw;
    padding-left: 5vw;
}

/* Style de l'accordeon -------------------------------------------------------------------------------------------------- */
.accordeon li {
    list-style: none;
    width: 100%;
    margin: 20px;
    padding: 10px 0px 17px 0px;
    border: 1px solid #c8cad0;
    box-shadow: 0 3px 4px #00000029;
    border-radius: 3px;
    background-color: #f7f7f7;
}

/* Style de la zone clickable de l'accordeon -------------------------------------------------------------------------------------------------- */
.accordeon li label{
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Style l'accordeon fermer -------------------------------------------------------------------------------------------------- */
.accordeon .content-accordeon {
    padding: 0 10px;
    line-height: 26px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s, padding 0.5s;
}

/* Style l'accordeon ouvert pour la fonction checked -------------------------------------------------------------------------------------------------- */
.accordeon input[type="checkbox"]:checked + label + .content-accordeon {
    max-height: 2000px;
    padding: 10px 10px 20px;
}

/* ============================== CONTENU DE L'ACCORDEON ============================== */

/* Couleur du bandeau Titre des couleurs ---------------------------------------------------------------------------- */
.bandeau-titre-couleur {
    padding: 7px 16px 0px 16px;
    color: #ffffff;
    width: 20%;
    text-align: center;
    margin-left: 1vw;
    min-width: 250px;
}

/* Style du block Accordeon ---------------------------------------------------------------------------- */
.block-accordeon {
    display: flex;
    flex-wrap: wrap;
}

/* Style des elements dans l'accordeon ---------------------------------------------------------------------------- */
.block-couleur-titre, .block-hex {
   background-color: #dfdfdf;
   border: 1px solid #999b9f;
   color: #000;
   box-shadow: 0 3px 4px #00000029;
   margin: 5px auto 5px auto;
   border-radius: 3px;
   transition: var(--transition);
}
/* Style des elements dans l'accordeon au suvol du curseur ---------------------------------------------------------------------------- */
.block-hex:hover {
   filter: brightness(130%);
}

/* Style des elements dans l'accordeon ---------------------------------------------------------------------------- */
.paragraphes-couleur {
    padding: 15px 10px 8px;
    margin: 0px;
    font-size: 16px;
    font-weight: bold;
    text-align:center;
}

/* Couleur du texte Largeur des elements dans l'accordeon, element de Gauche ---------------------------------------------------------------------------- */
.block-couleur-titre {
    flex: 0 0 25%;
    color: #fff;
    height: 100%;
}
/* Largeur des elements dans l'accordeon, element de Droite ---------------------------------------------------------------------------- */
.block-hex {
    flex: 0 0 70%;
}

/* ============================== BOX DE COULEUR A GAUCHE ============================== */

.titre-rouge, .titre-orange, .titre-lilas, .titre-bleu, .titre-vert, .titre-jaune, .titre-mauve, .titre-bleu-clair, .titre-vert-clair, .titre-couleur { padding-top: 5px; border-radius: 3px 5px 3px 15px; box-shadow: 3px 3px 5px 0px #0000003b; }
.titre-rouge {background-color: #e63312;}
.titre-orange {background-color: #ef7d25;}
.titre-lilas {background-color: #9c1053;}
.titre-bleu {background-color: #1587c9;}
.titre-vert {background-color: #95c11f;}
.titre-jaune {background-color: #ffcd1c; color:#000;}
.titre-mauve {background-color: #6561a8;}
.titre-bleu-clair {background-color: #88ccc8; color:#000;}
.titre-vert-clair {background-color: #c6d54f; color:#000;}
.titre-couleur {background-color: #384157;}

/* Rouge ---------------------------------------------------------------------------- */

.rouge {background: #e63312;}
.rouge-hov {background: #b9251a;}
.rouge-deg {background: linear-gradient(90deg, rgb(230, 51, 18) 0%, rgb(123, 27, 10) 100%);}
.rouge-orange {background: linear-gradient(90deg, rgba(230,51,18,1) 0%, rgba(239,125,37,1) 100%);}
.rouge-lilas {background: linear-gradient(90deg, rgba(230,51,18,1) 0%, rgba(156,16,83,1) 100%);}
.rouge-bleu {background: linear-gradient(90deg, rgba(230,51,18,1) 0%, rgba(21,135,201,1) 100%);}
.rouge-vert {background: linear-gradient(90deg, rgba(230,51,18,1) 0%, rgba(149,193,31,1) 100%);}
.rouge-jaune {background: linear-gradient(90deg, rgba(230,51,18,1) 0%, rgba(255,205,28,1) 100%);}
.rouge-mauve {background: linear-gradient(90deg, rgba(230,51,18,1) 0%, rgba(101,97,168,1) 100%);}
.rouge-bleu-clair {background: linear-gradient(90deg, rgba(230,51,18,1) 0%, rgba(136,204,200,1) 100%);}
.rouge-vert-clair {background: linear-gradient(90deg, rgba(230,51,18,1) 0%, rgba(198,213,79,1) 100%);}

/* Orange ---------------------------------------------------------------------------- */

.orange {background: #ef7d25;}
.orange-hov {background: #ca6a1f;}
.orange-deg {background: linear-gradient(90deg, rgb(239, 125, 37) 0%, rgb(142, 74, 22) 100%);}
.orange-rouge {background: linear-gradient(90deg, rgba(239,125,37,1) 0%, rgba(230,51,18,1) 100%);}
.orange-lilas {background: linear-gradient(90deg, rgba(239,125,37,1) 0%, rgba(156,16,83,1) 100%);}
.orange-bleu {background: linear-gradient(90deg, rgba(239,125,37,1) 0%, rgba(21,135,201,1) 100%);}
.orange-vert {background: linear-gradient(90deg, rgba(239,125,37,1) 0%, rgba(149,193,31,1) 100%);}
.orange-jaune {background: linear-gradient(90deg, rgba(239,125,37,1) 0%, rgba(255,205,28,1) 100%);}
.orange-mauve {background: linear-gradient(90deg, rgba(239,125,37,1) 0%, rgba(101,97,168,1) 100%);}
.orange-bleu-clair {background: linear-gradient(90deg, rgba(239,125,37,1) 0%, rgba(136,204,200,1) 100%);}
.orange-vert-clair {background: linear-gradient(90deg, rgba(239,125,37,1) 0%, rgba(198,213,79,1) 100%);}

/* Lilas ---------------------------------------------------------------------------- */

.lilas {background: #9c1053;}
.lilas-hov {background: #6f0b3b;}
.lilas-deg {background: linear-gradient(90deg, rgb(156, 16, 83) 0%, rgb(91, 9, 49) 100%);}
.lilas-rouge {background: linear-gradient(90deg, rgba(156,16,83,1) 0%, rgba(230,51,18,1) 100%);}
.lilas-orange {background: linear-gradient(90deg, rgba(156,16,83,1) 0%, rgba(239,125,37,1) 100%);}
.lilas-bleu {background: linear-gradient(90deg, rgba(156,16,83,1) 0%, rgba(21,135,201,1) 100%);}
.lilas-vert {background: linear-gradient(90deg, rgba(156,16,83,1) 0%, rgba(149,193,31,1) 100%);}
.lilas-jaune {background: linear-gradient(90deg, rgba(156,16,83,1) 0%, rgba(255,205,28,1) 100%);}
.lilas-mauve {background: linear-gradient(90deg, rgba(156,16,83,1) 0%, rgba(101,97,168,1) 100%);}
.lilas-bleu-clair {background: linear-gradient(90deg, rgba(156,16,83,1) 0%, rgba(136,204,200,1) 100%);}
.lilas-vert-clair {background: linear-gradient(90deg, rgba(156,16,83,1) 0%, rgba(198,213,79,1) 100%);}

/* Bleu ---------------------------------------------------------------------------- */

.bleu {background: #1587c9;}
.bleu-hov {background: #0f6597;}
.bleu-deg {background: linear-gradient(90deg, rgb(21, 135, 201) 0%, rgb(13, 81, 121) 100%);}
.bleu-rouge {background: linear-gradient(90deg, rgba(21,135,201,1) 0%, rgba(230,51,18,1) 100%);}
.bleu-orange {background: linear-gradient(90deg, rgba(21,135,201,1) 0%, rgba(239,125,37,1) 100%);}
.bleu-lilas {background: linear-gradient(90deg, rgba(21,135,201,1) 0%, rgba(156,16,83,1) 100%);}
.bleu-vert {background: linear-gradient(90deg, rgba(21,135,201,1) 0%, rgba(149,193,31,1) 100%);}
.bleu-jaune {background: linear-gradient(90deg, rgba(21,135,201,1) 0%, rgba(255,205,28,1) 100%);}
.bleu-mauve {background: linear-gradient(90deg, rgba(21,135,201,1) 0%, rgba(101,97,168,1) 100%);}
.bleu-bleu-clair {background: linear-gradient(90deg, rgba(21,135,201,1) 0%, rgba(136,204,200,1) 100%);}
.bleu-vert-clair {background: linear-gradient(90deg, rgba(21,135,201,1) 0%, rgba(198,213,79,1) 100%);}

/* Vert ---------------------------------------------------------------------------- */

.vert {background: #95c11f;}
.vert-hov {background: #6c8c16;}
.vert-deg {background: linear-gradient(90deg, rgb(149, 193, 31) 0%, rgb(97, 125, 20) 100%);}
.vert-rouge {background: linear-gradient(90deg, rgba(149,193,31,1) 0%, rgba(230,51,18,1) 100%);}
.vert-orange {background: linear-gradient(90deg, rgba(149,193,31,1) 0%, rgba(239,125,37,1) 100%);}
.vert-lilas {background: linear-gradient(90deg, rgba(149,193,31,1) 0%, rgba(156,16,83,1) 100%);}
.vert-bleu {background: linear-gradient(90deg, rgba(149,193,31,1) 0%, rgba(21,135,201,1) 100%);}
.vert-jaune {background: linear-gradient(90deg, rgba(149,193,31,1) 0%, rgba(255,205,28,1) 100%);}
.vert-mauve {background: linear-gradient(90deg, rgba(149,193,31,1) 0%, rgba(101,97,168,1) 100%);}
.vert-bleu-clair {background: linear-gradient(90deg, rgba(149,193,31,1) 0%, rgba(136,204,200,1) 100%);}
.vert-vert-clair {background: linear-gradient(90deg, rgba(149,193,31,1) 0%, rgba(198,213,79,1) 100%);}

/* Jaune ---------------------------------------------------------------------------- */

.jaune {background: #ffcd1c; color:#000;}
.jaune-hov {background: #caa216; color:#000;}
.jaune-deg {background: linear-gradient(90deg, rgb(255, 205, 28) 0%, rgb(142, 114, 16) 100%); color:#000;}
.jaune-rouge {background: linear-gradient(90deg, rgba(255,205,28,1) 0%, rgba(230,51,18,1) 100%); color:#000;}
.jaune-orange {background: linear-gradient(90deg, rgba(255,205,28,1) 0%, rgba(239,125,37,1) 100%); color:#000;}
.jaune-lilas {background: linear-gradient(90deg, rgba(255,205,28,1) 0%, rgba(156,16,83,1) 100%); color:#000;}
.jaune-bleu {background: linear-gradient(90deg, rgba(255,205,28,1) 0%, rgba(21,135,201,1) 100%); color:#000;}
.jaune-vert {background: linear-gradient(90deg, rgba(255,205,28,1) 0%, rgba(149,193,31,1) 100%); color:#000;}
.jaune-mauve {background: linear-gradient(90deg, rgba(255,205,28,1) 0%, rgba(101,97,168,1) 100%); color:#000;}
.jaune-bleu-clair {background: linear-gradient(90deg, rgba(255,205,28,1) 0%, rgba(136,204,200,1) 100%); color:#000;}
.jaune-vert-clair {background: linear-gradient(90deg, rgba(255,205,28,1) 0%, rgba(198,213,79,1) 100%); color:#000;}

/* Mauve ---------------------------------------------------------------------------- */

.mauve {background: #6561a8;}
.mauve-hov {background: #454373;}
.mauve-deg {background: linear-gradient(90deg, rgb(101, 97, 168) 0%, rgb(58, 55, 96) 100%);}
.mauve-rouge {background: linear-gradient(90deg, rgba(101,97,168,1) 0%, rgba(230,51,18,1) 100%);}
.mauve-orange {background: linear-gradient(90deg, rgba(101,97,168,1) 0%, rgba(239,125,37,1) 100%);}
.mauve-lilas {background: linear-gradient(90deg, rgba(101,97,168,1) 0%, rgba(156,16,83,1) 100%);}
.mauve-bleu {background: linear-gradient(90deg, rgba(101,97,168,1) 0%, rgba(21,135,201,1) 100%);}
.mauve-vert {background: linear-gradient(90deg, rgba(101,97,168,1) 0%, rgba(149,193,31,1) 100%);}
.mauve-jaune {background: linear-gradient(90deg, rgba(101,97,168,1) 0%, rgba(255,205,28,1) 100%);}
.mauve-bleu-clair {background: linear-gradient(90deg, rgba(101,97,168,1) 0%, rgba(136,204,200,1) 100%);}
.mauve-vert-clair {background: linear-gradient(90deg, rgba(101,97,168,1) 0%, rgba(198,213,79,1) 100%);}

/*Bleu-Clair ---------------------------------------------------------------------------- */

.bleu-clair {background: #88ccc8; color:#000;}
.bleu-clair-hov {background: #6da4a0; color:#000;}
.bleu-clair-deg {background: linear-gradient(90deg, rgb(136, 204, 200) 0%, rgb(71, 106, 104) 100%); color:#000;}
.bleu-clair-rouge {background: linear-gradient(90deg, rgba(136,204,200,1) 0%, rgba(230,51,18,1) 100%); color:#000;}
.bleu-clair-orange {background: linear-gradient(90deg, rgba(136,204,200,1) 0%, rgba(239,125,37,1) 100%); color:#000;}
.bleu-clair-lilas {background: linear-gradient(90deg, rgba(136,204,200,1) 0%, rgba(156,16,83,1) 100%); color:#000;}
.bleu-clair-bleu {background: linear-gradient(90deg, rgba(136,204,200,1) 0%, rgba(21,135,201,1) 100%); color:#000;}
.bleu-clair-vert {background: linear-gradient(90deg, rgba(136,204,200,1) 0%, rgba(149,193,31,1) 100%); color:#000;}
.bleu-clair-jaune {background: linear-gradient(90deg, rgba(136,204,200,1) 0%, rgba(255,205,28,1) 100%); color:#000;}
.bleu-clair-mauve {background: linear-gradient(90deg, rgba(136,204,200,1) 0%, rgba(101,97,168,1) 100%); color:#000;}
.bleu-clair-vert-clair {background: linear-gradient(90deg, rgba(136,204,200,1) 0%, rgba(198,213,79,1) 100%); color:#000;}

/*Vert-Clair ---------------------------------------------------------------------------- */

.vert-clair {background: #c6d54f; color:#000;}
.vert-clair-hov {background: #a2ae41; color:#000;}
.vert-clair-deg {background: linear-gradient(90deg, rgb(198, 213, 79) 0%, rgb(136, 147, 55) 100%); color:#000;}
.vert-clair-rouge {background: linear-gradient(90deg, rgba(198,213,79,1) 0%, rgba(230,51,18,1) 100%); color:#000;}
.vert-clair-orange {background: linear-gradient(90deg, rgba(198,213,79,1) 0%, rgba(239,125,37,1) 100%); color:#000;}
.vert-clair-lilas {background: linear-gradient(90deg, rgba(198,213,79,1) 0%, rgba(156,16,83,1) 100%); color:#000;}
.vert-clair-bleu {background: linear-gradient(90deg, rgba(198,213,79,1) 0%, rgba(21,135,201,1) 100%); color:#000;}
.vert-clair-vert {background: linear-gradient(90deg, rgba(198,213,79,1) 0%, rgba(149,193,31,1) 100%); color:#000;}
.vert-clair-jaune {background: linear-gradient(90deg, rgba(198,213,79,1) 0%, rgba(255,205,28,1) 100%); color:#000;}
.vert-clair-mauve {background: linear-gradient(90deg, rgba(198,213,79,1) 0%, rgba(101,97,168,1) 100%); color:#000;}
.vert-clair-bleu-clair {background: linear-gradient(90deg, rgba(198,213,79,1) 0%, rgba(136,204,200,1) 100%); color:#000;}

/*==================================================================================*/
/*===================================== FOOTER =====================================*/
/*=================================================================================*/

/* Style et couleur du footer ----------------------------------------------------------------------- */
footer { 
    background-color: #272F3D !important;
    margin-top: 0px;
    padding-top: 50px;
}

/* Style et couleur du texte du footer ----------------------------------------------------------------------- */
footer li a { 
    color: #fff;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size 0.3s;
}

/* Style et couleur du texte du footer hover ----------------------------------------------------------------------- */
footer li a:focus, footer li a:hover { 
    color: #fff;
    background-size: 100% 1px;
    font-weight: 500;
}

 /* Séparateur du footer entre les élements  ----------------------------------------------------------------------- */
div.col-sm-4:nth-child(2), div.col-sm-4:nth-child(3), div.col-sm-4:nth-child(6) {
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    height: 175px;
}
/* Séparateur du footer entre les élements  ----------------------------------------------------------------------- */
div.col-sm-4:nth-child(4){ 
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    height: 175px;
}

/*==================================================================================*/
/*==================================== RESPONSIVE ==================================*/
/*==================================================================================*/

/* Correction du chevauchement du bouton [+déposer dans HAL] avec la barre de rechercher ----------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1200px) { 
#searchHeaderList {
    width: 50%!important;
}
}

@media (min-width: 720px) and (max-width: 1280px)  { 
.block-widget-collection {
    grid-template-columns: auto auto auto;
    background-size: 0px;
}
.h2-titre-collection {
    width: 45%;
}
}

@media (min-width: 480px) and (max-width: 720px)  { 
.block-widget-collection {
    grid-template-columns: auto auto;
    background-size: 0px;
}
.h2-titre-collection {
    width: 65%;
}
}

@media (min-width: 0px) and (max-width: 480px)  { 
.block-widget-collection {
    grid-template-columns: auto;
    background-size: 0px;
}
.h2-titre-collection {
    width: 100%;
}
}

@media (max-width: 1280px) { 
.logo {
    background-image: url('../public/ban_blanc_1280.png');
}
.text-ban {
    font-size: 18px;
}
}

@media (min-width: 1281px) and (max-width: 1920px) { 
.logo {
    background-image: url('../public/ban_blanc_1280_1920.png');
}
}

@media (min-width: 1921px) and (max-width: 2560px) { 
.logo {
    background-image: url('../public/ban_blanc_2560.png');
}
}

@media (min-width: 0px) and (max-width: 450px) { 
.text-ban {
    font-size: 14px;
}
}