* {
    box-sizing: border-box; /* Applique à tous les éléments */
}

html, body {
margin: 0;
padding: 0;
width: clamp(0cm, calc(90 * 1vh), calc(100 * 1vw));
        }
a {
  color: white;      /* Définit la couleur du texte en blanc */
  text-decoration: none; /* Supprime le soulignement */
}
p{
margin:0;
padding:0;
}

h1 {
display: block;
font-size:max(calc(1.862 * 1vh), calc(1.482 * 1vw));
margin-left: clamp(0cm, calc(2.7 * 1vh), calc(3 * 1vw));
margin-right: clamp(0cm, calc(2.7 * 1vh), calc(3 * 1vw));
    font-weight: 800;
    color:rgba(255, 255, 255, 0.75);
    text-shadow: max(calc(0.245 * 1vh), calc(0.195 * 1vw)) max(calc(0.245 * 1vh), calc(0.195 * 1vw)) max(calc(0.245 * 1vh), calc(0.195 * 1vw)) rgba(0, 0, 0, 0.75);
}

h1 .prix{
color:white;
font-weight: 900;
}


#titre{
position: fixed;
background-color: rgba(53, 76, 93); /* Couleur de fond de base */
background-image: linear-gradient(
    rgb(33, 58, 50),  /* Vert cèdre foncé */
    rgb(50, 84, 73)   /* Vert cèdre clair */
);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0;
height: clamp(0cm, calc(6.6 * 1vh), calc(22 * 1vw));
    width: clamp(0cm, calc(90 * 1vh), calc(100 * 1vw));
    z-index:99;
}

#logoploupy{
    height: clamp(0cm, calc(6.6 * 1vh), calc(22 * 1vw));
     width: clamp(0cm, calc(90 * 1vh), calc(100 * 1vw));
    background-image: url(public/svg/drive33.svg);
    background-repeat: no-repeat;
    background-size: 150% 150%;
    background-position: 50% 110%;
    z-index:100;
}

#vtc{
position:fixed;
top:clamp(0cm, calc(6.6 * 1vh), calc(22 * 1vw));
z-index:10;
width: clamp(0cm, calc(90 * 1vh), calc(100 * 1vw));
 background-color:white;
}

.marge{
margin:clamp(0cm, calc(0.6 * 1vh), calc(2 * 1vw));
}

.inputadress{
    height:clamp(0cm, calc(4.5 * 1vh), calc(15 * 1vw));
    width:clamp(0cm, calc(81 * 1vh), calc(90 * 1vw));
    font-size:max(calc(1.96 * 1vh), calc(1.56 * 1vw));
    padding-left:clamp(0cm, calc(3.6 * 1vh), calc(4 * 1vw)); /* Augmenté */
    border: 2px solid rgba(255, 193, 7, 0.5); /* Bordure subtile */
    border-radius: clamp(0cm, calc(0.6 * 1vh), calc(2 * 1vw)); /* Coins arrondis */
    margin:clamp(0cm, calc(0.75 * 1vh), calc(2.5 * 1vw));
    margin-left:clamp(0cm, calc(4.5 * 1vh), calc(5 * 1vw));
    
    /* Gradient plus doux */
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(255, 249, 230, 0.95) 100%
    );
    
    color: #333; /* Texte plus foncé pour meilleure lisibilité */
    font-weight: 500;
    box-shadow: 0 clamp(0cm, calc(0.15 * 1vh), calc(0.5 * 1vw)) clamp(0cm, calc(0.45 * 1vh), calc(1.5 * 1vw)) rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.inputadress:focus {
    border: 2px solid #FF8C00;
    background: rgba(255,255,255,1);
    outline: none;
    transform: translateY(-2px); /* Léger soulèvement au focus */
    box-shadow: 0 clamp(0cm, calc(0.3 * 1vh), calc(1 * 1vw)) clamp(0cm, calc(0.6 * 1vh), calc(2 * 1vw)) rgba(255, 140, 0, 0.3);
}

