/*
 Theme Name: Les Poterieurs
 Description: Page d'attente Les Poterieurs
 Author: Web Citronnade
 Author URI: https://webcitronnade.fr
 Version: 1.0.0
 Text Domain: poterieurs
*/
@import url('https://fonts.googleapis.com/css2?family=Chewy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

td.namepg.column-namepg{
	color:#ee8b69 !important;
}

*{
	margin:0;
	padding:0;
	font-family:"Source Sans 3",Arial,sans-serif;
	font-size:16px;
	color:#1d1d1b;
	line-height:1.7;
}
h1,h2,h3{

}
h1,.fauxh1{
	font-size: 1.4rem;
	line-height: 1.4;
}
h2,.fauxh2{
	font-size: 1.2rem;
	line-height: 1.2;
}
h3,.fauxh3{
	font-size:1.1rem;
}
p,
.faux-p{
	font-size:1rem;
}
p,
.faux-p,
.gros-p,
.big-p{
	margin:10px 0 15px 0;
	font-weight:400;
	text-transform:none;
}
.gros-p,.gros-p b,.gros-p strong,.gros-p span{
	font-size:1.5rem;
}
.big-p,.big-p b,.big-p strong{
	font-size:2rem;
}
.bigbig-p{
	font-size:2.6rem;
}
b,strong{
	font-weight:600;
}
span{
	display:block;
}
a{
	text-decoration:none;
	color:#;
}
ul{
	list-style-type:none;
}
.cadre-infos ul,
.cadre-infos ol{
	list-style-type:disc;
	margin-left:25px;
}
.italic{
	font-style:italic;
}
.maj{
	text-transform:uppercase;
}
.center{
	text-align:center;
}


/* /// COULEURS /// */
.noir{
	color:#1d1d1b;
}
.bg-noir{
	background-color:#1d1d1b;
}
a.bta.noir{
	color:#1d1d1b !important;
}

.blanc{
	color:#ffffff;
}
.bg-blanc{
	background-color:#ffffff;
}
a.bta.blanc{
	color:#ffffff !important;
}


.rouille{
	color:#CF5D33;
}
.bg-rouille{
	background-color:#CF5D33;
}
a.bta.rouille{
	color:#CF5D33 !important;
}

.rouillebis{
	color:#D4582A;
}
.bg-rouillebis{
	background-color:#D4582A;
}
a.bta.rouillebis{
	color:#D4582A !important;
}

.peche{
	color:#EAA382;
}
.bg-peche{
	background-color:#EAA382;
}
a.bta.peche{
	color:#EAA382 !important;
}

.jaune{
	color:#E8C836;
}
.bg-jaune{
	background-color:#E8C836;
}
a.bta.jaune{
	color:#E8C836 !important;
}

.bleu{
	color:#B3C7CF;
}
.bg-bleu{
	background-color:#B3C7CF;
}

.orange{
	color:#EBA53D;
}
.bg-orange{
	background-color:#EBA53D;
}

.vert{
	color:#C7D0BA;
}
.bg-vert{
	background-color:#C7D0BA;
}

.rose{
	color:#e18b9e;
}
.bg-rose{
	background-color:#e18b9e;
}

.bg-gris{
	background-color:#f1f1f1;
}

.bg-noir,.bg-noir a,.bg-noir p,.bg-noir span,.bg-noir b,.bg-noir strong,.bg-noir h1,.bg-noir h2,.bg-noir h3,.bg-noir ul,.bg-noir ul li,.bg-noir ul ol,.bg-noir .italic,.bg-noir em,
.bg-rouille,.bg-rouille a,.bg-rouille p,.bg-rouille span,.bg-rouille b,.bg-rouille strong,.bg-rouille h1,.bg-rouille h2,.bg-rouille h3,.bg-rouille ul,.bg-rouille li,.bg-rouille ul ol,.bg-rouille .italic,.bg-rouille em,
.bg-rouillebis,.bg-rouillebis a,.bg-rouillebis p,.bg-rouillebis span,.bg-rouillebis b,.bg-rouillebis strong,.bg-rouillebis h1,.bg-rouillebis h2,.bg-rouillebis h3,.bg-rouillebis ul,.bg-rouillebis ul li,.bg-rouillebis ul ol,.bg-rouillebis .italic,.bg-rouillebis em,
.bg-jaune,.bg-jaune a,.bg-jaune p,.bg-jaune span,.bg-jaune b,.bg-jaune strong,.bg-jaune h1,.bg-jaune h2,.bg-jaune h3,.bg-jaune ul,.bg-jaune ul li,.bg-jaune ul ol,.bg-jaune .italic,.bg-jaune em,
.bg-peche,.bg-peche a,.bg-peche p,.bg-peche span,.bg-peche b,.bg-peche strong,.bg-peche h1,.bg-peche h2,.bg-peche h3,.bg-peche ul ol,.bg-peche .italic,.bg-peche em,
.bg-orange,.bg-orange a,.bg-orange p,.bg-orange span,.bg-orange b,.bg-orange strong,.bg-orange h1,.bg-orange h2,.bg-orange h3,.bg-orange ul,.bg-orange ul li,.bg-orange ul ol,.bg-orange .italic,.bg-orange em,
.bg-bleu,.bg-bleu a,.bg-bleu p,.bg-bleu span,.bg-bleu b,.bg-bleu strong,.bg-bleu h1,.bg-bleu h2,.bg-bleu h3.bg-bleu ul,.bg-bleu ul li,.bg-bleu ul ol,.bg-bleu .italic,.bg-bleu em,
.bg-vert,.bg-vert a,.bg-vert p,.bg-vert span,.bg-vert b,.bg-vert strong,.bg-vert h1,.bg-vert h2,.bg-vert h3.bg-vert ul,.bg-vert ul li,.bg-vert ul ol,.bg-vert .italic,.bg-vert em,
.bg-rose,.bg-rose a,.bg-rose p,.bg-rose span,.bg-rose b,.bg-rose strong,.bg-rose h1,.bg-rose h2,.bg-rose h3.bg-rose ul,.bg-rose ul li,.bg-rose ul ol,.bg-rose .italic,.bg-rose em{
	color:#ffffff;
}
.no-bg-mobile,.no-bg-mobile a,.no-bg-mobile p,.no-bg-mobile span,.no-bg-mobile b,.no-bg-mobile strong,.no-bg-mobile h1,.no-bg-mobile h2,.no-bg-mobile h3.no-bg-mobile ul,.no-bg-mobile ul li,.no-bg-mobile ul ol,.no-bg-mobile .italic,.no-bg-mobile em,
.bg-blanc,.bg-blanc a,.bg-blanc p,.bg-blanc span,.bg-blanc b,.bg-blanc strong,.bg-blanc h1,.bg-blanc h2,.bg-blanc h3.bg-blanc ul,.bg-blanc ul li,.bg-blanc ul ol,.bg-blanc .italic,.bg-blanc em{
	color:#1d1d1b;
}
.no-bg-mobile.bg-orange,.no-bg-mobile.bg-orange a,.no-bg-mobile.bg-orange p,.no-bg-mobile.bg-orange span,.no-bg-mobile.bg-orange b,.no-bg-mobile.bg-orange strong,.no-bg-mobile.bg-orange h1,.no-bg-mobile.bg-orange h2,.no-bg-mobile.bg-orange h3.no-bg-mobile.bg-orange ul,.no-bg-mobile.bg-orange ul li,.no-bg-mobile.bg-orange ul ol,.no-bg-mobile.bg-orange .italic,.no-bg-mobile.bg-orange em{
	color:#ffffff;
}
.bg-blanc.bleu{
	color:#B3C7CF;
}


/* /// WIDTH FLEX & CO /// */
.flexblock{
	display:flex;
}
.flexreverse{
	flex-direction:row-reverse;
}
.items-center{
	align-items:center;
}
.items-end{
	align-items:flex-end;
}
.items-start{
	align-items:flex-start;
}
.justif-center{
	justify-content:center;
}
.justif-evenly{
	justify-content:space-evenly;
}
.wrap{
	flex-wrap:wrap;
}
.midwidth{
	width:46%;
}
.un-tiers{
	width:29%;
}
.deux-tiers{
	width:73%;
}
.un-quart{
	width:21%;
}
.trois-quart{
	width:71%;
}
.vingt-pc{
	width:16%;
}
.midwidth,
.un-tiers,
.deux-tiers,
.un-quart,
.trois-quart,
.vingt-pc{
	margin:20px 2%;
}
.capsule{
	max-width:1200px;
	margin:0 auto;
}
.capsule600{
	max-width:600px;
	margin:0 auto;
}
.capsule1000{
	max-width:1000px;
	margin:0 auto;
}
section.all,
header{
	width:80%;
	padding:10px 10%;
	margin:20px auto;
}
section.full,
footer{
	width:100%;
	margin:10px 0;
	padding:15px 0
}


/* /// BOUTONS /// */
a.bta{
	padding: 7px 20px;
	margin: 25px 0;
	border-radius: 25px;
	text-transform: uppercase;
	font-weight: 500;
	display: block;
	width: fit-content;
	transition: 0.4s;
}
a.bta:hover{
	transition:0.4s;
	background-color:#1d1d1b;
}
a.bta.center{
	margin:25px auto;
}
.resabta:hover{
	cursor:pointer;
}

.bta-border{
	border:2px solid #1d1d1b;
}
.bta-border-blanc{
	border-color:#ffffff;
}

img{
	width:100%;
	height:auto;
}

figure.bg-img-mask{
	-webkit-mask-image: url('https://lespoterieurs.com/wp-content/uploads/2025/06/mask-img.png');
	mask-image: url('https://lespoterieurs.com/wp-content/uploads/2025/06/mask-img.png');
	mask-repeat: no-repeat;  
mask-size: contain;
  mask-position: center;	
}

figure.img-simple{
	width:100%;
	height:auto;
	max-width:350px;
}


/* /// HEADER /// */
header#header{
	position:relative;
}
nav#mobile-menu{
	display:none;
}
/* logo */
figure#logo{
	width:20%;
	max-width:160px;
}
figure#logo.logo-scroll{
	/*position:fixed;
	top: 10px;
	left: 20px;
	width: 90px;
	z-index: 5;*/
	display:none;
}
nav#main-menu ul li.resa.resa-scroll,
li.resa-menu.resa-scroll{
	position:fixed;
	top:0;
}


