@charset "utf-8";
@import url("../polices/NothingYouCouldDo/stylesheet.css");


/* MISE EN FORME DES POLICES AVEC PRIORITE POUR TELEPHONE MOBILE */


.TXT-NAV-HAUT a {
	color: black;
	text-decoration:none;
	font-size: 5vw; /* pour menu burger sur téléphone */
}
.TXT-TITRE-PRINCIP-REAL {
	background-color: rgba(0, 0, 0, 0.5);
	width: 60vw; 
	margin: auto;
	margin-top: 4vw; 
	font-size: 5vw; 
	text-align: center;
	/* color: red;*/
	color: white;
	font-family: lato;
}
.TXT-TITRE-SECOND-REAL {
	background-color: rgba(0, 0, 0, 0.5);
	width: 60vw; 
	margin: auto;
	margin-top: 2vw;
	font-size: 4vw; 
	text-align: center;
	color: white;
	font-family: NothingYouCouldDo;
}
h1 {
	font-family: lato;
	font-size: 5vw;
}
h2 {
	font-family: lato;
	font-size: 5vw;
}
.TXT-GEN {
	font-family: lato;
	font-size: 4vw; 
	color: black;
}
.TXT-GEN-GRAND {
	font-family: lato;
	font-size: 0.5rem; 
	color: white;
}
.TXT-NAV-BAS-REAL {
	font-family: lato;
	font-size: 2rem;
	color: black;
}

/*  ****************************************************************************************

FIN DE LA PARTIE COMMUNE AVEC MISE EN PAGE POUR TELEPHONE EN MODE PORTRAIT  (PARTIE 1)

****************************************************************************************   */

/*  ****************************************************************************************

DEBUT DE LA PARTIE POUR TABLETTES EN MODE PORTRAIT (PARTIE 2)

On conserve le menu burger 
On réduit un peu la taille des polices


@media screen and (orientation: portrait) and (max-aspect-ratio: 0.6) and (max-resolution: 229dpi)


modif :  90 dpi au lieu de 229

****************************************************************************************   */

@media screen and (orientation: portrait) and (max-resolution: 90dpi) {
	
.TXT-NAV-HAUT a {
	font-size: 1.2rem; /* pour menu burger sur téléphone */
}
.TXT-TITRE-PRINCIP-REAL {
	width: 16rem; 
	margin-top: 4rem; 
	font-size: 1.3rem; 
	/*color: yellow;*/
	color: white;
}
.TXT-TITRE-SECOND-REAL {
	width: 20rem; 
	margin-top: 2rem;
	font-size: 1.6rem; 
	color: white;
}
h1 {
	font-family: lato;
	font-size: 5vw;
}
h2 {
	font-family: lato;
	font-size: 5vw;
}
.TXT-GEN {
	font-size: 0.6rem; 
}
.TXT-NAV-BAS-REAL {
	font-size: 1.2rem;
}	
}
	
/*  ****************************************************************************************

FIN DE LA PARTIE POUR TABLETTES EN MODE PORTRAIT (PARTIE 2)

****************************************************************************************   */
	
/*  ****************************************************************************************

DEBUT DE LA PARTIE POUR ECRANS EN MODE PAYSAGE, DE 1280 A 1536 PIXELS DE LARGEUR 
c'est le modèle de base pour une orientation paysage (PARTIE 3)

On supprime le menu burger
On réduit encore un peu la taille des polices (par rapport aux téléphones, puis aux tablettes)
On conserve des marges fines sur les côtés
On passe sur deux colonnes au lieu d'une seule

@media screen and (orientation: landscape)

****************************************************************************************   */

@media screen and (orientation: landscape)  {

.TXT-NAV-HAUT a {
	font-size: 1.1rem;
}
.TXT-TITRE-PRINCIP-REAL {
	width: 20em; 
	margin-top: 5rem; 
	font-size: 1.7rem; 
	/*color: blue;*/
	color: white;
}
.TXT-TITRE-SECOND-REAL {
	width: 30rem; 
	margin-top: 2rem;
	font-size: 2.2rem;
}
.TXT-GEN {
	font-size: 1rem;
}
.TXT-NAV-BAS-REAL {
	font-size: 1.2rem;
}
.TXT-NAV-HAUT a {
	color: white;  /*  variante spéciale car le fond est sombre */
}	
}

/*  ****************************************************************************************

FIN DE LA PARTIE POUR ECRANS 1280 1536 EN MODE PAYSAGE - modèle de base pour paysage (PARTIE 3)

****************************************************************************************   */

/*  ****************************************************************************************

DEBUT DE LA PARTIE POUR ECRANS EN MODE PAYSAGE, DE 1537 A 1920 PIXELS DE LARGEUR 
 (PARTIE 4)

On supprime le menu burger
On réduit encore un peu la taille des polices (par rapport aux téléphones, puis aux tablettes)
On conserve des marges fines sur les côtés
On passe sur deux colonnes au lieu d'une seule
On reserre les commentaires textes et on met un encadré fin


@media screen and (orientation: landscape) and (mix-width: 1600px) and (max-width: 1920px)


****************************************************************************************   */

@media screen and (orientation: landscape) and (min-width: 1537px) and (max-width: 1920px) {
	
.TXT-TITRE-PRINCIP-REAL {
	width: 20rem; 
	margin-top: 5rem; 
	font-size: 1.7rem;
	 /* color: palevioletred; */
	color: white;
}
.TXT-TITRE-SECOND-REAL {
	width: 30rem; 
	margin-top: 2rem;
	font-size: 2.2rem;
}
.TXT-GEN {
	font-size: 1rem;
}
.TXT-NAV-BAS-REAL {
	font-size: 0.9rem;
}
}


