/* ==========================================================================
   Page d'accueil (views/home/index.php)
   Feuille de style propre à la page : aucune autre page ne la charge.
   Les couleurs du thème arrivent par les variables --home-primary,
   --home-secondary et --home-accent, posées sur .home-market par la vue.

   Sommaire
     1. Base et jetons
     2. Boutons
     3. Bannière
     4. Bandeau de confiance
     5. Sections (en-têtes, états vides)
     6. Produits tendance
     7. Collections
     8. Témoignages
     9. Thème sombre
    10. Responsive
   ========================================================================== */


/* 1. Base et jetons
   -------------------------------------------------------------------------- */
.home-market {
    --home-radius-sm: 10px;
    --home-radius: 14px;
    --home-radius-lg: 16px;
    --home-card-bg: var(--card-bg, #fff);
    --home-border: var(--border-color, #eee);
    --home-muted: var(--text-muted, #888);
    --home-hover-tint: rgba(0, 0, 0, 0.04);
    --home-gap: 1rem;
}

.home-container {
    margin: 0 auto;
    padding: 0 1.5rem;
}

.home-section {
    padding: 2rem 0;
}

.home-empty {
    padding: 0.5rem;
    font-size: 0.85rem;
    color: var(--home-muted);
}

/* Cartes partagées : vendeurs, produits, collections, témoignages */
.home-product-card,
.home-collection-tile,
.home-testimonial-card {
    background: var(--home-card-bg);
    border: 1px solid var(--home-border);
}


/* 2. Boutons
   -------------------------------------------------------------------------- */
.home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.4rem;
    border: none;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

/* Fond et texte viennent des réglages hero_secondary_button_bg / _text (style en ligne). */
.home-btn-outline {
    border: 1.5px solid currentColor;
}


/* 3. Bannière
   Pleine largeur, remontée sous le header fixe (transparent en haut de page,
   voir site-header.css). La marge négative annule le padding-top que le body
   réserve pour le header ; le padding-top du contenu empêche le texte de
   passer derrière lui.
   -------------------------------------------------------------------------- */
.home-hero {
    padding: 0;
}

.home-banner {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    min-height: clamp(460px, 78vh, 720px);
    margin-top: calc(-1 * (var(--site-header-height, 72px) + var(--safe-area-top, 0px)));
    overflow: hidden;
    border-radius: 0;
    background-color: var(--home-primary);
    background-position: center;
    background-size: cover;
    color: #fff;
}

.home-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.65) 100%);
}

.home-banner-content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: calc(var(--site-header-height, 72px) + 2rem) max(1.5rem, 5vw) 3rem;
}

.home-banner-badge-image {
    width: clamp(130px, 17vw, 210px);
    height: clamp(130px, 17vw, 210px);
    margin-bottom: 1rem;
    /* Le logo est déjà circulaire et transparent : ni cadre ni ombre (une
       ombre assombrirait l'intérieur transparent du cercle). */
    object-fit: contain;
}

.home-banner-title {
    max-width: 32ch;
    margin: 0 0 0.5rem;
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
}

.home-banner-subtitle {
    max-width: 42ch;
    margin: 0 0 1.5rem;
    font-size: 1rem;
    opacity: 0.95;
}

.home-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}


/* 4. Bandeau de confiance
   Le nombre d'avantages est libre (table `site_features`) : la grille
   s'adapte d'elle-même au lieu de supposer quatre colonnes. `min()` évite
   tout débordement quand la fenêtre est plus étroite que la largeur minimale.
   -------------------------------------------------------------------------- */
.home-trust-bar {
    margin: 1rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--home-border);
    border-bottom: 1px solid var(--home-border);
}

.home-trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: var(--home-gap);
}

.home-trust-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.home-trust-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--home-hover-tint);
    color: var(--home-primary);
}

/* Image personnalisée définie en administration : même gabarit que les icônes
   de la bibliothèque, pour que toutes les lignes restent alignées. */
.home-trust-icon .feature-icon-image {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.home-trust-text {
    min-width: 0;
}

.home-trust-text strong {
    display: block;
    font-size: 0.85rem;
    line-height: 1.25;
}

.home-trust-text span {
    color: var(--home-muted);
    font-size: 0.75rem;
    line-height: 1.3;
}


/* 5. Sections
   -------------------------------------------------------------------------- */
.home-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--home-gap);
    margin-bottom: 1.25rem;
}

