/*
tk2-redesign.css
Couche de refonte "propre" ajoutée par-dessus main.css (jamais modifié directement,
main.css contient des dizaines de règles dupliquées/conflictuelles issues des
itérations successives - on n'y touche pas pour ne rien casser).

Cette feuille est chargée APRES main.css. Elle utilise uniquement des classes
nouvelles (préfixe tk2-) pour ne jamais entrer en conflit avec l'existant, sauf
quand une classe existante doit explicitement être neutralisée/complétée.

Sommaire :
1. Cartes projet (titre au-dessus, plus de bulle sur l'image)
2. Logofolio (grille centrée, une ligne sur desktop, responsive)
3. Typographie de titres cohérente (kicker / hero title / section title)
4. Header / footer - petites finitions
5. Corrections responsive générales (pas de texte compressé sur mobile)
*/

/* ==========================================================================
   1. CARTES PROJET
   Structure HTML (template-parts/project-card.php) :
   .tk2-card > (.tk2-card-heading, article.project-card > a > .project-media)
   Le bloc .project-card / .project-media garde son ancien systeme de mise en
   forme (aspect-ratio, radius, hover) issu de main.css - on ne le touche pas.
   On ajoute juste le titre au-dessus, proprement, et on neutralise l'ancien
   degrade de bas d'image qui n'a plus lieu d'etre.
   ========================================================================== */

.tk2-card {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.1vw, 16px);
    min-width: 0;
}

.tk2-card.is-hidden {
    display: none;
}

.tk2-card-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: clamp(10px, 1.5vw, 20px);
}

.tk2-card-title {
    font-family: var(--tk-font);
    font-size: clamp(16px, 1.15vw, 21px);
    font-weight: 620;
    line-height: 1.25;
    color: var(--tk-ink);
    letter-spacing: -0.01em;
}

.tk2-card-category {
    flex: none;
    font-family: var(--tk-font);
    font-size: clamp(11px, 0.78vw, 13px);
    font-weight: 560;
    letter-spacing: 0.02em;
    color: var(--tk-muted);
    text-transform: uppercase;
    white-space: nowrap;
}

/* Le format source des visuels est d'environ 1.63:1 (4801x2941) : on colle les
   cartes sur ce ratio pour que l'image se voie quasiment sans recadrage. */
.tk2-card .project-card a {
    aspect-ratio: 1.63 / 1 !important;
    min-height: 0 !important;
    background: var(--tk-soft) !important;
}

.tk2-card .project-media img,
.tk2-card .project-media video {
    object-fit: cover;
}

/* L'ancien degrade de bas d'image (pense pour un texte en overlay) n'a plus
   d'usage : le titre est desormais au-dessus de la carte. */
.tk2-card .project-card a::before,
.tk2-card .project-card a::after {
    content: none !important;
    display: none !important;
}

.tk2-card .project-card a:hover {
    transform: translateY(-4px) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tk2-card:hover .tk2-card-title {
    color: var(--tk-accent);
    transition: color 0.2s ease;
}

@media (max-width: 900px) {
    .tk2-card .project-card a {
        aspect-ratio: 1.5 / 1 !important;
    }

    .tk2-card-title {
        font-size: 16px;
    }

    .tk2-card-category {
        font-size: 11px;
    }
}

@media (max-width: 560px) {
    .tk2-card .project-card a {
        aspect-ratio: 1.3 / 1 !important;
    }

    .tk2-card-heading {
        flex-wrap: wrap;
        gap: 4px 12px;
    }
}

/* ==========================================================================
   2. LOGOFOLIO
   Grille centree, alignee sur une seule ligne au format ordinateur, et qui
   passe en plusieurs lignes proprement sur tablette / mobile.
   ========================================================================== */

.logofolio .logo-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: clamp(10px, 1.6vw, 24px) !important;
    grid-template-columns: unset !important;
    width: 100% !important;
}

.logofolio .logo-card {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: none !important;
    aspect-ratio: 1.15 / 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--tk-white) !important;
    border: 1px solid var(--tk-line) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.logofolio .logo-card.large {
    flex: 1 1 0% !important;
}

.logofolio .logo-card img {
    width: 88% !important;
    height: 88% !important;
    max-width: 88% !important;
    max-height: 88% !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 !important;
    display: block !important;
    transform: scale(1.35);
    transition: transform 0.3s ease;
}

.logofolio .logo-card:hover img {
    transform: scale(1.45);
}

.logofolio .logo-card a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.logofolio .logo-card:hover {
    border-color: var(--tk-accent) !important;
    transition: border-color 0.2s ease;
}

/* Toujours une seule ligne sur ordinateur (6 logos) : les cartes retrecissent
   ensemble plutot que de passer a la ligne. */