.inputadress::placeholder {
    color: rgba(0, 0, 0, 0.4);
    font-weight: 400;
}



.boutons-container {
    display: flex;
    justify-content: center; /* Centre horizontalement */
    gap:  clamp(0cm, calc(5.4 * 1vh), calc(6 * 1vw)); /* Espacement entre les boutons */
    padding: 20px; /* Marge interne pour aération */
     width: clamp(0cm, calc(81 * 1vh), calc(90 * 1vw));
     margin-left:clamp(0cm, calc(1.8 * 1vh), calc(2 * 1vw));
}

.bouton {
   height:clamp(0cm, calc(6 * 1vh), calc(20 * 1vw));
font-family: "ploupy";
color: #fff;
text-shadow: 0.13rem 0.13rem 0.1rem rgba(0, 0, 0, 0.9); 
background: linear-gradient(135deg, #FF4500 0%, #FFA500 100%);
justify-content: center; 
  align-items: center;
box-shadow: clamp(1vh, 0.6vw, 5cm) clamp(1vh, 0.6vw, 5cm)clamp(1vh, 0.6vw, 5cm) rgba(0, 0, 0, 0.9);
padding: clamp(0cm, calc(0.06 * 1vh), calc(0.2 * 1vw));
    flex: 1;
    text-align: center;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
    margin-left:clamp(0cm, calc(5.4 * 1vh), calc(6 * 1vw));
}

.bouton p{
margin:0;
padding-top:clamp(0cm, calc(0.9 * 1vh), calc(3 * 1vw));
padding-bottom:clamp(0cm, calc(0.9 * 1vh), calc(3 * 1vw));
padding-left:clamp(0cm, calc(3.15 * 1vh), calc(3.5 * 1vw));
padding-right:clamp(0cm, calc(3.15 * 1vh), calc(3.5 * 1vw));
font-size: max(calc(2.303 * 1vh), calc(1.833 * 1vw));
}
.bouton p span{
margin:0;
padding:0;
font-size: max(calc(0.539 * 1vh), calc(0.429 * 1vw));
text-shadow: 0.15rem 0.15rem 0.15rem rgba(0, 0, 0, 1); 
}

#section-choix{
 display: flex;
justify-content: space-between;
width:clamp(1cm,75vh,100vw);
height:clamp(20vh, 13.34vw, 50%);
margin-top:clamp(2vh, 1.34vw, 50%);
margin-bottom:clamp(2vh, 1.34vw, 50%);
}

#section-choix .choix {
  display: block;
  width:clamp(2cm,75vh,60vw);
}

.content{
color: rgba(0,0,0,0.5);
height:clamp(20vh, 13.34vw, 50%);
margin-left:clamp(2vh, 4vw, 4vw);
margin-right:clamp(2vh, 4vw, 4vw);
}


#section-choix .choix input {
  display: none; /* Cache le bouton radio */
}

#section-choix .choix .content {
  transition: background-color 0.3s, border-color 0.3s;
   background-color: rgba(50,50,50,0.3);
}

/* Apparence au survol */
#section-choix .choix:hover .content {
  background-color: rgb(50,50,50);
   border-color: black;
}

/* Style sélectionné */
#section-choix .choix input:checked + .content {
background-color: rgba(92,69,52,1);
color: white;
text-shadow: clamp(0.2vh, 0.2vw, 20cm) clamp(0.2vh, 0.2vw, 20cm) clamp(0.4vh, 0.4vw, 20cm) rgba(0, 0, 0, 0.8); 
border: solid;
border-width:  clamp(0.5vh, 0.34vw, 1cm);
border-color: rgba(20,200,20,0.8);
  }

#content-voyage {
background-image: url(public/svg/passager.svg),url(public/svg/passager.svg),url(public/svg/passager.svg),url(public/svg/passager.svg),url(public/svg/passager.svg),url(public/svg/passager.svg),url(public/svg/novalise.svg),url(public/svg/nodog.svg);
background-repeat: no-repeat;
background-size:
25% 25%,
25% 25%,
25% 25%,
25% 25%,
25% 25%,
25% 25%,
40% 40%,
40% 40%
;
background-position: 
10% 30%, 
26% 30%,  
42% 30%,  
58% 30%, 
74% 30%, 
90% 30%, 
20% 80%,
80% 80%  ;
}

