/**
 * Styles de base 
 * 
 */
 
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?nkxcx7');
  src:  url('fonts/icomoon.eot?nkxcx7#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?nkxcx7') format('truetype'),
    url('fonts/icomoon.woff?nkxcx7') format('woff'),
    url('fonts/icomoon.svg?nkxcx7#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-play:before {
  content: "\ea1c";
}
.icon-pause:before {
  content: "\ea1d";
}
.icon-arrow-right:before {
  content: "\ea3c";
}
.icon-arrow-left:before {
  content: "\ea40";
}
.icon-stop:before {
  content: "\ea1e";
}

 
* {
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}
 
body {

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    /* Hauteur minimum : 100% de la hauteur de la fenêtre */
    min-height: 100vh; 
    margin: 0;
    background-color: #333;

    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: white;    
}

a {
    color: #ccc;
}

a:hover,
a:focus,
a:active {
    color: #fff;
}

/* Image responsive  : empêcher l'image de déborder de son conteneur */
img {
    max-width: 100%;
    height: auto;

    /* Supprimer l'espace indésirable sous la photo lié à la valeur baseline  */
    vertical-align: middle;
}

main {
    padding-top : 2em;
    padding-bottom: 4em;
}


/* Bannière et footer */
.banner,
.footer {
    column-gap: 1em;

    padding: 1em;
    background: black;
    text-align: center;
}

.banner {
    display: grid;
    row-gap : 1em;

    @media (min-width: 768px) {
        grid-template-columns: 2fr 1fr 2fr;
        align-items: center;
        column-gap : 1em;
    }
}

.banner-link {
    display: flex;
    justify-self: center;
    @media (min-width: 768px) {
        justify-self: start;
    }

    text-decoration: none;
}

.banner-logo {
    width: 100px;
    vertical-align: middle;
}

.banner-description {
    margin-left: -30px;
    margin-top: 10px;
    background-color: black;
    align-self: center;
    font-size : 1.5vmax;
    font-weight: bold;
}


.banner-baseline { 
    text-transform: uppercase;
    text-decoration: underline overline;
}

.banner-nav {
    justify-self: end;
    align-self: end;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 0.8em;
}

.nav-link {
    color: rgba(255,255,255,0.5);
}

.nav-link.is-active {
    color: white;
}

.nav-link:not(:last-child)::after {
    content : '|';
    display: inline-block;
    margin : 0 0.5rem;
    color: rgba(255,255,255,0.5);
}

/* Classes utiles */

.is-hidden {
    display: none !important;
}

/* SLIDER */

.slider {

    width: max-content;
    max-width: 100%;

    margin: auto;

    /* Référent des liens de la nav */
    position: relative;
    padding : 0;

    text-align: center;
}

.slider-container {
    position: relative;
    z-index: 10000;
}

.slider-figure {
    /* Pour que la figure prenne la largeur de la photo */
    display: inline-block;
    /* Pour servir de référent à la légende  */
    position: relative;

    /* Par défaut le figures ont une marge de 40px  */
    margin: 0;

    /* Avec un fond ou une bordure on appréhende mieux ce qui se passe */
    border: 5px #fff solid;    
}

.slider-legend {
    position: absolute;
    left:0; right:0;
    top:0;

    padding: 1em;
    background-color: rgb(0,0,0);

    /* Transparence de couleur : 50% de transparence alpha */
    background-color: rgba(0,0,0,0.5);
    text-align: center;
}

.slider-navigation {
    position: absolute;
    left:-60px; 
    right:-60px;
    top: 0; bottom: 0;
    
    z-index: 1000;

    display: flex;
    justify-content: space-between;

}

.slider-navigation-link {

    display: flex;
    align-items: center;

    padding : 0 10px;

    color: #fff;
    font-size: 40px;

    transition: transform 1s;

    cursor: pointer;
}

.slider-navigation-link:hover span {
   transform: scale(1.5);
}

/* Contenu généré en CSS */

.slider-legend::after,
.slider-legend::before {
    content: '*';
    color : red;
    font-size: 2em;
    vertical-align: middle;
}

.slider-diaporama {
    position: absolute;
    bottom: -60px;
    margin-left: -20px;
    padding:0;
    background-color: black;
    border : 1px solid white;
    border-radius : 5px;
    color: white;
    font-size: 40px;
}


/* ##################################################################### */
/* ############################# Pagination ############################ */
/* ##################################################################### */

.slider-pagination {
    position: absolute;
    z-index: 20000;
    left: 50%;
    bottom: 1em;
    transform: translateX(-50%);

    display: flex;
    gap : 1em;

    padding: 10px;
    background-color : rgba(0,0,0,0.5);
}

.slider-pagination-item {
    width: 1em;
    height: 1em;
    margin:0;
    padding:0;
    border: 3px solid white; 
    border-radius: 50%;
    list-style-type: none;

    cursor: pointer;
}

.slider-pagination-item.is-active,
.slider-pagination-item:hover {
    background: white;
}