@charset "UTF-8";

/* =====================================
BASE
===================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,
body{
width:100%;
min-height:100%;
}

body{

padding-top:3em;

background:#ffffff;

font-family:Arial, Helvetica, sans-serif;

}

/* =====================================
FEUILLE
===================================== */

#slideshow{

position:relative;

width:700px;
height:800px;

margin:58px auto 32px;

padding:55px;

border:1px solid #ddd;

background:#ffffff;

border-radius:2px;

box-shadow:0 0 3px rgba(0,0,0,.2);

}

/* =====================================
OMBRE FEUILLE BOMBÉE
===================================== */

#slideshow::before,
#slideshow::after{

content:"";

position:absolute;

bottom:13px;

width:75%;

height:16px;

z-index:-1;

background:rgba(0,0,0,.10);

border-radius:50%;

box-shadow:
    0 0 3px rgba(0,0,0,.4),
    0 16px 8px rgba(0,0,0,.7);

}

#slideshow::before{

left:0;

transform:rotate(-4deg);

}

#slideshow::after{

right:0;

transform:rotate(4deg);

}

/* =====================================
PHOTO
===================================== */

.container{

position:relative;

width:550px;
height:550px;

margin:0 auto;

overflow:hidden;

}

.c_slider{

position:relative;

width:100%;
height:100%;

}

.photo{

position:absolute;

inset:0;

width:100%;
height:100%;

object-fit:cover;

opacity:0;

transition:opacity:.8s ease;

}

.photo.active{

opacity:1;

}

/* =====================================
FLÈCHES
===================================== */

.commands{

position:absolute;

top:604px;

width:38px;
height:38px;

display:flex;

align-items:center;
justify-content:center;

text-decoration:none;

font-size:26px;

color:#ffffff;

background:#c0c0c0;

border-radius:50%;

box-shadow:1px 1px 2px rgba(0,0,0,.25);

user-select:none;

transition:.25s;

z-index:100;

}

.commands:hover{

background:#9d9d9d;

}

.prev{

left:-19px;

}

.next{

right:-19px;

}

/* =====================================
POINTS
===================================== */

.dots_commands{

display:flex;

justify-content:center;

gap:8px;

margin-top:28px;

list-style:none;

}

.dots_commands li{

width:8px;
height:8px;

border-radius:50%;

background:#ffffff;

box-shadow:
    0 1px 2px rgba(0,0,0,.55) inset;

transition:.3s;

}

.dots_commands li.active{

background:#bd9b83;

}

/* =====================================
TEXTE — PC
À GAUCHE DE LA FEUILLE
===================================== */

[id="texte-Exterieur jour"]{

position:absolute;

top:210px;

left:calc(50% - 750px);

width:280px;

height:280px;

padding:20px;

}

[id="texte-Exterieur jour"] p{

margin:0;

font-size:15px;

line-height:1.45;

text-align:justify;

}

#texte-en{

display:none;

}

#texte-en.visible{

display:block;

}

#texte-fr.cache{

display:none;

}

/* =====================================
ENG
===================================== */

#eng-button{

display:block;

margin:14px auto 0;

border:0;

background:transparent;

font-family:Arial, Helvetica, sans-serif;

font-size:12px;

color:#555;

cursor:pointer;

padding:3px 5px;

}

#eng-button:hover{

color:#000;

}

/* =====================================
GIF
===================================== */

#Layer10{

width:37px;

margin:20px auto 32px;

}

#Layer10 img{

display:block;

width:37px;
height:37px;

}

/* =====================================
TABLETTE
===================================== */

@media screen and (max-width:1100px){

#slideshow{

    width:100%;

    max-width:700px;

    height:auto;

    margin:18px auto 0;

    padding:30px;

}


.container{

    width:100%;

    max-width:550px;

    height:auto;

    aspect-ratio:1 / 1;

}


.photo{

    width:100%;
    height:100%;

}


.commands{

    top:calc(100% - 55px);

}


.prev{

    left:5px;

}


.next{

    right:5px;

}


[id="texte-Exterieur jour"]{

    position:relative;

    left:auto;

    top:auto;

    width:100%;

    max-width:550px;

    height:auto;

    margin:35px auto 30px;

    padding:0 20px;

}


[id="texte-Exterieur jour"] p{

    text-align:justify;

}

}

/* =====================================
SMARTPHONE
NE PAS MODIFIER
===================================== */

@media screen and (max-width:480px){

body{

    padding:8px;

}


#slideshow{

    width:100%;

    max-width:100%;

    height:auto;

    margin:12px auto 0;

    padding:12px;

}


.container{

    width:100%;

    height:auto;

    aspect-ratio:1 / 1;

}


.c_slider{

    width:100%;

    height:100%;

}


.photo{

    width:100%;

    height:100%;

}


.commands{

    top:calc(100% - 50px);

    width:34px;

    height:34px;

    font-size:22px;

}


.prev{

    left:4px;

}


.next{

    right:4px;

}


.dots_commands{

    gap:7px;

    margin-top:18px;

}


.dots_commands li{

    width:7px;

    height:7px;

}


[id="texte-Exterieur jour"]{

    position:relative;

    left:auto;

    top:auto;

    width:100%;

    height:auto;

    margin:75px auto 35px;

    padding:0 20px;

    text-align:center;

}


[id="texte-Exterieur jour"] p{

    font-size:14px;

    line-height:1.5;

    text-align:justify;

}


#eng-button{

    position:relative;

    display:block;

    margin:16px auto 0;

    padding:2px 5px;

    font-size:12px;

}


#Layer10{

    position:relative;

    width:30px;

    height:30px;

    margin:35px auto 35px;

    left:auto;

    bottom:auto;

    transform:none;

}


#Layer10 img{

    display:block;

    width:30px;

    height:30px;

}

}