/********************************************/

/*
 * body classes allow for page-specific overrides:
 *  - preintro
 *  - intro
 *  - name
 *  - question
 *  - results
 *  - feedback
 */

/********************************************/
/* base */

html,
body {
   margin: 0;
   padding: 0;
}

b, strong {
   font-weight: bold;
}

i, em {
   font-style: italic;
}

u {
   text-decoration: underline;
}

/* include border and padding in element width and height */
* {
   box-sizing: border-box;
}

body {
   background: #ffffff;
   color: black;
   font-family: Verdana, sans-serif;
   font-size: 15px;
}

a {
   text-decoration: underline;
   color: blue;
}

a:hover {
   text-decoration: underline;
   color: darkcyan;
}

h1, h2 {
   font-size: 1.4rem;
}

pre {
   font-family: "Courier New", monospace;
   white-space: pre;
}

/********************************************/
/* trucs communs aux écrans */

.content {
   width: 75vw;
   max-width: 850px;
   min-width: 200px;
   margin: 0 auto;
   position: relative;
   padding: 0 15px;
}

#header {
   color: black;
   height: 116px;
   padding: 20px 0;
   background: url("img/header.png") no-repeat bottom;
   background-size: cover;

   position: relative;  /* for anims */
   z-index: 1;          /* for anims */
}

#header .content {
   display: flex;
   width: 100%;
   height: 100%;
}

#header #logo {
   max-height: 65px;
   flex: 0 1 auto;
   align-self: center;
}

#header #subtitle {
   text-align: right;
   flex: 3 1 auto;
   align-self:flex-end;
}

#page {
   width: 100%;
   height: 100%;
   min-height: 300px;
   padding: 20px 0;

   margin-bottom: 68px;    /* for fixed footer */
}

#page #title {
   text-align: center;
   font-size: 30px;
   margin: 30px 0 10px 0;
}
#page #title:after {
   content: "";
   display: block;
   margin: 20px auto;
   max-width: 100px;
   height: 5px;
   background: url("img/degrade.png") no-repeat center;
   background-size: cover;
}

#page .text {
   column-count: 3;
   text-align: justify;
   margin-bottom: 15px;
}
@media (max-width: 1000px) {
   #page .text {
      column-count: 1;
   }
}

#footer {
   color: black;
   position: fixed;        /* for fixed footer */
   bottom: 0;              /* for fixed footer */
   width: 100%;            /* for fixed footer */
   height: 68px;
   background: url("img/footer.png") no-repeat center;
   background-size: cover;
}

#footer .content {
   display: flex;
   align-items: center;
   width: 100%;
   height: 100%;
}

#footer #buttons2 {
   text-align: right;
   flex: 3 1 auto;
   /*align-self: center;*/
}

#footer .btn {
   margin: 0 10px 0 0;
}
#footer .btn a {
   color: #009abd;
   text-decoration: none;
}
#footer #buttons1 .btn a:hover {
   box-shadow: 3px 3px 5px lightseagreen;
}
#footer #buttons1 .btn a {
   padding: 10px;
   border-radius: 18px;
   background-color: white;
}
#footer #buttons2 .btn {
   margin: 0 0 0 10px;
}
#footer .btn img {
   max-height: 35px;
}
#footer .btn img:hover {
   box-shadow: 3px 3px 5px lightseagreen;
   border-radius: 50%;
}

/********************************************/
/* preintro */

body.preintro {
}


/********************************************/
/* intro */

body.intro {
}

body.intro #preview {
   position: relative;
}

body.intro #preview #banner {
   width: 100%;
   max-height: 300px;
   object-fit: cover;
}

body.intro #preview #next {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}
body.intro #preview #next img {
   max-width: 60px;
}
body.intro #preview #next img:hover {
   box-shadow: 3px 3px 5px lightseagreen;
   border-radius: 50%;
}


/********************************************/
/* aide */

body.help {
}

body.help #page .text {
   column-count: inherit;
}

body.help #footer #buttons2 {
   display: none;
}

body.help-popup {
}

body.help-popup #header,
body.help-popup #footer {
   display: none;
}

@media (max-width: 1000px) {
   body.help-popup .content {
      width: initial;
      min-width: initial;
      max-width: initial;
   }
}


/********************************************/
/* name */

body.name {
}


/********************************************/
/* question */

body.question {
   width: 100%;
   height: 100%;
   padding: 0;
   margin: 0;
   overflow: hidden;
   background: #000; /* volontairement background sans -color, pour tout écraser */
   color: #fff;
}

body.question #backgroundLayer {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: url("img/fond.gif") no-repeat center;
   background-size: cover;
}

body.question #pano {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
}

