@charset "UTF-8";
/*********************************/
/* Bourse-aux-Équipiers.com - v7 */
/* Date : 2023-04-03 */
/*********************************/
/*************************************************************/
/* HTML + BODY */
/*************************************************************/
@media print{
@page{
size: A4 portrait;
margin: 1cm 1cm 2cm 1cm;
@bottom-right {
content: "page " counter(page) " sur " counter(pages);
}
}
html,body{
width: 19cm;
margin: 0;
padding: 0;
}
body{
margin-top: 2cm;
}
}
@media screen{
html{
height: 100%;
min-height: 100%;
background-color: #6fb4ff;
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body{
display: flex;
flex-direction: column;
width: 100%;
min-width: 320px;
min-height: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #252a53;
font-family: Lato, sans-serif;
font-size: 15px;
}
}
/*************************************************************/
/* HEADER */
/*************************************************************/
@media print{
body>header>small,body>header>div{
display: none;
}
body>header>a>#logo{
position: absolute;
top:0;
left:0;
height: 15mm;
}
}
@media screen{
body>header{
display: flex;
align-items: flex-start;
background-color: #6fb4ff;
}
/* logo */
body>header>a{
align-self: center;
}
body>header>a>#logo{
display: block;
height: 85px;
margin: 0;
}
/* memberbox */
body>header>div#memberbox{
flex: 1;
justify-content: end;
display: flex;
margin-top: 10px;
}
body>header>div#memberbox>a{
color: #252a53;
font-family: lato;
font-size: 16px;
font-weight: bold;
text-decoration: none;
display: block;
padding: 6px 10px;
border: 2px solid #252a53;
color: #252a53;
background: #ffffff;
}
body>header>div#memberbox>form{
margin: 5px;
}
body>header>div#memberbox>form>button{
/*height: 30px;
margin-left: 10px;
color: #264b6f;
font-size: 14px;
cursor: pointer;*/
color: #e74411;
background-color: white;
font-size: 16px;
font-weight: bold;
cursor: pointer;
border: 2px solid #252a53;
padding: 6px 10px;
font-family: lato;
}
body>header>div#smallmemberbox{
display: none;
}
}
@media screen and (max-width:767px){
body>header{
position: fixed;
top: 0;
width: 100%;
min-width: 320px;
height:48px;
margin: unset;
padding: unset;
background-color: #6fb4ff;
z-index: 100;
}
/* logo */
body>header>a>#logo{
height: 48px;
margin-left: unset;
display: block;
}
/* memberbox */
body>header>div#memberbox{
display: none;
}
body>header>div#smallmemberbox{
display: flex;
margin-left: auto;
margin-right: 48px;
align-self: center;
}
body>header>div#smallmemberbox>a>button{
width: 28px;
overflow: hidden;
height: 28px;
padding: 0;
/*! margin: 0 0 5px 0; */
box-sizing: border-box;
text-rendering: unset;
appearance: none;
border: 0;
cursor: pointer;
color: rgba(0,0,0,0);
background-image: url('/images/glyph-ffffff-48/glyph_003.png');
background-size: 24px 24px;
background-color: unset;
background-repeat: no-repeat;
background-position: top center;
}
}
@media screen and (min-width:768px) and (max-width:1079px){
body>header{
padding: 5px;
}
}
@media screen and (min-width:1080px){
body>header{
padding: 5px calc((100% - 1080px) / 2 + 5px );
}
}
/*************************************************************/
/* NAVIGATION */
/*************************************************************/
@media print{
#nav{
display: none;
}
}
@media screen and (max-width:767px){
#nav{
position: fixed;
top: 48px;
left:0;
width:100%;
margin:0;
z-index: 10000;
}
#nav:target,
#nav.open{
height: calc(100% - 60px);
}
/* boutons afficher/masquer menu */
#nav>a{
display: none;
position: absolute;
top: -40px;
right: 10px;
}
#nav>a>button{
display:block;
width: 28px;
overflow: hidden;
height: 28px;
padding: 0;
margin: 0;
box-sizing: border-box;
text-rendering: unset;
appearance: none;
border: 0;
cursor: pointer;
color: rgba(0,0,0,0);
background-image: url('/images/glyph-ffffff-48/glyph_158.png');
background-size: contain;
background-color: unset;
}
#nav.open>a>button{
background-image: url('/images/glyph-ffffff-48/glyph_197.png');
}
#nav:not(:target)>a:first-of-type,
#nav:target>a:last-of-type{
display: block;
}
#nav.open>a:first-of-type,
#nav.close>a:last-of-type{
display: none;
}
#nav.close>a:first-of-type,
#nav.open>a:last-of-type{
display: block;
}
/* 1st level */
#nav1{
box-sizing:border-box;
position: absolute;
top: 0;
left: calc(100% - 320px);
width: 320px;
max-height: 100%;
overflow: scroll;
clip: rect(0,320px,2000px,-30px);
display: none;
flex-direction: column;
margin: 0;
padding: 10px 10px 20px 10px;
background-color: #fff;
box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.4);
list-style: none;
}
#nav:target>#nav1,
#nav.open>#nav1{
display: flex;
}
#nav1>li>a{
display: block;
padding: 5px;
font-size: 16px;
}
#nav1>li.current>a{
font-weight: bold;
}
/* 1st level / sous menu */
#nav1>li>ul{
display: none;
flex-direction: column;
margin: 0;
padding: 0 0 0 20px;
list-style: none;
}
#nav1>li:hover>ul,
#nav1>li.current>ul{
display: flex;
}
#nav1>li>ul>li>a{
display: block;
padding: 5px;
font-size: 16px;
}
#nav1>li>ul>li.current>a{
font-weight: bold;
}
/* 2nd level */
#nav2{
display: none;
}
}
@media screen and (min-width:768px){
body>nav{
/*position: sticky;
top:0;
background-color: #6fb4ff;
z-index:5000;*/
background-color: #6fb4ff;
}
body>nav>a{
display: none;
}
/* 1st level */
body>nav>ul#nav1{
display: flex;
margin: 0;
padding: 0;
border-bottom: 5px solid #d7eaff;
list-style: none;
}
body>nav>ul#nav1>li{
margin: 0;
padding: 5px calc(500% / 768);
}
body>nav>ul#nav1>li>a{
display: block;
padding: 0 5px;
line-height: 35px;
color: #252a53;
text-decoration: none;
text-transform: uppercase;
font-family: Lato;
font-size: 16px;
}
body>nav>ul#nav1>li>a::first-letter{
font-size:19px;
}
body>nav>ul#nav1>li.current{
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center bottom;
}
body>nav>ul#nav1>li.current>a{
font-weight: bold;
}
body>nav>ul#nav1>li:nth-child(5){
margin-left: auto;
}
body>nav>ul#nav1>li>ul{
display:none;
}
/* 2nd level */
body>nav>ul#nav2{
display: flex;
justify-content: center;
margin: 0;
padding: 0;
background-color: #d7eaff;
list-style: none;
}
body>nav>ul#nav2>li{
margin: 0;
padding: 0 10px 5px 10px;
}
body>nav>ul#nav2>li>a{
display: block;
padding: 0 5px;
line-height: 30px;
color: #252a53;
text-decoration: none;
font-family: Lato;
font-size: 16px;
}
body>nav>ul#nav2>li.current{
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center bottom;
}
body>nav>ul#nav2>li.current>a{
font-weight: bold;
}
}
@media screen and (min-width:1080px){
/* 1st level */
body>nav>ul#nav1{
padding: 0 calc((100% - 1080px) / 2);
}
}
/*************************************************************/
/* ZONE PRINCIPALE */
/*************************************************************/
@media screen{
body>main{
box-sizing: border-box;
/*! position: static; */
display: flex;
flex-wrap: wrap;
width:100%;
min-width: 320px;
margin: 0;
padding: 10px 10px 10px 10px;
background-color: #fff;
/*! border-radius: 7px; */
/*box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.3);*/
/*box-shadow: 0px 0px 4px 1px #888;*/
/*margin-top: -20px;*/
/*clip-path: polygon(-10px 10px, 0 10px,0 -10px,100% -10px,100% 10px, calc(100% + 10px) 10px,calc(100% + 10px) calc(100% + 10px),-10px calc(100% + 10px));*/
/*z-index: 10;*/ /* 2023-01 bug adsense */
position: relative;
}
body>main>article, body>main>section{
}
}
@media screen and (max-width:767px){
body>main{
overflow: hidden;
margin: 48px 0 0 0;
/*border-radius: unset;
box-shadow: unset;*/
}
body>main>article, body>main>section{
width: 100%;
margin-right: unset;
}
}
@media screen and (min-width:768px){
body>main{
/*width: calc(100% - 20px);
max-width: 1060px;*/
justify-content: stretch;
}
body>main>article, body>main>section{
width: 100%;
min-width: 520px;
}
}
@media screen and (min-width:870px){
body>main{
flex-wrap: nowrap;
}
body>main>article, body>main>section{
margin-right: 10px;
padding-top: 15px;
}
}
@media screen and (min-width:1080px){
body>main{
padding-left: calc((100% - 1060px) / 2);
padding-right: calc((100% - 1060px) / 2);
}
}
/*************************************************************/
/* ZONE SECONDAIRE */
/*************************************************************/
@media print{
body>main>aside{
display: none;
}
}
@media screen{
body>main>aside{
flex: 1;
display: flex;
flex-wrap: wrap;
}
body>main>aside>div, body>main>aside>form{
box-sizing: border-box;
width: 300px;
margin: 5px;
}
}
@media screen and (max-width:869px){
body>main>aside{
justify-content: space-around;
align-items: flex-start;
margin: 0 -5px;
}
body>main>aside>form{
width: 100%;
}
}
@media screen and (min-width:870px){
body>main>aside{
flex: 0;
flex-direction: column;
}
}
/*************************************************************/
/* PUB */
/*************************************************************/
@media screen{
body>main>aside>div.adslot_1{
width: 300px;
max-height: 600px;
}
}
@media screen and (max-width:479px){
body>main>aside>div.adslot_1{
/*display: none;*/
}
}
/*************************************************************/
/* FOOTER */
/*************************************************************/
@media print{
body>footer>ul{
display: none;
}
}
@media screen{
body>footer{
flex: 1;
display: grid;
grid-auto-flow: column;
width: 100%;
min-width: 320px;
max-width: 1080px;
box-sizing: border-box;
margin: 0 auto;
padding: 10px;
color: white;
text-align: left;
font-size: 16px;
}
body>footer>div:first-of-type>p:nth-of-type(2){
font-size: 18px;
}
body>footer>div:not(:first-of-type)>p{
font-size: 18px;
font-weight: bold;
}
body>footer ul{
display: flex;
flex-direction: column;
margin: 5px 0;
padding: 0;
list-style: none;
}
body>footer ul>li{
padding: 5px;
}
body>footer ul>li>a{
display: inline-block;
padding: 2px;
color: white;
text-decoration: none;
}
}
@media screen and (max-width:767px){
body>footer{
grid-auto-flow: row;
text-align: center;
}
body>footer>div:first-of-type{
margin-top: 30px;
order: 4;
}
}
@media screen and (min-width:768px){
body>footer>div:not(:first-of-type){
margin-top: 30px;
}
body>footer ul{
padding-left: 15px;
}
}
/*************************************************************/
/* TYPOS */
/*************************************************************/
@media screen{
h1,h2,h3,h1>a,h2>a,h3>a{
color: #ff3c01;
}
h1{
margin-top: 0;
font-size: 28px;
font-family: 'Yanone Kaffeesatz';
font-weight: 400;
letter-spacing: .02em;
}
h2{
margin-top: 35px;
font-size: 20px;
font-family: 'Yanone Kaffeesatz';
font-weight: 400;
letter-spacing: .025em;
}
h3{
font-size: 13px;
}
a{
color: black;
text-decoration: none;
}
}
/*************************************************************/
/* FORMULAIRES */
/*************************************************************/
body>main>*>form{
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-bottom: 15px;
}
body>main>*>form>fieldset{
width: 100%;
margin: 0 0 15px 0;
padding: 5px 15px;
border: 0;
background-color: #d7e9ff;
}
body>main>*>form>fieldset>legend{
float: left;
width:100%;
margin: 5px 0 15px -10px;
font-weight: bold;
color: #252a53;
}
body>main>*>form>fieldset>legend~*{
clear: both;
}
body>main>*>form>fieldset>p, article>form>fieldset>div{
display: flex;
}
body>main>*>form>fieldset>div{
margin-bottom: 12px;
}
body>main>*>form>fieldset>p>a{
color: #252a53;
}
body>main>*>form>fieldset>p>label, article>form>fieldset>div>label{
width: 180px;
color: #252a53;
}
body>main>*>form>fieldset>p>input, article>form>fieldset>p>textarea, article>form>fieldset>div>p{
flex: 1;
margin: 0;
}
body>main>*>form>fieldset>p.checkbox>input, body>main>*>form>fieldset>div.checkbox>input{
flex:unset;
margin: 0 15px;
}
body>main>*>form>fieldset>p.checkbox>label, article>form>fieldset>div.checkbox>label{
flex: 1;
width: 100%;
}
body>main>*>form>fieldset>p.radio>input{
flex:unset;
margin: 0 15px 0 0;
}
body>main>*>form>fieldset>p.radio>label:last-of-type{
flex:1;
width: 100%;
}
body>main>*>form>fieldset>p>textarea{
height: 200px;
resize: vertical;
}
body>main>*>form>fieldset>div>p{
line-height: 1.7em;
}
body>main>*>form>div.recaptcha{
width:100%;
height:80px;
margin-bottom:10px;
padding-left:195px;
}
body>main>*>form>button,
body>main>*>form>a>button{
height:30px;
font-size: 13px;
cursor: pointer;
}
body>main>*>form>a+button{
margin-left: 15px;
}
@media screen and (max-width:520px){
body>main>*>form>fieldset>p, article>form>fieldset>div{
flex-direction: column;
}
body>main>*>form>fieldset>p>label, article>form>fieldset>div>label{
margin-bottom: 3px;
}
body>main>*>form>fieldset>p>input, article>form>fieldset>p>textarea{
font-size: 16px;
}
body>main>*>form>div.recaptcha{
padding-left:0;
}
body>main>*>form>div.recaptcha>div>div{
margin:0 auto 0 auto;
}
}
/*************************************************************/
/* PAGINATION */
/*************************************************************/
body>main>section>footer>nav.pagination>ul{
display: flex;
justify-content: center;
padding: 0;
list-style: none;
}
body>main>section>footer>nav.pagination>ul>li{
display:table;
width: 30px;
height: 30px;
margin: 3px;
/*padding-top: 5px;*/
border: 1px solid gray;
background-color: #ddd;
text-align: center;
}
body>main>section>footer>nav.pagination>ul>li.current{
background-color: white;
}
body>main>section>footer>nav.pagination>ul>li>*{
display:table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
color: black;
}
body>main>section>footer>nav.pagination>ul>li.current>a{
font-weight: bold;
}
/*************************************************************/
/* LISTE ANNONCES */
/*************************************************************/
@media print{
body>main>section>ul>li>article{
page-break-inside: avoid;
}
}
body>main>section>ul{
list-style: none;
padding: 0;
}
body>main>section>ul>li>article{
position: relative;
}
body>main>section>ul>li>article.annonceTop{
background-color: rgb(238, 232, 213);
}
body>main>section>ul>li>article.annoncePro{
margin-top: 40px;
}
body>main>section>ul>li>article.annoncePro::before{
content: 'Offre commerciale';
position: absolute;
top: -23px;
left: 0;
background-color: black;
height: 13px;
/*! width: 150px; */
color: white;
padding: 5px 5px 5px 5px;
display: block;
font-size:12px;
}
body>main>section>ul>li>article>a{
display: block;
}
body>main>section>ul>li>article>a>header>p{
margin: 2px 0 3px 0;
color: #369;
font-size: 12px;
}
body>main>section>ul>li>article>a>header>h2{
margin-top: 5px;
margin-bottom: 0;
font-size: 20px;
}
body>main>section>ul>li>article>a>header>small{
color: gray;
font-size: 11px;
}
body>main>section>ul>li>article>a>p{
margin: 8px 0 0 0;
font-size: 13px;
}
body>main>section>ul>li>article>a>p+p{
margin-top: 5px;
}
body>main>section>ul>li>article>a>figure:nth-of-type(1){
position: absolute;
left:0;
display: flex;
justify-content: center;
align-items: center;
padding:0;
background-color: #DDD;
overflow: hidden;
}
body>main>section>ul>li>article>a>figure:nth-of-type(1)>img{
max-width: calc(100% - 10px);
max-height: calc(100% - 10px);
}
body>main>section>ul>li>article>a>figure:nth-of-type(2){
position: absolute;
right:0;
}
body>main>section>ul>li>article>a>footer{
position: absolute;
right:0;
padding: 2px 5px;
background-color: #ddd;
text-align: center;
}
@media screen and (max-width:767px){
body>main>section>ul>li>article>a{
min-height:168px;
margin: 0;
padding: 5px 0;
border-bottom: 1px solid gray;
}
body>main>section>ul>li:first-of-type>article>a{
border-top: 1px solid gray;
}
body>main>section>ul>li>article>a>header{
width: calc(100% - 80px);
min-height: 80px;
padding-left: 80px;
}
body>main>section>ul>li>article>a>p{
padding-right: 85px;
}
body>main>section>ul>li>article>a>figure:nth-of-type(1){
top: 7px;
width:75px;
height: 75px;
margin:0;
}
body>main>section>ul>li>article>a>figure:nth-of-type(2){
bottom: 30px;
width: 80px;
margin:0;
}
body>main>section>ul>li>article>a>figure:nth-of-type(2)>img{
width: 80px;
}
body>main>section>ul>li>article>a>footer{
bottom: 7px;
width: 70px;
margin: 0;
font-size: 11px;
}
}
@media screen and (min-width:768px){
body>main>section>ul>li>article{
margin: 15px 0;
}
body>main>section>ul>li>article>a{
min-height:168px;
padding: 5px 5px 25px 205px;
border: 1px solid gray;
}
body>main>section>ul>li>article>a>header{
width: calc(100% - 114px);
min-height: 62px;
}
body>main>section>ul>li>article>a>figure:nth-of-type(1){
top:0;
width:184px;
height: 184px;
margin:7px;
}
body>main>section>ul>li>article>a>figure:nth-of-type(2){
top:0;
width:100px;
margin:7px;
}
body>main>section>ul>li>article>a>figure:nth-of-type(2)>img{
width: 100px;
}
body>main>section>ul>li>article>a>footer{
bottom: 0;
width: 90px;
margin:7px;
font-size: 12px;
}
}
/*************************************************************/
/* FICHE ANNONCE */
/*************************************************************/
body>main>article.annonce{
position: relative;
}
body>main>article.annonce>header>h1{
margin:0 0 5px 0;
}
body>main>article.annonce>p{
line-height: 1.6;
}
body>main>article.annonce>section:nth-of-type(1){
margin: 30px 0;
}
body>main>article.annonce>section:nth-of-type(1)>figure{
float: right;
margin:0;
}
body>main>article.annonce>section:nth-of-type(1)>p{
margin: 6px 0;
}
body>main>article.annonce>section:nth-of-type(1)>figure>img{
width:150px;
}
body>main>article.annonce>section:nth-of-type(2){
}
body>main>article.annonce>section:nth-of-type(2)>figure{
box-sizing:border-box;
display:flex;
justify-content: center;
align-items: center;
width:100%;
height: 500px;
margin:0;
padding:10px;
background-color: #DDD;
overflow: hidden;
}
body>main>article.annonce>section:nth-of-type(2)>figure>img{
max-width: 100%;
max-height: 100%;
}
body>main>article.annonce>section:nth-of-type(2)>ul{
display: flex;
flex-wrap: wrap;
justify-content: left;
margin: 15px 0;
padding: 0;
list-style: none;
}
body>main>article.annonce>section:nth-of-type(2)>ul>li{
box-sizing:border-box;
display: flex;
justify-content: center;
align-items: center;
width: 132px;
height: 132px;
margin: 0px;
padding:10px;
}
body>main>article.annonce>footer{
display: flex;
justify-content: left;
}
body>main>article.annonce+aside>form{
display: flex;
flex-direction: column;
padding: 10px;
background-color: #DDD;
}
body>main>article.annonce+aside>form>p{
text-align: center;
font-weight: bold;
}
body>main>article.annonce+aside>form>button{
align-self: center;
width: 60%;
height: 25px;
}
@media screen and (max-width:767px){
body>main>article.annonce>footer{
flex-direction: column;
align-items: flex-end;
margin-bottom: 20px;
}
body>main>article.annonce>footer>*{
margin: 5px 0;
}
}
@media screen and (min-width:768px){
body>main>article.annonce>footer{
margin-top: 30px;
padding-top: 10px;
border-top: 3px solid #DDD;
}
body>main>article.annonce>footer>*{
margin: 0 5px;
}
}
/*************************************************************/
/* FIN */
/*************************************************************/
section.messagerie>table{
width: 100%;
}
section.messagerie>table>thead>tr>th{
padding: 3px;
background-color: #376b9c;
color: white;
}
section.messagerie>table>tbody>tr>td{
padding: 3px;
}
section.messagerie>table>tbody>tr:nth-of-type(2n)>td{
background-color: #d0e0ff;
}
section.messagerie>ul{
list-style: none;
margin: 0;
padding: 0;
}
section.messagerie>ul>li{
position: relative;
margin: 40px 0;
padding: 6px 10px;
border-radius: 10px;
}
section.messagerie>ul>li>*{
margin: 0;
padding: 0;
}
section.messagerie>ul>li:nth-of-type(1){
background-color: lightgray;
}
section.messagerie>ul>li::before{
position: absolute;
width: 100%; /*calc(100% + 100px);*/
top: -20px;
text-align: center;
}
section.messagerie>ul.type1>li:nth-of-type(1)::before{
content: 'Son annonce publiée le ' attr(data-date);
font-size: 11px;
}
section.messagerie>ul.type2>li:nth-of-type(1)::before{
content: 'Mon annonce du ' attr(data-date);
font-size: 11px;
}
section.messagerie>ul>li:not(:nth-of-type(1))::before{
content: attr(data-date);
font-size: 11px;
color: black;
}
section.messagerie>ul.type1>li:nth-of-type(1),
section.messagerie>ul.type2>li:nth-of-type(2),
section.messagerie>ul>li.type2{
margin-right: 100px;
}
section.messagerie>ul.type1>li:nth-of-type(2),
section.messagerie>ul.type2>li:nth-of-type(1),
section.messagerie>ul>li.type1{
margin-left: 100px;
}
section.messagerie>ul.type2>li:nth-of-type(2),
section.messagerie>ul>li.type2{
background-color: #add8f7;
color: black;
}
section.messagerie>ul.type1>li:nth-of-type(2),
section.messagerie>ul>li.type1{
background-color: #4075a2;
color: white;
}
section.messagerie>form{
display: flex;
flex-direction: column;
align-items: center;
}
section.messagerie>form>textarea{
width: 100%;
height:150px;
padding: 10px;
box-sizing: border-box;
}
section.messagerie>form>div{
margin: 20px;
}
section.messagerie>form>button{
}
/* *********** 2023 */
form[action='/repondre.html']{
margin: 0 auto;
background-color: #d7eaff;
display: flex;
flex-direction: column;
padding: 15px;
}
form[action='/repondre.html']>p{
margin: 0 0 15px 0;
padding: 0;
color: #252a53;
font-size: 20px;
}
form[action='/repondre.html']>button{
align-self: center;
}
body>span>span>ins{
margin: 0 auto;
}