* {
    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: #ffffff;
    text-shadow:
        0 max(calc(0.147 * 1vh), calc(0.117 * 1vw)) max(calc(0.294 * 1vh), calc(0.234 * 1vw)) rgba(0, 0, 0, 0.5);
}

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));
bottom: 0;
z-index:10;
width: clamp(0cm, calc(90 * 1vh), calc(100 * 1vw));
display: flex;
flex-direction: column;
overflow: hidden;
}


.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.55);
    font-style: italic;
}



.boutons-container {
display: flex;
    justify-content: center; /* Centre horizontalement */
    gap:min(4vh,4%); /* Espacement entre les boutons */
    padding:min(4vh,4%); /* Marge interne pour aération */
}

.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));
    box-shadow: 0 4px 15px rgba(255, 100, 0, 0.4);
}

.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 */

       background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
    border: 1px solid rgba(255, 140, 0, 0.3);
    border-radius: 16px;
    color: white;
   }

#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;
}

/* [MODIF 2026-09 AUDIT CLICS] Suppression d'un bloc CSS orphelin ici
   (propriétés "background:#f8f8f8; padding...; }" sans sélecteur).
   Le "}" orphelin faisait échouer le parsing de la règle suivante (.marg). */


.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;
}

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

.grostitreticket{
 display: inline-block;
height: auto;
z-index:100;
background-color:#0a3d2e;
text-align: center;
background-position: clamp(0cm, 0.9vh, 1vw) 35%;
background-size:clamp(0cm, calc(7.5 * 1vh), calc(25 * 1vw));

}

.grostitreticket h2{
font-size: max(calc(2.205 * 1vh), calc(1.755 * 1vw));
width:clamp(0cm, calc(90 * 1vh), calc(100 * 1vw));
 margin-bottom:clamp(0cm, calc(1.35 * 1vh), calc(1.5 * 1vw));
 width:auto;
}

.grostitreticket p{
margin-top:clamp(0cm, calc(1.35 * 1vh), calc(1.5 * 1vw));
 font-size: max(calc(1.715 * 1vh), calc(1.365 * 1vw));
 justify-content: center;
align-items: center;
margin-bottom:clamp(0cm, calc(2.7 * 1vh), calc(3 * 1vw));
}


.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;
}




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.96 * 1vh), calc(1.56 * 1vw));
margin:clamp(0cm, calc(0.48 * 1vh), calc(1.6 * 1vw));
margin-left:clamp(0cm, calc(1.8 * 1vh), calc(2 * 1vw));
  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(4.5 * 1vh), calc(15 * 1vw));
z-index:100;
border-top: solid orange clamp(0cm, calc(0.06 * 1vh), calc(0.2 * 1vw)); 
background-image: linear-gradient(rgb(33, 58, 50), rgb(50, 84, 73));
}

#finblock p{
text-align:center;
width:100%;
}

#fin{
display: flex;
justify-content: center;
align-items: center;
width: clamp(0cm, calc(90 * 1vh), calc(100 * 1vw));
height:clamp(0cm, calc(4.5 * 1vh), calc(15 * 1vw));
z-index:99;
background-image: linear-gradient(rgb(33, 58, 50), rgb(50, 84, 73));
}

.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(1.372 * 1vh), calc(1.092 * 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)); 
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)); 
    /* [MODIF 2026-09 AUDIT CLICS] AVANT : height:100vh avec top:GetH(22)
       → la page dépassait l'écran de 22 unités : le bas (panneau attente,
       boutons de paiement) passait sous la barre "Confirmer" et n'était
       plus atteignable. APRÈS : ancrée en haut ET en bas, hauteur auto. */
    height: auto;
    bottom: 0;
    overflow-y: auto;
    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));
  background-color: rgba(53, 76, 93, 0.3);
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  margin-bottom: 0;
}
.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);
    margin-bottom:clamp(0cm, calc(0.21 * 1vh), calc(0.7 * 1vw));
    z-index:100;
    position:relative;
}
.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;
     z-index:99;
}

.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 h4,
#block-confirmation h5 {
    color: rgba(255, 255, 255, 0.9);
    line-height:max(calc(1.617 * 1vh), calc(1.287 * 1vw));
}


#block-confirmation h5 {
    color: rgba(255, 255, 255, 0.55); 
    font-size: max(1.4vh, 1.4vw);
}

#block-confirmation .inputadress {
    margin: 1.5vw auto;
    display: block;
    width: min(60%, 45vh);
}

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

.section{
  padding:clamp(0cm, calc(0.9 * 1vh), calc(3 * 1vw));
   border-bottom: solid #0a3d2e clamp(0cm, calc(0.06 * 1vh), calc(0.2 * 1vw)); 
  }
  
.section p{
 font-size:max(calc(1.47 * 1vh), calc(1.17 * 1vw));
 margin:0;
 padding:0;
 }

 
