/* polices  */
@font-face {font-family: 'Roboto', sans-serif;font-family: 'Roboto Slab', serif;}
/* variables de couleur  */
:root {--black : #0b0b0c;--white : #FFFFFF;--blue : #0866FF;}


* {font-family: 'Roboto', sans-serif;color:var(--white);scroll-behavior:smooth;}
h1, h2, h3, h4, h5, h6 {font-family: 'Roboto Slab', serif;}

/* animation, down up */
@keyframes downup {0% {transform:translateY(0);}100% {transform:translateY(-30%);}}


body {background-color:var(--black);margin:0!important;}

main .page-home {overflow-x:hidden;}

main .page-home #banniere {height:100vh;width:100vw;position:relative;}
main .page-home #banniere img {width:100%;height:100%;position:absolute;z-index:-1;object-fit:cover;object-position:center;top:0;left:0;opacity:0.5;}
main .page-home #banniere h1 {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;text-align:center;font-size:96px;line-height:96px;text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.50);width: 100%;}
main .page-home #banniere h1 strong {font-size:28px;letter-spacing:28px;text-transform:capitalize;font-weight:400;font-family: 'Roboto Slab', serif;text-align:center;margin-left:28px;line-height:28px;}
main .page-home #banniere a.facebook {height:30px;aspect-ratio:1;position:absolute;right:30px;top:30px;}
main .page-home #banniere a.facebook svg {width:100%;height:100%;object-fit:cover;object-position:center;} 
main .page-home #banniere a.facebook svg path {fill:var(--white);}
main .page-home #banniere a.decouvrez {display:flex;align-items:center;justify-content:center;flex-direction:column;position:absolute;bottom:50px;left:50%;transform:translate(-50%,0);width: max-content;height: max-content;text-decoration:none;}
main .page-home #banniere a.decouvrez p {font-family: 'Roboto Slab', serif;font-size:24px;text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.50);}
main .page-home #banniere a.decouvrez svg {animation:downup 1s ease-in-out infinite alternate;}

main .page-home #bienvenue {width:100%;padding:150px 16.666%;position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;flex-direction:column;}
main .page-home #bienvenue h2 {font-size:32px;line-height:32px;margin:0 0 30px 0;background-color:var(--black);padding-right:30px;font-weight:200;}
main .page-home #bienvenue h2 strong {font-weight:400;font-family: 'Roboto Slab', serif;}
main .page-home #bienvenue .trait-titre {height:1px;width:66.66%;position:absolute;top:166px;background-color:var(--white);z-index:-1;}
main .page-home #bienvenue p {font-size:18px;line-height:24px;margin:0 0 60px 0;width:calc(5 * 8.333%);}
main .page-home #bienvenue .trait {height:1px;width:100%;background-color:var(--white);}

main .page-home #contact {width:100%;padding:0 16.666%;position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;flex-direction:column;}
main .page-home #contact h2 {font-size:32px;line-height:32px;margin:0 0 30px 0;background-color:var(--black);width:100%;text-align:center;font-weight:200;}
main .page-home #contact>div {width:100%;}
main .page-home #contact>div form {width:100%;display:flex;flex-wrap:wrap;justify-content:flex-end;}
main .page-home #contact>div form p {width:calc(50% - 20px);margin:10px;}
main .page-home #contact>div form p:nth-child(4),
main .page-home #contact>div form p:nth-child(5) {width:100%;margin:10px;}
main .page-home #contact>div form p:nth-child(6) {width:max-content;margin:10px;}
main .page-home #contact>div form input,
main .page-home #contact>div form textarea {width:100%;padding:10px 20px;border:1px solid var(--white);background-color:transparent;color:var(--white);outline:none;border-radius:8px;transition:.3s;}
main .page-home #contact>div form textarea {resize:vertical;transition-duration:0s;}
main .page-home #contact>div form input:focus,
main .page-home #contact>div form textarea:focus {background-color:var(--white);color:var(--black);}
main .page-home #contact>div form input[type="submit"] {width:100%;padding:10px 20px;border:1px solid var(--white);background-color:var(--white);color:var(--black);outline:none;border-radius:8px;cursor:pointer;text-transform:uppercase;font-size:14px;letter-spacing:3px;font-weight:600;}
main .page-home #contact>div form input[type="submit"]:hover {background-color:var(--black);color:var(--white);}
main .page-home #contact>div form .wpcf7-response-output {width:100%;margin-top:0;}

main .page-home #trouver {width:100%;padding:150px 16.666%;position:relative;display:flex;}
main .page-home #trouver .map {width:calc(37.5% - 20px);aspect-ratio:1;border-radius:8px;margin-right:20px;}
main .page-home #trouver .map img {width:100%;height:100%;object-fit:cover;object-position:center;border-radius:8px;}
main .page-home #trouver .map .acf-map {width:100%;height:100%;border-radius:8px;}
main .page-home #trouver .textes {width:62.5%;;position:relative;display:flex;flex-wrap:wrap;flex-direction:column;align-items:flex-start;}
main .page-home #trouver .textes h2 {font-size:32px;line-height:32px;margin:0 0 30px 0;background-color:var(--black);padding-right:30px;font-weight:200;}
main .page-home #trouver .textes .trait-titre {height:1px;width:100%;position:absolute;top:16px;background-color:var(--white);z-index:-1;}
main .page-home #trouver .textes p {font-size:18px;line-height:24px;width:100%;}
main .page-home #trouver .textes .facebook {width:100%;display:flex;margin-bottom:30px;}
main .page-home #trouver .textes .facebook a {height:64px;aspect-ratio:1;margin-right:20px;}
main .page-home #trouver .textes .facebook a svg {width:100%;height:100%;object-fit:cover;object-position:center;} 
main .page-home #trouver .textes .facebook a svg path {fill:var(--white);}
main .page-home #trouver .textes .trait {height:1px;width:100%;background-color:var(--white);}


main .page-mentions #mentions {width:100%;padding:150px 16.666%;position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;flex-direction:column;}
main .page-mentions #mentions h1 {font-size:32px;line-height:32px;margin:50px 0 30px 0;background-color:var(--black);padding-right:30px;font-weight:200;}
main .page-mentions #mentions .trait-titre {height:1px;width:66.66%;position:absolute;top:242px;background-color:var(--white);z-index:-1;}
main .page-mentions #mentions p {font-size:18px;line-height:24px;margin:0 0 60px 0;width:100%;}
main .page-mentions #mentions a {color:var(--white);margin:0;}
main .page-mentions #mentions>a {font-size:16px;margin:0;text-decoration:none;}
main .page-mentions #mentions a:hover {color:var(--blue);}


main .page-404 #erreur {width:100%;padding:150px 16.666%;position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;flex-direction:column;}
main .page-404 #erreur h1 {font-size:32px;line-height:32px;margin:50px 0 30px 0;background-color:var(--black);padding-right:30px;font-weight:200;}
main .page-404 #erreur p {font-size:18px;line-height:24px;margin:0 0 60px 0;width:100%;}
main .page-404 #erreur a {color:var(--white);margin:0;}
main .page-404 #erreur a:hover {color:var(--blue);}


footer {width:100%;padding:30px 8.333%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;flex-direction:column;}
footer .trait {height:1px;width:100%;background-color:var(--white);margin:0 0 30px 0;}
footer a {color:var(--white);margin:0;}
footer a:hover {color:var(--blue);}
footer a:visited {color:var(--white);}
footer p {font-size:14px;line-height:14px;margin:30px 0 0 0;}


/* media queries  */
@media screen and (max-width: 1500px) {
    main .page-home #bienvenue,
    main .page-home #contact,
    main .page-home #trouver,
    main .page-mentions #mentions {padding-left:8.333%;padding-right:8.333%;}

    main .page-home #bienvenue .trait-titre,
    main .page-mentions #mentions .trait-titre {width: calc(10 * 8.333%);}
    main .page-home #bienvenue p {width: calc(8 * 8.333%);}
}

@media screen and (max-width: 992px) {
    main .page-home #bienvenue,
    main .page-home #contact,
    main .page-home #trouver,
    main .page-mentions #mentions {padding-left:15px;padding-right:15px;}

    main .page-home #bienvenue,
    main .page-home #trouver,
    main .page-mentions #mentions {padding-top:70px;padding-bottom:70px;}

    main .page-home #bienvenue .trait-titre,
    main .page-mentions #mentions .trait-titre {width: calc(100% - 30px);}

    main .page-home p {font-size:16px!important;}
    main .page-home #banniere {height:320px;}
    main .page-home #banniere h1 {font-size:48px;line-height:48px;}
    main .page-home #banniere h1 strong {font-size:16px;letter-spacing:16px;}
    main .page-home #banniere a.decouvrez {display:none;}
    main .page-home #bienvenue h2 {font-size:24px;line-height:24px;}
    main .page-home #bienvenue .trait-titre {top:86px;}
    main .page-home #bienvenue p {width: calc(12 * 8.333%);}
    main .page-home #trouver {flex-direction:column-reverse;}
    main .page-home #trouver .textes {width:100%;}
    main .page-home #trouver .textes h2 {font-size:24px;line-height:24px;}
    main .page-home #trouver .textes .facebook {justify-content:center;}
    main .page-home #trouver .textes .facebook p {width:auto;}
    main .page-home #trouver .textes .trait {display:none;}
    main .page-home #trouver .map {width:100%;margin-right:0;margin-bottom:30px;aspect-ratio:unset;height:300px;}

    main .page-mentions #mentions .trait-titre {top:162px;}
}

@media screen and (max-width: 500px) {
    main .page-home #contact>div form p {width:100%;}
}