/* ==========================================================================
   Page d'accueil publique

   Tout est portee par les tokens de public/css/brand.css : aucune couleur
   n'est ecrite en dur ici, de sorte qu'un changement de marque se limite a
   brand.css. Le prefixe .lk- evite toute collision avec le theme achete.

   Concue en mobile d'abord : les regles de base valent pour le petit ecran,
   les media queries n'ajoutent que ce qui change au-dessus.
   ========================================================================== */

.lk-home {
    color: var(--color-text);
    background-color: var(--color-surface);
}

.lk-home .lk-section {
    padding: 3rem 0;
}

/* Les sections alternees prennent le creme de la marque, comme l'accueil de
   la boutique : c'est ce qui fait tenir les deux pages ensemble. */
.lk-home .lk-section--alt {
    background-color: var(--color-canvas);
}

/* Pastille d'accroche : aplat jaune, libelle noir — jamais l'inverse. */
.lk-home .lk-eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-on-accent);          /* 10.36:1 */
    background-color: var(--color-accent);
    border: 1px solid var(--color-accent-border);
    border-radius: 999px;
    padding: .35rem .85rem;
    margin-bottom: 1.25rem;
}

.lk-home h1,
.lk-home h2,
.lk-home h3 {
    color: var(--neutral-900);
    letter-spacing: -.015em;
}

/* Titre principal : meme voix que l'accueil de la boutique — capitales
   pleines de Bungee, noir sur le fond clair. */
.lk-home .lk-title {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .01em;
    font-size: clamp(1.75rem, 6vw, 2rem);
    line-height: 1.15;
    color: var(--brand-600);                /* 11.69:1 sur blanc */
    margin-bottom: 1rem;
}

/* La fin du titre passe en jaune, contournee de noir : le jaune seul ne
   tiendrait pas sur une surface claire (1.54:1). */
.lk-home .lk-title em {
    font-style: normal;
    color: var(--color-accent);
    -webkit-text-stroke: 2px var(--brand-600);
    paint-order: stroke fill;
}

@supports not (-webkit-text-stroke: 1px red) {
    .lk-home .lk-title em { color: var(--brand-600); }
}

.lk-home .lk-lead {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--color-text-muted);
    max-width: 60ch;          /* longueur de ligne lisible */
    margin-bottom: 1.75rem;
}

.lk-home .lk-section-title {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.5rem;
    color: var(--brand-600);
    margin-bottom: .5rem;
}

/* Filet a motif sous le titre de section : le meme repere que dans la
   boutique, c'est lui qui signe la page. */
.lk-home .lk-section-title::after {
    content: "";
    display: block;
    width: 8rem;
    height: var(--pattern-band-height);
    margin: .875rem auto 0;
    background-image: var(--pattern-band);
    background-repeat: repeat-x;
    background-size: auto 100%;
    border-radius: 2px;
}

.lk-home .lk-section-subtitle {
    color: var(--color-text-muted);
    max-width: 62ch;
    margin: 0 auto 2.5rem;
}

/* --- boutons ---------------------------------------------------------- */

.lk-home .lk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;         /* cible tactile confortable */
    padding: .75rem 1.5rem;
    border-radius: .5rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color .18s ease-out, border-color .18s ease-out, color .18s ease-out;
}

.lk-home .lk-btn--primary {
    background-color: var(--color-accent);
    border-color: var(--color-accent-border);
    color: var(--color-on-accent);          /* 10.36:1 */
}

.lk-home .lk-btn--primary:hover,
.lk-home .lk-btn--primary:focus {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-border);
    color: var(--color-on-accent);
    text-decoration: none;
}

.lk-home .lk-btn--ghost {
    background-color: transparent;
    border-color: var(--color-border);
    color: var(--neutral-800);
}

.lk-home .lk-btn--ghost:hover,
.lk-home .lk-btn--ghost:focus {
    border-color: var(--color-primary);
    color: var(--color-primary);
    text-decoration: none;
}

.lk-home .lk-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
/* --- boutons, suite ---------------------------------------------------- */

