@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Roboto:wght@100;300;400;500;700;900&display=swap');

html, body {
   padding:0;
   margin:0;
}

img {
   display:block;
   max-width:100%;
   height:auto;
}

body {
   font-family:"Oswald", sans-serif;
   font-weight:300;
   font-size:22px;
   overflow-y:auto;
   overflow-x:hidden;
}

h1 {
   color:#000;
   font-weight:500;
   font-size:32px;
   margin:0;
   padding:16px 0 18px;
   text-align:center;
}

h2 {
   text-decoration:underline;
   font-size:28px;
   font-weight:500;
   margin:30px 0 20px;
}

h3 {
   font-size:26px;
   font-weight:500;
   color:#165A8D;
   margin:30px 0 0;
}

h4 {
   font-size:20px;
   line-height:30px;
   margin:10px 0;
}

main {
   position:relative;
   padding-top:70px;
}

section {
   display:block;
   position:relative;
   width:100%;
}

main section:first-of-type {
   margin-top:80px;
}

.row {
   display:flex;
   flex-wrap:nowrap;
   width:100%;
}

.container {
   display:block;
   max-width:1620px;
   width:100%;
   margin:0 auto;
   padding:0 30px;
   box-sizing:border-box;
}

.col-2-gauche {
   max-width:66.666%;
   width:100%;
   padding-right:20px;
   box-sizing:border-box;
}

.col-2-droite {
   max-width:33.333%;
   width:100%;
   padding-left:20px;
   box-sizing:border-box;
}

/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------
Header
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

header {
   display:block;
   width:100%;
   height:auto;
   background-color:#165A8D;
   z-index:5;
}

header h1 {
   color:#fff;
   font-weight:900;
}

nav {
   width:100%;
   height:58px;
   background-color:#5DA6DE;
   z-index:8;
}

nav ul {
   display:flex;
   align-items:center;
   justify-content:center;
   margin:0;
   text-align:center;
}

nav ul li {
   display:inline-block;
   padding:0 30px;
   font-size:18px;
   font-weight:900;
   text-transform:uppercase;
   list-style:none;
   line-height:58px;
}

nav ul li a {
   color:#000;
   text-decoration:none;
}

nav ul li a:hover {
   color:#fff;
   text-decoration:none;
}

ul .barrenav-rs {
   margin:0 4px;
   padding:0;
}

#logo {
   position:absolute;
   display:block;
   width:180px;
   top:-340px;
   left:unset;
   z-index:9;
   transition:0.5s;
   animation:vague 4s ease-in-out infinite;
}

@keyframes vague {
   0% {
      transform:translateX(0) translateY(0) rotate(0deg);
   }
   25% {
      transform:translateX(-5px) translateY(-3px) rotate(-1deg);
   }
   50% {
      transform:translateX(0px) translateY(2px) rotate(1deg);
   }
   75% {
      transform:translateX(5px) translateY(-2px) rotate(-1deg);
   }
   100% {
      transform:translateX(0) translateY(0) rotate(0deg);
   }
}

#first-of-type {
   padding-left:30px!important;
}

#english {
   position:absolute;
   font-size:18px;
   color:#fff;
   top:10px;
   right:30px;
   z-index:9;
}

.menu-container {
   display:none;
   margin-right:15px;
   margin-top:9px;
   float:right;
   cursor:pointer;
}

.bar1, .bar2, .bar3 {
   width:35px;
   height:5px;
   margin:6px 0;
   border-radius:3px;
   background-color:#fff;
   transition:0.4s;
}

.change .bar1 {
   -webkit-transform:rotate(-45deg) translate(-9px, 7px);
   transform:rotate(-45deg) translate(-9px, 7px);
}

.change .bar2 {
   opacity:0;
}

.change .bar3 {
   -webkit-transform: rotate(45deg) translate(-8px, -7px);
   transform: rotate(45deg) translate(-8px, -7px);
}

.bascule {
   display:none;
   position:absolute;
   width:100%;
   z-index:9;
   opacity:0.94;
}

#mobile {
   display:none;
   height:auto;
   opacity:0;
}

#mobile ul {
   display:block;
   padding:0;
   background-color:#ABD4F5;
}

#mobile ul li {
   display:block;
}

#mobile ul li a {
   display:block;
   height:auto;
}

#mobile ul li img {
   margin:0 auto;
   padding:8px 0;
}

#mobile ul li img:last-of-type {
   margin:0 auto;
   padding:8px 0 16px;
}

#mobile.actif {
   display:block;
   opacity:1;
}

/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------
Accueil
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

#main-index {
   padding-top:30px;
}

#televiseur {
   position:relative;
   top:28px;
   z-index:7;
}

#televiseur .slide {
   position:absolute;
   top:0;
   left:0;
   opacity:0;
   transition:opacity 1s ease;
   z-index:7;
}

#televiseur .slide.actif {
   opacity:1;
}

