/** FICHIERS STYLE POETE OFFICIEUSE 2025 **/

/** CORRESPONDANCES ECHELLE
PX -> REM :1/16
2px :0.125rem
4px :0.25rem
6px :0.375rem
8px :0.5rem;
10px :0.625rem
12px :0.75rem
14px :0.875rem
16px :1rem
18px :1.125rem
20px :1.25rem
22px :1.375rem
24px :1.5rem
25px :1.5625
26px :1.625rem
28px :1.75rem
30px :1.875rem
32px :2rem
34px :2.125rem
35px :2.1875rem
36px :2.25rem
38px :2.375rem
39px :2.4375rem
40px :2.5rem
42px :2.625rem
44px :2.75rem
46px :2.875rem
48px :3rem
50px :3.125rem
52px :3.25rem
56px :3.5rem
60px :3.75rem
64px :4rem;
68px :4.25rem;
70px :4.375rem
80px :5rem

OU 62,5%


/** COMMUN **/
/** Typographie **/

*{
	font-weight:normal;
	font-style:normal;
	box-sizing:border-box;
}

@font-face{
    font-family:"couriernew";
    src:url("/font/courier-new.woff2") format("woff2"),
	    url("/font/courier-new.woff") format("woff");
    font-weight:normal;
    font-style:normal;
	font-display:swap;
}

@font-face{
    font-family:"couriernew-italic";
    src:url("/font/courier-new-italic.woff2") format("woff2"),
        url("/font/courier-new-italic.woff") format("woff");
    font-weight:normal;
    font-style:normal;
	font-display:swap;
}

@font-face{
    font-family:"couriernew-bold";
    src:url("/font/courier-new-bold.woff2") format("woff2"),
        url("/font/courier-new-bold.woff") format("woff");
    font-weight:normal;
    font-style:normal;
	font-display:swap;
}

@font-face{
    font-family:"couriernew-bolditalic";
    src:url("/font/courier-new-bold-italic.woff2") format("woff2"),
        url("/font/courier-new-bold-italic.woff") format("woff");
    font-weight:normal;
    font-style:normal;
	font-display:swap;
}

@font-face{
    font-family:"netzen";
    src:url("/font/netzen.woff2") format("woff2"),
        url("/font/netzen.woff") format("woff");
    font-weight:normal;
    font-style:normal;
	font-display:swap;
}



/** Reset **/
h1,h2,h3,h4,h5,h6,p{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	vertical-align:baseline;
}


/** Mise en page **/
html,body{padding:0; margin:0;}


html{
    font-size:100%;
	color:var(--blanc-100);
}

table{border-spacing:0;}
.init{clear:both}


ul{
	list-style-type:none;
    padding:0;
	margin:0 0 25px 0;
}

a{
	color:var(--rouge-100);
}
	

p{
    margin-block-start:0;
    margin-block-end:0;
    margin-inline-start:0;
    margin-inline-end:0;
}

i{
	font-family:couriernew-italic;
}

sup {
    font-size: 50%;
    position: relative;
    line-height: 0;
    vertical-align: baseline;
    top: -1em;
}

*,:after,:before{
	box-sizing:border-box;
}


:root{
	/* Couleurs principales */
	--noir-100:#38393f;
	--rouge-100:#e2051a;
	--bleu-100:#225c8e;
}	

abbr{color:var(--rouge-100);}


/** Couleur/
@colordef #e2051a; Rouge
@colordef #35a8e0; Bleu
@colordef #f29100; Orange
@colordef #7ab832; Vert

@colordef #b2b2b2; Gris 100
@colordef #38393f; Noir 100%
 **/

/*************************************************************/
/** DESKTOP + MOBILE TOUTES RESOLUTIONS **/

/** LIEN **/
a{
	text-decoration:none;
	transition-property:color,background,border;
	transition-duration:0.3s;
	transition-timing-function:ease-out;
}

a:hover{
	text-decoration:none;
	transition-property:color,background,border;
	transition-duration:0.3s;
	transition-timing-function:ease-out;
}

button,input[type="submit"]{
    transition-property:background;
    transition-duration:1s;
    transition-timing-function:ease-out;
}

a:active,a:hover{
    outline:0;
}

abbr{text-decoration:none;margin:0 0 0 5px;}
strong{font-weight:bold;}
button{padding:0;}

input[type="password" i] {
    -webkit-text-security: disc !important;
    padding-block:0;
    padding-inline:0;
}

input:-internal-autofill-selected {
    appearance: menulist-button;
    background-image: none !important;
    background-color:#fff;
    color: fieldtext !important;
}

