/*
!! NOTE about @import !!
La règle @ @import est utilisée afin d'importer des règles 
à partir d'autres feuilles de style. Ces règles @ doivent être utilisées AVANT toutes les autres règles, 
à l'exception de @charset. @import n'est pas une instruction imbriquée et ne peut donc pas être utilisée 
à l'intérieur de groupe de règles conditionnelles.
*/

/* ====================================
	>>> START RESET & NORMALIZE IMPORTS
	========================================== */
	@import "reset/normalize.css";
	@import "reset/reset-meyerweb.css";
/* ========================================
	END RESET & NORMALIZE IMPORTS <<<
	================================= */


/* ====================================
	>>> START LIBS & FRAMEWORKS IMPORTS
	========================================== */
   /* !! @import(s) HERE "some-path-or-link-to-file.css"; !! */
/* ========================================
	END LIBS & FRAMEWORKS IMPORTS <<<
	================================= */


/* ========================
	>>> START FONTS IMPORTS
	============================== */
   /* !! @import(s) HERE "some-path-or-link-to-file.css"; !! */
	@import "fonts/typo.css";
/* ========================================
	END FONTS IMPORTS <<<
	====================== */


/* =======================
	>>> START HRAF IMPORTS
	=========================== */
   /* !! @import(s) HERE "some-path-or-link-to-file.css"; !! */
	@import "main-principal.css";
	@import "main-secondary.css";
/* =========================
	END MY IMPORTS <<<
	=================== */


/* ===============
	>>> START GRID
   ===================== */
	/* --------------------------- */
	/* --- NOTES SUR LA GRILLE --- */
	/* ----- ABOUT THE GRID ------ */
	/* --------------------------- */
	/* --------------------------- 
		LAPTOP/DESKTOP
		Device Width :		1280px
		Grid Width :		1140px
		Grid Margin :		10px
		Columns :			15
		Column Width :		56px
		Gutter Width :		20px
	------------------------------ */
	/* --------------------------- 
		TABLET
		Device Width :		768px (portrait)
		Device Width :		1024px (landscape)
		Columns :			--
		Grid Width :		---px
		Grid Margin :		---px
		Column Width :		---px
		Column Padding :	---px
		Gutter Width :		---px
	------------------------------ */
	/* --------------------------- 
		MOBILE
		Device Width :		360px (portrait)
		Columns :			--
		Grid Width :		---px
		Grid Margin :		---px
		Column Width :		---px
		Column Padding :	---px
		Gutter Width :		---px
	------------------------------ */

/* Desktop :: base->000px - gouttière->0px = 000px */
/* .row-dsk { */
.grid-desktop__row {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
}
/* .column-dsk { */
.grid-desktop__column {
	flex: 1;
}
[class^="grid-desktop__column"] {
	/* padding: 0 .625em; */
	padding: 0;
}
/* pour scinder en 2/5 + 3/5*/
/* .column-dsk--2of5 { */
.grid-desktop__column--2of5 {
	flex: 0 0 40%;
}
.grid-desktop__column--3of5 {
	flex: 0 0 60%;
}

/* Mobile :: base->000px - gouttière->0px = 000px */
.grid-mobile__row {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
}
.grid-mobile__column {
	flex: 1;
}
[class^="grid-mobile__column"] {
	padding: 0;
}
/* pour scinder en 2 */
.grid-mobile__column--1of2 {
	flex: 0 0 50%;
}
.grid-mobile__column--2of2 {
	flex: 0 0 50%;
}

/* Mobile-inside :: base->000px - gouttière->0px = 000px */
.row-mbl_nsd {
	display: flex;
}
.column-mbl_nsd {
	flex: 1;
}
[class^="column-mbl_nsd"] {
	/* padding: 0 4px; */
	padding: 0;
}
/* pour scinder en xxx */
.column-mbl_nsd--1of3 {
	flex: 0 0 32.5%;
}
.column-mbl_nsd--2of3 {
	flex: 0 0 67.5%;
}
/* pour scinder en 1/2 + 2/2*/
.column-mbl_nsd--1of2 {
	flex: 0 0 50%;
}
.column-mbl_nsd--2of2 {
	flex: 0 0 50%;
}
/* ===================
	END GRID <<<
   ============= */


/* =================
	>>> START BASICS
   ======================= */

/* --------------------- */
/* --- GLOBAL BASICS --- */
/* --------------------- */
html,
body {
	height: 100%;
	margin: 0;
}
* {
	box-sizing: content-box;
}

