/* ========================================================================= */

* {
  font-family: var(--font-default);
}

strong {
    font-weight: 700;
}

.font-extrabold {
    font-weight: var(--font-weight-extrabold);
}

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


/* ======== Alert ======== */
/* Bloc */
.alert {
    display: none;
    padding: var(--padding-md);
    gap: var(--gap-xs);
    border-radius: var(--radius-md);
    font-size: var(--text-body-md);
}

.alert--active {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Elements */
.alert__title {
    font-size: var(--text-body-md);
    font-weight: bold;
}

.alert__description {
    font-size: var(--text-body-md);
}

/* Modifiers */
.alert--success {
    background-color: var(--color-bg-success-subtle);
    color: var(--color-text-success);
}

.alert--error {
    background-color: var(--color-bg-error-subtle);
    color: var(--color-text-error);
}

/* ======== Body ======== */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ======== Customizer form ======== */
.customizer-form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
}


/* ======== Footer ======== */
footer {
    display: flex;
    flex-wrap: wrap;
    padding: var(--footer-padding-y-top) var(--footer-padding-x) var(--footer-padding-y-bottom) var(--footer-padding-x);
    background: var(--color-bg-alternative);
    justify-content: center;
}

.footer__contact {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    max-width: 40rem;
}


.footer__contact-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap-md);
    max-width: 40rem;
}


.footer__content {
    display: flex;
    flex-wrap: wrap;
    width: stretch;
    gap: var(--footer-gap);
    max-width: 100rem;
    justify-content: space-between;
}


.footer__logo {
    display: flex;
    width: stretch;
    max-width: 10rem;
}

.footer__nav {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    width: stretch;
    max-width: 30rem;
}

.footer__nav-content {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-md);
}


/* ======== Header ======== */
header {
    display: flex;
    padding : var(--header-padding-y) var(--header-padding-x);
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    justify-content: center;
}

.header__buttons {
    display: flex;
    justify-content: flex-end;
    width: stretch;
}

.header__content {
    display: flex;
    width: 100%;
    max-width: 80rem;
}

.header__logo {
    display: flex;
    width: stretch;
}

.header__logo-wrapper {
    display: flex;
    width: stretch;
    justify-content: flex-start;
    max-width: 12.5rem;
    padding-right: var(--padding-md);
}

.header__nav {
display: flex;
}

/* ======== Main content ======== */
main {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    padding : var(--body-padding-y-top) var(--body-padding-x) var(--body-padding-y-bottom) var(--body-padding-x);
    background: var(--color-bg-surface);
    flex: 1;
}


/* ======== Page content ======== */
.page-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--padding-xl) 0 var(--padding-xl) 0 ;
    gap: var(--gap-md);
    max-width: 75rem;
    width: 100%;

}


/* ======== Page title ======== */
.page-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--padding-md);
    width: 100%;
}

.page-title__media {
    display: flex;
    padding-bottom: var(--padding-md);
    max-height: 200px;
}

.page-title__title--hero {
    font-family: var(--font-highlight);
    font-size: var(--text-hero);
    line-height: 100%;
    color: var(--color-text-strong);
    font-weight: 900;
    text-align: center;
}

.page-title__title--xl {
    font-family: var(--font-highlight);
    font-size: var(--text-title-xl);
    line-height: 100%;
    color: var(--color-text-strong);
    font-weight: 900;
    text-align: center;
}

.page-title__subtitle {
    font-family: var(--font-highlight);
    font-size: var(--text-subtitle);
    color: var(--color-text-subtle);
    text-align: center;
}


/* ======== Segmented button ======== */
.segmented-button {
    display: flex;
    width: 100%;
    background: var(--color-bg-default);
    border: var(--color-border) solid 1px;
    border-radius: var(--radius-md);
    max-width: 25rem;
    font-family: var(--font-highlight);
    font-size: var(--text-button-lg);
    color: var(--color-text-default);
}

.segmented-button__item:hover {
    .segmented-button__icon {
    stroke-dashoffset: 0;
    }
}

.segmented-button__icon {
    position: absolute;
    bottom: 0.8rem;
    left: 50%;
    transform: translateX(-50%); /* Compense sa propre largeur */
    stroke-dasharray: 137;
    stroke-dashoffset: 137;
    transition: stroke-dashoffset 0.4s;
}

.segmented-button__item {
    width: stretch;
    position: relative;
    justify-content: center;
    padding: var(--button-lg-padding-x) var(--button-lg-padding-y);
    border-radius: var(--radius-md);
}

.segmented-button__item--active {
   color: var(--color-text-strong);
   font-weight: var(--font-weight-extrabold);
   background-color: var(--color-bg-highlight-subtle);
   border: 1px solid var(--color-border-praline);
   pointer-events: none;
}


/* ======== Separator ======== */
.separator {
    display: inline-block;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: var(--color-brand-praline);
}


/* ======== Standalone link ======== */
.standalone-link {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-family: var(--font-highlight);
    color: var(--color-text-default);
}

.standalone-link--lg {
    font-size: var(--text-body-lg);
}


/* ======== Tab-content ======== */
.tab-content {
    display: none;
}

.tab-content--active {
    gap: var(--gap-lg);
    display:flex;
    flex-direction: column;
}

/* ===== Title ===== */
.title--xl {
    font-family: var(--font-highlight);
    font-size: var(--text-title-xl);
    line-height: var(--lineheight-tight);
    color: var(--color-text-strong);
    font-weight: var(--font-weight-black);
}

.title--lg {
    font-family: var(--font-highlight);
    font-size: var(--text-title-lg);
    line-height: var(--lineheight-tight);
    color: var(--color-text-strong);
    font-weight: var(--font-weight-extrabold);
}

.title--md {
    font-family: var(--font-highlight);
    font-size: var(--text-title-md);
    line-height: var(--lineheight-tight);
    color: var(--color-text-strong);
    font-weight: var(--font-weight-extrabold);
}