.section p:last-of-type {
   margin-bottom:0;
}
/* [MODIF 2026-09 AUDIT CLICS] Ancien bloc .panneau SUPPRIMÉ ici (doublon).
   Il était entièrement redéfini plus bas, mais ses "bottom:0" et
   "left:-180%" restaient actifs et entraient en conflit. Seul le bloc
   .panneau en fin de fichier fait foi. */

    #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%   { transform: translateY(-100%); opacity: 0; }
               8%   { transform: translateY(0);     opacity: 1; }
               88%  { transform: translateY(0);     opacity: 1; }
               100% { transform: translateY(-100%); opacity: 0; }
           }    
#bouton-reservation {
  display: flex;
  align-items: center;
  justify-content: center; 
  aspect-ratio: 7 / 2;
  height: clamp(6vh, 6vh, 20vw); 
}

#bouton-reservation .bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  text-decoration: none; 
}

#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;
}

.trajet-option:has(input:checked) {
    background: linear-gradient(135deg, #FF4500, #FFA500);
    border-color: #FF4500;
    transform: scale(1.05);
}
      .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(1vh,1vw);
   }
   .vip-section{
   margin:min(10vh,10vw);
   }

.qrcode{
  display:flex;justify-content: center;position: absolute;bottom:0.4vh;right:0.4vh;
  position:absolute;
   }



 #ticket{
overflow:hidden;scrollbar-width: auto;overflow-y: auto;
  -webkit-overflow-scrolling: touch;margin: 0 auto;  background:white;width: clamp(0cm, calc(86.4 * 1vh), calc(96 * 1vw));
  position : relative;}


  .spanA1{
    font-weight:bold;
   font-size:max(calc(1.96 * 1vh), calc(1.56 * 1vw));
   color:rgb(33, 58, 50);
  }


  .feedback-section {
    padding: 2vh;
    background: #f9fafb;
    border-radius: 2vh;
    margin-top: 3vh;
}

.feedback-section h3 {
    margin: 0 0 2vh 0;
    font-size: 1.2em;
    color: #0a3d2e;
}

.criterion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5vh;
}

.criterion span {
    font-size: 0.9em;
}

.stars span {
    font-size: max(calc(3.43 * 1vh), calc(2.73 * 1vw));
    cursor: pointer;
    color: #ccc;
    transition: 0.2s;
}

.stars span:hover {
    color: #0a3d2e;
}

.global-satisfaction,
.recommendation {
    margin-top: 3vh;
    text-align: center;
}

.buttons {
    display: flex;
    gap: 2vh;
    justify-content: center;
    margin-top: 1vh;
}

.buttons button {
    padding: 1vh 2vh;
    border-radius: 1.5vh;
    border: none;
    cursor: pointer;
    font-weight: 600;
}

.btn-yes {
    background: #0a3d2e;
    color: white;
}

.btn-no {
    background: #e9ecef;
}

.criterion .legend {
    font-size: 1.2vh;
    color: #555;
    display: flex;
    gap: 1vw;
    flex-wrap: wrap; /* pour les écrans plus petits */
    margin-top: 0.5vh;
}
.criterion .legend span {
    white-space: nowrap;
}

.global-satisfaction button {
    padding: 10px 20px;
    margin: 0 10px;
    border: none;
    border-radius: 6px;
    font-size: 1.5vh;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: grey; /* couleur par défaut */
    color: #fff;
}

.global-satisfaction button.active-oui {
    background-color: #0a3d2e; /* vert */
}

.global-satisfaction button.active-non {
    background-color: #FF4500; /* orange / rouge */
}

.recommendation button {
    padding: 10px 20px;
    margin: 0 10px;
    border: none;
    border-radius: 6px;
    font-size: 1.5vh;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: grey; /* couleur par défaut */
    color: #fff;
}

.recommendation button.active-oui {
    background-color: #0a3d2e; /* vert */
}

.recommendation button.active-non {
    background-color: #FF4500; /* orange / rouge */
}