/* ------------------------------ */
/* --- STYLES DE TEXTE GLOBAL --- */
/* ------------------------------ */

/* --- Corps du texte --- */
html,
body {
    font-family: 'Open Sans';
    font-family: 'Open Sans';
    font-weight: 400;
    font-style: normal;
	font-size: 0.813em;
	line-height: 1.3em;
}

/* --- Titres --- */
/* h1, h2, h3, h4, h5, h6 {
	margin: 1em 0 .5em 0;
}
h1, h2 {
	font-weight: 400;
}
h1 {
	font-size: 3em;
}
h2 {
	font-size: 1.8em;
}
h3 {
	font-size: 1.2em;
}
h4 {
	font-size: 1em;
} */

/* ---------------- */
/* --- COULEURS --- */
/* ---------------- */

/* --- Prinicpal --- */
body {
	color: #3F4444;
	background-color: #fafafa;;
}
a, a:visited {
	color: #893f00;
	cursor:pointer;
}
a:hover, a:focus {
	color: #8d0000;
	cursor:pointer;
}
a img, a:hover img, a:active img { background-color:none; }

/* -------------------- */
/* --- GLOBAL FLEX --- */
/* -------------------- */


/* =====================
	END BASICS <<<
   =============== */


/* -------------------- */
/* --- GLOBAL WIDTH --- */
/* -------------------- */

/* :: Responsive/Mobile FIRST :: */
#container__global {
	width: auto;
	height: auto;
	/* width: 100%;
	height: 100%;
	max-width: 360px; */
	display: flex;
	justify-content: center;
	position: relative;
	margin: 0 auto;
	padding: 0;
    /* 'overflow-x' évite l'affichage par défaut du menu*/ 
	overflow-x: hidden !important;
	/* background-color: red */
}


/* ============================================== */
/* === Media-Queries & Breakpoints (as of 2024) === */
/* ============================================== */
/* === BEGIN Responsive === */

/* --- DEVICES --- */
/* --- SMARTPHONES --- */
/* MOBILE [Portrait] :: 360px -> target Most Smartphones devices (Portrait) */
@media screen and (max-width: 360px) and (orientation: portrait) {
    #container__global {
        width: 100vw;
        /* width: calc(100vw - 16px*2); */
        max-width: 360px;
        height: 100%;
        /* -- Full viewport height -- */
        /* height: 100dvh; */
        /* height: 100vh; */
        margin: 0 auto;
        /* background-color: coral; */
    }
}
/* [Portrait] Target Smartphones devices w/ max-height: 640px ex. Sony-xPeria */
@media screen and (max-width: 360px) and (max-height: 640px) and (orientation: portrait) {
    #container__global {
        width: 100vw;
        /* width: calc(100vw - 16px*2); */
        max-width: 360px;
        height: 100%;
        /* -- Full viewport height -- */
        /* height: 100dvh; */
        /* height: 100vh; */
        margin: 0 auto;
        /* background-color: DarkSlateGray; */
    }
}
/* MOBILE [Portrait] :: 361px to 767px -> target Most New Smartphones devices as of : early 2020s (Portrait) */
@media screen and (min-width: 361px) and (max-width: 767px) and (orientation: portrait) {
    #container__global {
        width: 100vw;
        /* width: calc(100vw - 16px*2); */
        max-width: max-content;
        height: 100%;
        /* -- Full viewport height -- */
        height: 100dvh;
        /* height: 100vh; */
        /* height: calc(var(--vh, 1vh) * 100); */
        margin: 0 auto;
        /* background-color: firebrick; */
    }
}
/* --- TABLETS --- */
/* TABLET [Portrait] :: 768px to 1279px -> target most Tablet devices */
@media screen 
and (min-width: 768px) 
and (max-width: 1279px) 
and (max-height: 1279px) 
and (orientation: portrait) 
and (min-aspect-ratio: 3/4) 
and (max-aspect-ratio: 3/2) 
{
    #container__global {
        width: 100vw;
        max-width: 100vw;
        height: 100%;
        /* height: 100vh; */
        /* Full viewport height */
        height: 100dvh;
        margin: 0 auto;
        /* background-color: springgreen; */
    }
    /* :: Facultatif ::
    Exercice de style (disons) : vérifie si véritablement une tablette 
    -> voir responsiveCustomDevices.js +.json associé */
    .tablet#container__global {
        width: 100vw;
        max-width: 100vw;
        height: 100%;
        height: 100dvh;
        margin: 0 auto;
        /* background-color: blue; */
    }
}
/* TABLET [Landscape] :: 768px to 1279px -> target most Tablet devices */
@media screen 
and (max-width: 1279px) 
and (max-height: 768px) 
and (orientation: landscape) 
and (min-aspect-ratio: 3/4) 
and (max-aspect-ratio: 3/2) 
{
    #container__global {
        width: 100vw;
        max-width: 100vw;
        /* height: 100vh; */
        /* Full viewport height */
        height: 100dvh;
        justify-content: start;
        margin: 0 auto;
        /* background-color: palevioletred; */
    }
    /* :: Facultatif ::
    Exercice de style (disons) : vérifie si véritablement une tablette 
    -> voir responsiveCustomDevices.js +.json associé */
    .tablet#container__global {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        justify-content: start;
        margin: 0 auto;
        /* background-color: red; */
    }
}
/* --- iPad 8° gen :: !testing! :: --- */
/* --- (Portrait) --- */
@media screen 
and (min-width: 768px) 
and (max-width: 1279px) 
and (max-height: 1279px) 
and (orientation: portrait) 
and (min-aspect-ratio: 3/4) 
{
    .iPad#container__global {
        width: 100%;
        height: 100%;
        align-content: center;
        /* background-color: magenta; */
    }
}
/* --- (Landscape) --- */
@media screen 
and (max-width: 1279px) 
and (max-height: 768px) 
and (orientation: landscape) 
and (min-aspect-ratio: 3/4)
{
    .iPad#container__global{
        width: 100%;
        height: 100%;
        align-content: center;
        /* background-color: olive; */
    }
}
/* --- END iPad 8° gen !testing! --- */