body.question #titleBar {
   position: absolute;
   top: 10px;
   left: 0;
   right: 0;
   height: 35px;

   display: flex;
   justify-content: center;
   align-items: center;
}

body.question #titleBar .sceneName,
body.question #navBar .sceneName {
   font-size: 13px;
   color: #00a093;
   background: white;
   border-radius: 0 10px 10px 0;

   position: relative;
   left: -5px;
   padding: 5px 10px 5px 7px;

   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
body.question #titleBar .sceneLogo {
   width: 35px;
   height: 35px;
   background: white url("img/logo-small.png") no-repeat center;
   background-size: 40%;
   border-radius: 50%;
}

body.question #navBar {
   position: absolute;
   top: 10px;
   right: 10px;
   /*height: 40px;*/

   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
   gap: 10px;
}
body.question #navBar .sceneLogo {
   width: 35px;
   height: 35px;
   background: white url("img/link-right.png") no-repeat center;
   /*background-size: 40%;*/
   background-size: 110%;
   border-radius: 50%;
   cursor: pointer;
   position: relative;
   opacity: 0.6;
}
body.question #navBar .sceneName {
   position: absolute;
   top: 30px;
   right: 10px;
   left: unset;
   border-radius: 10px;
   font-size: 11px;
   display: none;
}
body.question #navBar .sceneLogo:hover {
   opacity: 1.0;
}
body.question #navBar .sceneLogo:hover .sceneName {
   display: block;
}
body.question #navBar {
   display: none;
}

body.question #subtitlesBar {
   position: absolute;
   bottom: 110px;
   left: 0;
   right: 0;
   display: flex;
   justify-content: center;
   align-items: center;
}

body.question #subtitlesBar .subtitles {
   text-align: center;
   color: white;
   padding: 10px;
   background-color: rgba(30,30,30,0.5);
   border: solid 1px white;
   border-radius: 15px;
   white-space: nowrap;
   overflow: hidden;
   max-width: 50%;
   min-width: 350px !important;
}

body.question #subtitlesBar .subtitles p.psubs {
   display: inline-block;
   padding-left: 100%;
   /* fait en JS: animation: marquee 15s linear infinite; */
}
@keyframes marquee {
   0%   { transform: translate(0, 0); }
   100% { transform: translate(-100%, 0); }
}

body.question #statusBar {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   margin: 0 30px 15px 30px;
}

body.question #statusBar .status {
   position: absolute;
   white-space: nowrap;
   padding-top: 21px;

   left: 0;
   top: -25px;

   width: 54px;
   height: 60px;
   font-size: 13px;
   overflow: hidden;
   text-align: center;

   color: black;
   background-image: url("img/statuspin.png");
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;

   transition: left 2s, top 2s;
}

body.question #statusBar .boussole {
   position: absolute;
   right: 4px;
   top: 4px;

   width: 37px;
   height: 37px;
   background-image: url("img/boussole.png");
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
}

body.question #statusBar .bar {
   height: 45px;

   background-color: lightskyblue;
   background-image: url("img/fond-normale.png");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;

   border-radius: 0 50px 50px 0;
   clip-path: polygon(0% 95%,100% 0,100% 100%,0 100%);
}

body.question #startvideoBtn,
body.question #resultBtn {
   position: fixed;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);

   font-size: larger;
   cursor: pointer;
   padding: 10px 15px;
   background-color: grey;
   border-radius: 10px;
   box-shadow: 0 0 15px black;
   border: solid 2px white;
}

body.question #startvideoBtn,
body.question #resultBtn,
body.question #pauseBtn,
body.question #qualityBtn,
body.question #fullscreenBtn,
body.question #homeBtn {
   display: none;
}

body.question #toolBar {
   position: absolute;
   top: 10px;
   left: 10px;

   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
   gap: 10px;
}

body.question #toolBar .toolBtn {
   width: 35px;
   height: 35px;
   background-color: white;
   border-radius: 50%;
   cursor: pointer;
   position: relative;
}
body.question #toolBar .toolBtn img {
   width: 35px;
}
body.question #toolBar #qualityBtn {
   background-color: red;
   box-shadow: 0px 0px 5px red;
}
body.question #toolBar #qualityBtn.light {
   background-color: blue;
   box-shadow: 0px 0px 5px blue;
}

/***********************************/
/* hotspots */
body.question .hotspot {
}

body.question .hotspot-inactive {
   opacity: 30%;
}

/***********************************/

#link-hotspot-prototype {
   display: none;
}

body.question .link-hotspot {
}

body.question .link-hotspot-icon {
   width: 100px;
   cursor: zoom-in; /* crosshair */
}

body.question .link-hotspot-icon-path {
   display: none;
}
body.question .link-hotspot-path .link-hotspot-icon-right {
   display: none;
}
body.question .link-hotspot-path .link-hotspot-icon-path {
   display: block;
}

