@CHARSET "UTF-8";

/* ================================================================= */
/* ============================ @IMPORT ============================ */
/* ================================================================= */

/* --> Ceci permet l'import du footer et l'harmonisation du style global entre les portails Inria/collection <-- */

@import "https://inria.hal.science/public/css_harmonisation.css";

/* ================================================================= */
/* ============================ [VARIABLES] ======================== */
/* ================================================================= */

/* ++ toutes les variables sont et doivent etre declarees ici -> a la racine ++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

:root {

/* +++++++++++++++++++ PALETTE DE COULEUR +++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


    --couleur-arriere-plan: #e5e5e5;  /* --> Fond général de interfaces <-- */
    --couleur-premier-plan : #f7f7f7; /* --> Couleur des widgets <-- */    

/* --> blanc et noir permettant d'éclaircir ou d'assombrir la couleur de base, par exemple au survol de souris : <-- */

    --couleur-mix-blanc: #ffffff; /* --> Couleur blanc utilisee dans le colormix et dans qlq variables <-- */
    --couleur-mix-noir: #000; /* --> Alternative du colormix pour avoir un base de fond sombre <-- */

/* ++++ COULEUR 1 ++++++++++++++++++++++++++++++++++++++++++++ */
/* -- >couleur 1 = couleur de fond des éléments suivants <-- */
/* --> page d'accueil : éléments et sous-éléments du menu, étiquettes de titre des widgets <-- */
/* --> pages de visualisation et liste des résultat : titre des filtres à gauche, type de document, éléments des options (points verticaux), étiquettes des éléments de la notice, "télécharger pour visualiser", langue des résumés et des mots-clés, domaines, mots-clés, formats d'export à gauche et collections à gauche <-- */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

    --couleur-1:#00498d; 
    --couleur-1-survol : color-mix(in srgb, var(--couleur-1) 70%, var(--couleur-mix-blanc));  /* --> Atténue la couleur-1 en y mélangeant 30% de blanc (Mettre le Mix-Noir si base plus sombre <-- */


/* ++++ COULEUR 2 ++++++++++++++++++++++++++++++++++++++++++++ */
/* --> couleur 2 = couleur de fond des éléments suivants <-- */
/* --> page d'accueil : éléments de la recherche avancée, bouton "Déposer", titre de la collection, bouton "Modifier le contenu de la page <-- */
/* --> page résultats de recherche : Nbre de résultats, "enregistrer la recherche", identifiant hal <-- */
/* --> page de visualisation de notice : titre revue, année, versions, "liste complète des métadonnées", boutons d'administration escamotables sur le côté droit <-- */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
 
   --couleur-2: #747b89;
    --couleur-2-survol : color-mix(in srgb, var(--couleur-2) 70%, var(--couleur-mix-blanc));  /* --> Atténue la couleur-2 en y mélangeant 30% de blanc ( (Mettre le Mix-Noir si base plus sombre  <-- */

   --couleur-3: #91c950;
    --couleur-3-survol : color-mix(in srgb, var(--couleur-3) 70%, var(--couleur-mix-blanc));  /* --> Atténue la couleur-3 en y mélangeant 30% de blanc ( (Mettre le Mix-Noir si base plus sombre  <-- */



/* ++++++++++++++++++++ [VARIABLES POUR LES ELEMENTS DES PAGES] ++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ++++ BANNIERE : COULEUR DE FOND ++++ */
    --banniere-background: var(--couleur-arriere-plan); /* --> Banniere <-- */


/* ++++ WIDGET ++++ */
/* ++++++++++++++++ */
    --widget-background: var(--couleur-premier-plan); /* --> Couleur des widgets <-- */
    --widget-border: 1px solid var(--widget-border-color); /* --> Bordure des elements prends en compte le border color si dessous <-- */
    --widget-border-color: color-mix(in srgb, var(--couleur-premier-plan) 80%, var(--couleur-mix-noir)); /* --> Bordure très fine assombrie par du noir à 20% <-- */
    --widget-padding: 5px 20px; /* --> Marge Int Widget : haut et bas 5, droite et gauche 20 -- */