/* --- COMPUTERS --- */
/* LAPTOP/DESKTOP :: 1024px to 1366px -> target most "modern" Laptops and desktops */
@media screen 
and (min-width: 1024px) 
and (max-width: 1365px) 
/* and (min-aspect-ratio: 3/4) */
/* and (min-aspect-ratio: 1/1)  */
/* and (aspect-ratio: 8/5)  */
{
    #container__global {
        max-width: 1365px;
        flex-direction: row;
        justify-content: start;
        align-items: center;
        margin: 0 auto;
        /* background-color: deepskyblue; */
    }
}
/* DESKTOP :: 1366px to large screens -> target most large screens */
@media screen 
and (min-width: 1366px) 
and (max-width: 1679px)
and (min-aspect-ratio: 8/5) 
{
    #container__global {
        max-width: 1679px;
        justify-content: start;
        flex-direction: row;
        align-items: center;
        margin: 0 auto;
        /* background-color: forestgreen; */
    }
}
/* WIDE-SCREENS :: 1680px+  -> target wide and very large screens */
@media screen 
and (min-width: 1680px) 
and (min-aspect-ratio: 8/5) 
{
    #container__global {
        justify-content: start;
        flex-direction: row;
        align-items: center;
        margin: 0 auto;
        /* background-color: navajowhite; */
    }
}
/* === END Responsive === */

/*
 __                        ___  ____                    __      
/\ \                     /'___\/\  _`\   __          __/\ \__   
\ \ \___   _ __    __   /\ \__/\ \ \/\ \/\_\     __ /\_\ \ ,_\  
 \ \  _ `\/\`'__\/'__`\ \ \ ,__\\ \ \ \ \/\ \  /'_ `\/\ \ \ \/  
  \ \ \ \ \ \ \//\ \L\.\_\ \ \_/ \ \ \_\ \ \ \/\ \L\ \ \ \ \ \_ 
   \ \_\ \_\ \_\\ \__/.\_\\ \_\   \ \____/\ \_\ \____ \ \_\ \__\
    \/_/\/_/\/_/ \/__/\/_/ \/_/    \/___/  \/_/\/___L\ \/_/\/__/
                                                 /\____/        
                                                 \_/__/         
	===================================================================
	±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±
	## CSS ##
	2020-2024 © Achraf (aka hrafDigit)
	https://www.achrafely.fr
		https://codepen.io/hraf
		https://github.com/hrafdigit
	made w/ ¶ from Paris, France [at] Grand Jardin Digital
		https://www.grandjardindigital.fr
	±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±±
	================================================================== 
*/