/*optimisé pour ipad air 12.5.7 avec 760x1040 (Safari "Sur l'écran d'accueil")*/ 

:root {
  --accent: #0055a5; /* à remplacer par la charte ICI */
  --bg: #f8f8f8;
  --text: #111727;
}
@font-face {
    font-family: 'BrownFtv-Bold';
    src: local('BrownFtv'), local('BrownFtv'),
        url('/font/BrownFtv-Bold.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html, body {
  margin: 0;
  padding: 0;
 /* background: var(--bg); */
  background-image: url("img/commun/fond_flou1.png");
  color: var(--text);
  font-family: 'BrownFtv-Bold',  sans-serif;
  height: 100%; 
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;  
  user-select: none;
  touch-action: manipulation;
  font-size: 2vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* très important sur iOS */
  padding-bottom: env(safe-area-inset-bottom);
}

#app {
  display: flex;
  flex-direction: column;
/*  height: 100vh; */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/*Logo ici accueil*/
#logo_ici{
  position: absolute;
  top: 85vh;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
} 

.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hidden {
  display: none; 
}

h1, h2 {
  text-align: center;
  margin-bottom: 20px;
}

h3 {
  position: absolute;   /* le bouton se place par rapport au body (ou au parent positionné) */
  top: 94vh;            /* distance depuis le haut de l’écran */
  color: black;
  font-size: 1.3vh;
  margin: 1.6vh;
}

/* Texte Bienvenue*/ 
#welcome{
  position: center;
  top: 0px;
  font-size: 4vh;
  color: white;
}

/* Chaussez votre casque */
#home_text{
  position: center;
  top: 1vh;
  font-size: 2.4vh;
  margin-bottom: 10vh;
}


.podcast-choice {
  display: flex;
  flex-direction: column;
/*  gap: 4vh; */
}

/* Boutons retour Accueil*/
button {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 16px 24px;
  font-size: 20px;
  cursor: pointer;
  font-family: 'BrownFtv-Bold',  sans-serif;
}

/* Bouton accueil choix haut */
#btn_podcastchoice_top{
  background: #001ED2;
  border-radius: 50px;
  padding: 1.6vh 7.8vh;
  font-size: 3.3vh;
  cursor: pointer;
  margin-top: 10%;
}

/*  Bouton accueil choix autre  */
#btn_podcastchoice{
  background: #001ED2;
  border-radius: 50px;
  padding: 1.6vh 7.8vh;
  font-size: 3.3vh;
  cursor: pointer;
  margin-top: 4%;
}

/*  Titre podcast choix */
#podcastTitle{
  color: black;
  top: 10vh;
  font-size: 3vh;
  margin-top: 11vh;
  margin-left: 2vh;
  margin-right: 2vh;
  text-align: left;
}

/* Header choix podcast  */
.podcast-header {
  position: relative;
  display: flex;
  align-items: flex-start;  /* aligne le haut de l’image et du texte */
  gap: 2vh;                 /* espace entre image et texte */
  max-width: 90%;
  margin: 2vh auto;
  margin-top: 0vh;
}

/* Image choix podcast  */
.podcast-img {
  width: 16vh;         
  max-width: 50vh;   /* limite max */
  border-radius: 0.5vh;
  margin: 0vh;
  box-shadow: 3px 4px 12px rgba(0, 0, 0, 0.15);
  text-align: left;
  left: 0%;
}

/*  Description choix podcast */
.podcast-desc {
  font-size: 1.7vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #555; /* gris foncé */
  text-align: left;
  max-width: 80%;
  margin-left: 1.6vh;
  margin-right: 1.1vh;
  margin-top: 1.5vh;
}

/* Bouton écouter bande démo */
#playpausedemo {
  position: absolute;   
  bottom: -4.3vh;   /* placé par rapport au bas de l’image */
  left: 1vh;     /* placé par rapport à la gauche de l’image */
  width: 14vh;
  height: 3vh;
  font-size: 1vh;
  color: white; 
  background: #001ED2; 
  border: none;
  border-radius: 50px;
  cursor: pointer;
  display: flex;           
  justify-content: center; 
  align-items: center;     
  text-align: center;
  display: -webkit-flex;   /* Safari iOS */
  -webkit-align-items: center;
  -webkit-justify-content: center;
}


/* Bouton de retour choix épisodes  */
.backBtn {
  position: absolute;
  border-radius: 50px;
  top: 5vh;
  left: 2vh;
  font-size: 1.5vh;
  padding: 1vh 2vh;
  
}

/* Choix épisodes */
#episodes {
  display: flex;
  flex-direction: column;
  margin-top: 5vh;
  margin-left: 3vh;
}

/* Choix épisodes margin */
#episodes .episodeBtn {
  margin-bottom: 1vh; /* espace entre les boutons */
}

#episodes .episodeBtn:last-child {
  margin-bottom: 0; /* pas d’espace après le dernier */
}

