:root {
    --primary-color: #05488c;
    --accent-color: #00AEEF;
    --background: #f8f8f8;
    --font-main: 'Raleway', sans-serif;
}

/* Définition des règles de base de taille de texte et écran*/
html,body{
background-color: #f8f8f8;
font-weight: 400;
font-style: normal;
font-family: 'Raleway', Tahoma, sans-serif;
font-size: 1em;
text-align: justify;
margin: 0 0 3em 0;
overflow-x: hidden;
}

@media screen and (max-width: 600px) {
    html, body, p{
      font-size: 0.875em;
    }
}

header{
    background-image: url("background_color_header.jpeg");
    background-size: cover;
    background-repeat:no-repeat;
    background-position: center;
    width: 100%;
    height: fit-content;
    margin: 0;
    text-align: center;
}

#menu{
    background-color: black;
    position: sticky;
    top: 0;
    font-size: 1em;
    z-index: 2000;
}
#liste_menu{
    margin: 0;
    padding: 10px;
    display: flex;
    justify-content: space-evenly;
    
}

a.liens_menu{
    color: white;
    text-decoration: none;
    font-size: 1em;
    font-style: normal;
    font-weight: bold;
    border-bottom: 1px solid transparent;

}
a.liens_menu:hover{
    font-weight: bold;
    border-bottom: 1px solid white;
}

@media screen and (max-width: 600px) {
    #menu{
        font-size: 0.75em;
    }
}

/* Définition des différents taille de texte*/
h1{
    font-weight: 800;
    color: white; 
    text-shadow: black 0.1em 0.1em 0.2em;
    padding: 1em;
    margin: 0;
}

h2{
    font: 600;
    color: black;
    padding: 1em 1em 0 1em;
    margin: 0;
}

h3{
    font: 400;
    text-decoration: underline;
    color: black;
    padding: 1em 3em 0 1em;
    margin: 0;
}

h4{
    font: 400 bold;
    text-decoration: italic;
    color: black;
    padding: 1em 3em 1em 2em;
    margin: 0;
}


p{
    padding: 0 3em 0 3em;
}

/* Définition des liens internet */
a, ul a{
    text-decoration: none;
    font: rgb(153, 21, 21);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-style: italic;
    font-weight: 600;
}

/* Mise en forme des div */
.image_meteo{
    margin: 0 1em;
    text-align: center;
    max-width: 100%;
}

.columns{
    column-count: auto;
    column-width: 500px;
    column-gap: 1em;
    margin: 0 2em;
    text-align: center;
    vertical-align: baseline;
}

@media screen and (max-width: 600px) {
    .columns{
      columns: unset;
    }
    .liens_articles ul{
        line-height: 1.5;
        font-size: 0.75em;
        padding-inline-start: 0;
    }
}


.liens_articles{
    text-align: center;
    break-after: column;
}
.liens_articles ul{
    line-height: 1.5;
    margin-top: 0;
    list-style: none;
    padding-inline-start: 0;
}
#diagram_cristal{
    margin: 0 1em;
}
#video_guide_michela{
    padding: 1em;
    max-width: -webkit-fill-available;
    height: -webkit-fill-available;
        border-radius: 10px;
    border : 0;
    box-shadow: none;
    overflow: hidden; 
}

#nivologie{
    max-width: 1200px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-content: center;
    gap: 10px;
    margin: 0 auto;
}


@media screen and (max-width: 1090px) {
    #nivologie{
      flex-direction: column;
      margin: 0 auto; 
      text-align: center;
    }
    img.image_nivologie{
        max-width: 70%;
    }
}

/* Mise en forme Iframe BERA */
.bera{
    border: none;
    overflow: hidden;
    width: 100%;
    height: 2500px;
}
.hidden {
    display: none !important;
}

@media screen and (max-width: 600px) {
    .bera{
      height: 500px ;
    }
}

.tabs { 
    font-family: 'Raleway', Tahoma, sans-serif;
    font-size: 1.25em;
    border: 1em;
    border-color: rgb(250,250,250);
}

.tabs .tab-registers {
    display: flex;
    margin: 0 1em;
    justify-content: center;
    background-color: rgb(250,250,250);
}

