/* ============================================================
   IMPORTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&display=swap');


/* ============================================================
   TYPOGRAPHIE GLOBALE
   ============================================================ */
html { font-size: 100%; }
body,
.media-embed .resource .caption { font-size: 1.15rem; line-height: 1.6rem; }

h1 { margin: 0; font-family: 'Quintessential'; font-size: 1.6rem; }
h2 { font-family: "Barlow Condensed"; font-size: 2.1rem; font-weight: bold; margin-top: 15px; }
h2, h3, legend, h4, h5, h6 { font-family: "Cormorant Garamond", serif; font-weight: 700; }
h3, h4 { font-size: 1.6rem;  font-family: "Alegreya", Serif; margin: 5px 0 10px 0; }
p, ul, ol, dl { margin: 5px 0 10px 0; line-height: 1.8rem; }

.resource-title { font-family: "Alegreya", Serif; margin: auto 10px; margin-bottom: 15px; }
.resource-name  { font-family: "Alegreya", Serif; }

.tags, .type, .date, .item-sets { font-size: 0.9em; font-family: 'Barlow Condensed'; }
.property dt { font-size: 1.8rem; }
.fa { font-size: 2rem; }
.centrer { text-align: center; }
.dcterms\:description { display: none !important; }
 .resource-list .resource { border-top: none; padding: 0; }
ul.resource-list.preview+ a {   text-align: center;   display: block;   color: white;   padding: 7px;   background-color: #123;   width: 130px;  margin: 15px auto 0;  border-radius: 7px;  font-weight: bold;  font-size: 0.8em; }

.content-title { display: inline-flex; }
.content-title h3 {  color: white;   padding: 4px 7px;   background-color: #123;  margin: 15px 7px  0;  border-radius: 7px;  font-weight: bold;  font-size: 0.8em; max-height: 40px;  }




/* ============================================================
   HEADER & LOGO
   ============================================================ */
header,
#menu-toggle-close {
    height: 100px;
    border-width: 0 0 4px 0;
    background: url('files/asset/bed3ecdaaabdc6ed657a7f23eda100d1c465a20c.png');
    background-position-x: left !important;
    border-bottom: 5px solid black;
    color: #FFEDD4;
}

a.site-title img { max-width: 70px; margin: 0 20px; }


/* ============================================================
   NAVIGATION PRINCIPALE
   ============================================================ */
nav ul { display: flex; flex-direction: row; gap: 1rem; }
nav ul, nav ul li { margin: 0; padding: 0; list-style: none; }
nav ul li { border-radius: 10px; box-shadow: 0px 0px 8px rgb(0, 0, 0); }
nav ul li a { text-decoration: none; padding: .5rem 1rem; display: block; }

#primary-nav ul.navigation { display: flex; flex-direction: column; }
#primary-nav ul.navigation > li a { text-decoration: none; border-bottom: 0; }
#primary-nav .sub-nav-toggle { background-color: white; color: black; }

#fullscreen-menu a {
    color: #000;
    font-size: 2rem;
    margin: 0.5rem 0;
    text-align: center;
    padding: 8px;
    text-decoration: none;
    font-family: "Barlow Condensed", serif;
    font-weight: 700;
    text-transform: uppercase;
}
#fullscreen-menu a:hover { text-decoration: underline; }
#fullscreen-menu .menu-content { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#content-fullscreen-menu { display: flex; justify-content: center; }


/* ============================================================
   MENU SECONDAIRE
   ============================================================ */
.menu-secondaire {
    background: ivory;
    flex-wrap: wrap;
    box-shadow: 0 0 10px #000;
    border-radius: 0 0 10px 10px;
    border: solid 1px #FFF;
    display: flex;
    justify-content: center;
}
.menu-secondaire ul { display: flex; list-style: none; padding: 0; }
.menu-secondaire ul li { position: relative; padding: 0 0.8em; }
.menu-secondaire ul li:not(:last-child)::after {
    content: "–";
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-weight: bold;
}
.menu-secondaire a { font-family: "Barlow Condensed", serif; font-size: 1.4rem; font-weight: 600; }


/* ============================================================
   MENU HAMBURGER / OVERLAY PLEIN ÉCRAN
   ============================================================ */
#menu-toggle { background: none; }
#menu-toggle,
#menu-toggle-close { cursor: pointer; color: #FFEDD4; margin-left: auto; display: flex; }
#menu-toggle-close { height: 100px; display: inline-flex; align-items: center; padding: 0 20px; flex: 1; width: 100%; }
#menu-close { display: inline-flex; margin-left: auto; background: none; border: none; font-size: 2rem; color: #FFEDD4; cursor: pointer; }

