/*
Theme Name: NC Shop
Description: Canevas "vitrine produits + blog" — grille de produits affiliés mise en avant sur l'accueil, articles de blog intégrés en dessous. Pensé pour être réutilisé sur d'autres sites e-commerce/affiliation, pas seulement celui-ci. Un des canevas de la fabrique de sites NC ECOM.
Author: NC ECOM
Version: 1.0
Text Domain: nc-shop
*/

/* ==========================================================================
   Variables (repli par défaut ; surchargées par site via functions.php)
   ========================================================================== */
:root {
    --color-primary: #9A4256;
    --color-primary-hover: #7D3346;
    --color-heading: #2B2422;
    --color-text: #4A3F3B;
    --color-background: #F6EFEA;
    --color-secondary-background: #FFFFFF;
    --color-border: #2B2422;
    --color-secondary-border: #E3D6CE;
    --color-accent: #BFA06A;
    --font-heading: 'Bodoni Moda', serif;
    --font-body: 'Work Sans', sans-serif;

    --container-width: 1180px;
    --radius: 3px;
    --shadow: 0 3px 14px rgba(43, 36, 34, 0.08);
    --shadow-hover: 0 8px 24px rgba(43, 36, 34, 0.14);

    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 3.25rem;
    --space-xl: 4.5rem;

    --bp-mobile: 900px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-background);
    line-height: 1.65;
    font-size: 1rem;
    overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
table { display: block; max-width: 100%; overflow-x: auto; }
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-heading);
    font-weight: 500;
    line-height: 1.15;
    margin: 0 0 0.6rem;
    letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 600; }
h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.container { max-width: var(--container-width); margin: 0 auto; padding: 0 1.5rem; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }

/* ==========================================================================
   Boutons
   ========================================================================== */