/* Le second bouton du hero se detache sur le creme : le contour clair de
   .lk-btn--ghost s'y perdrait. Il prend donc l'aplat noir, texte jaune —
   l'inverse exact du bouton d'action, comme sur la maquette. */
.lk-home .lk-btn--dark {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
    color: var(--color-accent);              /* 7.58:1 sur le noir */
}

.lk-home .lk-btn--dark:hover,
.lk-home .lk-btn--dark:focus {
    background-color: var(--brand-500);
    border-color: var(--brand-500);
    color: var(--color-accent);
    text-decoration: none;
}

/* --- hero -------------------------------------------------------------- */

/* Le layout general place l'en-tete en position fixe (#header.fixed-top) :
   le hero doit reserver sa hauteur, sinon le premier element passe dessous. */
.lk-home .lk-hero {
    position: relative;
    overflow: hidden;                        /* borne les aplats decoratifs */
    padding: calc(var(--lk-header-height, 88px) + 2rem) 0 3.5rem;
    background-color: var(--color-canvas);
}

/* Bande a motif en pied de section, comme dans la boutique. Purement
   decorative : posee en pseudo-element, elle n'entre pas dans l'arbre
   d'accessibilite.

   Il n'y en a pas en tete : l'en-tete fixe porte deja la sienne (regle
   #header::after de brand.css), et sa hauteur reelle n'est pas connue d'ici —
   --lk-header-height n'est declaree nulle part, seule la valeur de repli
   88px s'applique et la bande passait sous la barre. */
.lk-home .lk-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--pattern-band-height);
    background-image: var(--pattern-band);
    background-repeat: repeat-x;
    background-size: auto 100%;
    z-index: 2;
}

.lk-home .lk-hero > .container {
    position: relative;
    z-index: 1;
}

/* --- decor du hero ----------------------------------------------------- */

/* Aplats et chevrons de la maquette. Le conteneur est en position absolue et
   ne recoit aucun evenement : le decor ne doit jamais intercepter un clic
   destine au contenu. */
.lk-home .lk-hero__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Les aplats jaunes. Un border-radius a quatre valeurs par axe donne la
   silhouette organique de la maquette sans recourir a une image. */
.lk-home .lk-hero__blob {
    position: absolute;
    display: block;
    background-color: var(--color-accent);
}

.lk-home .lk-hero__blob--big {
    width: 78vw;
    max-width: 30rem;
    aspect-ratio: 1 / 1.15;
    right: -18vw;
    top: 42%;
    border-radius: 58% 42% 38% 62% / 46% 54% 46% 54%;
    transform: rotate(-12deg);
}

.lk-home .lk-hero__blob--small {
    width: 34vw;
    max-width: 12rem;
    aspect-ratio: 1 / 1;
    right: 42vw;
    top: 38%;
    border-radius: 62% 38% 55% 45% / 52% 48% 52% 48%;
    opacity: .9;
}

/* Chevrons. Deux bordures sur un carre pivote : une forme nette, qui suit la
   couleur d'accent sans image ni police d'icones. */
.lk-home .lk-hero__chevron {
    position: absolute;
    display: block;
    border-top: .5rem solid var(--color-accent);
    border-right: .5rem solid var(--color-accent);
    transform: rotate(45deg);
}

.lk-home .lk-hero__chevron--lead {
    width: 2.75rem;
    height: 2.75rem;
    right: 6vw;
    top: 30%;
}

.lk-home .lk-hero__chevron--trail {
    width: 1.5rem;
    height: 1.5rem;
    right: 30vw;
    top: 58%;
    opacity: .85;
}

/* L'equerre du coin droit de la maquette. */
.lk-home .lk-hero__bracket {
    position: absolute;
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    right: 4vw;
    top: 22%;
    border-top: .5rem solid var(--color-accent);
    border-right: .5rem solid var(--color-accent);
}

/* --- accroche ---------------------------------------------------------- */

.lk-home .lk-hero__copy {
    position: relative;
    z-index: 1;
}

/* Le filet a motif sous le titre : le meme repere de marque que les
   bandes de section, reduit a un court segment. */