button.active-oui { background-color: #0a3d2e; color:white; }
button.active-non { background-color: #e67e22; color:white; }
button { margin: 5px; padding: 6px 12px; border: none; border-radius: 4px; cursor:pointer; }

.legal, .legal h2, .legal h3, .legal h4 {
    font-weight: 200;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.5px; 
}

/* ═══════════════════════════════════════
   BOUTONS DE PAIEMENT — style app
═══════════════════════════════════════ */

.boutons-paiement {
   display: flex;
   flex-direction: column;
   gap: clamp(0cm, calc(0.6 * 1vh), calc(2 * 1vw));
   padding: clamp(0cm, calc(0.6 * 1vh), calc(2 * 1vw)) clamp(0cm, calc(4.5 * 1vh), calc(5 * 1vw));
}

.bloc-paiement {
   width: 100%;
}

.bloc-paiement .bouton {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: clamp(0cm, calc(0.75 * 1vh), calc(2.5 * 1vw)) clamp(0cm, calc(3.6 * 1vh), calc(4 * 1vw));
   border-radius: clamp(0cm, calc(0.9 * 1vh), calc(3 * 1vw));
   border: none;
   cursor: pointer;
   transition: transform 0.15s ease, box-shadow 0.15s ease;
   margin-left: 0;
   gap: clamp(0cm, calc(0.15 * 1vh), calc(0.5 * 1vw));
   height: auto;
}

.bloc-paiement .bouton:active { transform: scale(0.97); }

.btn-icon  { font-size: max(calc(2.45 * 1vh), calc(1.95 * 1vw)); line-height: 1; }
.btn-label { font-size: max(calc(2.205 * 1vh), calc(1.755 * 1vw)); font-weight: 700; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.btn-prix  { font-size: max(calc(3.43 * 1vh), calc(2.73 * 1vw)); font-weight: 900; color: white; text-shadow: 0 2px 6px rgba(0,0,0,0.4); line-height: 1; }
.btn-sub   { font-size: max(calc(1.372 * 1vh), calc(1.092 * 1vw)); color: rgba(255,255,255,0.8); font-weight: 400; }

.btn-especes {
   background: linear-gradient(135deg, #0a3d2e 0%, #1b6e50 100%) !important;
   box-shadow: 0 6px 20px rgba(10,61,46,0.5) !important;
}
.btn-especes:hover { box-shadow: 0 8px 24px rgba(10,61,46,0.7) !important; }

.btn-cb {
   background: linear-gradient(135deg, #1a1a2e 0%, #2d2d5e 100%) !important;
   box-shadow: 0 4px 14px rgba(0,0,0,0.4) !important;
   border: 1px solid rgba(255,255,255,0.12) !important;
}
.btn-cb:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.5) !important; }

.btn-disabled {
   background: rgba(0,0,0,0.35) !important;
   box-shadow: none !important;
   opacity: 0.7;
   cursor: not-allowed;
}

.btn-continuer {
   width: clamp(0cm, calc(76.5 * 1vh), calc(85 * 1vw));
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: clamp(0cm, calc(0.6 * 1vh), calc(2 * 1vw)) clamp(0cm, calc(3.6 * 1vh), calc(4 * 1vw));
   border-radius: clamp(0cm, calc(0.9 * 1vh), calc(3 * 1vw));
   border: none;
   cursor: pointer;
   margin: 0 auto;
   gap: clamp(0cm, calc(0.12 * 1vh), calc(0.4 * 1vw));
   background: linear-gradient(135deg, #FF4500 0%, #FFA500 100%) !important;
   box-shadow: 0 6px 20px rgba(255,69,0,0.4) !important;
   transition: transform 0.15s ease;
   height: auto;
}
.btn-continuer:active { transform: scale(0.97); }
.btn-continuer .btn-label { font-size: max(calc(2.205 * 1vh), calc(1.755 * 1vw)); font-weight: 700; color: white; }
.btn-continuer .btn-sub  { font-size: max(calc(1.372 * 1vh), calc(1.092 * 1vw)); color: rgba(255,255,255,0.8); }
.btn-continuer .btn-icon { font-size: max(calc(1.96 * 1vh), calc(1.56 * 1vw)); }

/* ═══════════════════════════════════════
   ÉTAPE IDENTITÉ — slide-down
═══════════════════════════════════════ */

.bloc-identite-hidden {
   max-height: 0;
   overflow: hidden;
   opacity: 0;
   transition: max-height 0.5s ease, opacity 0.4s ease;
}
.bloc-identite-visible {
   max-height: 120vh;
   opacity: 1;
}
.champs-identite {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: clamp(0cm, calc(0.3 * 1vh), calc(1 * 1vw));
   padding: clamp(0cm, calc(0.3 * 1vh), calc(1 * 1vw)) 0;
}
.champs-identite .inputadress {
   margin: 0;
   width: clamp(0cm, calc(76.5 * 1vh), calc(85 * 1vw));
}

#adresse-libre {
   margin: 0;
   width: clamp(0cm, calc(76.5 * 1vh), calc(85 * 1vw));
font-size: max(calc(1.63 * 1vh), calc(1.3 * 1vw));
}


#pagetrajet {
    flex: 0 0 auto;
}


#pub main.PUB {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* [MODIF 2026-09 REFONTE ACCUEIL] .panneau n'est PLUS UTILISÉ (panneau.php
   n'est plus inclus, remplacé par .badge-dispo). Conservé au cas où. */
.panneau{
    position: fixed;
    width: clamp(0cm, calc(90 * 1vh), calc(100 * 1vw));
     top: clamp(0cm, calc(6.6 * 1vh), calc(22 * 1vw));
    left: 0;
    height: clamp(0cm, calc(3.6 * 1vh), calc(12 * 1vw));
    background-color: rgba(10, 61, 46, 0.95);
    background-image:
        linear-gradient(135deg, rgba(10, 61, 46, 0.98), rgba(27, 110, 80, 0.95)),
        url(public/svg/jogger.png);
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, clamp(0cm, calc(-18 * 1vh), calc(-20 * 1vw)) center;
    background-size: 100% 100%, clamp(0cm, calc(12 * 1vh), calc(40 * 1vw));
    z-index: 98;
    animation-name: GoLiv;
    animation-duration: 15s;
    /* [MODIF 2026-09 AUDIT CLICS] Le panneau est purement informatif :
       pointer-events:none → les clics le TRAVERSENT et atteignent le
       formulaire dessous (titre, champ départ) pendant l'animation.
       fill-mode forwards → reste caché à la fin de l'animation. */
    pointer-events: none;
    animation-fill-mode: forwards;
    border-width: 0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    border-radius: 0 0 3vh 3vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4vw;
    transform: translateY(-100%);
}
.panneau p{
    font-size:  max(calc(1.96 * 1vh), calc(1.56 * 1vw));
    height: auto;
    color: white;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    margin: 0;
    line-height: 1.3;
}


/* ═══════════════════════════════════════════════════════════════════
   [MODIF 2026-09 STYLES CENTRALISÉS] PAGE DE CONFIRMATION (#pageprix)
   ───────────────────────────────────────────────────────────────────
   Styles auparavant écrits en "style=" dans vtc.php, déplacés ici à
   l'identique. Les sélecteurs commencent par #pageprix pour avoir une
   priorité supérieure aux règles générales (#course-block div, etc.),
   exactement comme le faisaient les styles inline.
   Vérifié : styles calculés identiques avant/après (test navigateur).
   ═══════════════════════════════════════════════════════════════════ */
#pageprix { padding-bottom: 140px; }
#pageprix #depart { text-align: center; }

/* Étape intermédiaire */
#pageprix #recap-etape { margin-top: 5px; opacity: 0.9; }
#pageprix .recap-arret { font-size: 0.8em; color: #FF8C00; }
#pageprix .rond.rond-etape { background-color: #FF8C00; width: 8px; height: 8px; margin-left: 6px; }
#pageprix .recap-via { font-size: 0.9em; font-style: italic; }
#pageprix .recap-via-label { color: #FF8C00; }

/* Ligne prix + bouton Modifier */
#pageprix #blockprixBIG {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: nowrap;
    margin: 0 auto;
    padding: 0 16px;
    max-width: 560px;
}
#pageprix #blockprix {
    position: relative;
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: transparent;
    box-shadow: none;
    border: none;
    border-radius: 0;
    aspect-ratio: auto;
    height: auto;
    padding: 32px 12px 16px 12px;
    min-width: 140px;
}
/* Badge jour/nuit : forme ici, couleurs inline (dynamiques PHP + JS) */
#pageprix #bandeau-nuit {
    display: inline-flex;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    gap: 5px;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.72em;
    font-weight: 800;
    letter-spacing: 0.5px;
    white-space: nowrap;
    z-index: 5;
}
#pageprix .badge-icone { font-size: 1.15em; line-height: 1; }
/* Prix : forme ici, couleur + ombre inline (dynamiques) */
#pageprix #prix {
    font-size: 2em;
    font-weight: 900;
    letter-spacing: 1px;
    margin: 0;
    line-height: 1;
    width: 100%;
    text-align: center;
}
#pageprix #bouton-reservation {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
#pageprix #bouton-reservation .btn-modifier {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    text-decoration: none;
    border-radius: 10px;
    font-size: 0.85em;
    line-height: 1.2;
}
#pageprix #bouton-reservation h4 { margin: 0; font-size: 1em; line-height: 1.2; text-align: center; }