#header-mobile{
	display:none;
}


/* fil ariane */
p#breadcrumbs{
	display:flex;
}
p#breadcrumbs span{
	display:inline !important;
}
p#breadcrumbs span,
p#breadcrumbs a,
p#breadcrumbs b,
p#breadcrumbs strong{
	font-size:0.7rem;
	color: #c3c3c3;
	font-weight: 300;
}
p#breadcrumbs b,
p#breadcrumbs strong{
	font-weight:400;
}


/* MAIN MENU */
nav#main-menu{
	width:70%;
}
ul.main-menu{
	background-color: #ffffff;
	padding: 10px 0px;
	border-radius: 50px;
	margin-left: 10%;
	-webkit-box-shadow: 3px 3px 15px 5px #D1D1D1; 
	box-shadow: 3px 3px 15px 5px #D1D1D1;
	display:flex;
	justify-content:space-evenly;
}
ul.main-menu li.resa{
	background-color:#CF5D33;
}
ul.main-menu li.resa a{
	color:#ffffff;
}

/* Sous-menu */
li.has-submenu{
	position:relative;
}
.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(255,255,255,0.9);
  min-width: 150px;
  flex-direction: column;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  padding:10px 5px;
}

/* Affichage au survol */
.has-submenu:hover .sub-menu {
  display: block;
  transition:0.4s;
}

