/* 
Theme Name: NewWesthLite
Theme URI: westhoekpedia.org
Description: Thème Wordpress créé pour le site westhoekpedia.org
Author: WesthoekPress
Author URI: westhoekpedia.org
Version: 2.2
*/
@font-face {
    font-family: 'Noto Serif';
    src: url('https://www.westhoekpedia.org/wp-content/themes/WestLite/font/NotoSerif-Regular.ttf') format('truetype');
    font-weight: normal;
    font-display: swap;
    }
html {
    font-size:16px;
    background:white;
    }
body {
    width:100%;
    max-width:900px;
    margin:-1px auto;
    font:16px 'Noto Serif', serif;
    color:#111;
    cursor: default;
    }
* {
    box-sizing: border-box;
    }
main,
header, 
section, 
nav, 
hgroup, 
article, 
aside, 
footer,
figure{
    display: block;
    padding:0;
    margin:0;
    }

/* Liens */
a:link, 
a:visited, 
a:hover,
a:active{
    text-decoration:none;
    color:black;
    outline:none;
    transition: 0.25s all ease-out;
}

/* Form */
form {
    margin:0;
    padding:0;
}
input, 
textarea {
    margin:4px 0;
    padding:13px;
    outline: 0;
    border:1px solid grey;
    background:transparent;
    font:14px 'Noto Serif', serif;
}
textarea{
    resize: none;
    overflow: hidden; 
    min-height: 30px;
    max-height: 500px;
    box-sizing: border-box; 
}
input[type="submit"] {
    margin:0;
    padding:16px;
    outline: 0;
    border:1px solid #ddd;
    border-radius: 5px;
    background:black;
    color:white;
    font-size:16px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    transition-duration: 0.4s;
    box-shadow: 5px 5px 10px gray;
} 
input::placeholder, 
textarea::placeholder {
    color:black;
    font:16px 'Noto Serif', serif;
}

/* Images */
img.alignright {
	float:right; 
	margin:16px 0 16px 16px;
    line-height:27px;
	}
img.alignleft {
	float:left; 
	margin:16px 16px 16px 0;
    line-height:27px;
	}
img.aligncenter {
	display: block; 
	margin:16px auto;
    line-height:0;
	}
img.alignnone{
	vertical-align: middle;
    line-height:0;
    }
.wp-block-image figcaption {
    margin: 0;
    padding: 0;
    }
figcaption{
    font-size: 15px;
    text-align: center;
    margin: 0;
    padding: 5px 0 0 0;
    }

/* Typo */
abbr{
    text-decoration: none;
    }
u{
    text-decoration:none;
    border-bottom: dotted 2px black;
    outline:none;
    }
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  bottom: -4px;
  top: -8px;
  font-weight: normal;
    }
h1{
    font-size:48px;
    font-weight: normal;
    margin:0;
    padding:0 0 12px 0;
    }
h2{
    font-size: 32px;
    font-weight: normal;
    margin:0 0 12px 0;
    padding:0;
    }
h3{
    font-size: 24px;
    font-weight: normal;
    margin:0 0 8px 0;
    padding:0;
    }

.wp-block-column,
.wp-block-columns{
    margin: 0;
    padding: 0;
    }
.wp-block-table td{
    border: 1px solid black;
    padding: 2px;
    }

ol.wp-block-footnotes {
    padding-left: 1.2em;
    margin-left: 0;
}

ol.wp-block-footnotes li {
    list-style-type: decimal !important;
    margin-bottom: 1rem;
}

/* Contenu entete */
#content {
    float:left;
    width:100%;
    margin:0;
    padding:0;
    background:white;
    }
#content .ariane{
    float: left;
    width: 100%;
    margin:32px 0 0 0;
    }
#entete {
    float:left;
    width:100%;
    margin:10px 0;
    padding:0;
    }
#logo {
    float:left;
    width:500px;
    margin:5px 0;
    padding:0;
    }
#logo h1{
    font-size:32px;
    margin:0;
    padding:0;
    font-weight:normal;
    }
#logo img{
    float:left;
    margin:0 10px 0 0;
    }
