@charset "utf-8";

/*
===================================================================
    UTILITAIRES - couleurs, filtres svg, tailles, typographie
===================================================================
*/

/* ===============================
 *  BACKGROUND
=============================== */
.bg-primary { background-color: var(--primary-main) !important; }
.bg-primary-main { background-color: var(--primary-main) !important; }
.bg-primary-dark { background-color: var(--primary-dark) !important; }
.bg-primary-x-dark { background-color: var(--primary-x-dark) !important; }
.bg-primary-light { background-color: var(--primary-light) !important; }
.bg-primary-x-light { background-color: var(--primary-x-light) !important; }
.bg-primary-2x-light { background-color: var(--primary-2x-light) !important; }

.bg-focus-main { background-color: var(--focus-main) !important; }
.bg-focus-dark { background-color: var(--focus-dark) !important; }
.bg-focus-light { background-color: var(--focus-light) !important; }
.bg-focus-x-light { background-color: var(--focus-x-light) !important; }

.bg-success-main { background-color: var(--success-main) !important; }
.bg-success-dark { background-color: var(--success-dark) !important; }
.bg-success-light { background-color: var(--success-light) !important; }

.bg-secondary-main { background-color: var(--secondary-main) !important; }
.bg-secondary-dark { background-color: var(--secondary-dark) !important; }
.bg-secondary-light { background-color: var(--secondary-light) !important; }
.bg-secondary-x-light { background-color: var(--secondary-x-light) !important; }

.bg-neutral-2x-dark { background-color: var(--neutral-2x-dark) !important; }
.bg-neutral-x-dark { background-color: var(--neutral-x-dark) !important; }
.bg-neutral-dark { background-color: var(--neutral-dark) !important; }
.bg-neutral-main { background-color: var(--neutral-main) !important; }
.bg-neutral-light { background-color: var(--neutral-light) !important; }
.bg-neutral-x-light { background-color: var(--neutral-x-light) !important; }

/* ===============================
 *  TEXTE
=============================== */
.text-primary-main { color: var(--primary-main) !important; }
.text-primary-dark { color: var(--primary-dark) !important; }
.text-primary-x-dark { color: var(--primary-x-dark) !important; }
.text-primary-light { color: var(--primary-light) !important; }

.text-focus-main { color: var(--focus-main) !important; }
.text-focus-dark { color: var(--focus-dark) !important; }

.text-success-main { color: var(--success-main) !important; }
.text-success-dark { color: var(--success-dark) !important; }

.text-secondary-main { color: var(--secondary-main) !important; }
.text-secondary-dark { color: var(--secondary-dark) !important; }

.text-neutral-2x-dark { color: var(--neutral-2x-dark) !important; }
.text-neutral-dark { color: var(--neutral-dark) !important; }
.text-neutral-mid { color: var(--neutral-mid) !important; }
.text-neutral-light { color: var(--neutral-light) !important; }
.text-white { color: #FFF !important; }

/* ===============================
 *  FILTRES SVG
    Applique a une <img> pointant un svg noir pour la recolorer.
=============================== */
.fill-svg-primary-main { filter: var(--fill-svg-primary-main); }
.fill-svg-primary-dark { filter: var(--fill-svg-primary-dark); }
.fill-svg-primary-x-dark { filter: var(--fill-svg-primary-x-dark); }
.fill-svg-primary-light { filter: var(--fill-svg-primary-light); }

.fill-svg-focus-main { filter: var(--fill-svg-focus-main); }
.fill-svg-focus-dark { filter: var(--fill-svg-focus-dark); }

.fill-svg-success-main { filter: var(--fill-svg-success-main); }

.fill-svg-neutral-2x-dark { filter: var(--fill-svg-neutral-2x-dark); }
.fill-svg-neutral-dark { filter: var(--fill-svg-neutral-dark); }
.fill-svg-neutral-mid { filter: var(--fill-svg-neutral-mid); }
.fill-svg-white { filter: var(--fill-svg-white); }
.fill-svg-red { filter: var(--fill-svg-red); }

/* ===============================
 *  TAILLES D'ICONES
=============================== */
.w-16px { width: 16px !important; height: 16px !important; }
.w-20px { width: 20px !important; height: 20px !important; }
.w-24px { width: 24px !important; height: 24px !important; }
.w-32px { width: 32px !important; height: 32px !important; }
.w-48px { width: 48px !important; height: 48px !important; }
.w-64px { width: 64px !important; height: 64px !important; }

/* ===============================
 *  TAILLES DE TEXTE
    Complete l'echelle Bootstrap fs-1 → fs-6.
=============================== */
.fs-7 { font-size: .938rem !important; }
.fs-8 { font-size: .875rem !important; }
.fs-9 { font-size: .813rem !important; }
.fs-10 { font-size: .75rem !important; }

/* ===============================
 *  GRAISSES
=============================== */
.fw-light { font-weight: var(--fw-light) !important; }
.fw-normal { font-weight: var(--fw-normal) !important; }
.fw-bold { font-weight: var(--fw-bold) !important; }
.fw-black { font-weight: var(--fw-black) !important; }

/* ===============================
 *  ESPACEMENTS FLUIDES
    Complete les marges Bootstrap (*-1 → *-5).
=============================== */
.mt-6 { margin-top: var(--space-6) !important; }
.mt-7 { margin-top: var(--space-7) !important; }
.mt-8 { margin-top: var(--space-8) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.mb-7 { margin-bottom: var(--space-7) !important; }
.py-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
.py-8 { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }

/* ===============================
 *  ARRONDIS
=============================== */
.radius-xs { border-radius: var(--radius-xs); }
.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }
.radius-xl { border-radius: var(--radius-xl); }

/* ===============================
 *  BOUTON A ICONE
    Repris des 3 autres sites : l'icone se dimensionne sur le texte du bouton.
=============================== */
.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.btn-icon > img,
.btn-icon > svg {
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
}

/* ===============================
 *  LISTES A BARRE ORANGE
    Modele des 3 autres sites : puce native remplacee par une barre verticale.
    Hors `.page-contenu` / `.page-content`, dont les listes viennent du markdown.
=============================== */
.liste-texte:is(ul, ol),
.liste-texte :is(ul, ol) {
    padding-inline-start: 0;
}

.liste-texte:is(ul, ol) > li,
.liste-texte :is(ul, ol) > li {
    position: relative;
    list-style: none;
    padding: .5rem .5rem .5rem 20px;
}

.liste-texte:is(ul, ol) > li::before,
.liste-texte :is(ul, ol) > li::before {
    content: "";
    position: absolute;
    top: .5rem;
    bottom: .5rem;
    left: 0;
    width: 5px;
    border-radius: var(--radius-sm);
    background: var(--focus-light);
}

/* ===============================
 *  DIVERS
=============================== */
.text-balance { text-wrap: balance; }

.text-w760 { max-width: 760px !important; }

.link-plain,
.link-plain:link,
.link-plain:visited {
    color: inherit;
}