@import url("theme-matsuri.css");

/* ============================================================================
   THÈME CAPYPURE — identité « Baru » (turquoise / navy, propre & zen)
   Hérite du thème de base (structure, composants, layout) et surcharge la
   palette + le header (clair, pour que le logo à fond blanc s'y fonde).

   Palette fournie :
     Vert Capy   #14B8A6  (dominante : CTA, liens, accents)
     Bleu nuit   #0D1B2A  (titres, header, éléments forts)
     Vert doux   #A7E3D5  (survols, décor)
     Menthe      #E6F6F4  (fonds doux, cartes)
     Gris foncé  #334155  (texte courant)   Gris moyen #64748B (secondaire)
     Gris clair  #E2E8F0  (bordures)         Très clair #F8FAFC (fond page)
     Jaune       #F6C452  (badges/offres)    Corail #FF8A3D (promos)
   Fonctionnelles seulement (hors identité) : jaune/orange/bleu/violet/rouge.
   ========================================================================== */

:root {
    /* ── Accent principal : Vert Capy (le thème base fait --primary: var(--pink)) */
    --pink:      #14B8A6;
    --pink-dk:   #0F9488;
    --pink-lt:   rgba(20, 184, 166, 0.12);

    /* ── Secondaire : Bleu nuit (le base fait --purple pour prix/accents forts) */
    --purple:    #0D1B2A;
    --purple-dk: #081019;

    /* ── Mises en avant / « tendances » : Jaune soleil */
    --gold:      #F6C452;
    --gold-bg:   rgba(246, 196, 82, 0.16);

    /* ── Promotions (fonctionnel) : Corail */
    --orange:    #FF8A3D;
    --orange-dk: #E5722A;

    /* ── Neutres ── */
    --bg:          #F8FAFC;
    --surface:     #FFFFFF;
    --surface-2:   #E6F6F4;   /* menthe claire — fonds doux, hovers */
    --border:      #E2E8F0;
    --text:        #334155;   /* texte courant */
    --text-strong: #0D1B2A;   /* navy — titres */
    --muted:       #64748B;
}

/* ============================================================================
   HEADER CLAIR — le logo (fond blanc) s'y fond ; nav navy + accents turquoise.
   On repasse les éléments prévus « blanc sur fond sombre » en « sombre sur clair ».
   ========================================================================== */
header {
    background: #FFFFFF;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 10px rgba(13, 27, 42, 0.06);
}
header.header--compact {
    box-shadow: 0 2px 14px rgba(13, 27, 42, 0.10);
}

/* Nav */
.nav a { color: var(--muted); }
.nav a:hover { background: var(--surface-2); color: var(--pink-dk); }
.nav a.active {
    background: var(--pink);
    color: #fff;
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.35);
}

