/* ============================= */
/*        IMPORT DES FONTS        */
/* ============================= */
@font-face {
  font-family: 'Inter';
  src: url('./FONTS/Inter.ttf') format('truetype');
}

/* ============================= */
/*         STYLES GÉNÉRAUX         */
/* ============================= */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: radial-gradient(circle, rgb(1, 2, 3), rgba(7, 12, 63, 1));
  font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
  margin: 0;
  padding: 0;
}

/* ============================= */
/*     EN-TÊTE & PIED DE PAGE      */
/* ============================= */
header, footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 96%;
  margin: 14px auto;
}

/* ============================= */
/*      CONTENU PRINCIPAL          */
/* ============================= */
main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 13px;
  width: 88%;
  margin: 14px auto;
  background: url('./IMAGES/FondEcran1.jpg') no-repeat center center fixed;
  background-size: cover;
}

/* ============================= */
/*            AUDIO                */
/* ============================= */
.audio-wrapper audio {
  height: 54px;
  background-color: #00b6f0;
  margin: 17px auto;
  border-radius: 13px;
  border: 3px solid rgb(1, 2, 3);
  box-shadow: 0 0 5px 3px yellow;
  display: block;
  width: 100%;
  max-width: 90%;
}

.audio-link {
  padding: 17px;
  border-radius: 13px;
  font-size: 13px;
  color: white;
  cursor: pointer;
  transition: all 0.9s ease;
  border: 3px solid green;
  margin: 12px auto;
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  background-color: rgba(0, 143, 240, 0.3);
  max-width: 233px;
  width: 80%;
}

.audio-left {
  text-align: left;
}

.audio-right {
  text-align: right;
}

.audio-link:hover {
  color: rgb(1, 2, 3);
  border: 3px solid rgb(1, 2, 3);
  box-shadow: 0 0 5px 3px white;
  max-width: 1000px;
  width: 60%;
}

/* Style pour le lien audio actif */
.audio-link.active {
  background-color: #00b6f0;
  color: orangered;
  border: 3px solid rgb(1, 2, 3);
  box-shadow: 0 0 5px 3px yellow;
  max-width: 1000px;
  width: 69%;
}

/* ============================= */
/*      STYLES RUBRIQUE            */
/* ============================= */
.Rubrique-PlanetTerre {
  height: 63px;
  padding: 0 17px;
  border-radius: 13px;
  font-size: 13px;
  color: rgb(1, 2, 3);
  cursor: pointer;
  border: 3px solid rgb(1, 2, 3);
  box-shadow: 0 0 5px 3px orangered;
  margin: 17px auto;
  text-decoration: none;
  background-color: #F1F2F4;
  display: flex;
  align-items: center;
  justify-content: space-between; /* ✅ pour extrémités */
  width: 100%;
  max-width: 92%;
  letter-spacing: 1px;
  box-sizing: border-box; /* pour éviter tout débordement */
  transition: all 0.9s ease;
}


.Rubrique-PlanetTerre:hover {
  color: orangered;
  box-shadow: 0 0 5px 3px #00b6f0;
}

.Rubriques {
  height: 63px;
  padding: 0 17px;
  border-radius: 13px;
  font-size: 13px;
  color: rgb(1, 2, 3);
  cursor: pointer;
  border: 3px solid rgb(1, 2, 3);
  box-shadow: 0 0 5px 3px orangered;
  margin: 17px auto;
  text-decoration: none;
  background-color: #F1F2F4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: 1px;
  box-sizing: border-box;
  transition: all 0.9s ease;
}

.Rubriques:hover {
  color: orangered;
  box-shadow: 0 0 5px 3px #00b6f0;
  max-width: 1000px;
  width: 62%;
}

/* Styles spécifiques pour le lien CHAÎNES TV */
.ChainesTV-link {
  width: 90%;
}

/* Styles spécifiques pour le lien GENEALOGIE FAMILLIALE */
.Genealogie-link {
  width: 87%;
}

/* Styles spécifiques pour le lien IMPACTS COUP DE FOUDRE */
.ImpactsCoupDeFoudre-link {
  width: 84%;
}

/* Styles spécifiques pour le lien METEO CLIMAT */
.MeteoClimat-link {
  width: 81%;
}

/* Styles spécifiques pour le lien PRENOMS SAINTS */
.SaintsPrénoms-link {
  width: 78%;
}

/* Styles spécifiques pour le lien SUITE BUREAUTIQUE */
.SuiteBureautique-link {
  width: 75%;
}

/* Styles spécifiques pour le lien SUITE COLLABORATIVE */
.SuiteCollaborative-link {
  width: 72%;
}

/* Styles spécifiques pour le lien WEB RADIO */
.WebRadio-link {
  width: 69%;
}

/* Styles spécifiques pour le lien WEB TV */
.WebTV-link {
  width: 66%;
}

/* ============================= */
/*      ICÔNES INTERACTIVES        */
/* ============================= */
.hover-image-EtoileCiel,
.hover-image-LogIN,
.hover-image-EtoileDeMer {
  width: 41px;
  height: 41px;
  border: 3px solid rgb(1,2,3);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.6s ease;
   box-shadow: 0 0 5px 3px white;
  background-color: white;
}

.hover-image-Globe {
   width: 41px;
  height: 41px;
  border: 3px solid transparent;
  border-radius: 50%;
  transition: all 0.6s ease;
  box-shadow: 0 0 5px 3px #00b6f0;
}

/* Survol des icônes */
.hover-image-EtoileCiel:hover,
.hover-image-LogIN:hover,
.hover-image-EtoileDeMer:hover {
  border-radius: 50%;
  box-shadow: 0 0 5px 3px #00b6f0;
  background-color:  #00b6f0;
}

.hover-image-Globe:hover {
  border: 3px solid #00b6f0;
  box-shadow: 0 0 5px 3px #00b6f0;
}

/* ============================= */
/*      DATE ET HEURE              */
/* ============================= */
.date, .heure {
  font-size: 13px;
  color: white;
  transition: color 0.6s ease;
}

.date:hover, .heure:hover {
  color: #00b6f0;
}