#logo h2{
    float:left;
    margin:0;
    padding:0;
    font-size:17px;
    font-weight: normal;
    }
#moteur{
    float:right;
    width:280px;
    margin:16px 0 0 0;
    text-align:right;
    }
#moteur .search{
    width:230px;
    padding:5px;
    outline:0;
    border-top:1px solid transparent;
    border-left:1px solid transparent;
    border-right:1px solid transparent;
    border-bottom:2px solid black;
    background-color:transparent;
    font-size:16px;
    text-align: right;
    }
#menu{
    float:left;
    width:100%;
    margin:18px 0 0 0;
    padding:10px 0;
    font-size:14px;
    }
#menu ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin:0;
    padding:0;
    }
#menu ul > li{
    display:inline;
    list-style-type:none;
    margin:0;
    padding:0;
    text-transform:uppercase;
    }
#menu a{
    position: relative;
    text-decoration: none;
    }  
#menu a::after{
    content: "";
    display: block;
    position: absolute;
    bottom: -3px;
    width: 100%;
    height: 1.5px;
    transform: scaleX(0);
    transform-origin: left;
    background: grey;
    transition: transform 0.3s ease-out;
    }
#menu a:hover::after{
    transform: scaleX(1);
    }
.navbar-toggle{
    display: none;
    }

/* contenu article */
article {
    float:left;
    width:100%;
    margin:24px 0;
    padding:0;
    font-size: 16px;
    }
article h3{
    margin:5px 0;
    font-size:24px;
    font-weight:normal;
    }
article h4{
    float:left;
    width:100%;
    margin:5px 0;
    font-size:20px;
    font-style:italic;
    font-weight:normal;
    }
article ul {
  margin: 0 0 16px 0;
  padding-left: 5px; /* espace pour la puce */
}
article li {
  margin: 0 0 16px 0;
  list-style-type: square;
  list-style-position: outside; /* puce à l'extérieur */
  text-align: left;
}
article .rubrique{
    float:left;
    width:100%;
    margin:5px 0 10px 0;
    }
article .text,
article .textlinks{
    float:left;
    width:100%;
    margin:0 0 24px 0;
    text-align:left;
    line-height:28px;
    }
article .text .infos{
    float:left;
    width:100%;
    margin:0;
    padding:8px 0 30px 0;
    }
article .text .download{
    display:inline-block;
    margin:0 0 20px 0;
    padding:5px 12px;
    background:white;
    border:1px solid #ccc;
    color:black;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition-duration: 0.2s;
    } 
article .text .download:hover{
    box-shadow: 5px 5px 10px #ddd;
    }
article .text .download a{
    color:white;
    }
article .text .download img{
    vertical-align:text-bottom;
    }
article .text blockquote,
article .textarchives blockquote{
    position:relative;
    z-index:0; 
    margin:0;
    padding:16px 50px;
    }
article .text blockquote:before,
article .textarchives blockquote:before{
    position:absolute;
    z-index:-1;
    left:-10px;
    top:40px;
    content:"\201C";
    font-size:110px;
    }
article .text .suite, 
article .textarchives .suite{
    float:left;
    margin:10px 0 20px 0;
    padding:5px 20px;
    background:black;
    color:white;
    font-size:15px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    transition-duration: 0.4s;
    box-shadow: 5px 5px 10px gray;
    }
article .text .suite a, 
article .textarchives .suite a{
    color:white;
    }
article .text .listcol{
    column-count: 2;
    column-gap: 0;
    text-align: left;
    }
article .text .listcol ul,
article .text .listcol li{
    margin: 0;
    padding: 0;
    }
article .textarchives{
    float:left;
    width:100%;
    text-align:left;
    line-height:27px;
    }
article .listcol{
    padding-left: 16px;
}
article .text ul,
article .textarchives ul,
article .text .listbook ul{
    margin: 0 0 16px 0;
    padding-left: 16px; /* espace pour la puce */
    }
