/* SITE LEIDA TECHNOLOGIES - VERSION DU XX/03/2026
                    Feuille de style                      */


#logo
{
	width: 100%;
	height: auto;	
}

/*	Définition des couleurs principales */
:root
{
	--main-bg-color   : white;
	--box-bg-color    : #3f526b;
	--text-color      : #3f526b;
	--hyperlink-color : #1092d3;
	--hyper-hoo-color : #3f526b;
	--green-color     : #43ef9c;
}

a
{
  color: white;
  text-decoration: none;
}

/*=====================================================================
                          DEFINITION DES CLASSES
=====================================================================*/
/* Police des pages */
.open-sans-<uniquifier>
{
  font-family            : "Open Sans", sans-serif;
  font-optical-sizing    : auto;
  font-weight            : <weight>;
  font-style             : normal;
  font-variation-settings: "wdth" 100;
}

/*---------------------------------------------------------------------
                        Barre de navigation 
---------------------------------------------------------------------*/
.navbar
{
	overflow         : hidden;
	background-color : var(--box-bg-color);
	position         : fixed;
	top              : 0;
	left             : 0;
	width            : 100%;
}
/* Menu de navigation */
.navbar a
{
	float            : right;
	display          : block;
	color            : white;
	text-align       : center;
	padding          : 2% 16px 10px 10px;
	text-decoration  : none;
	font-size        : 17px;
	font-family      : 'Open Sans', sans-serif;
}

.navbar a:hover
{
	background       : #ddd;
	color            : #3F3F3F;
}

.navbar header-img
{
	width : 5%;
}

/* Titre "leida Technologies" */
.navbar p
{
	color            : white;
	float            : left;
	padding-left     : 0px;
	font-family      : 'Open Sans', sans-serif;
}


/* Pour centrage des images dans les box */
.center
{
  display     : block;
  margin-left : auto;
  margin-right: auto;
  width       : 50%;
}

/* Pour centrage des titres des box */
.text-center
{
  margin-left : auto;
  margin-right: auto;
  text-align  : center;
  font-size   : 150%;
  /*width: 30%;*/
}

/* Légende des images */
.legend
{
  margin-left : auto;
  margin-right: auto;
  text-align  : center;
  font-size   : 90%;	
}

body
{
  margin-left     : 2%;
  margin-right    : 2%;
  margin-top      : 3%;
  background-color: var(--main-bg-color);
}

h1
{
	color           : var(--text-color);
	font-size       : 150%; 
	font-family     : 'Open Sans', sans-serif;
	text-align      : center;
}

h2
{
	color           : var(--text-color);
	font-size       : 100%; 
	font-family     : 'Open Sans', sans-serif;
	text-align      : left;
}

.cons
{
	color           : var(--text-color);
	font-size       : 85%; 
	font-family     : 'Open Sans', sans-serif;
	text-align      : left;
}
/*=====================================================================
                 Eléments de la grille des pages index
=====================================================================*/
.products
{
	grid-area: products;
}

.visao
{
	grid-area: visao;
}

.ulight
{
    grid-area: ulight;	
}

.ulightvision
{
    grid-area: ulightvision;
}

.spyrogira
{
    grid-area: spyrogira;
}

.intro{
    grid-area: intro;
}

.leidatech1
{
    grid-area: leidatech1;
}
.leidatech2
{
    grid-area: leidatech2;
}

.ardoptxt
{
    grid-area: ardoptxt;
}

.ardoptxt a:hover
{
	background       : #ddd;
	color            : #3F3F3F;
}

.ardoplogo
{
    grid-area: ardoplogo;
}

.wrapper
{
    background-color: #00;
    color: #444;
    display : grid;
    grid-gap: 1em;
    grid-template-areas:
		 "intro"
		 "products"
		 "visao"
		 "ulightvision"
		 "ulight"
		 "spyrogira"
		 "ardoptxt"
		 "ardoplogo"
		 "leidatech1"
		 "leidatech2";
}

@media only screen and (min-width: 700px)
{
	.wrapper
	{
		grid-template-columns: 100%;
		grid-template-areas:
			"intro"
			"products"
			"visao"
			"ulightvision"
			"ulight"
			"spyrogira"
			"ardoptxt"
			"ardoplogo"
			"leidatech1"
			"leidatech2";
	}
}

@media only screen and (min-width: 800px)
{
    .wrapper
	{
	  row-gap              : 5%;
	  column-gap           : 2%;
      grid-template-columns: 32% 32% 32%;
      grid-template-areas:
		  "intro      intro        intro"
		  "products   products     products"
		  "visao      ulightvision ulight"
		  "spyrogira  spyrogira    spyrogira"
		  "ardoptxt   ardoptxt     ardoplogo"
		  "leidatech1  leidatech1    leidatech2";
      max-width: auto;
    }
  }