@media (min-width: 901px) {
    .logofolio .logo-grid {
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 900px) {
    .logofolio .logo-grid {
        flex-wrap: wrap !important;
        gap: 14px !important;
    }

    .logofolio .logo-card,
    .logofolio .logo-card.large {
        flex: 1 1 clamp(120px, 28vw, 170px) !important;
    }
}

@media (max-width: 560px) {
    .logofolio .logo-grid {
        flex-direction: column !important;
    }

    .logofolio .logo-card,
    .logofolio .logo-card.large {
        flex: 1 1 auto !important;
        width: 100% !important;
        aspect-ratio: 1.9 / 1 !important;
    }
}

/* ==========================================================================
   3. TYPOGRAPHIE - coherence des titres de page
   Meme gabarit (kicker / grand titre / texte d'intro) sur accueil, projets,
   profil et contact, avec une echelle fluide (clamp) qui ne se "tasse" pas
   sur mobile : elle descend en douceur au lieu de casser la mise en page.
   ========================================================================== */

.section-kicker,
.tk-projects-page .count,
.tk-contact-page .count,
.tk-final-page .kicker {
    font-family: var(--tk-font) !important;
    font-size: clamp(12px, 0.85vw, 14px) !important;
    font-weight: 640 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--tk-accent) !important;
}

.tk-projects-page .hero-title,
.tk-contact-page .hero-title,
.profile-hero-title h1,
.project-detail-hero h1 {
    font-family: var(--tk-font) !important;
    font-weight: 640 !important;
    letter-spacing: -0.02em !important;
    line-height: 0.94 !important;
    color: var(--tk-ink) !important;
}

.tk-projects-page .hero-copy,
.tk-contact-page .hero-copy,
.profile-hero-copy p {
    font-family: var(--tk-font) !important;
    font-weight: 440 !important;
    line-height: 1.35 !important;
    color: var(--tk-muted) !important;
}

/* ==========================================================================
   4. HEADER / FOOTER - finitions
   ========================================================================== */

.site-header {
    backdrop-filter: blur(14px);
}

.footer-contact-link,
.footer-links a {
    transition: color 0.2s ease, opacity 0.2s ease;
}

.footer-links a:hover {
    color: var(--tk-accent) !important;
    opacity: 1 !important;
}

.footer-bottom a:hover {
    color: var(--tk-accent) !important;
}

/* ==========================================================================
   5. RESPONSIVE GENERAL
   Les elements textuels du site utilisent deja largement clamp() : on
   s'assure juste qu'aucun conteneur de titre ne force une largeur/py fixe qui
   ecrase le texte sur petit ecran.
   ========================================================================== */

@media (max-width: 640px) {
    .tk-projects-page .hero,
    .tk-contact-page .contact-hero,
    .profile-hero {
        grid-template-columns: 1fr !important;
    }

    .tk-projects-page .hero-title,
    .tk-contact-page .hero-title,
    .profile-hero-title h1 {
        font-size: clamp(40px, 12vw, 64px) !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   6. TITRES DE PAGE - alignes a gauche partout (comme le titre "Kevin Tony."
   de l'accueil), au lieu d'etre decales par une colonne "label" a cote.
   ========================================================================== */

.tk-projects-page .hero,
.tk-contact-page .contact-hero {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    row-gap: clamp(14px, 1.8vw, 22px) !important;
}

.tk-projects-page .hero .count,
.tk-contact-page .contact-hero .count,
.tk-projects-page .hero .hero-title,
.tk-contact-page .contact-hero .hero-title,
.tk-projects-page .hero .hero-copy,
.tk-contact-page .contact-hero .hero-copy {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: start !important;
    max-width: min(900px, 100%) !important;
}

.tk-projects-page .hero .count,
.tk-contact-page .contact-hero .count {
    order: -1;
}

/* ==========================================================================
   7. TEXTES SUR UNE SEULE LIGNE - email de contact et libelles courts qui ne
   doivent jamais casser sur deux lignes.
   ========================================================================== */

.contact-details .big-contact-link {
    display: inline-block !important;
    white-space: nowrap !important;
    font-size: clamp(19px, 2.6vw, 38px) !important;
    max-width: 100% !important;
}

@media (max-width: 560px) {
    .contact-details .big-contact-link {
        font-size: clamp(16px, 5.6vw, 24px) !important;
    }
}

/* ==========================================================================
   8. PAGE PROFIL - reprend le langage visuel de la banniere d'accueil
   (badge kicker, titre imposant, photo en couleur pleine largeur).
   ========================================================================== */

.profile-hero.profile-banner {
    display: grid !important;
    grid-template-columns: 1.05fr 0.95fr !important;
    grid-template-areas: "title photo" "copy photo" !important;
    align-items: center !important;
    column-gap: clamp(28px, 4.5vw, 72px) !important;
    row-gap: clamp(18px, 2vw, 28px) !important;
}

.profile-hero-title {
    grid-area: title;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.profile-hero-copy {
    grid-area: copy;
}

.profile-hero-photo {
    grid-area: photo;
    background: none !important;
    box-shadow: none !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    aspect-ratio: 4 / 5 !important;
}

.profile-hero-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: none !important;
}

.tk2-kicker-badge {
    display: inline-flex !important;
    align-self: flex-start !important;
    align-items: center !important;
    padding: 12px 22px !important;
    margin: 0 0 clamp(20px, 2.6vw, 34px) !important;
    border: 2px solid color-mix(in srgb, var(--tk-accent) 70%, white) !important;
    border-radius: 10px !important;
    color: var(--tk-accent) !important;
    background: rgba(144, 88, 255, 0.09) !important;
    font-size: clamp(14px, 1.2vw, 18px) !important;
    font-weight: 780 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
}

.profile-hero-title h1 {
    font-size: clamp(52px, 6.4vw, 92px) !important;
    font-weight: 690 !important;
    letter-spacing: -0.02em !important;
    line-height: 0.96 !important;
    margin: 0 !important;
}

@media (max-width: 900px) {
    .profile-hero.profile-banner {
        grid-template-columns: 1fr !important;
        grid-template-areas: "photo" "title" "copy" !important;
    }

    .profile-hero-photo {
        aspect-ratio: 16 / 10 !important;
    }
}

/* ==========================================================================
   9. CARTE FRAGILE - anime le logo tant qu'aucun vrai fichier video/motion
   n'est fourni (les URLs mp4 existantes dans la fiche projet sont mortes).
   ========================================================================== */

@keyframes tk2-fragile-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.045); }
}

