* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    align-self: center;
}

:root {
	font-size: 16px;
    --jaune_logo: #ffbf08;
    --duration: 800ms;   /* vitesse du glissement */
    --pause: 3500ms;     /* arrêt entre 2 images */
}

@font-face {font-family: "Saira Thin"; src: local("Saira Condensed Thin"), url("https://istotem.com/fonts/SairaCondensed-Thin.ttf") format("truetype");}

@font-face {font-family: "Saira"; src: local("Saira Condensed Regular"), url("https://istotem.com/fonts/SairaCondensed-Regular.ttf") format("truetype");}

body {
    color: #eeeeee;
    min-height: 100vh;
    background-color: #000000;
    /*overflow: hidden;*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-family: "Saira", "Helvetica Neue", Arial, sans-serif;
    text-align: center;
}

.nobr {white-space: nowrap;}

div.container {
    padding: 3rem 1rem;
}

div.titre h1 {
    font-size: 3rem;
    font-family: "Saira Thin", "Helvetica Neue", Arial, sans-serif;
    font-variant-caps: all-small-caps;
    letter-spacing: 2.5px;
    line-height: 1.8rem;
}

div.soustitre h2 {
    font-size: 1.6rem;
    font-family: "Saira Thin", "Helvetica Neue", Arial, sans-serif;
    font-variant-caps: all-small-caps;
    letter-spacing: 1.5px;
    margin-bottom: 2rem;
}

.slider {
    position: relative;
    width: 90vw;
    max-width: 500px;
    aspect-ratio: 1;
    margin: 0 auto;
    overflow: hidden;
    background: #000;
  }
  
  .track {
    display: flex;
    height: 100%;
    transition: transform var(--duration) ease-in-out;
  }
  
  .track img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Flèches */
  .slider button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #000;
    color: #777;
    border: none;
    padding: 0.4em 0.6em;
    font-size: 2rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s;
  }
  
  .slider:hover button {
    opacity: 1;
  }
  
  .prev { left: 5px; }
  .next { right: 5px; }
  

div.contact {
    padding: 2rem 0;
    font-size: 1rem;
    font-family: "Saira Thin", "Helvetica Neue", Arial, sans-serif;
}

div.contact a {
    color: var(--jaune_logo);
    text-decoration: none;
    font-family: "Saira", "Helvetica Neue", Arial, sans-serif;
}

div.copyright {
    display: flex;
    align-items: center;
    justify-content: center;
}

div.logo-icon {
    display: flex;
    height: 36px;
    width: 36px;
    padding: 10px;
    border-radius: 50%;
    background-color: white;
}

div.logo-icon img {
    margin: 0 auto;
}