#fullscreen-menu {
    display: none;
    position: fixed;
    top: 0; left: 0;
    height: 100vh; width: 100%; min-height: 100vh;
    background: url('https://patrimoine.mediatheque-lecateau.fr/files/asset/d60036241555b49a131a3f2d42fe85a8c2320df8.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 9999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

body.menu-open { overflow: hidden; }


/* ============================================================
   LAYOUT GÉNÉRAL
   ============================================================ */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
#content, main, #wrap { flex: 1 0 auto; background: url('/files/asset/71e4c5fe48085a66e2be77aa6c5bc98a19a27232.jpg'); }

#wrap { max-width: 100%; }
#content { width: 100%; text-align: justify; padding: 0 24px; color: #200200; }
#wrap .content { display: inline-flex; flex: 1; padding: 2px 7px; font-size: 1rem; }
#wrap #content { display: block; }

#search { margin: 0; flex: 1; }
#search-form { margin-bottom: 0; }

.page-layout-normal .block { margin: 0rem auto 25px auto; width: 100%; }
.block-html { text-indent: 15px; }
.block-html li { text-indent: 0; }
.content > div { margin: 6px 0; }

.reference-pagination.pagination { display: flex; }
#reference-headings { column-count: 3; }
#reference-headings h3 { margin-top: 24px; margin-bottom: 0; }
#reference-headings h3#A { margin-top: 0; }
#reference-headings li::before {     content: "•";     font-size: 0.6em;    transform: translateY(-1px);   }



/* ============================================================
   CONTENU / BLOCS
   ============================================================ */
.content h3,
.bulk-export h3 {
    font-family: "Barlow Condensed";
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 12px;
    background: black;
    color: white;
    text-indent: 0;
    padding: 2px 4px;
    font-size: 1rem;
    float: left;
    margin-bottom: 0;
    margin-top: 15px;
    height: 35px;
}

.media-list,
.resource-values,
.bulk-export { border-bottom: dotted #DDD; }

.resource-values .property { break-inside: avoid; page-break-inside: avoid; column-break-inside: avoid; }
.resource-values .property h4 { font-size: 1em; font-style: italic; margin: 0; }
.resource-values .property .value { font-weight: bold; }

body.show .resource-values { column-count: 2; column-gap: 2rem; padding: 0; }
body.show .resource-values .property:first-child h4 { margin-top: 0; }

.shortcode h4 { display: none; }
.shortcode { float: left; }

.media-embed .resource { margin: 0; border-bottom: dotted; margin-bottom: 15px; padding-bottom: 15px; }

.external-ref { margin-left: .4em; font-size: .9em; opacity: .7; }
.external-ref:hover { opacity: 1; }



/* ============================================================
   BLOCS TOGGLE (accordéon)
   ============================================================ */
.block-toggle.is-open > div { display: block; }
.block-toggle .media-embed .resource h3,
.block-toggle .media-embed .resource h4 { position: relative; padding-left: 1.2rem; font-size: 1.8rem; cursor: pointer; }

.block-toggle .media-embed .resource h3::before,
.block-toggle .media-embed .resource h4::before {
    content: "▶";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transform-origin: 50% 50%;
    transition: transform 0.3s ease;
    font-size: 0.7em;
    color: #333;
}
.block-toggle.open .media-embed .resource h3::before,
.block-toggle.open .media-embed .resource h4::before { transform: translateY(-50%) rotate(90deg); }

.block-toggle .media-embed .resource .caption { display: none; }

.toggle-arrow { font-size: 0.7em; margin: auto 5px; }
.toggle-block-title { column-span: all; margin: 10px 0; }
.media-embed .resource h3 .toggle-block-title { column-span: all; }

.media-list .toggle-block-content h4 { display: none; }


/* ============================================================
   GALERIE & SURVOL DES IMAGES
   ============================================================ */
.gallery ul { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; padding: 0; margin: 0; list-style: none; }
.gallery li { position: relative; width: 250px; list-style: none; overflow: hidden; height: 250px; }
.gallery li img { display: block; width: 100%; transition: 0.3s ease; object-fit: cover; }
.gallery li::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0); transition: 0.3s ease; }
.gallery li span,
.gallery li .resource-meta { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: white; font-size: 20px; font-weight: bold; opacity: 1; transition: 0.3s ease; z-index: 2; text-align: center; text-shadow: 0 0 4px black; }
.gallery li:hover::after { background: rgba(0,0,0,0.5); }
.gallery li:hover span,
.gallery li:hover .resource-meta { opacity: 1; }
.gallery li .resource-meta { width: 100%; padding-right: 0; }


