/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Thinkify — Footer global
   Chargé sur toutes les pages du site.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─── Variables ─────────────────────────────────── */
.tk-footer,
.tk-prefooter {
    --ft-dark:    #080e19;
    --ft-dark-2:  #0D1420;
    --ft-teal:    #00B4A6;
    --ft-teal-b:  #00cec0;
    --ft-white:   #ffffff;
    --ft-muted:   rgba(255, 255, 255, 0.38);
    --ft-border:  rgba(255, 255, 255, 0.07);
    --ft-sans:    'DM Sans', system-ui, sans-serif;
    --ft-serif:   'Playfair Display', Georgia, serif;
    --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PRÉ-FOOTER — CTA GLOBAL
   Masqué sur la page Contact via body class
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tk-prefooter {
    background:  var(--ft-dark-2);
    padding:     6rem 2rem;
    position:    relative;
    overflow:    hidden;
    border-top:  1px solid var(--ft-border);
    text-align:  center;
}

/* Orbe décorative */
.tk-prefooter::before {
    content:    '';
    position:   absolute;
    left:       50%;
    top:        50%;
    transform:  translate(-50%, -50%);
    width:      38rem;
    height:     22rem;
    background: radial-gradient(ellipse, rgba(0, 180, 166, 0.07) 0%, transparent 70%);
    pointer-events: none;
}

/* Ligne teal en haut */
.tk-prefooter::after {
    content:    '';
    position:   absolute;
    top:        0;
    left:       50%;
    transform:  translateX(-50%);
    width:      120px;
    height:     2px;
    background: linear-gradient(90deg, transparent, var(--ft-teal), transparent);
}

.tk-prefooter__inner {
    position:  relative;
    z-index:   1;
    max-width: 620px;
    margin:    0 auto;
}

.tk-prefooter__eyebrow {
    font-family:    var(--ft-sans);
    font-size:      0.7rem;
    font-weight:    700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color:          var(--ft-teal);
    margin:         0 0 1rem;
}

.tk-prefooter__title {
    font-family:    var(--ft-serif);
    font-size:      clamp(2rem, 4vw, 3rem);
    font-weight:    700;
    color:          var(--ft-white);
    line-height:    1.1;
    margin:         0 0 1.25rem;
    letter-spacing: -0.02em;
}

.tk-prefooter__title em {
    font-style: italic;
    color:      var(--ft-teal);
}

.tk-prefooter__text {
    font-family: var(--ft-sans);
    font-size:   1rem;
    color:       var(--ft-muted);
    line-height: 1.72;
    margin:      0 0 2.5rem;
}

.tk-prefooter__cta {
    display:         inline-flex;
    align-items:     center;
    gap:             0.6rem;
    font-family:     var(--ft-sans);
    font-size:       0.95rem;
    font-weight:     600;
    color:           var(--ft-dark-2);
    background:      var(--ft-teal);
    padding:         0.95rem 2.25rem;
    border-radius:   100px;
    text-decoration: none;
    transition:
        background 0.25s var(--ease-out),
        transform  0.25s var(--ease-spring),
        box-shadow 0.25s,
        gap        0.22s var(--ease-spring);
}

.tk-prefooter__cta:hover {
    background:      var(--ft-teal-b);
    transform:       translateY(-3px);
    box-shadow:      0 12px 40px rgba(0, 180, 166, 0.35);
    gap:             0.9rem;
    text-decoration: none;
    color:           var(--ft-dark-2);
}

/* Masquer le pré-footer sur la page Contact */
.thinkify-contact-page .tk-prefooter { display: none; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER PRINCIPAL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tk-footer {
    background: var(--ft-dark);
    padding:    0;
}

/* Accent teal en haut du footer */
.tk-footer__accent {
    height:     2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 180, 166, 0.5) 20%,
        rgba(0, 180, 166, 0.8) 50%,
        rgba(0, 180, 166, 0.5) 80%,
        transparent 100%
    );
}

/* ─── Grille principale ──────────────────────────── */
.tk-footer__grid {
    display:               grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap:                   3rem 4rem;
    max-width:             1100px;
    margin:                0 auto;
    padding:               4.5rem 2rem 4rem;
}

/* ─── Colonne marque ─────────────────────────────── */
.tk-footer__brand {
    display:        flex;
    flex-direction: column;
    gap:            0;
}

.tk-footer__logo {
    display:         inline-block;
    text-decoration: none;
    margin-bottom:   1.5rem;
    transition:      opacity 0.2s;
}

.tk-footer__logo:hover { opacity: 0.85; }

/* Logo NB inversé → blanc sur fond sombre */
.tk-footer__logo-img {
    width:           130px;
    height:          auto;
    display:         block;
    filter:          invert(1) brightness(0.95);
    mix-blend-mode:  screen;
}

.tk-footer__tagline {
    font-family: var(--ft-sans);
    font-size:   0.88rem;
    color:       var(--ft-muted);
    line-height: 1.72;
    margin:      0 0 1.4rem;
    max-width:   280px;
}

.tk-footer__email {
    display:         inline-flex;
    align-items:     center;
    gap:             0.4rem;
    font-family:     var(--ft-sans);
    font-size:       0.88rem;
    font-weight:     500;
    color:           var(--ft-teal);
    text-decoration: none;
    margin-bottom:   1.75rem;
    transition:      color 0.2s;
}

