/* style .css : feuille de style pour le site de l'Amicale des anciens de saint-jo
Auteurs : Bibi Goudens
Version grid
*/

/* Précaution pour viewport. Comme cela ne fonctionne pas encore,
on est obligé de prendre cette précaution dans le HTML. Laissons-le là pour le futur.
@viewport { width: device-width;
	        zoom: 1;
          }
  */

/* variables de couleur */
:root{
	--couleurNav1:#d7bb62; /* Fond nav */
	--couleurNav2:#f1f3d7;   /* Fond hover nav */
	--couleurNav3: #357c0f; /* couleur texte hover */
	--couleurFond1:rgba(215, 187, 98, .5); /* fond header */
	--couleurFond2:rgba(191,196,98,.3); /* fond footer */
	--couleurTexte1:#3c2f0f;
	--couleurTexte2:rgb(80,69,51);
	--couleurTexte3:black;
	}



/* Corps de base et fond */
HTML {font-size:16pt;} /* taille de base sur laquelle seront fondés tous les valeurs en rem */

BODY.site {          /* définition par défaut de la page. Eventuellement modifiable selon les parties du site. */
	font-family: "Verdana", "Arial", "Helvetica" ;
	line-height:1.5rem;
	}

div.page {display: inline-block;
  position: relative;
  width:100%;
  background:transparent;}

/* Effet pour fond en filigrane */
div.page::before {
  content: "";
  display: block;
  position: absolute;
  margin:-5%;
  z-index: -1;
  width: 110%;
  height: 108%;
  background:rgba(255,255,255,0.6); /* du blanc translucide */
  }

/* barre de navigation */
iframe {
	position:fixed;
	top:0px;
	width:100%;
	height:auto;
	margin:-.2rem 0;
	padding:0 0;
	border:none;}

nav {
	display:flex;
	justify-content:space-around;
	flex-wrap:wrap;
	width:100%;
	overflow-y:visible;
	font-size:1.5rem;
	background-color:var(--couleurNav1);
	background: linear-gradient(125deg, rgb(145,191,23) 0%, rgb(219,224,125) 50%, rgb(241,219,176) 100%);
	}

nav a {
	border:1px solid #3c2f0f;
	border-radius:.6rem;
	color:var(--couleurTexte1);
	text-shadow: 2px 2px 2px white;
	background-color:var(--couleurNav1);
	background: linear-gradient(13deg, rgb(145,191,23) 0%, rgb(219,224,125) 50%, rgb(241,219,176) 100%);
	font-size:1rem;
	text-decoration:none;
	vertical-align: middle;
    overflow: hidden;
	width:auto;
    text-align: center;
	padding:.1rem .3rem;
	}

nav a:hover {
	color:var(--couleurNav3);
	background-color:var(--couleurNav2);
	font-size:1.5rem;
	}

/* menu secondaire */
.menu2 {display:flex;
	justify-content:space-around;}

.menu2 a {text-decoration:none;
		color:var(--couleurNav1);
		height:2rem;
		padding:.1rem .5rem;
		border:1px solid var(--couleurNav2);
		border-radius: 2rem 1rem;
		background-color:var(--couleurNav2);
		background: linear-gradient(13deg, rgb(145,191,23) 0%, rgb(219,224,125) 50%, rgb(241,219,176) 100%);
		text-shadow: 2px 2px 2px black;
		}

.menu2 a:hover {font-size:1.5rem;}

/* header */
header {
	display:flex;
	justify-content:space-around;
	padding:2rem 1rem;
	background-color:var(--couleurFond1);
	margin:0;
	}


/* footer */

footer {
	text-align:center;
	background:var(--couleurFond2);
	margin:1rem 0;}

/* corps principal */

h1 {font-size:1.5rem;
	text-align: center;}

h2 {font-size:1.5rem;
	margin:.5rem 0 0 -.2rem;}

section {padding:0 1rem;}

section:nth-of-type(odd) {background-color:rgba(255,255,224,.6)}

section:nth-of-type(even) {background-color:rgba(214,255,214,.6)}

p {	color:var(--couleurTexte2);
	font-size: 1.2rem;
	text-align: left;
	padding: 1rem 0;
	margin:0;
	}

p::first-letter {font-size:1.5rem;} /* la première lettre en lettrine */

.P1 {list-style-type : disc ;} /* présentation par défaut d'une ligne , liste à puces */

img {width:100%;           /* définition générique des images */
	max-width:100%;
	min-width:2%;
	min-height:2%;
	margin: 0;
	}

img.ico {width:1.5rem; /* dimension pour les icones */
		height:1.5rem;}


/* gestion du quadrillage (les grids) */

 .grille {display:grid; /* définition du grid générique */
	grid:auto auto / auto auto auto;
	grid-template-areas : "g1 princ d1"
						  "g2 princ d2";
		}

 /* affectation des classes aux régions du grid  */

.gauche {grid-area:g1;
		width:100%;
	}

.droite {grid-area:d1;
		width:100%;
	}

.text {grid-area:princ;
		padding:0 .5rem;
		flex-shrink:1;
		}


/* bouton de retour haut de page */
a.haut {position:fixed;
			bottom:2rem;
			right:1rem;
			font-size:.5rem;
			line-height:.5rem;
			height:2.5rem;
			width:2.5rem;
			border:.05rem solid black;
			border-radius:1.25rem;
			text-align:center;
			background-image:radial-gradient(#c6d56e, #f1f3d7);
			text-decoration:none;
			color:black;
}



/* page mentions légales */
.legal {color:var(couleurTexte2);
		font-size:.7rem;}

/* bouton de retour page d'accueil */
a.retour {position:fixed;
			top:1rem;
			right:1rem;
			font-size:.8rem;
			text-align:center;
			line-height:.8rem;
			padding:.5rem .5rem;
			height:1.6rem;
			background-image:radial-gradient(rgb(255,255,224), rgb(214,255,214));
			text-decoration:none;
			color:black;
			border:.2rem solid black;
			border-radius:4rem;
}
/* page glossaire */
#main p {padding:0 0 .2rem 0;}

/* adaptabilité */
@media (max-width:1205px){html{font-size:14pt;}}
@media (max-width:900px){
	html{font-size:12pt;}
	.grille {display:grid;
			grid:auto auto / auto auto auto;
			grid-template-areas : "g1 princ princ"
								  "g2 princ princ";
			 }
	.droite {grid-area:g2;}
	}

/* astuce pour adresse avec anti-spam*/
.arobase::before{content:"\000040"}

@media (max-width:601px){
	html {font-size:10pt;}
	iframe {top:93% ;
			left:0px;}
	nav a {
		font-size:1.2rem;}
	nav a:hover {font-size:1.7rem;}
	.grille {display:grid;
			grid:auto auto / 0% auto 0%;
			}
	.gauche, .droite {display:none;}
	a.haut {bottom:5rem;}
}

@media (max-width:301px){html{font-size:8pt;}}