/* ++++ FONT - COULEURS POLICE DE CARACTERES ++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
    --texte-couleur-blanc: #fff; /* --> Texte blanc (Titres et textes des boutons) <-- */
    --texte-couleur: #26282b; /* --> Texte gris-bleu ( couleur du texte foncé ) pour le corps du texte <-- */

    --texte-couleur-action: var(--couleur-1); /* --> Texte des liens <-- */
    --texte-couleur-action-hov: var(--couleur-1-survol);  /* --> Texte des liens au survol <-- */


/* ++++ FONT SIZE - TAILLE POLICE DE CARACTERES ++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++ */
    --font-size-bandeau: 22px;  /* --> Taille de la police du bandeau <-- */
    --font-size-paragraphe: 16px;  /* --> Taille de la police dans la classe paragraphe (corps du texte) <-- */


/* ++++ ETIQUETTES ++++ */
/* ++++++++++++++++++++ */
    --bandeau-background: var(--couleur-1);  /* --> Couleur des etiquettes (fond de couleur, le texte sera blanc) <-- */


/* ++++ BANDEAU ++++ */
/* ++++++++++++++ */
    --bandeau-background: #00498d; /* --> Couleur Bandeau au dessus de la barre de navigation <-- */

/* ++++ MENU ++++ */
/* ++++++++++++++ */
    --menu-background: #d1dbe9; /* --> Couleur Barre de navigation <-- */


/* ++++ BOUTON ++++ */
/* ++++++++++++++++ */
    --bouton-background: var(--couleur-1);  /* --> Fond des boutons de la couleur 1 cf. ci-dessus <-- */
    --bouton-hov-background: var(--couleur-1-survol);  /* -- Fond des boutons au survole  -- */

    --bouton-1-background: var(--couleur-2); /* --> Fond des autres bouton <-- */
    --bouton-1-hov-background: var(--couleur-2-survol);  /* --> Fond des autres bouton au survol <-- */

    --bouton-2-background: var(--couleur-3); /* --> Fond des autres bouton <-- */
    --bouton-2-hov-background: var(--couleur-3-survol);  /* --> Fond des autres bouton au survol <-- */


/* ++++ FOOTER - COULEUR DE FOND ++++ */
/* ++++++++++++++++++++++++++++++++++ */
    --footer-background: #00498d;  /* --> Fond du footer, ici, une couleur en dégradé <-- */
    

/* ++++ ANIMATIONS & EFFETS ++++ */
/* +++++++++++++++++++++++++++++ */
    --transition: .3s cubic-bezier(.25,.8,.5,1);  /* --> Effet de transition au passage de la souris <-- */

    --box-shadow: 0 3px 4px #00000029;  /* --> Ombrages des elements <-- */

    --md-border-radius: 12px; /* --> Border radius moyen : arrondi des blocs <-- */

}

/* ++ Fin de la déclaration des variables a la racine ++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* =================================================================== */
/* ============================ CODE CSS ============================ */
/* ================================================================= */


/* --> uniquement Pour le visualiseur CSS : augmentation de la taille de l'ecran <-- */
#css { min-height: 900px;    min-width: 100%; } /* -- > Meilleur Vue du code CSS  -- */

/* --> les classes suivantes utilisent les couleurs et les variables définies ci-dessus <-- */


/* =========== BODY/HTML Generale =========== */
/* ========================================== */

/* -- Couleur du fond de la page et texte par defaut -- */
/* ---------------------------------------------------- */
body, html {
    background-color: var(--couleur-arriere-plan)!important;
    color: var(--texte-couleur)!important;
}
/* -- Pas de bordure sur l'Iframe -- */
    iframe {
border: 0px!important;
}

/* =========== FONT =========== */
/* ============================ */

/* -- Couleur des liens (URL-HTML) -- */
a {color: var(--texte-couleur-action)};
a:hover {color: var(--texte-couleur-action-hov);}


/* -- Couleur commun des h* (tailles du texte) -- */
/* ---------------------------------------------- */
h1, h2, h3, h4 {
    color: var(--texte-couleur);
}

/* ======================================================== */
/* =========== Page Principale (Header et Menu) =========== */
/* ======================================================== */

/* ====== Barre du CCSD ====== */
/* ========================= */

/* -- Fond de la barre -- */
/* ----------------------------- */
.sub-header, nav.navbar.header  {
    background-color: var(--bandeau-background) !important;
}

