@charset "UTF-8";
/* CSS Document */

@font-face {
  font-family : montserrat;
  src: url(typo/Montserrat-Light.otf);
}
@font-face { 
    font-family : "montserrat-medium";
    src: url(typo/Montserrat-regular.otf);
}

body {
    min-width: 375px;
    font-family: montserrat;
    font-size:16px;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none
}

#topbar {
  position: fixed;
  font-size: 1.25em;
  top : 0;
  left: 0;
height: 2.5em;
  background-color: #364575;
  width: 100%;
  z-index: 1000;
}

#topbar>ul {
  display: flex;
  justify-content: space-between;
  width: 26.7em;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  text-decoration: none;
}

#topbar li {
  padding: 0 0.8em;
  line-height: 2.5em;
  color: white;
  border-left: solid thin #ccc;
  font-family: montserrat;
  cursor: pointer;
    text-decoration: none;
}

#topbar>ul>a:last-child>li {
    border-right: solid thin #ccc;
}

#topbar li:hover {
  background-color: #e94c2c;
}

.liens {
    text-decoration: none;
	color: white;
}

#logoAD {
    display: block;
    width: 2.5em;
    height: 2.5em;
    background-color: #fff; /* couleur visible à travers le masque */
    -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Vectoriel' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1035.83 917.64'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M718.79,621.82h-158.06L311.78,124.97,90.73,565.82H444.68v56H0L311.8,0l283.51,565.82h123.45c.57,0,59.89-.55,117.44-30.87,74.19-39.09,111.81-108.86,111.81-207.39s-38.52-168.02-114.49-206.89c-59.07-30.22-119.95-30.58-120.56-30.58h-107.21v237.87h-56V34.09h163.06c5.85,0,128.69,.62,213.68,85.22,51.43,51.2,77.51,121.26,77.51,208.25s-26.14,158.73-77.69,210.19c-83.08,82.95-201.54,84.07-207.53,84.07Z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    margin-right: 0.3em;
    margin-top: 0.3em;
}



/* Bloc vidéo */
.blocvideoAB {
  margin: 3em auto 1em auto;
  max-width: 110em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
  padding: 0 1em;
}

#colone1,
#colone2,
#colone3,
#colone4 {
  margin: 0 0.5em;
  width: 25em;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

/* Styles généraux pour les blocs vidéos */
[class^="ABvideo"] {
  width: 100%;
  border-radius: 0.6em;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.18s ease-in-out;
}

[class^="ABvideo"]:hover {
  transform: scale(1.05);
}

[class^="ABvideo"] > a > img {
  position: relative;
  width: 100%;
  height: auto;
  min-width: 75px;
  object-fit: cover;
  top: 0;
  left: 0;
}



/* Responsive */

@media screen and (max-width: 767px) {/* Petits écrans < 768px */
#topbar {
    font-size: 1em;
    height: 2.5em;
    display: flex;
    align-items: center;
    background-color: #364575;
}

#topbar > ul {
    width: 100%;
    padding: 0 0.5em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    list-style: none;
}

#topbar > ul > a {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

#topbar li {
    padding: 0;
    text-align: center;
    flex: 1;
    font-size: 1em;
    line-height: 2.5em;
    height: 100%;
    color: white;
    border-left: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}

#topbar > ul > a:not(:first-child) {
        flex: 1;
    }

    #topbar > ul > a:first-child {
        flex: initial;
        width: 2.5em;
        height: 2.5em;
    }

/* Logo */
#logoAD {
    margin: 0;
    width: 2.5em;
    height: 2.5em;
    background-color: #fff;

    /* Rappel : masque SVG pour le logo */
    -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Vectoriel' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1035.83 917.64'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M718.79,621.82h-158.06L311.78,124.97,90.73,565.82H444.68v56H0L311.8,0l283.51,565.82h123.45c.57,0,59.89-.55,117.44-30.87,74.19-39.09,111.81-108.86,111.81-207.39s-38.52-168.02-114.49-206.89c-59.07-30.22-119.95-30.58-120.56-30.58h-107.21v237.87h-56V34.09h163.06c5.85,0,128.69,.62,213.68,85.22,51.43,51.2,77.51,121.26,77.51,208.25s-26.14,158.73-77.69,210.19c-83.08,82.95-201.54,84.07-207.53,84.07Z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;

    /* Ajouté pour forcer affichage correct */
    mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Vectoriel' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1035.83 917.64'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M718.79,621.82h-158.06L311.78,124.97,90.73,565.82H444.68v56H0L311.8,0l283.51,565.82h123.45c.57,0,59.89-.55,117.44-30.87,74.19-39.09,111.81-108.86,111.81-207.39s-38.52-168.02-114.49-206.89c-59.07-30.22-119.95-30.58-120.56-30.58h-107.21v237.87h-56V34.09h163.06c5.85,0,128.69,.62,213.68,85.22,51.43,51.2,77.51,121.26,77.51,208.25s-26.14,158.73-77.69,210.19c-83.08,82.95-201.54,84.07-207.53,84.07Z'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
}







  /* Colonnes deviennent une seule colonne */
  .blocvideoAB {
    flex-direction: column;
    max-width: 100%;
  }

  #colone1,
  #colone2,
  #colone3,
  #colone4 {
    width: 100%;
    margin: 0 0 1em 0;
  }

  /* Images s'adaptent en largeur */
  [class^="ABvideo"] > a > img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
  }
}