/** SCROLLUP **/
.scrollup {
    width: 50px;
    height: 50px;
    opacity: 1;
    position: fixed;
    bottom: 10px;
    right: 18px;
    z-index: 99999;
    display: none;
    border-radius: 50%;
    background:var(--bleu-100);
    box-shadow: 0 2.5px 5px rgba(0, 0, 0, .25);
}

.scrollup:before {
    font-family:netzen;
    content: "\e051";
    color: #fff;
    font-size: 50px;
    text-align: center;
    font-weight: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/*************************************************************/
/** DESKTOP TOUTES RESOLUTIONS **/
@media only screen{

	html{
		/*background:no-repeat url(/img/template-home.jpg);
		background-attachment: fixed;*/
		cursor: url(/img/logo-main-bleu.svg) 0 0, default;
		height:100vh;
		background:#f8faee;	
	}


	/** TRANSITION **/
	#transition{
		width:100%;
		height:100vh;
		background:#000;
		position:absolute;
		z-index:999999;
		transform:translateX(-1920px);
		transition: all 2400ms linear;
	}
	
	#transition.slide{
		transform: translateX(1920px);
        transition: all 2400ms linear;
	}

	#transition-bio{
		width:100%;
		height:100vh;
		background:url(/img/transtion-bio-desktop.jpg);
		background:#000;
		position:absolute;
		z-index:999999;
		transform:translateX(-1920px);
		transition: all 2400ms linear;
	}
	
	#transition-bio.slide{
		transform: translateX(1920px);
        transition: all 2400ms linear;
	}
	
	#transition-voix{
		width:100%;
		height:100vh;
		background:url(/img/transtion-a-voix-haute-desktop.jpg);
		background:#000;
		position:absolute;
		z-index:999999;
		transform:translateX(-1920px);
		transition: all 2400ms linear;
	}
	
	#transition-voix.slide{
		transform: translateX(1920px);
        transition: all 2400ms linear;
	}
	
	#transition-travaux{
		width:100%;
		height:100vh;
		background:url(/img/transtion-travaux-desktop.jpg);
		background:#000;
		position:absolute;
		z-index:999999;
		transform:translateX(-1920px);
		transition: all 2400ms linear;
	}
	
	#transition-travaux.slide{
		transform: translateX(1920px);
	}
	
	#transition-textile{
		width:100%;
		height:100vh;
		background:url(/img/transtion-textile-desktop.jpg);
		background:#000;
		position:absolute;
		z-index:999999;
		transform:translateX(-1920px);
		transition: all 2400ms linear;
	}
	
	#transition-textile.slide{
		transform: translateX(1920px);
    }   
	
	#transition-feutre{
		width:100%;
		height:100vh;
		background:url(/img/transtion-feutre-desktop.jpg);
		background:#000;
		position:absolute;
		z-index:999999;
		transform:translateX(-1920px);
		transition: all 2400ms linear;
	}
	
	#transition-feutre.slide{
		transform: translateX(1920px);
    }   
	
	#transition-terre{
		width:100%;
		height:100vh;
		background:url(/img/transtion-terre-desktop.jpg);
		background:#000;
		position:absolute;
		z-index:999999;
		transform:translateX(-1920px);
		transition: all 2400ms linear;
	}
	
	#transition-terre.slide{
		transform: translateX(1920px);
    }   
	
	#transition-pierre{
		width:100%;
		height:100vh;
		background:url(/img/transtion-pierre-desktop.jpg);
		background:#000;
		position:absolute;
		z-index:999999;
		transform:translateX(-1920px);
		transition: all 2400ms linear;
	}
	
	#transition-pierre.slide{
		transform: translateX(1920px);
    }  

	#transition-papier{
		width:100%;
		height:100vh;
		background:url(/img/transtion-papier-desktop.jpg);
		background:#000;
		position:absolute;
		z-index:999999;
		transform:translateX(-1920px);
		transition: all 2400ms linear;
	}
	
	#transition-papier.slide{
		transform: translateX(1920px);
    }	

	
	/** HEADER DESKTOP **/
	body{
		display:flex;
	}

	header{
		width:375px;
		position:fixed;
	}
	
	main{
		max-width:calc(100% - 375px);
		width:100%;
		margin: 0 0 0 400px;	
	}
	
	#home-titre{
		display:flex;
		flex-direction:column;
        justify-content:center;
		align-items:center;
		width:620px;
		margin:25px 0 50px 0;
	}
	
	#travaux-titre{
		display:flex;
		flex-direction:column;
        justify-content:center;
		align-items:center;
		width:620px;
		margin:25px 0 50px 0;
	}
	
	#textile-titre{
		display:flex;
		flex-direction:column;
        justify-content:center;
		align-items:center;
		width:620px;
		margin:25px 0 50px 0;
	}
	
	#feutre-titre{
		display:flex;
		flex-direction:column;
        justify-content:center;
		align-items:center;
		width:620px;
		margin:25px 0 50px 0;
	}
	
	#terre-titre{
		display:flex;
		flex-direction:column;
        justify-content:center;
		align-items:center;
		width:620px;
		margin:25px 0 50px 0;
	}
	
	#pierre-titre{
		display:flex;
		flex-direction:column;
        justify-content:center;
		align-items:center;
		width:620px;
		margin:25px 0 50px 0;
	}
	
	#papier-titre{
		display:flex;
		flex-direction:column;
        justify-content:center;
		align-items:center;
		width:620px;
		margin:25px 0 50px 0;
	}
	
	#a-haute-voix-titre{
		display:flex;
		flex-direction:column;
        justify-content:center;
		align-items:center;
		width:620px;
		margin:25px 0 50px 0;
	}
	
	#home-titre h1,#travaux-titre h1{
		font-family:couriernew-bold;
		font-size:2.5rem;
        line-height:2.5rem;
        margin:0;
		color:var(--noir-100);	
	}
	
	#home-titre h2,#travaux-titre h2{
		font-family:couriernew-bold;
		font-size:2rem;
        line-height:2rem;
        margin:0 0 0.375rem 0;
		color:var(--noir-100);	
	}
	
	#home-navigation{
		position:absolute;
        left:1500px;
        top:120px;
		display:flex;
		flex-direction:column;
        justify-content:center;
		align-items:center;
		width:360px;	
	}
	
	#home-navigation h4{
		position:relative;
		font-family:couriernew-bold;
		font-size:2.25rem;
        line-height:2.25rem;
		color:#fd4a5d;
		z-index:9999;
	}
	
	#home-navigation h4 span{
		color:#041236;
	}
	
	#home-navigation img{
		position:absolute;
        top: -80px;
        left: 168px;
		display:block;
		width:175px;
		height:175px;
		z-index:99;
	}
	
	#home-navigation img#croix-travaux{
		top: -123px;
        left:106px;
		width:287px;
		height:240px;
		overflow:hidden;
	}
	
	#home-navigation-titre{
		margin:0 0 50px 0;
	}
	
	#home-navigation-titre:hover{
		cursor: url(/img/logo-main-bleu.svg),default !important;
	}
	
	#navigation-rubrique{
		position:relative;
		z-index: 99999;
		display: block;
		top:45px;
		left:35px;
	}
	
	#navigation-rubrique ol{
		text-align:left;
		padding: 40px 0 0 150px
	}
	
	#navigation-rubrique ol li{
		padding:0;
		text-align:left;
		margin:0 5px;
		font-family:couriernew-bold;
		font-size:1.5rem;
        line-height:2rem;
		color:#041236;
	}
	
	#navigation-rubrique ol li:marker{
        text-align:left;
    }
	
	#navigation-categorie{
		position:absolute;
		top:35vh;
	}
	
	#navigation-categorie ol{
        text-align: left;
        padding: 40px 0 0 65px;
		font-family: couriernew-bold;
        font-size: 1.5rem;
        line-height: 2rem;
		margin: 0 5px;
    }
	
	#navigation-categorie ol li:marker{
        text-align:left;
    }
	
	footer{
		position:fixed;
		bottom:25px;
		padding;25px;
	}
	
	#header-logo{
		margin:25px 0 0 25px;
	}
	
	#header-logo a{
		display:block;
		width:100px;
		height:75px;
		margin:0 0 25px 0;
	}
	
	#header-logo nav a{
		width:auto;
		height:auto;
	}
	
	#navigation-categorie ul{
		margin:0;
	}
	
	footer ul{
		margin:0 0 0 25px;
	}
	
	#navigation-categorie ul li,footer li{
		display: flex;
		margin: 0;
		align-items:center;
	}
	
	#navigation-categorie li a#logo-instagram{
		background: url(/img/logo-instagram.svg) no-repeat center center;
		text-indent:-9999px;
	}
	
	#navigation-categorie a,footer a{
		font-family:couriernew-bold;
        font-size:1.5rem;
        line-height:1.75rem;
        color: var(--bleu-100);
        z-index: 9999;
	}
	
	footer a,footer p{
		font-family:couriernew;
		font-size:1.125rem;
        line-height:1.375rem;
		color: var(--bleu-100);
	}
	
	footer p{
		margin:25px 0 0 0;
	}
	
	
	/** INTRO DESKTOP **/
	#page-titre{
		margin:6rem 0 4rem 0;   
	}
	
	#page-titre h1{
		display:none;
    }
	
	#page-content{
		padding: 0 40px 20px 40px;
	}
	
	#page-content h1{
		font-family:couriernew-bold;
		font-size:2.25rem;
        line-height:2.25rem;
		color:var(--noir-100);	
		margin:120px 0 0 0;
	}
	
	#page-content h2{
		font-family:couriernew-bold;
		font-size:1.75rem;
        line-height:1.75rem;
        margin:4rem 0 0.75rem 0;
		color:var(--noir-100);	
		position: relative;
	}

	#page-content h3{
		font-family:couriernew;
		font-size:1.375rem;
        line-height:1.75rem;
		margin:0rem 0 0.75rem 0;
	}

	#page-content h4{
		font-family:couriernew-bold;
		font-size:1.25rem;
        line-height:1.75rem;
		margin:0 0 0.675rem 0;
	}
	
	#page-content p{
		font-family:couriernew;
		font-size:1rem;
        line-height:1.5rem;
		margin:0 0 3rem 0;
	}
	
	#page-content ul{
		margin:-2rem 0 0 0;	
	}
	
	#page-content li{
		font-family:couriernew;
		font-size:1rem;
        line-height:1.5rem;
		margin:0 0 0.875rem 0;
	}
	
	/** TRAVAUX / TEXTILE **/
	#page-textile-content,#page-travaux-content,#page-voix-content{
		display:grid;
        align-content:center;
        justify-content:center;
        grid-template-columns:1fr 1fr 1fr;
        align-items:center;
        justify-items:center;
        gap:25px;
		position:relative;
	}
	
	#page-textile-content h3,#page-travaux-content h3{
		text-align:center;
		color:#fff;
		text-decoration:none;
		margin:0;
	}
	
	#page-textile-content figure,#page-travaux-content figure{
		width:375px;
		height:250px;
		display:flex;
		align-content:center;
        justify-content:center;	
		transition:opacity 0.2s ease, visibility 0.2s ease;	
	}

	#page-textile-content figure img,#page-travaux-content figure img{
		position:absolute;
		width:375px;
		height:250px;
		z-index:100;
		border-radius:5px;
		
	}
	
	#page-textile-content figure figcaption,#page-travaux-content figure figcaption{
		color:#000;
		z-index: 100;
		transition: all 300ms ease-out;
		left: 0;
		display:flex;
		flex-direction:column;
		align-content:center;
        justify-content:center;
		opacity:0;
		background-color: rgba(0,0,0,0.6);
		padding:10px;
		width: 375px;
		border-radius:5px;
		box-shadow:0 4px 4px rgba(0, 0, 0, .25);
	}
	
	#page-textile-content figure:hover figcaption,#page-travaux-content figure:hover figcaption{
		opacity:1;
	}	
}