/* -- Pas de bouton deposer -- */
/* --------------------------------------- */
#ssheader-submit {
    display: none;
}

/* -- Pas de box shadow sous la barre -- */
/* ----------------------------------------------------- */
.sub-header {
    box-shadow:unset;
}

/* -- Bouton -> Collection/Nom du portail-- */
/* --------------------------------------------------------- */

.color-major-color a {
    background-color: var(--bouton-2-background);
}
.color-major-color > a:nth-child(1) {
    text-shadow: 0px 1px 4px black;
}

/* -- Couleur du trait sous la barre de recherche generale -- */
/* --------------------------------------------------------------------------------- */
.hal-main-search-input {
    background-image: linear-gradient(0deg,var(--couleur-3) 50%,#0000 0) !important;
}

/* -- Style de bouton Adminster dans HAL --*/
/* ---------------------------------------------------------- */
.nav.navbar-nav.ml-auto li button:not(.list-group-item) {
    border-radius: 12px;
}

/* ====== Bannière ====== */
/* ====================== */

/* -- Comportement/Style de la bannière -- */
/* --------------------------------------- */
.logo {
    background-image: url('../public/ifip_logo.png');  /*--> image est dans les ressources <-- */
    background-color: var(--bandeau-background);
    background-size: initial;
    background-position-y: center;
    background-position-x: 50px;
    background-repeat: no-repeat;
    height: 110px;
    display: flex; /* --> ajustement du texte <-- */
    justify-content: center; /* --> ajustement du texte <-- */
    align-items: center; /* --> ajustement du texte <-- */
}

/* -- Texte et cadre de la banniere -- */
/* ----------------------------------- */

/* --> utiliser "text-ban" dans "Classe(s) Css" dans l'entête <-- */

.text-ban {
    display: block;
    width: clamp(40vw, 50vw, 60vw);
    font-size: clamp(1rem, 1vw, 2rem);
    color: var(--texte-couleur-blanc);
}

/* ============================================ */
/* ====== Zone du menu (bandeau général) ====== */
/* ============================================ */

/* -- Style de la barre de navigation -- */
/* ------------------------------------- */
.website-navigation {
    background-color: var(--menu-background);
    box-shadow: 0 20px 12px -17px rgba(56,66,87,0.31); /* --> ombre <-- */
    padding: 0; /* --> marge interne <-- */
    min-height: 41px;
}

/* ====== Zone du menu (Boutons) ====== */
/* ==================================== */

/* -- Marge Externe entre les boutons -- */
/* ------------------------------------- */
.website-navigation .nav-pills .nav-link {
    margin: 2px 2px; /*(haut/bas et droite/gauche)*/
    border-radius: 3px;
}

/* -- Marge interne les boutons -- */
/* ------------------------------- */
.website-navigation a { 
    padding: 2px 20px !important; /* --> (haut/bas et droite/gauche) <-- */
}

/* -- Style des boutons (fond et couleur du texte ) + passage de la souris -- */
/* -------------------------------------------------------------------------- */

/* --> element de menu qui est activé (ex: Accueil si on est sur la page d'accueil) <-- */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--bouton-background);
    color:var(--texte-couleur-blanc) !important;
}

/* -- Style pour les éléments du menu qui ne sont pas activés -- */
/* ------------------------------------------------------------- */
.nav-pills .nav-link {
    color: var(--texte-couleur) !important;
    border-radius: 0px;
}

/* -- style au passage de souris -- */
/* -------------------------------- */
.nav-link.active:hover, .nav-link:hover {
    background: var(--bouton-hov-background);
    color: var(--texte-couleur-blanc) !important;
}

/* ============================================= */
/* ====== Zone du menu (Menus deroulants) ====== */
/* ============================================= */

/* -- Style du menu déroulant (principal) et position du sous menu -- */
/* ------------------------------------------------------------------ */
.website-navigation .nav-pills .dropdown-menu {
    background: var(--menu-background) !important;
    border: unset !important;
    padding: unset !important;
    margin: 0px;
    border-radius: 14px !important;
    top: 6px !important;
    border: 1px solid var(--couleur-1) !important;
}

/* -- Possition du sous menu -- */
/* ---------------------------- */
.website-navigation .dropdown-menu .dropdown-submenu > .dropdown-menu {
    margin-left: 0px;
    margin-top: -6px;
    border-radius: 0px 12px 12px 12px;
}