/* Boîtes choix épisodes  */
.episodeBtn {
  background: transparent;
  color: var(--text);
  font-size: 1.8vh;
  text-align: left;
  padding: 1vh;
  border-radius: 10px;
  margin-right: 3vh;
}





/* Boîte épisode  */
.episode-box {
  background: linear-gradient(180deg, #548CF5, #8FB4FB); /* dégradé bleu */
  background: -webkit-linear-gradient(top, #548CF5, #8FB4FB);
  border-radius: 6vh;     
  padding: 2vh 2vh;
  margin: 10vh auto;
  width: 60vh;
  max-width: 60vh;
  height: 80vh;
  color: white;
  text-align: center;
  box-shadow: 0px 8px 20px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vh;
}
.episode-box img {
  width: 30vh;
  max-width: 50vh;
  border-radius: 1vh;
  box-shadow: 0px 4px 12px rgba(0,0,0,0.3);
}
.episode-img-wrapper{
    margin-top: 2vh; /* ne touche pas aux boutons */
}
/* Titre page podcast */
#episodeTitle {
  top: 47vh;
  font-size: 1.8vh;       /* taille du texte */
  max-width: 60vh;
  color: var(--text);
  font-weight: bold;      /* en gras */
  text-align: center;     /* centré */
  margin: 2vh auto;       /* marge haut/bas */
}
.episode-box p {
  font-size: 1.6vh;
  line-height: 1.2;
  margin: 9vh 0;
  color: #000000;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: left;
  max-width: 56vh;
}
.episode-box audio {
  width: 100%;
  margin-top: 2vh;
}

/* Boutons play/pause/skip */
.player-controls {
  display: flex;              /* garde le flex */
  flex-direction: row;        /* les boutons sont alignés horizontalement */
  justify-content: center;    /* centrer les boutons */
  align-items: center;        /* aligner verticalement */
  gap: 40px;                  /* espace entre les boutons */
  margin-top: 6vh; 
}

/*  Boutons avancer reculer  */
#skipBack, #skipFwd {
 /* ajouter le style des boutons précis sur chaque bouton*/
  background: var(--accent);
}
#skipBack:active, #skipFwd:active {
background: #0064F5;
}
/* Image SVG à l'intérieur */
#skipBack img, #skipFwd img {
  width: 40px;       /* largeur de l'image */
  height: 40px;      /* hauteur de l'image */
  filter: invert(100%);
}

/* Barre de progression audio */
.progress-container {
  position: relative;
  top: -3vh;
  width: 80%;
  height: 8px;
  background: #ccc;
  border-radius: 4px;
  margin: 15px auto;
  cursor: pointer;
  overflow: hidden;
}

.progress {
  background: var(--accent);
  height: 100%;
  width: 0%;
  border-radius: 4px;
  transition: width 0.3s linear;
}




/* Masquer le style des boutons mais garder l'interaction */
.player-controls button {
  background: none !important;   /* supprime la couleur de fond */
  border: none !important;       /* supprime la bordure */
  padding: 0;         /* supprime le padding */
  width: auto;        /* laisse l'image définir la taille */
  height: auto;
  cursor: pointer;    /* garde le pointeur sur hover */
  font-size: 4vh;         /* ← augmente la taille */
  color: white;           /* couleur du symbole */
  cursor: pointer;
  line-height: 1;         /* évite les décalages verticaux */
  
}

/* Boutons SVG (avance / recule) */
.player-controls button img {
  width: 20px;   /* réduit par rapport aux 28px précédents */
  height: 20px;
  filter: invert(100%); /* rend le SVG blanc */
  box-shadow: none !important;   /* supprime toute ombre héritée */
  background: none !important;   /* assure qu’il n’y a pas de fond */
  border: none !important;       /* supprime la bordure éventuelle */
}

/* Play/Pause central */
/*.player-controls button.playPause {
  width: 50px;
  height: 50px;
  font-size: 18px;
  color: white;   
  background: #003b5c;
  
}*/

/* temps passé sur le fichier audio */
#timeDisplay {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin: -3vh;      /* Espace par rapport au dessus */
}

#currentTime, #duration {
  font-size: 1vh;
  color: #ffffff;
}
/* Orientation : uniquement portrait */
@media screen and (orientation:landscape) {
  body::before {
    content: "Veuillez utiliser la tablette en mode portrait";
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    font-size: 6vh;
    font-weight: bold;
    color: var(--accent);
    z-index: 9999;
    text-align: center;
    padding: 20px;
  }
}




/*
.episode-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2vh auto;
  text-align: center;
  max-width: 80%;
}

.episode-img {
  width: 0%;
  max-width: 250px;
  border-radius: 12px;
  margin-bottom: 2vh;
  box-shadow: 0px 4px 12px rgba(0,0,0,0.15);
}

.episode-desc {
  font-size: 1.6vh;
  color: #333;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
*/