@charset "UTF-8";

/**
 * @package Simple Css
 * @subpackage : SimpleGrid
 * @lastmodified 2022-06-14
 * @site http://simplecss.fr
 * @author Patrice Cahue aka cpalo
 * Author Url: https://cahue.net
 *
 * @license Coding under GNU GPL
 * 		See http://www.gnu.org/licenses/gpl-3.0.html
 * @license Content & others under CC-BY-NC-SA
 * 		See http://creativecommons.org/licenses/by/3.0/fr/
 */
 
/*! simplecss.css v12.04  		| GPL License | simpleframework.fr - 2022/04/12 */
/*! simplecomponents.css v12.04 | GPL License | simpleframework.fr - 2022/04/12 */
/*! simplegrid.css v12.04 		| GPL License | simpleframework.fr - 2022/04/12 */

 
 /** 
 * ===============================================================
 * ---                  SIMPLE-GRID v12.04.06                  ---
 * ---                   DEVELOPMENT VERSION                   ---
 * =============================================================== 
 */
 
 
/**
 * --------------------- 
 * --- COMPATIBILITY --- 
 * ---------------------
 */ 

/**
 * Can I Use (France mai 2022 tracked unprefixed): 
 * (les % sont sur la totalité des navigateurs "tracked", sans les partiellement supportés)
 *
 *							All		 Desktop	Mobile
 *
 * Custom Properties	:	98.9%	 99.3%		98.6%
 * Calc					: 	99.2% 	 99.3% 		99.0%
 * Css Grid-Layout		:	98.5%	 98.5%		98.5%
 */
 
 
/**
 * ------------------------
 * --- TABLE OF CONTENT ---
 * ------------------------
 */
 
 
 
 
 
/**
 * ------------------------------------------------------------
 * --- 02 - CLASSES SETTING THE WIDTH OF THE CONTENT
 * ------------------------------------------------------------
 */ 
 
 h2.no-visible-avoid-untitled,
 h1.no-visible-avoid-untitled {
	display: none;
}
 
 
/**
 * Basées sur la line-length maxi des paragraphes
 * ----------------------------------------------
 *  75 cpl * 16px * 0.5 = 600px
 *  75 car * 17px * 0.5 = 638px 
 *  90 cpl * 16px * 0.5 = 720px
 *  90 cpl * 18px * 0.5 = 810px
 *  90 cpl * 19px * 0.5 = 855px
 */

:root {
	
	--max-width-main: 640px;		/* 40rem */
	--max-width-content: 1000px;	/* 80 rem */
	--max-width-wide: 1300px;
	
	--padding-body: 16px;
	--padding-blockgroup: 16px;
}

	@media (min-width: 1100px) {
		:root {	
			--width-wide: 90vw;
		}
	}

/* Le bloc de contenu est centré pour éviter d'étirer le contenu :
 * par défaut c'est le bloc interne (.inner-) ou (grid-) qui est limité et centré
 *
 * cette classe, suivant la mise en page souhaitée, peut être aussi appliquée sur :
 *	- le parent du grid-item ("bg-" ou "blockgroup") 
 *	- et non pas (le plus fréquent) sur le bloc interieur du grid-item "grid-" ou "inner-"
 *	- ou même sur le container global (".page", ".grid-body")   
 */

/**
 * Attention :
 * ----------
 * Ces classes ne servent pas à centrer les items enfants d'un grid-container
 * Elle servent principalement à centrer et à dimensionner le grid-container.
 */
 
.main-width {
	max-width: var(--max-width-main);	
	margin-left: auto;
	margin-right: auto;	
}
 
.content-width {		
	max-width: var(--max-width-content);	
	margin-left: auto;
	margin-right: auto;	
}

.wide-width {		
	width: var(--width-wide);
	max-width: var(--max-width-wide);
	margin-left: auto;
	margin-right: auto;	
}

.full-width {
	width: 100%;
}

/**
 * Définir une largeur maximale du contenu 
 * ---------------------------------------
 * On calcule la largeur restante pour les marges exterieures (Full-Width)
 * Calcul pour des colonnes égales :
 * (100vw - $widthContent - ($numberGuttersExternal * $widthGutter) -$scrollBar) / $numberColumnsExternal
 * Mais on peut jouer des largeurs inégales en répartissant les 100vw inégalement.
 * 100% au lieu de 100vw (et donc pas de -$scrollbar)lorsque la grille est dans un conteneur.
 */
 
/** 
 * Attention :
 * ----------
 * La largeur du viewport doit être supérieure à ce qui est retiré
 * exemple : 1200px + (4 * 24px) + 16px (scrollbar)---> minwidth = 1312px 
 *			 largeur d'une des 4 marges externes : calc( 25vw - 300px - 24px - 4px)  
 */

/**
 * width-wide doit être plus grand que max-width-wide + 2 gutters
 *	---> c'est ce qui conditionne le choix du breakpoint.
 * width-wide = 90% de 1600px = 1440px > 1400px (max-width-wide)
 *
 * max-width-content: 1000px;
 * width-wide = 90% --> breakpoint : 1000px /0.9 = 1120px
 */ 


/**
 * ------------------------------------------------------------
 * --- 03 - THE GRID ELEMENTS ( PARENTS & DIRECT CHILDS )   
 * ------------------------------------------------------------
 */ 
 

