@import url('https://fonts.googleapis.com/css2?family=Kalnia&family=Open+Sans&display=swap');

/* Style de base pour le corps de la page */
body {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.6;
  color: #333; /* Couleur de texte par défaut */
  padding:0;
  margin:0;
}

main {
	max-width:1000px;
	margin:auto;
}

/* Style pour le titre principal */
h1 {
  margin:0;
padding:5vh 0;  
  text-align: center;
  line-height:2em;
  font-family: 'Kalnia', serif;
}

h2 {
   font-family: 'Kalnia', serif;
}

/* Gestion de l'en-tête */
header {
	margin:0;
	
	/* min-height:30vh; */
	background-image:url(../images/zen-background.jpg);
    background-repeat:no-repeat;
	background-attachment:fixed;
	background-size:cover;
	background-position:center bottom;
	
}


/* Style pour la navigation */
nav ul {
  list-style: none;
  text-align: center;
  background-color: #333; /* Couleur de fond pour la barre de navigation */
  padding: 10px 0;
}

nav ul li {
  display: inline-block;
  padding: .5em 1.5em;
  border-radius: 5px;
}

nav ul li a {
  text-decoration: none;
  color: #fff; 
  font-family: 'Kalnia', serif;

}

nav ul li a:hover {
  background-color: #94c42b; /* Couleur de fond au survol */
}

/* Gestion des sections atteintes par un target */
section:target {border:1px solid #94c42b;}
section:target h2 {color:#94c42b;}


/* Style pour les liens retour en haut */
a.menu {
  display: block;
  /* Lui donne une propriété de block permettant de le dimensionner */
  width:10em;
  /* Dimension > impossible sans display:block; */
  margin:auto;
/*   centrage horizontal (car block et width + margin:auto; */

  margin-top: 1.5em;
  text-decoration: none;
  color: #fff; 
  font-family: 'Kalnia', serif;
  background-color: #333;
  padding: .5em 1.5em;
  border-radius: 5px;
}

a {
/* Style pour les liens de contenu*/

color:#333; 
  font-family: 'Kalnia', serif;
}

section a[href$=".pdf"]:hover {
	color:#94c42b;
	
}
/* Style pour les sections */
section {
  padding: 3em 2em;
}

section:nth-of-type(even) {
	background-color: #f0f0f0;
	margin:0;
}

section h2::first-letter {
	color:#94c42b;
	font-size:2em;
}

figure {
  text-align: center;
  /* centrage des images */
}

article img, iframe {
  border:1px solid #333;	
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);

   /* Effet d'ombre sur les images */
  
  
}

/* Style pour les pieds de section */
article footer {
  font-style: italic;
  text-align: center;
  margin-top: 10px;
}

/* Style pour le tableau */

table{
    border-collapse:separate;
	margin:auto;

}

thead th{
    padding:15px;
    color:#fff;
    text-shadow:1px 1px 1px #568F23;
	border:1px solid #93CE37;
    border-bottom:3px solid #9ED929;
    background-color:#9DD929;
	border-top-left-radius:5px;
    border-top-right-radius:5px;
}

/* désactiver l'affichage du fond de la cellule vide 
(La pseudo-classe :empty correspond à un élément qui n'a aucun enfant) */

thead th:empty{
    background:transparent;
    border:none;
}


/* Gestion du pied du tableau */

tfoot td{
    color: #9CD009;
    font-size:2em;
    text-align:center;
    padding:10px;
    text-shadow:1px 1px 1px #444;
	background-color:white;
}
tfoot th{
    color:#9DD929;
	background-color:white;
}

/* Gestion du corps du tableau */

tbody th{
    text-align:right;
	padding-right:20px;
}

tbody td{
    padding:15px;
    text-align:center;
    background-color:#DEF3CA;
    border: 2px solid #E7EFE0;
    color:#666;
    text-shadow:1px 1px 1px #fff;
}

/* Gestion de l'image check.png (les 2 dernières lignes)*/

tbody tr:nth-last-child(-n+2) td
 {
	background-image:url(../images/check0.png);
	background-repeat:no-repeat;
	background-position:center center;
	padding:25px;
}

tbody th:hover ~ td {
/*Le signe « ~ » indique un sélecteur de frère adjacent indirect,il permet de cibler tous les frères d’un élément ciblé, ici les td frêres de th  */

    text-shadow:1px 1px 1px #568F23;
	background-color: #fff;

}


/* Style pour le formulaire */

form {
  /* background: #fff; */
  /* padding: 20px 30px; */
  /* border-radius: 8px; */
  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
  width: 100%;
  max-width: 800px;
  margin:auto;
}

label {
  display: block;
  font-weight: bold;
  margin: 5px;
}


input, textarea, select {
  width: 100%;
  margin-bottom:5px;
  padding: 0.5rem;
/*   font-size: 16px; */
  /* margin-top: 1rem; */
  border: 1px solid #ddd;
  border-radius: 4px;
  
}

/* Cible les <label> qui ont un élément frère direct (adjacent) marqué comme required et insère un contenu (via ::before) avant ces <label>. */
label:has(+ :required)::before {
    content: '* ';
}


input:focus, textarea:focus, select:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

input:invalid {
  border-color: #94c42b;
}

input[type="submit"] {
	background-color:#94c42b;
	
}
