* {margin:0;padding:0;-webkit-box-sizing: border-box;box-sizing: border-box;}
@font-face {font-family : 'Lato';font-style : normal;font-weight : 400;font-display : swap;src : url(https://fonts.gstatic.com/s/lato/v20/S6uyw4BMUTPHvxk.ttf) format('truetype');}
@font-face {font-family: 'pucefont-Light';src: url(https://guillaumeamillet.ovh/puceprestations/pucefont/pucefont-Light.ttf) format('truetype');}
@font-face {font-family: 'pucefont-LightItalic';src: url(https://guillaumeamillet.ovh/puceprestations/pucefont/pucefont-LightItalic.ttf) format('truetype');}
@font-face {font-family: 'pucefont-Regular';src: url(https://guillaumeamillet.ovh/puceprestations/pucefont/pucefont-Regular.ttf) format('truetype');}
@font-face {font-family: 'pucefont-Medium';src: url(https://guillaumeamillet.ovh/puceprestations/pucefont/pucefont-Medium.ttf) format('truetype');}
@font-face {font-family: 'pucefont-MediumItalic';src: url(https://guillaumeamillet.ovh/puceprestations/pucefont/pucefont-MediumItalic.ttf) format('truetype');}
@font-face {font-family: 'pucefont-Bold';src: url(https://guillaumeamillet.ovh/puceprestations/pucefont/pucefont-Bold.ttf) format('truetype');}
@font-face {font-family: 'pucefont-BoldItalic';src: url(https://guillaumeamillet.ovh/puceprestations/pucefont/pucefont-BoldItalic.ttf) format('truetype');}
@font-face {font-family: 'pucefont-ExtraBold';src: url(https://guillaumeamillet.ovh/puceprestations/pucefont/pucefont-ExtraBold.ttf) format('truetype');}
@font-face {font-family: 'pucefont-ExtraBoldItalic';src: url(https://guillaumeamillet.ovh/puceprestations/pucefont/pucefont-ExtraBoldItalic.ttf) format('truetype');}

:root {
    --marron: #502020;
    --bleu: #0ea5e9;
    --orange: #DA8E20;
    --vert: #d0e03a;
}
html {
    font-family: 'Lato', sans-serif;
    font-size:14px;
    color:#333;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    -moz-text-size-adjust:100%;
    overflow-x:hidden;
    overflow-y:scroll;
    scrollbar-width: thin;
    scrollbar-color: var(--bleu) #ffffff;
}
html::-webkit-scrollbar {
    width:5px;
}
html::-webkit-scrollbar-track {
    background:#fff;
}
html::-webkit-scrollbar-thumb {
    background:#fff;
    border-radius: 10px;
    border:1px solid #ddd;
}
h1, h2, h3, h4{
    display: inline-flex;
    cursor:pointer;
}
h1{
    font-family: "pucefont-ExtraBold";
}
h2{
    font-family: "pucefont-MediumItalic";
}
h3{
    color:#fff;
    font-family: "pucefont-ExtraBoldItalic";
    font-size:2rem;
    @media(min-width:481px){font-size:2.2rem;}
    @media(min-width:769px){font-size:2.6rem;}
    @media(min-width:1280px){font-size:3rem;}
}
h4{
    color:var(--bleu);    
    font-family: "pucefont-Regular";
}
.svg-phone{
    display:inline-flex;
    margin:0 0.5vw;
    fill:var(--vert);
    height: 32px;
    @media(min-width:481px){height:35px;}
    @media(min-width:769px){height:40px;}
    @media(min-width:1280px){height:42px;}
}
p{
    font-family: 'Lato', sans-serif;
    text-align: center;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    @media(min-width:481px){font-size:1rem;}
    @media(min-width:769px){font-size:1.1rem;}
    @media(min-width: 1280px){font-size:1.2rem;}
}
.effet_3d{
    -webkit-box-shadow: rgba(14, 30, 37, 0.12) 0px 1px 2px 0px, rgba(14, 30, 37, 0.52) 0px 2px 8px 0px;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 1px 2px 0px, rgba(14, 30, 37, 0.52) 0px 2px 8px 0px;
}
.effet_numero{
    background: linear-gradient(
        to right,
        rgb(37,161,138),
        rgb(37,161,138),
        rgb(37,161,138),
        rgb(210,224,83),
        rgb(210,224,83),
        rgb(255,255,0),
        rgb(255,255,0),
        rgb(210,224,83),
        rgb(210,224,83),
        rgb(37,161,138)
        );
    background-clip: text;
    color: transparent;
    background-size: 200% auto;
    animation: color_numero 10s linear infinite;
}
@keyframes color_numero {
    0%{background-position: 200% 50%;}
    100%{background-position: 0% 50%;}
}
body {
    width:100%;
    display:grid;
    align-items: center;
    justify-content: center; 
    grid-template-columns: 1fr;
}
header{
    width:100%;
    position:sticky;
    top:0px;
    z-index:90;
    display:grid;
    align-items: end;
    justify-content: end;
    min-height:80px;
    grid-template-columns: 1fr;
    grid-template-areas: "nav" "titre_header";
    background: linear-gradient(
        to top,
        rgb(208, 224, 58) 0%,
        rgb(208, 224, 58) 50%,
        white 50%,
        white 100%
    );
    @media (min-width: 481px){grid-template-columns: 1fr;}
    @media (min-width: 769px){grid-template-columns: 1fr 300px;grid-template-areas: "titre_header nav";}
    @media (min-width: 1280px){grid-template-columns: 1fr 400px;}
}
.logo, .logo-footer{
    display:flex;
    align-items: center;
    justify-content: center;
    border:2px solid var(--bleu);
    border-radius: 50%;
    background: white;
}
.logo{
    position: fixed;
    top:10px;
    left:2vw;
    z-index:99;
    height:100%;
    max-height:100px;
    @media(min-width:481px){max-height:120px;left:3vw;}
    @media(min-width:769px){max-height:150px;left:4vw;}
    @media(min-width:1280px){max-height:180px;left:5vw;}
}
.logo-footer{
    max-height:50px;
}
nav{
    grid-area: nav;
    align-self:start;
    display:flex;
    align-items: start;
    justify-content: end;
    width:100%;
    h3{padding-right: 2vw;}
    @media(min-width:481px){h3{padding-right: 3vw;}}
    @media(min-width:769px){h3{padding-right: 4vw;}}
    @media(min-width:1280px){h3{padding-right: 5vw;}}
}
.titre_header{
    grid-area: titre_header;
    visibility: hidden;
    align-self:end;
    display:flex;
    width:100%;
    align-items: end;
    justify-content: end;
    flex-flow: column wrap;
    padding-right: 3vw;
    h1{font-size:1.4rem;color:var(--bleu);}
    h2{font-size:1rem;color:var(--orange);}
    @media(min-width:481px){padding-right:5vw;h1{font-size:1.8rem;}h2{font-size: 1rem;}}
    @media(min-width:769px){padding-right:7vw;h1{font-size:2.6rem;}h2{font-size: 1.6rem;}}
    @media(min-width:1280px ){padding-right:9vw;h1{font-size:3rem;}h2{font-size: 2rem;}}
}
main{
    width:100%;
    display:grid;
    grid-template-columns:1fr; 
    -webkit-background-size: cover;
    background-size: cover;
}
#topmain{    
    background: url(imgs/fond1.jpg) no-repeat center fixed;
    height:90vh;
    align-content: space-evenly;
    padding-top:5vh;
    grid-template-areas: "accueil" "circle" "bouton-contact";
    @media (min-width: 769px){grid-template-columns:1fr 1fr;grid-template-areas: "accueil accueil" "bouton-contact circle";}
    @media(min-width:1280px){padding-top:10vh;}
}
.accueil{
    grid-area: accueil;
    display:grid;
    width:100%;
    justify-items: center;
    grid-auto-rows: min-content;
    grid-template-columns:1fr;
    h1,h2{margin:1vh auto;text-align:center;}    
    h1{font-size: 3.4rem;color:var(--orange);}    
    h2{font-size: 2rem;color:var(--marron);max-width:80vw;}    
    @media(min-width:481px){h1{font-size:4rem;};h2{font-size:2.4rem;}}
    @media(min-width:769px){h1{font-size:5rem;letter-spacing:3px;};h2{font-size:2rem;}}
    @media(min-width:1280px){h1{font-size:8rem;letter-spacing:5px;};h2{font-size:2.4rem;}}
    @media(min-width:1600px){h1{font-size:9rem;letter-spacing:8px;};h2{font-size:2.8rem;}}
}
.circle-container{
    grid-area: circle;
    display: flex;
    position: relative;
    margin:auto;
    width:250px;
    height:250px;
    @media(min-width: 481px){width:270px;;height:270px;}
    @media(min-width: 769px){width:300px;;height:300px;}
    @media(min-width: 1280px){width:350px;;height:350px;}
    @media(min-width:1600px){width:400px;height:400px;}
}
.svg-circle{
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    transform-origin: 0;
}
@keyframes rotate-text{
    from{transform: rotate(360deg);}
    to{transform: rotate(0deg);}
}
.text-circle{
    font-family: "pucefont-Regular";
    font-size: 0.95rem;
    fill:var(--orange);
    animation: rotate-text 10s linear infinite;
    transform-origin: 50% 50%;
}
.text-centre-svg{
    position: absolute;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255,255,255,0.9);
    border:4px solid var(--orange);
    border-radius: 50%;
    width:170px;
    height:170px;
    padding:10px;
    span{font-family: 'pucefont-MediumItalic';font-size:1.6rem;margin:auto;text-align: center;color:var(--marron);}
    @media (min-width: 481px){width:180px;;height:180px;span{font-size:1.6rem;}}
    @media (min-width: 769px){width:200px;;height:200px;span{font-size:1.8rem;}}
    @media (min-width: 1280px){width:230px;;height:230px;span{font-size:2.2rem;}}
    @media (min-width: 1600px){width:270px;;height:270px;span{font-size:2.6rem;}}
}
.bouton-contact-container{
    grid-area: bouton-contact;
    margin:auto;
    display: flex;
    flex-flow: row;
    align-items: end;
    justify-content: end;
    margin-bottom:5vh;
}
.bouton-contact {
    position: relative;    
    overflow: hidden;
    color: #fff;
    background: var(--bleu);
    border: none;
    font-family: "pucefont-MediumItalic";
    text-decoration: none;
    border-radius: 10px;
    cursor: pointer;
    padding: 8px;
    font-size: 1.4rem;
    span{margin:auto;}
    @media (min-width: 481px){font-size: 1.6rem;padding: 10px;}
    @media (min-width: 769px){font-size: 1.8rem;padding: 12px;}
    @media (min-width: 1280px){font-size: 2.2rem;padding: 15px;}
}
.bouton-contact::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--vert);
    transform: translateX(100%);
    transition: transform 300ms ease-out;
}
.bouton-contact:hover::after {
    transform: translateX(0);
}
.bouton-contact > * {
    position: relative;
    z-index: 1;
}
#bottommain{
    background: url(imgs/fond2.jpg) no-repeat center fixed;
    align-content: start;
    grid-auto-rows: min-content;
    padding-bottom:5vh;
    @media (min-width: 769px){grid-template-columns:1fr 1fr;}
}
.diapo{
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: max-content;
    align-items: start;
    width:100%;
    gap:6vh;
    z-index: 10;
    @media (min-width: 769px){grid-column: span 2;}
}
.slide{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,0.9);
    padding:2vh;
    min-height:260px;
    img{margin:auto;height:80px;}
    h4{margin:auto;font-size:1.6rem;text-align: center;}
    p{max-width: 80vw;}
    @media (min-width: 481px){h4{font-size: 2.2rem;}}
    @media (min-width: 769px){h4{font-size: 2.4rem;}}
    @media (min-width: 1280px){h4{font-size: 2.8rem;}}
}
.titre-slide{
    display: grid;
    grid-template-columns: 1fr;
    gap:2vw;
    @media (min-width: 769px){grid-template-columns: 100px 1fr;gap:3vw;}
    @media (min-width: 1280px){grid-template-columns: 100px 1fr;gap:4vw;}
}
.social{
    align-self: end;
    justify-self: center;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: end;
    img{margin:auto;max-width: 32px;}
    p{margin: auto;color:var(--marron);font-family: 'pucefont-BoldItalic';font-size: 1.1rem;}
    gap:1vw;
    margin:0 auto;
    padding-top: 2vh;
    @media (min-width: 481px){p{font-size: 1.2rem;}}
    @media (min-width: 769px){grid-column: 1;grid-row: 2 / span 2;p{font-size: 1.6rem;}img{max-width: 40px;}}
    @media (min-width: 1280px){p{font-size: 2rem;}img{max-width: 50px;}}
}
.tarifs{
    display: flex;
    align-items: start;
    justify-content: start;
    z-index: 20;
    margin:0 2vw;
    p{
        background-color: var(--orange);
        transform: skew(-10deg, -5deg);
        width:100%;
        margin:auto 0;
        padding:8px 2vw;
        color: #fff;
        font-family: 'pucefont-ExtraBold';
        font-size:1.8rem;
    }
    @media (min-width: 481px){p{font-size:1.9rem;}}
    @media (min-width: 769px){grid-column: 2;p{font-size:2.2rem;}}
    @media (min-width: 1280px){p{font-size:2.4rem;}}
}
footer{
    display:flex;
    width:100%;
    vertical-align: baseline;
    background-color:var(--orange);
    padding:5px;
}
.footer-content{
    display: flex;
    flex-flow: column;
    margin:auto;
    gap:5px;
    p,a,span,div{color:#fff;font-family: 'pucefont-Light';text-decoration: none;font-size:1.2rem;}
    a:hover, a:active, a:focus, a:visited{text-decoration: underline;}
    span{padding:0 5px;display: none;}
    @media (min-width: 769px){flex-flow: row;span{display: inline-flex;}p,a,span{font-size:1.3rem;}gap:8px;}
    @media (min-width: 1280px){p,a,span{font-size:1.4rem;}gap:10px;}
}