/* ================================================================
   FOOTER — ColisBled
   Design : moderne, épuré, mobile-first
   ================================================================ */

/* ── TOKENS ── */
:root {
    --ft-bg          : #0f172a;
    --ft-bg-2        : #1e293b;
    --ft-border      : rgba(255,255,255,.07);
    --ft-text        : #94a3b8;
    --ft-text-light  : #cbd5e1;
    --ft-white       : #f1f5f9;
    --ft-primary     : #6366f1;
    --ft-primary-d   : #4f46e5;
    --ft-accent      : #10b981;
    --ft-wa          : #25d366;
    --ft-transition  : 0.2s ease;
}

/* ── BASE ── */
.ft {
    background : var(--ft-bg);
    color      : var(--ft-text);
    font-size: var(--fs-sm);
    line-height: 1.6;
    /* Adaptation sidebar desktop */
    transition : margin-left .28s cubic-bezier(.4,0,.2,1);
}

@media (min-width: 1024px) {
    body.has-sidebar .ft         { margin-left: 260px; }
    body.has-sidebar.sidebar-collapsed .ft { margin-left: 72px; }
}
@media (prefers-reduced-motion: reduce) {
    .ft { transition-duration: .01ms !important; }
}

/* ── CONTAINER ── */
.ft__container {
    width    : 100%;
    max-width: 1200px;
    margin   : 0 auto;
    padding  : 0 1.25rem;
}

/* ── ACCENT LINE ── */
.ft__accent {
    height    : 3px;
    background: linear-gradient(90deg, var(--ft-primary) 0%, var(--ft-accent) 100%);
}

/* ================================================================
   CORPS PRINCIPAL
   ================================================================ */
.ft__body {
    padding: 3.5rem 0 3rem;
    border-bottom: 1px solid var(--ft-border);
}

/* Grid — mobile first : 1 col → 2 col → 4 col */
.ft__grid {
    display              : grid;
    grid-template-columns: 1fr;
    gap                  : 2.5rem 2rem;
}

@media (min-width: 640px) {
    .ft__grid {
        grid-template-columns: 1fr 1fr;
    }
    .ft__brand {
        grid-column: 1 / -1;  /* pleine largeur sur petite tablette */
    }
}

@media (min-width: 800px) {
    .ft__grid {
        grid-template-columns: 1.8fr 1fr 1fr 1fr;
        align-items: start;
    }
    .ft__brand {
        grid-column: auto;
    }
}

/* ── BRAND ── */
.ft__logo-link {
    display        : inline-flex;
    align-items    : center;
    gap            : .85rem;
    text-decoration: none;
    margin-bottom  : 1.25rem;
}

.ft__logo-badge {
    display      : inline-flex;
    align-items  : center;
    background   : #fff;
    border-radius: 10px;
    /* padding      : .5rem .85rem; */
    box-shadow   : 0 2px 10px rgba(0,0,0,.18);
    transition   : transform var(--ft-transition), box-shadow var(--ft-transition);
}

.ft__logo-link:hover .ft__logo-badge {
    transform : scale(1.03);
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
}

.ft__logo-img-full {
    height     : 114px !important;
    width      : auto;
    max-width  : 100%;
    object-fit : contain;
    display    : block;
}

.ft__brand-desc {
    color        : var(--ft-text);
    line-height  : 1.7;
    margin-bottom: 1.25rem;
    max-width    : 300px;
}

/* Badges */
.ft__badges {
    display    : flex;
    flex-wrap  : wrap;
    gap        : .5rem;
    margin-bottom: 1.5rem;
}

.ft__badge {
    display    : inline-flex;
    align-items: center;
    gap        : .4rem;
    font-size: var(--fs-xs);
    color      : var(--ft-text-light);
    background : rgba(255,255,255,.04);
    border     : 1px solid var(--ft-border);
    border-radius: 6px;
    padding    : .3rem .65rem;
}

.ft__badge i { color: var(--ft-accent); font-size: var(--fs-xs); }

/* Réseaux sociaux */
.ft__socials {
    display: flex;
    gap    : .5rem;
    flex-wrap: wrap;
}