/* -- Elements dans le menu déroulant (principal) +( au passage de la souris) -- */
/* ============================================================================= */

/* -- éléments du sous-menu -- */
/* --------------------------- */

.dropdown-item:focus, .dropdown-item:hover {
    background: var(--bouton-2-background);
    color: var(--texte-couleur-blanc) !important;
    border-radius: var(--md-border-radius);
}
.website-navigation .dropdown-menu li.nav-item:hover a{
    color: var(--texte-couleur-blanc) !important;
}
.website-navigation .dropdown-menu .dropdown-submenu:hover {
border-radius: 12px;
}


/* -- liste des éléments du sous-menu -- */
/* ------------------------------------- */
ul.dropdown-menu li:not(.not-white):hover, .dropdown-item.active, .dropdown-item:active {
    background-color: transparent;
    font-weight: normal;
}

/* -- texte des liens des élements de la liste des sous-menus -- */
/* ------------------------------------------------------------- */
.website-navigation .dropdown-menu a {

    border-radius: var(--md-border-radius);
    transition: var(--transition);
}

/* -- Marge Interne du sous menu -- */
/* -------------------------------- */
ul.dropdown-menu .dropdown-item {
    padding: 5px 10px;
}


/* =================================================== */
/* =========== Page Principale ( Accueil ) =========== */
/* =================================================== */

/* ============ ( Bandeau d'info / Titre ) =========== */
/* --------------------------------------------------- */

/* -- Bandeau d'infos importantes / Titre -- */
/* ----------------------------------------- */

/* --> La marges ici définies par défaut dans HAL, qui est => 1 rem qui est egale a 16px en pour la marge du bas <-- */
.bandeau {
   background-color: var(--bandeau-background);
   color: var(--texte-couleur-blanc);
   border-radius: var(--md-border-radius);
   box-shadow: var(--box-shadow);
   font-size: var(--font-size-bandeau);
   padding: var(--widget-padding);
   text-align: center;
} 

/* ========== Widgets Natif à HAL ========== */
/* ----------------------------------------- */

/* -- Style de Entête des widgets Natifs -- */
/* ------------------------------------------------------- */

.section-corps .widget .widget-header {
   background: transparent;
   color: var(--texte-couleur);
}

/* -- Style Widgets natifs -- */
/* ---------------------------------- */

.section-corps .widget {
   border: var(--widget-border);
   box-shadow: var(--box-shadow);
   border-radius: var(--md-border-radius);
   background-color: var(--widget-background);
   margin: 10px 0px;
}


/* ====== ( Widget Txt Intégral ) ====== */
/* ------------------------------------- */


/* -- Style -- */
/* ----------- */
.label.label-default.label-contrast {
    color: var(--texte-couleur-blanc);
    font-size: var(--font-size-bandeau);
    padding: 2px 11px 4px 12px;
    background-color: var(--bouton-2-background)!important;
    border-radius: 18px;
}

/* -- Marge Interne -- */
/* ------------------- */
.center-text {
    margin-bottom: 0;
}

/* ====== ( Widget dernière publication ) ====== */
/* --------------------------------------------- */
.list-deposit .media { 
    margin-top: 0px;
    border-radius: var(--md-border-radius);
    transition: var(--transition);
    border-left: 2px solid transparent;
    border-bottom: 0px solid;
    padding: 10px;
    font-size: 14px;
}

/* -- (au passage de la souris) -- */
/* ------------------------------- */
.list-deposit .media:hover {
    border-color: var(--bouton-background);
    background-color: #8f8f8f70;
    transform: translatey(-5px);
    box-shadow: var(--box-shadow);
}


/* -- Couleur du texte + passage de la souris -- */
/* --------------------------------------------- */
.list-deposit .media .media-body a {
    color: var(--texte-couleur);
    font-weight: bold;
}
.list-deposit .media .media-body a:hover {
    color: var(--texte-couleur-action);
    filter: brightness(130%);
}

/* -- Marge interne des éléments -- */
/* -------------------------------- */
.list-deposit { 
    padding: 10px 10px;
}

/* -- Marge externe du texte -- */
/* ---------------------------- */
.media-body { 
    margin-left: 10px;
}

