/*
Theme Name: valise
Theme URI: https://valentinalizer.com
Author: Valentin ALIZER
Author URI: https://valentinalizer.com
Description: Thème réalisé pour le site de Valentin Alizer.
Requires at least: WordPress 5.0
Version: 1.0
*/

html {
	font-family: Helvetica,Arial,sans-serif; 
	font-size:calc(7px + .2vw); /* je définie une taille de typo sur laquelle seront basé les rem de la page */
}

body {
	background-color: #e8e8e8;
}

header {
	
}

/* Structure */
/* 2 variations de structures */

/* For mobile phones: */
	@media only screen and (max-width: 768px) {
		
		body {
			font-size: 2.5rem;
		}
        
        
        h2{
            font-size: 2.5rem;
            font-weight: bold;
        }
		
		.ligne{
			display: flex;
			flex-direction: column;
		    justify-content: space-between;
		
			margin-bottom: 4VH;
		    border: solid red pink;
		}
		
	}
	
/* For Desktop */
	@media only screen and (min-width: 768px) {
		
		body {
			font-size: 1.5rem;
		}

        h2{
            font-size: 1.5rem;
            font-weight: bold;
        }
		
		.ligne{
			display: flex;
			flex-direction: row;
		    justify-content: space-between;
		
			margin-bottom: 4VH;
		    border: solid red pink;
		}
	}
	


.header .ligne{
    flex-wrap: wrap;
}

.single .post .ligne{
    flex-wrap: wrap-reverse;
}

.archive .post .ligne{
    flex-wrap: wrap;
}

.header .ligne .cellule, .archive .post .ligne .cellule{
	padding-left: 1vw;
	padding-right: 1vw;	

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
}



.un-tier{
	flex: 1;
	min-width: 150px;
}

.deux-tiers{
	flex: 2;
	min-width: 300px;
}

.cellule{
	padding-left: 1vw;
	padding-right: 1vw;	
    margin-bottom: 1vw;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    
    /* border: solid yellow 1px; */
}

.cellule-photo-oeuvre{
	padding-left: 1vw;
	padding-right: 1vw;	

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    
    /* border: solid blue 1px; */
}

.cellule-photo-oeuvre img{
	width: 100%;
	height: auto; 
}

.dans-cellule{
    /* border: solid blue 1px; */
}

/* Menu */
/* Deux types de menus, un avec de gros boutons pour les téléphones et un avec de discrets textes pour les ordis*/

/* For mobile phones: */
@media only screen and (max-width: 768px) {
	
	.menu{
		list-style:none;
		list-style-type: none;
		
		margin: 0;
		padding: 0;
        
        	display: flex;
	    flex-direction: column;
        justify-content: space-around;

        margin-top: 3VH;

        
        font-size:6vw; /* je définie une taille de typo pour le menu vu sur le tél*/
	}
	
    .menu li{
        margin-bottom: 1VH;  
    }
    
    .menu li a{
        padding: 0.5VH;
        padding-right: 3VH;

        background-color: #000000;
        color: #ffffff;
        text-align: center;
        text-decoration: none;
        text-transform: lowercase;
    }
    
    .menu li a:hover {
        opacity: 0.6;
    }
}

/* For Desktop */
@media only screen and (min-width: 768px) {
	
	.menu{
		list-style:none;
		
		margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 1VH;
		padding: 0;
	}
	
	.menu li a{
		color: black;
		text-decoration: none;
		text-transform: lowercase;
	}
	
	.menu li a:hover{
		color: black;
		text-decoration: underline;
	}
	
	.menu-item-object-category {
		/* font-weight: bold; <- pour mettre les catégories dans les menus en gras. */
	}
	
	.menu-item-object-post {
		
	}
	
}

/* Contenu */

.logo-top{
	height: 7VH;
	/* border: solid red 1px; */
}

.logo-top img{
	height: 100%;
	max-width: 90vw;
}

p{
	margin-top: 0px;
	margin-bottom: 0.4rem;
}

h2{
	margin-top: 1.3rem;
	margin-bottom: 0.4rem;
}

a{
	color: black;
	text-decoration: underline;
}

a:hover{
	color: black;
	text-decoration: none;
}


/* Oeuvre */

.titre-oeuvre {
	font-weight: bold;
	font-style: italic;
}

.annee-oeuvre{
	font-weight: bold;
}

.medium-oeuvre{
	
}

.collaborateurs-oeuvre{
	
}

.archive .post .ligne .cellule .dans-cellule .collaborateurs-oeuvre{
	margin-bottom: 0rem;
}

.commentaire-oeuvre{
	
}

.single .post .ligne .cellule .post__content {
	margin-top: 3rem;
}

/* Cartel mis en forme avec différentes tailles de typo :

.annee-oeuvre{
	font-weight: bold;
}

.medium-oeuvre{
	font-size: 1.1rem;
}

.collaborateurs-oeuvre{
	font-size: 1.1rem;
	margin-bottom: 4rem;
}

.archive .post .ligne .cellule .dans-cellule .collaborateurs-oeuvre{
	font-size: 1.1rem;
}

*/

/* Zone gauche des pages */

.image-zone-gauche img {
	width:100%;
	height:auto; 
	
	margin-top: 1.3rem;
}

.texte-zone-gauche {
	width:100%;
	height:auto; 
	
	margin-top: 1.3rem;
}





.miniature-oeuvre img {
	width:100%;
	height:auto; 
}