.tk-footer__email:hover {
    color:           var(--ft-teal-b);
    text-decoration: none;
}

.tk-footer__email::before {
    content: '→';
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Icônes sociales */
.tk-footer__social {
    display:   flex;
    gap:       0.6rem;
    flex-wrap: wrap;
}

.tk-footer__social-link {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           38px;
    height:          38px;
    border-radius:   50%;
    border:          1.5px solid rgba(255, 255, 255, 0.12);
    color:           rgba(255, 255, 255, 0.45);
    text-decoration: none;
    transition:
        border-color 0.25s,
        color        0.25s,
        background   0.25s,
        transform    0.25s var(--ease-spring);
}

.tk-footer__social-link:hover {
    border-color:    var(--ft-teal);
    color:           var(--ft-teal);
    background:      rgba(0, 180, 166, 0.08);
    transform:       translateY(-2px);
    text-decoration: none;
}

/* ─── Colonnes navigation / légal ────────────────── */
.tk-footer__col {
    display:        flex;
    flex-direction: column;
}

.tk-footer__col-title {
    font-family:    var(--ft-sans);
    font-size:      0.65rem;
    font-weight:    700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color:          var(--ft-teal);
    margin:         0 0 1.4rem;
    padding-bottom: 0.75rem;
    border-bottom:  1px solid rgba(0, 180, 166, 0.15);
}

.tk-footer__links {
    list-style: none;
    padding:    0;
    margin:     0;
    display:    flex;
    flex-direction: column;
    gap:        0.15rem;
}

.tk-footer__link {
    font-family:     var(--ft-sans);
    font-size:       0.88rem;
    color:           var(--ft-muted);
    text-decoration: none;
    padding:         0.35rem 0;
    display:         inline-flex;
    align-items:     center;
    gap:             0;
    transition:      color 0.2s, gap 0.2s var(--ease-spring), padding-left 0.2s;
}

.tk-footer__link:hover {
    color:           var(--ft-white);
    text-decoration: none;
    padding-left:    0.4rem;
}

/* Séparateur visuel entre les deux groupes de liens légaux */
.tk-footer__links .tk-footer__sep {
    height:     1px;
    background: rgba(255, 255, 255, 0.05);
    margin:     0.6rem 0;
}

/* ─── Barre de bas de page ───────────────────────── */
.tk-footer__bottom {
    border-top:     1px solid var(--ft-border);
    padding:        1.25rem 2rem;
    max-width:      1100px;
    margin:         0 auto;
    display:        flex;
    align-items:    center;
    justify-content:space-between;
    gap:            1rem;
    flex-wrap:      wrap;
}

.tk-footer__copy {
    font-family: var(--ft-sans);
    font-size:   0.75rem;
    color:       rgba(255, 255, 255, 0.22);
    line-height: 1.5;
}

.tk-footer__copy span {
    color: rgba(0, 180, 166, 0.55);
}

.tk-footer__bottom-links {
    display:   flex;
    gap:       1.5rem;
    flex-wrap: wrap;
}

.tk-footer__bottom-link {
    font-family:     var(--ft-sans);
    font-size:       0.75rem;
    color:           rgba(255, 255, 255, 0.2);
    text-decoration: none;
    transition:      color 0.2s;
}

.tk-footer__bottom-link:hover {
    color:           rgba(0, 180, 166, 0.7);
    text-decoration: none;
}

/* Wrapper pleine largeur du footer bottom */
.tk-footer__bottom-wrap {
    background: rgba(0, 0, 0, 0.2);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 900px) {
    .tk-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap:     2.5rem 3rem;
        padding: 3.5rem 1.5rem 3rem;
    }

    /* La colonne marque prend toute la largeur */
    .tk-footer__brand {
        grid-column: span 2;
    }
}

@media (max-width: 580px) {
    .tk-prefooter          { padding: 4rem 1.5rem; }
    .tk-prefooter__title   { font-size: 1.85rem; }

    .tk-footer__grid {
        grid-template-columns: 1fr;
        gap:     2rem;
        padding: 3rem 1.5rem 2.5rem;
    }

    .tk-footer__brand { grid-column: span 1; }

    .tk-footer__bottom {
        padding:        1rem 1.5rem;
        flex-direction: column;
        align-items:    flex-start;
        gap:            0.6rem;
    }

    .tk-footer__tagline { max-width: none; }
}

/* ─── Accessibilité ──────────────────────────────── */
.tk-footer__social-link:focus-visible,
.tk-footer__link:focus-visible,
.tk-prefooter__cta:focus-visible {
    outline:        2px solid var(--ft-teal);
    outline-offset: 3px;
    border-radius:  4px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   OVERRIDE HOVER BLEU BLOCKSY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body .tk-footer__link:hover           { color: #ffffff !important; text-decoration: none !important; }
html body .tk-footer__email:hover          { color: #00cec0 !important; text-decoration: none !important; }
html body .tk-footer__social-link:hover    { color: #00B4A6 !important; text-decoration: none !important; }
html body .tk-footer__bottom-link:hover    { color: #00B4A6 !important; text-decoration: none !important; }
html body .tk-prefooter__cta:hover         { color: #0D1420 !important; text-decoration: none !important; }