/* ====== ( Widget Mots-clés ) ====== */
/* ---------------------------------- */
.widget-cloud .keyword {
    display: inline-flex;
    background-color: var(--bouton-hov-background);
    color: var(--texte-couleur-blanc);
    font-size: var(--font-size-paragraphe);
    border-radius: var(--md-border-radius);
    border: 1px solid transparent;
    padding: 0px 12px;
    margin-top: 5px;
    transition: var(--transition);
}

/*  -- Marge interne -- */
/*  ------------------- */

.widget-cloud { 
    padding: 20px;
}

@media (max-width: 767px) { /*  --> Responsive <-- */
.widget-cloud { 
    display: grid;
}
}


/*  -- (au passage du curseur) -- */
/*  ----------------------------- */
.widget-cloud .keyword:hover {
    background-color: #fff;
    transform: translateY(-2px);
    box-shadow: 0px 2px 5px -2px #595959;
    border-color: var(--bouton-hov-background);
    background-color: var(--bouton-hov-background);
    transform: translateY(-2px);
    color: var(--texte-couleur-action);
}

/* ====== ( Widget Recherche ) ====== */
/* ---------------------------------- */


/*  -- Style de la barre de recherche -- */
/*  ------------------------------------------------- */
.form-control.hal-main-search-input {
    background-color: var(--widget-background) !important;
    margin: 15px;
    margin-bottom: -5px !important;
    border: var(--widget-border) !important;
    border-radius: 25px !important;
}

/*  -- Couleur du texte de la barre de recherche -- */
/*  ------------------------------------------------------------------ */
.hal-main-search-input::placeholder {
    color: var(--texte-couleur-action-hov);
    border: var(--widget-border) !important;
    border-radius: 25px !important;
}

/*  -- Decalage de la loupe pour aligner avec la barre de recherche -- */
/*  ---------------------------------------------------------------------------------------------- */

#homepage-search button {
    top: -10px !important;
    right: 12px;
}

/* ========== Widgets Non Natifs (Widget Créés par Inria) ========== */
/* ----------------------------------------------------------------- */


/* ====== Widget Block ====== */ 
/* -------------------------- */

/* --> Dans le code html de la page, <div class = "widget-block"> pour définir le bloc <-- */

.widget-block {
    margin: 0 0 20px; /* --> 0 en haut, 0 droite/gauche, 20 en bas <-- */
    border: var(--widget-border);
    box-shadow: var(--box-shadow);
    border-radius: var(--md-border-radius);
    background-color: var(--widget-background);
    box-sizing: border-box;
    padding: var(--widget-padding);
}

/* -- Style des paragraphes ( texte dans le widget block ) -- */
/* ---------------------------------------------------------- */

/* --> Dans le code html de la page, <div class = "paragraphes"> pour le style du texte <-- */

.paragraphes {  /* --> Paragraphe pour texte/widget natif <-- */
    color: var(--texte-couleur);
    font-size: var(--font-size-paragraphe);
    line-height: 30px;
    padding: 10px 10px 10px 10px;
    margin-bottom: 0rem !important;
}

/* =================================================== */
/* ======== Style des elements avec la 3eme Couleur ========= */
/* =================================================== */

/* -- Exporter et Collection -- */
/* ------------------------------------- */

.hal-bgtext, a.hal-bgtext {
    background-color: var(--bouton-2-background);
}

/* -- Domaines  -- */
/* --------------------- */

.domains a.hal-bgtext, .keywords a.hal-bgtext {
    background-color: var(--bouton-2-background);
}

/* -- Volet de Droit Menu des action en moderation/visu des depots -- */
/* ------------------------------------------------------------------------------------------------- */

#accordion-actions ul li a:hover, #accordion-actions ul li button:not(.btn-tampon):hover {
    border-left: 5px solid var(--bouton-2-background);
}

/* =================================================== */
/* ===================== FOOTER  ====================== */
/* =================================================== */

footer {
    background-color: var(--footer-background);
}

/* -- Style du Texte et couleur au survol -- */
/* ------------------------------------------------------- */
footer li a {
    transition: var(--transition);
    font-weight: 700;
}
footer li a:focus, footer li a:hover {
    color: #00b4d8;
}