/* =========================================================
FOOTER PARTAGÉ — Albexia
CSS totalement isolé du reste du site.
========================================================= */

#site-footer,
#site-footer *,
#site-footer *::before,
#site-footer *::after {
box-sizing: border-box;
}

/* =========================================================
FOOTER PRINCIPAL
========================================================= */

#site-footer {
width: 100%;
max-width: 100%;
margin: 100px 0 0;
padding: 0 !important;

background: var(--bg) !important;
border-top: 1px solid var(--border);

color: var(--text-muted);
font-family: var(--sans, 'Inter', -apple-system, 'Segoe UI', sans-serif);
font-size: 13px;
line-height: 1.6;
text-align: left !important;

overflow: hidden;
}

/* =========================================================
ZONE SUPÉRIEURE
========================================================= */

#site-footer .footer-top {
width: 100%;
margin: 0;
padding: 56px 0 48px;

background: var(--bg2) !important;
border: 0 !important;
}

/* =========================================================
CONTENEUR
========================================================= */

#site-footer .footer-wrap {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}

/* =========================================================
GRILLE
========================================================= */

#site-footer .footer-grid {
width: 100%;
max-width: 100%;

display: grid;
grid-template-columns:
minmax(0, 2fr)
minmax(0, 1fr)
minmax(0, 1fr)
minmax(0, 1fr);

gap: 40px;

margin: 0;
padding: 0;
}

/*
IMPORTANT :
Les colonnes du footer ne sont PAS des cartes.
On neutralise les éventuels styles globaux
provenant de style.css.
*/

#site-footer .footer-grid > *,
#site-footer .footer-brand,
#site-footer .footer-col {
min-width: 0;
width: auto;
max-width: none;

margin: 0;
padding: 0;

background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}

/* =========================================================
LOGO
========================================================= */

#site-footer .footer-logo {
display: inline-flex;
align-items: center;

margin: 0 0 14px;
padding: 0;

background: transparent !important;
border: 0 !important;
border-radius: 0;
box-shadow: none !important;

text-decoration: none;
}

#site-footer .footer-logo svg {
display: block;
width: 160px;
max-width: 100%;
height: 30px;
}

#site-footer .fl-outline {
fill: none;
stroke: var(--accent2);
stroke-width: 2;
stroke-linejoin: round;
}

#site-footer .fl-fill {
fill: var(--accent2);
opacity: 0.2;
}

#site-footer .fl-dot {
fill: var(--accent2);
}

#site-footer .fl-text {
fill: var(--text);
font-family: var(--serif, 'Fraunces', Georgia, 'Times New Roman', serif);
font-size: 20px;
font-weight: 700;
letter-spacing: -0.5px;
}

#site-footer .fl-x {
fill: var(--accent2);
}

/* =========================================================
DESCRIPTION
========================================================= */

#site-footer .footer-tagline {
display: block;

width: 100%;
max-width: 280px;

margin: 0 0 22px;
padding: 0;

background: transparent !important;
border: 0 !important;
box-shadow: none !important;

color: var(--text-muted);
font-weight: 300;

overflow-wrap: anywhere;
}

/* =========================================================
NEWSLETTER
========================================================= */

#site-footer .footer-newsletter {
display: block;

width: 100%;
max-width: 340px;

margin: 0;
padding: 0;

background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}

#site-footer .footer-nl-label {
display: block;

width: 100%;

margin: 0 0 8px;
padding: 0;

background: transparent !important;
border: 0 !important;

color: var(--text-dim);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
}

#site-footer .footer-nl-row {
display: flex;

width: 100%;
max-width: 100%;
min-width: 0;

margin: 0 0 8px;
padding: 0;

gap: 6px;

background: transparent !important;
border: 0 !important;
}

#site-footer .footer-nl-input {
flex: 1 1 auto;

width: 1%;
min-width: 0;
max-width: 100%;

padding: 9px 12px;

background: var(--bg3);
border: 1px solid var(--border);
border-radius: var(--radius-sm, 3px);

color: var(--text);
font-family: inherit;
font-size: 13px;