.home-section-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.home-section-link {
    color: var(--home-primary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}


/* 6. Produits tendance
   -------------------------------------------------------------------------- */
.home-trending-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--home-gap);
}

.home-product-card {
    overflow: hidden;
    border-radius: var(--home-radius);
}

.home-product-card a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.home-product-image {
    position: relative;
}

.home-product-image img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.home-product-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
}

/* Fond issu du primaire (et non de l'accent) : l'accent peut être très clair,
   ce qui rendrait le texte blanc du badge illisible. */
.home-badge-new {
    background: var(--home-primary);
}

.home-badge-promo {
    right: 8px;
    left: auto;
    background: #dc2626;
}

.home-product-body {
    padding: 0.75rem;
}

.home-product-name {
    margin: 0 0 0.35rem;
    overflow: hidden;
    font-size: 0.85rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-product-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.home-price-current {
    color: var(--home-primary);
    font-weight: 700;
}

.home-price-original {
    color: var(--home-muted);
    font-size: 0.75rem;
    text-decoration: line-through;
}


/* 7. Collections par catégorie
   -------------------------------------------------------------------------- */
.home-collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--home-gap);
}

.home-collection-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 0.75rem;
    border-radius: var(--home-radius);
    color: inherit;
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-collection-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}

.home-collection-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 1.5rem;
}

.home-collection-name {
    font-size: 0.8rem;
    font-weight: 600;
}


/* 8. Témoignages (table `testimonials`, gérée depuis Administration →
      Contenu → Avis Clients)
   -------------------------------------------------------------------------- */
.home-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

.home-testimonial-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.5rem;
    border-radius: var(--home-radius-lg);
}

.home-testimonial-quote-icon {
    flex-shrink: 0;
    color: var(--home-secondary);
    opacity: 0.5;
}

.home-testimonial-stars {
    display: flex;
    gap: 0.15rem;
    color: #e5e7eb;
}

.home-testimonial-stars .filled {
    color: #f4b400;
}

.home-testimonial-content {
    flex: 1 1 auto;
    margin: 0;
    color: var(--text-primary, #333);
    font-size: 0.9rem;
    line-height: 1.6;
}

.home-testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--home-border);
}

.home-testimonial-avatar,
.home-testimonial-avatar-fallback {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

.home-testimonial-avatar {
    object-fit: cover;
}

.home-testimonial-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--home-secondary);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
}

.home-testimonial-author-name {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.3;
}

.home-testimonial-author-title {
    color: var(--home-muted);
    font-size: 0.75rem;
}


/* 9. Thème sombre
    -------------------------------------------------------------------------- */
[data-theme="dark"] .home-market {
    --home-hover-tint: rgba(255, 255, 255, 0.08);
}

/* En sombre, la couleur primaire devient illisible sur fond quasi noir : on
   reprend le jeton clair déjà utilisé ailleurs par le thème. Une couleur
   choisie en administration reste prioritaire (style inline). */
[data-theme="dark"] .home-trust-icon {
    color: var(--secondary-highlight, #f0a5c0);
}


/* 10. Responsive
    -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .home-banner {
        min-height: clamp(380px, 65vh, 560px);
    }

    /* Cibles tactiles : au moins 44px de haut. */
    .home-banner-actions .home-btn {
        min-height: 44px;
    }
}

/* Bannière sur téléphone : contenu centré, boutons pleine largeur empilés,
   hauteur calculée sur la zone réellement visible (svh : la barre d'adresse
   mobile ne rogne plus le bas de la bannière), marge de sécurité en bas pour
   les écrans à encoche. */