.box
{
  background-color  : var(--box-bg-color);
  color             : #fff;
  font-weight       : bold;
  border-radius     : 10px;
  padding           : 10px;
  font-size         : 100%; 
  font-family       : 'Open Sans', sans-serif;
}

.intro
{
	text-align      : center;
	color           : white;
	background      : linear-gradient(90deg, var(--box-bg-color), #7e7e82);
	font-size       : 130%;
}

.products
{
	color           : var(--text-color);
	font-size       : 150%; 
	font-family     : 'Open Sans', sans-serif;
	font-weight     : bold;
	text-align      : center;
}

.text-intro
{
	text-align      : center;
	color           : var(--text-color);
	background-color: var(--main-bg-color);
	font-size       : 130%;
}
.leidatech1
{
	font-size       : 85%;
	font-weight     : normal;
	color           : var(--text-color);
	background-color: var(--main-bg-color);
}

.leidatech2
{
	font-size       : 85%;
	font-weight     : normal;
	color           : var(--text-color);
	background-color: var(--main-bg-color);
}

.ulight {
  background-color  : #ccc;
  color             : #444;
}


.spyrogira
{
	border-radius   : 0px;
	padding         : 0px;
	background-color: white;
	color           : var(--text-color);
}

.ardoptxt
{
	font-size       : 120%;
	font-weight     : bold;
	color           : var(--text-color);
	background-color: white;
}
.ardoplogo
{
	background-color: white;
}

.hyperlink
{
	color: var(--hyperlink-color);
}

/*=====================================================================
           Eléments de la grille des pages Support
=====================================================================*/
.support
{
	border                : 1px solid var(--box-bg-color);
	padding               : 10px;
	font-family           : 'Open Sans', sans-serif;
	background-color      : white;
}
.support-wrapper
{
	display               : grid;
	grid-template-columns : 85% auto;
	color                 : var(--text-color);
	border                : 1px solid var(--box-bg-color);
}
.support a
{
	color : var(--hyperlink-color);
}

.support a:link {
  color: var(--hyperlink-color);
}

.support a:visited
{
  color: #437a16;
}
.support a:focus {
  border-bottom: 1px solid;
  color: #7e04f7;
}
.support a:hover
{
  color: red;
  text-decoration-color: red;
}
/*---------------------------------------------------------------------
                         Manuels utilisateurs
---------------------------------------------------------------------*/
.ulv
{
	grid-column           : 1/2;
	grid-row              : 1/2;
}

.download1
{
	grid-column           : 2/3;
	grid-row              : 1/2;
	text-align            : center;
}
.download2
{
	grid-column           : 2/3;
	grid-row              : 2/3;
	text-align            : center;
}
.ulight-man
{
	grid-column           : 1/2;
	grid-row              : 2/3;
}
/*---------------------------------------------------------------------
                      Plaquettes de présentation (ds)
---------------------------------------------------------------------*/
.visao-ds
{
	grid-column           : 1/2;
	grid-row              : 1/2;	
}
.ulight-ds
{
	grid-column           : 1/2;
	grid-row              : 2/3;	
}
.phase-ds-ds
{
	grid-column           : 1/2;
	grid-row              : 3/4;	
}
.dld-ds1
{
	grid-column           : 2/3;
	grid-row              : 1/2;
	text-align            : center;
}
.dld-ds2
{
	grid-column           : 2/3;
	grid-row              : 2/3;
	text-align            : center;
}
.dld-ds3
{
	grid-column           : 2/3;
	grid-row              : 3/4;
	text-align            : center;
}
.dld-ds4
{
	grid-column           : 2/3;
	grid-row              : 4/5;
	text-align            : center;
}
.dld-ds5
{
	grid-column           : 2/3;
	grid-row              : 5/6;
	text-align            : center;
	vertical-align: middle;
}
/*---------------------------------------------------------------------
                      Publications (pub)
---------------------------------------------------------------------*/
.cpa
{
	grid-column           : 1/2;
	grid-row              : 1/2;	
}
.new-focus
{
	grid-column           : 1/2;
	grid-row              : 2/3;	
}
.oqapi
{
	grid-column           : 1/2;
	grid-row              : 3/4;	
}
.focus-on1
{
	grid-column           : 1/2;
	grid-row              : 4/5;	
}
/*=====================================================================
           Eléments de la grille pour le pied de page
=====================================================================*/
.pdp-wrapper
{
	display               : grid;
	grid-template-columns : 60% auto;
	color                 : var(--text-color);
}

.pdp-mentions
{
	font-size       : 85%;
	font-weight     : normal;
	color           : var(--text-color);
	background-color: var(--main-bg-color);
}

.pdp-heberge
{
	font-size       : 85%;
	font-weight     : normal;
	color           : var(--text-color);
	background-color: var(--main-bg-color);
	text-align      : right;
}