article .text li,
article .textarchives li,
article .text .listbook li{
    margin: 0 0 16px 0;
    list-style-type: square;
    list-style-position: outside; /* puce à l'extérieur */
    text-align: left;
    }
article .print{
    float:left;
    width:100%;
    margin:30px 0;
    text-align:center;
    font-style:italic;
    }
article .textlinks{
    column-count: 2;
    }
article .textlinks ul{
    margin:0;
    padding:0;
    }
article .textlinks li{
    margin:0;
    padding:0;
    list-style-type: none;
    list-style-position: outside;
    text-align:left;
    }
article .linkcat li{
    margin:0;
    padding:0;
    list-style-type: none;
    list-style-position: outside;
    line-height: 27px;
    }
article .link{
    float: right;
    width: 49%;
    margin: 48px 0;
    padding:8px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 35px;
    }
article .link2{
    float: left;
    width: 49%;
    margin: 48px 0;
    padding:8px 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 35px;
    }
article .link a,
article .link2 a{
    margin:8px 0;
    padding:8px 16px;
    background:#eee;
    color:black;
    }

.button,
article .button{
    display: inline-block;
    margin-left: 4px;
    padding:0 6px;
    background:#eee;
    color:black;
    font-size:15px;
    }

/* vignettes photos */
article .album{
    padding: 10px 0;
    }
article .album{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    }
article .album img{
    width: 100%;
    height: 280px;
    object-fit: cover;
    box-shadow: 2px 2px 8px #ddd;
    transition: transform .2s;
    }
article .album img:hover{
    transform: scale(1.05);
    }
article .album_books{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    }
article .album_books img{
    width: 100%;
    height: 230px;
    object-fit: cover;
    box-shadow: 2px 2px 8px #ddd;
    transition: transform .2s;
    }
article .album_books img:hover{
    transform: scale(1.05);
    }

/* templates archives */
article .archives form{
    margin:0;
    padding:0 0 40px 0;
    }
article .archives input[type="text"]{
    width: 300px;
    }
.liste-archives{
    display: flex;
    flex-direction: column;
    gap: 20px;
    }
.archives-item{
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 15px 0;
    }
.archives-item .thumbnail-archives img{
    width: 150px;
    height: 150px;
    object-fit: cover;
    box-shadow: 2px 2px 8px #ddd;
    transition: transform .2s;
    }
.archives-item .thumbnail-archives img:hover{
    transform: scale(1.15);
    }

.archives-item .content-archives{
    flex: 1;
    }
.archives-item h4{
    margin: 0 0 10px 0;
    font-size: 20px;
    line-height: 1.2;
    font-style: normal;
    font-weight: normal;
    }
.archives-item h4 a{
    text-decoration: none;
    }
.archives-item .tags{
    font-size: 15px;
    }
.archives-item .date{
    font-size: 13px;
    padding-top: 10px;
    }


/* footer */
#mentions {
    float:left;
    width:100%;
    margin:50px 0;
    padding:0;
    font-size: 15px;
    text-align:center;
    }
#mentions a{
    text-decoration:none;
    border-bottom: dotted 1px black;
    outline:none;
    }

/*Pagination*/
.pagination{
    clear:both;
    position:relative;
    padding:20px 10px;
    line-height:29px;
    }
.pagination span, 
.pagination a{
    float:left;
    width:auto;
    display:block;
    margin:2px;
    padding:6px 8px;
    text-decoration:none;
    border:1px solid white;
    color:gray;
    }
.pagination a:hover{
    border:1px solid gray;
    color:black;
    background-color:white;
    }
.pagination .current{
    margin:2px;
    padding:6px 6px;
    background-color:black;
    font-weight:700;
    color:white;
    }

/*Commentaires*/
article .commentaires,
article .commentlist{
    float:left;
    width:100%;
    line-height: 25px;
    }
article .commentaires li{
    list-style-type: none;
    list-style-position: outside;
    }
article .commentlist li p{
    margin:0;
    padding:10px 0 0 0;
    list-style-type: none;
    list-style-position: outside;
    }
article .commentlist li ul.children li{
    padding:0 0 0 50px;
    }