.lk-home .lk-hero__rule {
    display: block;
    width: 9rem;
    max-width: 100%;
    height: var(--pattern-band-height);
    margin-bottom: 1.5rem;
    background-image: var(--pattern-band);
    background-repeat: repeat-x;
    background-size: auto 100%;
    border-radius: 2px;
}

.lk-home .lk-hero__title {
    margin: 0 0 1.25rem;
    color: var(--brand-600);                 /* 11.69:1 sur le creme */
    text-transform: uppercase;
    line-height: .95;
    letter-spacing: .005em;
}

.lk-home .lk-hero__title-line {
    display: block;
    font-family: var(--font-display-hero);
    font-weight: 400;
    /* clamp plutot qu'un palier par media query : le titre est l'element le
       plus sensible a la largeur, il gagne a suivre le viewport en continu. */
    font-size: clamp(2.25rem, 11vw, 3.5rem);
}

.lk-home .lk-hero__lead {
    max-width: 34ch;                         /* mesure de lecture courte */
    margin-bottom: 2rem;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand-700);                 /* 14.18:1 sur blanc */
}

.lk-home .lk-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 2rem;
}

/* --- reseaux ----------------------------------------------------------- */

.lk-home .lk-hero__social {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.lk-home .lk-hero__social-label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-700);
}

.lk-home .lk-hero__social ul {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 44px de cible tactile alors que l'icone n'en fait que 18 : la zone
   cliquable deborde volontairement le dessin. */
.lk-home .lk-hero__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.125rem;
    color: var(--brand-600);
    border-radius: 50%;
    transition: background-color .18s ease-out, color .18s ease-out;
}

.lk-home .lk-hero__social a:hover,
.lk-home .lk-hero__social a:focus {
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    text-decoration: none;
}

.lk-home .lk-hero__social a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* --- visuel ------------------------------------------------------------ */

.lk-home .lk-hero__visual {
    position: relative;
    z-index: 1;
    margin-top: 2.5rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* La hauteur est bornee plutot que laissee libre : le detourage fait 1200x1653,
   soit un format tres haut qui pousserait le reste de la page hors de vue.
   width/height sont declares dans le balisage, le navigateur reserve donc la
   place avant le chargement — pas de saut de mise en page. */
.lk-home .lk-hero__visual img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 46vh;
    object-fit: contain;
    /* Une ombre portee douce detache le sujet de l'aplat jaune. */
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .22));
}

/* --- produits mis en avant --------------------------------------------- */

/* La carte produit n'est PAS redefinie ici : elle vient du composant partage
   e-commerce/layouts/composants/produits/template-produit-a-commander, dont
   les regles .lk-product* vivent dans brand.css et servent deja la boutique.
   Les redeclarer sous .lk-home aurait donne deux cartes divergentes portant
   le meme nom de classe — et la version accueil, plus specifique, l'aurait
   silencieusement emporte.

   Seule la grille qui les dispose appartient a l'accueil. */
.lk-home .lk-showcase {
    background-color: var(--color-canvas);
}

/* Même grille que la boutique : 2 colonnes dès le mobile (la carte est
   compacte), 4 sur ordinateur. */
.lk-home .lk-showcase__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Les cartes s'etirent a la hauteur de la plus haute, sinon leurs pieds ne
   s'alignent pas d'une colonne a l'autre. */
.lk-home .lk-showcase__grid > li {
    display: flex;
}

.lk-home .lk-showcase__grid > li > .lk-product {
    width: 100%;
}

/* --- la plateforme en chiffres ----------------------------------------- */

/* Une bande noire entre deux sections cremes : les chiffres se lisent d'un
   coup d'oeil parce qu'ils sont les seuls sur ce fond. Le jaune y porte les
   valeurs, le creme les intitules. */
.lk-home .lk-figures {
    position: relative;
    padding: 2.5rem 0;
    background-color: var(--brand-600);
}

/* Les deux filets a motif bornent la bande, comme le pied de l'accroche. */
.lk-home .lk-figures::before,
.lk-home .lk-figures::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: var(--pattern-band-height);
    background-image: var(--pattern-band);
    background-repeat: repeat-x;
    background-size: auto 100%;
}