/* Aller simple / Aller-retour */
#pageprix #type-trajet { margin: 20px auto; text-align: center; }

/* Panneau temps d'attente (AR) */
#pageprix #panneau-attente {
    margin: 10px auto;
    padding: 12px 14px;
    max-width: 500px;
    background: rgba(0,0,0,0.35);
    border: 2px solid rgba(255,140,0,0.5);
    border-radius: 12px;
}
#pageprix .attente-titre { text-align: center; color: white; font-size: 0.85em; margin: 0 0 4px 0; font-weight: 700; letter-spacing: 1px; }
#pageprix .attente-sous  { text-align: center; color: rgba(255,255,255,0.65); font-size: 0.72em; margin: 0 0 10px 0; line-height: 1.3; }
#pageprix .attente-colonnes { display: flex; flex-direction: row; gap: 10px; }
#pageprix .attente-col { flex: 1; display: flex; flex-direction: column; gap: 4px; }
#pageprix .attente-label {
    color: rgba(255,255,255,0.75);
    font-size: 0.7em;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    font-weight: 700;
    padding-left: 2px;
}
#pageprix .attente-champ {
    width: 100%;
    padding: 8px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.95);
    font-size: 0.95em;
    box-sizing: border-box;
}
#pageprix select.attente-champ { cursor: pointer; }
#pageprix .attente-handicap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 10px 0 0 0;
    padding: 8px 10px;
    background: rgba(0,120,255,0.10);
    border: 1px solid rgba(80,160,255,0.35);
    border-radius: 8px;
}
#pageprix #handicap { width: 1.1em; height: 1.1em; accent-color: #0078ff; cursor: pointer; }
#pageprix .handicap-label { color: white; font-size: 0.82em; cursor: pointer; user-select: none; }
#pageprix .handicap-offert { color: #7ED957; font-weight: 700; }
#pageprix .attente-mention {
    text-align: center;
    color: rgba(255,255,255,0.55);
    font-size: 0.72em;
    margin: 10px 0 0 0;
    line-height: 1.4;
    font-style: italic;
}
#pageprix .attente-mention strong { color: rgba(255,255,255,0.8); }
#pageprix #info-attente { text-align: center; color: rgba(255,255,255,0.85); font-size: 0.8em; margin: 10px 0 0 0; line-height: 1.3; }

