/* On masque par défaut les annotations */
a.expand + .collapsible.annotation {
  display: none;
}

ul.list li,
ol.list li{
  list-style:  disc;
}

/* Ajout d'une marge */
.collapsible.annotation {
  margin: 1rem;
  border-left: 1px solid;
  padding-left: 1rem;
  font-size: 1rem;
}

/* Créez une classe utilitaire pour l'icône externe */

/* Ajoutez le code SVG dans une pseudo-classe ::after pour l'élément avec la classe .external-link */
.external-link::after {
  content: ''; /* Contenu vide pour pouvoir utiliser ::after */
  display: inline-block;
  height: 1em;
  width: 0.8em;
  background-size: 100% 100%; /* S'assure que le fond (SVG) s'ajuste correctement à la taille spécifiée */
  background-repeat: no-repeat; /* Évite la répétition de l'icône */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='40' width='30' viewBox='0 0 1024 768'%3E%3Cpath d='M640 768H128V258L256 256V128H0v768h768V576H640V768zM384 128l128 128L320 448l128 128 192-192 128 128V128H384z'/%3E%3C/svg%3E");
  margin-left: 5px; /* Ajoute un espacement à gauche du lien */
}

.border-l {
border-left: 2px solid !important;
}

.cover {
  object-fit: cover;
}

.pagination {
  display: flex;
  align-items: center;
}
.pagination .previous,
.pagination .next {
  padding: .5rem;
}
.search-results-display {
  display: none;
}
.hero-section-search .breadcrumbs,
.hero-section-search h2,
.hero-section-search .field-meta,
.hero-section-search #search-filters,
.hero-section-search .search-results-wrapper {
  display: none;
}

.hero-section-search h3,
.hero-section-search .metadata,
.hero-section-search .item-set-items {
  display: none;
}

#advanced-search-form {
  display: flex;
  box-shadow: 0 2px 4px 0 rgba(163, 163, 163, 0.9);
  background: wheat;
}
#form-search {
  width: 100%;
}
#submit,
.toggle-search {
  border: 0;
  display: inline-block;
  cursor: pointer;
  height: 60px;
  color: hsl( var(--clr-white) );
  background-color: hsl( var(--clr-dark) );
  padding: 0 1.5rem;
}
@media screen {
  .form-search {
    margin-bottom: 0;
  }
}
@media screen {
  .form-search input[type="search"] {
    appearance: none;
    border-radius: 0;
    height: 60px;
    border: 1px solid rgba(0,0,0,.15);
    padding: 6px;
    width: 100%;
    min-height: 36px;
    margin: 0;
  }
}
.main-section #advanced-search-form-wrapper {
  display: none;
}
/********/
.ext-link {
  background: hsl( var(--clr-dark) );
  color: hsl( var(--clr-white) );
}

.item-set-title {
  display: none;
}

.btn {
  border: 0;
  display: inline-block;
  padding: 0 .5rem;
}

.flow-2 > * + * {
  margin-top: .4rem;
}

/* Page du parcours des collections provisoire ;) */

.browse h3 {
 /* display: none; */
}

/* On ajoute une marge pour les collection enfants */

.browse .child-collection {
  margin-left: 1.5rem;
}

.browse .property-title,
.browse .property-identifier {
  display: none;
}

.browse .property-has-part .values,
.browse property-is-part-of .values {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.browse .property-has-part .values img,
.browse .property-is-part-of .values img {
  object-fit: cover;
  object-position: top;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: .3;
  border-radius:3px;
}

/*.resource-link::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  width: 55px;
  height: 10px;
  background: black;
  border-radius: 5px 5px 0 0;
}
*/
/* On simule la classe utilitaire btn */

.browse .property-has-part .values a,
.browse .property-is-part-of .values a {
  background: #228494;
  padding: .5em;
  border-radius: 3px;
  color: white;
  display: flex;
  align-items: center;
  gap: .5em;
  position: relative;
  z-index: 0;
  font-size: smaller;
}

/* il s'agit d'une liste on fait un reset des marges */

.grid-auto,
.grid-auto-3 {
  padding: 0;
}

body {
  background-color: #9fcfd6;
}

.main-section
{
  margin-top: -24px;
  padding-top: 36px;
  min-height: calc(100vh - 293px);
}

#content {
  padding-bottom: 3em;
}

.hero-section .container {
  background: transparent;
  padding-top: 24px;
}

/* section HEADER */

.logo {
  flex-shrink: 0;
}
.logo img {
  height: 70px;
}

.primary-navigation__list {
  flex-wrap: wrap;
}

/* Section HERO */
.banner {
  position: relative;
}

.banner img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 109px;
  object-fit: cover;
  z-index: -1
}

.hero-section-title {
  display: none;
  padding: .25em;
}

#search-form {
  position: relative;
  height: 60px;
  width: 100%;
  box-shadow: 0 2px 4px 0 rgba(163, 163, 163, 0.9);
}

#search-form input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding : 10px 140px 10px 2.5rem;
}

#search-form input {
  border: 0;
  outline: none;
  color: color: hsl( var(--clr-dark) / .9 )
}

#search-form .btn {
  position: absolute;
  height: 100%;
  right: 0;
  top: 0;
  cursor: pointer;
  padding: 0 1.5rem;
}

#search-form .fa-search::before {
  position: absolute;
  left: 10px;
  height: 100%;
  z-index: 1;
  color: hsl( var(--clr-dark) / .9 )
}

/* Home page */

/* Le slide */

/* On masque tous les boutons */
.carousel-block .slick-prev,
.carousel-block .slick-next,
.slick-autoplay-toggle-button {
  display: none !important;
}