.tabs button {
    padding: 0.5em;
    margin: 0 10px;
    background-color:rgb(230, 230, 230);
    border: none;
    font-family: 'Raleway', Tahoma, sans-serif;
    font-size: 1em;
    border-style: solid;
    border-radius: 0.8em;
    border-color: transparent;
}

.tabs .tab-registers button:hover {
    cursor: pointer;
    border-style: solid;
    border-radius: 1em;
    border-color:#183f6f;
}

.tabs .tab-bodies {
    padding: 0;
    background-color: rgb(250,250,250);
    flex-grow: 1;
    overflow-y: hidden;
    height: fit-content;
    margin: 0;
}

.tabs button.active-tab {
    background-color: white;
    color: #183f6f;
    border-style: solid;
    border-radius: 0.8em;
    border-color:#183f6f;
}

/* Mise en forme Iframe Webcams */
.show_webcams{
    margin: 5px auto 25px auto;
    display : block;
    border-radius: 10px;
    border : 0;
    box-shadow: none;
    overflow: hidden; 
    max-width: 80%;
}

/* Mise en forme carte IGN */
#viewerDiv {
    margin: 20px auto;
    width: 80%;
    height: 480px;
    border-radius: 10px; /* 👈 ajout du rayon */
    overflow: hidden; 
}

/* Mise en forme flux RSS*/
#rss{
    max-width: 500px;
    width: 100%;
    padding: 1em;
    text-align: left;
    border: solid 1px black;
    border-radius: 20px;
    overflow-y: scroll;
    height: 300px;
    margin: 20px auto;
}
.invisible-scrollbar::-webkit-scrollbar {
    display: none;
}
a.link{
    padding : 0;
    text-align: left;
    font-weight: 400;
    font-family: sans-serif;
    margin: 0 0 5px 0;
    font-size : 0.9em;
}
p.description{
    text-align: center;
    font-weight: 300;
    margin: 2px 0 0 0;
    font-size : 0.7em;
}

@media screen and (max-width: 600px) {
    #rss{
      max-width: 70%;  
      margin: 20px auto;
    }
    a.link{
    font-size : 0.8em; 
    }
    p.titre{
    font-size : 0.8em;
    }
    p.description{
    font-size : 0.7em;
    }
}

/* --- CAROUSEL --- */
.slider {
  width: 900px;               /* 740px - fixe la largeur totale */
  height: 756px;              /* 500px - fixe la hauteur totale --> ratio : 0,84 */
  margin: 20px auto;          /* ← centrage horizontal + espace vertical */
  text-align: center;
  overflow: hidden;
  position: relative;         /* pour positionner correctement les images */
}

.slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.slides::-webkit-scrollbar {
  width: 10px;
  height: 6px;
}

.slides::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 10px;
}

.slides::-webkit-scrollbar-track {
  background: transparent;
}

.slides > div {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 900px;
  height: 750px;
  margin-right: 50px;
  border-radius: 10px;
  background: white;
  position: relative;       /* pour contenir l'image en absolute */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;         /* masque les débordements de l’image */
}

/* Les images météo */
.diagram_meteo {
  width:100%;
  object-fit:cover; /* remplit le conteneur sans déformation */
  position:absolute;
  object-position: center;
  left:0;
  top:0;
  margin:0;
}

/* Tablettes : un peu plus petit */
@media (max-width: 900px) {
  .slider {
    width: 85%;
    aspect-ratio: 4 / 3;
  }
}

/* Mobiles : plus étroit et plus haut */
@media (max-width: 600px) {
  .slider {
    width: 95%;
    height: 430px;
  }
  .slides > div {
  width: 500px;
  height: 420px;
  }
  .diagram_meteo {
  height: 420px;
  }
}


html {
    font-size: clamp(14px, 1.5vw, 18px);
}
a.liens_menu {
    transition: border-bottom 0.3s ease, color 0.3s ease;
}
a.liens_menu:hover {
    border-bottom: 2px solid var(--accent-color);
}
#menu {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.tabs button {
    background:#183f6f; /*linear-gradient(to right, var(--accent-color),*/
    color: white;
    transition: background 0.3s ease;
}
a:focus {
    outline: 2px dashed var(--accent-color);
    outline-offset: 4px;
}