@media (max-width: 640px) {
    .home-banner {
        min-height: clamp(440px, 80vh, 620px);
        align-items: center;
        /* Photo paysage recadrée en portrait : on cale le cadrage à droite pour
           garder les mannequins visibles au lieu du décor. */
        background-position: 80% center;
    }

    @supports (height: 1svh) {
        .home-banner {
            min-height: clamp(440px, 80svh, 620px);
        }
    }

    /* Le texte occupe plus de place en hauteur : voile plus marqué pour garder
       un bon contraste sur n'importe quelle partie de l'image. */
    .home-banner-overlay {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.8) 100%);
    }

    .home-banner-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: calc(var(--site-header-height, 64px) + 1.25rem) 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px));
    }

    .home-banner-badge-image {
        width: 112px;
        height: 112px;
        margin-bottom: 0.75rem;
    }

    .home-banner-title {
        max-width: 20ch;
        margin-bottom: 0.6rem;
        font-size: clamp(1.55rem, 7vw, 2rem);
        line-height: 1.2;
        text-wrap: balance;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    }

    .home-banner-subtitle {
        max-width: 30ch;
        margin-bottom: 1.5rem;
        font-size: 0.95rem;
        line-height: 1.5;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
    }

    /* Les deux boutons côte à côte, chacun sur la moitié de la largeur ; si un
       libellé est trop long pour sa moitié, il passe sur deux lignes. */
    .home-banner-actions {
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 400px;
        gap: 0.6rem;
    }

    .home-banner-actions .home-btn {
        flex: 1 1 0;
        min-width: 0;
        min-height: 48px;
        padding: 0.6rem 0.5rem;
        font-size: 0.9rem;
        line-height: 1.2;
        text-align: center;
    }

    /* Pas de décollement au survol sur écran tactile (reste « collé » après un tap). */
    .home-banner-actions .home-btn:hover {
        transform: none;
        box-shadow: none;
    }
}

/* Petits téléphones (320-359px) */
@media (max-width: 359px) {
    .home-banner-badge-image {
        width: 92px;
        height: 92px;
    }

    .home-banner-title {
        font-size: 1.45rem;
    }

    .home-banner-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .home-banner-actions {
        gap: 0.5rem;
    }

    .home-banner-actions .home-btn {
        padding: 0.5rem 0.35rem;
        font-size: 0.8rem;
    }
}

/* Téléphone en paysage : peu de hauteur, on compacte et on remet les boutons
   côte à côte pour que le titre et les boutons restent visibles. */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    .home-banner {
        min-height: 360px;
    }

    .home-banner-content {
        padding-top: calc(var(--site-header-height, 56px) + 0.75rem);
        padding-bottom: 1.25rem;
    }

    .home-banner-badge-image {
        width: 72px;
        height: 72px;
        margin-bottom: 0.4rem;
    }

    .home-banner-subtitle {
        margin-bottom: 0.9rem;
    }

    .home-banner-actions {
        flex-direction: row;
        max-width: none;
        width: auto;
    }

    .home-banner-actions .home-btn {
        width: auto;
        min-height: 44px;
    }
}

@media (max-width: 640px) {
    .home-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    /* Produits tendance : deux colonnes sur téléphone (au lieu d'une carte par
       ligne). minmax(0, 1fr) empêche un nom ou un prix long d'élargir une
       colonne et de faire déborder la page. Cartes resserrées pour que le nom
       et le prix tiennent dans ~170 px. */
    .home-trending-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .home-product-badge {
        top: 6px;
        left: 6px;
        padding: 0.15rem 0.4rem;
        font-size: 0.6rem;
    }

    .home-badge-promo {
        right: 6px;
        left: auto;
    }

    .home-product-body {
        padding: 0.55rem 0.6rem 0.7rem;
    }

    .home-product-name {
        font-size: 0.8rem;
    }

    .home-product-price {
        flex-wrap: wrap;
        gap: 0.1rem 0.4rem;
        font-size: 0.85rem;
    }

    .home-price-original {
        font-size: 0.7rem;
    }

    /* Deux colonnes compactes plutôt qu'une longue colonne qui ferait grimper
       la hauteur de la section. */
    .home-trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem 0.6rem;
    }

    .home-trust-item {
        gap: 0.55rem;
    }

    .home-trust-icon {
        width: 34px;
        height: 34px;
    }

    .home-trust-icon svg {
        width: 17px;
        height: 17px;
    }

    .home-trust-icon .feature-icon-image {
        width: 19px;
        height: 19px;
    }

    .home-trust-text strong {
        font-size: 0.78rem;
    }

    .home-trust-text span {
        font-size: 0.68rem;
    }
}

/* Sous 360px, deux colonnes tronqueraient les libellés. Au-dessus (375, 390,
   430px…), deux colonnes restent lisibles et évitent une section trop haute. */
@media (max-width: 359px) {
    .home-trust-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}