@charset "UTF-8";

/**
 * @package Simple Framework
 * @subpackage : SimpleGrid 
 * @version 12.04
 * @lastmodified 2022-05-22
 * @site http://simplecss.fr
 * @author Patrice Cahue as cpalo
 * Author Url: http://www.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-CSS                                          ---
 * ---     VERSION v12.04.05                                   ---
 * =============================================================== 
 */
 
 
/**
 * ------------------------
 * --- TABLE OF CONTENT ---
 * ------------------------
 */

/**
    1 - Reset & Default Settings
		1.1 - Changing Box Model
		1.2 - Add Inheritance
		1.3 - Set core root defaults
		1.4 - Set core body defaults
		1.5 - Other default settings
	2 - Typographical basics
		2.1 - Define the system font-stack family
		2.2 - Reset the typography
		2.3 - Typography responsive		
		2.4 - Line-Height : Leading & rythme vertical
		2.5 - Heading hierarchy
		2.6 - Line-length : measure
		2.7 - Multi-columns
	3 - Typography : Miscellaneous
		3.1 - Typographical enhancements
		3.2 - Quotes, code and poetry
		3.3 - Lists
		3.4 - Tables
		3.5 - Hyperlinks
		3.6 - Images et medias
	4 - Forms : reset
 */
 
 
/**
 * ---------------------------------------------------------------
 * --- 01 - Reset & Default Settings
 * ---------------------------------------------------------------
 */
 
/**
 * - 1.1 - Changement du modèle de boite
 * -------------------------------------
 */
  
html {
	box-sizing: border-box;
}

/**
 * - 1.2 - Add Inheritance
 * -----------------------
 */
 
*,
::before,
::after {
	box-sizing: inherit; 
	background-repeat: no-repeat;
	/* Avoid min-width: auto on flex and grid items */
	min-width: 0; 
}

::before,
::after {
	text-decoration: inherit; 
	vertical-align: inherit;
}

/**
 * - 1.3 - Set core root defaults
 * ------------------------------
 */ 
 
html {
	font-size: 100%;	/* 1rem = 16px */
    cursor: default; 
	-moz-tab-size: 4; 
		 tab-size: 4; 
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: 100%; 
		-ms-text-size-adjust: 100%;  
	overflow-break: break-word; 
}

html:focus-within {
	scroll-behavior: smooth;
}

/**
 * - 1.4 - Set core body defaults
 * ------------------------------
 */
 
:where(body) {
	margin: 0;
	min-height: 100vh;
    scroll-behavior: smooth; 
}

/**
 * --- 1.5 - Other default settings
 * --------------------------------
 */
 
details {
	display: block;
}

summary {
	display: list-item;
}


/**
 * ---------------------------------------------------------------
 * --- 02 - Typographical basics
 * ---------------------------------------------------------------
 */ 
 
/**
 * - 2.1 - Define the system font-stack family 
 * -------------------------------------------
 */ 
 
:root {		
	--system-ui:
		system-ui,
		-apple-system,			/* macOS 10.11-10.12 */
		"Segoe UI",				/* Windows 6+ */
		"Roboto",				/* Android 4+ */
		"Ubuntu",				/* Ubuntu 10.10+ */
		"Cantarell",			/* Gnome 3+ */
		"Noto Sans",			/* KDE Plasma 5+ */
		sans-serif,				/* fallback */
		"Apple Color Emoji",	/* macOS emoji */
		"Segoe UI Emoji",		/* Windows emoji */
		"Segoe UI Symbol",		/* Windows emoji */
		"Noto Color Emoji";		/* Linux emoji */
		
	--ui-monospace:
		ui-monospace,
		Menlo,					/* macOS 10.10+ */
		Consolas,				/* Windows 6+ */
		Roboto Mono,			/* Android 4+ */
		Ubuntu Monospace,		/* Ubuntu 10.10+ */
		Noto Mono,				/* KDE Plasma 5+ */
		Oxygen Mono,			/* KDE Plasma 4+ */
		Liberation Mono,		/* Linux/OpenOffice fallback */
		"Apple Color Emoji",	/* macOS emoji */
		"Segoe UI Emoji",		/* Windows emoji */
		"Segoe UI Symbol",		/* Windows emoji */
		"Noto Color Emoji";		/* Linux emoji */	 
}

/**
 * --- 2.2 - Reset the typography ---
 * ----------------------------------
 */
 
:root {
	--font-text: var(--system-ui);	
	--font-heading: var(--system-ui);
	--font-monospace: var(--ui-monospace);
	--font-cursive: cursive_standart;
	--font-fantasy: fantasy;
	
	/* background  for body */
	--background-color-body: #fff; 			
	/* couleur du texte par défaut : */
	--color-text: hsl(210,11%,15%);  /* #212529 -  bootstrap */	
	/* couleur des titres */
	--color-heading: hsl(150,100%,13%); /* #004221; Vert foncé Cahue.Net */
}

:where(body) {
	background-color: var(--background-color-body); 
	font-family: var(--font-text);	
	font-weight: normal;
	color: var(--color-text);
	text-align: left; 	
}

