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

    Les élements spécifiques à SPIP et autres personnalisations

	------------------------
	-- TABLE OF CONTENTS --
	------------------------
	
	--  01. Polices
	--  02. SPIP
    --  03. Correctifs

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

 /** 01. Polices
*******************************************************************/
/* 
	Arapey
	https://fonts.google.com/specimen/Arapey

	on replace par un version en local via le kit
	https://gwfh.mranftl.com/fonts/arapey?subsets=latin
*/

/* arapey-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Arapey';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/arapey-v16-latin-regular.woff2') format('woff2');
}

/* arapey-italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Arapey';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/arapey-v16-latin-italic.woff2') format('woff2'); 
}


/*
	Abril Fatface
	https://fonts.google.com/specimen/Abril+Fatface

	on replace par un version en local via le kit
	https://gwfh.mranftl.com/fonts/alegreya-sans?subsets=latin,latin-ext
*/

/* abril-fatface-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Abril Fatface';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/abril-fatface-v23-latin-regular.woff2') format('woff2'); 
}



 /** 02. SPIP
*******************************************************************/

a.spip_in, a.spip_out {
    font-size: inherit !important;
    line-height: inherit !important;
    display:inline !important;
   
    padding: inherit !important;

    transition: inherit !important;;

    color: inherit !important;
    border:0px solid #fff !important;
    border-radius:0 !important;
    border-bottom:1px solid #111 !important;
    background: #fff !important;    
}

a.lien-discret {
    border-bottom:none !important;
}

.spip_documents img {
    max-width:100%;
    height:auto;
}
.texte {
	font-size:1.8rem;
}

/* version responsive on agrandit un peu la taille du texte */
@media (max-width: 800px) {    
    .texte, .texte p,
    #contact .contact-list li {
        font-size: 2.75rem;
    }   
}


/** 03. Correctifd
*******************************************************************/

#intro .container-mid p {
    font-size: 2.2rem;
    margin-top: 1em;
    margin-bottom: 1.5em;
}

@media (max-width: 800px) {
    #intro .container-mid p {
        font-size: 2.75rem;
        margin-top: .25em;
        margin-bottom: .5em;
    }
}

/* on ameliore la version responsive:
l'image prend uniquement la moitie de la hauteur */
@media (max-width: 800px) {
	.image-container {
		height: 50vh;
	}
}


/** 8. Content Area --> Work : 
    le typage est trop fort

    on la reprend avec .work au lieu de #work
*******************************************************************/

.work .showcase {
    margin-top:1rem;
}

.work .showcase .item
{
    position: relative;

    overflow: hidden;

    width: 100%;
    height: 24rem;
    margin: 0;
    margin-bottom: 6vh;

    cursor: pointer;

    border-radius: 3rem;
    background: #111;  
}

.work .showcase .item:last-child
{
    margin-bottom: 0;
}

.work .showcase .item .info
{
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;

    width: 0;
    height: 100%;

    -webkit-transition: .25s ease;
         -o-transition: .25s ease;
            transition: .25s ease;

    color: #fff;
    background: #008aff;
}

.work .showcase .item:hover .info
{
    width: 100%;
}

.work .showcase .item .info .container-mid
{
    position: absolute;
    top: 50%;
    left: 0;

    width: 100%;
    padding: 0 6rem;

    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}

.work .showcase .item .info .container-mid h5
{
    -webkit-transform: translateX(4vh);
        -ms-transform: translateX(4vh);
            transform: translateX(4vh);

    opacity: 0;
    color: #fff;
}

.work .showcase .item:hover .info .container-mid h5
{
    -webkit-transition: .2s ease .2s;
         -o-transition: .2s ease .2s;
            transition: .2s ease .2s;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);

    opacity: 1;
}

.work .showcase .item .info .container-mid p
{
    position: relative;

    padding-left: 2.7rem;

    -webkit-transform: translateX(4vh);
        -ms-transform: translateX(4vh);
            transform: translateX(4vh);
    letter-spacing: .025em;

    opacity: 0;
}

.work .showcase .item:hover .info .container-mid p
{
    -webkit-transition: .2s ease .3s;
         -o-transition: .2s ease .3s;
            transition: .2s ease .3s;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);

    opacity: 1;
}

.work .showcase .item .info .container-mid p:before
{
    position: absolute;
    top: 50%;
    left: 0;

    width: 1.1em;
    height: 1px;

    content: '';
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);

    background: #fff;
}

.work .showcase .item .background-image
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}