/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//+		© Copyright iDIWAY 2009
//+		Tout droits de reproduction interdits
//+		http://www.idiway.fr
//+		$Revision: 7297 $
//+		$Date: 2024-01-17 09:14:12 +0100 (mer. 17 janv. 2024) $
//+		$HeadURL: svn://svn.id.lan/pko/sat/2x/232_fdm/trunk/tpl/tpl0/css/pag/ici.css $
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/* HEADER */
.iTpl-head { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; }

/* IMG ACCUEIL  */
.img-acc { content: url('../../img/mep/body/static/hero-ici.jpg'); }

/* CTN */

.tit-fdm,
.tit-ici { font-size: 5em; line-height: 1em; font-family: var(--TPL-font-secondary); }
.right { text-align: right; }

.iTpl-ici.iTpl-row-pag { position: relative; padding-bottom: 10em; margin: 0 max(5%, (100vw - 1500px) / 2); }
.iTpl-ici::after { content: ''; background-image: url('../../img/mep/body/static/fabrique-en-france.svg'); background-size: contain; background-repeat: no-repeat; width: min(100px, 10vw); height: 150px; position: absolute; top: 5px; right: -5%; }

.tit-fdm { padding: 0.5em 0; }
.tit-ici { margin-right: 10%; }

.fdm-logo { width: min(180px, 20vw); height: min(180px, 20vw); display: inline-block; position: relative; }
.fdm-logo::before { content: ''; width: 200%; height: 200%; max-width: 30vw; max-height: 30vw; position: absolute; top: 0; left: 0; background-color: #EBFCFF; border-radius: 50%; z-index: -1; }
.fdm-logo > img { width: 100%; }

.ici-img { position: absolute; right: 2%; bottom: -5%; z-index: -1; width: 400px; }
.ici-img > img { width: 100%; }


.iTpl-art.iTpl-row-pag { margin-bottom: 25%; }
.iTpl-art .iTpl-sTit { margin-bottom: 2em; }

.iTpl-art .art { position: relative; text-align: center; width: min-content; margin: auto; }

	.art .art-back { width: max-content; max-width: 90vw; width: 1721px; /* taille de l'image */ display: inline-block; margin: auto; }
	.art .iTpl-txt { font-size: min(2vw, 2em); line-height: 1.2em; text-align: left; }

	.art .fox-photo-leg { position: absolute; top: 2%; left: 19%; max-width: 30%; }
	.art .fox-photo { position: absolute; top: 7%; left: 5%; max-width: 50%; }

	.art .fox-aquarelle-leg { position: absolute; top: 33%; left: 20%; width: min-content; }
	.art .fox-aquarelle { position: absolute; top: 30%; right: 5%; max-width: 50%; }

	.art .art-imprimerie-leg { position: absolute; top: 63%; right: 6%; max-width: 19%; }
	.art .art-imprimerie { position: absolute; top: 65%; left: 14%; max-width: 40%; }

	.art .art-end-leg { position: absolute; bottom: -4%; left: 12%; max-width: 20%; }

	.art-produit { max-width: min(60%, 850px); position: absolute; bottom: -15%; left: 50%; transform: translate(-50%); z-index:-1; }
	.art-produit .iTpl-leg { position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); width: 100%; font-size: 2em; text-align: center; }

	.art .art-back > img,
	.art .fox-photo > img,
	.art .fox-aquarelle > img,
	.art .art-imprimerie > img,
	.art-produit > img { max-width: 100%; }

/* RESPONSIVE  */

@media screen and (max-width: 1230px){
	.ici-img  { right: 0; bottom: 0; width: 300px; }
}

@media screen and (max-width: 800px){
	.img-acc { content: url('../../img/mep/body/static/hero-ici-mobile.jpg'); }

	.iTpl-ici.iTpl-row-pag { padding-bottom: 5em; margin-bottom: 3em; }

	.tit-fdm,
	.tit-ici { font-size: 3em; }

	.tit-fdm { padding: 1em 0; }

	.iTpl-ici::after { width: min(100px, 15vw); height: 150px; }

	.fdm-logo { width: min(100px, 15vw); height: min(100px, 15vw); }

	.ici-img { width: 125px; bottom: -3%; }

	.iTpl-art.iTpl-row-pag { margin-bottom: 22em; }
	.iTpl-art .iTpl-sTit { font-size: 1.33em; text-align: center; }

	.iTpl-art .art { width: 100%; height: 1127px; /* taille image fond */ }

	.art .art-back-mob { position: absolute; left: calc(-19% - 1px); top: 0; width: 100vw; height: 1127px; /* taille image */ overflow-x: hidden; }
	.art .art-back-mob > img { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }

	.art .iTpl-txt { font-size: 1.5em; }

	.art .fox-photo-leg { top: 0; left: 50%; max-width: 250px; width: 250px; transform: translateX(-50%); }
	.art .fox-photo { max-width: 250px; width: 250px; top: 6%; left: 35%; transform: translateX(-45%); }

	.art .fox-aquarelle-leg { top: 22%; left: 50%; transform: translateX(70%); }
	.art .fox-aquarelle { max-width: 250px; width: 250px; top: 27%; right: -10%; }

	.art .art-imprimerie-leg { max-width: 250px; width: 250px; top: 54.5%; right: 50%; transform: translateX(56%); }
	.art .art-imprimerie { max-width: 250px; width: 250px; left: 50%; transform: translateX(-50%); }
	
	.art .art-end-leg { max-width: 150px; width: 150px; bottom: 0; left: 50%; transform: translate(10%); }

	.art-produit { width: 350px; max-width: 350px; bottom: -22%; }
}