/* Recherche */
.search-wrap form {
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.search-wrap form:focus-within {
    background: #fff;
    border-color: var(--pink);
}
.search-input { color: var(--text); }
.search-input::placeholder { color: var(--muted); }
.search-btn { color: var(--muted); }
.search-btn:hover { color: var(--pink); }

/* Sélecteur de pays */
.cs-trigger {
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.cs-trigger:hover { background: #fff; border-color: var(--pink); }
.cs-dropdown {
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(13, 27, 42, 0.14);
}
.cs-option { color: var(--text); }
.cs-option:hover { background: var(--surface-2); }
.cs-option.active { background: var(--pink-lt); font-weight: 600; }

/* Densité de grille */
.gd-trigger {
    color: var(--muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.gd-trigger:hover, .gd-trigger.active {
    background: #fff; border-color: var(--pink); color: var(--pink);
}
.gd-popup {
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(13, 27, 42, 0.14);
}
.gd-label { color: var(--muted); }
.gd-options button { color: var(--text); border: 1px solid var(--border); }
.gd-options button:hover { border-color: var(--pink); color: var(--pink); background: var(--pink-lt); }
.gd-options button.active { background: var(--pink); color: #fff; border-color: var(--pink); }

/* ============================================================================
   Logo header : mascotte Baru (transparente) + wordmark deux-tons
   ========================================================================== */
.logo-img { gap: 12px; }
.logo-img img.logo-mascot { height: 60px; }
header.header--compact .logo-img img.logo-mascot { height: 40px; }
.logo-word {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1;
    white-space: nowrap;
}
.logo-word .lw-a { color: var(--text-strong); }  /* « Capy » — navy */
.logo-word .lw-b { color: var(--pink); }          /* « Pure » — turquoise */
header.header--compact .logo-word { font-size: 20px; }

/* ============================================================================
   Retouches : restes de rose codés en dur dans le thème de base → teinte turquoise
   ========================================================================== */
.product-card .btn-deal:hover,
.product-detail .btn-main:hover {
    background: linear-gradient(135deg, #0B7268, var(--pink-dk));
}

/* ============================================================================
   HOMEPAGE CapyPure (public/includes/home_vertical.php)
   ========================================================================== */

/* — Hero + recherche — */
.cp-hero {
    background: linear-gradient(160deg, var(--surface-2) 0%, #d6efe9 100%);
    border-radius: 20px;
    margin: 22px 0 30px;
    padding: 40px 20px 46px;
    text-align: center;
}
.cp-hero__inner { max-width: 720px; margin: 0 auto; }
.cp-hero__mascot { display: block; margin: 0 auto 10px; height: 110px; width: auto; }
.cp-hero__title {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 800;
    color: var(--text-strong);
    letter-spacing: -0.5px;
    line-height: 1.15;
    margin-bottom: 8px;
}
.cp-hero__sub { font-size: 16px; color: var(--muted); margin-bottom: 22px; }
.cp-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 2px solid var(--border);
    border-radius: 999px;
    padding: 6px 6px 6px 18px;
    max-width: 620px;
    margin: 0 auto;
    box-shadow: 0 6px 24px rgba(13, 27, 42, 0.08);
    transition: border-color .15s, box-shadow .15s;
}
.cp-search:focus-within { border-color: var(--pink); box-shadow: 0 6px 28px rgba(20,184,166,0.18); }
.cp-search svg { color: var(--muted); flex-shrink: 0; }
.cp-search input {
    flex: 1; border: none; outline: none; background: none;
    font-size: 15px; color: var(--text); min-width: 0; padding: 10px 0;
}
.cp-search input::placeholder { color: var(--muted); }
.cp-search button {
    flex-shrink: 0;
    border: none;
    background: var(--pink);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 11px 24px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, transform .1s;
}
.cp-search button:hover { background: var(--pink-dk); }
.cp-search button:active { transform: scale(.97); }

/* — Sections — */
.cp-section { margin: 0 0 38px; }
.cp-section__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.cp-section__head h2 {
    font-size: 21px;
    font-weight: 800;
    color: var(--text-strong);
    letter-spacing: -0.3px;
}
.cp-section__count {
    font-size: 13px;
    font-weight: 600;
    color: var(--pink-dk);
    background: var(--pink-lt);
    padding: 2px 10px;
    border-radius: 999px;
}
.cp-section__hint { font-size: 13px; color: var(--muted); }
.cp-section__all {
    margin-left: auto;
    font-size: 14px;
    font-weight: 700;
    color: var(--pink);
    text-decoration: none;
    white-space: nowrap;
}
.cp-section__all:hover { color: var(--pink-dk); }

/* — Grille de cartes — */
.cp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: 16px;
}
.card-merchant { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* Badge « X marchands » (tendances) */
.offers-badge {
    position: absolute;
    top: 8px; left: 8px;
    background: rgba(13, 27, 42, 0.85);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    backdrop-filter: blur(2px);
}
.cp-section--promos .drop-badge { background: var(--orange); }

/* — Guides (SEO) — */
.cp-guides__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
}
.cp-guide-card {
    display: block;
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 18px 20px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s, transform .1s;
}
.cp-guide-card:hover {
    border-color: var(--pink);
    box-shadow: 0 8px 24px rgba(13, 27, 42, 0.08);
    transform: translateY(-2px);
}
.cp-guide-card h3 { font-size: 15px; color: var(--text-strong); margin-bottom: 6px; line-height: 1.3; }
.cp-guide-card p { font-size: 13px; color: var(--muted); line-height: 1.55; }
.cp-guide-read {
    display: inline-block;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--pink);
}
.cp-guide-card:hover .cp-guide-read { color: var(--pink-dk); }

/* — Bloc de contenu éditorial (SEO) — */
.cp-content {
    background: var(--surface-2);
    border-radius: 18px;
    padding: 30px 32px;
}
.cp-content h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-strong);
    letter-spacing: -0.3px;
    margin-bottom: 14px;
}
.cp-content__body { max-width: 820px; }
.cp-content__body p { font-size: 15px; line-height: 1.75; color: var(--text); margin-bottom: 12px; }
.cp-content__body p:last-child { margin-bottom: 0; }
.cp-content__body strong { color: var(--text-strong); }

/* — Page article (guide) — */
.cp-article { max-width: 760px; margin: 22px auto 10px; }
.cp-article .cp-back {
    display: inline-block; font-size: 13px; font-weight: 600;
    color: var(--pink); text-decoration: none; margin-bottom: 14px;
}
.cp-article .cp-back:hover { color: var(--pink-dk); }
.cp-article__title {
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 800; color: var(--text-strong);
    letter-spacing: -0.5px; line-height: 1.15;
}
.cp-article__meta { font-size: 13px; color: var(--muted); margin-top: 8px; }
.cp-article__lead {
    font-size: 18px; line-height: 1.65; color: var(--text);
    margin: 18px 0 8px; font-weight: 500;
}
.cp-article h2 {
    font-size: 22px; font-weight: 800; color: var(--text-strong);
    letter-spacing: -0.3px; margin: 30px 0 10px;
}
.cp-article p { font-size: 16px; line-height: 1.75; color: var(--text); margin-bottom: 14px; }
.cp-article ul { margin: 0 0 14px 22px; }
.cp-article li { font-size: 16px; line-height: 1.7; color: var(--text); margin-bottom: 6px; }
.cp-article strong { color: var(--text-strong); }
.cp-article__cta {
    margin-top: 34px; padding: 24px 26px;
    background: var(--surface-2); border-radius: 16px; text-align: center;
}
.cp-article__cta p { font-size: 16px; font-weight: 600; color: var(--text-strong); margin-bottom: 14px; }
.cp-btn {
    display: inline-block;
    background: var(--pink); color: #fff; font-weight: 700; font-size: 15px;
    padding: 12px 26px; border-radius: 999px; text-decoration: none;
    transition: background .15s, transform .1s;
}
.cp-btn:hover { background: var(--pink-dk); }
.cp-btn:active { transform: scale(.97); }

/* — Section « Les marques » — */
.cp-brands__row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.cp-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 120px;
    height: 62px;
    padding: 0 20px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .1s;
}
.cp-brand:hover {
    border-color: var(--pink);
    box-shadow: 0 8px 22px rgba(13, 27, 42, 0.09);
    transform: translateY(-2px);
}
.cp-brand__ico {
    width: 26px; height: 26px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
    display: block;
}
.cp-brand__name {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-strong);
    letter-spacing: -0.3px;
}

/* — Chapô éditorial (aspect « site de contenu ») — */
.cp-intro {
    max-width: 820px;
    margin: -6px auto 34px;
    text-align: center;
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted);
}