/* Étape identité */
#pageprix .identite-titre { color: white; text-align: center; margin: 12px 0 6px 0; }
#pageprix #wrapper-vol { margin-bottom: 8px; position: relative; }
#pageprix .vol-aide { color: rgba(255,255,255,0.65); font-size: 0.75em; margin: 4px 4px 0 4px; line-height: 1.3; }
#pageprix .mention-cgv { text-align: center; padding: 0 16px; }

/* Barre fixe "Confirmer et réserver" (display piloté inline) */
#bloc-continuer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90; /* [MODIF 2026-09 AUDIT CLICS] 9999 → 90 : sous le menu hamburger */
    padding: 10px 10px 12px 10px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(20,30,25,0.99), rgba(20,30,25,0.92));
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
    text-align: center;
    width: clamp(0cm, calc(90 * 1vh), calc(100 * 1vw));
}

/* ─── Liste déroulante des vols (déplacé tel quel depuis vtc.php) ─── */
.vol-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}
.vol-select-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vol-select-arrow {
    flex-shrink: 0;
    margin-left: 8px;
    opacity: 0.7;
    transition: transform 0.2s ease;
}
.vol-select-trigger.ouvert .vol-select-arrow {
    transform: rotate(180deg);
}
.vol-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 50;
    max-height: 260px;
    overflow-y: auto;
    background: #1e1e1e;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.vol-dropdown-loading,
.vol-dropdown-vide {
    padding: 14px;
    color: rgba(255,255,255,0.6);
    font-size: 0.85em;
    text-align: center;
}
.vol-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-left: 4px solid transparent;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: background 0.15s ease;
}
.vol-option:last-child {
    border-bottom: none;
}
.vol-option:hover,
.vol-option:active {
    background: rgba(255,255,255,0.08);
}
.vol-option-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
    background: rgba(255,255,255,0.9);
    border-radius: 6px;
    padding: 2px;
}
.vol-option-logo-fallback {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    background: rgba(255,255,255,0.1);
    border-radius: 6px;
}
.vol-option-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.vol-option-numero {
    font-weight: 800;
    font-size: 0.92em;
}
.vol-option-provenance {
    font-size: 0.78em;
    color: rgba(255,255,255,0.65);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vol-option-heure {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.85em;
    color: rgba(255,255,255,0.85);
}


/* ═══════════════════════════════════════════════════════════════════
   [MODIF 2026-09 STYLES CENTRALISÉS] MENU HAMBURGER + IMPRESSION
   Déplacé tel quel depuis head.php.
   ═══════════════════════════════════════════════════════════════════ */

       @media print {
            svg#facture {
                width: 210mm !important;
                height: 297mm !important;
                max-width: none !important;
            }
            .no-print { display: none; }
        }
        @page { size: A4 portrait; margin: 0; }

/* ── BOUTON MENU ── */
#btn-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: max(6vh, 6vw);
    height: max(6vh, 6vw);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: max(3vh, 3vw);
    color: rgba(255,255,255,0.7);
    background: transparent;
    border: none;
    padding: 0;
    line-height: 1;
}
#btn-menu:hover { color: white; }

/* ── OVERLAY ── */
#menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 150;
}
#menu-overlay.open { display: block; }

