/*          public\assets\css\test_themeA.css   

G:\WWW\PROJET\DAILY\CodeIgniter\Travaux\MODULARISATION\step2-css.md


### 1. Palette pour l'émotion **Calme / Sérénité**

|Couleur|Code Hex|Description|
|---            |---        |---                        |
|Bleu clair     |#A8DADC    |   Calme, apaisant         |
|Vert menthe    |#81C784    |   Fraîcheur, équilibre    |
|Gris doux      |#E0E0E0    |   Neutralité, simplicité  |
|Blanc cassé    |#F5F5F5    |   Pureté, légèreté        |


*/

:root {

  /*
  --theme-primary-bg : #f5f5f5;
  --theme-primary-bg : #d5d5d5;
  */
  --col-A : #0000ff;
  --col-B : #ffffff; /* --col-B : #f5f5f5; */
  --col-C : #efefef;
  --col-D : #000000;
  --col-E : #4cb7f5;
  --col-F : #9f9f9f;
  --col-G : #7f7fff;

  --theme-primary-bg: var(--col-B);
  --theme-primary-tx: var(--col-A);
  
  --theme-secondary-bg: var(--col-C);

  /*--theme-primary-tx: #5dade2;*/
  --theme-wrapper-color: rgba(11, 78, 223, 0.6); /* Black w/opacity/see-through */

  --theme-font-document: Arial, Helvetica, sans-serif;

  /* palette Protoss pour compatibilité => a supprimer */  
  --protoss-blue:#2aa9ff;  
  --protoss-light:#7fd3ff;  
  --protoss-glow:rgba(42,169,255,.7);  
  --protoss-bg:#020a18;

}

body, html {
    font-family: var( --theme-font-document );
    background-color: var( --theme-primary-bg );
    color: var( --theme-primary-tx );
}

.wrapper{
    font-family: Arial, Helvetica, sans-serif;    
    background-color: var( --theme-wrapper-color );
}


/* --------------------         header ---------------------------------------- */

header{
    background-color: var( --theme-primary-tx ); 
}

header h1{  
    color: var( --theme-primary-bg );
}

.protoss-title{  
  color: var( --theme-primary-bg ); 
  text-shadow: 0 0 8px var(--protoss-glow), 0 0 18px var(--protoss-glow);  
} 

header > div{  
    color: var( --theme-secondary-bg );
}
/*------------------------  nav ---------------------- */

nav{
  background:var(--col-D);
}
nav a {
  color:var(--col-B);
}

/* Navbar links on mouse-over */
nav a:hover {
  background-color: var(--col-A);
}

/* Current/active navbar link */
nav a.active {
  background-color:var(--col-A);
}



/* ------------------------  article ----------------*/
  article{
    background-color: var(--col-C);
    border: 2px solid var(--col-A);
    border-radius: 20px;    
    padding: 10px;      
  }

  article > header { 
    background-color: var( --col-A ); 
  }
  
  article > header > h1 { 
    color: var(--col-C);
  }
  article > header > p { 
    color: var(--col-C);
  }  

article > section { 
    background-color: var( --col-B ); 
}

article > section > h2{
    color: var(--col-A);
}

article > section > div > div{
    background-color    : var(--col-B); 
    color               : var(--col-A);
}

article > section > div > div > h3 {
    color               : var(--col-G);
}

article > section > div > div > h4 {
    color               : var(--col-E);
}


article > section > div > div > p {
    color               : var(--col-D);
}


/* ------------------       footer    -------------------------------------- */

  footer{
    /* min-height: 5%; */
    /* width: 100%; */ /* width: 100vw; peut causer overflow */
    background-color: var(--col-A);
    color: var(--col-B);
  }