/**
 Notez comment le thème s'applique à Sparnatural ainsi qu'à d'autres classes techniques avec un positionnement absolu qui
 ont aussi besoin de bénéficier des variables.
 **/
.Sparnatural,
.SparnaturalForm,
.select2-container--default,
.tippy-box {
  /**
 * Couleur des flèches de critères (bleu)
 **/
  --primary-color-main: #1D71B8;

  /**
  * Couleur des boutons "désélectionner" dans les critères (bleu foncé)
  **/
  --primary-color-important: #0F3F68;

  /**
  * Couleur du bas : sélecteur de variable repliée, et de la valeur sélectionnée dans un critère (bleu clair)
  **/
  --primary-color-medium: #DEE0EA;

  /**
  * Fond du sélecteur de variable & fond de l'infobulle (bleu encore plus clair)
  **/
  --primary-color-light: #C5C8DA;

  /** 
  * Couleur de la flèche des options (optionnel / négation) (rose fort)
  **/
  --secondary-color-main: #D20050;

  /** 
  * Couleur de la surbrillance des flèches
  **/
  --secondary-color-important: #343852;

  /**
  * Couleur de la flèche des options lorsqu'elle n'est pas sélectionnée (bleu clair)
  **/
  --secondary-color-light: #C5C8DA;

  /**
  * Couleur de l'option service activée
  **/
  --ternary-color-main: #969CBB;

  /**
  * Couleur au survol de la sélection d'autocomplétion
  **/
  --ternary-color-light: #697097;

  /**
  * Couleur de la poignée de variable glisser-déposer, bouton de requête désactivé, options désactivées
  **/
  --silver-color-main: #DEE0EA;

  /**
  * 
  **/
  --silver-color-light: #F2F3F7;

  /**
  * Couleur de texte par défaut
  **/
  --default-text-color: #697097;

  /**
  * Nouveau
  * (blanc)
  **/
  --default-text-color-light: #F8F9FB;

  /**
 * Composantes Rouge, Vert et Bleu pour la couleur de fond.
 * Un alpha est ajouté à cette couleur à chaque ligne (0.1, 0.2, 0.3, etc.)
 **/
  --bg-red: #D20024;
  --bg-green: #9AB938;
  --bg-blue: #369AEE;
}

.awesomplete{
    background-color: white;
    border: 1px solid var(--primary-color-light);
}

/* Correction du décalage de la barre d'administration WordPress - réduire top de 32px avec margin */
/* Fonctionne avec : la classe body.admin-bar OU l'élément #wpadminbar */
body.admin-bar .link-and-bottom,
html:has(#wpadminbar) .link-and-bottom{
    margin-top: -32px !important;
}

/* Corriger aussi les éléments enfants à l'intérieur de link-where-bottom */
body.admin-bar .link-where-bottom > div,
html:has(#wpadminbar) .link-where-bottom > div {
    margin-top: -32px !important;
}

/* Et le span à l'intérieur du horizontal */
body.admin-bar .link-where-bottom .horizontal span,
html:has(#wpadminbar) .link-where-bottom .horizontal span {
    margin-top: -32px !important;
}