<?php
	$nomFicAppelant = basename(__FILE__);

	// -----------------------------------------------------
	// Media query
	// -----------------------------------------------------
	function genereFic($expression, $expression2, $expression3, $barreCoul, $croixCoul) {

		global $resolution;
		global $coeff;
		global $prctLargeur;
		global $prctColumnD;
		global $debugRespMsg;
		global $debugResponsive;
		global $responsiveFic;
		global $color;
		global $niveau;

		$responsiveFic .= "@media screen ";
		if (!empty($expression))	 {$responsiveFic .= "and (" .$expression. ") ";}
		if (!empty($expression2))	 {$responsiveFic .= "and (" .$expression2. ") ";}
		if (!empty($expression3))	 {$responsiveFic .= "and (" .$expression3. ") ";}
		$responsiveFic .= " {\n";

		// -----------------------------------------------------
		// Site container : dans le cas ou on a fixé la taille à
		// 800px, ici on revient en responsive avec 100%
		if ($resolution <=814 ) {

			// on remet la largueur colonne 1 si hamburger
			$responsiveFic .= "#site-container {margin:auto; grid-template-columns:15% 21% 21% 22% 20%; } \n";

			$responsiveFic .= "#menuD-container {top:25;} \n"; // on remonte menu hamburger

			// si modele:1 = la colone menu indep ne sert plus, on l'utilise pour tous les objets
			//echo 'Num = '.$_SESSION['numStruct'];

			if (isset($_SESSION['numStruct']) && $_SESSION['numStruct']==1 ) {
				$responsiveFic .= "#bandeau-container {grid-column:1 / span 5;} \n";
				$responsiveFic .= "#page-container {grid-column:1 / span 5;} \n";
			}

			$responsiveFic .= "#header-containerImg {grid-template-columns:1.7fr 1.7fr 3fr 0.8fr 0.8fr; } \n";
			// $responsiveFic .= "#promos-container {display:flex; flex-direction:column; margin:auto; margin-bottom:15px; justify-content:space-between; } \n";
			$responsiveFic .= ".itemBarrePromo {margin:auto; margin-top:5px; padding:5px;} \n";
			$responsiveFic .= ".zoneAcheter {display:block; margin-bottom:0px; width:100%; grid-column:1 / span 2; } \n";
			$responsiveFic .= ".catalogueImgPrd {max-width:150px;} \n";
			$responsiveFic .= ".boutons {margin:auto; width:auto;} \n";
			$responsiveFic .= ".msgKo {display:block;margin:auto;} \n";
			$responsiveFic .= "#panierConteneurItem {display:flex;flex-direction:column} \n";

			// -----------------------------------------------------
			// Pour responsive on force le passage en modele 3 : pub en bas et pas de menu indep
			// -----------------------------------------------------
			// on affiche pas le menu indep en responsive
			// -----------------------------------------------------
			$responsiveFic .= "#menuIndep-container {display:none; width:0px; height:0px;} \n";

			// -----------------------------------------------------
			// Menu deroulant reduit ou hamburger
			// -----------------------------------------------------
			if (isset($_SESSION['typeAffResponsive']) && $_SESSION['typeAffResponsive']==1) {
				include ("./styles/responsiv/03.1-responsiveFic.functionHamburger.php");
			}
			else {
				include ("./styles/responsiv/03.2-responsiveFic.functionMenuReduit.php");
			}
			// $responsiveFic .= "#logo {max-width:290px; width:100%; } \n";
			$responsiveFic .= ".tableCatalogue {width:90%; grid-template-columns:auto;} \n";
			$responsiveFic .= "#tableCli{ width:97%; margin:auto; } \n";
			$responsiveFic .= "#container-usrSiteMsg{ margin-top:20px; } \n";
			$responsiveFic .= ".pdpTxt {font-size:1rem; } \n";
		}

		if ($resolution <=777 && $resolution >654) {
			// se declenche en fait a larg=764
			// -----------------------------------------------------
			// mode bourin font
			// -----------------------------------------------------
			$responsiveFic .= "* {font-size:1rem;} \n";

			// -----------------------------------------------------
			// Devise
			// -----------------------------------------------------
			$responsiveFic .= "#devise {display:none;} \n";

			// -----------------------------------------------------
			// header
			// -----------------------------------------------------
			$responsiveFic .= "#header-container {grid-template-columns: 10% 20% 20% 20% 25%; height:10px;} \n";
			$responsiveFic .= "#imgTitre {margin-top:18px; height:100%; line-height:30px; font-size:1.4rem; } \n";
			$responsiveFic .= "#eCol2 {margin:auto; height:100%; } \n";

			// -----------------------------------------------------
			// Pour responsive on force le passage en modele 3 : pub en bas et pas de menu indep
			// -----------------------------------------------------
			// on affiche pas le menu indep en responsive
			// -----------------------------------------------------
			$responsiveFic .= "#menuIndep-container {display:none; width:0px; height:0px;} \n";

			// -----------------------------------------------------
			// Barre de recherche
			// -----------------------------------------------------
			// $responsiveFic .= "#rechBarre-container {grid-row:4; left:0px;margin:auto; grid-column:1 / span 4;} \n";
			// -----------------------------------------------------
			$responsiveFic .= "#rechInput {padding:0;font-size:1rem; margin:auto;} \n";

			// -----------------------------------------------------
			// usr Msg
			// -----------------------------------------------------
			$responsiveFic .= "#container-usrSiteMsg {grid-column:1 / span 4;} \n";

			// on force l'affichage du menu boutique : class hidden surchargée
			$responsiveFic .= "#menuDeroulantBarre>li:first-child {display:block; } \n";

			// -----------------------------------------------------
			// Gondoles
			// -----------------------------------------------------
			// $responsiveFic .= ".itemBarrePromo {width:50%;} \n";
			// -----------------------------------------------------
			// -----------------------------------------------------
			// Message commercial
			// -----------------------------------------------------
			$responsiveFic .= "#messCom {font-size:1rem;} \n";
			$responsiveFic .= "#barreClientContainer, #pageConnexion {display:flex;flex-direction:column;justify-content:space-around;} \n";

			// -----------------------------------------------------
			// Spinner
			// -----------------------------------------------------
			$responsiveFic .= "#spinnerPopup, .spinnerPopup {top: 10px; width:80%;	} \n";
			$responsiveFic .= ".tableCatalogue {display:block;} \n";
			$responsiveFic .= ".prix {display:block; margin:auto; text-align: center;} \n";
		}

		if ($resolution <=654 && $resolution >568) {
			// -----------------------------------------------------
			// Flex attitude
			// -----------------------------------------------------
			$responsiveFic .= ".flexToColumn {display:flex; flex-direction:column;}\n";
			$responsiveFic .= "#ongletBarre li {min-width:50%}\n";

			// -----------------------------------------------------
			// Item maint
			// -----------------------------------------------------
			$responsiveFic .= "#itemMaint {width:85%} \n";

			// -----------------------------------------------------
			// Btn Admin
			// -----------------------------------------------------
			$responsiveFic .= "#btnAdminText {max-width:50%; color:transparent; text-indent:-99px; left:0px; position:relative; padding:0px; font-size:0px; white-space:break-spaces; width:5px;} \n";
			$responsiveFic .= "#btnAdminText::after {color:white; content:\"Administration\";left:1px; font-size:1rem; padding-left:1px; padding-right:1px;} \n";

			// -----------------------------------------------------
			// Page connexion
			// -----------------------------------------------------
			$responsiveFic .= ".pageConnexion {padding:0px; margin:0px;} \n";
			$responsiveFic .= ".libConnCell {grid-column:1 / span 2; text-align:center;} \n";
			$responsiveFic .= ".champsConn {width:95%;} \n";

			// -----------------------------------------------------
			// Formulaire client
			// -----------------------------------------------------
			$responsiveFic .= ".libClientsCell {margin:1px; padding:1px;} \n";
			$responsiveFic .= "#tableCli {grid-column:1 / span 4;} \n";

			// -----------------------------------------------------
			// Panier : bloc synthese passe en dessous des lignes
			// -----------------------------------------------------
			// $responsiveFic .= "#syntheseLignes {grid-column:1 / span 2; grid-row:1 / span 2; font-size:1em; width:100%;} \n";
			// -----------------------------------------------------
			$responsiveFic .= "#syntheseLignes {grid-column:1 / span 2; } \n";
			$responsiveFic .= "#blocSynthese {grid-column:1 / span 2; grid-row:3; margin:auto; margin-top:2%; margin-bottom:20px; padding:0px; width:100%;} \n";
			$responsiveFic .= ".blocItemPanier {margin:auto; width:100%;} \n";
			$responsiveFic .= "#recapContainer {grid-column:1 / span 2;} \n";

			// -----------------------------------------------------
			// Etapes
			// -----------------------------------------------------
			$responsiveFic .= "#etapesContainer {display:flex; flex-direction:column;} \n";

			// -----------------------------------------------------
			// Formulaire mes commandes : on masque remise et frais car ne rentre pas
			// Fonctionne avec le # et le . sinon fonctionne pas
			// -----------------------------------------------------
			$responsiveFic .= "#hiddenColonne {display:none; visibility: hidden; width:0px;} \n";
			$responsiveFic .= ".hiddenColonne {display:none; visibility: hidden; width:0px;} \n";
			$responsiveFic .= ".c64 {grid-column:4;} \n";
			$responsiveFic .= ".c75 {grid-column:5;} \n";
			$responsiveFic .= "#c64 {grid-column:4;} \n";
			$responsiveFic .= "#c75 {grid-column:5;} \n";
			$responsiveFic .= "#tableMesCdes {grid-template-columns:10% 25% 25% 20% 20%; grid-column-gap:0px;} \n";
			// le tableau des détails passe en 5 cols
			$responsiveFic .= "#detailResponsiv {grid-column:1 / span 4;} \n";

			// -----------------------------------------------------
			// Pied de page
			// -----------------------------------------------------
			$responsiveFic .= "#pdpBarre {display:flex; flex-direction:column;} \n";
			$responsiveFic .= "#etapesContainer {display:flex; flex-direction:column;} \n";

			// -----------------------------------------------------
			// Pub
			// if ($_SESSION['affPub1']!= 1 && $_SESSION['affPub2']!= 1 && $_SESSION['affPub3']!=1 ) $_SESSION['affPub']='0';
			// menu independant non | pub a droite
			// if (isset($_SESSION['numStruct']) && $_SESSION['numStruct']==2 ) {
			// 	$responsiveFic .= "#pub-container {grid-row:5 / span 3} \n"; // on descends la pub d 1 row a cause du menu hamburger
			// }

			// -----------------------------------------------------
			// Gondoles
			// -----------------------------------------------------
			$responsiveFic .= ".gondole-container {display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;} \n";
			//$responsiveFic .= ".pub-image {max-width:150px; max-height:150px; min-width:150px; min-height:150px; } \n";

			// $responsiveFic .= "#familles-container {	 height:170px;}\n";
			$responsiveFic .= ".grid1to2 {grid-column: 1 / span 2;}\n";
			$responsiveFic .= ".tablePanier {display:flex;flex-direction:column;} \n";
			$responsiveFic .= ".tablePanier>#tableCli {display:grid; grid-column:1 / span 2; grid-row:1;} \n";
			$responsiveFic .= ".catalogueImgPrd {max-width:110px;} \n";
		}

		if ($resolution <=568 && $resolution >414) {

			// -----------------------------------------------------
			// Panier
			// -----------------------------------------------------
			$responsiveFic .= "#syntheseLignes {grid-column:1 / span 2; } \n";

			// -----------------------------------------------------
			// Flex attitude
			// -----------------------------------------------------
			$responsiveFic .= ".flexToColumn {display:flex; flex-direction:column;}\n";
			$responsiveFic .= ".flexToRow {display:flex; flex-direction:row; grid-row-gap:0px; }\n";
			$responsiveFic .= ".notInResponsive {display: none;}\n";
			$responsiveFic .= ".onlyInResponsive {display: block; margin: 1px;}\n";

			// -----------------------------------------------------
			// Adresse Fact dans panier
			// -----------------------------------------------------
			$responsiveFic .= ".champsCli,listeDeroulanteCli {width:100%; grid-column: 1 / span 2;}\n";

			$responsiveFic .= "#tableMesCdes {display:flex; flex-direction:column; grid-column-gap:0px;} \n";
			$responsiveFic .= ".w100 {width:100%;} \n";
			$responsiveFic .= ".m0 {margin:0px;} \n";
			$responsiveFic .= ".champsMesCdesCell {text-align:left;} \n";
			$responsiveFic .= "#detailCdeLignes {display:flex; flex-direction:column; width:100%;margin:auto;} \n";
			// $responsiveFic .= "#logo {width: 80%; top:55px; left:20px; z-index:0; } \n";
			$responsiveFic .= ".msgInfos>div>span>img {width: 60%; } \n";
			$responsiveFic .= "#eCol1 {min-width:30px;} \n";

			// -----------------------------------------------------
			// Hamburger
			// -----------------------------------------------------
			// $responsiveFic .= "#menuD-container {left: -50px;} \n";
			//$responsiveFic .= "#eCol4 {padding-top:34px;}";
			$responsiveFic .= "#header-containerImg {background-size: cover; } \n";
			$responsiveFic .= "#header-containerImg {background-size: contain; size:100%; margin:auto; grid-column: 1/span 5;} \n";
		}

		if ($resolution <=414) {
			// on force l'affichage du menu boutique
			$affichagePourResponsive="block";
			$responsiveFic .= "#header-containerImg {display:flex; flex-wrap:wrap; } \n";
			$responsiveFic .= "#tablePages {display:block;} \n";
			$responsiveFic .= ".menuDeroulantItem {display:block; width:100%;} \n";
			$responsiveFic .= "#gallerie {display:block; padding-bottom:0px; margin-bottom:0px;} \n";
			$responsiveFic .= "#tableCli {display:flex; flex-direction:column; justify-content:space-between; margin:auto;} \n";
			$responsiveFic .= ".libClientsCell,.libClients {text-align:left;} \n";

			$responsiveFic .= ".boutons {width:auto;} \n";
			$responsiveFic .= ".gondole-container {display:flex; flex-direction:column; justify-content:space-around; align-content:center; margin:auto; margin-bottom:15px; text-align:center;} \n";

			// -----------------------------------------------------
			// Panier
			// -----------------------------------------------------
			$responsiveFic .= "tablePanier {grid-column:1;} \n";
			$responsiveFic .= "champsPanierCell {width:100%} \n";

			// -----------------------------------------------------
			// Etapes
			// -----------------------------------------------------
			$responsiveFic .= "#etapesContainer {display:flex; flex-direction:column;padding:20px;} \n";

			// -----------------------------------------------------
			// Adresse Fact dans panier
			// -----------------------------------------------------
			$responsiveFic .= ".champsCli,listeDeroulanteCli {width:100%; grid-column: 1 / span 2;}\n";
			$responsiveFic .= ".familles-boite {text-align:center; margin-bottom:1px; padding:0px; }\n";
			$responsiveFic .= ".familles-libelle {font-size:1rem; }\n";
			// $responsiveFic .= "#logo {width: 50%; min-width:50px; margin:auto;} \n";

			// -----------------------------------------------------
			// Hamburger
			// -----------------------------------------------------
			$responsiveFic .= "#logo {display:none; } \n";
			$responsiveFic .= ".titreFamilleVignette:first-child {margin-top:20px;}";
		}

		if ($resolution <=361) {
			$responsiveFic .= ".boutons {width:auto;} \n";
		}

		// -----------------------------------------------------
		// Fin media query
		// -----------------------------------------------------
		$responsiveFic .= "} \n";
	}
?>