.lk-home .lk-figures::before { top: 0; }
.lk-home .lk-figures::after  { bottom: 0; }

.lk-home .lk-figures__title {
    margin: var(--pattern-band-height) 0 1.75rem;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.125rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-accent);              /* 7.58:1 sur le noir */
}

.lk-home .lk-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: var(--pattern-band-height);
    text-align: center;
}

.lk-home .lk-stat__value {
    display: block;
    font-family: var(--font-display-hero);
    font-size: clamp(1.5rem, 7vw, 2rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-accent);              /* 7.58:1 sur le noir */
    font-variant-numeric: tabular-nums;   /* evite le sautillement des chiffres */
}

.lk-home .lk-stat__label {
    display: block;
    margin-top: .35rem;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--color-canvas);              /* 10.34:1 sur le noir */
}

/* --- cartes de parcours ------------------------------------------------ */

.lk-home .lk-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: .75rem;
    padding: 1.5rem;
    transition: border-color .18s ease-out, box-shadow .18s ease-out;
}

.lk-home .lk-card:hover {
    border-color: var(--brand-200);
    box-shadow: 0 6px 20px rgba(40, 42, 42, .07);
}

.lk-home .lk-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: .625rem;
    /* Pastille jaune, glyphe noir : la meme paire que les boutons. */
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.lk-home .lk-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.lk-home .lk-card__text {
    color: var(--color-text-muted);
    flex-grow: 1;             /* aligne les liens en bas de carte */
    margin-bottom: 1.25rem;
}

.lk-home .lk-card__link {
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.lk-home .lk-card__link:hover,
.lk-home .lk-card__link:focus {
    text-decoration: underline;
}

/* --- categories -------------------------------------------------------- */

.lk-home .lk-cats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.lk-home .lk-cat {
    display: block;
    position: relative;
    border-radius: .75rem;
    overflow: hidden;
    background-color: var(--neutral-100);
    text-decoration: none;
    aspect-ratio: 4 / 3;      /* reserve la place, evite le decalage au chargement */
}

.lk-home .lk-cat__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease-out;
}

.lk-home .lk-cat:hover .lk-cat__img {
    transform: scale(1.04);
}

.lk-home .lk-cat__name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2rem .875rem .75rem;
    font-weight: 600;
    color: var(--color-text-on-dark);
    /* degrade fonce : garantit la lisibilite quelle que soit l'image */
    background: linear-gradient(to top, rgba(20, 21, 21, .88) 0%, rgba(20, 21, 21, .55) 55%, transparent 100%);
}

.lk-home .lk-cat:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* --- etapes ------------------------------------------------------------ */

.lk-home .lk-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    font-family: var(--font-display);
    font-weight: 400;
    margin-bottom: .875rem;
}

/* --- appel final ------------------------------------------------------- */

/* Panneau d'appel final : l'aplat noir de la marque, surmonte de la bande a
   motif. C'est le pendant du pied de page de la boutique — la page se ferme
   sur les deux couleurs. */
.lk-home .lk-final {
    position: relative;
    background-color: var(--brand-700);
    border-radius: 1rem;
    padding: calc(2.5rem + var(--pattern-band-height)) 1.5rem 2.5rem;
    text-align: center;
    overflow: hidden;
}

.lk-home .lk-final::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: var(--pattern-band-height);
    background-image: var(--pattern-band);
    background-repeat: repeat-x;
    background-size: auto 100%;
}

.lk-home .lk-final h2 {
    font-family: var(--font-display);
    text-transform: uppercase;
    color: var(--color-accent);        /* 9.19:1 sur brand-700 */
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: .75rem;
}

.lk-home .lk-final p {
    color: var(--color-canvas);        /* 12.54:1 sur brand-700 */
    max-width: 52ch;
    margin: 0 auto 1.75rem;
}

/* Le bouton secondaire du panneau est desormais sur fond noir : le contour
   clair est le seul qui s'y voie. */