/* Liens du sous-menu */
.sub-menu li a {
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
  text-transform:none !important;
}

/* aside : ouverture */
aside#open{
	position: absolute;
	right: 0;
	top: -35px;
	padding: 20px 15px 10px 20px;
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
}

/* menu principal */
li.resa-menu{
	list-style-type:none;
	background-color: #CF5D33;
	text-transform:uppercase;
}
li.resa-menu a{
	color:#ffffff;
}
nav#main-menu ul li.resa,
li.resa-menu{
	position:fixed;
	right: 0;
  padding: 10px 25px;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  top: 120px;
  transition:0.4s;
}
nav#main-menu ul li.resa:hover,
li.resa-menu:hover{
	transition:0.4s;
	background-color:#1d1d1b;
}
nav#main-menu ul li a{
	text-transform:uppercase;
	transition:0.4s;
}
nav#main-menu ul li a:hover{
	transition:0.4s;
	color:#CF5D33;
}


/* menu sticky on scroll */
#main-menu.is-fixed{
  position: fixed;
  top: 0;
  z-index:5;
	-webkit-box-shadow: none; 
	box-shadow:none;
}
#main-menu.is-fixed ul.main-menu{
	padding:15px 0 10px 0px;
	border-radius: 50px;
	margin-top:-5px;
	margin-left: 10%;
	border:2px solid #CF5D33;
	-webkit-box-shadow: none; 
	box-shadow:none;
}



/* /// CONTENT /// */
figure.bg-img-mask{

	width:600px;
	height:600px;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}
section.full figure.bg-img-mask{
	margin:-100px auto;
}

div#sbw_s51f5c{
	display:none;
}