#content-van {
background-image: url(public/svg/passager.svg),url(public/svg/passager.svg),url(public/svg/passager.svg),url(public/svg/passager.svg),url(public/svg/bagage.svg),url(public/svg/bagage.svg),url(public/svg/bagage.svg),url(public/svg/bagage.svg),url(public/svg/nodog.svg);
background-repeat: no-repeat;
background-size:
25% 25%,
25% 25%,
25% 25%,
25% 25%,
15% 15%,
15% 15%,
15% 15%,
15% 15%,
40% 40%
;
background-position: 
10% 30%, 
30% 30%,  
50% 30%,  
70% 30%, 

18% 40%, 
38% 40%,  
58% 40%,  
78% 40%, 

80% 80%  ;
}

.content .titre{
font-size:max(calc(0.441 * 1vh), calc(0.351 * 1vw));
text-align: center;
}

#course-block{
   display: flex;
   flex-direction: column;
   padding: clamp(0cm, calc(0.3 * 1vh), calc(1 * 1vw));
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   margin-bottom: clamp(0cm, calc(0.3 * 1vh), calc(1 * 1vw));
   color: black; /* Texte blanc pour contraste */
}
#course-block div {
   margin: clamp(0cm, calc(0.3 * 1vh), calc(1 * 1vw));
   padding: clamp(0cm, calc(0.24 * 1vh), calc(0.8 * 1vw));
   display: flex;
   align-items: center;

}


#course-block .ch {
color:white;
   font-weight: 500;
   margin-top: clamp(0cm, calc(0.6 * 1vh), calc(2 * 1vw));
    margin-left: clamp(0cm, calc(1.8 * 1vh), calc(2 * 1vw));
   padding: clamp(0cm, calc(0.6 * 1vh), calc(2 * 1vw));
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
    font-size: max(calc(1.47 * 1vh), calc(1.17 * 1vw));

}

#course-block .rond {
   width: clamp(0cm, calc(9 * 1vh), calc(10 * 1vw));
   height: clamp(0cm, calc(0.24 * 1vh), calc(0.8 * 1vw));
   border-radius: clamp(0.1cm, 3vh, 4vw);
}
    .rouge{
    background:linear-gradient(135deg, #FF4500 0%, #FFA500 100%);
    color:white;
    }
    .vert{ background-color: black;
     color:yellow;
    }
#course-block .heure {
color:white;
  margin-right: clamp(0cm, calc(1.8 * 1vh), calc(2 * 1vw));
  margin-left: clamp(0cm, calc(3.6 * 1vh), calc(4 * 1vw));
}

#course-block .ch2 {
   width: clamp(0cm, calc(63 * 1vh), calc(70 * 1vw));
}


#course-block p {
   justify-content: space-between;
   align-items: center;
   text-align:center;
}

  background: #f8f8f8;
   padding: clamp(0cm, calc(0.06 * 1vh), calc(0.2 * 1vw));
   border-radius: 10px;
   margin-bottom: 15px;
   width: clamp(0.5cm, 67.5vh, 90vw);
   margin-left:clamp(0.5cm, 3.75vh, 5vw);
}


.marg{
margin: clamp(1vh, 0.67vw, 5cm);
text-align:center;
}


.grostitre{
 display: inline-block;
background-color:rgba(0,0,0,0.3);
width:clamp(0cm, calc(90 * 1vh), calc(100 * 1vw));
margin-top:clamp(0cm, calc(2.7 * 1vh), calc(3 * 1vw));
color:white;
 font-size: max(calc(0.882 * 1vh), calc(0.702 * 1vw));
background-image: url(public/svg/jogger.png);
background-repeat: no-repeat;
background-size:clamp(0cm, calc(7.5 * 1vh), calc(25 * 1vw));
background-position: clamp(0cm, 0.9vh, 1vw) bottom;
height: clamp(0cm, calc(4.5 * 1vh), calc(15 * 1vw));
z-index:100;
justify-content: center;
align-items: center;
display:flex;
}

