/* ==========================================================================
   Cabinet Dentaire Gloria — Footer 4 colonnes
   --------------------------------------------------------------------------
   Composant : footer navy fonce, 4 colonnes desktop / accordeons mobile,
   attribution agence ShineNows centree.
   Source de verite : docs/superpowers/specs/2026-05-03-cabinetgloria-design.md
                      § 5.1.10 (footer) et § 6 (patterns transversaux)
   ========================================================================== */

/* ---------- Container ---------- */
.site-footer {
    background: var(--color-navy-deep, #0F1E33);
    color: rgba(255, 255, 255, 0.7);
    padding: 80px 0 32px;
    margin-top: 96px;
    font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
}

/* ---------- Grid 4 colonnes ---------- */
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 80px;
}

/* ---------- Col 1 : Identite ---------- */
.site-footer__col--brand .site-footer__logo {
    display: block;
    height: 48px;
    width: auto;
    margin-bottom: 16px;
}

.site-footer__tagline {
    font-size: 14px;
    line-height: 1.6;
    max-width: 280px;
    margin: 0 0 24px;
    color: rgba(255, 255, 255, 0.65);
}

.site-footer__social {
    display: flex;
    gap: 16px;
    align-items: center;
}

.site-footer__social a {
    display: inline-flex;
    place-items: center;
    place-content: center;
    width: 36px;
    height: 36px;
    line-height: 0;
    padding: 0;
    color: var(--color-gold, #C9A96E);
    border: 1px solid rgba(201, 169, 110, 0.35);
    border-radius: 50%;
    transition: transform var(--tx-fast, 200ms ease-out),
                color var(--tx-fast, 200ms ease-out),
                border-color var(--tx-fast, 200ms ease-out),
                background var(--tx-fast, 200ms ease-out);
}

.site-footer__social a svg {
    display: block;
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
    color: #fff;
    border-color: var(--color-gold, #C9A96E);
    background: rgba(201, 169, 110, 0.12);
    transform: scale(1.08);
}

/* ---------- Titres colonnes (desktop) ---------- */
.site-footer__title {
    font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
    color: var(--color-gold, #C9A96E);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 24px;
    padding-bottom: 12px;
    position: relative;
}

.site-footer__title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 32px;
    height: 1px;
    background: rgba(201, 169, 110, 0.5);
}

/* Bouton accordeon mobile (cache desktop) */
.site-footer__title-mobile {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 16px 0;
    color: var(--color-gold, #C9A96E);
    font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    text-align: left;
}

.site-footer__chevron {
    font-size: 18px;
    line-height: 1;
    transition: transform var(--tx-fast, 200ms ease-out);
}

.site-footer__title-mobile[aria-expanded="true"] .site-footer__chevron {
    transform: rotate(45deg);
}

/* ---------- Listes liens ---------- */
.site-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__list li {
    padding: 8px 0;
}

.site-footer__col a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.5;
    display: inline-block;
    transition: color var(--tx-fast, 200ms ease-out),
                transform var(--tx-fast, 200ms ease-out);
}

.site-footer__col a:hover,
.site-footer__col a:focus-visible {
    color: #fff;
    transform: translateX(4px);
}

/* ---------- Col 4 : Contact ---------- */
.site-footer__contact p {
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 12px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    color: rgba(255, 255, 255, 0.7);
}

.site-footer__contact p:last-child {
    margin-bottom: 0;
}

.site-footer__icon {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-gold, #C9A96E);
}

.site-footer__contact a {
    color: rgba(255, 255, 255, 0.85);
}

.site-footer__contact a:hover,
.site-footer__contact a:focus-visible {
    color: #fff;
    transform: none; /* annule translateX pour le contact (icone + texte) */
}

/* ---------- Bottom bar ---------- */
.site-footer__bottom hr {
    border: 0;
    border-top: 1px solid rgba(201, 169, 110, 0.3);
    margin: 64px 0 24px;
}

.site-footer__bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.site-footer__bottom-row p {
    margin: 0;
}

.site-footer__bottom-row a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color var(--tx-fast, 200ms ease-out);
}

.site-footer__bottom-row a:hover,
.site-footer__bottom-row a:focus-visible {
    color: #fff;
}

.site-footer__sep {
    color: var(--color-gold, #C9A96E);
    margin: 0 6px;
    opacity: 0.7;
}

/* ---------- Attribution ShineNows ---------- */
.site-footer__credit {
    text-align: center;
    margin: 24px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.3px;
}

.site-footer__credit a {
    color: var(--color-gold, #C9A96E);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--tx-fast, 200ms ease-out);
}

.site-footer__credit a:hover,
.site-footer__credit a:focus-visible {
    color: var(--color-gold-deep, #B8975D);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablette : 2 colonnes */
@media (max-width: 1023px) {
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
    }
}

/* Mobile : 1 colonne + accordeons */
@media (max-width: 640px) {
    .site-footer {
        padding: 56px 0 24px;
        margin-top: 64px;
    }

    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Bascule titres : H3 cache, bouton mobile visible */
    .site-footer__title {
        display: none;
    }

    .site-footer__title-mobile {
        display: flex;
    }

    /* Cols 2/3/4 : listes/contact caches par defaut, JS ouvre via aria-expanded.
       Col 4 (Contact) a aria-expanded="true" sur le bouton => ouverte par defaut. */
    .site-footer__list,
    .site-footer__contact {
        padding: 16px 0 8px;
    }

    /* Col 1 (brand) : pas d'accordeon, toujours visible */
    .site-footer__col--brand {
        text-align: center;
        padding-bottom: 32px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        margin-bottom: 8px;
    }

    .site-footer__col--brand .site-footer__logo {
        margin: 0 auto 16px;
    }

    .site-footer__tagline {
        margin: 0 auto 24px;
    }

    .site-footer__social {
        justify-content: center;
    }

    /* Bottom bar : centre + empile */
    .site-footer__bottom hr {
        margin: 32px 0 20px;
    }

    .site-footer__bottom-row {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
}