nav.bta-color-nav ul li{
	margin:7px 2%;
}
nav.bta-color-nav ul li a{
	padding:3px 15px 2px 15px;
	text-align:center;
	border-radius:50px;
	text-transform:uppercase;
	transition:0.4s;
	font-weight:500;
}
nav.bta-color-nav ul li a:hover{
	transition:0.4s;
	color:#ffffff;
}
nav.bta-color-nav ul li a.jaune{
	border:2px solid #E8C836;
}
nav.bta-color-nav ul li a.jaune:hover{
	background-color:#E8C836;
}
nav.bta-color-nav ul li a.orange{
	border:2px solid #EBA53D;
}
nav.bta-color-nav ul li a.orange:hover{
	background-color:#EBA53D
}
nav.bta-color-nav ul li a.bleu{
	border:2px solid #B3C7CF;
}
nav.bta-color-nav ul li a.bleu:hover{
	background-color:#B3C7CF;
}
nav.bta-color-nav ul li a.rouille{
	border:2px solid #D4582A;
}
nav.bta-color-nav ul li a.rouille:hover{
	background-color:#D4582A;
}
nav.bta-color-nav ul li a.peche{
	border:2px solid #EAA382;
}
nav.bta-color-nav ul li a.peche:hover{
	background-color:#EAA382;
}


/* /// RESERVATION /// */
/* test 1 */
.popup-container {
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    transform: scale(1.3);
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(21, 17, 17, 0.61);
    display: flex;
    align-items: center;
}
.popup-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
}
.popup-content p{
    font-size: 17px;
    padding: 10px;
    line-height: 20px;
}
.popup-content a.close{
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    background: none;
    padding: 0;
    margin: 0;
    text-decoration:none;
}

.popup-content a.close:hover{
  color:#333;
}

.popup-content span:hover,
.popup-content span:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.popup-container:target{
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}

/* test 2 */
.popup-window,
.popup-window2{
  position:fixed;
  top:0%;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.5);
  display:none;
  z-index:10;
}
.popup-box{
  width:40%;
  height:100%;
  background-color:white;
  color:black;
  position:absolute;
  top:5%;
  left:30%;
  text-align: center;
  overflow:auto;
}
.close-menu{
	color:#1d1d1b !important;
  font-weight:600;
  font-size:20px;
  text-align:right;
  padding-right:20px;
  cursor:pointer;
}


/* form contact form 7 */
fieldset.hidden-fields-container{
	display:none !important;
}
input.wpcf7-form-control.wpcf7-submit.has-spinner{
	padding: 3px 15px 2px 15px;
  text-align: center;
  border-radius: 50px;
  text-transform: uppercase;
  transition: 0.4s;
  font-weight: 500;
  border:2px solid #D4582A;
  background-color: #fff;
  color: #d4582a;
  transition:0.4s;
  margin-bottom:50px;
}
input.wpcf7-form-control.wpcf7-submit.has-spinner:hover{
	transition:0.4s;
	cursor:pointer !important;
	color:#ffffff;
	background-color:#d4582a;
}
textarea.wpcf7-form-control.wpcf7-textarea{
	height:100px !important;
}
#wpcf7-f693-o3{
	text-align:center;
}
.wpcf7-not-valid-tip{
	color:#CF5D33;
}
.screen-reader-response ul li,
.screen-reader-response p{
	color:#CF5D33;
}
.screen-reader-response p{
	font-weight:600;
	font-size:1.1rem;
}
input.wpcf7-text,
input.wpcf7-textarea{
	padding:1px 5px !important;
}



/* POPUP */
.popuptest,
.popupcado{
    position: fixed;
    inset: 0;
    display: none;
    background: rgba(0,0,0,0.6);
    align-items: center;
    justify-content: center;
  }

  /* Quand on arrive sur "#popup" via lien → s'affiche */
  #popuptest:target,
  #popupcado:target{
    display: flex;
  }


/* --- Déroulé --- */
span.number{
	font-size:3rem;
	font-family: "Chewy", system-ui;
	color:#ffffff;
}
span.number-peche{
	text-shadow: -1px 0 #EAA382, 0 1px #EAA382, 1px 0 #EAA382, 0 -1px #EAA382;
}


/* --- Packs Home --- */
article.pack-home span{
	display:inline-block;
	margin-bottom:0;
}
article.pack-home:before{
	content:" ";
	background-color:#EAA382;
	border-radius:50%;
	width: 20px;
	height: 20px;
	margin: 15px 10px 0 0;
	display: block;
	float: left;
}


