/*

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif ;

font-family: Georgia, "Times New Roman", Times, serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif ;

*/


/* variables ------------------------------------------------- */
:root {
  --noir: rgb(25,25,25);
  --navy: rgb(10,25,40);
  --gris: rgb(30,45,60);


  --couleur1: rgb(253,253,255);
  --couleur2: rgb(251,251,253);
  --couleur3: rgb(249,249,251);
  --couleur4: rgb(247,247,249);
  --couleur5: rgb(245,245,247);
  --couleur5: rgb(243,243,245);

   --dark: rgb(30,30,30); 
    --grey: rgb(188, 188, 188);
    --green: rgb(120, 255, 210);
    --yellow: rgb(255, 128, 0);
    --yellow2: rgb(255, 150, 30);
    --bg: rgb(140, 140, 140);
  }

/* global ------------------------------------------------- */
:root{background:black;}
body,html{  background:white;  color:var(--navy); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; scroll-behavior: smooth; margin:0; padding:0; font-size:16px; font-weight:500;   }
a{color:white; text-decoration:none; cursor:pointer; }
a:hover {cursor:pointer !important;}
select {cursor:pointer;}
/*::placeholder {color: grey; }*/

.btn { background:var(--navy); /*border-bottom:solid 3px var(--gris);*/ display:inline-block; padding:15px 25px 15px 25px; line-height:130%; font-size:15px; font-weight:500; vertical-align:middle; /* box-shadow: inset 0 0 20px rgba(0,0,0,0.2); */ }
/* .btn .material-symbols-outlined {vertical-align:middle; margin-left:20px; font-size:20px; font-variation-settings:'FILL' 0,'wght' 600,'GRAD' 0,'opsz' 24} */
.btn img {  padding:0; display:inline-block;  width:8px; margin:0 0 2.5px 20px; vertical-align:middle; }
.btn:hover {background:var(--gris); cursor:pointer;}

.derouler .top {/* display:flex; justify-content: space-between; align-items: center;*/ padding:15px 0;  -webkit-user-select: none; -ms-user-select: none; user-select: none; }
.derouler .top:hover { cursor:pointer; }
.derouler .top span {text-align:left; margin-right:20px;}
.derouler .image {vertical-align:middle; width:10px;}
.derouler .contenu {padding:0 15px 10px 15px; text-align:left; }
.derouler .contenu .radio {background:transparent; border:solid 2px white; color:white; padding:10px 15px; margin:15px 0; }
.derouler .contenu .radio.selected { border:solid 2px var(--blue); }
.derouler .contenu, .derouler .cacher {display:none;}

@media screen and (max-width: 600px) { 
  /* .titre {width:85%; margin:50px auto 30px auto;  } */
  }

/* menu ----------------------------------------------------- */
#menu { position:relative; z-index:1; text-align:right; background:var(--navy); padding-right:10px; font-weight:500; }
#menu .menu {display:inline-block; vertical-align:middle; text-align:center; padding:15px 20px; cursor:pointer; vertical-align:middle; font-size:13px; line-height:100%; line-height:125%;  }
#menu #globe {width:15px; padding-right:5px; padding-bottom:2px; vertical-align:middle;}
#menu .sousmenu {position:absolute; top:62px; left:0; width:100%; z-index:3; background:var(--navy);  padding:30px 0; }

#menubtn, #fermerbtn {display:none; height:18px; vertical-align:middle;}
#sousmenumobile {display:none;}

#sousmenuun a {width:200px; text-align:left; display:block; margin: 10px auto;  }
#sousmenutrois a {width:80px; text-align:left; display:block; margin: 10px auto;  }

#menu, #sousmenu, #sousmenumobile, #sousmenuun, #sousmenudeux, #sousmenutrois {color:white; background:var(--navy);}
#menu a, #sousmenu a, #sousmenumobile a, #sousmenuun a, #sousmenudeux a, #sousmenutrois a {color:white;}



@media screen and (max-width: 950px) {
  #menu .menu {display:none; }
  #menu .sousmenu {padding-left:30px;}

#menubtn {display:inline-block; padding:15px 20px;}
#fermerbtn {padding:15px 20px;}
#sousmenumobile {text-align:left; padding:80px 0 50px 0; position:absolute; top:48px; left:0; width:100%; z-index:3;   }
#sousmenumobile a { margin:20px; display:block;  }
#sousmenumobile .derouler .top {padding: 0; margin:20px;}

  #sousmenuun a, #sousmenutrois a {font-size:25px; margin: 10px auto; width:auto; font-weight:700;}
  }


/* logo --------------------------------------------------- */
#logo {width:120px; position:absolute; top:0; left:10px; z-index:50; padding:10px 15px; background:var(--navy); margin:10px; border-radius:5px;  }
#logo img {width:100%;   }
@media screen and (max-width: 950px) {
  #logo {width:80px; top:0;}
}


