/* === Paramètres généraux === */
:root{
    /* Couleurs */
    --main-color: #0096fc;
    --second-color: #ffff90;

    /* Dégradés */
    --gradient-1: linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.8) 100%);
    --gradient-2: linear-gradient(180deg,rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.75) 100%);
}

::selection{
    background-color: var(--main-color);
    color: #fff;
}

@font-face{
    font-family: "Questrial";
    src: url(../fonts/Questrial.ttf);
}

@font-face{
    font-family: "Quicksand";
    src: url(../fonts/Quicksand.ttf);
}

body{
    box-sizing: border-box;
    font-family: "Quicksand";

    background-image: url(../ressources/img/fond2.jpg);
    background-size: cover;
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6{
    font-family: "Questrial";
}

*{
    margin: 0;
    padding: 0;
}

a{
    color: var(--main-color);
    text-decoration: none;
}

/* === Titres === */
.site-title{
    font-size: 3rem;
}

h1, h2, h3, h4, h5, h6{
    text-align: center;
}

h1{
    color: #fff;
}

/* === Textes === */
h1, h2, h3, h4, h5, h6, p{
    margin: 10px 0;
}

/* === Header === */
.site-header div{
    background-color: var(--main-color);
    color: #fff;

    text-align: center;
    text-transform: lowercase;

    padding: 0.5rem;
}

.site-title span{
    color: var(--second-color);
}

.site-header nav{
    background-color: #fff;

    display: flex;
    justify-content: center;
    gap: 2rem;

    font-size: 1.25rem;
}

.site-header a{
    color: inherit;
}

/* Sous-menus */
.site-header ul{
    list-style: none;
}
.site-header .sous-menu{
    position: absolute;
    z-index: 2;
    border: 2px solid var(--main-color);
    border-radius: 10px;
    padding: 0.5rem 1rem;
    background-color: #fff;
}
.site-header .sous-menu li{
    margin: 0.5rem 0;
}

.site-header nav .sous-menu{
    display: none;
    height: 0;
}
.site-header nav .sous-menu.active{
    display: block;
    height: auto;
}

/* Animation des liens */
.site-header nav a{
    display: inline-block;
    position: relative;

    text-align: center;

    padding: 0.25rem 0;

    transition: color 0.5s;
}
.site-header nav a::after{
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--wp--preset--color--black);
    transform-origin: bottom right;
    transition: transform 0.2s ease-in-out, background-color 0.4s ease-in-out;
}
.site-header nav a:hover{
    color: var(--main-color);
}
.site-header nav a:hover::after{
    transform: scaleX(1);
    transform-origin: bottom left;
    background-color: var(--main-color);
}

/* === Footer === */
.site-footer{
    background-color: #fff;
    padding: 1rem 10vw;
    text-align: center;
}

/*  === Contenu de la page === */
main.page-content{
    margin: 1rem 20vw; 
}

section{
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 10px;

    text-align: center;

    background: var(--gradient-2);
}
section span{
    color: #e00;
    font-weight: bold;
}

section a{
    font-weight: bold;
    transition: color 0.2s;
}
section a:hover{
    color: #0048b0;
}

iframe{
    border: 0;
    width: 100%;
    margin: 1rem 0;
}

.alerte{
    margin: 0 1rem;
}

/* === iframes === */
iframe#davis{
    width: 760px;
    height: 220px;
}

iframe#meteoblue{
    height: 400px;
}

/* === Stats relevés === */
.maxi{
    color: #f00;
}

.mini{
    color: #00f;
}

/* === Tableau === */
table{
    margin: auto;
    padding: 1rem;
    border: 1px solid #0048b0;
    border-collapse: collapse;

    background-color: #0096fc11;
}
td{
    padding: 1rem;
    border: 1px solid #0048b0;
}

/* === Divers === */
.vertical{
    display: flex;
    flex-direction: column;
}

.reseaux img{
    margin: 1rem;
    height: 50px;
    width: auto;
}

/* === Retour en haut === */
#topbtn{
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    font-family: 'Quicksand';
    border: none;
    outline: none;
    background-color: var(--main-color);
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 1000px;
}
  
#topbtn:hover{
    background-color: #555;
}

/* === Media queries === */
@media screen and (max-width: 980px){
    main.page-content{
        margin: 1rem 5vw;
    }

    iframe#davis{
        width: 300px;
    }

    .reseaux img{
        height: 30px;
    }
}