.project-card-elibo-fragile-identite-visuelle .project-media img {
    animation: tk2-fragile-pulse 3.2s ease-in-out infinite;
}


/* ============================================================
   10. HERO ACCUEIL — ZONE DE FLOTTAISON (photo + texte + boutons visibles ensemble)
   ============================================================ */
.tk-final-page .stage {
    padding-top: clamp(24px, 4vw, 40px) !important;
    min-height: min(597px, 88vh) !important;
    row-gap: 0 !important;
}
.tk-final-page .kicker {
    margin-bottom: clamp(10px, 1.6vw, 18px) !important;
}
.tk-final-page h1.name {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: baseline !important;
    gap: 0 0.28em !important;
    font-size: clamp(38px, 6.4vw, 86px) !important;
    line-height: 0.98 !important;
    margin-bottom: clamp(10px, 1.8vw, 20px) !important;
}
.tk-final-page h1.name span {
    display: inline-block !important;
}
.tk-final-page .text-block {
    margin-bottom: clamp(6px, 1vw, 12px) !important;
}
.tk-final-page .text-block .role {
    font-size: clamp(18px, 2vw, 25px) !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
}
.tk-final-page .text-block .lead {
    font-size: clamp(15px, 1.35vw, 18px) !important;
    line-height: 1.5 !important;
    max-width: 46ch !important;
}
.tk-final-page .actions {
    margin-top: clamp(14px, 2vw, 24px) !important;
}
@media (max-width: 760px) {
    .tk-final-page .stage {
        min-height: auto !important;
        padding-top: 20px !important;
    }
    .tk-final-page h1.name {
        font-size: clamp(34px, 12vw, 52px) !important;
    }
}


/* ==========================================================================
   11. MENU MOBILE - LISIBILITE (fond blanc, texte noir, accents violets)
   main.css definit .menu-overlay en fond quasi noir (--tk-ink) et les liens
   .menu-links a n'ont pas de couleur propre : ils heritent d'un noir global
   quasi identique au fond -> texte invisible. On force ici un menu clair et
   lisible avec l'accent violet de la marque (--tk-accent) au survol/focus.
   ========================================================================== */

.menu-overlay {
    background: var(--tk-white) !important;
    color: var(--tk-ink) !important;
    border-top: 1px solid var(--tk-line);
}

.menu-links a {
    color: var(--tk-ink) !important;
    transition: color 0.2s ease, transform 0.2s ease;
}

.menu-links a:hover,
.menu-links a:focus-visible {
    color: var(--tk-accent) !important;
}

.menu-contact {
    color: rgba(5, 5, 5, 0.6) !important;
}

.menu-contact a {
    color: var(--tk-ink) !important;
    transition: color 0.2s ease;
}

.menu-contact a:hover,
.menu-contact a:focus-visible {
    color: var(--tk-accent) !important;
}