.parent-collection .flex,
.child-collection .flex {
  flex-wrap: wrap;
}

.btn.btn-view-more,
a.uri-value-link,
.parent-collection a,
.child-collection a {
  background: #228494;
  padding: 0 0.5rem;
  color: white !important;
}

.parent-collection a,
.child-collection a {
  
}

/* stop */
.carousel-block {
  position: relative;
  padding-bottom: 0;
}

/* On prend la main sur la première div qui suit le slide calculé en js */

.slick-slide > div {
  width: 80%;
  padding: 1em;
  margin: 1em;
  background: #ededed;
  box-shadow: 0 2px 4px 0 rgba(163, 163, 163, 0.5);
}

/* Limite de la hauteur de l'image */

.slick-slide img {
  height: 200px;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* Paramètre du slide avec la légende non superposée et affichage flex de l'image + légende */

.slick-slide a {
  display: flex !important;
  align-items: center;
}

.slick-slide a > * {
  width: 50%;
}

.slick-slide .slide-text .title {
  font-weight: normal;
  color: hsl( var(--clr-dark) )
}

/* Liste des ressources et des collections */

.column.cards {
  gap: 2em;
}

/****************************** 
  *
  * Blocs Aperçu des ressources
  *
******************************/

/* Par défaut le css du bloc masque les éléments qui sortent du flux, pour l'affichage de l'ombrage on repart sur un comportement initial */

.preview-block {
  overflow: initial;
}

.preview-block .resource-list {
  margin: 0;
  padding: 0;
}

.preview-block h4 {
  margin-top: 1.2em;
}

figure {
  margin: 1em 40px;
}
/****************************** 
  *
  * Page de blog
  *
******************************/

.site-page-blog img {
  margin-right: 1.7rem;
}

/****************************** 
  *
  * Affichage des crédits
  *
******************************/


.image-footer {
  padding: .5rem 0;
  font-size: 90%;
}

/****************************** 
  *
  * Page de blog Matrimoine + Afriques
  *
******************************/

.site-page-blog-collection-matrimoine .main-section.container .blocks,
.site-page-blog-images-dafrique .main-section.container .blocks,
.site-page-blog-henri-Lichtenberger-un-germaniste-a-la-sorbonne .blocks,
.site-page-journal-intime-etudiant-quartier-latin-monarchie-juillet .blocks,
.site-page-louis-xiv-terrassant-ennemis-France .blocks
{
  width:  min(100% - 1.25rem, 65ch);
  margin-inline: auto;
}

.site-page-blog-henri-Lichtenberger-un-germaniste-a-la-sorbonne .file {
  border: none;
}
.site-page-blog-collection-matrimoine .main-section.container p,
.site-page-blog-images-dafrique .main-section.container p,
.site-page-blog-henri-Lichtenberger-un-germaniste-a-la-sorbonne p,
.site-page-louis-xiv-terrassant-ennemis-France p {
  text-align: justify;
}

.site-page-blog-collection-matrimoine figure,
.site-page-blog-images-dafrique figure,
.site-page-blog-henri-Lichtenberger-un-germaniste-a-la-sorbonne figure,
.site-page-journal-intime-etudiant-quartier-latin-monarchie-juillet figure,
.site-page-louis-xiv-terrassant-ennemis-France figure {
  background-color: hsl( var(--clr-dark) );
  color: hsl( var(--clr-white) );
  margin: 2rem auto 0 auto;
  padding: 1rem;
}

.site-page-blog-collection-matrimoine figure figcaption,
.site-page-blog-images-dafrique figure figcaption,
.site-page-blog-henri-Lichtenberger-un-germaniste-a-la-sorbonne figcaption,
.site-page-journal-intime-etudiant-quartier-latin-monarchie-juillet figcaption,
.site-page-louis-xiv-terrassant-ennemis-France figcaption {
  padding: 1rem 0;
  font-size: 90%;
}

.site-page-blog-collection-matrimoine .image-center,
.site-page-louis-xiv-terrassant-ennemis-France .image-center {
  max-width: 400px;
  inline-margin: auto; 
}

.site-page-blog-collection-matrimoine .footnotes,
.site-page-blog-images-dafrique .footnotes,
.site-page-blog-henri-Lichtenberger-un-germaniste-a-la-sorbonne .footnotes,
.site-page-louis-xiv-terrassant-ennemis-France .footnotes {
  background-color: hsl( var(--clr-dark) / .05 );
  font-size: 90%;
  padding:  1rem;
}

/****************************** 
  *
  * Page de blog enquete 2024
  *
******************************/
.site-page-blog-enquete-nubis-resultat .blocks h2 {
  text-align: center;
  margin-top: 2rem;
}
.site-page-blog-enquete-nubis-resultat .blocks p
{
  width:  min(100% - 1.25rem, 65ch);
  margin-inline: auto;
}

.site-page-blog-enquete-nubis-resultat p {
  text-align: justify;
}

.site-page-blog-enquete-nubis-resultat figure {
  display: grid;
  gap: 1rem;
   width:  min(100% - 1.25rem, 80ch);
  background-color: hsl( var(--clr-dark) );
  color: hsl( var(--clr-white) );
  margin: 2.25rem auto;
  padding: 0.2rem;
}

.site-page-blog-enquete-nubis-resultat figcaption {
  padding: 1rem;
  align-self: center;
}

@media (min-width: 900px) {
   .site-page-blog-enquete-nubis-resultat figure {
      grid-template-columns: 1fr 1fr;
  }
  .site-page-blog-enquete-nubis-resultat figure .reverse {
    order: -1;
    text-align: right;
  }
}

@media (min-width: 800px) {
  .hero-section-title {
    display: inline-block;
  }
}