/* ── PANNEAU ── */
#menu-panel {
    position: fixed;
    top: 0;
    left: -100%;
    width: min(75vw, 280px);
    height: 100%;
    background: linear-gradient(180deg, rgb(33,58,50), rgb(20,35,28));
    z-index: 160;
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
    padding: max(2vh,2vw);
    border-right: 1px solid rgba(255,140,0,0.3);
}
#menu-panel.open { left: 0; }

#menu-panel .menu-titre {
    font-size: max(1.6vh, 1.6vw);
    font-weight: 700;
    color: rgba(255,140,0,0.9);
    margin-bottom: max(2vh, 2vw);
    padding-bottom: max(1vh, 1vw);
    border-bottom: 1px solid rgba(255,140,0,0.2);
    letter-spacing: 1px;
    text-transform: uppercase;
}
#menu-panel a {
    display: flex;
    align-items: center;
    gap: max(1.2vh, 1.2vw);
    padding: max(1.5vh, 1.5vw) max(1vh, 1vw);
    color: rgba(255,255,255,0.85);
    font-size: max(1.6vh, 1.6vw);
    border-radius: max(0.8vh, 0.8vw);
    transition: background 0.2s;
    text-decoration: none;
}
#menu-panel a:hover { background: rgba(255,255,255,0.08); color: white; }
#menu-panel a .menu-icon { font-size: max(2vh, 2vw); width: max(2.5vh, 2.5vw); text-align: center; }
#menu-panel .menu-sep {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin: max(1vh,1vw) 0;
}

/* ═══════════════════════════════════════════════════════════════════
   [MODIF 2026-09 REFONTE ACCUEIL] CHARTE COMMUNE
   ───────────────────────────────────────────────────────────────────
   Une seule identité sur tout le site :
     - Fond        : vert cèdre (rgb(33,58,50) → rgb(50,84,73))
     - Actions     : dégradé orange #FF4500 → #FFA500
     - Étiquettes  : magenta Ploupy (#9e005d)
     - Arrondis    : 12 à 16 px · Police : police système (nette sur
       iPhone et Android). Avant, aucune police n'était définie → le
       navigateur affichait du Times (police "journal").
   ═══════════════════════════════════════════════════════════════════ */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
/* .bouton demandait la police "ploupy" sans police de secours : si elle
   n'est pas chargée, le navigateur retombait sur du Times. */
.bouton { font-family: "ploupy", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }

/* Header : ombre légère pour détacher le bandeau du contenu */
#titre { box-shadow: 0 2px 10px rgba(0,0,0,0.35); }

/* Seule la zone de l'icône téléphone est cliquable (voir head.php) */
#logoploupy { position: relative; }
#logoploupy .zone-tel {
    position: absolute;
    top: 0;
    right: 0;
    width: 22%;
    height: 100%;
    display: block;
}

/* ─── Centrage sur ordinateur / tablette paysage ───────────────────
   La colonne du site fait min(90vh, 100vw). Sur un écran plus large
   que haut, elle était collée à gauche : on la centre, avec un fond
   sombre sur les côtés. Sur téléphone (portrait) : AUCUN changement.
   Les éléments fixes sans "left" (header, #vtc, #pageprix) suivent
   automatiquement la colonne centrée. */
