.background-heure {
    position: relative;
}
#background-heure {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: -10px;
    writing-mode: vertical-rl;
    line-height: 1;
    font-size: 86px;
    opacity: 40%;
}

body {
  background: #ddd;
  font-size: 14px;
  padding: 0px;
  margin: 0;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",
    "DejaVu Sans", Verdana, "sans-serif";
}

.hidden {
    display: none;
}

#pageCarte {
  max-width: 600px;
  background: white;
  border: 1px solid #ccc;
  margin-left: auto;
  margin-right: auto;
}

.logo-up1 img {
    max-height: 108px;
    vertical-align: bottom;
}
.logo-up1 {
  margin: 0;
}

#mymain {
  min-height: 100px;
  display: flex;
  flex-direction: row;
  background: #00386E;
  color: white;
  padding: 2px 12px 0px 17px;
}

#mymain .gauche {
    width:55%;
}
#mymain .droite {
  width: 45%;
}

#mymain a {
  text-decoration: none;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
}
#no-userphoto {
    height: 100%;
  background: #dbdbdb;
  margin: 0.5rem;
  padding: 0.5rem;
  color: #000;
  
  flex-direction: column;
  justify-content: center;
}

#mymain img {
  width: 90%;
}

h3 {
  color: #ED9B27;
  font-size: 1.4em;
  margin: 0px 0px 2px;
  font-family: Arial, "sans-serif";
  font-weight: 700;
}

.content {
  background: #eeeff0;
  color: #00386E;
  font-family: Arial, "sans-serif";
  padding: 12px 5px 11px 17px;
  font-size: 1.1em;
}

#diplome {
  font-size: 0.95em;
  padding: 0px;
  margin-bottom: 0px;
  font-variant-caps: all-small-caps;
  color: #BD6B00;
}

ul.pic {
  background: #FDAB37;
  color: white;
  font-size: 1.02em;
  margin: 0px;
  padding-left: 0;
  text-align: right;
}

ul.pic li {
  display: inline-block;
  min-width: 3%;
  text-align: center;
  padding: 3px 10px 1px;
}

ul.pic li.espace {
    display: none;
}

ul.pic li.timed {
  background: #BD6B00;
  border-left: 3px solid #ED9B27;
  border-right: 1px solid #ED9B27;
}

ul.pic #date {
  background: #DD8B07;
  opacity: 0.85;
}

@media screen and (min-width: 400px) {
    ul.pic {
        border-left: 18px solid #FFC04D;
    }
    ul.pic li.espace {
        display: inline;
    }
    ul.pic li.timed {
        padding-right: 23px;
    }
}


ul.pic li.chiffre {
  background: #ED9B27;
  opacity: 0.77;
  padding: 3px 10px 1px;
}
ul.pic li.chiffre a {
  text-decoration: none;
  color: white;
}

.footer {
  padding: 0 0 4%;
  text-align: center;
  vertical-align: middle;
  color: #bbb;
}

.footer .barcode {
  padding-top: 6px; /* pour eviter qu'il se pose sur la barre de timing */
  border-bottom: 1px #bbb dotted;
  min-height: 48px;
}

.footer .qrcode-europeen {
  width: 32%;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  min-height: 88px;
  transform: scale(55%) translate(38%);
}

.footer .qrcode-europeen img {
  width: 70%;
}

.logo-una-europa {
  width: 32%;
  display: inline-block;
  text-align: right;
  padding-bottom: 5px;
  vertical-align: middle;
}

.logo-una-europa img {
  border-left: 2px solid #555;
  padding-left: 30px;
  width: 55%;
}

.logo-carte-europeenne {
  width: 44px;
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}
.logo-carte-europeenne img {
    width: 100%;
}

#supannNomDeNaissance {
  text-transform: uppercase;
}

/* landscape / paysage */
@media screen and (min-aspect-ratio: 13/9) {
  #pageCarte {
    max-width: 500px;
    font-size: 13px;
  }

  #mymain div {
    padding-left: 28px;
  }

  #mymain img#userphoto {
    width: 60%;
    margin-left: 20px;
  }

  #mymain h2 {
    margin-bottom: 7px;
  }

  #mymain h2 > img {
    width: 83%;
  }

  /* image titre  */

  .content {
    padding-left: 48px;
  }

  #diplome {
    margin-top: 7px;
  }
}

@media screen and (min-width: 460px) {
  .logo-una-europa img {
    width: 50%;
  }
}

#userphoto__diffusion_non_autorisee {
  position: absolute;
  color: red;
  top: 7px;
  font-size: 9px;
  width: 98px;
}

#interdit_de_campus {
  position: absolute;
  inset: 0; /* occupe 100% du div */
  width: 100%;
  height: 70%;
  pointer-events: none; /* ne gêne pas les clics */
}