/* Elements */
color { Blanc : #FFFFFF;
Noir : #000000 ;
Jaune : #F7C816 ;
Bleu canard : #13B3A9 ;
Violet : #5F2A86 ;   #580199;
Fuchsia : #E71873 ;
Bleu marine : #03213D ;}

/* Boite banniere */

div#header {border: solid 00px red;} 
div#menu_horizontal.menu_horizontal {border: solid 0px #000;} 
.logo_gauche {border: 0px solid black; /* Permet de voir la boîte du logo */}
div.boiteBanniereGauche {
    position: absolute;    /* Sort du flux normal */
    top: 0;                /* Positionne en haut */
    left: 0;               /* Positionne à gauche */
    width: 100%;           /* Occupe toute la largeur souhaitée (ou ajustez en fonction du design) */
    height: 100%;          /* Occupe toute la hauteur du conteneur parent */
    z-index: -1;           /* Place l'élément derrière les autres contenus */
   
}

div#header {position:relative;
    display: grid;
    grid-template-rows: auto auto; /* 2 lignes */
    justify-items: center; /* Centre le contenu */
    width: 100%;
    padding: 0px;
    border-bottom: 0px solid blue;
    background-color: white; /* Ajout d’un fond blanc au header */}
div#header * { color: #E71873;}

/* --- LOGO --- */
div#banniere {grid-row:1;position:relative;}
div#header 
.logo_gauche img {width: 100%;height: auto;}
.logo_gauche {position:relative; cursor: pointer; justify-content: center;max-width: none; background-color: transparent;background-size: contain;background-repeat: no-repeat;
    width: 100%;height: auto;margin-left:0%;margin-top:0%;margin-bottom: 0%; /* Ajoute un espace sous le logo */}

@media 
  screen and (max-width: 768px), /* portrait */ 
  screen and (orientation: landscape) and (max-device-width: 768px) /* paysage */ {
    /* Logo */
    .logo_gauche {
        width: 100%; /* Utilise toute la largeur de l'écran */
        max-width: none; /* Supprime toute restriction de largeur */
        display: flex;
        justify-content: center;}
    .logo_gauche img {
        max-width: 100%; /* Adapte l'image à l'écran */
        height: auto; /* Maintient le ratio */}}
  
/* --- BOîTE DE RECHERCHE --- */
div.boiteBanniereGauche {
    position: absolute;    /* Sort du flux normal */
    top: 0;                /* Positionne en haut */
    left: 0;               /* Positionne à gauche */
    width: 100%;           /* Occupe toute la largeur souhaitée (ou ajustez en fonction du design) */
    height: 100%;          /* Occupe toute la hauteur du conteneur parent */
    z-index: -1;           /* Place l'élément derrière les autres contenus */
}

div#boite_1.boite.rech_simple {
    grid-row: 2; /* Place la boîte de recherche en dernier */
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin-top: 0;
    border-top: solid 5px #580199 ;
    background: url(https://mabib.fr/SFS/userfiles/bannieres/fondboiterecherche.png) no-repeat center;
    background-size: contain; /* Ajuste l’image pour qu’elle soit totalement visible */
    aspect-ratio:14 / 3; /* Ratio pour une meilleure adaptation */
    display: flex;
    align-items: center;
    justify-content: center;
overflow: hidden; /* Pour éviter tout débordement */}


/* Barre de recherche */
.expressionRecherche {
    flex: 1;
    padding: 10px 15px;
    width: 100%;
    box-sizing: border-box;
    color: white !important;
    caret-color: white;
    border-radius: 10px;
    border: 3px solid #E71873;
    background-color: #580199; opacity:.8;
    font-size: 14px;
    font-weight: bold;
    font-family: Arial;}


/* --- IMAGE EN PLEINE LARGEUR --- */
.full-width-image {
    width: 100%;
    height: auto;
    display: block;}

/* Placeholder */
.expressionRecherche::placeholder {
    font-family: Arial;
    font-size: 14px;
    color: #fff;
}

/* Effet focus */
.expressionRecherche:focus {
    border-color: #E71873;
    border-width: 2px;}

/* Croix blanche */
.expressionRecherche::-webkit-search-cancel-button {filter: invert(1); /* Croix blanche */}

