/* ========================================
   BASE.CSS
   Auteur                : Renaud
   Création              : 21 octobre 2025
   Dernière modification : 18 novembre 2025
   ======================================== */

:root {

  /* Variables de Polices */
  --font-title-page: "Moderniz", "Helvetica Neue", sans-serif; /* Police du titre de la page <h1> */
  --font-logo:       "Digital-Desolation-Plus", "Helvetica Neue", sans-serif; /* Police du logo <h2> */
  --font-headings:   "Helvetica Neue", Arial, sans-serif; /* Pile de polices pour <h3>, <h4>, <h5>, <h6> */
  --font-text:       "Helvetica Neue", Arial, sans-serif; /* Pile de polices sans serif communes et lisibles */

  /* Variable de l'image du logo */
  --logo-image-url: url("../images/logo-du-site.png");
  --logo-image-width: 200px;
  --logo-image-height: 6rem;

  /* Couleurs des fonds */
  --color-background-body:          var(--color-gris-230);
  --color-background-header:        var(--color-gris-230);
  --color-background-hero:          var(--color-gris-230);
  --color-background-main:          var(--color-gris-230);
  --color-background-sidebar:       var(--color-gris-220);
  --color-background-sidebar-block: var(--color-gris-230);
  --color-background-footer:        var(--color-gris-060);

  /* Couleurs du logo <h2> */
  --color-logo-default:        var(--color-blue-090);
  --color-logo-visited:        var(--color-blue-090);
  --color-logo-default-shadow: var(--color-blue-060-shadow);
  --color-logo-hover:          var(--color-blue-060);
  --color-logo-hover-shadow:   var(--color-blue-030-shadow);
  --color-logo-active:         var(--color-red-120);
  --color-logo-active-shadow:  var(--color-red-090-shadow);
  
  /* Couleurs du menu de navigation */
  --color-nav-box-text:           var(--color-gris-230);
  --color-nav-box-default:        var(--color-blue-120);
  --color-nav-box-visited:        var(--color-blue-120);
  --color-nav-box-default-shadow: var(--color-blue-090-shadow);
  --color-nav-box-hover:          var(--color-blue-090);
  --color-nav-box-hover-shadow:   var(--color-blue-060-shadow);
  --color-nav-box-active:         var(--color-red-120);
  --color-nav-box-active-shadow:  var(--color-red-090-shadow);
 
  /* Couleurs du titre de la page <h1> sur une image en background */
  --color-hero-title:        var(--color-gris-230);
  --color-hero-title-shadow: var(--color-gris-030-shadow);

/* Couleurs du menu de navigation */
  --color-cta-box-text:           var(--color-gris-230);
  --color-cta-box-default:        var(--color-orange-120);
  --color-cta-box-visited:        var(--color-orange-120);
  --color-cta-box-default-shadow: var(--color-orange-090-shadow);
  --color-cta-box-hover:          var(--color-orange-090);
  --color-cta-box-hover-shadow:   var(--color-orange-060-shadow);
  --color-cta-box-active:         var(--color-red-120);
  --color-cta-box-active-shadow:  var(--color-red-090-shadow);

  /* Couleurs des titres */
  --color-headings: var(--color-gris-030);
    
  /* Couleurs des textes */
  --color-text-body:   var(--color-gris-060);
  --color-text-footer: var(--color-gris-220);
  
  /* Couleurs des liens */
  --color-link-default: var(--color-blue-090);
  --color-link-visited: var(--color-blue-090);
  --color-link-hover:   var(--color-blue-060);
  --color-link-active:  var(--color-red-120);
  
  /* Couleur de la sidebar */
  --color-sidebar-border: var(--color-gris-180);
  --color-sidebar-shadow: var(--color-gris-030-shadow);

}


html {
  font-size: 100%; /* 1rem = 16px (par défaut du navigateur) - Permet une meilleure accessibilité pour le zoom. */
  line-height: 1.5; /* Hauteur de ligne générale pour une bonne lisibilité. */
  -webkit-text-size-adjust: 100%; /* Empêche le redimensionnement automatique du texte sur mobile. */
  text-size-adjust: 100%; /* Pour les autres navigateurs */
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-background-body);
  color: var(--color-text-body);
  font-family: var(--font-text);
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

h1 { /* <h1> réservé pour le titre de la page Apparaissant sur le hero */
  margin-top: 0;
  font-family: var(--font-title-page);
  color: var(--color-headings);
  font-size: 2rem;
}

h2 { /* <h2> réservé pour le titre du header faisant office de logo */
  font-family: var(--font-logo);
  color: var(--color-logo-default);
  font-size: 2.5rem;
  }
h2 a {
  color: var(--color-logo-default);
  text-decoration: none;
  text-shadow: 0.3rem 0.3rem 3px var(--color-logo-default-shadow);
}
h2 a:visited{
  color: var(--color-logo-visited);
}
h2 a:hover,
h2 a:focus {
  color: var(--color-logo-hover);
  text-shadow: 0.3rem 0.3rem 3px var(--color-logo-hover-shadow);
}
h2 a:active {
  color: var(--color-logo-active);
  text-shadow: 0.2rem 0.2rem 2px var(--color-logo-active-shadow);
  transform: translateY(0.1rem);
}

h3, h4, h5, h6 {  
   font-family: var(--font-headings);
   font-weight: bold;
   color: var(--color-headings);
   font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
  font-size: 1.125rem;
}
h6 {
  font-size: 1rem;
}

p {
  margin-bottom: 1rem;
}

a {
  color: var(--color-link-default);
  text-decoration: none; 
}
a:visited {
  color: var(--color-link-visited);
}
a:hover,
a:focus {
  color: var(--color-link-hover);
  text-decoration: underline;
}

a:active {
  color: var(--color-link-active);
}

ul {
  list-style: disc;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

ol {
  list-style: decimal;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

li {
  padding-left: 0.5rem;
  margin-bottom: 0.5rem;
}