.grostitre2{
height: clamp(0cm, calc(3 * 1vh), calc(10 * 1vw));
background-size:clamp(0.3cm, 13.5vh, 18vw);
background-position: clamp(0cm, 4.5vh, 5vw) bottom;
justify-content:center;
display:flex;
align-items: center;
}

.grostitre h2 span{
font-size:max(calc(0.588 * 1vh), calc(0.468 * 1vw));
color:pink;
}

.grostitre h2{
font-size: max(calc(2.205 * 1vh), calc(1.755 * 1vw));
width:clamp(0cm, calc(90 * 1vh), calc(100 * 1vw));
}

h3{
font-size:max(calc(1.715 * 1vh), calc(1.365 * 1vw));
margin:clamp(0cm, calc(0.9 * 1vh), calc(3 * 1vw));
margin-bottom:clamp(0cm, calc(0.3 * 1vh), calc(1 * 1vw));
margin-top:clamp(0cm, calc(1.8 * 1vh), calc(6 * 1vw));
text-align:left;
 font-weight: 400; /* Poids plus léger */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

h4{
font-size:max(calc(1.47 * 1vh), calc(1.17 * 1vw));
margin:clamp(0cm, calc(0.48 * 1vh), calc(1.6 * 1vw));
margin-left:clamp(0cm, calc(3.06 * 1vh), calc(3.4 * 1vw));
text-align:left;
  font-weight: 300; /* Poids plus léger */
}

h5{
font-size:max(calc(1.47 * 1vh), calc(1.17 * 1vw));
margin:clamp(0cm, calc(0.45 * 1vh), calc(1.5 * 1vw));
margin-left:clamp(0cm, calc(3.06 * 1vh), calc(3.4 * 1vw));
text-align:left;
  font-weight: 300; /* Poids plus léger */
}


.smalltitre{
background-color:grey;
height:clamp(6vh, 4vw, 50%);
color:white;
font-size:max(calc(0.588 * 1vh), calc(0.468 * 1vw));
}


#finblock{
position:fixed;
bottom:0;
width: clamp(0cm, calc(90 * 1vh), calc(100 * 1vw));
height:clamp(0cm, calc(7.2 * 1vh), calc(24 * 1vw));
background-color:rgba(0,0,0,0.95);
z-index:100;
}

#finblock p{
text-align:center;
width:100%;
height:clamp(0cm, calc(3 * 1vh), calc(10 * 1vw));
}

#fin{
display: flex;
justify-content: center;
align-items: center;
width: clamp(0cm, calc(90 * 1vh), calc(100 * 1vw));
height:clamp(0cm, calc(3.9 * 1vh), calc(13 * 1vw));
background-color:rgba(0,0,0,0.95);
z-index:99;
}

.buttons-container{
height:clamp(25vh, 16.67vw, 50%);
font-size:max(calc(0.588 * 1vh), calc(0.468 * 1vw));
width: clamp(1cm, 75vh, 100vw);
}