/* /// POUR INFOS /// */
aside.cadre-infos{
	padding: 20px;
	border-radius: 20px;
}
span.titre-infos-rotate{
	text-transform: uppercase;
  font-weight: 600;
  font-size: 1.1rem;
  border: 2px solid #fff;
  width: fit-content;
  padding: 1px 7px;
  border-radius: 5px;
  transform: rotate(-5deg);
  margin:-41px 0 20px -30px;
}


/* /// VOUS ETES /// */
img.picto-etes{
	width:50px;
	height:auto;
	margin-right:2%;
}


/* /// ASIDE BORDER LEFT /// */
.aside-border-left{
	padding-left: 2%;
	border-left: 1px solid #1d1d1b;
}
.aside-border-left p,
.aside-border-left b,
.aside-border-left strong,
.aside-border-left a,
.aside-border-left span{
	font-size:0.95rem;
}
.aside-border-left-blanc{
	border-color:#ffffff;
}


/* /// TEMOIGNAGES /// */
article.temoign img{
	width:40px;
	margin-right:10px;
}
article.temoign{
	font-style:italic;
}
article.temoign span.auteur{
	font-style:normal;
}


/* ///// ----- ATELIER PEINTURE ----- ///// */
span.number.number-bg-orange{
	color:#ffffff;
	text-shadow:-1px 0 #EBA53D, 0 1px #EBA53D, 1px #EBA53D, 0 -1px #EBA53D;
}
/* FAQ css only */
.faq {
    margin:50px auto;
}
.accordion-item {
  border-top: 1px solid #e5e7eb;
  padding: 1rem 0;
}
.accordion-item:first-child{
	border-top:none;
}

.accordion-item label {
  display: block;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  padding-right: 1.5rem;
}

.accordion-item label:before {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1.2rem;
  color: #D4582A;
  transition: transform 0.2s ease;
}

input[type="radio"] {
  display: none;
}

/* Texte de réponse */
.content {
  max-height: 0;
  overflow: hidden;
  color: #4b5563;
  line-height: 1.6;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}

/* Quand la question est ouverte */
input[type="radio"]:checked + label:before {
  content: "−";
}