/* Bouton de recherche */
.submit {
    position: relative; 
    right: 0; 
    width: 40px;
    height: 40px;
    margin-left: -40px; /* Permet de le coller à gauche */
    background: transparent url(https://mabib.fr/SFS/userfiles/bannieres/loupe4.png) no-repeat center;
    background-size: contain;
    border: none;
    cursor: pointer;}

div.recherche_avancee a {display: flex;
    justify-content: right;
    align-items: center;
    background: transparent;
    font-size: 12px;
    text-transform: uppercase;
    text-align: left;
    text-decoration: underline;}

.recherche_avancee {cursor: pointer;}


/* ============================================
   Règles spécifiques pour le mode mobile 
   ============================================ */
@media 
  screen and (max-width: 768px), /* portrait */ 
  screen and (orientation: landscape) and (max-device-width: 768px) /* paysage */ {
    body * {
        box-sizing: border-box;
        white-space: normal !important; }
  div.boiteBanniereGauche {box-sizing: content-box;width: 100%;}
  div.boiteBanniereGaucheInner {box-sizing: content-box;width: 100%;}
  
  /* Conteneur principal : assure le centrage global */
  div#boite_1.boite.rech_simple {
    height: 150px;  
    width: 90%;
    max-width: 90%;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto;
  }

  /* Barre de recherche : centrée dans son conteneur */
  .expressionRecherche {
    max-width: 75vw;
    width: 80%;
    padding: 8px 12px;
    font-size: 12px;
    border-radius: 10px;
    background-color: #580199;
    position: relative;  /* pour le positionnement du bouton */
    margin: 0 auto;
    z-index: 2;
  }

  /* Bouton loupe : vérifie l’URL, le z-index et la position */
  .submit {
    top: 50%;
    right: 0px;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent url('https://mabib.fr/SFS/userfiles/bannieres/loupe4.png') no-repeat center;
    background-size: contain;
    cursor: pointer;
    z-index: 3;
  }

  /* Recherche avancée : positionnée dans le flux sous l’input et alignée à droite */
  div.recherche_avancee {
    width: 77%;
    display: block;
    margin-top: 2px;
    text-align: right;
    padding: 0 5px;
    box-sizing: border-box;
  }

  div.recherche_avancee a {
    font-size: 10px;
    color: #E71873;
    text-decoration: underline;
    text-transform: uppercase;
    white-space: normal; /* autorise le retour à la ligne si nécessaire */
  }
}



/* MENU HORIZONTAL */
#menu_horizontal {width:100%; display : flex; justify-content: space-between; align-items : center; padding: 0px 0px;background-color: #580199; position:relative;}
#menu_horizontal a {Font-size:16px; text-decoration:none; color:#FFF; text-transform:uppercase; text-align: center; width:100%;padding: 10px; }
#menu_horizontal a:hover {color: #E71873;} = la police devient rose quand on passe la souris dessus
#menu_horizontal { display: flex; list-style: none; gap: 15px;}

@media 
  screen and (max-width: 768px), /* portrait */ 
  screen and (orientation: landscape) and (max-device-width: 768px) /* paysage */ {
    div:not(.boite)[class*="menu_horizontal"]:after {
        content: '';
      width:100%; display : flex; align-items : center; padding: 0px 0px;background-color: #580199; position:relative;
        height: 2em;
        width: 3em;
        background: #580199 url('https://mabib.fr/SFS/userfiles/Icones/menu_6569367.png') no-repeat center center / 1em;
        background-size: 30px 25px;
        top: 50%; left: 45%;
        cursor: pointer;
    }
}