.btn {
    display: inline-block;
    padding: 0.8rem 1.7rem;
    border-radius: var(--radius);
    font-weight: 500;
    font-family: var(--font-heading);
    font-size: 1.02rem;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn--accent, .btn--primary { background: var(--color-primary); color: #fff; }
.btn--accent:hover, .btn--primary:hover { background: var(--color-primary-hover); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-hover); }
/* Teinte claire DÉRIVÉE du Primary (color-mix), pas transparent : un bouton
   transparent à texte sombre est illisible sur l'image sombre du hero
   (retour utilisateur — "on voit même pas le bouton"). Un mélange à 22%
   de Primary donne un vrai bouton clair visible quel que soit le preset. */
.btn--light { background: color-mix(in srgb, var(--color-primary) 22%, #fff); color: var(--color-heading); }
.btn--light:hover { color: var(--color-heading); background: color-mix(in srgb, var(--color-primary) 34%, #fff); }

/* ==========================================================================
   En-tête — logo, menu et recherche sur une ligne, fond clair sobre.
   ========================================================================== */
.site-header {
    background: var(--color-secondary-background);
    border-bottom: 1px solid var(--color-secondary-border);
    position: sticky;
    top: 0;
    z-index: 100;
}
/* grid 1fr auto 1fr, pas flex : avec flex, le menu occupe "l'espace
   restant" entre logo et recherche, mais logo (~160px) et icône recherche
   (~35px) n'ont pas la même largeur — le menu se retrouve donc centré
   dans un espace qui n'est PAS lui-même centré sur la page (retour
   utilisateur : gros vide à gauche, presque rien à droite). Une grille à 3
   colonnes dont les deux extrêmes sont de MÊME largeur (1fr chacune)
   centre réellement la colonne du milieu sur toute la ligne, quelle que
   soit la largeur du logo ou de l'icône recherche. */
.site-header__masthead {
    padding: 1rem 1.5rem;
    max-width: var(--container-width);
    margin: 0 auto;
    display: grid;
    /* minmax(0, 680px), pas juste "auto" : une piste "auto" se dimensionne
       sur la taille intrinsèque (max-content) de son contenu, et un
       max-width posé sur l'ÉLÉMENT ne réduit PAS cette contribution à la
       piste elle-même (constaté en direct : nav capé à 680px de large en
       rendu, mais la piste de grille faisait quand même 778px, réduisant
       d'autant les deux colonnes 1fr et tronquant le logo). minmax(0, ...)
       plafonne la PISTE elle-même, pas juste la boîte affichée dedans. */
    grid-template-columns: 1fr minmax(0, 680px) 1fr;
    align-items: center;
    gap: var(--space-md);
}
.site-branding { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; min-width: 0; justify-self: start; }
.site-branding img { max-height: 42px; width: auto; flex-shrink: 0; }
.site-branding__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--color-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-header__tools { display: flex; align-items: center; gap: 0.25rem; justify-self: end; }
.header-search { position: relative; }
.header-search__toggle { background: none; border: none; cursor: pointer; color: var(--color-heading); padding: 0.4rem; display: flex; align-items: center; }
.header-search__toggle svg { width: 20px; height: 20px; }
.header-search__form {
    display: none; position: absolute; top: calc(100% + 0.5rem); right: 0;
    background: var(--color-secondary-background); border: 1px solid var(--color-secondary-border);
    border-radius: var(--radius); padding: 0.75rem; width: 280px; z-index: 10;
}
.header-search__form.is-open { display: flex; gap: 0.5rem; }
.header-search__form input[type="search"] { flex: 1; padding: 0.6rem 0.8rem; border: 1px solid var(--color-secondary-border); border-radius: var(--radius); font-family: inherit; }
.header-search__form button { background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius); padding: 0 1rem; cursor: pointer; }

/* max-width plafonné : sans plafond, la colonne "auto" du menu prend
   tout l'espace dont elle a besoin pour ses intitulés (potentiellement
   longs, ex: "Lingerie & Sous-vêtements") au détriment des deux colonnes
   1fr qui l'entourent — le logo se retrouvait tronqué (retour utilisateur,
   "E Colla..."). Passé ce plafond, la liste défile elle-même
   horizontalement (overflow-x:auto déjà en place plus bas). */
.primary-nav { min-width: 0; max-width: min(680px, 100%); justify-self: center; }
/* justify-content:flex-start, pas center : quand le menu déborde (beaucoup
   de catégories, ou intitulés "X & Y" plus longs) et défile
   horizontalement, un centrage coupe le contenu symétriquement des DEUX
   côtés (constaté en capture : premier ET dernier intitulé tronqués), pas
   naturel à parcourir. flex-start affiche toujours le premier élément
   entier par défaut, comme un vrai défilement. Le menu reste centré dans
   l'ensemble du header via .primary-nav (grille, justify-self:center). */
.primary-nav ul { display: flex; justify-content: flex-start; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; overflow-x: auto; }
.primary-nav a {
    display: block; color: var(--color-heading); font-family: var(--font-heading);
    font-weight: 500; font-size: 1rem; text-decoration: none; white-space: nowrap;
    padding: 0.6rem 0.9rem; border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.primary-nav a:hover { color: var(--color-primary); border-color: var(--color-primary); }

.mobile-nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.4rem; }
.mobile-nav-toggle svg { width: 24px; height: 24px; color: var(--color-heading); }
.primary-nav__close { display: none; }

@media (max-width: 900px) {
    .primary-nav {
        display: none; position: fixed; inset: 0; z-index: 300;
        background: var(--color-heading); flex-direction: column;
        align-items: center; justify-content: center; padding: 2rem;
    }
    .primary-nav.is-open { display: flex; }
    .primary-nav__close { display: flex; position: absolute; top: 1.25rem; right: 1.25rem; background: none; border: none; color: #fff; padding: 0.5rem; }
    .primary-nav__close svg { width: 26px; height: 26px; }
    .primary-nav ul { flex-direction: column; gap: 0.25rem; padding: 0; text-align: center; overflow: visible; }
    .primary-nav a { font-size: 1.4rem; padding: 0.85rem 0; color: #fff; }
    .primary-nav a:hover { color: var(--color-accent); border-color: transparent; }
    .site-header__masthead { gap: 0.75rem; padding: 0.85rem 1rem; }
    .site-branding img { max-height: 32px; }
    .site-branding__title { font-size: 1.2rem; }
    .mobile-nav-toggle { display: flex; }
    body.nav-is-open { overflow: hidden; }
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding: var(--space-xl) 0; border-top: 1px solid var(--color-secondary-border); }
main > .section:first-child { border-top: none; }
main > .section.page-title { padding-bottom: var(--space-md); }
.section-title { font-size: clamp(1.5rem, 3vw, 1.9rem); margin-bottom: 1.75rem; text-align: center; }
.section-subtitle { text-align: center; max-width: 620px; margin: 0 auto var(--space-md); opacity: 0.75; }

.hero {
    position: relative;
    min-height: 380px;
    display: flex;
    align-items: flex-end;
    color: #fff;
    background-color: var(--color-heading);
    background-size: cover;
    background-position: center;
}
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.28) 60%, rgba(0,0,0,0.08) 100%); }
/* max-width:var(--container-width) + margin:auto : la BOÎTE du hero
   s'aligne exactement comme .container, texte compris — sans ça, le texte
   colle au bord gauche réel de l'écran plutôt qu'à la même marge que le
   reste du contenu (retour utilisateur : "giga à gauche"). La largeur de
   lecture reste bornée à 620px sur les enfants (h1/p), pas sur la boîte
   elle-même, pour ne pas étirer le texte sur toute la largeur. */
.hero__content { position: relative; z-index: 1; max-width: var(--container-width); margin: 0 auto; padding: var(--space-lg) 1.5rem; }
.hero__content h1, .hero__content p { max-width: 620px; }
.hero h1 { color: #fff; }
.hero p { color: rgba(255,255,255,0.92); margin-bottom: 1.5rem; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center; }
.split img { border-radius: var(--radius); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ==========================================================================
   Grilles de cartes génériques (services, catégories, derniers articles)
   ========================================================================== */
.card-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); }
.card {
    background: var(--color-secondary-background);
    border: 1px solid var(--color-secondary-border);
    border-radius: var(--radius);
    overflow: hidden;
    flex: 0 1 300px;
    min-width: 260px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card img { width: 100%; height: 200px; object-fit: cover; }
.card__body { padding: 1.2rem 1.3rem 1.4rem; }
.card__tag { margin-bottom: 0.6rem; }
.card__title { margin: 0.3rem 0 0.4rem; font-size: 1.15rem; }
.card__title a { color: var(--color-heading); text-decoration: none; }
.card__title a:hover { color: var(--color-primary); }
.card__meta { font-size: 0.82rem; opacity: 0.65; margin: 0; }
.card__text { font-size: 0.94rem; margin: 0.5rem 0 0; }
.card--solid { display: flex; align-items: center; justify-content: flex-start; min-height: 90px; text-decoration: none; background: var(--color-secondary-background); border-top: 3px solid var(--color-accent); }
.card--solid .card__body { padding: 1rem 1.3rem; text-align: left; }
.card-grid--n2 > .card { flex: 1 1 380px; max-width: 500px; }
/* max-width réduit (330px → 250px) : 4 cartes à 330px + 3 espacements de
   2rem dépassent la largeur du container quel que soit le canevas
   (4×330+96=1416px pour un container d'environ 1130-1150px de large utile)
   — la 4e carte retombait systématiquement seule sur une 2e ligne
   (retour utilisateur : "3 puis 1... très laid"). 250px permet aux 4 de
   tenir sur une seule rangée. */
.card-grid--n4 > .card, .card-grid--n4 > li { flex: 1 1 220px; max-width: 250px; min-width: 0; }

/* ==========================================================================
   Vitrine produits (page_sections.product_grid) — signature du canevas.
   Mêmes classes .card/.card-grid/.btn que le reste (compatibilité avec le
   pipeline commun), mais une image plus haute (photo produit portrait) et
   un bouton d'action toujours visible, façon fiche boutique plutôt que
   carte de blog. Pas de faux badges/étoiles/compte à rebours : aucune
   preuve sociale inventée, juste le produit et un lien clair. */
.card-grid--products { gap: var(--space-lg); }
.card-grid--products .card {
    flex: 0 1 260px;
    min-width: 220px;
    border-color: var(--color-secondary-border);
}
.card-grid--products .card img { height: 320px; object-fit: contain; background: var(--color-background); padding: 1rem; }
.card-grid--products .card__body { text-align: center; padding: 1.1rem 1.2rem 1.5rem; }
.card-grid--products .card__title { font-size: 1.05rem; min-height: 2.6em; }
.card-grid--products .btn { width: 100%; }

.affiliate-disclosure {
    text-align: center;
    font-size: 0.78rem;
    opacity: 0.55;
    max-width: 620px;
    margin: 0.85rem auto 0;
}

/* ==========================================================================
   Formulaire de contact (Contact Form 7)
   ========================================================================== */
.wpcf7-form p { margin-bottom: 1.3rem; }
.wpcf7-form label { display: block; font-weight: 500; margin-bottom: 0.4rem; color: var(--color-heading); font-family: var(--font-heading); }
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form textarea {
    width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--color-secondary-border);
    border-radius: var(--radius); font-family: inherit; font-size: 1rem;
}
.wpcf7-form textarea { min-height: 160px; resize: vertical; }
.wpcf7-form input[type="submit"] {
    background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius);
    padding: 0.8rem 2rem; font-weight: 500; font-family: var(--font-heading); font-size: 1rem;
    cursor: pointer; transition: background-color 0.15s ease;
}
.wpcf7-form input[type="submit"]:hover { background: var(--color-primary-hover); }
.wpcf7-not-valid-tip { color: #a13a2b; font-size: 0.85rem; margin-top: 0.3rem; }
.wpcf7-response-output { border-radius: var(--radius); padding: 1rem; margin-top: 1.5rem; border: 1px solid var(--color-secondary-border); }
.nc-hp-field { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; margin: 0; }

/* ==========================================================================
   Bloc "Derniers articles" (core/latest-posts)
   ========================================================================== */
.wp-block-latest-posts.wp-block-latest-posts__list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); list-style: none; margin: 0; padding: 0; }
.wp-block-latest-posts__list > li { background: var(--color-secondary-background); border: 1px solid var(--color-secondary-border); border-radius: var(--radius); overflow: hidden; padding-bottom: 1.1rem; flex: 0 1 300px; min-width: 260px; }
.wp-block-latest-posts__featured-image { margin: 0 0 1rem; overflow: hidden; }
.wp-block-latest-posts__featured-image img { width: 100%; height: 190px; object-fit: cover; }
.wp-block-latest-posts__post-title { display: block; font-family: var(--font-heading); font-weight: 500; font-size: 1.1rem; text-decoration: none; color: var(--color-heading); margin: 0 1.3rem 0.3rem; }
.wp-block-latest-posts__post-date { display: block; font-size: 0.78rem; opacity: 0.6; margin: 0 1.3rem; }

/* ==========================================================================
   Contenu générique (pages, articles)
   ========================================================================== */
.single-content, .archive-results, .no-results { padding: var(--space-lg) 0; }
.entry-title { font-size: 2.2rem; margin-bottom: 0.4rem; }
.entry-meta { margin-bottom: var(--space-md); display: flex; align-items: center; gap: 0.75rem; }
.entry-meta span { color: var(--color-text); opacity: 0.65; font-size: 0.9rem; }
.entry-featured-image { margin-bottom: var(--space-md); border-radius: var(--radius); overflow: hidden; }
.entry-featured-image img { width: 100%; }
.entry-content :is(h2, h3) { margin-top: 2rem; }
.container > :is(h2, h3):not(:first-child) { margin-top: 2rem; }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.site-footer { background: var(--color-heading); color: rgba(255, 255, 255, 0.82); padding: var(--space-lg) 0 var(--space-md); border-top: 3px solid var(--color-accent); }
.footer-menu ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 2rem; list-style: none; margin: 0 0 var(--space-md); padding: 0; }
.footer-menu a { color: #fff; opacity: 0.85; text-decoration: none; font-family: var(--font-heading); font-weight: 500; }
.footer-menu a:hover { opacity: 1; text-decoration: underline; }
.site-footer__copyright { text-align: center; font-size: 0.85rem; opacity: 0.6; }

/* ==========================================================================
   Recherche / archives / 404
   ========================================================================== */
.archive-header, .search-header { padding: var(--space-lg) 0 var(--space-sm); }
.no-results { text-align: center; }

/* ==========================================================================
   Apparition au scroll
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}