/* ==========================================================================
   EPC Brand Guide → Utility Classes
   ========================================================================== */

/* -- Text Alignment ------------------------------------------------------ */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* -- Display ------------------------------------------------------------- */
.d-none {
    display: none;
}

.d-block {
    display: block;
}

.d-inline {
    display: inline;
}

.d-flex {
    display: flex;
}

.d-grid {
    display: grid;
}

/* -- Colors (text) ------------------------------------------------------- */
.color-marine {
    color: var(--bleu-marine);
}

.color-or {
    color: var(--or-profond);
}

.color-or-clair {
    color: var(--or-clair);
}

.color-ambre {
    color: var(--ambre-dore);
}

.color-blanc {
    color: var(--blanc);
}

.color-gris {
    color: var(--gris-fonce);
}

.color-gris-m {
    color: var(--gris-moyen);
}

/* -- Background Colors --------------------------------------------------- */
.bg-marine {
    background-color: var(--bleu-marine);
}

.bg-or {
    background-color: var(--or-profond);
}

.bg-blanc {
    background-color: var(--blanc);
}

.bg-gris {
    background-color: var(--gris-clair);
}

.bg-noir {
    background-color: var(--noir-profond);
}

/* -- Margins ------------------------------------------------------------- */
.mt-0 {
    margin-top: 0;
}

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

.mt-sm {
    margin-top: var(--space-sm);
}

.mt-md {
    margin-top: var(--space-md);
}

.mt-lg {
    margin-top: var(--space-lg);
}

.mt-xl {
    margin-top: var(--space-xl);
}

.mb-0 {
    margin-bottom: 0;
}

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

.mb-sm {
    margin-bottom: var(--space-sm);
}

.mb-md {
    margin-bottom: var(--space-md);
}

.mb-lg {
    margin-bottom: var(--space-lg);
}

.mb-xl {
    margin-bottom: var(--space-xl);
}

/* -- Padding ------------------------------------------------------------- */
.pt-0 {
    padding-top: 0;
}

.pt-sm {
    padding-top: var(--space-sm);
}

.pt-md {
    padding-top: var(--space-md);
}

.pt-lg {
    padding-top: var(--space-lg);
}

.pb-0 {
    padding-bottom: 0;
}

.pb-sm {
    padding-bottom: var(--space-sm);
}

.pb-md {
    padding-bottom: var(--space-md);
}

.pb-lg {
    padding-bottom: var(--space-lg);
}

.p-sm {
    padding: var(--space-sm);
}

.p-md {
    padding: var(--space-md);
}

.p-lg {
    padding: var(--space-lg);
}

/* -- Font Weights -------------------------------------------------------- */
.fw-regular {
    font-weight: var(--fw-regular);
}

.fw-semibold {
    font-weight: var(--fw-semibold);
}

.fw-bold {
    font-weight: var(--fw-bold);
}

.fw-black {
    font-weight: var(--fw-black);
}

/* -- Font Styles --------------------------------------------------------- */
.fs-italic {
    font-style: italic;
}

/* -- Width --------------------------------------------------------------- */
.w-100 {
    width: 100%;
}

/* -- Visibility ---------------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -- Animate on Scroll --------------------------------------------------- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================================================
   ICONS (SVG)
   ======================================================================== */
.icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.icon-inline {
    margin-right: var(--space-xs);
    margin-top: -2px;
    /* optical alignment */
}

.icon-sm {
    width: 16px;
    height: 16px;
}

.icon-md {
    width: 20px;
    height: 20px;
}

.icon-lg {
    width: 24px;
    height: 24px;
}

/* Contact icons in footer */
.text-contact {
    color: rgba(255, 255, 255, 0.75);
}

.text-do {
    color: var(--vert-do);
}

.text-dont {
    color: var(--rouge-dont);
}

.text-info {
    color: var(--or-profond);
}

.text-brand {
    color: var(--bleu-marine);
}