/*
couleur pastelle : #b6aed6
*/
:root{
  --couleurPrincipale: #6a8c91;
  
  --ligher: hsla(from var(--couleurPrincipale) h s 95% );
  --couleur-light-2: oklch(from var(--couleurPrincipale) clamp(0, l + 0.2, 1) c h);
  --couleur-light-3: oklch(from var(--couleurPrincipale) clamp(0, l + 0.3, 1) calc(c * 0.9) h);
  
  --couleur-dark-1: oklch(from var(--couleurPrincipale) clamp(0, l - 0.1, 1) c h);
  --couleur-dark-2: oklch(from var(--couleurPrincipale) clamp(0, l - 0.2, 1) calc(c * 0.95) h);
  --couleur-dark-3: oklch(from var(--couleurPrincipale) clamp(0, l - 0.3, 1) calc(c * 0.9) h);
  
  --darker: oklch(from var(--couleurPrincipale) clamp(0, 1 - 0.22, 1) calc(c * 0.92) h);
  -complement: hsl(from var(--couleurPrincipale) calc(h - 180) s l);
  
  --couleurPrincipale30: color-mix(in srgb, var(--couleurPrincipale) 30%, white);
  --couleurPrincipale50: color-mix(in srgb, var(--couleurPrincipale) 50%, white);
  --couleurPrincipale80: color-mix(in srgb, var(--couleurPrincipale) 80%, white);
  

  --couleurBTN:#efdf80;
  --couleurBTNAction: #000;
  --couleurLien:#6f916a;
  --couleurFocus:#efdf80;
  --couleur_claire:#e3dfff;
  --couleurBody :#737373;
  --couleur1_alpha2: rgba(124, 128, 92, 0.2);
  --couleurBackgroundBody : #F7F7F7;
  --couleurSkeleton: linear-gradient(to right, #ccc, rgba(229, 229, 229, 0.9), #ccc);

  --borderRadius: 20px;
  --borderRadiusMin: 10px;
  --borderRadiusFormChamp:10px;
  
  --couleurValidation:#2ecc71;
  --couleurAvertissement: #F2747C;
  
  --couleurAvertissement30: color-mix(in srgb, var(--couleurAvertissement) 30%, white);
  
  --couleurInfo:#07a4b6;
  --couleurValidationBordure:#2ecc71;
  --couleurVueBackground: #f3f2ee;
  
  --couleurBordureForm:#d7d7d7;

  
  --boxShadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  --heightHeader:60px;
  --heightMenuBas:60px;
  --heightPagination:80px;
  
  --vitesseTransitionVue: 1s;
  
  --notificationDecompteFermeture:15s;
  --vitesseTransitionNotification: .5s;
  
  --animation: cubic-bezier(.25, 1, .5, 1.25);
  
  --fontBody: sans-serif;
  --fontAwesome : "Font Awesome 6 Pro";
  
  --ProgressionCirculaireCouleurProgression: rgba(255, 255, 255, .5);
  --ProgressionCirculaireCouleurBordure: rgba(255, 255, 255, .2);
  --ProgressionCirculaireEpaisseur: 5px;
}