outline: none;
}

#site-footer .footer-nl-input::placeholder {
color: var(--text-dim);
}

#site-footer .footer-nl-input:focus {
border-color: var(--accent);
}

#site-footer .footer-nl-btn {
flex: 0 0 auto;

min-width: 0;

padding: 9px 16px;

background: var(--accent);
border: 0 !important;
border-radius: var(--radius-sm, 3px);
box-shadow: none !important;

color: var(--text);
font-family: inherit;
font-size: 13px;
font-weight: 500;

white-space: nowrap;
cursor: pointer;

transition: filter 0.2s ease;
}

#site-footer .footer-nl-btn:hover {
filter: brightness(1.15);
}

#site-footer .footer-nl-btn:disabled {
opacity: 0.6;
cursor: default;
}

#site-footer .footer-nl-badge {
margin: 0;
padding: 0;

background: transparent !important;
border: 0 !important;
box-shadow: none !important;

color: var(--accent3);
font-size: 11px;

overflow-wrap: anywhere;
}

#site-footer .footer-nl-badge.is-success {
color: var(--accent3);
font-size: 12px;
}

#site-footer .footer-nl-badge.is-error {
color: var(--accent2);
font-size: 12px;
}

/* =========================================================
COLONNES DE LIENS
========================================================= */

#site-footer .footer-col {
display: flex;
flex-direction: column;
align-items: flex-start;
}

#site-footer .footer-col-title {
display: block;

width: 100%;

margin: 0 0 14px;
padding: 0;

background: transparent !important;
border: 0 !important;
box-shadow: none !important;

color: var(--text-dim);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;

overflow-wrap: anywhere;
}

#site-footer .footer-link {
display: block;

width: fit-content;
max-width: 100%;

margin: 0 0 10px;
padding: 0;

background: transparent !important;
border: 0 !important;
border-radius: 0;
box-shadow: none !important;

color: var(--text-muted);
font-size: 13px;
line-height: 1.5;

text-decoration: none;

overflow-wrap: anywhere;

transition: color 0.15s ease;
}

#site-footer .footer-link:hover {
color: var(--text);
}

/* =========================================================
ACCESSIBILITÉ
========================================================= */

#site-footer .footer-link:focus-visible,
#site-footer .footer-logo:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: var(--radius, 4px);
}

/* =========================================================
BARRE INFÉRIEURE
========================================================= */

#site-footer .footer-bottom {
width: 100%;

margin: 0;
padding: 18px 0;

background: var(--bg) !important;
border-top: 1px solid var(--border);
}

#site-footer .footer-bottom-inner {
display: flex;
align-items: center;
justify-content: space-between;

width: 100%;
min-width: 0;

margin: 0;
padding: 0;

gap: 16px;
}

#site-footer .footer-copy,
#site-footer .footer-made {
margin: 0;
padding: 0;

background: transparent !important;
border: 0 !important;
box-shadow: none !important;

color: var(--text-dim);
font-size: 12px;
}

/* =========================================================
TABLETTE
========================================================= */

@media (max-width: 900px) {

#site-footer .footer-grid {
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr);

gap: 32px;

}

#site-footer .footer-brand {
grid-column: 1 / -1;
}
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 600px) {

#site-footer {
margin-top: 64px;
}

#site-footer .footer-top {
padding: 40px 0 32px;
}

#site-footer .footer-wrap {
padding: 0 16px;
}

#site-footer .footer-grid {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);
  gap: 28px 20px;
}

#site-footer .footer-brand {
  grid-column: 1 / -1;
}

#site-footer .footer-col:last-child {
  grid-column: 1 / -1;
}

#site-footer .footer-newsletter {
max-width: 100%;
}

#site-footer .footer-bottom-inner {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}

#site-footer .footer-made {
display: none;
}
}

/* =========================================================
TRÈS PETITS ÉCRANS
========================================================= */

@media (max-width: 380px) {

#site-footer .footer-nl-row {
flex-direction: column;
gap: 8px;
}

#site-footer .footer-nl-input,
#site-footer .footer-nl-btn {
width: 100%;
}
}