@media (min-aspect-ratio: 9/10) {
    html { width: auto; background: #0c1a15; }
    body { margin: 0 auto; background: #ffffff; min-height: 100vh; box-shadow: 0 0 40px rgba(0,0,0,0.5); }
}
#btn-menu { left: auto; }                     /* suit la colonne (identique sur mobile) */
#bloc-continuer { left: auto; right: auto; }  /* idem */

/* ═══════════════════════════════════════════════════════════════════
   [MODIF 2026-09 REFONTE ACCUEIL] CARTE DE RÉSERVATION (#pagetrajet)
   ═══════════════════════════════════════════════════════════════════ */
/* Fond sombre derrière la carte : évite un liseré blanc dans les coins arrondis */
#vtc { background: #13261f; }

#pagetrajet {
    position: relative;
    z-index: 2;
    padding: 14px 16px 16px 16px;
    border-top: none;
    border-bottom: 2px solid rgba(255,140,0,0.7);
    border-radius: 0 0 18px 18px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

/* En-tête : titre + badge à gauche, Jogger à droite */
#pagetrajet .resa-entete {
    position: relative;
    min-height: 58px;
    padding-right: 104px;
    margin-bottom: 14px;
    background-image: url(public/svg/jogger.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 96px auto;
}
#pagetrajet .resa-titre {
    font-size: clamp(20px, 2.8vh, 26px);
    font-weight: 800;
    color: #ffffff;
    text-align: left;
    margin: 0 0 8px 0;
    letter-spacing: 0.3px;
    line-height: 1.15;
    text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Badge de disponibilité (remplace le panneau animé) */
.badge-dispo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.2;
    color: #d9f7c9;
    background: rgba(126,217,87,0.14);
    border: 1px solid rgba(126,217,87,0.45);
}
.badge-dispo strong { color: #ffffff; font-weight: 800; }
.badge-point {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7ED957;
    animation: pulse-dispo 2s infinite;
}
.badge-express {                        /* mode express : violet, comme l'ancien panneau */
    color: #eadcff;
    background: rgba(140,60,255,0.18);
    border-color: rgba(180,120,255,0.6);
}
.badge-express .badge-point { background: #b98cff; animation-name: pulse-express; }
@keyframes pulse-dispo {
    0%   { box-shadow: 0 0 0 0 rgba(126,217,87,0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(126,217,87,0); }
    100% { box-shadow: 0 0 0 0 rgba(126,217,87,0); }
}
@keyframes pulse-express {
    0%   { box-shadow: 0 0 0 0 rgba(185,140,255,0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(185,140,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(185,140,255,0); }
}

/* Lignes du trajet : pastille + champ, reliées par un pointillé */
#pagetrajet .resa-trajet {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#pagetrajet .resa-trajet::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 24px;
    bottom: 24px;
    border-left: 2px dotted rgba(255,255,255,0.35);
}
#pagetrajet .resa-ligne {
    display: flex;
    align-items: center;
    gap: 12px;
}
#pagetrajet .resa-pastille {
    position: relative;
    z-index: 1;
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
#pagetrajet .pastille-depart  { background: #FF8C00; box-shadow: 0 0 0 3px rgba(255,140,0,0.25); }
#pagetrajet .pastille-etape   { background: #FFC107; box-shadow: 0 0 0 3px rgba(255,193,7,0.25); }
#pagetrajet .pastille-arrivee { background: #ffffff; border-radius: 3px; box-shadow: 0 0 0 3px rgba(255,255,255,0.2); }
#pagetrajet .pastille-horaire { background: transparent; border: 2px solid rgba(255,255,255,0.7); }

/* Champs : même hauteur, même arrondi, texte 16 px (évite le zoom auto iPhone) */
#pagetrajet .inputadress {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 48px;
    margin: 0;
    padding: 0 14px;
    font-size: 16px;
    font-family: inherit;
    color: #222222;
    background: #ffffff;
    border: 1.5px solid rgba(255,193,7,0.35);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
#pagetrajet .inputadress:focus {
    border-color: #FF8C00;
    box-shadow: 0 0 0 3px rgba(255,140,0,0.3);
}
#pagetrajet .inputadress::placeholder { font-style: normal; color: #8a8a8a; }
#pagetrajet select.inputadress {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 38px;
    cursor: pointer;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FF8C00' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
}

#pagetrajet .resa-lien-etape { padding: 8px 0 2px 24px; }
#pagetrajet .resa-lien-etape a { color: #FFA500; font-size: 14px; font-weight: 700; }
#pagetrajet .resa-ligne-horaire { margin-top: 8px; }

/* Bouton principal "Voir le prix" : pleine largeur */
#pagetrajet #bouton-tarif {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 100%;
    height: 52px;
    margin: 14px 0 0 0;
    padding: 0;
    border: none;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(255,69,0,0.4);
}
#pagetrajet #bouton-tarif p {
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
#pagetrajet #bouton-tarif:active { transform: scale(0.98); }

/* ═══════════════════════════════════════════════════════════════════
   [MODIF 2026-09 REFONTE ACCUEIL] BLOC RÉASSURANCE (#pub)
   Styles déplacés depuis infos-accueil.php et harmonisés.
   ═══════════════════════════════════════════════════════════════════ */
#pub { background: #13261f; }

/* En-tête allégé : une ligne discrète (le <h1> reste pour le SEO) */
.pub-header {
    padding: 12px 16px 10px 16px;
    text-align: center;
}
.pub-header h1 {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    text-shadow: none;
}
.pub-header .pub-sep { color: #FF8C00; }

/* Carrousel : carte arrondie qui remplit l'espace restant */
#carrousel-accueil {
    position: relative;
    width: auto;
    flex: 1 1 auto;
    min-height: 200px;
    overflow: hidden;
    background: #0d0d0f;
    margin: 0 12px 12px 12px;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.carrousel-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
    pointer-events: none;
    overflow: hidden;
}
.carrousel-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
/* Titre de slide : étiquette magenta posée sur l'image (au lieu d'une barre) */
.carrousel-titre {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    max-width: calc(100% - 24px);
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(158,0,93,0.92);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.carrousel-image {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.carrousel-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.45));
}
.carrousel-texte {
    position: relative;
    width: 100%;
    padding: 14px 16px 16px 16px;
    text-align: center;
    background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.6));
    max-height: 100%;
    overflow: auto;
}
.carrousel-texte h4 {
    font-size: clamp(14px, 2vh, 18px);
    line-height: 1.45;
    margin: 0;
    color: #ffffff;
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.carrousel-texte .slide-sous-texte {
    display: inline-block;
    font-size: 0.82em;
    opacity: 0.8;
    margin-top: 0.4em;
}
.carrousel-texte .lien-ploupy { color: #FFA500; }



.boutons-paiement,
.boutons-paiement .bouton {
    touch-action: manipulation;
}

.bascule-cb {
    margin: 2vh 0;
    padding: 12px 14px;
    border: 1px dashed #0a3d2e;
    border-radius: 10px;
    background: rgba(10, 61, 46, 0.06);
    text-align: center;
}
.bascule-cb p {
    margin: 0 0 10px 0;
}
.btn-bascule-cb {
    display: inline-block;
    padding: 12px 18px;
    border-radius: 10px;
    background: #0a3d2e;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
    touch-action: manipulation;
}

.btn-retour-recap {
    display: inline-block;
    margin: 0 0 1.5vh 0;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    color: inherit;
    font-size: 0.9em;
    cursor: pointer;
    touch-action: manipulation;
}


/* ═══════════════════════════════════════════════════════════════════
   [MODIF 2026-10-12 GARDE-FOU ESPECES] CONFIRMATION ESPÈCES (#confirm-espece)
   ───────────────────────────────────────────────────────────────────
   Remplace la boîte confirm() native. Bottom sheet aux couleurs du site
   (vert cèdre + liseré orange). z-index 300 : au-dessus du header (99),
   du menu (200) et de la barre "Confirmer" (90).
   La fenêtre est déplacée dans <body> par le JS de vtc.php.
   ═══════════════════════════════════════════════════════════════════ */
.ce-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: flex-end;            /* bottom sheet sur mobile */
    justify-content: center;
    background: rgba(0,0,0,0);
    visibility: hidden;
    pointer-events: none;
    transition: background 0.25s ease, visibility 0.25s;
}
.ce-overlay.ce-ouvert {
    background: rgba(0,0,0,0.6);
    visibility: visible;
    pointer-events: auto;
}
.ce-sheet {
    width: 100%;
    max-width: 480px;
    padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px)) 20px;
    background: linear-gradient(180deg, rgb(50,84,73), rgb(33,58,50));
    border-top: 3px solid #FF8C00;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
    color: #ffffff;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    transform: translateY(100%);
    transition: transform 0.28s ease;
    outline: none;
}
.ce-ouvert .ce-sheet { transform: translateY(0); }
.ce-poignee {
    width: 40px;
    height: 4px;
    margin: 0 auto 12px auto;
    border-radius: 2px;
    background: rgba(255,255,255,0.35);
}
.ce-icone { font-size: 40px; line-height: 1; margin-bottom: 6px; }
.ce-titre {
    margin: 0 0 4px 0;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    color: #ffffff;
    text-shadow: none;
}
.ce-montant {
    margin: 0 0 10px 0;
    font-size: 34px;
    font-weight: 900;
    line-height: 1.1;
    color: #FFA500;
}
.ce-texte {
    margin: 0 0 18px 0;
    font-size: 15px;
    line-height: 1.45;
    color: rgba(255,255,255,0.85);
}
.ce-texte strong { color: #ffffff; }
.ce-btn {
    display: block;
    width: 100%;
    margin: 0 0 10px 0;
    padding: 15px 16px;
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 0.12s ease;
}
.ce-btn:active { transform: scale(0.98); }
.ce-btn-oui {
    background: linear-gradient(135deg, #FF4500 0%, #FFA500 100%);
    box-shadow: 0 6px 18px rgba(255,69,0,0.35);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.ce-btn-carte {
    background: linear-gradient(135deg, #1a1a2e 0%, #2d2d5e 100%);
    border: 1px solid rgba(255,255,255,0.15);
}
.ce-lien {
    display: inline-block;
    margin: 2px 0 0 0;
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.7);
    font-family: inherit;
    font-size: 15px;
    text-decoration: underline;
    cursor: pointer;
    touch-action: manipulation;
}
/* Écran large : fenêtre centrée plutôt que collée en bas */
@media (min-aspect-ratio: 9/10) {
    .ce-overlay { align-items: center; }
    .ce-sheet { border-radius: 20px; border: none; border-top: 3px solid #FF8C00; transform: translateY(20px); opacity: 0; transition: transform 0.25s ease, opacity 0.25s ease; }
    .ce-ouvert .ce-sheet { transform: translateY(0); opacity: 1; }
}

/* Accessibilité : pas d'animation si l'utilisateur l'a désactivée */
@media (prefers-reduced-motion: reduce) {
    .carrousel-slide { transition: none; }
    .badge-point { animation: none; }
    .ce-overlay, .ce-sheet { transition: none; }
}