/* Cache les métas infos des articles et rubriques (date de redaction...) */ 
/* https://salondulivre.mediatheque-lecateau.fr/squelettes-dist/css/ */
@font-face {
    font-family: 'Arkipelago';
    src: url('./fonts/arkipelago/arkipelago-webfont.woff2') format('woff2'),
         url('./fonts/arkipelago/arkipelago-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Pacifico';
    src: url('./fonts/Pacifico/pacifico-regular-webfont.woff2') format('woff2'),
         url('./fonts/Pacifico/pacifico-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Limelight';
    src: url('./fonts/Limelight/limelight-regular-webfont.woff2') format('woff2'),
         url('./fonts/Limelight/limelight-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'avantgardegothic';
    src: url('./fonts/avantgardegothic/avant-garde-gothic-webfont.woff2') format('woff2'),
         url('./fonts/avantgardegothic/avant-garde-gothic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
/****************/
/**** GENERIQUE */
body { color: #333; font-family: 'avantgardegothic'; font-size: 1.2em; }
#header, #main { background-color: #3dc6e6; }
.breadcrumb { font-size: 0.85em; }
.container { width: 90em; }
.centrer { text-align:center; }
.contain { object-fit: contain !important; } .cover { object-fit: cover !important; }
article.box { padding: 0.5em 1em; }
.minipuce::before {   margin-left: 30px; content: ""; display: inline-block; width: 8px; /* Ajuste la taille de l'image */ height: 8px; /* Ajuste la taille de l'image */ background-image: url('images/marguerite.png'); /* L'URL de ton image */ background-size: cover; /* Pour que l'image s'adapte bien */ margin-right: 10px; /* Espace entre l'image et le texte */ vertical-align: middle; /* Alignement vertical de l'image */  }
.box.page-content header { margin-bottom: 1em; }
h1, h2, h3 { font-family: Limelight; text-transform: initial; color: 666; }
.legende { font-style: italic; color: #333; font-size: 0.75em; line-height: 1.5em; text-align: left !important; }
.box.page-content h1 { margin: 0.65em 0 0 0; font-size: 2.5em; }
.box.page-content h2, .box.page-content h3 { margin: 0.4em 0; }
section#main p { text-align: justify; padding: 0px 15px; text-indent: 1.5em; }
.bold { font-weight: bold; }
.image { box-shadow: 0px 0px 5px rgb(45, 45, 45); height: auto; width: auto; max-height: 100%; max-width: 100%; }
p, ul, ol, dl, table {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}
ul { list-style-type:none;}
ul.navigation { text-align :center; }
.row { margin: 0; padding: 0 !important; }
.breadcrumb { font-size: 0.85em; font-family: 'Charm'; }
.puce::before {
  content: "";
  display: inline-block;
  width: 20px; /* Ajuste la taille de l'image */
  height: 20px; /* Ajuste la taille de l'image */
  background-image: url('images/marguerite.png'); /* L'URL de ton image */
  background-size: cover; /* Pour que l'image s'adapte bien */
  margin-right: 10px; /* Espace entre l'image et le texte */
  vertical-align: middle; /* Alignement vertical de l'image */
  margin: 10px;
 }
/**
 * Habillage par défaut du composant "sociaux".
 * Cette feuille de style peut-être surchargée.
 *
 * .sociaux.sociaux_themed : habillage activé (icône uniquement)
 * .sociaux.sociaux_simple : habillage désactivé (texte uniquement)
 */

/* Texte caché quand l'abillage est activé */
.sociaux [aria-hidden=true] {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.sociaux__list {
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	        flex-flow: row wrap;
	-webkit-box-align: center;
	        align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sociaux__item {
	margin: 0 0.2em 0.4em 0;
}

a.sociaux__link {
	text-decoration: none;
}

a.sociaux__link:focus,
a.sociaux__link:hover,
a.sociaux__link:active {
	background-color: transparent;
	text-decoration: none;
}

a.sociaux__link:hover .socicon,
a.sociaux__link:focus .socicon,
a.sociaux__link:active .socicon {
	background: #000;
}

a.sociaux__link.spip_out:after,
a.sociaux__link.external:after,
a.sociaux__link[rel=external]:after {
	content: none; /* unicode éventuel avec tinytypo ou autre */
}

/* Icônes et couleurs par type */

.sociaux .socicon {
	display: inline-block;
	font-size: 1.4em;
	padding: .5em;
	border-radius: 1em;
	color: #fff;
	background: #000;
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
}

.sociaux .socicon-facebook {
	background: #3E5B98;
}

.sociaux .socicon-twitter {
	background: #4DA7DE;
}

.sociaux .socicon-mastodon {
	background: #313543;
}

.sociaux .socicon-instagram {
	background: #9C7C6E;
}

.sociaux .socicon-googleplus {
	background: #DD4B39;
}

.sociaux .socicon-blogger {
	background: #ff9b38;
}

.sociaux .socicon-linkedin {
	background: #3371B7;
}

.sociaux .socicon-youtube {
	background: #E02A20;
}

.sociaux .socicon-pinterest {
	background: #C92619;
}

.sociaux .socicon-tripadvisor {
	background: #599541;
}

.sociaux .socicon-vimeo {
	background: #51b5e7;
}

.sociaux .socicon-fickr {
	background: #1e1e1b;
}

.sociaux .socicon-viber {
	background: #7b519d;
}

.sociaux .socicon-whatsapp {
	background: #20B038;
}

.sociaux .socicon-skype {
	background: #28abe3;
}

/****************/
/******* HEADER */
#header { font-family: 'Arkipelago'; text-transform: initial; }
#header .logo div { padding: 0.5em 1.5em; }
#header .logo p {color: #666; }
#nav { border-bottom: 1px solid #3dc6e6; }
.image-container { align-content: center; min-height: 200px; display: flex; overflow: hidden; width: 300px; padding: 5px; border-radius: 8px; flex-direction: column;  }
/****************/
#banner { background-color: #FFF; background-position: center; background-size: auto 100%; background-repeat: no-repeat; border-top: solid 5px yellow; }
/******* BANNER */
#banner .content { display: none; }
/****************/
/********* MAIN */
/* #main .box.features { display: none; } */
#main { border-top: solid 5px yellow; border-bottom: solid 5px yellow; padding: 0; }
#main .container { background: #FFF; padding: 0; min-height: 40vw; /* align-content: center; */ }  
#main .box.highlight { background: #FFF; border-radius: 13px 13px 13px 13px; padding: 20px 0; }
#main .box.highlight header { border-radius: 13px 13px 0 0;}
#main .box.highlight p { text-align:center; }
#main h2.major { display: none; }
#main .container .row { flex-direction: column; justify-content: center; }
/*****************/
/******* ACCUEIL */
#pub {display: flex; flex-direction: row; justify-content: center; align-content: center; gap: 30px; flex-wrap: wrap;  padding: 2em 0}
#pub article { margin-bottom: 0; }
#pub img {max-width: 350px; }
/******************/
/******* pub   ****/
#pub { height: auto; margin: 20px 0; display: flex; flex-direction: row; flex-wrap:wrap; gap: 30px; padding: 0; justify-content: center;  }
#pub h3 {width: 100%; text-align: center; }
#pub article { }
#pub article img { width: 350px; }
/******************/
/* LISTE MOTSCLES */
#main .container .row { padding: 0; margin: 0; }
#main .container > ul.filtre-mots-cles  { position: sticky; top: 60px; border-bottom: 1px solid #3dc6e6; background-color: rgba(255, 255, 255, 0.95); background-image: url(images/overlay.png); width: 100%; z-index: 100; /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 10px 15px rgba(0, 0, 0, 0.15);*/ margin: 0 0 15px 0; padding:  5px 15px; /* border-bottom: 1px dashed black; */  }
ul.filtre-mots-cles { display: inline-flex; justify-content: center; width: 100%; flex-wrap: wrap; }
ul.filtre-mots-cles li { padding: 8px 5px; margin: 0; border-radius: 5px; min-width: 80px; text-align: center; list-style: none; line-height: 20px; }
ul.filtre-mots-cles a { text-decoration: none; font-family: 'Limelight'; color: #3dc6e6; font-size: 0.8em; }
/******************/
/** LISTE AUTEURS */
.pagination ul { margin: 0 auto; max-width: 400px; text-align: center; }
.pagination ul li { display: inline-block; }
/******************/
/* LISTE ARTICLES */
ul.liste_auteurs, .liste_articles { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 0; margin-bottom: 0;  }
ul.liste_auteurs > li, .liste_articles .col-3 { display: flex; flex-direction: column; width: 250px; min-height: 320px; overflow: hidden; margin: 15px  20px 0; padding: 0; }
ul.liste_auteurs li a { width: calc(100% - 10px); height: 240px;   margin: 5px; overflow: hidden; align-content:center; }
ul.liste_auteurs img { object-fit: cover; }
/********************/
ul.liste_livres li a { height: 300px; }
.nom_logo, .liste_articles h3 { color: #fff; text-shadow: 1px 1px 1px #000; text-align: center; background: rgba(39, 174, 96, 0.8); font-weight: bold; width: 100%; height: 50px; padding-top: 10px; position: absolute; bottom: 0; margin: 0; }
ul.liste_auteurs .liste_mots { text-transform: italic; font-size: 0.8em; display: flex; flex-wrap: wrap; justify-content: center; position: relative; bottom: 0; } 
/****************/
/* PAGE AUTEUR */
/******* nuage de mots */
#myCanvasContainer { width: 430px; margin: 15px auto; }
#myCanvas ul li a { font-size: 130% !important; color: yellow !important; text-shadow: 2px 2px 2px #000 !important; }
/****************/
/* FICHE AUTEUR */
.fiche-auteur { align-content: center; display: flex; flex-direction: column; justify-content: center; padding: 0 20px;  }
.fiche-auteur #fa-entete { display: inline-flex; /* max-width: 600px;*/ margin: 10px auto; }
.fiche-auteur #fa-entete .image-container { margin: 0 20px; }
/* .fiche-auteur #fa-entete img { margin: 0 20px; box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.2); } /
.fiche-auteur picture { width: 250px; margin: 10px 20px; float:left; }
#nom_auteur { padding-top: 40px; }
.portfolio { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; text-align: center; }
.portfolio li { display: flex; justify-content: center; align-items: center;overflow: hidden; position: relative; }
.portfolio li img { height: 100%; width: 100%; object-fit: cover; }
/****************/
/******* FOOTER */
#footer { background : #27ae60; padding: 1em 0; }
#footer p { color: #FFF; font-weight: 500; }
#footer .logo-footer img { height: 70px; }
/*** footer hack */
#footer .row.gtr-200 > * { padding: 0; }
ul.meta{ display: none; }
#footer #contact { display: none; }
#copyright2 { display: inline-block; background: #e7eae8; padding: 0.75em 2em 0.75em 2em; border-radius: 8px; color: #8b9790; margin: 2em 0 0 0; }
#copyright2 a { color: inherit; }
#copyright2 .menu { margin: 0; }
#copyright2 .menu li { border-color: #C1CAC5; border-width: 2px; line-height: 1em; }
/****************/
/****** ACCUEIL */
body.homepage section#main .features {display: none; }
.nologo_auteur { /* width: 20%; min-width: 360px; max-width: 500px; */ } 
/****************/
/** PARTENAIRES */
.partenaire { display: flex; align-items: flex-start; clear: both; margin-bottom: 3em; }
.partenaire .description { flex: 1; /* Le texte prend tout l'espace restant */ }
.partenaire img, .partenaire iframe {width: auto;  height: auto; object-fit: cover; min-width: 100%; min-height: 100%; }
.partenaire a { color: green; }
.box.page-content h2 {color: #6b7770; }
.map { height: 300px; }
/*********************/
/** PARTENAIRES-SUITE*/
.liste-partenaire { display: flex; flex-direction: row; align-content: center;justify-content: center; justify-content: space-around; flex-wrap: wrap; }
.liste-partenaire p { margin: 10px; align-content: center; height: 250px;}
.liste-partenaire a { align-content: center; height: 100%; width: 100%; }
/* Règles pour les écrans de 740px ou moins */
.liste-illustrations { display: flex; align-content: center; justify-content: center;   flex-wrap: wrap;}
.liste-illustrations .image { height: 250px; }
/*********************/
/** PARTENAIRES-DEROULANT*/
h2.spip.clickable {
  cursor: pointer;
  position: relative;
  padding-left: 2.5em;
  transition: all 0.3s ease;
  margin: 1em 0;
}

/* ▶ flèche quand fermé */
h2.spip.clickable::before {
  content: "▶";
  position: absolute;
  left: 20px;
  top: 0;
  font-size: 1.2em;
  line-height: 1.4;
  transition: opacity 0.3s ease;
}

/* Cache la flèche quand ouvert */
h2.spip.clickable.open::before {
  content: "";
}

/* Affiche la marguerite quand ouvert
h2.spip.clickable.open::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('images/marguerite.png');
  background-size: cover;
  margin-left: -2em;
  margin-right: 0.5em;
  vertical-align: middle;
  position: absolute;
  left: 0;
  top: 0;
} */

h2.spip.clickable:hover {
  text-decoration: underline;
  color: #2a6496;
}

@media (max-width: 740px) {
	body, body.homepage { font-size: 0.95em; padding: 90px 0 0 0; }
	#titleBar { background-color: #3dc6e6; max-height: 88px; }
	#titleBar .title {font-size: 0.85em; }
	section#banner, .liste-illustrations, .image-container img { display: none; }
	#myCanvasContainer { max-width: 100vw; }
	.fiche-auteur { padding: 0; }
	.fiche-auteur picture { width: 300px; margin: 10px 20px; float: none; }
	.partenaire { flex-direction: column; align-content: center; }
	.partenaire .image-container, .partenaire img  { display: none; }
	#main .container > ul.filtre-mots-cles { position: sticky; top: 90px; }
	.fiche-auteur #fa-entete { display: flex; max-width: 100vh; margin: 10px auto; flex-direction: column; width: 100%; }
	.fiche-auteur #fa-entete .image-container { margin: 0 auto; }
	h1, h2 h3 { text-align: center; }
	.map { margin: 0 auto; }
	.fiche-auteur #fa-entete .image-container  { margin: 0 auto; justify-content: center;  }
	h2.spip.clickable::before { left: 0; top: -5px; }
}