body.question .link-number {
   color: #00968c;
   position: absolute;
   left: 54px;
   top: 41px;
   font-size: 18px;
   cursor: zoom-in; /* crosshair */
}

body.question .link-title {
   display: none;
   margin-left: -50%;
   margin-right: -50%;
   text-align: center;
   line-height: initial;
   text-shadow: black 2px 2px 2px;

   word-wrap: anywhere;    /* ? */
   word-break: break-word; /* ? */
}
body.question .link-hotspot:hover .link-title {
   display: block;
}

/***********************************/

#info-hotspot-prototype {
   display: none;
}

body.question .info-hotspot {
}

body.question .info-hotspot-icon {
   width: 100px;
   cursor: help;
}

body.question .info-wrapper {
   display: none;
   position: relative;

   margin-left: 85px;
   margin-top: -10px;

   width: 550px;
   min-height: 350px;

   max-width: 95vw;

   border-radius: 15px;
   color: black;
   box-shadow: -10px 10px 8px black;

   background-color: white;
}

body.question .info-header {
}

body.question .info-header .title {
   text-align: center;
   display: block;
   width: 100%;
   font-size: 25px;
   color: #3ab5e6;
   padding: 10px 30px 0px 20px;
}

body.question .info-header .close, body.question .info-header .max {
   position: absolute;
   right: 10px;
   top: 8px;
   cursor: pointer;
   font-weight: bold;
   padding: 5px; /* easier for touch */
}
body.question .info-header .max {
   right: 32px;
}

body.question .info-body {
   padding: 10px 20px 20px 20px;
}

body.question .info-body .info-content {
   height: 290px;
   max-height: 300px;
   overflow: auto;
}

body.question .info-body .info-content img.fullsize {
   width: 100%;
   height: auto;
   max-height: 99%;
}
body.question .info-body .info-content iframe {
   width: 100%;
   height: 99%;
}

body.question .info-hotspot .info-title {
   display: none;
   margin-left: -50%;
   margin-right: -50%;
   text-align: center;
   line-height: initial;
   text-shadow: black 2px 2px 2px;
}
body.question .info-hotspot:hover .info-title {
   display: block;
}
body.question .info-hotspot .info-title.disabled {
   display: none !important;
}

/* variantes grand popup */
body.question .info-wrapper.big {
   width: 90vw;
   min-height: 85vh;
}
body.question .info-wrapper.big .info-body .info-content {
   height: 77vh;
   max-height: 77vh;
   overflow: hidden;
}
body.question .info-wrapper.big .info-body .info-content img.diapo {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

/***********************************/

#question-hotspot-prototype {
   display: none;
}

body.question .question-hotspot {
}
body.question .question-hotspot.question-skipable {
}

body.question .question-hotspot-icon {
   width: 100px;
   cursor: help;
}
body.question .hotspot-inactive .question-hotspot-icon {
   cursor: not-allowed;
}
body.question .question-hotspot-icon-bonus {
   display: none;
}
body.question .question-hotspot.question-skipable .question-hotspot-icon-normal {
   display: none;
}
body.question .question-hotspot.question-skipable .question-hotspot-icon-bonus {
   display: block;
}

body.question .question-wrapper {
   display: none;
   position: relative;

   margin-left: 85px;
   margin-top: -10px;

   /*min-width: 400px;*/
   width: 550px;
   min-height: 200px;

   max-width: 95vw;

   border-radius: 25px;
   color: black;
   box-shadow: -10px 10px 8px black;

   background-color: white;
   background-image: url("img/fond-normale.png");
   background-repeat: no-repeat;
   background-size: contain;
   background-position: bottom center;
}
body.question .question-skipable .question-wrapper {
   background-image: url("img/fond-bonus.png");
}

body.question .question-header {
   background-color: transparent;
   color: white;
   font-size: larger;

   /*position: absolute;
   right: -20px;
   top: -16px;*/
   float: right;
   margin-right: -20px; /* déplace le header à droite en haut de son contenant */
   margin-top: -16px;
   margin-left: -11px;  /* permet aux objets voisins de "rentrer" dans le côté gauche du header */
   margin-bottom: 10px;
   width: 131px;
   height: 128px;

   background-image: url("img/badge-normale.png");
   background-repeat: no-repeat;
   background-size: contain;
}
body.question .question-skipable .question-header {
   background-image: url("img/badge-bonus.png");
   margin-top: -20px;
   margin-left: 0px;
}

body.question .question-header .title {
   padding-top: 35px;
   padding-left: 20px;
   font-size: 40px;
   text-align: center;
   display: block;
   width: 100%;
}
body.question .question-skipable .question-header .title {
   display: none;
}

