:root {
  --bouton-font-size: 1.2rem;
  --bouton-caractere-unique-font-size: calc(var(--bouton-font-size) - 0.1rem);
  --bouton-principal-background-color: var(--couleur-principale-4);
  --bouton-principal-color: var(--couleur-blanc);
  --bouton-principal-border-color: var(--couleur-principale-4);

  --bouton-secondaire-background-color: var(--couleur-blanc);
  --bouton-secondaire-color: var(--couleur-principale-4);
  --bouton-secondaire-border-color: var(--couleur-principale-4);

  --bouton-desactive-background-color: var(--couleur-secondaire-4);
  --bouton-desactive-color: var(--couleur-secondaire-7);
  --bouton-desactive-border-color: var(--couleur-secondaire-7);
  --bouton-desactive-before: var(--couleur-secondaire-7);

  --bouton-icone-before-principal: var(--couleur-principale-7);
  --bouton-icone-before-secondaire: var(--couleur-secondaire-7);
  --bouton-icone-before-fermer: var(--couleur-noir);

  --bouton-option-background-color: var(--couleur-secondaire-2);
  --bouton-option-color: var(--couleur-principale-4);
  --bouton-option-border-color: var(--couleur-secondaire-4);

  --bouton-option-courant-background-color: var(--couleur-blanc);

  --bouton-primaire-background-color-focus: #025aa5;
  --bouton-secondaire-background-color-focus: #dbeefa;

  --bouton-border-radius: var(--border-radius);

  --bouton-action-mobile-height: 5.6rem;
}

*[mobile],
*[tablette] {
  --bouton-font-size: 1.6rem;
}
:root {
  /* Style principal */
  --champ-background-color: var(--couleur-principale-1);
  --champ-border-color: var(--couleur-principale-2);
  --champ-color: var(--couleur-secondaire-9);

  --champ-border-color-focus: var(--couleur-principale-4);

  --champ-background-color-hover: var(--couleur-principale-1);

  /* Champs de type nombre ou quantité */
  --champ-nombre-quantite-width: 11ch;

  --champ-min-width: 8rem;

  /* Icones */
  --champ-color-icone: var(--couleur-principale-4);
  --champ-background-color-icone: var(--couleur-principale-4);

  /* Mixin LectureSeule */
  --champ-color-lecture-seule: var(--couleur-secondaire-9);
  --champ-background-color-lecture-seule: var(--couleur-secondaire-4);
  --champ-border-color-lecture-seule: var(--couleur-secondaire-4);

  /* Mixin Invalide */
  --champ-color-invalide: var(--couleur-erreur-2);
  --champ-background-color-invalide: var(--couleur-erreur-1);

  --champ-border-color-invalide-focus: var(--couleur-erreur-2);
}
:root {
  --couleur-noir: #000;
  --couleur-blanc: #fff;

  /* COULEURS BASÉES SUR LE STYLE EFLUID */

  --couleur-principale-1: #dbe8f9;
  --couleur-principale-2: #add0ff;
  --couleur-principale-3: #66A9D2;
  --couleur-principale-4: #0275d8;
  --couleur-principale-5: #33769f;
  --couleur-principale-6: #3376a0;
  --couleur-principale-7: #306d99;

  --couleur-secondaire-1: #f3f3f3;
  --couleur-secondaire-2: #e6e6e6;
  --couleur-secondaire-3: #e8e8e8;
  --couleur-secondaire-4: #d1d1d1;
  --couleur-secondaire-5: #c7c7c7;
  --couleur-secondaire-6: #adadad;
  --couleur-secondaire-7: #7c7c7c;
  --couleur-secondaire-8: #48555e;
  --couleur-secondaire-9: #061118;

  --couleur-principale-desactive: #82b9eb;

  --couleur-avertissement-1: #f5d958;
  --couleur-avertissement-2: #736521;
  --couleur-erreur-1: #ffe1e1;
  --couleur-erreur-2: #ac4849;
  --couleur-succes-1: #72edb8;
  --couleur-succes-2: #177465;
  --couleur-instruction-1: var(--couleur-blanc);
  --couleur-instruction-2: var(--couleur-principale-4);

  --couleur-placeholder: var(--couleur-secondaire-6);
}
*:not(:where([mobile], [tablette]))::-webkit-scrollbar {
  width: var(--taille-scrollbar, 10px);
  height: var(--taille-scrollbar, 10px);
}

*:not(:where([mobile], [tablette]))::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track-background-color, var(--couleur-secondaire-1));
}

*:not(:where([mobile], [tablette]))::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-background-color, var(--couleur-principale-4));
  border-radius: 50rem;
  border: 3px solid var(--scrollbar-track-background-color, var(--couleur-secondaire-1));
}

:root {
  --ombre-zone: 0 2px 7px 0 #d6d1d180;
  --ombre-zone-sans-bordure-haute: 0 6px 7px 0 #d6d1d180;
  --ombre-popin: 0 5px 20px -5px var(--couleur-noir);
  --ombre-selection: 0 2px 14px 0 #ababab;
  --ombre-popup: 0px 0px 30px #000000bf;
  --ombre-marqueur: 0px 0px 5px 0px #5d5d5d;

  --border-radius: 0.4rem;

  --font-family: Arial, sans-serif;

  --font-titre-1: 700 2.28rem var(--font-family);
  --font-titre-2: 700 2.04rem var(--font-family);
  --font-titre-3: 700 1.44rem var(--font-family);

  --font-texte-gras: 700 1.2rem var(--font-family);
  --font-texte-normal: 400 1.2rem var(--font-family);
  --font-texte-italique: italic 1.2rem var(--font-family);

  --font-petit-gras: 700 1.08rem var(--font-family);
  --font-petit-normal: 400 1rem var(--font-family);
  --font-petit-italique: italic 1rem var(--font-family);

  --espace-respiration-gauche: 1rem;
}