.lk-home .lk-final .lk-btn--ghost {
    border-color: var(--brand-300);
    color: var(--color-canvas);
    background-color: transparent;
}

.lk-home .lk-final .lk-btn--ghost:hover,
.lk-home .lk-final .lk-btn--ghost:focus {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background-color: transparent;
}

/* ==========================================================================
   A partir de 576px
   ========================================================================== */
@media (min-width: 576px) {
    .lk-home .lk-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lk-home .lk-title { font-size: 2.5rem; }
}

/* ==========================================================================
   A partir de 768px
   ========================================================================== */
@media (min-width: 768px) {
    .lk-home .lk-section  { padding: 4.5rem 0; }
    .lk-home .lk-hero     { padding: calc(var(--lk-header-height, 88px) + 3rem) 0 5rem; }
    .lk-home .lk-title    { font-size: 3rem; }
    .lk-home .lk-section-title { font-size: 2rem; }
    .lk-home .lk-final    { padding: 3.5rem 3rem; }
    .lk-home .lk-final h2 { font-size: 2rem; }

    .lk-home .lk-showcase__grid { gap: 1.25rem; }
    .lk-home .lk-hero__visual img { max-height: 52vh; }
}

/* ==========================================================================
   A partir de 992px
   ========================================================================== */
@media (min-width: 992px) {
    .lk-home .lk-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* Le hero passe en deux colonnes : l'accroche a gauche, le visuel a
       droite, pose sur les aplats — la composition de la maquette. */
    .lk-home .lk-hero {
        padding-top: calc(var(--lk-header-height, 88px) + 4rem);
        padding-bottom: 6rem;
    }

    .lk-home .lk-hero__visual {
        margin-top: 0;
        align-items: center;
    }

    .lk-home .lk-hero__visual img {
        max-height: 60vh;
    }

    /* Le decor se recale sur la moitie droite, DERRIERE le visuel : l'aplat
       porte les produits, il ne les flanque pas. Son centre est donc aligne
       sur celui de la colonne de droite, pas colle au bord. */
    .lk-home .lk-hero__blob--big {
        width: 30vw;
        max-width: 27rem;
        right: 8vw;
        top: 14%;
    }

    .lk-home .lk-hero__blob--small {
        width: 9vw;
        max-width: 8rem;
        right: 38vw;
        top: 24%;
    }

    .lk-home .lk-hero__chevron--lead {
        width: 4rem;
        height: 4rem;
        right: 40vw;
        top: 36%;
    }

    .lk-home .lk-hero__chevron--trail {
        width: 2rem;
        height: 2rem;
        right: 45vw;
        top: 58%;
    }

    .lk-home .lk-hero__bracket {
        width: 3.25rem;
        height: 3.25rem;
        right: 3vw;
        top: 28%;
    }
}

/* ==========================================================================
   En-tete : la navigation deployee, le burger efface
   ========================================================================== */
@media (min-width: 992px) {
    .lk-header .lk-header__burger { display: none; }
}

/* En dessous, la barre garde le signe, la recherche et le burger ; le reste
   passe dans le panneau deroulant du theme. */
@media (max-width: 991.98px) {
    .lk-header .lk-header__logo img { height: 38px; }

    /* Le burger rejoint le bord droit, apres la loupe, comme sur la
       boutique : au milieu de la barre il paraissait flotter. */
    .lk-header .lk-header__logo { margin-right: auto; }
    .lk-header .lk-header__nav { order: 3; }
}

/* ==========================================================================
   Preferences de l'utilisateur
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .lk-home .lk-cat__img,
    .lk-home .lk-card,
    .lk-home .lk-btn,
    .lk-home .lk-hero__social a,
    .lk-header .lk-header__cta,
    .lk-header .lk-header__search-toggle,
    .lk-header .lk-header__burger {
        transition: none;
    }
    .lk-home .lk-cat:hover .lk-cat__img {
        transform: none;
    }
}

/* Vitrine : 4 cartes de front sur ordinateur. */
@media (min-width: 992px) {
    .lk-home .lk-showcase__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}