@media 
  screen and (max-width: 768px), /* portrait */ 
  screen and (orientation: landscape) and (max-device-width: 768px) /* paysage */ {
    div[class*="menu_horizontal"] > ul ul, div[class*="menu_horizontal"] > ul li, div[class*="menu_horizontal"] > ul li a, div[class*="menu_horizontal"] > ul li ul li a, #menu_horizontal > ul ul, #menu_horizontal > ul li, #menu_horizontal > ul li a, #menu_horizontal > ul li ul li a {
        color: #ffffff; Font-size: 13px; text-decoration: none;text-transform: uppercase; }	
    #menu_horizontal ul li ul li a:hover {color: #E71873;} = la police devient rose quand on passe la souris dessus
	#menu_horizontal ul li {padding-bottom: 0px;}	
  #menu_horizontal.show_menu > ul {position: absolute; transform: translateX(65%);  z-index: 1000;  }
    div#menu_horizontal.menu_horizontal.show_menu::after {background-color : #580199;}
	div[class*="menu_horizontal"].show_menu > ul li {
        line-height: 1em; }
    #menu_horizontal, #header div[class*="menu_horizontal"], div[class*="menu_horizontal"].show_menu > ul, #menu_horizontal.show_menu > ul, div:not(.show_menu)[class*="menu_horizontal"] li.selected_profil > a[href*="/"], #menu_horizontal:not(.show_menu) li.selected_profil > a[href*="/"], div:not(.boite)[class*="menu_horizontal"]:after {
        background-color: #580199; }
}