body.question .question-header .close {
   position: absolute;
   right: 10px;
   cursor: pointer;
   font-weight: bold;

   display: none;
}

body.question .question-body {
   padding: 25px 20px 75px 20px;
}

body.question .question-body .close {
   position: absolute;
   bottom: 18px;
   right: 18px;
   cursor: pointer;
   font-weight: bold;
   color: white;
   padding: 5px 0 0 10px; /* easier for touch */
}

body.question .question-question {
   font-size: 25px;
   color: #3ab5e6;
   margin-bottom: 20px;
}
body.question .question-skipable .question-question {
   color: #fe3a83;
}

body.question .question-answer {
   cursor: pointer;
}
body.question .question-answer:hover {
   /*box-shadow: 0 0 5px #00968c;*/
   text-decoration: underline;
}
body.question .question-answer-a1 {
}
body.question .question-answer-a1::after {
   content: "";
   width: 50px;
   border-bottom: solid 4px #3ab5e6;
   display: block;
   margin: 15px 0;
}
body.question .question-skipable .question-answer-a1::after {
   border-color: #fe3a83;
}

body.question .error-360 {
   border: solid 2px red;
   background-color: white;
   color: black;
   padding: 10px 15px;
   min-width: 200px;
}


/********************************************/
/* result */

body.result {
}

body.result #page {

}

body.result #backgroundLayer,
body.result #pano {
   margin-top: 116px;      /* to let header show */
}

body.result #toolBar {
   top: 125px;
}

body.result .cadran-hotspot .title {
   display: none;
}

body.result .cadran-hotspot-icon-actif,
body.result .cadran-hotspot-icon-normal {
   display: none;
}

body.result .cadran-hotspot.cadran-1              .cadran-hotspot-nw-icon-normal,
body.result .cadran-hotspot.cadran-1.cadran-actif .cadran-hotspot-nw-icon-actif,
body.result .cadran-hotspot.cadran-2              .cadran-hotspot-ne-icon-normal,
body.result .cadran-hotspot.cadran-2.cadran-actif .cadran-hotspot-ne-icon-actif,
body.result .cadran-hotspot.cadran-3              .cadran-hotspot-se-icon-normal,
body.result .cadran-hotspot.cadran-3.cadran-actif .cadran-hotspot-se-icon-actif,
body.result .cadran-hotspot.cadran-4              .cadran-hotspot-sw-icon-normal,
body.result .cadran-hotspot.cadran-4.cadran-actif .cadran-hotspot-sw-icon-actif {
   display: block;
}
body.result .cadran-hotspot.cadran-1.cadran-actif .cadran-hotspot-nw-icon-normal,
body.result .cadran-hotspot.cadran-2.cadran-actif .cadran-hotspot-ne-icon-normal,
body.result .cadran-hotspot.cadran-3.cadran-actif .cadran-hotspot-se-icon-normal,
body.result .cadran-hotspot.cadran-4.cadran-actif .cadran-hotspot-sw-icon-normal {
   display: none;
}

body.result .cadran-hotspot.cadran-1 .cadran-header {
   background-image: url("img/badge-cadran-nw.png");
}
body.result .cadran-hotspot.cadran-1.cadran-actif .cadran-header {
   background-image: url("img/badge-cadran-nw-actif.png");
}

body.result .cadran-hotspot.cadran-2 .cadran-header {
   background-image: url("img/badge-cadran-ne.png");
}
body.result .cadran-hotspot.cadran-2.cadran-actif .cadran-header {
   background-image: url("img/badge-cadran-ne-actif.png");
}

body.result .cadran-hotspot.cadran-3 .cadran-header {
   background-image: url("img/badge-cadran-se.png");
}
body.result .cadran-hotspot.cadran-3.cadran-actif .cadran-header {
   background-image: url("img/badge-cadran-se-actif.png");
}

body.result .cadran-hotspot.cadran-4 .cadran-header {
   background-image: url("img/badge-cadran-sw.png");
}
body.result .cadran-hotspot.cadran-4.cadran-actif .cadran-header {
   background-image: url("img/badge-cadran-sw-actif.png");
}

body.result .question-answer {
   cursor: default;
}
body.result .question-answer:hover {
   text-decoration: none;
}


/********************************************/
/* feedback */

body.feedback {
}


/********************************************/
/* DEBUG */

#debug-data {
   position: absolute;
   bottom: 0;
   left: 0;

   background-color: grey;
   padding: 1em;
}


/********************************************/
/* responsive */

@media (max-width: 1000px) and (orientation: portrait) {
   body.question #navBar,
   body.question #toolBar {
      flex-direction: column;
   }
}