/* ---------------- */
/* Root variables  
/* Font faces       */
/* Colours          */
/* Animations       */
/* ---------------- */

:root{
    
    
/* ---------------------------------------- */
/* MEASUREMENTS ----------------------------- */
/* ---------------------------------------- */

  --page-max-width: 1280px;
  --elements-width: 100% - 30rem, var(--page-max-width);
  
  --elements-width-small: 90%;
  
/* GRID RESPONSIVE LAYOUT ----------------------------- */

  /* User values */
  --grid-layout-gap: 3.5rem;
  --grid-column-count: 2;
  --grid-item--min-width: 330px;
  
  /* Calculated values */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));	
  
  
  
  
  /* .container, #hero{
  width: min(100% - 30rem, var(--page-max-width));
} */


/* ---------------------------------------- */
/* Color variables ------------------------ */
/* ---------------------------------------- */

  --primary-color: rgba(116, 218, 133, 1);
  --primary-color-light: rgba(00, 235, 250, 1);
  --background-color: rgba(245, 243, 243, 0.5);
  --section-bg-color: white;
  --section-shadow-color: var(--primary-color-light);
  
  --txt-color: #000000;
  --txt-color-2: #515154;
  --txt-color-3: #86868B;
  --txt-color-dark: #303030;
  --footer-text-color: var(--txt-color);

  --highlight-color-1: hsla(193, 100%, 79%, 0.9);
  --highlight-color-2: hsla(193, 100%, 79%, 0.4);
  --highlight-color-3: hsla(193, 100%, 75%, 0.8);

  --hr-color: #D2D2D7;

/* THEMATICS ----------*/
    
/* Environnement */
  --environment-color: hsla(130, 58%, 66%, 1);
  --environnement-txt-color:  hsla(130, 70%, 40%, 1);
  --environnement-btn-color:  hsla(130, 85%, 35%, 1);

/* Santé */
  --sante-color: hsla(353, 80%, 70%, 1);
  --sante-txt-color:  hsla(353, 75%, 60%, 1);
  --sante-btn-color:  hsla(353, 75%, 45%, 1);

/* Vivre-ensemble */

  --vivre-ensemble-color: hsla(247, 94%, 70%, 1);
  --vivre-ensemble-txt-color: hsla(247, 94%, 70%, 1);
  --vivre-ensemble-btn-color:hsla(247, 94%, 60%, 1);
  
	
  --button-color: white;
  --button-color-hover: rgba(100, 200, 250, 1);
  --button-color-active: rgba(8, 167, 247, 1);
  --button-shadow-color-hover: rgba(6, 154, 227, 0.4);
  --button-shadow-color-active: rgba(6, 154, 227, 0.6);
	
	
  }