.grid-body {
	
	--gutter: 0px;	   	/* column-gap */	
	--spacing: 1.5rem;  /* row-gap */
	/* --spacing: calc(var(--fs) * var(--lh)); */
	
	display: grid;
	column-gap: var(--gutter);				
	row-gap: var(--spacing);

	grid-template-columns:		
		/* Marges externes gauche */
		[full-start] 
			var(--margin-full)								
		[wide-start] 
			var(--margin-wide) 
		/* Zone de contenu */
			var(--layout-content)
		/* Marges externes droite */
			var(--margin-wide) 
		[wide-end]
			var(--margin-full)
		[full-end];	
}




.grid-body {
	
	/* largeurs des marges externes */	
	--margin-full: minmax(0, 1fr);
	--margin-wide: minmax(0, 1fr);
		
	/* layout pour le contenu entre les marges externes */
	--layout-content:
		[content-start left-start left-end main-start]
			minmax(auto, var(--max-width-content))
		[main-end right-start right-end content-end];
}
	@media (min-width: 768px) {
		.grid-body {	
			--margin-wide: calc((90vw - var(--max-width-content) - 2 * var(--gutter)) / 2);
		}	
	}
	@media (min-width: 1450px) {
		.grid-body {			
			--margin-wide: calc((var(--max-width-wide) - var(--max-width-content) - 2 * var(--gutter)) / 2);
		}	
	}
	
	
/* nb-rows : nombre de lignes avant <main>:
   top-bar, site-header, site-branding, site-nav, site-hero .... */

:root {
	--nb-rows: 1;
}
	
.grid-body {
    min-height: calc(100vh - 2 * var(--padding-body));	
	grid-template-rows: repeat(var(--nb-rows), min-content) 1fr min-content;
}	

.grid-content > *,
.grid-body > * {
	grid-column: 1 / -1;
}






.align-full    { grid-column: full; grid-column: 1 / -1; }
.align-wide    { grid-column: wide; grid-column: 2 / -2; }
.align-content { grid-column: content; grid-column: 3 / -3; }
.align-main    { grid-column: main;}

@media (min-width: 768px) {
	.md-align-full    { grid-column: full; grid-column: 1 / -1; }
	.md-align-wide    { grid-column: wide; grid-column: 2 / -2; }
	.md-align-content { grid-column: content; grid-column: 3 / -3; }
	.md-align-main    { grid-column: main;}	
}
@media (min-width: 1024px) {
	.lg-align-full    { grid-column: full; grid-column: 1 / -1; }
	.lg-align-wide    { grid-column: wide; grid-column: 2 / -2; }
	.lg-align-content { grid-column: content; grid-column: 3 / -3; }
	.lg-align-main    { grid-column: main;}	
}
@media (min-width: 1330px) {
	.xl-align-full    { grid-column: full; grid-column: 1 / -1; }
	.xl-align-wide    { grid-column: wide; grid-column: 2 / -2; }
	.xl-align-content { grid-column: content; grid-column: 3 / -3; }
	.xl-align-main    { grid-column: main;}	
}


/**
 * ------------------------------------------------------------
 * --- 06 - SOME BASICS LAYOUTS WITH SIDEBARS
 * ------------------------------------------------------------
 */
 
@media (min-width: 1024px) {
  
	/* classes à utiliser si l'on choisit qu'une première "Sidebar" s'affiche à droite */
	
	.lg-with-right-sidebar {
		
		--gutter: 20px;
		--ratio-rightside: 0.33;		
		--max-width-rightside: calc(var(--max-width-content) * var(--ratio-rightside));
		
		--layout-content:
			[content-start left-start left-end main-start]
				/*minmax(auto, calc(var(--max-width-content) - var(--max-width-rightside) - var(--gutter)))*/ 
			minmax(auto, 640px)
			[main-end right-start]
				minmax(auto, var(--max-width-rightside))
			[right-end content-end];
	}
	
	.lg-right-side { grid-column: right;}	
	
	/* classes à utiliser si l'on choisit qu'une première "Sidebar" s'affiche à gauche */
	
	.lg-with-left-sidebar {
		
		--ratio-content: 1.5;
		--ratio-side: 0.5;
		
		--layout-content:
			[content-start left-start]
				/*minmax(auto, calc(var(--max-width-main) * var(--ratio-side) - var(--gutter)))*/
				
			[left-end main-start]
				/*minmax(auto, var(--max-width-main))*/
				
			[main-end right-start right-end content-end];
	}
	
	.lg-left-side { grid-column: left;}
}

@media (min-width: 1330px) {
	
	.xl-with-two-sidebars {
		
		--gutter: 26px;
		--ratio-content: 2;
		--ratio-side: 0.5;
		
		--layout-content:
			[content-start left-start]
				minmax(auto, calc(var(--max-width-main) * var(--ratio-side) - var(--gutter)))
			[left-end main-start]
				minmax(auto, var(--max-width-main))
			[main-end right-start]
				minmax(auto, calc(var(--max-width-main) * var(--ratio-side) - var(--gutter))) 
			[right-end content-end];
	}	
	
	.xl-right-side{ grid-column: right;}
	.xl-left-side { grid-column: left;}
	
	.xl-row-start-content { grid-row: content-start;}
	.xl-row-start-main { grid-row: main-start;}
	.xl-2rows { grid-row: span 2;}
	.xl-3rows { grid-row: span 3;}
}