/* ============================================
   Fast2 — Layout (Header, Footer, Grid)
   Famille visuelle Saxho / IXILA / Fast
   ============================================ */

/* ── Container ── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--sp-lg);
}

.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }

/* ── Page background with grain texture ── */
body {
    background-color: var(--c-light);
    position: relative;
}

/* Subtle organic grain overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.03;
    filter: url(#grain-filter);
    mix-blend-mode: overlay;
}

/* ── Sections ── */
.section {
    padding: var(--section-padding);
    position: relative;
}

/* Reduce gap when section directly follows a page hero */
.page-hero + .section {
    padding-top: var(--sp-xl);
}

.section--dark {
    background-color: var(--c-dark);
    color: var(--c-white);
}

.section--surface {
    background-color: var(--c-surface);
}

.section--white {
    background-color: var(--c-white);
}

.section__header {
    text-align: center;
    margin-bottom: var(--sp-3xl);
}

.section__title {
    margin-bottom: var(--sp-md);
}

.section__subtitle {
    font-size: var(--fs-body);
    color: var(--c-text-light);
    max-width: 600px;
    margin-inline: auto;
    line-height: var(--lh-relaxed);
}

/* ── Main content area ── */
.main--inner {
    padding-top: var(--header-height);
}

/* ── Header ── */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: rgba(248, 247, 244, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(226, 223, 216, 0.5);
    z-index: var(--z-header);
    transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.site-header.is-scrolled {
    box-shadow: var(--shadow-md);
    border-bottom-color: var(--c-border);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: var(--sp-lg);
}

/* ── Logo ── */
.logo {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    text-decoration: none;
    flex-shrink: 0;
}

.logo__img {
    height: 32px;
    width: auto;
}

.logo__text {
    font-family: var(--ff-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-dark);
    letter-spacing: -0.01em;
}

.logo__accent {
    color: var(--c-primary);
}

.logo__by {
    font-family: var(--ff-body);
    font-size: 0.65rem;
    color: var(--c-muted);
    font-weight: var(--fw-regular);
    letter-spacing: 0.04em;
    opacity: 0.5;
    margin-left: var(--sp-xs);
    line-height: 1;
    align-self: flex-end;
    margin-bottom: 2px;
}

.logo__sub {
    font-family: var(--ff-body);
    font-size: var(--fs-xs);
    color: var(--c-muted);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    margin-left: var(--sp-sm);
    padding-left: var(--sp-sm);
    border-left: 1px solid var(--c-border);
    line-height: 1;
}

/* ── Navigation ── */
.nav__list {
    display: flex;
    align-items: center;
    gap: var(--sp-2xs);
}

.nav__link {
    padding: var(--sp-sm) var(--sp-md);
    color: var(--c-medium);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    letter-spacing: 0.01em;
}

.nav__link:hover {
    color: var(--c-primary);
    background: var(--c-primary-50);
}

.nav__link--active {
    color: var(--c-primary-dark);
    background: var(--c-primary-50);
    font-weight: var(--fw-semibold);
}

/* ── Nav dropdown ── */
.nav-dropdown {
    position: relative;
}

.nav-dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2xs);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.nav-dropdown__trigger svg {
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}
.nav-dropdown.is-open .nav-dropdown__trigger svg {
    transform: rotate(180deg);
}

.nav-dropdown__menu {
    position: absolute;
    top: calc(100% + var(--sp-xs));
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 200px;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-xs);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: 1000;
}
.nav-dropdown.is-open .nav-dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-md);
    color: var(--c-text);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}
.nav-dropdown__item:hover {
    color: var(--c-primary);
    background: var(--c-primary-50);
}
.nav-dropdown__item svg {
    color: var(--c-muted);
    flex-shrink: 0;
}
.nav-dropdown__item:hover svg {
    color: var(--c-primary);
}

/* Mobile sections in nav */
.nav__mobile-section {
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: var(--sp-md) var(--sp-md) var(--sp-xs);
}
.nav__mobile-divider {
    height: 1px;
    background: var(--c-border);
    margin: var(--sp-sm) 0;
}

/* ── Header actions ── */
.header__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
}

/* ── Notification bell ── */
.notif-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--c-muted);
    transition: all var(--transition-fast);
    text-decoration: none;
}

.notif-bell:hover {
    background: var(--c-surface);
    color: var(--c-text);
}

.notif-bell__badge {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--c-primary);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ── Credit badge ── */
.credit-badge {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    padding: var(--sp-xs) var(--sp-sm);
    background: var(--c-primary-50);
    color: var(--c-primary-dark);
    border-radius: var(--radius-full);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    transition: all var(--transition-fast);
}

.credit-badge:hover {
    background: var(--c-primary-100);
    color: var(--c-primary-dark);
}

.credit-badge .icon {
    width: 18px;
    height: 18px;
}