/* ============================================================
   ITEMS EN COLONNES
   ============================================================ */
.items-colonnes .preview { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(100px, auto); gap: 20px; }
.items-colonnes .preview h4 { padding-top: 0; margin-top: 0; }
.items-colonnes .preview .resource-meta { overflow: hidden; }


/* ============================================================
   BLOC CONTACT
   ============================================================ */
.contact-toggle { margin-top: 1.5em; }
.contact-toggle-link { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; text-decoration: none; cursor: pointer; }
.contact-toggle-link i { transition: transform 0.25s ease; }
.contact-content { margin-top: 0.75em; padding-left: 1.5em; border-left: 2px solid #ddd; }


/* ============================================================
   PAGE D'ACCUEIL
   ============================================================ */
.site-page .blocks .page-layout-normal { display: grid; grid-template-columns: 50% 1fr; column-gap: 3rem; margin-top: 15px; }

/* Les 2 premiers blocs sur demi-largeur, à partir du 3e : pleine largeur */
.site-page .blocks .page-layout-normal > .block:nth-child(-n+4) { grid-column: auto; }
 .site-page .blocks .page-layout-normal > .block:nth-child(n+3) { grid-column: 1 / -1; } 
/* .block-browsePreview  { grid-column: 1 / -1; }  */
.site-page h2 { display: flex; font-style: italic; }


/* ============================================================
   BLOC ACTUALITÉS (blog)
   ============================================================ */
.actus-grid { border: black dashed 1px; border-radius: 5px; box-shadow: 1px 1px 3px 2px rgb(0 0 0 / 0.3); }
.actus-grid .news-item { display: none; }
.actus-grid .news-item.active { display: block; }
.actus-grid #entete-blog { display: flex; font-style: italic; border-bottom: dashed black 1px; background-color: rgba(8,8,8,0.1); }
.actus-grid #boutons-blog { margin-left: auto; align-content: center; }
.actus-grid .news-item { padding: 5px; text-indent: 0; }
.actus-grid ul.resource-list { padding: 5px; }
.actus-grid ul li.resource { padding: 0; border: none; }
.actus-grid h4 { margin: 10px 0 15px 0; font-weight: bold; }
.actus-grid .date { font-weight: bold; color: #999; }
.actus-grid .description { font-weight: normal !important; }


/* ============================================================
   CAROUSEL
   ============================================================ */
.site-page .carousel-block { max-width: 1200px; margin: 0 auto; padding: 0; }
.site-page .carousel-block h2 { display: none; }
.site-page .slick-slider {margin-bottom: 0; padding: 0; }
.site-page .slick-slide {padding: 0; }
.site-page .slick-slide a {height: 100%; }
.site-page .slick-dotted.slick-slider img { min-width: 400px; max-height: 300px; }
.site-page .block-carousel { margin: 30px auto; max-width: 1200px; background: rgba(255, 252, 219, 0.4); border: 1px solid #ccc; border-radius: 15px; box-shadow: 0 0 8px 1px lightgray; }
.site-page .slick-dotted.slick-slider .slick-slide > div > div { display: inline-flex !important; align-content: center; align-items: center; height: 100%; padding: 0; }
.site-page .slick-dots { display: none !important; }


.site-page .slick-slide .slide-text { display: flex; flex-direction: column; }
.site-page .carousel-block .title, .site-page-expositions .media-embed .resource h3, .site-page-premiere-guerre-mondiale .media-embed .resource h3 { 
	font-family: "Alegreya", Serif; font-size: 1.6rem; font-weight: bold; width: 100%; text-align: center; margin-bottom: 20px; }



.site-page .slick-prev, .site-page .slick-next { z-index: 10; }

/* Carousel Première Guerre mondiale */
.carousel-pgm { max-width: 350px; float: left; max-height: 450px; overflow: hidden; background-color: rgba(204, 204, 204, 0.8); margin-right: 7px !important; }
.carousel-pgm .slick-dots { display: none !important; }
.carousel-pgm .slick-track { align-items: flex-start; }

/* =============
FRISE CHRONOLOGIQUE
======= */
.block-timeline .tl-timeline h2 { font-size: 1.6rem; } 


/* ============================================================
   PAGE PREMIÈRE GUERRE MONDIALE
   ============================================================ */
.item-set-showcase { display: flex; justify-content: space-around; flex-wrap: wrap; justify-content: center; }
.item-set-showcase .resource { display: flex; flex-direction: column; align-items: center; max-width: 350px; }
.parcourir-grille-items ul { display: flex; align-item: center; justify-content: space-between; flex-wrap: wrap; }

.site-page-premiere-guerre-mondiale .block-browsePreview.toggle-items .resource-link img,
.site-page .block-browsePreview .resource-link img { display: none; }
.site-page-premiere-guerre-mondiale .block-itemSetShowcase { clear: both; }


/* ============================================================
   PAGE EXPOSITIONS
   ============================================================ */
.bloc-contenu.liste-expos { display: block; }
.liste-expos article { display: grid !important; grid-template-columns: 250px 1fr; grid-template-rows: 40px 200px; column-gap: 1rem; margin-right: 10px; }
.liste-expos article .soustitres { width: 100%; display: flex; justify-content: center; font-style: italic; font-size: 0.85em; }
.liste-expos article a.resource-link:has(img) { grid-row: span 2; display: flex; align-items: center; justify-content: center; height: 100%; }
.liste-expos article a.resource-link:has(img) img { max-height: 100%; object-fit: contain; margin-bottom: 15px !important; }


/* ============================================================
   PAGE PODCASTS
   ============================================================ */
.liste-podcast article .soustitres { width: 100%; display: flex; justify-content: center; font-style: italic; font-size: 0.85em; }


/* ============================================================
   BROWSE / PARCOURIR
   ============================================================ */
.browse-preview { column-span: all; display: block; width: 100%; margin-top: 2rem; text-align: center; }


/* ============================================================
   PIED DE PAGE
   ============================================================ */
footer { margin: 0; padding: 0; clear: both; background: #2C3E50; min-height: 300px; box-shadow: -2px 0px 5px #111; overflow: hidden; }
footer, footer a { color: #D1D1D1; }
footer a:hover { color: #4C9A2A; }
footer p, footer h4 { float: none; text-align: center; margin: 0; font-size: 0.75em; font-family: 'Roboto'; padding: 0; }
footer h4 { display: block; width: 100%; text-align: center; font-size: 1em; font-family: 'Quintessential'; padding-top: 15px; margin: 0; }
footer img { height: 50px; margin: 10px 20px; }

#footer_grid { display: inline-grid; justify-content: center; align-content: center; grid-template-columns: 300px 1fr 300px; width: 100%; line-height: 1em; }
footer #col1,
footer #col2,
footer #col3 { display: grid; justify-content: center; align-content: center; text-align: center; }
footer #col2 { margin-top: 10px; }
footer #col2 li { width: 50%; text-align: center; list-style-type: none; display: block; float: right; margin: 8px 0; }


/* ============================================================
   RESPONSIVE (max-width: 769px)
   ============================================================ */
@media screen and (max-width: 769px) {
    header.small { height: 120px; }
    a.site-title { text-align: center; }
    a.site-title img { display: none; }

    #content { padding: 0; text-indent: 5px; }
    .block { padding: 0 12px; }

    #primary-nav ul.navigation { display: flex; flex-direction: column; flex-wrap: wrap; }
    nav ul { border-radius: 0; box-shadow: 0px 0px 8px rgb(0, 0, 0); background-color: #EEE; }
    nav ul li { border-radius: 0; box-shadow: none; }
    nav ul li a { text-decoration: none; padding: 0; display: block; }

    .menu-secondaire { border-radius: 0; }
    .menu-secondaire ul { flex-wrap: wrap; }

    #menu-toggle-close { background: url('files/asset/bed3ecdaaabdc6ed657a7f23eda100d1c465a20c.png'); }

    .site-page .blocks .page-layout-normal { display: flex; flex-direction: column; }
    .site-page .slick-dotted.slick-slider .slick-slide > div > div { display: flex; flex-direction: column; }
    .slide-text .caption { display: none; }

    .actus-grid { border: none; border-radius: 0; box-shadow: 0px 0px 3px 2px rgb(0 0 0 / 0.3); padding: 0 !important; }

    .items-colonnes .preview { display: block; }
    .items-colonnes .preview .resource-meta { height: auto; width: 100%; text-align: center; }
    .items-colonnes .preview .resource-meta h4 { text-indent: 0; }
    .item a.thumbnail,
    .media-render { width: 100%; text-align: center; text-indent: 0; }

    .liste-expos article { grid-template-columns: 1fr; }

    #bureau-archives { display: none; }

    #footer_grid { display: flex; justify-content: center; align-content: center; }
    footer #col1,
    footer #col2,
    footer #col3 { justify-content: flex-start; width: 33%; display: flex; flex-direction: column; text-align: center; }

    body.site-page-premiere-guerre-mondiale .item-set-showcase .resource .caption { display: none; }
}