/* Force la font-family sur TOUS les éléments — 
   les classes héritent proprement ensuite */
html, body {
    font-family: var(--font-work);
}

/* RESET OLD CHARTE */
.titreGras,
.blocParagrapheQuinconce h2,
.sousMenuLigne,
.titreFooter{
    font-size:   unset;
    font-weight: unset;
    font-family: unset;
    /* ajoute ici toutes les propriétés que ces classes définissaient */
}

.blocParagrapheQuinconce h2 {
    width: 100%;
    padding: 0 0 15px;
}

.blocParagrapheQuinconce h2.text-h2 {
    font-family: var(--font-work);
    font-size:   var(--text-h2);
    font-weight: 600;
}

/* ----------------------------------  */
/*              Typographie            */
/* ----------------------------------  */

/* Titres */
.text-h1 {
    font-family: var(--font-work);
    font-size: var(--text-h1);
    font-weight: 700;
}

.text-h2 {
    font-family: var(--font-work);
    font-size: var(--text-h2);
    font-weight: 600;
}

.text-h3 {
    font-family: var(--font-work);
    font-size: var(--text-h3);
    font-weight: 500;
}

.text-h4 {
    font-family: var(--font-work);
    font-size: var(--text-h4);
    font-weight: 500;
}

/* Corps de texte */
/* Line-height ? */
.text-body          { font-family: var(--font-work); font-size: var(--text-normal); font-weight: 400; }
.text-body-bold     { font-family: var(--font-work); font-size: var(--text-normal); font-weight: 500; }
.text-body-sm       { font-family: var(--font-work); font-size: var(--text-small); font-weight: 300;}

.text--font-tech { font-family: var(--font-tech); font-optical-sizing: auto; font-weight: 400;}
.text--font-data { font-family: var(--font-data); font-weight: 400;}

/* Modifiers de couleur */
.text--muted    { color: var(--color-disabled-gray); }

/* à définir potentiellement ?*/
.text--error    { color: var(--color-error); }
.text--success  { color: var(--color-success); }

/* Modifiers de style */
.text--bold     { font-weight: 600; }
.text--light    { font-weight: 300; }
.text--italic   { font-style: italic; }

.text--size-medium  { font-size: var(--text-medium);}
.text--size-small   {font-size: var(--text-small);}

.text--upper { /* Passe les lettres en upper + espacement, à voir si utile */
    text-transform: uppercase; letter-spacing: .05em; 
}

.text--nowrap { /* Empeche le texte de revenir à la ligne (propre aux petits textes) */
    text-wrap: nowrap;
}

.text--truncate { /* Permet de scinder un texte si il dépasse et rajoute "..." */
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* ----------------------------------  */
/*              Backgound              */
/* ----------------------------------  */

.bg-grey, .fondGris, .fondF2F6F7 {
    background-color: var(--color-light-gray);
}


/* ----------------------------------  */
/*              Boutons                */
/* ----------------------------------  */

/* Block de base — styles communs à tous les boutons */
.btn {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    gap:              var(--space-xxs);
    padding:          var(--space-xs) var(--space-l);
    border-radius:    0px;
    font-size:        var(--text-normal);
    font-family:      var(--font-work);
    border:           1px solid transparent;
    background-color: transparent;
    cursor:           pointer;
    transition:       background .2s, color .2s, border-color .2s;
    user-select: none;
}

@media screen and (max-width:500px) {
    .btn {
        padding: var(--space-xs) var(--space-xs);
    }    
}

.btn--compact {
    font-size: var(--text-normal);
    padding: var(--space-xs) var(--space-xs);
}

.btn--tiny {
    font-size: var(--text-medium);
    padding: var(--space-xxs) var(--space-xxs);
}

.btn:disabled {
  cursor: not-allowed;
}

/* Block btn primaire */
.btn--primary {
    background-color: var(--color-black);
    color : var(--color-white);
}

.btn--primary a {
    color : var(--color-white);
}

.btn--primary:hover {
    background-color: var(--color-medium-gray);
}

.btn--primary:active {
    background-color: var(--color-black);
}

.btn--primary:disabled {
    background-color: var(--color-disabled-gray);
}

/* Block btn secondaire */
.btn--secondary {
    background-color: var(--color-white);
    color : var(--color-black);
    border: 1px solid var(--color-black);
}

.btn--secondary a {
    color : var(--color-black);
}

.btn--secondary:hover {
    background-color: var(--color-dark-gray);
    color : var(--color-white);
}

.btn--secondary:hover a {
    color : var(--color-white);
}

.btn--secondary:active {
    background-color: var(--color-black);
    color : var(--color-white);
}

.btn--secondary:disabled {
    background-color: var(--color-light-gray);
    color : var(--color-disabled-gray);
    border: 1px solid var(--color-disabled-gray);
}

/* Block btn tertiaire */
.btn--tertiary {
    color : var(--color-black);
    text-decoration: underline;
}

.btn--tertiary:hover {
    color: var(--color-medium-gray);
}

.btn--tertiary:active {
    color : var(--color-black);
}

.btn--tertiary:disabled {
    color : var(--color-disabled-gray);
}

.zoneBoutonReduit .btn {
    /* font-size: var(--text-small); */
    padding: var(--space-xs) var(--space-xs);;
}

/* ----------------------------------  */
/*              Espacement             */
/* ----------------------------------  */

/* flex-gap */

.flex-gap-xs {
    gap: var(--space-xs);
}

.flex-gap-s {
    gap: var(--space-s);
}

.flex-gap-m {
    gap: var(--space-m);
}

.flex-gap-l {
    gap: var(--space-l);
}

.flex-gap-xl {
    gap: var(--space-xl);
}

/* Margin small */

.margin-bottom-small {
    margin-bottom: var(--space-xs);
}

.margin-top-small {
    margin-top: var(--space-xs);
}

.margin-right-small {
    margin-right: var(--space-xs);
}

.margin-left-small {
    margin-left: var(--space-xs);
}

/* Margin medium */

.margin-bottom-medium {
    margin-bottom: var(--space-s);
}

.margin-top-medium {
    margin-top: var(--space-s);
}

.margin-right-medium {
    margin-right: var(--space-s);
}

.margin-left-medium {
    margin-left: var(--space-s);
}