/* ── User menu ── */
.user-menu {
    position: relative;
}

.user-menu__trigger {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    padding: var(--sp-xs);
    border-radius: var(--radius-full);
    transition: background var(--transition-fast);
}

.user-menu__trigger:hover {
    background: var(--c-surface);
}

.user-menu__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark));
    color: var(--c-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.5px;
}

.user-menu__dropdown {
    position: absolute;
    top: calc(100% + var(--sp-sm));
    right: 0;
    min-width: 240px;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition-fast);
    z-index: var(--z-overlay);
}

.user-menu__dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-menu__header {
    padding: var(--sp-md);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2xs);
}

.user-menu__header strong {
    font-size: var(--fs-small);
}

.user-menu__header small {
    font-size: var(--fs-xs);
    color: var(--c-text-light);
}

.user-menu__divider {
    height: 1px;
    background: var(--c-border);
    margin: var(--sp-xs) 0;
}

.user-menu__item {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-md);
    color: var(--c-text);
    font-size: var(--fs-small);
    transition: background var(--transition-fast);
    width: 100%;
    text-align: left;
}

.user-menu__item:hover {
    background: var(--c-surface);
    color: var(--c-text);
}

.user-menu__item--danger:hover {
    background: #FEF2F2;
    color: var(--c-error);
}

.user-menu__logout-form {
    width: 100%;
}

/* ── Lang switcher ── */
.lang-switcher {
    display: flex;
    gap: 2px;
    background: var(--c-surface);
    border-radius: var(--radius-full);
    padding: 2px;
}

.lang-switcher__link {
    padding: var(--sp-xs) var(--sp-sm);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--c-text-light);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.lang-switcher__link--active {
    background: var(--c-white);
    color: var(--c-dark);
    box-shadow: var(--shadow-sm);
}

.lang-switcher__link:hover {
    color: var(--c-dark);
}

/* ── Burger (mobile) ── */
.burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: var(--sp-sm);
    width: 44px;
    height: 44px;
    justify-content: center;
}

.burger__line {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--c-dark);
    border-radius: 2px;
    transition: all var(--transition-normal);
}

/* ── Footer ── */
.site-footer {
    background: var(--c-dark);
    color: rgba(255, 255, 255, 0.7);
    padding: var(--sp-3xl) 0 var(--sp-xl);
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--sp-2xl);
    margin-bottom: var(--sp-2xl);
}

/* Footer logo — larger than header, left-aligned */
.footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer__brand .logo__img {
    height: 130px;
    width: auto;
}

.footer__brand .logo__text {
    color: var(--c-white);
    font-size: 1.25rem;
}

.footer__brand .logo__sub {
    color: rgba(255, 255, 255, 0.4);
    border-left-color: rgba(255, 255, 255, 0.2);
}

.footer__tagline {
    margin-top: var(--sp-sm);
    font-size: var(--fs-small);
    line-height: var(--lh-relaxed);
    max-width: 280px;
}

.footer__heading {
    color: var(--c-white);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    margin-bottom: var(--sp-md);
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

.footer__links a {
    color: rgba(255, 255, 255, 0.55);
    font-size: var(--fs-small);
    transition: color var(--transition-fast);
}

.footer__links a:hover {
    color: var(--c-primary-light);
}

.footer__links--contact li {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
}

.footer__links--contact .icon {
    opacity: 0.4;
    flex-shrink: 0;
}

.footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: var(--sp-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.35);
}

.footer__bottom-links {
    display: flex;
    gap: var(--sp-md);
}

.footer__bottom-links a {
    color: rgba(255, 255, 255, 0.35);
    font-size: var(--fs-xs);
    transition: color var(--transition-fast);
}

.footer__bottom-links a:hover {
    color: rgba(255, 255, 255, 0.7);
}

/* ── Flash messages ── */
.flash-container {
    position: fixed;
    top: calc(var(--header-height) + var(--sp-md));
    right: var(--sp-md);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    max-width: 400px;
}

.flash {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-md);
    padding: var(--sp-md) var(--sp-lg);
    border-radius: var(--radius-lg);
    font-size: var(--fs-small);
    box-shadow: var(--shadow-lg);
    animation: flash-in 0.3s ease;
    backdrop-filter: blur(8px);
}

.flash--success { background: #ECFDF5; color: #065F46; border-left: 4px solid var(--c-success); }
.flash--error   { background: #FEF2F2; color: #991B1B; border-left: 4px solid var(--c-error); }
.flash--warning { background: #FFFBEB; color: #92400E; border-left: 4px solid var(--c-warning); }
.flash--info    { background: #EFF6FF; color: #1E40AF; border-left: 4px solid var(--c-info); }

.flash__close {
    font-size: 1.25rem;
    line-height: 1;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.flash__close:hover { opacity: 1; }

@keyframes flash-in {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}