/*************************************************************/
/** DESKTOP TOUTES RESOLUTIONS 960 **/
@media only screen and (min-width:960px){


}

/*************************************************************/
/** DESKTOP 1600-1920  **/
@media only screen and (min-width:1700px){
	
	
}

/*************************************************************/
/** DESKTOP CONTENU 1280-1600 **/
@media only screen and (min-width:1280px) and (max-width:1699px){
	
	
}


/*************************************************************/
/** DESKTOP CONTENU 960 **/
@media only screen and (min-width:960px) and (max-width:1279px){
	
	
}


/*************************************************************/
/** MOBILE TOUTES RESOLUTIONS **/
@media only screen and (max-width:959px){
	
	
	/*HEADER MOBILE 960 */
	#header-logo{
		margin:0 0 5px 60px;
	}
	
	
	body{
		display:block;
	}
	
	main{
		max-width:100%;
		width:100%;
		margin:0;
	}
	
	#navigation-categorie{
		height: 100%;
		position: fixed;
		top: 0;
		margin:0;
		left: 0;
		-webkit-transform: translateX(-960px);
		-moz-transform: translateX(-960px);
		-ms-transform: translateX(-960px);
		-o-transform: translateX(-960px);
		transform: translateX(-960px);
		-moz-transition: all 400ms linear;
		-webkit-transition: all 400ms linear;
		-o-transition: all 400ms linear;
		transition: all 400ms linear;
		width: 100%;
		min-height: 100%;
		z-index: 999;
		overflow-y: scroll;
		padding:0 15px;
	}
	
	#navigation-categorie.show{
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
		transform: translateX(0);
		-moz-transition: all 400ms linear;
		-webkit-transition: all 400ms linear;
		-o-transition: all 400ms linear;
		transition: all 400ms linear;
		background:#f8faee;
	}
	
	#navigation-categorie ol{
		padding:120px 0 0 65px;
	}
	
	#home-titre,#travaux-titre,#feutre-titre,#a-haute-voix-titre,#textile-titre,#terre-titre,#papier-titre{
		width: 100%;
		height: auto;
	}
	
	#page-content{
		padding:0 15px 15px 15px;
	}
	
	#page-textile-content, #page-travaux-content, #page-voix-content{
		grid-template-columns:1fr 1fr;
		gap:2.5%
	}
	
	#page-textile-content figure,#page-travaux-content figure{
		width:100%;
		height:auto;
		flex-direction: column;
	}
	
	#page-textile-content figure img,#page-travaux-content figure img{
		width: 100%;
        height: 100%;
	}
	
	#page-textile-content figure figcaption, #page-travaux-content figure figcaption{
		width: 100%;
		opacity:1;
		border-radius:0 0 5px 5px;
	}
	
	#home-titre{
		margin:15px 0 25px 0;
	}
	
	#page-textile-content,#page-travaux-content,#page-voix-content{
        grid-template-columns: 1fr;
        gap: 2.5%;
    }
	
	 #page-titre,#feutre-titre{
		margin:3rem 0 2rem 0;
	}
	
	#home-titre img,#travaux-titre img,#feutre-titre img,#a-haute-voix-titre img,#textile-titre img,#terre-titre img,#papier-titre img{		
		width:100%;
		height:auto;
    }
	
	#page-textile-content figure img,#page-travaux-content figure img{
		width:100%;
		height:auto;
		position:relative;
		border-radius:5px 5px 0 0;
	}
	
	#page-textile-content, #page-travaux-content, #page-voix-content{
		display:block;
	}
	
	header{
		top:0;
		width:100%;
		height:65px;
		z-index:9999;
	}
	
	#header-logo a{
		width:auto;
		height:65px;
		margin:0;
	}
	
	#header-logo img{
		margin:5px 0;
		width:auto;
		height:55px;	
	}
	
	.burger {
        width: 40px;
        height: 42px;
        position: absolute;
        top:10px;
        left: 10px;
        z-index: 999999;
	}
	
	.burger span {
        position: relative;
        margin-top: 9px;
        margin-bottom: 9px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        position: absolute
    }
	
	.burger span,.burger span:before,.burger span:after {
        display: block;
        width: 40px;
        height: 7.5px;
        position: relative;
        top: 10px;
        background-color:var(--noir-100);
        outline: 1px solid #fff0;
        -webkit-transition-property: background-color,-webkit-transform;
        -moz-transition-property: background-color,-moz-transform;
        -o-transition-property: background-color,-o-transform;
        transition-property: background-color,transform;
        -webkit-transition-duration: 0.3s;
        -moz-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        transition-duration: 0.3s;
        border-radius: 5px
    }

    .burger span:before,.burger span:after {
        position: absolute;
        content: ""
    }

    .burger span:before {
        top: -16px
    }

    .burger span:after {
        top: 16px
    }

    .burger.clicked span:before {
        transform: translateY(16px) rotate(45deg)
    }

    .burger.clicked span:after {
        transform: translateY(-16px) rotate(-45deg)
    }

    .burger.clicked span:before,.burger.clicked span:after {
        background-color:var(--noir-100);
    }

    .burger.clicked span {
        background-color:#f8faee;
    }

    .burger:hover {
        cursor: pointer
    }

    .burger.clicked+body {
        height: 100%;
        overflow-y: hidden
    }
	
	
	footer{
		position:initial;
		display:block;
		bottom:auto;
	}
	
	#home-navigation{
		position: fixed;
		right: 20px;
		width:100%;
        left: 0;
		top:0;
		justify-content: flex-end;
		align-items: flex-end;
	}
	
	#home-navigation img{
		top:0;
		width:75px;
		height:75px;
		z-index:999;
	}
	
	#home-navigation-titre {
		margin:0;
	}
	
	#navigation-rubrique,#home-navigation h4{
		display:none;
	}
}



/*************************************************************/
/** MOBILE CONTENU 640 **/
@media only screen and (min-width:640px) and (max-width:959px){

	
}

/*************************************************************/
/** MOBILE CONTENU 480 **/
@media only screen and (min-width:480px) and (max-width:639px){
	
	
}	

/*************************************************************/
/** MOBILE CONTENU 360 **/
@media only screen and (min-width:360px) and (max-width:479px){
	

}