article .author_date{
    padding:10px 0 0 0;
    }
article .reply{
    float:left;
    width:100%;
    margin:10px 0 20px 0;
    font-style:normal;
    }
article .reply .comment-reply-link, 
.comment-reply-login{
    margin:0 1px;
    padding:5px;
    border:1px solid #ddd;
    background:#eee;
    font-size:13px;
    color:black;
    }
#respond{
    float:left;
    width:100%;
    margin:20px 0 0 0;
    text-align:left;
    }
article .searchform,
#respond .searchform{
    width:560px;
    border-top:1px solid transparent;
    border-right:1px solid transparent;
    border-left:1px solid transparent;
    border-bottom:1px solid #ddd;
    }

input#cren_subscribe_to_comment, input#cren_gdpr{
    margin-right: 10px;
    }


/*Personnalisation Contactform7*/
/* Style general du formulaire */
.wpcf7 {
    max-width: 700px;
    margin: 0;
    padding: 0;
    }
.wpcf7-form fieldset,
.screen-reader-response{
  display: none;
    }

/* Style des champs de formulaire */
.wpcf7-form-control:not(.wpcf7-submit) {
    width: 100%;
    padding: 10px;
    margin-bottom: 5px;
    outline: 0;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font:16px 'Noto Serif', serif;
    }

/* Style du bouton de soumission */
.wpcf7-submit {
    width:auto;
    margin:5px 0;
    padding:16px;
    outline: 0;
    border-radius:5px;
    background:black;
    color:white;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition-duration: 0.4s;
    box-shadow: 5px 5px 10px gray;
    }

/* Style des labels */
.wpcf7 label {
    display: block;
    margin-bottom: 5px;
    }

/* Style des messages de validation */
.wpcf7-not-valid-tip {
    color: #ff0000;
    font-size: 14px;
    }

/* Style du message d'erreur */
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
    margin: 20px 0;
    padding: 0;
    color : #ff0000;
}
/* Message de succès */
.wpcf7-mail-sent-ok,
.wpcf7 form.sent .wpcf7-response-output {
    color: #28a745 !important; /* vert */
    font-weight: bold;
}


/*Personnalisation de TablePress*/
.tablepress thead th,
.tablepress tfoot th{
    background-color: black;
    color:white;
    font-weight: normal;
    }
.tablepress thead .sorting_asc,
.tablepress thead .sorting_desc,
.tablepress thead .sorting:hover{
    background-color: black;
    color: white;
    }
.dataTables_filter {
	float: left;
	white-space: nowrap;
    margin:8px 0;
    }
.dataTables_filter label{
    font-size:19px;
    line-height: 24px;
    }
.dataTables_wrapper .dataTables_filter input {
	margin-left: 8px;
    padding:4px;
    border-top:1px solid transparent;
    border-left:1px solid transparent;
    border-right:1px solid transparent;
    border-bottom:2px solid black;
    background-color:transparent;
    line-height: 24px;
    font-size: 19px;
    }
.paging_simple .paginate_button.previous:before,
.paging_simple .paginate_button.next:after {
	text-align: left;
	font-family: TablePress;
	font-size: 14px;
	font-weight: bold;
	-webkit-font-smoothing: antialiased;
	content: "";
	text-shadow: 1.6px 1.6px #666666;
	position: absolute;
	top: 0;
	right: auto;
	bottom: 0;
	left: -14px;
	margin: auto;
	height: 14px;
	width: 14px;
	line-height: 1;
    }
.paging_simple .paginate_button.next:after {
	text-align: right;
	content: "";
	left: auto;
    }
.dataTables_scrollBody{
    scrollbar-color: white white;
    scrollbar-width: thin;
    }
.dataTables_info{
    width: 100%;
    text-align: center;
    }
.dt-search{
    float: left;
    text-align: left;
    }

/* Leaflet Map */
.leaflet-popup-content{
    text-align: center;
    }
.leaflet-popup-content-wrapper,.leaflet-popup-content{
    border-radius:0 !important;
    }

/* Chronologie */
.timeline-block_title{
    font-size: 20px;
    }