:where(code, kbd, samp) {
	font-family: var(--font-monospace), monospace; 
}

:where(pre) {
	-moz-tab-size: 2;
         tab-size: 2;
	white-space: pre-wrap;
	line-height: normal;
	overflow: auto;
	-ms-overflow-style: scrollbar;
}

:where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--font-heading);	
	font-weight: 500;
	color: var(--color-heading);
}

:where(h1, h2, h3) { 
	letter-spacing: -1px;
}
	@media (min-device-width: 768px) {	
		:where(h1, h2, h3) { 
			letter-spacing: normal;
		} 
	}
	
/**
 * - 2.3 - Responsive typography
 * -----------------------------
 */ 
 
 :root {
	/* font-size-de-base en rem : 1rem = 16px */	   
	--fs: 1rem;
	/* line-height-de-base */					
	--lh: 1.5;
}

body {
	font-size: var(--fs);
	line-height: var(--lh);
}

code,
kbd,
samp,
pre {
	font-size: var(--fs); 
}

.site-content,
.site-main {	   
	--fs: 1rem; 
	font-size: var(--fs); 
}

/**
 * - 2.4 - Heading hierarchy
 * -------------------------
 */ 
 
 /* Chaque élement sectionnant a un titre, mais pas obligatoirement visible 
.no-visible-avoid-untitled { display: none; }*/

:root {
	
	/* pentatonic scale ou classic typographic scale : */
	/* 1  1.149  1.32  1.52  1.74  2.00 */
	--scale1: 1.15;
	/* minor-third : */
	/* 1  1.2  1.44  1.73  2.07  2.49 */
	--scale2: 1.2;
	/* major-third : */
	/* 1  1.25  1.56  1.95 2.44 3.05 */
	--scale3: 1.25;
			
	--scale : var(--scale1);
	--x0: 1;								/* p, h6 */
	--x1: var(--scale);						/* h5 */
	--x2: calc(var(--x1) * var(--scale));	/* h4 */
	--x3: calc(var(--x2 )* var(--scale));	/* h3 */
	--x4: calc(var(--x3) * var(--scale));	/* h2 */
	--x5: calc(var(--x4) * var(--scale));	/* h1 */	
}
	
	.site-content,
	.site-main {			
		--scale : var(--scale1);
		--x0: 1;								/* p, h6 */
		--x1: var(--scale);						/* h5 */
		--x2: calc(var(--x1) * var(--scale));	/* h4 */
		--x3: calc(var(--x2 )* var(--scale));	/* h3 */
		--x4: calc(var(--x3) * var(--scale));	/* h2 */
		--x5: calc(var(--x4) * var(--scale));	/* h1 */
	}

h6 { font-size: calc(var(--fs) * var(--x0)); }
h5 { font-size: calc(var(--fs) * var(--x1)); }
h4 { font-size: calc(var(--fs) * var(--x2)); }
h3 { font-size: calc(var(--fs) * var(--x3)); }
h2 { font-size: calc(var(--fs) * var(--x4)); }
h1 { font-size: calc(var(--fs) * var(--x5)); }

/**
 *  - 2.5 - Line-Height : Leading & vertical rythm
 *  ----------------------------------------------
 */ 
 