input[type="radio"]:checked ~ .content {
  max-height: 200px; /* ajustable selon la taille du texte */
  opacity: 1;
  margin-top: 0.5rem;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Effet de survol */
.accordion-item label:hover {
  color: #D4582A;
}


figure.bg-img-mask.bg-img-mask-relative{
	max-width:350px;
	margin-bottom:-250px !important;
}


/* ///// ---- COURS MODELAGE ----- ///// */
span.number-orange{
	text-shadow: -1px 0 #EAA382, 0 1px #EAA382, 1px 0 #EAA382, 0 -1px #EAA382;
}
aside.aside-relative{
	position:relative;
}
figure.picto-infos{
	width: 20px;
	position: absolute;
	top: -20px;
	left: -2%;
}
span.italic.proch-dates-modelage{
	margin:0;
}




/* ////// ----- VENIR EN GROUPE ----- ///// */
article.cible-groupe h3{
	padding: 7px 20px;
	margin: 25px auto;
	border-radius: 25px;
	font-weight: 500;
	display: block;
	width: fit-content;
	transition: 0.4s;
}
article.cible-groupe img{
	height:60px;
	width:auto;
}

/* ///// ----- PAGE CONTACT ----- ///// */
aside.coord-pg-contact img{
	width:25px;
	margin:20px 5px 0 0;
}
aside.coord-pg-contact img.plan-pg-contact{
	width:80%;
}
img.plan-footer{
	width:200px;
}


/* ///// AGENDA ///// */
article.event{
	position: relative;
	margin:20px auto 20px 40px;
}
article.event:before{
	content:" ";
	width:30px;
	height:1px;
	background-color:#ffffff;
	margin-right: 5px;
	position: absolute;
	left: -40px;
	top: 15px;
}
article.event .infos-event p,
article.event .infos-event span{
	margin:0 auto;
	color:#ffffff;
}
article.event h3{
	margin-bottom:0;
}
span.point-event-modelage{
	display:inline-block;
	font-style:normal;
	margin-right:2px;
}


/* /// CERAMIQUES DISPOS /// */
article.ceramiq{
	
}


/* /// COLLABORATIONS /// */
figure.img-galerie{
	width:300px;
	height:300px;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}

.ceramiq {
    position: relative;
    overflow: hidden;
}

/* Le texte qui apparaît au hover */
.ceramiq aside {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 15px;

    opacity: 0;
    transform: translateY(100%);
    transition: all 0.4s ease;
    margin: 0;
}
.ceramiq aside p,
.ceramiq aside b,
.ceramiq aside a,
.ceramiq aside strong,
.ceramiq aside span{
	color:#ffffff;
}

/* Apparition au survol */
.ceramiq:hover aside {
    opacity: 1;
    transform: translateY(0);
}


/* filtres céramiques */
ul.filtres-carnet li.list{
	margin:20px 1%;
	padding: 3px 15px 2px 15px;
	border:2px solid #1d1d1b;
	transition:0.4s;
	text-transform:uppercase;
	font-size:0.9rem;
	text-align: center;
	border-radius: 50px;
	font-weight: 500;
}
ul.filtres-carnet li.list:hover{
	transition:0.4s;
	cursor:pointer;
	background-color:#1d1d1b;
	color:#ffffff;
}
ul.filtres-carnet li.list.active{
	background-color:#1d1d1b;
	color:#ffffff;
	transition:0.4s;
}

ul.filtres-carnet li.list:nth-child(2),
ul.filtres-carnet li.list:nth-child(7){
	color:#CF5D33 !important;
	border-color:#CF5D33 !important;
}
ul.filtres-carnet li.list:nth-child(2):hover,
ul.filtres-carnet li.list:nth-child(2).active,
ul.filtres-carnet li.list:nth-child(7):hover,
ul.filtres-carnet li.list:nth-child(7).active{
	background-color:#CF5D33 !important;
	color:#ffffff !important;
}

ul.filtres-carnet li.list:nth-child(3),
ul.filtres-carnet li.list:nth-child(8){
	color:#EBA53D !important;
	border-color:#EBA53D !important;
}
ul.filtres-carnet li.list:nth-child(3):hover,
ul.filtres-carnet li.list:nth-child(3).active,
ul.filtres-carnet li.list:nth-child(8):hover,
ul.filtres-carnet li.list:nth-child(8).active{
	background-color:#EBA53D !important;
	color:#ffffff !important;
}

ul.filtres-carnet li.list:nth-child(4){
	color:#EAA382 !important;
	border-color:#EAA382 !important;
}
ul.filtres-carnet li.list:nth-child(4):hover,
ul.filtres-carnet li.list:nth-child(4).active{
	background-color:#EAA382 !important;
	color:#ffffff !important;
}

ul.filtres-carnet li.list:nth-child(5){
	color:#B3C7CF !important;
	border-color:#B3C7CF !important;
}
ul.filtres-carnet li.list:nth-child(5):hover,
ul.filtres-carnet li.list:nth-child(5).active{
	background-color:#B3C7CF !important;
	color:#ffffff !important;
}

ul.filtres-carnet li.list:nth-child(6){
	color:#C7D0BA !important;
	border-color:#C7D0BA !important;
}
ul.filtres-carnet li.list:nth-child(6):hover,
ul.filtres-carnet li.list:nth-child(6).active{
	background-color:#C7D0BA !important;
	color:#ffffff !important;
}




/* ///// PROJETS ///// */
article.cible-projet p{
	margin-top:0;
}



/* BULLE INFOS FOOTER */
 /* Container fixe bottom-left */
  .info-wrap {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    pointer-events: none; /* laisse uniquement les boutons interagir */
  }

  /* Le checkbox caché qui contrôle l'état (checked = ouvert) */
  .info-toggle {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
  }

  /* Le bouton pour ouvrir la bulle (rond) */
  .open-btn{
	  position:absolute;
  }
  .open-btn,
  .close-btn {
    pointer-events: auto;
    cursor: pointer;
    border: none;
    background: white;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    display: inline-grid;
    place-items: center;
    transition: transform .18s ease, box-shadow .18s ease;
    user-select: none;
  }
  .open-btn:active,
  .close-btn:active { transform: scale(.98); }

  .open-btn { /* icône "i" */
    font-weight: 700;
    font-size: 18px;
  }

  /* La bulle d'info */
  .bubble {
	margin-bottom:70px;
    pointer-events: auto;
    max-width: 320px;
    width: min(86vw, 320px);
    background: linear-gradient(180deg, #ffffff, #f7fbff);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 12px 30px rgba(8,20,40,0.12);
    transform-origin: left bottom;
    transform: translateY(8px) scale(.96);
    opacity: 0;
    transition: transform .28s cubic-bezier(.2,.9,.3,1), opacity .22s ease;
    font-size: 14px;
    color: #0b1b2b;
    border: 1px solid rgba(11,27,43,0.06);
  }

  /* Petit triangle (pointe) */
  .bubble:after {
    content: "";
    position: absolute;
    left: 18px;
    bottom: -10px;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 10px solid white;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,0.03));
  }

  /* Close button inside la bulle (coin haut droit) */
  .bubble .close-btn-in {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    font-size: 16px;
  }

  /* Etat ouvert : checkbox checked -> bulle visible, open-btn transformé en nothing */
  .info-toggle:checked ~ .bubble {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  /* Quand ouvert on peut masquer le bouton open (ou le styliser) */
  .info-toggle:checked ~ .open-btn {
    transform: translateY(-6px) scale(.92);
    box-shadow: 0 8px 20px rgba(8,20,40,0.12);
  }

  /* Quand fermé (non-checked) on montre clairement le bouton d'ouverture */
  .info-toggle:not(:checked) ~ .open-btn {
    transform: translateY(0) scale(1);
  }

  /* Label "ouvrir" : style différent quand la bulle est fermée */
  .open-btn:after {
    content: "i";
    font-weight: 700;
    color: #D4582A;
  }

  /* Petite transition du contenu */
  .bubble h4 {
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 600;
  }
  .bubble p { font-size: 13px; color: #254055; }

  /* Accessibilité : focus visible */
  .open-btn:focus, .close-btn:focus, .close-btn-in:focus {
    outline: 3px solid rgba(3,102,214,0.15);
    outline-offset: 3px;
  }

  /* Réduction écran (téléphone) : ajuster */
  @media (max-width: 420px) {
    .info-wrap { left: 12px; bottom: 12px; }
    .bubble { width: calc(100vw - 80px); max-width: none; border-radius: 12px; }
  }


/* /// FOOTER /// */
footer{
	margin-bottom:0;
}
footer figure.logo-footer{
	width:20%;
	max-width:60px;
}
footer div.coord{
	width:80%;
}
footer div.coord article{
	margin:10px 2%;
}
footer div.coord article img{
	width:19px;
	margin-right:7px;
}


aside#openhour{
	width: fit-content;
  margin: -35px auto 70px;
  padding: 5px 15px;
  border: 2px solid #fff;
  border-radius: 25px;
}

/* menu legal */
.menu-legal{
	margin:25px 5% 0 auto;
}
.menu-legal ul{
	justify-content:flex-end;
}
.menu-legal ul li{
	margin:0 5px;
}
.menu-legal ul li a{
	font-size:0.85rem;
}
.menu-legal ul li:after{
	content:"|";
	color:#ffffff;
	margin-left:10px;
}
.menu-legal ul li:last-child:after{
	content:" ";
}


.nodesk{
	display:none;
}
/* ////////////////////////////////////// RESPONSIVE /////////////////////////////////////// */
@media screen and (max-width: 700px){
	.nomobile,
	.headerdesk,
	nav#main-menu{
		display:none;
	}
	.nodesk{
		display:block;
	}
	div#page{
		overflow:hidden;
	}
	.flexreverse{
		display:flex;
		flex-direction:row;
	}
	.flexblock,
	.midwidth,
	.un-tiers,
	.deux-tiers,
	.un-quart,
	.trois-quart,
	.vingt-pc{
		display:block;
		width:96%;
		margin:20px 2%;
	}
	
	figure.bg-img-mask.nomobile{
		width:0;
		height:0;
	}
	figure.bg-img-mask.mobile-mt-150{
		margin-top: -150px !important;
		padding-top: 90px;
		margin-bottom: -30px !important;
	}
	
	section.no-bg-mobile{
		background-color:#ffffff;
	}
	
	.vous-etes{
		text-align:center;
	}
	
	.no-bg-mobile.bg-orange,.no-bg-mobile.bg-orange a,.no-bg-mobile.bg-orange p,.no-bg-mobile.bg-orange span,.no-bg-mobile.bg-orange b,.no-bg-mobile.bg-orange strong,.no-bg-mobile.bg-orange h1,.no-bg-mobile.bg-orange h2,.no-bg-mobile.bg-orange h3.no-bg-mobile.bg-orange ul,.no-bg-mobile.bg-orange ul li,.no-bg-mobile.bg-orange ul ol,.no-bg-mobile.bg-orange .italic,.no-bg-mobile.bg-orange em{
		color:#1d1d1b;
	}
	
	
	
	/* HEADER */

	
	
	/* menu */
	nav#mobile-menu{
		display:block;
	}
	#burger-toggle{
    display: none;
}
input##burger-toggle{
	display:none;
}