.pac-item {
    padding:clamp(0cm, calc(0.06 * 1vh), calc(0.2 * 1vw));
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: clamp(2.8vh, 2.8vw, 10cm);
    text-align: left;
    border-top: 1vh solid #e6e6e6;
    font-size: max(calc(0.98 * 1vh), calc(0.78 * 1vw));
    color: #515151;
}
    .pac-container {
    position: absolute !important;
    background-color: #fff;
    z-index: 1000;
    border-radius: clamp(0.5vh, 0.5vw, 3cm);
    border-top: 1px solid #d9d9d9;
    font-family: Arial, sans-serif;
    overflow: hidden;
     background-image: none !important;
     font-size:max(calc(0.588 * 1vh), calc(0.468 * 1vw));
     }

    .pac-container:after {
    background-image: none !important;
    height: 0px;
    padding: 0;
    margin: 0;
    }

    .buttons-container{

    }

    .b-heur{
    background-image: linear-gradient(rgb(33, 58, 50), /* Vert cèdre foncé */ rgb(50, 84, 73) /* Vert cèdre clair */);
    appearance: none; /* Supprime l'apparence native */
    -moz-appearance: none; /* Pour Firefox */
    -webkit-appearance: none; /* Pour Chrome/Safari */
    background-color: #4CAF50; /* Couleur de fond verte */
    color: white; /* Texte en blanc */
    padding: clamp(0cm, calc(0.72 * 1vh), calc(2.4 * 1vw));
    font-family: Arial, sans-serif; /* Police moderne */
    border: none; /* Supprime les bordures */
    border-radius: clamp(0.1cm, 10vh, 20vw);
    box-shadow: 0.5vh 0.5vh 0.5vh rgba(0, 0, 0, 0.4); /* Ombre légère */
    cursor: pointer; /* Curseur pointeur */
    transition: all 0.3s ease; /* Transition fluide */
    font-size: max(calc(0.5586 * 1vh), calc(0.4446 * 1vw));
    transform: translate(clamp(0.4cm, 7vh, 14vw), 0%);
    text-align:center;
    height:clamp(0cm, calc(4.2 * 1vh), calc(14 * 1vw));

    }
    .b-heur::after {
    content: "▼"; /* Ajouter une flèche vers le bas */
    position: absolute;
    right: 10px;
    pointer-events: none; 
}

.mention{
width: clamp(0cm, calc(18 * 1vh), calc(20 * 1vw));
}

.mentionp{
text-align: center;
font-size: max(calc(0.98 * 1vh), calc(0.78 * 1vw));
}

footer{
position:relative;
top:clamp(0cm, calc(39 * 1vh), calc(130 * 1vw));
z-index:0;
width: clamp(0cm, calc(90 * 1vh), calc(100 * 1vw));
}

#block-fin{
z-index:20;
height:clamp(0cm, calc(48 * 1vh), calc(160 * 1vw));
overflow-y: auto;
background-image: linear-gradient(rgb(33, 58, 50), /* Vert cèdre foncé */ rgb(50, 84, 73) /* Vert cèdre clair */);
color:white;
}

::-webkit-scrollbar {
    width: 0px; /* Cache la barre de défilement verticale */
    height: 0px; /* Cache la barre de défilement horizontale (si besoin) */
}
    * {
    scrollbar-width: none; /* Cache la barre de défilement */
}

#section-itineraire{
height:clamp(0cm, calc(10.8 * 1vh), calc(36 * 1vw));
}

#pagehoraire{
margin:clamp(0cm, calc(0.45 * 1vh), calc(1.5 * 1vw));
height:clamp(0cm, calc(9 * 1vh), calc(30 * 1vw));
  }


.pages{
width: clamp(0cm, calc(90 * 1vh), calc(100 * 1vw));
  z-index:1;
  background-color:rgba(53, 76, 93,0.5);
  background-image:linear-gradient(
    rgb(33, 58, 50),  /* Vert cèdre foncé */
    rgb(50, 84, 73)   /* Vert cèdre clair */
);
border-top: solid orange clamp(0cm, calc(0.06 * 1vh), calc(0.2 * 1vw)); 
border-bottom: solid orange clamp(0cm, calc(0.06 * 1vh), calc(0.2 * 1vw)); 
height: clamp(0cm, calc(25.5 * 1vh), calc(85 * 1vw));
overflow:hidden;
  }