/* — Sections « type » : illustration Baru + description + séparateur — */
.cp-type { padding-top: 28px; border-top: 1px solid var(--border); }
.cp-type:first-of-type { border-top: none; padding-top: 6px; }
.cp-type__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.cp-type__icon {
    flex-shrink: 0;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border-radius: 18px;
    overflow: hidden;
}
.cp-type__icon img { width: 100%; height: 100%; object-fit: contain; }
.cp-type__emoji { font-size: 40px; line-height: 1; }
.cp-type__meta { flex: 1; min-width: 0; }
.cp-type__meta h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-strong);
    letter-spacing: -0.3px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.cp-type__desc {
    margin-top: 5px;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.55;
    max-width: 640px;
}
@media (max-width: 560px) {
    .cp-type__icon { width: 62px; height: 62px; border-radius: 14px; }
    .cp-type__emoji { font-size: 30px; }
    .cp-type__head { gap: 12px; flex-wrap: wrap; }
    .cp-section__all { margin-left: 0; }
}

/* — En-tête page marque — */
.cp-brandhead { margin: 20px 0 28px; }
.cp-brandhead .cp-back {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--pink);
    text-decoration: none;
    margin-bottom: 10px;
}
.cp-brandhead .cp-back:hover { color: var(--pink-dk); }
.cp-brandhead h1 {
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 800;
    color: var(--text-strong);
    letter-spacing: -0.5px;
}
.cp-brandhead p { color: var(--muted); margin-top: 6px; font-size: 15px; }
.cp-empty {
    text-align: center;
    color: var(--muted);
    padding: 50px 20px;
    font-size: 15px;
}