#mobile-menu {
    pointer-events: none; /* NE BLOQUE PLUS LE TOUCH OU LE SCROLL */
}

#burger-toggle:checked ~ #mobile-menu {
    pointer-events: auto; /* réactivé seulement quand ouvert */
}
#mobile-menu {
    overflow-y: auto;     /* permet de scroller dans le menu */
    height: 100vh;
}



.burger {
    display: none;
    cursor: pointer;
    width: 30px;
    height: 25px;
    flex-direction: column;
    justify-content: space-between;
    z-index: 999;
    position: fixed;
    top: 20px;
    right: 20px;
	background-color:#CF5D33;
	padding: 50px 50px 25px 25px;
	margin: -54px -54px 0 0;
	border-radius: 50px;
	-webkit-box-shadow: 3px 3px 15px 5px #D1D1D1;
	box-shadow: 3px 3px 15px 5px #D1D1D1;
}

.burger span {
    display: block;
    height: 3px;
    background: #ffffff;
    border-radius: 2px;
    transition: 0.3s;
}

/* Afficher le burger en mobile */
    .burger {
        display: flex;
    }

/* ----- Animation burger ----- */
#burger-toggle:checked + .burger span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}
#burger-toggle:checked + .burger span:nth-child(2) {
    opacity: 0;
}
#burger-toggle:checked + .burger span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

