html {
background: url(img/background_g.png), url(img/background_d.png);
background-position: left top, right top;
background-size: 15% auto;
background-repeat: repeat-y;			
}

body {
padding-top: 0;
}

#acces {
margin-top:6%;
}

#accueil, .infos, .ateliers, .exposants, .demo {
background-color: #F4EE9E;
}

#accueil {
padding:5%;
margin-top:6%;
border: 1px outset black;
border-radius:15px;
box-shadow: 6px 6px 12px #aaa;
text-align: justify;
font-size:1.4em;
}

#adr {
text-align:center;
}

.atelier {
text-align:center;
}

.ateliers {
border: 1px outset black;
border-radius:15px;
box-shadow: 6px 6px 12px #aaa;
}

.atelier img{
max-width:30%;
}

.categorie h4 {
font-size: 1.3em;
color: green;
margin-left: 5%;
margin-right:5%:
}

.categorie p {
margin-left: 10%;
margin-right:10%;
}

.categorie h6 {
font-size: 1.2em;
}

.demo {
border: 1px outset black;
border-radius:15px;
box-shadow: 6px 6px 12px #aaa;
}

.demo p {
text-align: center;
}

.demo span {
font-weight: bold;
}

#entete p {
text-align: center;
margin:0;
padding:0;
}

.exposants {
border: 1px outset black;
border-radius:15px;
box-shadow: 6px 6px 12px #aaa;
margin-bottom:5%;
text-align: center;
}

.exposants ul {
text-align: left;
padding-right:5%;
}

#FAQ h4 {
font-size: 1.2em;
margin-top:9%;
margin-bottom:1%;
}

#FAQ h5 {
font-size:0.9em;
font-weight:bold;
margin-bottom: -10px;
}

#FAQ p {
font-size: 1em;
font-style: italic;
text-align: justify;
padding-left:3%;
padding-right:3%;
}

.infos {
border: 1px outset black;
border-radius:15px;
box-shadow: 6px 6px 12px #aaa;
margin-bottom:5%;
padding:5%;
font-size: 1.4em;
}

.infos ul {
margin-right:10%;
}

#menu_p {
position: fixed;
top: 0;
left: 15%;
right: 15%;
z-index:99999;
}

#menu_p img{
vertical-align: middle;
margin: 0;
}

#menu_p p{
vertical-align: middle;
margin:0;
padding:0;
padding-left:20px;
background-color: white;
box-shadow: 6px 6px 12px #aaa;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}

#menu_p ul {
list-style-type: none;
text-align: left;
padding:0;
padding-left:5px;
margin-top:0;
margin-left:15px;
padding-bottom:5px;
background-color: white;
box-shadow: 6px 6px 12px #aaa;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}

#menu_p a {
text-decoration: none;
}

#menu_p li {
font-size: 0.8em;
}

#menu_p li a {
color: black;
}

.no_img {
min-height: 150px;
}

.rama {
margin-top:-1%;
margin-bottom:8%;
}

.slider_focus {
border: 1px outset black;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
box-shadow: 6px 6px 12px #aaa;
border-top-style : none;
padding-bottom: 3%;
}

.slider_focus ul li{
align-self:flex-end;
display: flex;
align-items: center;
justify-content: center;
margin-bottom:.5rem;
}
	
.slider_focus ul li button img{
will-change: transform;
transform:scale(1);
transition:transform .4s;
border-radius: 50%;
border:2px solid white; 
width:inherit;
height:inherit;
object-fit: cover
}

.slider_focus ul li span img{
display:block;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
transform:translateX(-100%);
z-index:-1;
opacity:0;
will-change: transform,opacity;
transition:transform .6s,opacity .6s
}

.slider_focus ul:not(:focus-within) li:first-child span img,
.slider_focus ul li:focus-within span img{
transform:translateX(0%);
opacity:1
}

.slider_focus ul li:focus-within{
outline:2px solid black;
border-radius: 50%
}
	

.slider_focus ul li:not(:focus-within) button img{
transform:scale(.9);
}

.slider_focus ul:not(:focus-within) li:first-child button img{
transform:scale(1);
}

#t_h {
display: grid;
grid-template-columns: 30% 60%;
}


@media all and (orientation: portrait) 
{

#adr_ordi {
display:none;
}

.categorie .propose {
margin-left: 20%;
}

#corps {
width: 80%;
margin:auto;;
}

#entete {
margin-top:15%;
}

.infos h3, .demo h3 {
font-size: 1.4em;
color: green;
text-align:center;
font-weight: bold;
margin-bottom: 10%;
}

mail {
font-size:0.8em;
}

#menu_p {
width:70%;
font-size: 1.3em;
}

#menu_p li {
padding-bottom: 4px;
padding-top: 4px;
margin-left:5%;
line-height:2em;
}

#menu_p ul {
width:60%;
}

#san_5 {
max-width: 70%;
}

#titre {
margin-left:10%;
}

.rama {
max-width:90%;
margin:auto;
margin-bottom: 30px;
}

*{box-sizing: border-box}

.slider_focus{
max-width: 100%;
margin: 2rem auto;
margin-top:0;
}	
	
.slider_focus ul{
margin: 0;
/*reset ul*/
padding: 0;
list-style-type:none;
/*reset ul*/
display:flex;
position: relative;
justify-content: center;
overflow: hidden;
aspect-ratio:2/3;
gap:.5rem;
}

.slider_focus ul li button { 
all:unset;
padding:0;
border:0;
cursor: pointer; 
width:2rem;
height:2rem;
}

}

@media all and (orientation: landscape) 
{
#adr_phone {
display:none;
}

h3 {
font-size: 2em;
color: green;
font-weight:bold;
text-align:center;
}

.categorie .propose {
margin-left: 8%;
}

#corps {
width: 70%;
margin:auto;;
}

.demo ul {
font-size:1.4em;
}

#entete img {
margin-top:5%;
width: 25%;
}

.exposants {
font-size:1.4em;
}

#menu_p {
width:40%;
margin:auto;
font-size: 2.4em;
}

#menu_p ul {
width:70%;
}

#menu_p li {
margin-left: 10%;
line-height:2em;
}

#titre {
margin-left: 20%;
}

*{box-sizing: border-box}

.slider_focus{
max-width: 90%;
margin: 1rem auto;
}	
	
.slider_focus ul{
margin: 0;
/*reset ul*/
padding: 0;
list-style-type:none;
/*reset ul*/
display:flex;
position: relative;
justify-content: center;
overflow: hidden;
aspect-ratio:1/1;
gap:.4rem;
}

.slider_focus ul li button { 
all:unset;
padding:0;
border:0;
cursor: pointer; 
width:4rem;
height:4rem;
}

}