/*  ****************************************************************************************

FIN DE LA PARTIE POUR ECRANS 1600 1920 EN MODE PAYSAGE (PARTIE 4)

****************************************************************************************   */


/*  ****************************************************************************************

DEBUT DE LA PARTIE POUR TELEPHONES EN MODE PAYSAGE - évolution de la partie 3 (PARTIE 5)

Inutile de supprimer le menu burger car il est déjà supprimé dans la base paysage (partie 3)
On affiche des polices grandes et lisibles pour un téléphone
Marge inchangées par rapport à la partie 3
Toujours sur 2 colonnes comme en partie 3 (même si c'est un téléphone, car là on est en paysage)


@media screen and (orientation: landscape) and (min-resolution: 230dpi)


****************************************************************************************   */

@media screen and (orientation: landscape) and (min-resolution: 230dpi) {

.TXT-TITRE-PRINCIP-REAL {
	width: 16rem; 
	margin-top: 3rem; 
	font-size: 2.0rem; 
	/*color: violet;*/
	color: white;
}
.TXT-TITRE-SECOND-REAL {
	width: 20rem; 
	margin-top: 2rem;
	font-size: 2.2rem; 
}
.TXT-GEN {
	font-size: 1em; 
}
}

/*  ****************************************************************************************

FIN DE LA PARTIE POUR TELEPHONES EN MODE PAYSAGE - évolution de la partie 3 (PARTIE 5)

****************************************************************************************   */


/*  ****************************************************************************************

DEBUT DE LA PARTIE POUR TABLETTE EN MODE PAYSAGE - évolution de la partie 3 (PARTIE 6)

Inutile de supprimer le menu burger car il est déjà supprimé dans la base paysage (partie 3)
Police légèrement plus grandes que l'écran moyen
Marge inchangées par rapport à la partie 3
Toujours sur 2 colonnes comme en partie 3

Le media query inclue un ajout avec ratio max 4/3 et grande définition, pour viser les nouveaux IPADS.  On a donc une première partie LANDSCAPE max 229dpi max 1279px et une autre, alternative, avec ratio max 4/3 et min 1921px.  On doit donc formuler DEUX critères completes, séparés d'une virgule qui correspond à un "ou" entre query complètes.


@media screen and (orientation: landscape) and (max-resolution: 229dpi) and (max-width: 1279px), screen and (orientation: landscape) and (max-aspect-ratio: 1.4) and (min-width: 1921px) {

****************************************************************************************   */

@media screen and (orientation: landscape) and (max-resolution: 229dpi) and (max-width: 1279px), screen and (orientation: landscape) and (max-aspect-ratio: 10/7) and (min-width: 1921px) {

.TXT-NAV-HAUT a {
	font-size: 0.9em; 
}
.TXT-TITRE-PRINCIP-REAL {
	width: 16em; 
	margin-top: 2rem; 
	font-size: 1.3rem; 
	/*color: greenyellow;*/
	color: white;
}
.TXT-TITRE-SECOND-REAL {
	width: 20rem; 
	margin-top: 1rem;
	font-size: 1.6rem; 
}
.TXT-GEN {
	font-size: 0.6rem;
}
.TXT-NAV-BAS-REAL {
	font-size: 0.9rem;
}
}

/*  ****************************************************************************************

FIN DE LA PARTIE POUR TABLETTES EN MODE PAYSAGE - évolution de la partie 3 (PARTIE 6)

****************************************************************************************   */


/*  ****************************************************************************************

DEBUT DE LA PARTIE TRES GRANDS ECRANS > 1921px EN PAYSAGE - évolution de la partie 3 (PARTIE 7)

Inutile de supprimer le menu burger car il est déjà supprimé dans la base paysage (partie 3)
Police plus petite en proportion
Marge réduites sur les côtés
Toujours sur 2 colonnes comme en partie 3

Le media query utilise comme critère efficace la résolution, sachant que même les tous nouveaux écrans APPLE RETINA 6K n'ont que 218 DPI, tandis que les téléphones ont strict mini 250 dpi (plutôt 300 ou 400 en général).

@media screen and (orientation: landscape) and (min-width: 1921px) and (max-resolution: 229 dpi)

MODIF : 90 dpi au lieu de 229

****************************************************************************************   */

@media screen and (orientation: landscape) and (min-width: 1921px) and (max-resolution: 90dpi) {

.TXT-NAV-HAUT a {
	font-size: 1.2rem; 
}
.TXT-TITRE-PRINCIP-REAL {
	width: 20em; 
	margin-top: 2rem; 
	font-size: 2.5rem; 
	color: white;
}
.TXT-TITRE-SECOND-REAL {
	width: 20rem; 
	margin-top: 1rem;
	font-size: 4rem; 
}	
.TXT-GEN {
	font-size: 1rem;
}
.TXT-NAV-BAS-REAL {
	font-size: 1.2rem;
}
}

/*  ****************************************************************************************

FIN DE LA PARTIE POUR TRES GRANDS ECRANS >1921px PAYSAGE - évolution de la partie 3 (PARTIE 7)

****************************************************************************************   */

/* Page CSS écrite par Alexandre KITTEL pour son propre site IN SITU, mars 2024 */