/* ----- Menu mobile ----- */

#mobile-menu {
	display:block;
    position: fixed;
	z-index:10;
    top: 0;
    right: -100%;
    width: 70%;
    height: 100%;
    background:rgba(255,255,255,0.95);
    padding-top: 80px;
    transition: 0.4s ease;
    box-shadow: -3px 0px 10px rgba(0,0,0,0.2);
}

.mobile-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav li {
    margin: 3px 0;
    padding-left:15%;
}

.mobile-nav a {
    color: #000;
    text-decoration: none;
    font-size: 1.3rem;
}

nav#mobile-menu ul li:last-child{
	background-color:#CF5D33;
}
nav#mobile-menu ul li:last-child a{
	color:#ffffff;
}
nav#mobile-menu ul li.has-submenu ul li:last-child{
	background-color:transparent;
}
nav#mobile-menu ul li.has-submenu a{
	color:#1d1d1b;
}

/* Ouvrir le menu quand le burger est cliqué */
#burger-toggle:checked ~ #mobile-menu {
    right: 0;
}


/* submenu mobile */
.sub-menu{
	display:block;
	position:relative;
	background:none;
	box-shadow:none;
	border-bottom-right-radius:none;
	border-bottom-left-radius:none;
	padding: 5px 2px;
}
.sub-menu li{
	padding-left:5px;
}
.sub-menu li a{
	padding:0;
	font-size:1.1rem;
	line-height:1.4;
}

	aside#open{
		position: absolute;
		top: -20px;
		left: -20%;
		width: 75%;
		padding-top: 10px;
		border-top-right-radius: 30px;
		border-bottom-right-radius: 30px;
		text-align: right;
	}
	aside#open span{
		font-size: 0.7rem;
	}
	
	
	
	
	figure#logo{
		width: 40%;
		margin: 0 auto 0 20%;
	}
	figure.bg-img-mask {
		width: 300px;
		height: 300px;
	}
	section.full figure.bg-img-mask{
		margin: 0 auto;
	}
	section.all{
		width: 90%;
		padding: 30px 5%;
	}
	nav#main-menu ul li.resa{
		top:0;
		right:0;
		z-index:15;
	}
	nav#main-menu ul li{
		display:none;
	}
	
	li.resa-menu{
		bottom:15px;
		top:auto;
		z-index:15;
	}
	
	
	
	
	/* HOME */
	nav.bta-color-nav ul li{
		margin:20px 2%;
	}
	
	span.titre-infos-rotate{
		margin:-41px 0 40px 10px;
	}
	
	
	
	/* ABOUT */
	p.citation-about{
		font-size: 1.1rem;
		width: 80%;
		margin: 0 10%;
		line-height: 1.4;
	}
	
	
	/* CONTACT */
	.coord-pg-contact{
		
	}
	
	
	

	/* popup */
	.popup-box{
		width:95%;
		left:2.5%;
		top:7%;
		z-index:100;
		height:auto;
	}
	#popuptest:target{
		overflow:auto;
	}
	
	
	
	
	
	/* FOOTER */
	footer figure.logo-footer{
		margin:20px auto;
	}
	footer div.coord{
		text-align:center;
		width:90%;
	}
	footer div.coord article img{
		display:none;
	}
	
	aside#openhour{
		width:80%;
		margin-bottom:0;
	}
	aside#openhour span{
		font-size:0.75rem;
		text-align:center;
	}
	nav.menu-footer{
		display:none;
	}
	
	
	
	
	
	
	
}