/* DIVERS */
.wb-details-image img{
    box-shadow: 5px 5px 10px gray;
    }

.fancybox-title-outside{
    float:left;
    width: 100%;
    padding-top:10px;
    color:#fff;
    font-weight:normal !important;
    text-align: center;
    }

/* scrolltop */
#scrollToTop {
    position: fixed;
    bottom: 50px;
    right: 50px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
    z-index: 9999;
    cursor: pointer;
    }
#scrollToTop.visible {
    opacity: 1;
    visibility: visible;
    }
#scrollToTop img {
    width: 56px;
    height: auto;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: opacity 0.3s;
    }

/*VS Events List*/
#vsel h3{
    font-size: 24px;
    padding-bottom: 25px;
}
.vsel-alignleft{
    text-align: center;
}
#vsel figcaption{
    display: none;
}


@media (width <= 900px) {
body{
    width:100%;
    max-width:100%;
    font-size: 14px;
    margin: -1px auto;
    padding: 10px;
    }
.alignright, 
.alignleft, 
.aligncenter{
    display: block;
    width: 100%;
    margin:16px auto;
    }
figure img{
    width: 100%;
    }

/* entete */
#logo{
    float:left;
    width:100%;
    margin:5px 0;
    padding:0;
    }
#logo h1{
    width: 100%;
    font-size:28px;
    margin:0;
    padding:0;
    font-weight:normal;
    }
#logo img{
    width: 83px;
    height: auto;
    }
#logo h2{
    font-size:13px;
    }
#moteur,
#menu,
article .linkcat{
    width:100%;
    }
#moteur .search{
    width:99%;
    font-size:18px;
    text-align: center;
    }

/* Menu mobile (hamburger) */
.navbar-toggle{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding: 4px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    }
.navbar-toggle span{
    display: block;
    width: 28px;
    height: 2px;
    background: black;
    transition: transform 0.25s ease, opacity 0.25s ease;
    }
#menu.show .navbar-toggle span:nth-child(1){
    transform: translateY(7px) rotate(45deg);
    }
#menu.show .navbar-toggle span:nth-child(2){
    opacity: 0;
    }
#menu.show .navbar-toggle span:nth-child(3){
    transform: translateY(-7px) rotate(-45deg);
    }
#menu ul{
    display: none;
    flex-direction: column;
    width: 100%;
    margin-top: 12px;
    }
#menu.show ul{
    display: flex;
    }
#menu ul > li{
    list-style-type: square;
    list-style-position: inside;
    margin:0;
    padding:0 0 12px 0;
    text-transform: uppercase;
    }

/*contenu*/
article .text blockquote,
article .textarchives blockquote {
    padding:16px  0 16px 50px;
    }
article .text .listcol {
    column-count: 1;
    }
article .album{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    }
article .album img{
    width: 100%;
    height: auto;
    object-fit: cover;
    box-shadow: 2px 2px 8px #ddd;
    transition: transform .2s;
    }
article .album_books{
    display: none;
    }
article .textlinks{
    column-count: 1;
    }

/*Commentaires*/
article .commentlist li p {
    margin:0;
    padding:10px 0 0 0;
    }
article .commentlist li ul.children li {
    padding:0 0 0 10px;
    }
article .author_date {
    padding:10px 0 0 0;
    }
#respond .searchform,
article .searchform {
    width:80%;
    }

/* Divers */
#scrollToTop{
    display: none;
    }
    
/*Personnalisation de Contact Form 7*/
.wpcf7 {
    max-width: 100%;
    margin: 0;
    padding: 0;
}
}

@media (width <= 480px) {
h1{
    font-size: 32px;
    }
h2{
    font-size: 24px;
    }
h3{
    font-size: 20px;
    }
article .archives input[type="text"]{
    width: 100%;
    }
.archives-item{
    flex-direction: column;
    gap: 10px;
    }
.archives-item .thumbnail-archives img{
    width: 100%;
    height: auto;
    max-height: 220px;
    }
article .searchform,
#respond .searchform{
    width: 100%;
    }
}