/* === Styles de base === */
/* #03045F #7C9DBD #0078B8 #00B6DA  #93E1F0 #CEF1F9 #DC3C35 #FEC606*/
body {  margin: 0; font-family: Arial, sans-serif;  padding: 5px; background: #f4f4f4; line-height: 1.0;justify-content: center;} /* display: flex;*/
/* Container centré */
.container {  text-align: center;}
header, footer { background-color: #4A66AC;  color: white; text-align: center;padding: 0.1em; }/**/

nav { background-color: #03045F;}
nav ul { list-style: none; margin: 0;  padding: 0;  display: flex;  flex-direction: row;  justify-content: center;}
nav ul li {  margin: 0;}
nav ul li a {  display: block;  padding: 0.5em;  color: white;  text-decoration: none;}
nav ul li a:hover { background-color: #0078B8;}

nav.horizontal-vert { background-color: green;}
nav.horizontal-vert ul { list-style: none; margin: 0;  padding: 0;  display: flex;  flex-direction: row;  justify-content: center;}
nav.horizontal-vert ul li {  margin: 0;}
nav.horizontal-vert ul li a {  display: block;  padding: 0.5em;  color: white;  text-decoration: none;}
nav.horizontal-vert ul li a:hover { background-color: limegreen;}

main {  padding: 20px;    background: white; text-align: center; margin: auto;}/*max-width: 1000px;  */

/* Titre rouge */ h2.rouge {    color: red;} /* <h1 class="rouge">Titre rouge</h1> */
/* Titre bleu */h2.noir {    color: black;}
/* Titre vert */h2.vert {    color: green;}

input[type="text"] {  width: 100%;  max-width: 500px; /* limite la largeur sur les grands écrans */ padding: 0.75em;  font-size: 1em;  border: 2px solid #03045F;  border-radius: 5px;  box-sizing: border-box;  transition: all 0.3s ease;}
input[type="password"] {  width: 100%; max-width: 500px; /* limite la largeur sur les grands écrans */ padding: 0.75em;  font-size: 1em;  border: 2px solid #03045F;  border-radius: 5px;  box-sizing: border-box;  transition: all 0.3s ease;}
textarea { width: 100%; max-height: none; max-width: 80%; padding: 10px; font-size: 16px; border: 2px solid #03045F; border-radius: 6px; justify-content: center; resize: vertical; 
	/* Permet de redimensionner verticalement uniquement */ transition: border-color 0.3s, box-shadow 0.3s;
    }
/* Style général du select */
select {   padding: 8px 12px;  font-size: 16px;  border: 2px solid #03045F;  border-radius: 6px;  background-color: #fffff;  color: #03045F;  cursor: pointer;
  transition: 0.3s;}
/* Effet au survol */
select:hover {   border-color: #0078B8;   background-color: #ffffff; }
/* Style des options */
option {   padding: 8px;   font-size: 15px; }


.btn-submit {   background-color: #0078B8;  color: white;  border-color:#03045F; padding: 10px 20px;  border: yes;  border-radius: 10px;  font-size: 16px;  cursor: pointer;  transition: background-color 0.3s ease; }
.btn-submit:hover {  background-color: #00B6DA;}



/* Lien bleu stylisé */
.lien-bleu {  display: inline-block;  padding: 6px 12px;  background-color: #007BFF;  color: white;  text-decoration: none;  font-size: 18px;  border-radius: 8px; transition: background-color 0.3s ease, transform 0.2s ease;}
/* Effet au survol */
.lien-bleu:hover {  background-color: #0056b3;  transform: scale(1.05);}

/* Lien vert stylisé */
.lien-vert {  display: inline-block;  padding: 6px 12px;  background-color: green;  color: white;  text-decoration: none;  font-size: 18px;  border-radius: 8px; transition: background-color 0.3s ease, transform 0.2s ease;}
/* Effet au survol */
.lien-vert:hover {  background-color: limegreen;  transform: scale(1.05);}

/* Lien rouge stylisé */
.lien-rouge {  display: inline-block;  padding: 6px 12px;  background-color: #DC3C35;  color: white;  text-decoration: none;  font-size: 18px;  border-radius: 8px;
  transition: background-color 0.3s ease, transform 0.2s ease;}
/* Effet au survol */
.lien-rouge:hover {  background-color: #DC3C35;  transform: scale(1.05);}

/*################################## CALENDRIER ###################################################*/
   .calendrier { width: 100%; max-width: 100%; background: white; border-radius: 12px;  box-shadow: 0 4px 15px rgba(0,0,0,0.1); } /*overflow: hidden;*/
   
	/*titre mois*/
	.header_cal { display: flex;  align-items: center; background: #03045F; color: white; padding: 0px; font-size: 20px;} /*fond titre mois*/
	/*justify-content: space-between;*/
    .header_cal a { color: white;  text-decoration: none; font-weight: bold; padding: 5px 10px; } 
    
	table {width: 100%; border-collapse: collapse; text-align: center; }
    th { background: #eee; padding: 10px; } /*ligne des jours (l m m j v s d) */
    td {height: 45px; padding: 5px; border: 1px solid grey; font-size: 20px;}/*case de date*/
	td.today { background: orange; color: white; border-radius: 30px; font-weight: bold;font-size: 20px;}/*date aujourd'hui*/
	
	/* texte_lien NOIR sur fond BLANC */
.nw {  display: inline-block;  padding: 6px 12px; color: black; background-color: white;    text-decoration: none;  font-size: 20px;  border-radius: 8px; transition: background-color 0.3s ease, transform 0.2s ease;}
.nw:hover {  background-color: yellow;  transform: scale(1.05);}
	
	/* texte_lien ROUGE sur fond BLANC */
.rw {  display: inline-block;  padding: 6px 12px; color: red; background-color: white;    text-decoration: none;  font-size: 20px;  border-radius: 8px; transition: background-color 0.3s ease, transform 0.2s ease;}
.rw:hover {  background-color: yellow;  transform: scale(1.05);}

	/* texte_lien ORANGE sur fond BLANC */
.gw {  display: inline-block;  padding: 6px 12px; color: green; background-color: white;    text-decoration: none;  font-size: 20px;  border-radius: 8px; transition: background-color 0.3s ease, transform 0.2s ease;}
.gw:hover {  background-color: yellow;  transform: scale(1.05);}



	/* texte_lien NOIR sur fond BLEU */
.nb{  display: inline-block;  padding: 6px 12px; color: black; background-color: lightsteelblue;    text-decoration: none;  font-size: 20px;  border-radius: 8px; transition: background-color 0.3s ease, transform 0.2s ease;}
.nb:hover {  background-color: yellow;  transform: scale(1.05);}

	/* texte_lien ROUGE sur fond BLEU */
.rb {  display: inline-block;  padding: 6px 12px; color: red; background-color: lightsteelblue;    text-decoration: none;  font-size: 20px;  border-radius: 8px; transition: background-color 0.3s ease, transform 0.2s ease;}
.rb:hover {  background-color: yellow;  transform: scale(1.05);}

	/* texte_lien ORANGE sur fond BLEU */
.gb {  display: inline-block;  padding: 6px 12px; color: green; background-color: lightsteelblue;    text-decoration: none;  font-size: 20px;  border-radius: 8px; transition: background-color 0.3s ease, transform 0.2s ease;}
.gb:hover {  background-color: yellow;  transform: scale(1.05);}


/* === Media Query pour smartphones (écran max 768px ou 480px) === */
@media (max-width: 480px) {
nav ul {   flex-direction: column; }
nav ul li a {  text-align: center;  padding: 1em; border-bottom: 1px solid #666; }

nav.horizontal-vert ul {   flex-direction: column; }
nav.horizontal-vert ul li a {  text-align: center;  padding: 1em; border-bottom: 1px solid #666; }	
	
main { padding: 10px; }
@media (min-width: 601px) and (max-width: 1024px) {  input[type="text"] {    font-size: 1.1em;    max-width: 95%;  }}	
textarea {font-size: 12px;}
.lien-bleu {    font-size: 16px;    padding: 5px 10px;  }
.lien-rouge {    font-size: 16px;    padding: 5px 10px;  }	
.header_cal { flex-direction: column; gap: 5px; text-align: center; }
        th, td { padding: 0px; }
}