/* ============================================================
   footer-desktop.css
   Commerce Ethique Club — footer visible UNIQUEMENT en desktop
   Actif à partir de 1025px de large
   ============================================================ */

:root {
    --f-bg:      #1e2228;
    --f-bg2:     #16191e;
    --f-card:    #252b34;
    --f-text:    #e0e6ef;
    --f-muted:   #7a8ba8;
    --f-accent:  #1abc9c;
    --f-accent2: #ff9f43;
    --f-border:  rgba(255, 255, 255, .07);
    --f-input:   #1a1f27;
}

body.dark-mode footer {
    --f-bg:     #111417;
    --f-bg2:    #0d0f12;
    --f-card:   #1a1d23;
    --f-border: rgba(255, 255, 255, .05);
}

body:not(.dark-mode) footer {
    --f-bg:      #f4f6fa;
    --f-bg2:     #eaeef5;
    --f-card:    #ffffff;
    --f-text:    #1a2030;
    --f-muted:   #5a6a85;
    --f-accent:  #0f7a60;
    --f-accent2: #c96f00;
    --f-border:  rgba(0, 0, 0, .09);
    --f-input:   #edf0f6;
}

@media (min-width: 1025px) {

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

    #main-footer {
        display: block;
        background: var(--f-bg);
        border-top: 2px solid var(--f-accent);
        font-family: Arial, sans-serif;
    }

    /* ── Colonnes ── */
    .f-col h4 {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--f-accent);
        margin-bottom: 12px;
        padding-bottom: 7px;
        border-bottom: 1.5px solid var(--f-accent);
        display: inline-block;
    }
    .f-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 7px; }
    .f-col ul li { display: flex; align-items: flex-start; gap: 7px; }
    .f-col ul li i { color: var(--f-accent); font-size: 13px; margin-top: 2px; flex-shrink: 0; }
    .f-col ul li a, .f-col ul li span {
        font-size: 13px; color: var(--f-muted); text-decoration: none; line-height: 1.4;
        transition: color .2s;
    }
    .f-col ul li a:hover { color: var(--f-accent2); }

    .f-brand-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    .f-brand-logo {
        width: 40px; height: 40px; border-radius: 9px;
        background: var(--f-accent); color: #fff;
        display: flex; align-items: center; justify-content: center;
        font-size: 14px; font-weight: 700; flex-shrink: 0;
    }
    .f-brand-name { font-size: 15px; font-weight: 700; color: var(--f-text); }
    .f-brand-sub  { font-size: 11px; color: var(--f-muted); margin-top: 2px; }

    /* ── Réseaux sociaux ── */
    .f-social-row { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
    .soc-btn {
        width: 34px; height: 34px; border-radius: 8px;
        background: var(--f-card); border: .5px solid var(--f-border);
        display: flex; align-items: center; justify-content: center;
        color: var(--f-muted); font-size: 15px; text-decoration: none;
        transition: background .2s, color .2s;
    }
    .soc-btn:hover { background: var(--f-accent); color: #fff; border-color: var(--f-accent); }

    /* ── Newsletter ── */
    .nl-wrap p { font-size: 12px; color: var(--f-muted); margin-bottom: 9px; line-height: 1.5; }
    .nl-row { display: flex; gap: 7px; flex-direction: column; }
    .nl-input {
        background: var(--f-input); border: .5px solid var(--f-border);
        border-radius: 7px; padding: 9px 11px;
        font-size: 13px; color: var(--f-text); outline: none;
        transition: border-color .2s; width: 100%;
    }
    .nl-input::placeholder { color: var(--f-muted); }
    .nl-input:focus { border-color: var(--f-accent); }
    .nl-input.nl-invalid { border-color: #e74c3c; }
    .nl-btn {
        background: var(--f-accent); color: #fff; border: none;
        border-radius: 7px; padding: 9px 14px; font-size: 13px;
        font-weight: 700; cursor: pointer; transition: opacity .2s;
    }
    .nl-btn:hover { opacity: .85; }
    .nl-btn:disabled { opacity: .6; cursor: not-allowed; }

    /* Honeypot anti-bot : invisible pour un humain, visible pour un bot naïf */
    .nl-hp {
        position: absolute !important;
        left: -9999px !important;
        width: 1px; height: 1px;
        opacity: 0;
        pointer-events: none;
    }

    /* ── Grille 6 colonnes ── */
    .f-grid-desktop {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 28px 20px;
        padding: 32px 24px 24px;
        max-width: 1280px;
        margin: 0 auto;
    }

    /* ── Copyright ── */
    .f-copy {
        border-top: .5px solid var(--f-border);
        padding: 12px 20px;
        display: flex; flex-wrap: wrap;
        justify-content: space-between; align-items: center; gap: 8px;
    }
    .f-copy span, .f-copy a { font-size: 11px; color: var(--f-muted); text-decoration: none; }
    .f-copy a:hover { color: var(--f-accent2); }
    .f-copy-links { display: flex; gap: 14px; flex-wrap: wrap; }
}