#pageprix{
    width: clamp(0cm, calc(90 * 1vh), calc(100 * 1vw));
    z-index:1;
    background-color:rgba(53, 76, 93,0.5);
    background-image:linear-gradient(
        rgb(33, 58, 50),
        rgb(50, 84, 73)
    );
    border-top: solid orange clamp(0cm, calc(0.06 * 1vh), calc(0.2 * 1vw)); 
    border-bottom: solid orange clamp(0cm, calc(0.06 * 1vh), calc(0.2 * 1vw)); 
    height: 100vh; /* Hauteur de la fenêtre */
    overflow-y: auto; /* ← AJOUTER ICI */
    overflow-x: hidden;
    position:fixed;
    top:clamp(0cm, calc(6.6 * 1vh), calc(22 * 1vw));
    padding-bottom: clamp(0cm, calc(6 * 1vh), calc(20 * 1vw)); /* Espace pour le footer */
}




  #schedule-select{
   width: clamp(0cm, calc(43.2 * 1vh), calc(48 * 1vw));
  }

    #telephone{
   width: clamp(0cm, calc(43.2 * 1vh), calc(48 * 1vw));
  }

  .PUB-block {
  width: clamp(0cm, calc(90 * 1vh), calc(100 * 1vw));
  overflow-y: auto; 
  background-color: rgba(53, 76, 93, 0.3); /* Fond semi-transparent */
  height:clamp(0cm, calc(60 * 1vh), calc(200 * 1vw));
  margin-bottom:clamp(0cm, calc(15 * 1vh), calc(50 * 1vw));
}

.titre-scenario {
    background-color: rgba(158, 0, 93, 1);
    font-weight: bold;
    padding-top: clamp(0cm, calc(0.57 * 1vh), calc(1.9 * 1vw));
    padding-bottom: clamp(0cm, calc(0.57 * 1vh), calc(1.9 * 1vw));
      padding-left: clamp(0cm, calc(2.7 * 1vh), calc(9 * 1vw));
    color: white;
    text-shadow: calc(0.4vw* 1) calc(0.4vw* 1) calc(0.4vw* 1) black;
    text-align: left;
    letter-spacing: calc(0.5vw* 1);
    word-spacing: calc(0.8vw* 1);
    transform: rotate(-2deg) translate(clamp(0cm, -5vh, -5vw), clamp(0cm, 5vh, 5vw));
    margin-left: clamp(-10cm, -1.5vh, -1.5vw);
}
.blue{
background-color: rgba(0, 93, 158, 1);
}   
.scenario{
position:relative;
aspect-ratio:2/1;
    width:clamp(0cm, calc(90 * 1vh), calc(100 * 1vw));
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    background-color: orange;
}

.scenario::before {
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.35);
}

.scenario div{
position:absolute;
bottom:0;
    background-color: rgba(0, 0, 0, 0.7);
    width:clamp(0cm, calc(90 * 1vh), calc(100 * 1vw));
    aspect-ratio:6/1;
      display: flex;
    align-items: center;
    text-align: center;
}





h2{
font-size:max(calc(1.715 * 1vh), calc(1.365 * 1vw));
text-align:center;
}

 .titre-scenario h2{
  font-size:  max(calc(2.45 * 1vh), calc(1.95 * 1vw));
 }   

.scenario h4 {
    font-size: max(calc(2.45 * 1vh), calc(1.95 * 1vw));
    color:white;
    width:100%;
    height:100%;
    margin-left:clamp(0cm, calc(4.5 * 1vh), calc(5 * 1vw));
     margin-right:clamp(0cm, calc(4.5 * 1vh), calc(5 * 1vw));
     margin-top:clamp(0cm, calc(1.5 * 1vh), calc(5 * 1vw));
}

.tel{
background-image: url(public/svg/logo.telephone.svg);
    background-repeat: no-repeat;
    background-size: clamp(0cm, calc(6 * 1vh), calc(20 * 1vw));
    background-position: clamp(0cm, calc(76.5 * 1vh), calc(85 * 1vw)) clamp(0cm, calc(-4.5 * 1vh), calc(-15 * 1vw));
    height: 100%;
    width: 100%;
}