/* page ------------------------------------------------- */
.page .intro {margin:100px 0 100px 0; text-align:center;}
.page .intro .blocgauche {text-align:left; display:inline-block; width:500px; vertical-align:top; margin:0 30px; }
.page .intro .titre { font-size:45px; font-weight:700; margin:0 0 40px 0;  /*text-shadow: 0 0 1px rgba(0,0,0,1);*/  } 
.page .intro .texte { font-size:17px; font-weight:400; line-height:140%; margin:40px auto 40px auto;  text-align:left; }
.page .intro .cgv { font-size:12px; font-weight:600; line-height:140%; margin:10px auto 20px auto;  }
.page .intro .cgv a { text-decoration:underline; color:var(--navy); }
/* .page .intro .image { display:none; position:relative; width:500px; height:470px; margin:0 40px 0 40px; display:inline-block; }
 .page .intro .image .gradient {display:none; position:absolute; top:0; left:10%; width:90%; height:100%; border-radius:4px; background: linear-gradient(45deg, black, rgb(50,50,50));} */
.page .intro .photo { position:relative; width:450px; margin:0 40px 0 40px; display:inline-block; border-radius:5px;  }
.page .intro .btn {margin:10px 20px 10px 0; border-radius:5px; }

.page .intro .infos { text-align:left; margin:40px auto 40px auto; background:var(--couleur3); border-left:solid 5px var(--couleur5); padding:15px 30px; line-height:145%; border-radius:5px;  }
.page .intro .infos div {margin:15px 0; }
.page .intro .infos a {color:var(--navy);}

.page .intro table { width:100%; margin:5px 0;}
.page .intro table th {text-align:left; padding:7px 15px 7px 0;}
.page .intro table td {text-align:right; padding:7px 0; white-space: nowrap;}

@media screen and (max-width: 1130px) {
.page .intro {margin:80px 0 20px 0;}
.page .intro .blocgauche {text-align:center; }
.page .intro .photo { margin:40px; }
.page .intro .btn {margin:10px; }
}

@media screen and (max-width: 600px) {
  .page {margin:0 20px;}
  .page .intro .blocgauche {width:100%; margin:0; }
  .page .intro .titre { font-size:35px;  } 
  .page .intro .photo { width:300px; margin:40px 0; }
  .page .intro .btn {display:block; margin:15px 0; }
  }


/* accueil ----------------------------------------------------------------- */
#accueil {width:100%;  font-size: 0; background:var(--couleur6);}
#accueil .domaine {width:25%; height:200px;  display:inline-block; text-align:center; overflow: hidden; }
#accueil .domaine:hover {  opacity:0.8; }
.couleur1 {background:var(--couleur1);}
.couleur2 {background:var(--couleur2);}
.couleur3 {background:var(--couleur3);}
.couleur4 {background:var(--couleur4);}
.couleur5 {background:var(--couleur5);}
#accueil .material-symbols-outlined {color:var(--navy); font-size:32px; margin-top:65px; margin-bottom:10px;  font-variation-settings:'FILL' 1,'wght' 300,'GRAD' 0,'opsz' 24; }
#accueil .texte {color:var(--navy); font-size:17px; margin: 0 10px; font-weight:500;  }
@media screen and (max-width: 1200px) {#accueil .domaine {width:33.33333333333333%;}}
@media screen and (max-width: 900px) {#accueil .domaine {width:50%;}}

/* faq ------------------------------------------------- */
#faq {padding:100px 0;  }
#faq .titre {text-align:center; padding:0; margin:0; margin-bottom:30px; font-size:40px; line-height:125%; font-weight:700;}
#faq .derouler {width:900px; border-bottom:solid rgb(50,50,50) 1px; margin-left:auto; margin-right:auto;}
#faq .derouler .top {padding:15px 0; font-size:20px; font-weight:700; line-height:140%;}
#faq .derouler .contenu {padding:0 0 15px 0; line-height:155%; }

@media screen and (max-width: 950px) { 
#faq .derouler {width:auto; background:transparent; padding:10px 20px; }
#faq {padding:50px 0;  }
#faq .titre {font-size:30px; }
}

@media screen and (max-width: 700px) { 
  #faq .derouler .top { font-size:16px; line-height:150%;}
  }


/* footer ------------------------------------------------ */
#footer {color:white;}
#footer img {width:100%; }
#footer .bloc { width:100%; text-align:center; padding:20px 0; background:var(--navy); font-size:14px; }
#footer .bloc a { padding: 0 20px; font-size:14px; }
#footer .bloc #copyright { display:inline-block; padding: 0 20px;  }

@media screen and (max-width: 1000px) {
  #footer .bloc a { padding:10px 20px; text-align:left; display:block;  }
  #footer .bloc #copyright { padding: 10px 20px; text-align:left; display:block;  }
}





/* texte ----------------------------------------------- */
#texte {width:900px; margin:100px auto; text-align:left; font-size:16px; }
#texte .grandtitre {font-size:45px;  width:750px; text-align:left; padding:0; margin:0 0 40px 0; line-height:115%; font-weight:700; /*text-shadow: 0 0 10px rgba(0,0,0,0.5);*/ }
#texte .titre {font-size:30px; font-weight:700; text-align:left; padding:0; margin:50px 0 20px 0;  }
#texte .texte {padding:0; margin:30px 0; line-height:140%; }
#texte a {border-bottom:solid 2px white;}
#texte a:hover {border-bottom:solid 2px transparent; cursor:pointer;}
#texte ul { line-height:140%; }
#texte li {margin:10px 0;}


@media screen and (max-width: 950px) { 
  #texte {width:90%; }
  #texte .grandtitre {width:90%; font-size:35px; }
  }


  /* google map ----------------------------------------------- */
  #googlemap {width:100%; margin:10px 0; border-radius: 5px; }