#brouillage {
   width:997px;
   height:481px;
   top:217px!important;
}

#bandeau-reseaux-sociaux h2 {
   text-align:center;
}

#bandeau-images {
   display:flex;
   justify-content:center;
   align-items:center;
   gap:12px;
}

#bandeau-images img {
   display:inline-block;
   text-align:center;
   transform:scale(0%);
   transition:0.3s;
}

#bandeau-images img.actif {
   transform:scale(100%);
}

#ul-podcasts {
   margin-top:0;
   padding:0;
}

#ul-podcasts li {
   font-weight:500;
   list-style:none;
   border-bottom:1px solid #D9D9D9;
   padding:10px 10px 10px 15px;
   cursor:pointer;
   transition:0.2s;
}

#ul-podcasts li:first-child {
   border-top:1px solid #D9D9D9;
}

#ul-podcasts li:nth-child(even) {
   background-color:#f2f2f2;
   transition:0.2s;
}

#ul-podcasts li:hover {
   background-color:#DEDEDE;
   transition:0.2s;
}

/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------
Sections
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

#partenaires-index {
   margin-top:150px;
}

#partenaires h1,
#partenaires-index h1 {
   background-color:#DFE9F0;
}

#partenaires .container,
#partenaires-index .container {
   display:inline-grid;
   grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
   align-items:center;
   padding:60px 40px;
   box-sizing:border-box;
   margin:0 auto;
   max-width:100%;
   width:100%;
}

#partenaires .container img,
#partenaires-index .container img {
   display:block;
   max-width:240px;
   margin:0 auto;
   padding:0 15px;
   box-sizing:border-box;
}

#contact {
   font-size:29px;
   line-height:54px;
   text-align:center;
}

#contact #telephone-href {
   color:#000;
   text-decoration:none;
}

.map-container {
   width: 100%;
   aspect-ratio: 16 / 9; /* ou 4/3, 1/1, etc. */
   position: relative;
}

.map-container iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: 0;
}

/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------
Footer
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

footer {
   position:relative;
   display:block;
   width:100%;
   height:auto;
}

/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------
@Query
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

@media (max-width:1680px) {
   #partenaires .container,
   #partenaires-index .container {
      grid-template-columns:1fr 1fr 1fr 1fr 1fr;
   }

   #partenaires .container img,
   #partenaires-index .container img {
      padding:20px 15px;
   }
}

@media (max-width:1580px) {
   #brouillage {
      display:none;
   }
}

@media (max-width:1440px) {
   #desktop {
      position:unset!important;
   }

   #desktop ul {
      display:none;
   }

   .menu-container {
      display:block;
   }

   #english {
      display:none;
   }
}

@media (max-width:1300px) {
   #main-index .row {
      flex-wrap:wrap;
   }

   #main-index .col-2-gauche,
   #main-index .col-2-droite {
      max-width:100%;
      padding:0;
   }

   h1 {
      text-align:center!important;
   }

   main h1:first-of-type {
      margin:40px 0;
   }

   #televiseur img {
      left:50%!important;
      transform:translateX(-50%);
   }
}

@media (max-width:1280px) {
   #partenaires .container,
   #partenaires-index .container {
      grid-template-columns:1fr 1fr 1fr 1fr;   }
}

@media (max-width:1064px) {
   #partenaires .container,
   #partenaires-index .container {
      grid-template-columns:1fr 1fr 1fr;   }
}

@media (max-width:916px) {
   #logo {
      display:none;
   }

   main section:first-of-type {
      margin-top:0;
   }
}

@media (max-width:880px) {
   #partenaires .container img,
   #partenaires-index .container img {
      max-width:180px;
   }
}

@media (max-width:808px) {
   #animation-tv .redim {
      top:218px;
   }
}

@media (max-width:698px) {
   #animation-tv .redim {
      top:182px;
   }
}

@media (max-width:660px) {
   #partenaires .container,
   #partenaires-index .container {
      grid-template-columns:1fr 1fr;
   }
}

@media (max-width:596px) {
   #animation-tv .redim {
      top:165px;
   }
}

@media (max-width:546px) {
   #animation-tv .redim {
      top:154px;
   }
}

@media (max-width:514px) {
   #animation-tv .redim {
      top:148px;
      padding:0 36px;
   }
}

@media (max-width:502px) {
   #animation-tv .redim {
      top:130px;
   }
}

@media (max-width:442px) {
   #animation-tv .redim {
      top:120px;
   }
}

@media (max-width:404px) {
   #animation-tv .redim {
      top:99px;
      padding:0 25px;
   }
}

@media (max-width:350px) {
   #animation-tv .redim {
      top:85px;
      padding:0 15px;
   }
}

@media (max-width:530px) {
   #partenaires .container,
   #partenaires-index .container {
      grid-template-columns:1fr 1fr;
   }
}

@media (max-width:480px) {
   #partenaires .container,
   #partenaires-index .container {
      grid-template-columns:1fr;   }
}