/* ===== Fonts URW DIN ===== */
@font-face {
  font-family: "URWDIN";
  src: local("URW DIN Light"), url("fonts/URWDIN-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "URWDIN";
  src: local("URW DIN Bold"), url("fonts/URWDIN-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Condensed */
@font-face {
  font-family: "URWDIN Condensed";
  src: url("fonts/URWDINCond-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-stretch: condensed;
  font-display: swap;
}
@font-face {
  font-family: "URWDIN Condensed";
  src: url("fonts/URWDINCond-XLight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-stretch: condensed;
  font-display: swap;
}
@font-face {
  font-family: "URWDIN Condensed";
  src: url("fonts/URWDINCond-XLightItalic.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
  font-stretch: condensed;
  font-display: swap;
}
@font-face {
  font-family: "URWDIN Condensed";
  src: url("fonts/URWDINCond-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-stretch: condensed;
  font-display: swap;
}
@font-face {
  font-family: "URWDIN Condensed";
  src: url("fonts/URWDINCond-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-stretch: condensed;
  font-display: swap;
}
@font-face {
  font-family: "URWDIN Condensed";
  src: url("fonts/URWDINCond-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-stretch: condensed;
  font-display: swap;
}
@font-face {
  font-family: "URWDIN Condensed";
  src: url("fonts/URWDINCond-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-stretch: condensed;
  font-display: swap;
}
.bold {
  font-weight: 700;
}

.thin {
  font-weight: 100;
}

.small{
  font-size:2vw;
}

html, body {
  text-transform: uppercase;

  margin: 0;
  padding: 0;
  height: 100%;
  background: #000; /* bandes noires autour */
  display: flex;
  justify-content: center;
  align-items: center;
}

main {
  font-family: "URWDIN", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 2360 / 1640;    /* garde le ratio */
  max-width: 100vw;        /* ne dépasse jamais l’écran */
  max-height: 100vh;
  background: url("img/bg.png") no-repeat center center;
  background-size: contain; /* image entière visible */
  overflow: hidden;        /* évite débordements */
}

.hidden {
  display: none !important;
}

.leftTitle {
  position: absolute;
  top: 37%;
  left: 4%;
  width: 25%;
  font-family: "URWDIN Condensed", "URWDIN", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-stretch: condensed;
  font-weight: 100;
  color: #fff;
  font-size: 4.5vw;
}

.frameRight {
  position: absolute;
  top: 35%;
  left: 37%;
  width: 60%;
  font-family: "URWDIN Condensed", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #751751;
  font-size: 1.9vw;
  gap:2rem;

}
.field{
  display: flex;
  align-items: center;      /* aligne verticalement label + champ */
  gap: 1rem;                /* espace entre label et champ */
  margin:0 0 4rem 0;
}

.field::before{
  content: "";
  width: .4em;
  height: .4em;
  min-width: .4em;         /* évite le shrink à 0 */
  min-height: .4em;
  flex: 0 0 .4em;          /* base = .6em, pas de croissance ni rétrécissement */
  background: #f0ae00;
  border-radius: 50%;
  margin-right: .01em;
}

.field label{
  flex: 0 0 35%;                  /*le label prend la place restante à gauche */
  font-weight: 700;
}

.frameRight input,
.frameRight select{
  flex: 0 0 60%;
  box-sizing: border-box;
  padding: .3em .5em;
  line-height: 1.2;
  font-size: 1.5vw;
  font-family: "URWDIN", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  border:2px solid #f0ae00;
  /* plus de float ni de height en % */
}

/* (optionnel) uniformiser le rendu du select sur iPad/Safari */
.frameRight select{
  -webkit-appearance: none;
  appearance: none;
}

.nextButton {
  position:absolute;
  right:4%;
  top:78%;
  padding : 0.8rem 1.2rem 0.8rem 1.2rem;
  background-color:#f0ae00 ;
  color:#FFF;
  font-size:2.3vw;
  font-weight: 700;
  font-family: "URWDIN Condensed", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

}

.validButton {
  position:absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 10%;   /* obligatoire : fixer une largeur */
  top:73%;
  padding : 0.8rem 1.2rem 0.8rem 1.2rem;
  background-color:#751751 ;
  color:#FFF;
  font-size:2.3vw;
  font-weight: 700;
  font-family: "URWDIN Condensed", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-align: center;   
  
}


.titreQuestion {
  position: absolute;
  font-family: "URWDIN Condensed", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:white;
  font-size: 2.7vw;
  left : 2%;
  top:12%;
  font-weight: 700;

}

.pageManche {
  position: absolute;
  width: 100%;
  height: 100%;
}

.questionType1 {
  position: absolute;
  color:#f0ae00;
  font-family: "URWDIN Condensed", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  left : 3%;
  font-size:2.9vw;
  font-weight: 700;
  top:27%;
  transform: rotate(-6deg);
}

.questionType2 {
  font-style: italic;
  font-weight: 500;
}

.questionNumber {
  position: absolute;
  color:#FFF;
  font-family: "URWDIN Condensed", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  left : 25%;
  font-size:2.9vw;
  font-weight: 700;
  top:25%;
  transform: rotate(-6deg);

}
.questionNumberDiese {
  font-weight: 200;
}

.interrogation {
  top:35%;
  left:44%;
  position: absolute;
  width: 12%;
  height:36%;
  background: url("img/interrogation.png") no-repeat center center;
  background-size: contain; /* image entière visible */
}

.answerButton {
  position:absolute;
  display: flex;               /* aligne image + texte sur une ligne */
  align-items: center;         /* centre verticalement */
  gap: 0.5em;                    /* espace entre l’icône et le texte */  
  padding : 0.8rem 1.2rem 0.8rem 1.2rem;
  color:#FFF;
  font-size:2.3vw;
  font-weight: 700;
  font-family: "URWDIN Condensed", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  z-index: 10;

}


.goodAnswerButton {
  left:20%;
  top:70%;
  background-color:#40A535 ;
}

.badAnswerButton {
  right:20%;
  top:70%;
  background-color:#D2232B ;
}

.answerButton img.icon {
  width: 2.5vw;                /* taille proportionnelle au texte */
  height: auto;
}

.responseButton {
  position: absolute;
  display: flex;
  justify-content: center;   /* centre le texte horizontalement */
  align-items: center;
  padding: 0.8rem 1.2rem;
  color: #FFF;
  font-size: 2.2vw;
  font-weight: 700;
  font-family: "URWDIN Condensed", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  width: 25%;
  height: 15%;
  text-align: center;
  box-shadow: -15px 15px 0 rgba(0,0,0,0.1);
  overflow: visible;
  cursor: pointer;
  text-transform:none;
}

.emptyResponseButton {
  color:#751751;
  border : 2px solid #751751;
}

.selectedResponseButton {
  color:#FFF;
  background-color:#751751;
}

.unselectedResponseButton {
  color:#ddd;
  background-color:transparent;
}

.goodResponseButton {
  background-color:#40A535 ;
}

.badResponseButton {
  background-color:#D2232B ;
}

.unselectedGoodResponseButton {
  background-color:#50ac4613 ;
}
.unselectedGoodResponseButton img {
  opacity: 0.3;
}

.unselectedBadResponseButton {
  background-color:#d2232c13 ;
}
.unselectedBadResponseButton img {
  opacity: 0.3;
}

.responseButton1 {
  left:15%;
  top:40%;
}

.responseButton2 {
  right:15%;
  top:40%;
}

.responseButton3 {
  left:15%;
  top:60%;
}

.responseButton4 {
  right:15%;
  top:60%;
}

.responseButtonA {
  left:15%;
  top:50%;
}


.responseButton .badResponseButton {
  display: flex;
}

.responseButton .icon {
  position: absolute;
  bottom: -10%;   /* décale sous la div */
  right: -13%;     /* décale à gauche de la div */
  width: 20%;    /* ajuste selon ton image */
  height: auto;
}

.chrono-module {
  position: absolute;
  width:4vw; 
  aspect-ratio:1/1; 
  color:#fff;
  right : 8%;
  top:12%;
  font-family: "URWDIN Condensed", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:white;
  font-size: 2.7vw;
  font-weight: 100;
  font-variant-numeric: tabular-nums; 
  pointer-events: none;
}

.chrono-svg { 
  width:100%; 
  height:auto; 
  color:#fff; 

}


.chrono-display-container {
       position:absolute; 
       left:100%;
       top:10%;
       display:flex; 
       align-items:center; 
       justify-content:center;
     
       font-variant-numeric:tabular-nums; 
       pointer-events:none;
}

.definition {
  position : absolute;
  left : 3%;
  font-weight: 100;
  bottom:11%;
  font-size: 1.3vw;
  font-family: "URWDIN Condensed", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-transform:none;
}

/* === Lock interactions after validation === */
main.locked * { pointer-events: none !important; }
main.locked .nextButton { pointer-events: auto !important; cursor: pointer; }
main.locked .nextButton.hidden { pointer-events: none !important; }