@charset "UTF-8";
@import 'styles-police-candara.css';
@import url('https://fonts.googleapis.com/css?family=PT+Sans');

@couleur_01:#333333;
/*.boite{display:block;margin:auto;text-align:center;max-width:86em;}*/
.boite{display:block;margin:auto;text-align:center;font-size:1.8rem;padding:10px;margin-top: 6rem;}
.border-black{border: 1px solid #444444;}
.border-rge{border: 1px solid #FF0000;color:#FF0000;}

/*conteneur fluide*/
.clearfix::after,.line::after {content: "";display: table;clear: both;border-collapse: collapse;}

.portfolio { padding: 15px;margin-left: 2rem; width: 100%;}
.portfolio img{float:left;margin:0 20px 20px 0;width: auto;}

.portfolio_inverse p{text-align:left;}
.portfolio_inverse img{float:right;padding:2px;margin-left:20px;width:200px;height:auto;}
.portfolio-bord img{float:left;margin-right:30px;padding-right:20px;border-right:1px solid #D5D1B7;}

.flex-contain {display: flex; align-items: center; justify-content: center;}
.flex-item {flex: 1 ; text-align:center;}

.flex-contain-equipe {display: flex; align-items: center; justify-content: center;flex-wrap: wrap;}
.flex-item-equipe {flex: 1 1 25% ; }

.img_centree { display: block;margin: 0 auto;}
.txtcenter{ text-align: center; }
.center {margin-left: auto;margin-right: auto;}
/*conteneur fluide 1 bloc */
.center_flex{display: flex; justify-content: center; align-items: center;}
/* === Général === */
html{
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%2396ac92' fill-opacity='0.2' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}
html, body { padding:0; margin: 0; font-family:"Helvetica Neue","Helvetica",sans-serif;
	font-size: /*voir knacss ligne 405*/;font-weight:normal;font-style:normal;color:@couleur_01;line-height:1.5;scroll-behavior: smooth;}
body{width: 100%; min-height: 800px;margin-bottom:100px;}
aside{}
footer{ width: 100%;min-height:100px;background: #DEDEDE;font-size: 0.9em;}

#content {background-color: #EBEBEB;margin: 0 auto 0 auto;max-width:1200px;}
#main{padding:40px 0; }

h1, h2, h3, h4, h5{font-family: 'PT Sans', sans-serif;font-weight:400;font-style:normal;line-height:1.2; padding-left:10px;letter-spacing: 0.04em;}
.h1-like {font-size: 2.4rem;padding:20px 0 20px 20px;}
.h2-like {font-size: 2.0rem;}
.h3-like {font-size: 1.8rem;padding:3px 10px;color:#3c481e;width:100%;border-bottom:1px solid @couleur_01;}/*actus*/
.h4-like {font-size: 1.8rem;line-height:0.8;}
.h5-like {font-size: 1.4rem;font-weight:bold;}
.img{ display: block; width: 100%;}
a,a:focus,a:active {color:@couleur_01;text-decoration:underline}
a:hover{text-decoration: none;color:green;}
.lien_interne{text-decoration:none}	

.logo{display:block;margin:auto;padding-top:20px; padding-bottom:20px; padding-left:45px;}
.bandeau{max-width:1200px;margin:auto;}
.marges{padding:0 30px;}
.nouveau{width:95%;margin:10px auto;padding:5px 0;color:#fff;font-size:1.8rem;text-align:center;background-color:#31abdd;border: 1px solid #134B70;border-radius: 15px 15px 0px 0px;}
#btn_up{display:none;position:fixed;top:50%;right:7%;width:64px;height:80px;cursor:pointer;background:url(../elements/up-64x80.png) no-repeat left top transparent;}/*retour haut de page*/
a[href$=".pdf"]:before{content:url(../elements/Gnome-mime-application-pdf.svg.png);padding-right: 4px;}
a[target="_blank"]:after { content: url(../elements/Icon_External_Link.svg);padding-left: 4px;}	
a[alt="note"] {color:blue;padding-left:2px;text-decoration:none}

/*==================
	ACCUEIL
===================*/
/* header ne pas toucher ! */
.titre{margin:40px auto;position:;width:100%;max-width:750px; margin:;}
.titre img{position:absolute;}
.h1-title, .h2-title {padding-left:50px;letter-spacing: 0.04em;}
.h1-title {font-size:2.4rem;line-height:0;}
.span_titre{font-size: 1.4rem;}
.h2-title {font-size: 1.4rem;color:#31abdd;line-height:1.4;font-style:italic;}
/* /header */
.actus{width:100%;padding:0  20px 10px 10px;}
.actus p{padding:10px 10px;min-height:10px;border-bottom:px solid @couleur_01;}

aside img{margin:auto;}

/* === tooltips === */
a.tooltips {position: relative;display: inline;}
a.tooltips span {padding:10px;position:absolute;width:160px;color:#FFFFFF;background:#282828;height:auto;text-align:center;visibility:hidden;border-radius:20px;}
a.tooltips span:after {content: '';position: absolute;top: 100%;left: 50%;margin-left: -8px;width: 0; height: 0;
  border-top: 8px solid #282828;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;}
a:hover.tooltips span {visibility: visible;opacity: 0.9;bottom: 30px;left: 50%;margin-left: -76px;z-index: 999;}

/*=== fenetre modal ===*/
#overlay{display: none;position: fixed;top:0; right:0; bottom:0; left:0;background-color: rgba(0, 0, 0, 0.5);z-index: 1000;}
#overlay:target{display: block;}
.popup_block{background: #302613;padding: 20px;border: 10px solid #ddd;position: relative;margin: 10% auto;
    width: 30%;min-height:400px;box-shadow: 0px 0px 20px #000;border-radius: 10px;}
img.btn_close {float: right;margin: -50px -35px 0 0;}

/*==================
	ARTICLES LIVRES
	.livres{margin: 30px auto; }
	.livres img{padding-right: 30px }
	.livres p{padding-left: 30px }
====================*/
.chapitre{list-style-type:none;}


.border-left{border-left: 1px solid @couleur_01;}
/*==================
	FOOTER
====================*/
.col_1 {margin:auto;}

 /*=== menu mentions ===*/  
a.mentions:link, a.mentions:active, a.mentions:visited {text-decoration:none;color:@couleur_01}    
a.mentions:hover{text-decoration:underline}

/*==================
	PAGE LIVRES
===================*/
/* Conteneur général */
.bibliotheque{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
    gap:20px;
}

.livres{
    display:grid;
    grid-template-columns:120px 1fr;
    gap:18px;

    border:1px solid #ddd;
    border-radius:6px;
    padding:15px;
    box-sizing:border-box;
}

.livres img{
    width:120px;
    height:180px;
    object-fit:cover;
}

.infos{
    border-left:2px solid #999;
    padding-left:15px;
}

.infos h3{
    margin:0 0 12px;
    font-size:1.15rem;
    line-height:1.3;
}

.infos p{
    margin:0;
    line-height:1.6;
}

.infos strong{
    font-size:1.2rem;
}


/*==================
	PAGE CONTACT
===================*/
::placeholder{color:#aaaaaa;}
::placeholder:focus{color:#fff;}

input, textarea{display:block;color:#000;border:0px;resize:none;padding:0 10px;
	-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;/*empeche le redimensionnement des éléments avec :hover */
		-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;}
textarea{width:80%;}
input[type="text"],input[type="email"],.erreur {width:60%;height:30px;}	
input[type="text"]:hover,input[type="email"]:hover,textarea:hover{background-color:#f4f4f4;border-left:4px solid #6699ff;}
textarea:focus, input[type="text"]:focus, input[type="email"]:focus{background-color:#f4f4f4;border: 1px solid #6699ff;border-left:4px solid #6699ff;outline:none;}
input[type="submit"]{display:block;outline:none;cursor:pointer;text-align:center;text-decoration:none;padding:.5em 2em .55em;
	border-radius:5px;box-shadow:0 1px 2px rgba(0,0,0,.2);margin-top: 5px;color:#fef4e9;border:solid 1px #da7c0c;background: #4f4f4f;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
	background: -o-linear-gradient(top,  #faa51a,  #f47a20);
}
input[type="submit"]:hover{color:#990000;}

.icone{font-family:heydings_iconsregular; font-size:1.3em; line-height:1.4em; color:#fff;}

.captcha{font-weight:bold;cursor:text;}
.remarque{display: none!important;}/*classe du champ caché anti-spam*/

.erreur{color:#ad0000;font-size:16px;font-weight:400;padding:2px 5px;/*background-color: #FAB9AD;*/}
.erreur-bordure{caret-color: #ad0000;border: 1px solid red !important;border-left:5px solid red !important;}

.alert{padding: 15px;margin:10px auto;width: 90%;border: 1px solid transparent;border-radius: 4px;text-align:center;font-size:18px;}
.alert_info{color: #1a3b9d;background-color: #d9edf7;border: 1px solid #6b87d9;}
.alert_warning{color: #9f0606;background-color: #fcf8e3;border: 1px solid #8a6d3b;}

/*=====================
	MEDIA QUERIES
======================*/
/* ---------------------------------- */
/* ==Responsive medium                */
/* ---------------------------------- (min-width: 641px) */
@media only screen and (max-width: 960px) {
	body{margin-top:0;margin-bottom:70px;}
	.marges{padding:0 20px 0 30px;}
	.portfolio p{padding-top:5px;}
}

@media only screen and (max-width: 640px){
	/* Un message personnalisé
	body:before {content:"Version mobile du site";display:block;text-align:center;font-style:italic;color:#fff;} */
	html, body {font-size: 1.0em; }
	body{margin-top:0;margin-bottom:0px;}
	#content{}
	.marges{padding:0 0 0 5px;}
	.nouveau{margin:10px auto;font-size:1.2rem;}
	#main{padding:1rem;}
	.actus{padding:20px 0 0 15px;}
	.actus p{padding:5px 5px;min-height:10px;border-bottom:1px solid @couleur_01;}
	.titre{margin:10px 0;}
	.h1-title {font-size: 1.2rem;line-height:1.1;padding-left:15px;letter-spacing: 0.0em;}
	.span_titre{font-size: 0.8rem;}
	.h2-title {font-size: 1.0rem;padding-left:15px;letter-spacing: 0.0em;}
	
	.portfolio{width:100%;margin:2rem auto 2rem auto;}	
	.portfolio img{float:none;margin:0 auto;display:block;padding-bottom:0px;}	
	
	.h1-like {font-size: 1.6rem;}
	.h2-like {font-size: 1.4rem;}
	.h3-like {font-size: 1.2rem;}
	.h4-like {font-size: 1.0rem;}

	.popup_block{width: 80%;}
	
	/* contact */
	fieldset{width:95%;margin:10px;}		
	input[type="text"],input[type="email"],.erreur{width:95%;}
	textarea{width:95%;}
	input[type=submit]{margin:10px;}
}


@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}