.menu-small-links a {
    color: var(--tk-ink) !important;
    border-color: rgba(5, 5, 5, 0.2) !important;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.menu-small-links a:hover,
.menu-small-links a:focus-visible {
    color: var(--tk-white) !important;
    background: var(--tk-accent) !important;
    border-color: var(--tk-accent) !important;
}


/* ==========================================================================
   12. FOOTER - EMAIL SUR UNE SEULE LIGNE
   main.css definit .footer-contact-link avec un font-size clamp(24px, 3vw, 54px)
   dans une colonne de grille figee a 260-280px (voire re-cassee en grille a
   4 colonnes sur mobile <=520px par une regle plus tardive). Le texte de
   l'email deborde donc systematiquement sur 2-3 lignes, desktop comme mobile.
   On reduit le clamp pour que l'adresse tienne sur une seule ligne partout.
   ========================================================================== */

.footer-contact-link {
    font-size: clamp(15px, 1.5vw, 20px) !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
}


/* ==========================================================================
   13. PHOTO HERO ACCUEIL - MEME TAILLE QUE LA PHOTO HERO PROFIL
   main.css dimensionne .photo-zone (accueil) en min(52vw, 800px) x
   min(88svh, 910px), beaucoup plus grand que .profile-hero-photo (page
   Profil) qui utilise juste min(68svh, 720px). On aligne l'accueil sur la
   meme formule de hauteur que Profil, et on reduit la largeur max dans la
   meme proportion pour garder les cadrages/transform existants coherents.
   ========================================================================== */

@media (min-width: 861px) {
.tk-final-page .photo-zone {
    width: min(41vw, 630px) !important;
    height: min(68svh, 720px) !important;
}
.tk-final-page .portrait {
    height: min(68svh, 720px) !important;
}
}

/* ==========================================================================
   14. LOGOFOLIO - LOGO DOLLIE'S TROP GRAND (RATIO TRES LARGE VS BOITE CARREE)
   Le logo dollie's a un ratio tres large (3.71:1) contrairement aux autres
   logos (proches du carre). Comme .logo-card est force en carre et que la
   boite object-fit fait 78% x 70%, dollie's est le seul a etre limite par
   la largeur et remplit donc tout le plafond de 78%, ce qui le fait paraitre
   beaucoup plus gros que les autres logos, surtout sur petit ecran. On
   reduit sa largeur max pour l'aligner visuellement avec les autres cartes.
   ========================================================================== */
@media (max-width: 860px) {
.logo-card.dollies-card img,
.dollies-card img {
    width: 48% !important;
    height: 70% !important;
}
}

/* ==========================================================================
   15. CONTACT - EMAIL DEBORDE DE SA CARTE (grid blowout + police trop grande)
   .contact-details est en display:grid avec une colonne qui se dimensionne
   sur le contenu (auto), et .contact-details .big-contact-link est en
   white-space:nowrap : le texte de l'email pousse la colonne au-dela de la
   largeur reelle de la carte blanche, et deborde visuellement sur le bloc
   formulaire a cote. On force la colonne a respecter la largeur disponible
   (minmax(0,1fr)) et on reduit la taille de police pour que l'email tienne
   sur une seule ligne DANS la carte.
   ========================================================================== */
.contact-details {
    grid-template-columns: minmax(0, 1fr) !important;
}
.contact-details .big-contact-link {
    font-size: clamp(18px, 1.9vw, 26px) !important;
    white-space: nowrap !important;
    width: 100% !important;
}

/* ==========================================================================
   16. CARTE PROJET MYSNEAKERS - IMAGE LONGUE DEFILABLE (scroll)
   L'image du projet My Sneakers est un moodboard tres long (format vertical).
   Au lieu de la recadrer en 'cover' comme les autres cartes, on la garde a
   sa hauteur naturelle et on rend le conteneur scrollable verticalement pour
   pouvoir la parcourir entierement directement depuis la carte.
   ========================================================================== */
.project-card-mysneakers-interface-ecommerce .project-media {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    cursor: ns-resize;
}
.project-card-mysneakers-interface-ecommerce .project-media img {
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    object-fit: unset !important;
    object-position: top center !important;
    display: block !important;
}
.project-card-mysneakers-interface-ecommerce .project-media::-webkit-scrollbar {
    width: 6px;
}
.project-card-mysneakers-interface-ecommerce .project-media::-webkit-scrollbar-thumb {
    background: rgba(5, 5, 5, 0.25);
    border-radius: 999px;
}


/* ==========================================================================
   17. MENU MOBILE - BLOQUER LE SCROLL DE LA PAGE QUAND LE MENU EST OUVERT
   Le JS (main.js) toggle la classe 'menu-open' sur <body> ET <html>.
   main.css met deja overflow:hidden sur body.menu-open, mais l'element qui
   scrolle reellement est <html> (overflow-y: visible), donc le body seul ne
   suffit pas a bloquer le scroll. On bloque aussi l'element racine.
   ========================================================================== */

html.menu-open {
    overflow: hidden !important;
    height: 100% !important;
}

body.menu-open {
    overflow: hidden !important;
    height: 100% !important;
    position: relative !important;
}