.ft__social {
    width          : 36px;
    height         : 36px;
    border-radius  : 9px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size: var(--fs-base);
    color          : var(--ft-text);
    background     : rgba(255,255,255,.05);
    border         : 1px solid var(--ft-border);
    text-decoration: none;
    transition     : background var(--ft-transition), color var(--ft-transition),
                     border-color var(--ft-transition), transform var(--ft-transition);
}

.ft__social:hover            { transform: translateY(-2px); }
.ft__social--fb:hover        { background: #1877f2; border-color: #1877f2; color: #fff; }
.ft__social--ig:hover        { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color: #e6683c; color: #fff; }
.ft__social--tw:hover        { background: #1da1f2; border-color: #1da1f2; color: #fff; }
.ft__social--wa:hover        { background: var(--ft-wa); border-color: var(--ft-wa); color: #fff; }
.ft__social--li:hover        { background: #0a66c2; border-color: #0a66c2; color: #fff; }

/* ── NAV COLUMNS ── */
.ft__nav-title {
    display    : block;
    font-size: var(--fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color      : var(--ft-white);
    margin-bottom: 1rem;
}

/* Bouton accordion (mobile) — invisible sur desktop */
.ft__nav-toggle {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    width          : 100%;
    background     : none;
    border         : none;
    cursor         : pointer;
    padding        : 0;
    margin-bottom  : .75rem;
}

.ft__nav-chevron {
    font-size: var(--fs-xs);
    color     : var(--ft-text);
    transition: transform var(--ft-transition);
}

.ft__nav-toggle[aria-expanded="true"] .ft__nav-chevron {
    transform: rotate(180deg);
}

/* Liste — masquée sur mobile, visible sur desktop */
.ft__nav-list {
    list-style: none;
    padding   : 0;
    margin    : 0;
    display   : none;        /* masqué par défaut sur mobile */
}

.ft__nav-toggle[aria-expanded="true"] + .ft__nav-list {
    display: block;
}

@media (min-width: 640px) {
    .ft__nav-list   { display: block; } /* toujours visible sur ≥640px */
    .ft__nav-toggle { pointer-events: none; cursor: default; }
    .ft__nav-chevron { display: none; }
}

.ft__nav-list li {
    margin-bottom: .6rem;
}

.ft__nav-list a {
    color          : var(--ft-text);
    text-decoration: none;
    font-size: var(--fs-sm);
    display        : inline-flex;
    align-items    : center;
    gap            : .35rem;
    transition     : color var(--ft-transition), padding-left var(--ft-transition);
}

.ft__nav-list a::before {
    content      : '';
    display      : inline-block;
    width        : 4px;
    height       : 4px;
    border-radius: 50%;
    background   : var(--ft-primary);
    opacity      : 0;
    flex-shrink  : 0;
    transition   : opacity var(--ft-transition);
}

.ft__nav-list a:hover {
    color       : var(--ft-white);
    padding-left: .4rem;
}

.ft__nav-list a:hover::before {
    opacity: 1;
}

/* ================================================================
   BANDE CONTACT
   ================================================================ */
.ft__contact-band {
    padding       : 1.25rem 0;
    border-bottom : 1px solid var(--ft-border);
    background    : rgba(255,255,255,.02);
}

.ft__contact-list {
    list-style : none;
    padding    : 0;
    margin     : 0;
    display    : flex;
    flex-wrap  : wrap;
    gap        : 1rem 2.5rem;
    align-items: center;
}

.ft__contact-item {
    display    : flex;
    align-items: center;
    gap        : .6rem;
    font-size: var(--fs-sm);
}

.ft__contact-icon {
    width          : 30px;
    height         : 30px;
    border-radius  : 8px;
    background     : rgba(99,102,241,.15);
    color          : var(--ft-primary);
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size: var(--fs-sm);
    flex-shrink    : 0;
}

.ft__contact-icon--wa {
    background: rgba(37,211,102,.15);
    color     : var(--ft-wa);
}

.ft__contact-item a,
.ft__contact-item span {
    color          : var(--ft-text-light);
    text-decoration: none;
    transition     : color var(--ft-transition);
}

.ft__contact-item a:hover { color: var(--ft-white); }

/* ================================================================
   NEWSLETTER
   ================================================================ */
.ft__newsletter {
    padding    : 2rem 0;
    border-bottom: 1px solid var(--ft-border);
}

.ft__nl-inner {
    display    : flex;
    align-items: center;
    gap        : 1.5rem 3rem;
    flex-wrap  : wrap;
}

.ft__nl-text  { flex: 1; min-width: 180px; }

.ft__nl-title {
    font-size: var(--fs-base);
    font-weight: 700;
    color      : var(--ft-white);
    margin     : 0 0 .2rem;
}

.ft__nl-title i {
    color       : var(--ft-primary);
    margin-right: .4rem;
}

.ft__nl-sub {
    font-size: var(--fs-sm);
    color    : var(--ft-text);
    margin   : 0;
}

.ft__nl-form {
    flex    : 1;
    min-width: 240px;
    max-width: 440px;
}

.ft__nl-field {
    align-items  : center;
    background   : rgba(255,255,255,.06);
    border       : 1px solid var(--ft-border);
    border-radius: 10px;
    overflow     : hidden;
    transition   : border-color var(--ft-transition);
}

.ft__nl-field:focus-within {
    border-color: var(--ft-primary);
}

.ft__nl-input {
    flex      : 1;
    background: transparent;
    border    : none;
    outline   : none;
    color     : var(--ft-white);
    font-size: var(--fs-sm);
    padding   : .7rem 1rem;
    min-width : 0;
}

.ft__nl-input::placeholder { color: #475569; }

.ft__nl-btn {
    display    : inline-flex;
    align-items: center;
    gap        : .4rem;
    padding    : .7rem 1.1rem;
    background : linear-gradient(135deg, var(--ft-primary), var(--ft-primary-d));
    color      : white;
    border     : none;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor     : pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition : opacity var(--ft-transition);
}

.ft__nl-btn:hover:not(:disabled) { opacity: .88; }
.ft__nl-btn:disabled              { opacity: .5; cursor: not-allowed; }

.ft__nl-feedback {
    margin-top   : .6rem;
    font-size: var(--fs-xs);
    font-weight  : 500;
    padding      : .45rem .75rem;
    border-radius: 6px;
}

.ft__nl-feedback--ok  { background: rgba(16,185,129,.12); color: #34d399; border: 1px solid rgba(16,185,129,.2); }
.ft__nl-feedback--info{ background: rgba(99,102,241,.12); color: #818cf8; border: 1px solid rgba(99,102,241,.2); }
.ft__nl-feedback--err { background: rgba(239,68,68,.1);  color: #f87171; border: 1px solid rgba(239,68,68,.18); }

@media (max-width: 639px) {
    .ft__nl-inner  { flex-direction: column; align-items: stretch; }
    .ft__nl-form   { max-width: 100%; }
}

/* ================================================================
   STATISTIQUES
   ================================================================ */
.ft__stats {
    padding   : 3rem 0;
    border-bottom: 1px solid var(--ft-border);
}

.ft__stats-grid {
    display              : grid;
    grid-template-columns: repeat(2, 1fr);
    gap                  : .875rem;
    margin               : 0;
}

@media (min-width: 640px) {
    .ft__stats-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}

.ft__stat {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    text-align    : center;
    background    : rgba(255,255,255,.03);
    border        : 1px solid var(--ft-border);
    border-radius : 1rem;
    padding       : 1.5rem 1rem;
    transition    : transform .25s ease, background .25s ease, border-color .25s ease;
}

.ft__stat:hover {
    transform    : translateY(-3px);
    background   : rgba(255,255,255,.05);
    border-color : rgba(255,255,255,.14);
}

.ft__stat-icon {
    order         : 1;
    width         : 42px;
    height        : 42px;
    margin-bottom : .75rem;
    border-radius : 50%;
    display       : flex;
    align-items   : center;
    justify-content: center;
    background    : linear-gradient(135deg, var(--ft-primary) 0%, var(--ft-accent) 100%);
    color         : #fff;
    font-size     : .9375rem;
    box-shadow    : 0 8px 18px -8px rgba(99,102,241,.55);
}

.ft__stat-icon--rating {
    background : linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    box-shadow : 0 8px 18px -8px rgba(245,158,11,.55);
}

.ft__stat-num {
    order      : 2;
    display    : block;
    font-size  : 1.75rem;
    font-weight: 800;
    color      : var(--ft-white);
    line-height: 1;
    margin-bottom: .3rem;
    background : linear-gradient(135deg, var(--ft-white) 0%, rgba(241,245,249,.7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ft__stat-label {
    order: 3;
    font-size: var(--fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color     : #64748b;
}

/* ================================================================
   BARRE BOTTOM
   ================================================================ */
.ft__bottom {
    padding: 1.25rem 0;
}

.ft__bottom-inner {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    flex-wrap      : wrap;
    gap            : 1rem 1.5rem;
}

/* Copyright */
.ft__copy {
    font-size: var(--fs-sm);
    color    : #475569;
    margin   : 0;
}

.ft__heart {
    color    : #ef4444;
    animation: ftHeart 1.6s ease-in-out infinite;
    display  : inline-block;
}

@keyframes ftHeart {
    0%,100% { transform: scale(1); }
    50%      { transform: scale(1.25); }
}

/* Paiements */
.ft__payments {
    display    : flex;
    align-items: center;
    gap        : .65rem;
}

.ft__payments i {
    font-size: var(--fs-2xl);
    color     : #334155;
    transition: color var(--ft-transition);
}

.ft__payments i:hover { color: var(--ft-text-light); }

/* App badges */
.ft__apps {
    display: flex;
    gap    : .5rem;
}

.ft__app-btn {
    display        : inline-flex;
    align-items    : center;
    gap            : .45rem;
    padding        : .45rem .9rem;
    background     : rgba(255,255,255,.05);
    border         : 1px solid var(--ft-border);
    border-radius  : 8px;
    color          : var(--ft-text-light);
    text-decoration: none;
    font-size: var(--fs-xs);
    font-weight    : 600;
    transition     : background var(--ft-transition), border-color var(--ft-transition),
                     color var(--ft-transition), transform var(--ft-transition);
}

.ft__app-btn i { font-size: var(--fs-lg); }

.ft__app-btn:hover {
    background  : rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.18);
    color       : var(--ft-white);
    transform   : translateY(-2px);
}

@media (max-width: 767px) {
    .ft__bottom-inner {
        flex-direction: column;
        align-items   : center;
        text-align    : center;
    }
}

/* ================================================================
   BOUTON WHATSAPP FLOTTANT
   ================================================================ */
.whatsapp-float {
    position      : fixed;
    bottom        : 80px;
    right         : 1.5rem;
    z-index       : 999;
    width         : 52px;
    height        : 52px;
    background    : var(--ft-wa);
    border-radius : 50%;
    display       : flex;
    align-items   : center;
    justify-content: center;
    box-shadow    : 0 4px 20px rgba(37,211,102,.4);
    text-decoration: none;
    transition    : transform var(--ft-transition), box-shadow var(--ft-transition);
}

.whatsapp-float:hover {
    transform : scale(1.1);
    box-shadow: 0 6px 28px rgba(37,211,102,.55);
}

.whatsapp-float-icon {
    font-size: var(--fs-2xl);
    color    : white;
    line-height: 1;
}

.whatsapp-float-tooltip {
    position      : absolute;
    right         : 60px;
    background    : #1e293b;
    color         : white;
    font-size: var(--fs-xs);
    font-weight   : 600;
    padding       : .35rem .75rem;
    border-radius : 6px;
    white-space   : nowrap;
    opacity       : 0;
    pointer-events: none;
    transition    : opacity var(--ft-transition);
}

.whatsapp-float-tooltip::after {
    content        : '';
    position       : absolute;
    top            : 50%;
    right          : -5px;
    transform      : translateY(-50%);
    border         : 5px solid transparent;
    border-left-color: #1e293b;
    border-right   : none;
}

.whatsapp-float:hover .whatsapp-float-tooltip { opacity: 1; }

@media (max-width: 1023.98px) {
    .whatsapp-float { bottom: 70px; right: 1rem; width: 46px; height: 46px; }
    .whatsapp-float-icon { font-size: var(--fs-2xl); }
    .whatsapp-float-tooltip { display: none; }
}

/* ================================================================
   ACCESSIBILITÉ
   ================================================================ */
@media (prefers-contrast: high) {
    .ft { border-top: 2px solid var(--ft-primary); }
}

.ft__nav-list a:focus-visible,
.ft__social:focus-visible,
.ft__nl-btn:focus-visible,
.ft__app-btn:focus-visible {
    outline       : 2px solid var(--ft-primary);
    outline-offset: 3px;
    border-radius : 4px;
}