#block-confirmation{
    background-color: rgba(202, 179, 162, 0.6);
    width: clamp(0cm, calc(90 * 1vh), calc(100 * 1vw));
    padding: clamp(0cm, calc(0.6 * 1vh), calc(2 * 1vw));
    min-height: clamp(0cm, calc(15 * 1vh), calc(50 * 1vw)); /* ← Hauteur minimum au lieu de fixe */
    /* Retirer overflow-y: auto et height fixe */
}


.block-pub h2{
font-size:  max(calc(3.283 * 1vh), calc(2.613 * 1vw));
}

.panneau{
    position: fixed;
    width: clamp(0cm, calc(90 * 1vh), calc(100 * 1vw));
    bottom: clamp(0cm, calc(4.5 * 1vh), calc(15 * 1vw));
    left: -180%;
    height: 10vh;
    background-color: rgba(0, 93, 158, 0.9);
    background-image: url(public/svg/jogger.png);
    background-repeat: no-repeat;
    background-position: clamp(0cm, calc(-18 * 1vh), calc(-20 * 1vw)) , clamp(0cm, calc(-9 * 1vh), calc(-10 * 1vw));
    background-size: clamp(0cm, calc(15 * 1vh), calc(50 * 1vw));
    z-index: 95;
    animation-name: GoLiv;
    animation-duration: 30s;
    border-width: 0;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    border-radius: 2vh 2vh 0 0;
}
    .panneau p{
    font-size:  max(calc(2.45 * 1vh), calc(1.95 * 1vw));
    height: 100%;
    }

    #blockprix{
background-color: rgba(0, 0, 0, 0.3);
height:clamp(0cm, calc(6 * 1vh), calc(20 * 1vw));
display: flex; 
align-items: center; 
aspect-ratio:  2/1;
 border-radius: clamp(0cm, calc(1.2 * 1vh), calc(4 * 1vw));
 box-shadow: 1px 1px 7px rgba(255, 255, 255, 0.5);
}
     #blockprixBIG{
justify-content:center;
}

#prix{
color:white;
font-size:  max(calc(2.94 * 1vh), calc(2.34 * 1vw));
     width:  100%;
}

         @keyframes GoLiv{
               0%   { left:-90%;}
               10% { left:0;}
               90% { left:0;}
               100% { left:-90%;}
           }

#bouton-reservation {
  display: flex;
  align-items: center;
  justify-content: center; /* pour centrage horizontal */
  aspect-ratio: 7 / 2;
  height: clamp(6vh, 6vh, 20vw); /* équivalent simplifié */
}

#bouton-reservation .bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  text-decoration: none; /* utile pour <a> */
}

#bouton-reservation h4 {
  margin: 0; /* retire le margin par défaut */
  line-height: 1.2; /* meilleure lisibilité si multilignes */
  text-align: center;
}
#type-trajet {
   display:flex;
   justify-content:center;
   gap:20px;
   margin-top:15px;
}
.trajet-option {
   display:flex;
   align-items:center;
   gap:8px;
   background:rgba(255,255,255,0.2);
   border:1px solid #ccc;
   padding:8px 14px;
   border-radius:12px;
   cursor:pointer;
   transition: all 0.3s ease;
}
.trajet-option:hover {
   background:#FF4500;
   transform:scale(1.05);
}
.trajet-option input[type="radio"] {
   accent-color:#0078ff;
   width:2vh;
   height:2vh;
   cursor:pointer;
}
.trajet-option span {
   font-weight:bold;
   font-size:0.95em;
   color:white;
}
      .vip{
   padding-top: clamp(0cm, calc(6.6 * 1vh), calc(22 * 1vw));
   padding-bottom: clamp(0cm, calc(4.5 * 1vh), calc(15 * 1vw));
   }
   .vip div{
   margin: min(3vh,3vw);
   }
   .vip-section{
   margin:min(10vh,10vw);
   }
 #ticket{
   style="overflow:hidden;scrollbar-width: auto;overflow-y: auto;
  -webkit-overflow-scrolling: touch;margin: 0 auto;  background:white;border: 0.2vh dashed #0a3d2e;width: clamp(0cm, calc(81 * 1vh), calc(90 * 1vw));"}