/* ================================================
  Fichier    :   css_Tags.css         
  Application:   basic Template     
                 Pour la gestion du template

  Auteur     :   . Ricardo Bandeira
  Version    :   1 
  Date       :   21/09/2025 

  Notes     :
                * tpl est la désignation de template 
                  et sera utilisé pour désigner les blocs de position (les sections du template) 
								* norme BEM Bloc__Element-name_modificateur-name_modificateur-valeur 
								exemple: .tpl__inner
								block-name__elem-name_mod-name_mod-val


	Ref. couleur : 

	// Index des sections:
	@grp Tags de base
	@grp Classes
	
	@grp Global ---- pour toutes les pages ou des éléments en général 
	@grp Zone de Override

	@grp Header
		LOGO ====
		MENU ====

	@grp wrapper

	@grp Accueil

	@grp MainContent
	@grp Autoportrait
	
	@grp Actualités 
	@grp presentation
	
	@grp Page_Erreur 

	
	@grp Articles (maincontent)

	@grp Pied de Page (ppg) 

	@grp Responsive Media queries
	@grp RESPONSIVE


  RAPPEL
	https://docs.joomla.org/Using_the_Page_Class_Suffix_in_Template_Code

  TEMPLATING WITH K2 components and so on... 
	https://getk2.org/documentation/tutorials/item/174-templating-with-k2-and-the-concepts-of-sub-templates
	https://getk2.org/documentation/tutorials/174-templating-with-k2-and-the-concepts-of-sub-templates



================================================ */

	
/* ==============================================================================
   @grp Fontface                                                                 
============================================================================== */



/* @grp Fontface  (FIN)
============================================================================== */