/*Boîte Article */
div.boiteVideInner a {font-family:Arial;font-size:28px !important;text-transform:uppercase;text-align:left;color:#000000;}

/* boiteMilieu */
.boiteMilieu div.contenu  {background: none !important;background-color: #fff !important;}
.boiteMilieu div.contenu {background: none !important; background-color: #fff !important; border-radius: 5px; width:90%; max-width: 100%; padding:10px; border: 3px solid #E71873;}
.boiteMilieu div.contenu body {height: 100%;margin: 0;}
.boiteMilieu {display: flex;justify-content: center;  /* Centrer horizontalement */align-items: center;  /* Centrer verticalement */ height: 100%;margin-top:10px;}
.boiteMilieu div.titre h1{font-size:24px; text-transform:uppercase; font-family:Arial;}
.boiteMilieu div.titre {position: relative; display: flex; align-items: center; /* Centrer verticalement l'icône et le texte */}
.boiteMilieu div.titre::before {content: ''; background-image: url('https://mabib.fr/SFS/userfiles/Icones/tasse.png'); /* Remplace par le chemin de ton icône */ background-size: contain; background-repeat: no-repeat; width: 44px; /* Taille de l'icône */ 
 height: 44px; /* Taille de l'icône */ margin-right: 0px; /* Espace entre l'icône et le titre */}
.recherche_actions a {text-transform:uppercase; color:#13B3A9;font-size:14px;}
.criteres_recherche a {display:none;}
.recherche_actions a {display:none;}
.boiteMilieu .rss{display:none;}
.boiteMilieu div.titreInner {padding:0px 0px 0px 1px}

div.resultats_page select#tri.bouton.button {background-color: #580199 !important; border-radius: 10px !important; color:#fff; border : none;}
/div.resultats_page select#tri.bouton.button li:hover {background-color: red; /* Nouvelle couleur au survol */}/
.boiteMilieu h1 {font-weight:bold;}
.boiteMilieu div.liste_mur{
width:70%; height: auto;}
.liste_mur .notice_wrapper .notice a img {height: 250px !important; width: auto !important;}
.liste_mur {margin : 10px 10px 10px 30px;}
.boiteMilieu .navigation a {font-family:Arial; color:#580199; font-size:12px;}
.boiteMilieu a {color: #580199;}
.boiteMilieu a:hover {color: #E71873;}


/* .boiteMilieu .navigation display:none; */
.navigation div span {margin: 0 15px; color:#E71873;}
.entete_notice  a {color:#580199;}
.entete_notice body {color:#fff;}

/* Notices */
.notice_vignette {width:200px; float:left;}
.notice_vignette a img {height:200px; width:auto !important;border : 5px solid #fff;}
.vignette-reseaux-sociaux img{display:none;}
img.icone_support {display:none;}
div.entete_notice {
    text-align:right;
    padding-right:10px;
    vertical-align:left;
    margin-right:20px;
    margin-top:3px;
    margin-bottom: 20px;
}
.detail.block_info_notice dt, .entete_notice dt, .vignette_info dt {
    float: left;
    width: 100px;
    padding-right: 0px;
    padding-left: 0px;
    margin-bottom: 0px;
    text-align: left;
}

/* Résultats recherche */
.liste_mur .notice_wrapper, .domains.liste_mur > div > div {
    display: inline-block;
    vertical-align: top;
    height: 270px;
    width: 200px;
    margin: 20px auto 0px auto;
    border: 5px solid #ffffff;}
.resultat_recherche {float:none; width:90%;}
.resultat_recherche img.icone_support {display:none;}
.resultat_recherche .liste_mur .notice .titre_auteur {display:none;}
.liste_mur ul.barre-de-lien {display:none;}
.div.list_mur .div.notice_wrapper img {float: left;padding-right: 8px;width: 80px;}
.filtre_recherche {float:left;width:20%;}
.pager { text-align: center; margin-top: 5px;}
.pager a {font-family:Arial; color: #13B3A9; font-size:15px;}
.pager .current a { font-size: 1.5em;font-weight: bold;color: #E71873;}
.pager a:hover {color: #E71873;}
.liste_mur .notice .titre_auteur, .liste_mur .notice>a + div {display:none}
body main .btn-info .badge-info{ background-color: #E71873 !important; border-radius: 10px !important; text-align: center;}



/* RECHERCHE AVANCEE */
.opac:not(.index_index) main form.form, .opac:not(.index_index) main form.zend_form {
    padding: 2rem;
    border-radius: 10px !important;
    border: 3px ;}

fieldset {
    display: block;
    min-inline-size: min-content;
    margin-inline: px;
    border-width: 3px;
    border-style: solid;
    border-radius: 20px;
    border-color: #00E3BB;
    background-color: #B2F7EA;
    padding-block: 0.35em 0.625em;
    padding-inline: 0.75em;}

body h1, body h2, body h3, body .widget-header {
    font-family: Arial, sans-serif !important;
    letter-spacing: 0px;
    font-weight: 400;
    color: #13B3A9 !important;}

.boiteMilieu h1 { font-size: 24px; font-weight: bold; margin : 30px 20px 10px;}

.col-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;}

input#rech_titres  {display: block;width: 100%; height: calc(1.em + .75rem + 2px);padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 2px solid #00E3BB; 
border-radius: .25rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;}
select#operateur_titres  {display: block;width: 100%; height: calc(1.em + .75rem + 2px);padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 2px solid #00E3BB; 
border-radius: .25rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;}

input#rech_auteurs  {display: block;width: 100%; height: calc(1.em + .75rem + 2px);padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 2px solid #00E3BB; 
border-radius: .25rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;}
select#operateur_auteurs  {display: block;width: 100%; height: calc(1.em + .75rem + 2px);padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 2px solid #00E3BB; 
border-radius: .25rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;}

input#rech_matieres  {display: block;width: 100%; height: calc(1.em + .75rem + 2px);padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 2px solid #00E3BB; 
border-radius: .25rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;}
select#operateur_matieres  {display: block;width: 100%; height: calc(1.em + .75rem + 2px);padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 2px solid #00E3BB; 
border-radius: .25rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;}

input#rech_dewey  {display: block;width: 100%; height: calc(1.em + .75rem + 2px);padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 2px solid #00E3BB; 
border-radius: .25rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;}
select#operateur_dewey  {display: block;width: 100%; height: calc(1.em + .75rem + 2px);padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 2px solid #00E3BB; 
border-radius: .25rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;}

input#rech_editeur  {display: block;width: 100%; height: calc(1.em + .75rem + 2px);padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 2px solid #00E3BB; 
border-radius: .25rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;}
select#operateur_editeur  {display: block;width: 100%; height: calc(1.em + .75rem + 2px);padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 2px solid #00E3BB; 
border-radius: .25rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;}

input#rech_collection  {display: block;width: 100%; height: calc(1.em + .75rem + 2px);padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 2px solid #00E3BB; 
border-radius: .25rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;}
select#operateur_collection  {display: block;width: 100%; height: calc(1.em + .75rem + 2px);padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 2px solid #00E3BB; 
border-radius: .25rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;}

*, ::after, ::before {box-sizing: border-box;}

/* Pied de page */
div.footer {background-color : #580199;font-family:Arial; font-size:14px;color:#fff;}
div.footer { 
  padding-top:10px;
  padding-right: 30px;       /* espace à droite pour le logo */
  text-align:end;
  line-height: 1.5;}
div.footer::before {
  content: "Ressources graphiques créées par FREEPIK";}