:root {
	/* spacing unit de base = nombre magique
		h --> height --> top/bottom	--> row 	: margin & padding for top & bottom
		w --> width  --> left/right --> column  : margin & padding for left & right 
	*/
	--spacing-w: var(--fs);					 
	--spacing-h: calc(var(--fs) * var(--lh)); 	
}
.site-content,
.site-main { {
	--spacing-w: var(--fs);					 
	--spacing-h: calc(var(--fs) * var(--lh)); 	
}

/* si margin-bottom: calc(var(--spacing-h) * 1);  
   ==> Margin size. No unit, because it's a multiple of the spacing unit. */ 
   
h1, h2, h3, h4, h5, h6,
p,
blockquote,
pre,
figure,
ul,
ol,
dl,
dt,
dd,
form {
    margin-top: 0;
	margin-bottom: var(--spacing-h);
}  

/* Avec le positionnement css grid-layout pas de fusion des marges */

/**
 * Il faut normalement éviter de spécifier line-height avec des unités absolues (pixels ou points), 
 * afin de ne pas affecter un éventuel redimensionnement du texte dans un navigateur. 
 * On a cependant spécifié une hauteur en pixels pour les titres <h1> à <h6>, 
 * qui peuvent être illustrés d’une icone de 32 px.
 * Mais aussi par le mode de calcul de la line-height que nous faisions :
 *
 * 		--fs-h4: calc(var(--fs-h5) * var(--scale));
 *		--lh-h4: calc(var(--nb-lines-h4) * var(--spacing-h) / var(--fs-h4))
 *		h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
 */

/* lh:1.5 / 16px : 1  1.15  1.32  1.52  1.75  2.01 */
h1, h2, h3, h4, h5, h6 {	
	line-height: calc(var(--nb-lines) * var(--spacing-h)); 
}
h6 { --nb-lines:1 ; }   /* 16.0px - 24px */
h5 { --nb-lines:1 ; }	/* 18.4px - 24px */
h4 { --nb-lines:1 ; }	/* 21.2px - 24px */
h3 { --nb-lines:2 ; }	/* 24.3px - 48px */
h2 { --nb-lines:2 ; }	/* 28.0px - 48px */
h1 { --nb-lines:2 ; }	/* 32.2px - 48px */


/**
 * ---------------------------------------------------------------
 * --- 03 - Typography : Miscellaneous
 * ---------------------------------------------------------------
 */
 
/**
 * -3.1 - Typographical enhancements
 * ---------------------------------
 */
   
:where(hr) {
	box-sizing: content-box; 
	height: 0; 
	overflow: visible; 
	margin: 0; 
	border: solid;
	border-width: .1rem 0 0;
}

:where(abbr[title]) {
	text-decoration: underline;
	text-decoration: underline dotted;
	cursor: help; 
}

address {
	font-style: normal;
	line-height: inherit;
}

:where(b, strong) {
	font-weight: bolder;    
}

:where(small) {
	font-size: 80%;			
}

sub,
sup {
	font-size: 75%;			
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}	

sup {
	top: -0.5em;			
} 


/**
 * -3.2 - Quotes, code and poetry
 * ------------------------------
 */
 
/* Par défaut blockquote : 
 * margin-left: 40px;
 * margin-right: 40px;
*/

blockquote {
	margin-left: calc(var(--spacing-w) * 2.5);
	margin-right: calc(var(--spacing-w) * 2.5); 
}

/**
 * - 3.3 - Lists
 * -------------
 */
   
/* Par défaut lists : 
 * ol, ul { padding-left: 40px; padding-right: 40px; }
 * dd { margin-left: 40px; }
 */
 
ol,
ul {
	padding-left: calc(var(--spacing-w) * 2.5);
	padding-right:calc(var(--spacing-w) * 2.5);
}

/**
 * Evite des marges supplémentaires sur les éléments imbriqués ("nested") 
 * par défaut: ol ul, ul ol,ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
 */

dl dl,
dl ol,
dl ul,
ol dl,
ul dl {
	margin: 0;
}

dt {
	font-weight: bold;
}

dd {
	margin-left: calc(var(--spacing-w) * 2.5);	
}

nav ol,
nav ul {	
	padding-left: 0;
	padding-right: 0;
	list-style: none;
}

:where(0l[class]),
:where(ul[class]) {
	padding: 0;
	margin: 0;
	list-style-type: none;
}


/**
 * - 3.4 - Tables
 * --------------
 */
 
table {
	border-collapse: collapse;
	border-spacing: 0;
}
	caption,
	th {
		text-align: left;
	}
	tr {
		border-bottom: 1px solid;
		border-color: #bbb;
		transition-duration: .2s;
	}
		tr:hover {
			background-color: #dbedf9;
			transition-duration: .2s;
		}
	td,
	th {
		padding-left:  0.5rem; 	
		padding-right: 0.5rem;  
	}
	
/**
 * - 3.5 - Hyperlinks
 * ------------------
 */
 
 /** 
 * @see http://romy.tetue.net/souligner-les-liens-mais-pas-tous
 * On garde le comportement par défaut
 * mais on ne souhaite conserver ce soulignement par defaut que dans le texte courant 
 */
   
:root { 
	--color-link: hsl(204,71%,49%);		/* bleu plucss : #258fd6; */
	--color-link-2:	hsl(211,100%,35%);  /* bleu foncé effacé : #0056b3 */
	/*--color-link-2: inherit; */
 }

a { 
	color: var(--color-link);
	text-decoration: none;
	/* color: inherit; */
	/* text-decoration: underline; recommandé par défaut */
}

ul a { 
	text-decoration: none; 
}

a:link {}

a:visited { 
}

a:focus {
	color: var(--color-link-2);
	text-decoration: underline;
	outline: thin dotted;
}

a:hover { 
	color: var(--color-link-2);
	text-decoration: underline;
	outline: thin dotted; 	
}

a:active {
	color: var(--color-link-2);
	text-decoration: underline;
}
	
/** --- Liens dans des titres --- */

h1 a,
h2 a,
h3 a,
h1 a:hover,
h2 a:hover,
h3 a:hover,
h1 a:active,
h2 a:active,
h3 a:active {
	color: var(--color-heading);
	text-decoration: none;
}

/**
 * - 3.6 - Images et médias
 * ------------------------
 */
   
/* Par défaut figure : 
	margin-left: 40px;
	margin-right: 40px;
*/

figure {
	margin-left:  calc(var(--spacing-w) * 2.5 );
	margin-right: calc(var(--spacing-w) * 2.5 );
}

img {
	border: 0;
	max-width: 100%;
	height: auto;	
} 
 
 
 /**
 * ---------------------------------------------------------------
 * --- 04 - Forms : reset
 * ---------------------------------------------------------------
 */