/* ==============================================================================
   @grp Tags de base                                                             
============================================================================== */
	:root { 
    --color_gris--clair:rgb(239,239,240);
    --color_gris--moyen:#809589;
    --color_gris--sombre:#202a25;


		--color_bg-Body:#212121;
    --color_bg-Wrapper:#FFFFFF;
    --color_texte-courant:rgb(50,50,50);
		--color_Main: rgb(71, 128, 22); /* ARCADE PRINCIPALE BLEU MACHIN */
		--color_Main_Hexa: #093;
		--color_Main_sombre:rgb(36, 68, 9); /*rgb(36, 66, 10);*/
		
		--color_link: rgb(71, 128, 22);
		--color_link--hover: rgb(36, 66, 10);
		--color_link--visited: rgb(126, 134, 120);
		--color_selection: rgb(71, 128, 22);
		--color_selection-texte: rgb(255, 255, 255);

    --color_title_h1:var(--color_gris--sombre);
    --color_title_h2:var(--color_gris--sombre);
    --color_title_h3:var(--color_gris--sombre);

    --font_main:"Poppins", Arial, Helvetica, sans-serif;
    --font_Title:"Cormorant Garamond", Arial, Helvetica, sans-serif;

		
		--grid_gap:2rem;
		--spacer: 1rem;
		
		--u-margin-top:5rem;
		
    /* Inner global */
		--inner_max-width_GLOBAL: 2200px; 
		--inner_max-width_WRAPPER: 2000px;
		--inner_max-width: 1280px; 
		--inner_margin:0 auto;
		--inner_padding:0.5em 0 0.3em;

    /* header */
    --rapport_logo:0.8;
    --rapport-reduced:0.5;
		--logo-width:calc(196px * var(--rapport_logo)) ;
		--logo-width-reduced:98px;
		--logo-height:calc(134px * var(--rapport_logo));
		--logo-height-reduced:calc(var(--logo-height) * var(--rapport-reduced)); /* 67px ;*/
    
    --header-height:calc(var(--logo-height) + 10px);
		--header-height-reduced:calc(var(--logo-height-reduced) + 10px);

		
	}

  /* @Fonts ============================================================ */
    .cormorant-garamond-light {
      font-family: "Cormorant Garamond", Arial, Helvetica, serif;
      font-weight: 300;
      font-style: normal;
    }
    
    .cormorant-garamond-regular {
      font-family: "Cormorant Garamond", Arial, Helvetica, serif;
      font-weight: 400;
      font-style: normal;
    }
    
    .cormorant-garamond-medium {
      font-family: "Cormorant Garamond", Arial, Helvetica, serif;
      font-weight: 500;
      font-style: normal;
    }
    
    .cormorant-garamond-semibold {
      font-family: "Cormorant Garamond", Arial, Helvetica, serif;
      font-weight: 600;
      font-style: normal;
    }
    
    .cormorant-garamond-bold {
      font-family: "Cormorant Garamond", Arial, Helvetica, serif;
      font-weight: 700;
      font-style: normal;
    }
    
    .cormorant-garamond-light-italic {
      font-family: "Cormorant Garamond", Arial, Helvetica, serif;
      font-weight: 300;
      font-style: italic;
    }
    
    .cormorant-garamond-regular-italic {
      font-family: "Cormorant Garamond", Arial, Helvetica, serif;
      font-weight: 400;
      font-style: italic;
    }
    .poppins-thin {
      font-family: "Poppins", sans-serif;
      font-weight: 100;
      font-style: normal;
    }
    
    .poppins-extralight {
      font-family: "Poppins", sans-serif;
      font-weight: 200;
      font-style: normal;
    }
    
    .poppins-light {
      font-family: "Poppins", sans-serif;
      font-weight: 300;
      font-style: normal;
    }
    
    .poppins-regular {
      font-family: "Poppins", sans-serif;
      font-weight: 400;
      font-style: normal;
    }
    
    .poppins-medium {
      font-family: "Poppins", sans-serif;
      font-weight: 500;
      font-style: normal;
    }
    
    .poppins-semibold {
      font-family: "Poppins", sans-serif;
      font-weight: 600;
      font-style: normal;
    }
    
    .poppins-bold {
      font-family: "Poppins", sans-serif;
      font-weight: 700;
      font-style: normal;
    }
    
    .poppins-extrabold {
      font-family: "Poppins", sans-serif;
      font-weight: 800;
      font-style: normal;
    }
    
    .poppins-black {
      font-family: "Poppins", sans-serif;
      font-weight: 900;
      font-style: normal;
    }
    
    .poppins-thin-italic {
      font-family: "Poppins", sans-serif;
      font-weight: 100;
      font-style: italic;
    }
    
    .poppins-extralight-italic {
      font-family: "Poppins", sans-serif;
      font-weight: 200;
      font-style: italic;
    }
    
    .poppins-light-italic {
      font-family: "Poppins", sans-serif;
      font-weight: 300;
      font-style: italic;
    }
    
    .poppins-regular-italic {
      font-family: "Poppins", sans-serif;
      font-weight: 400;
      font-style: italic;
    }
    
    .poppins-medium-italic {
      font-family: "Poppins", sans-serif;
      font-weight: 500;
      font-style: italic;
    }
    
    .poppins-semibold-italic {
      font-family: "Poppins", sans-serif;
      font-weight: 600;
      font-style: italic;
    }
    
    .poppins-bold-italic {
      font-family: "Poppins", sans-serif;
      font-weight: 700;
      font-style: italic;
    }
    
    .poppins-extrabold-italic {
      font-family: "Poppins", sans-serif;
      font-weight: 800;
      font-style: italic;
    }
    
    .poppins-black-italic {
      font-family: "Poppins", sans-serif;
      font-weight: 900;
      font-style: italic;
    }
    
  /* @Fonts (FIN) ====================================================== */
	*,
	*::before,::before
	*::after, ::after{
		outline:none;
		-webkit-box-sizing:border-box;
		-ms-box-sizing:border-box;
		box-sizing:border-box; /* Pour forcer le BOX-MODEL: padding and border are included in the width and height*/
	}
	*::-moz-selection,
	*::-webkit-selection,
	*::selection,
	::selection {
		background-color: var(--color_selection);
		color:  var(--color_selection-texte);
		text-shadow: none;
	}

	html { 
		scroll-behavior: smooth; 
		font-size: 62.5%; /*Ceci étabit l'utité de base à 10px = 1rem */
	}

	html,
	body{ 
		cursor:url(/images/_Design/cursor.png), auto;
		font-family: var(--font_main);
		width:100%;
		height:100%;
		margin:0;
		padding:0;
	}
  .fs_Noto{ font-family:'Noto Sans JP',Arial, Helvetica, sans-serif; }
  .CormorantGaramond{
    --font-size_garamond:3.1rem;
    font-family:'Cormorant Garamond',Arial, Helvetica, sans-serif;
    font-size:var(--font-size_garamond);
  }

	body{
    background-color: var(--color_bg-Body);
		font-size:1.6rem;
		color:var(--color_texte-courant);
		font-weight: 100;
		letter-spacing:1px;
		line-height: 1.5;
	}
  
	h1, h2, h3, h4, h5, h6 {
    margin: 0;
		font-family: inherit;
		font-weight: 100;
		line-height: 2.6rem;
	}	
	h1{
    font-family:'Cormorant Garamond',Arial, Helvetica, sans-serif;
		font-size: 4.2rem;
		text-transform: uppercase;
    color: var(--color_title_h1);
		padding: 1.5em .5em;
	}
	h2{
    font-family:'Cormorant Garamond',Arial, Helvetica, sans-serif;
    font-size: 4rem;
    font-weight: 300;
    color: var(--color_title_h2);
		line-height: 4rem;
		letter-spacing:0.2rem;
		text-transform:uppercase;
    padding: 1.5em 0 0 1em;
		transition: all 0.2s ease-in-out;
	}
	h3{
    font-size: 3.1rem;
		font-weight:100;
		color: var(--color_Main_sombre);
    color: var(--color_title_h3);
		padding: 1.5em 0 1em 0;
		letter-spacing: 3px;
		line-height: 1.1em;
	}
	h4{
		font-size: 2.1rem;
		font-weight:bold;
	}
	h5{
    font-size: 1.2rem;
  }
	h6{
    font-size: 1.2rem;
  }
	h1 span,
	h2 span, 
	h3 span,
	h4 span,
	h5 span{
		display: block;
		font-size: 0.7em;
	}
	h3 span.bg-gris-clair{ 
		font-size: 0.5em;
		background-color:var(--Arcade_gris_clair);
	}
	
	p {
		letter-spacing: 1px;
		font-weight: 400;
		line-height: 28px;
		margin: 0 0 5px;
		padding: 0 0 5px 0;
	}
	p {
		letter-spacing: 1px;
		font-weight: 400;
		line-height: 28px;
		margin: 0 0 5px;
		padding: 0 0 5px 0;
	}	
	ol,
	ul,
	ol li,
	ul li{ 	margin-left:30px; }

	a:link,
	a:visited{
		font-weight: bold;
		color: var(--color_link);
		text-decoration: none;
	}	
	a:link,
	a:visited{
		cursor:url(/images/Design/cursor_hand.png), pointer;
	
		font-weight: bold;
		color: var(--color_link--visited);
		text-decoration: none;
	}	
	
	a:hover,
	a:active{
		color: var(--color_link--hover);
	}	
	blockquote {
		padding: 0 0 0 15px;
		margin: 0 0 18px;
		border-left: 5px solid #eee;
		display: block;
		height: 150px;
		background: #555;
	}
	details {
		padding: 1rem 0 5rem 0;
	}
	.text__article.txt_en {	font-style: italic; }
/* @grp Tags de base  (FIN)
============================================================================== */