/* ============================================================================
   THÈME CAPY — SOCLE COMMUN des sites de niche (CapyPure, CapyDream, …)

   Ce fichier ne contient AUCUNE couleur de marque : uniquement la structure
   et les composants partagés (header clair, logo mascotte + wordmark, home
   « vertical », cartes, carrousels, guides, comparateur, mobile).

   Il s'appuie entièrement sur les variables définies par le thème de chaque
   site, qui doit fournir :
     --pink / --pink-dk / --pink-lt   accent principal de la marque
     --purple / --purple-dk           couleur forte (titres, prix)
     --gold / --gold-bg               mises en avant
     --orange / --orange-dk           promotions
     --bg --surface --surface-2 --surface-3 --border
     --text --text-strong --muted
     --accent-rgb                     triplet R,G,B de l'accent  (ex. 20,184,166)
     --shadow-rgb                     triplet R,G,B des ombres   (ex. 13,27,42)

   Un thème de site = @import de theme-matsuri.css, puis de ce fichier, puis
   son bloc :root. Voir theme-capypure.css / theme-capydream.css.
   ========================================================================== */

/* ============================================================================
   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(var(--shadow-rgb), 0.06);
}
header.header--compact {
    box-shadow: 0 2px 14px rgba(var(--shadow-rgb), 0.10);
}

/* Nav — ancrée juste après le logo sur TOUTES les pages.
   (Le thème de base la pousse à droite avec margin-left:auto ; comme la
   recherche du header est masquée sur la home, les liens se déplaçaient d'une
   page à l'autre. On fige leur position et on repousse le reste à droite.) */
.nav { margin-left: 26px; margin-right: auto; }
.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(var(--accent-rgb), 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(var(--shadow-rgb), 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(var(--shadow-rgb), 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
   ========================================================================== */
/* Nunito ExtraBold — police du wordmark « CapyPure ».
   Auto-hébergée volontairement : le CDN Google Fonts transmet l'IP des
   visiteurs à un tiers (problématique au regard du RGPD) et ajoute une
   connexion externe. Ici : un seul fichier de 16 Ko, servi par notre nginx. */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 800;
    font-display: swap;   /* le texte reste lisible pendant le chargement */
    src: url('../fonts/nunito-800.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                   U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.logo-img { gap: 12px; }
.logo-img img.logo-mascot { height: 60px; }
header.header--compact .logo-img img.logo-mascot { height: 40px; }
.logo-word {
    font-family: 'Nunito', system-ui, -apple-system, sans-serif;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.3px;   /* Nunito est plus ronde : moins de resserrement */
    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%, var(--surface-3) 100%);
    border-radius: 20px;
    margin: 22px 0 30px;
    padding: 40px 20px 46px;
    text-align: center;
}
.cp-hero__inner { max-width: 880px; margin: 0 auto; }
.cp-hero__mascot { display: block; margin: 0 auto 10px; height: 110px; width: auto; }
.cp-hero__title {
    font-size: clamp(24px, 3.5vw, 38px);
    font-weight: 800;
    color: var(--text-strong);
    letter-spacing: -0.5px;
    line-height: 1.15;
    margin-bottom: 8px;
    text-wrap: balance;   /* si ça passe à la ligne, deux lignes équilibrées */
}
/* Accroche sur UNE seule ligne dès que la largeur le permet.
   En dessous, on laisse le texte se replier : le forcer déborderait. */
@media (min-width: 940px) {
    .cp-hero__title { white-space: nowrap; }
}
.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(var(--shadow-rgb), 0.08);
    transition: border-color .15s, box-shadow .15s;
}
.cp-search:focus-within { border-color: var(--pink); box-shadow: 0 6px 28px rgba(var(--accent-rgb), 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); }

/* — Autocomplétion — */
.cp-search { position: relative; }
.cp-suggest {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px);
    background: #fff; border: 1px solid var(--border); border-radius: 16px;
    box-shadow: 0 12px 34px rgba(var(--shadow-rgb), .16);
    overflow: hidden; z-index: 300; text-align: left;
}
.cp-suggest__item {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 18px; cursor: pointer; font-size: 15px; color: var(--text);
    border-bottom: 1px solid var(--border);
}
.cp-suggest__item:last-child { border-bottom: none; }
.cp-suggest__item:hover, .cp-suggest__item.is-active { background: var(--surface-2); }
.cp-suggest__ico { flex-shrink: 0; font-size: 15px; }
.cp-suggest__label { flex: 1; font-weight: 600; color: var(--text-strong); }
.cp-suggest__n { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* — 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 (pages de listing) — */
.cp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: 16px;
}

/* — Carrousel horizontal (page d'accueil) —
   Permet de proposer beaucoup plus de modèles par section sans allonger
   la page. Sur mobile, les flèches disparaissent : le doigt suffit. */
.cp-carousel-outer { display: flex; align-items: center; gap: 8px; }
.cp-carousel-btn {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-strong);
    font-size: 20px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; user-select: none;
    box-shadow: 0 2px 8px rgba(var(--shadow-rgb), .10);
    transition: border-color .15s, color .15s, background .15s, opacity .15s;
}
.cp-carousel-btn:hover { border-color: var(--pink); color: var(--pink); background: var(--pink-lt); }
.cp-carousel-btn:disabled { opacity: .25; cursor: default; pointer-events: none; }
.cp-carousel-wrap {
    flex: 1; min-width: 0;
    overflow-x: auto; overflow-y: visible;
    scroll-behavior: smooth;
    scrollbar-width: none;                 /* Firefox */
    scroll-snap-type: x proximity;
    padding: 4px 2px 6px;
}
.cp-carousel-wrap::-webkit-scrollbar { display: none; }
.cp-carousel { display: flex; gap: 16px; width: max-content; }
.cp-carousel .product-card {
    width: 190px; flex: 0 0 190px;         /* largeur fixe : indispensable en flex */
    scroll-snap-align: start;
}
.card-merchant { font-size: 11px; color: var(--muted); margin-top: 4px; }
/* « dès » devant le prix quand plusieurs marchands proposent le modèle */
.cp-from { font-size: 12px; color: var(--muted); margin-right: 2px; }

/* Note acheteurs sur les cartes */
.cp-rating {
    display: flex; align-items: center; gap: 5px; margin-top: 5px;
    font-size: 12px; color: var(--text);
}
.cp-rating__stars { color: var(--gold); letter-spacing: -1px; font-size: 13px; }
.cp-rating__dim { color: var(--border); }
.cp-rating strong { color: var(--text-strong); font-weight: 700; }
.cp-rating__n { color: var(--muted); font-size: 11px; }

/* — Tableau des offres marchands (fiche produit) —
   Le titre du produit y est en `white-space: nowrap` avec ellipsis. Or dans un
   tableau à largeur automatique, l'ellipsis ne s'applique jamais : la cellule
   s'élargit pour contenir tout le texte (jusqu'à 1 600 px observés) et fait
   déborder la page horizontalement. `table-layout: fixed` contraint enfin les
   colonnes, ce qui rend l'ellipsis opérante. */
.compare-table table {
    table-layout: fixed;
    width: 100%;
}
/* Colonnes de chiffres : largeur juste nécessaire ; le marchand prend le reste. */
.compare-table th:not(:first-child),
.compare-table td:not(:first-child) { width: 96px; }
.compare-table td:first-child > div { max-width: 100%; }
/* Filet de sécurité si un contenu résiste malgré tout. */
.compare-table { overflow-x: auto; }

/* — Vidéos officielles (lecteur différé) — */
.cp-videos {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px;
}
.cp-video {
    position: relative; cursor: pointer; border-radius: 12px; overflow: hidden;
    background: #000; aspect-ratio: 16 / 9;
    transition: transform .12s, box-shadow .15s;
}
.cp-video:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(var(--shadow-rgb), .18); }
.cp-video:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.cp-video img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .88; }
.cp-video__play {
    position: absolute; inset: 0; margin: auto; width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--accent-rgb), .92); color: #fff; border-radius: 50%;
    font-size: 20px; padding-left: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.cp-video__title {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px;
    background: linear-gradient(transparent, rgba(0,0,0,.85));
    color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.35;
}
.cp-video.is-playing { aspect-ratio: 16 / 9; }
.cp-video.is-playing iframe { width: 100%; height: 100%; border: 0; display: block; }

/* — Caractéristiques sur la fiche produit — */
.cp-specs__group {
    font-size: 11.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .7px; color: var(--pink-dk);
    margin: 16px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border);
}
.cp-specs__group:first-of-type { margin-top: 4px; }
.cp-specs {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 2px 22px; margin: 0;
}
.cp-specs > div {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; padding: 7px 0; border-bottom: 1px dotted var(--border);
}
.cp-specs dt { color: var(--muted); font-size: 14px; }
.cp-specs dd { margin: 0; font-weight: 700; color: var(--text-strong); font-size: 14px; text-align: right; }

/* Mention de provenance des données (transparence) */
.cp-source-note {
    margin-top: 14px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--muted);
    background: var(--surface-2);
    border-radius: 10px;
    padding: 10px 14px;
}
.cp-source-note strong { color: var(--text); }

/* Mention de provenance en pied de page */
.site-footer__sources {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 24px 0;
    font-size: 12px;
    line-height: 1.65;
    color: var(--muted);
    border-top: 1px solid var(--border);
}
.site-footer__sources strong { color: var(--text); font-weight: 700; }

/* Badge « X marchands » (tendances) */
.offers-badge {
    position: absolute;
    top: 8px; left: 8px;
    background: rgba(var(--shadow-rgb), 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(var(--shadow-rgb), 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); }

/* — Cartes guides illustrées (page /guide.php) — */
.cp-guides__grid--rich { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.cp-guide-card--rich { display: flex; gap: 14px; align-items: flex-start; padding: 16px; }
.cp-guide-card__img {
    flex-shrink: 0; width: 82px; height: 82px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2); border-radius: 14px; overflow: hidden;
}
.cp-guide-card__img img { width: 100%; height: 100%; object-fit: contain; }
.cp-guide-card__body { flex: 1; min-width: 0; }

/* — 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: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    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(var(--shadow-rgb), 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;
}
/* Bouton « voir toutes les marques » — mobile uniquement */
.cp-brands__more {
    display: none;
    margin: 14px auto 0;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--pink-dk);
    font-weight: 700;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 999px;
    cursor: pointer;
}
.cp-brands__more:hover { border-color: var(--pink); }

/* — 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 { margin-bottom: 42px; }
.cp-type__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 18px;
    padding: 18px 24px;
    background: linear-gradient(105deg, var(--surface-2) 0%, rgba(230,246,244,0) 78%);
    border-radius: 20px;
    border-left: 5px solid var(--pink);
}
/* Illustration Baru : halo menthe, débord léger pour un rendu vivant */
.cp-type__icon {
    flex-shrink: 0;
    width: 118px;
    height: 118px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
}
.cp-type__icon::before {
    content: '';
    position: absolute;
    inset: 6px 0 0;
    background: radial-gradient(circle at 50% 55%, rgba(var(--accent-rgb), .20) 0%, rgba(var(--accent-rgb), 0) 68%);
    border-radius: 50%;
}
.cp-type__icon img {
    position: relative;
    width: 100%;
    height: 118px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(var(--shadow-rgb), .14));
}
.cp-type__emoji { font-size: 46px; line-height: 1; position: relative; }
.cp-type__meta { flex: 1; min-width: 0; }
.cp-type__meta h2 {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-strong);
    letter-spacing: -0.4px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.cp-type__desc {
    margin-top: 6px;
    font-size: 14.5px;
    color: var(--text);
    line-height: 1.6;
    max-width: 620px;
}

/* Variante compacte — pages sans illustration de Baru (accessoires) :
   un simple pictogramme ne justifie pas la hauteur réservée aux dessins. */
.cp-type--compact { margin-bottom: 30px; }
.cp-type--compact .cp-type__head { padding: 10px 18px; gap: 14px; border-radius: 14px; }
.cp-type--compact .cp-type__icon { width: 44px; height: 44px; }
.cp-type--compact .cp-type__icon::before { content: none; }   /* pas de halo */
.cp-type--compact .cp-type__emoji { font-size: 28px; }
.cp-type--compact .cp-type__meta h2 { font-size: 19px; }
.cp-type--compact .cp-type__desc { margin-top: 2px; font-size: 13.5px; }
@media (max-width: 560px) {
    .cp-type__head {
        gap: 14px; padding: 14px 16px; border-radius: 16px; align-items: flex-start;
    }
    .cp-type__icon { width: 74px; height: 74px; }
    .cp-type__icon img { height: 74px; }
    .cp-type__emoji { font-size: 32px; }
    .cp-type__meta h2 { font-size: 19px; }
    .cp-type__desc { font-size: 13.5px; }
    .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;
}

/* ============================================================================
   Composants éditoriaux des guides
   ========================================================================== */
/* Bandeau illustré en tête d'article */
.cp-article__hero {
    display: flex; align-items: center; gap: 20px;
    background: linear-gradient(160deg, var(--surface-2) 0%, var(--surface-3) 100%);
    border-radius: 18px; padding: 22px 26px; margin: 16px 0 22px;
}
.cp-article__hero img { width: 110px; height: 110px; object-fit: contain; flex-shrink: 0; }
.cp-article__hero .cp-article__lead { margin: 0; }

/* Sommaire */
.cp-toc {
    background: #fff; border: 1px solid var(--border); border-radius: 14px;
    padding: 16px 20px; margin: 0 0 26px;
}
.cp-toc__title {
    font-size: 12px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .6px; color: var(--muted); margin-bottom: 8px;
}
.cp-toc ol { margin: 0 0 0 18px; }
.cp-toc li { font-size: 14.5px; line-height: 1.85; }
.cp-toc a { color: var(--text-strong); text-decoration: none; }
.cp-toc a:hover { color: var(--pink); }

/* Tableau comparatif */
.cp-table-wrap { overflow-x: auto; margin: 0 0 18px; }
/* Mention de prudence en fin de guide (santé, sécurité) : visible sans être
   alarmante — on ne se fait pas passer pour un professionnel de santé. */
.cp-disclaimer {
    margin: 16px 0 0;
    padding: 10px 14px;
    border-left: 3px solid var(--border);
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
}
.cp-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 460px; }
.cp-table th, .cp-table td {
    padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border);
}
.cp-table thead th {
    background: var(--surface-2); color: var(--text-strong);
    font-weight: 800; font-size: 13.5px; white-space: nowrap;
}
.cp-table tbody tr:last-child td { border-bottom: none; }
.cp-table td:first-child { font-weight: 600; color: var(--text-strong); }

/* Encadrés (verdict / astuce / attention) */
.cp-box {
    border-radius: 14px; padding: 16px 20px; margin: 0 0 18px;
    border-left: 4px solid var(--pink); background: var(--surface-2);
}
.cp-box__title {
    font-weight: 800; color: var(--text-strong); font-size: 15px; margin-bottom: 6px;
}
.cp-box p:last-child, .cp-box ul:last-child { margin-bottom: 0; }
.cp-box--tip     { border-left-color: var(--gold);   background: var(--gold-bg); }
.cp-box--warning { border-left-color: var(--orange); background: rgba(255,138,61,.10); }

/* Pour / contre */
.cp-pros { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 18px; }
.cp-pros > div {
    background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px;
}
.cp-pros h4 { font-size: 14px; margin-bottom: 8px; color: var(--text-strong); }
.cp-pros ul { margin: 0 0 0 18px; }
.cp-pros li { font-size: 14px; line-height: 1.6; margin-bottom: 5px; }
.cp-pros .pro h4 { color: #16A34A; }
.cp-pros .con h4 { color: #DC2626; }
@media (max-width: 560px) { .cp-pros { grid-template-columns: 1fr; } }

/* FAQ */
.cp-faq { margin: 0 0 8px; }
.cp-faq details {
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
    padding: 13px 18px; margin-bottom: 10px;
}
.cp-faq summary {
    font-weight: 700; color: var(--text-strong); cursor: pointer; font-size: 15px;
}
.cp-faq details[open] summary { margin-bottom: 8px; }
.cp-faq p { font-size: 15px; margin-bottom: 0; }

/* — Chips de filtre (page accessoires) — */
.cp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.cp-chip {
    display: inline-block;
    padding: 8px 15px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    transition: border-color .15s, background .15s, color .15s;
}
.cp-chip:hover { border-color: var(--pink); color: var(--pink-dk); }
.cp-chip.is-active { background: var(--pink); border-color: var(--pink); color: #fff; }

/* Barre de tri (page type) */
.cp-sortbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; }
.cp-sortbar > span { font-size: 13.5px; font-weight: 700; color: var(--muted); margin-right: 2px; }
.cp-sortbar .cp-chip { padding: 6px 13px; font-size: 13px; }

/* H1 de la page type (même style que le h2 de section) */
.cp-type__h1 {
    font-size: 26px; font-weight: 800; color: var(--text-strong);
    letter-spacing: -0.4px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
@media (max-width: 560px) { .cp-type__h1 { font-size: 20px; } }

/* ============================================================================
   Comparateur multi-modèles
   ========================================================================== */
/* Case « Comparer » sur les cartes produit */
.cp-cmp-check {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 8px; border-top: 1px solid var(--border);
    font-size: 12.5px; font-weight: 600; color: var(--muted);
    cursor: pointer; user-select: none;
}
.cp-cmp-check:hover { color: var(--pink-dk); background: var(--surface-2); }
.cp-cmp-check input { accent-color: var(--pink); width: 15px; height: 15px; cursor: pointer; }

/* Barre flottante */
.cp-cmpbar {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px;
    z-index: 950; display: flex; align-items: center; gap: 14px;
    background: var(--text-strong); color: #fff;
    padding: 11px 16px; border-radius: 999px;
    box-shadow: 0 10px 34px rgba(var(--shadow-rgb), .34);
    font-size: 14px; max-width: calc(100vw - 24px);
}
.cp-cmpbar__count strong { font-size: 16px; }
.cp-cmpbar__hint { color: rgba(255,255,255,.6); font-size: 12.5px; }
.cp-cmpbar__go {
    background: var(--pink); color: #fff; font-weight: 700;
    padding: 8px 18px; border-radius: 999px; text-decoration: none; white-space: nowrap;
}
.cp-cmpbar__go:hover { background: var(--pink-dk); }
.cp-cmpbar__go.is-disabled { opacity: .45; cursor: not-allowed; }
.cp-cmpbar__clear {
    background: none; border: none; color: rgba(255,255,255,.7);
    font-size: 13px; cursor: pointer; text-decoration: underline;
}
.cp-cmpbar__clear:hover { color: #fff; }
@media (max-width: 560px) {
    .cp-cmpbar { gap: 9px; padding: 9px 12px; font-size: 13px; bottom: 10px; }
    .cp-cmpbar__hint { display: none; }
}

/* Tableau comparatif */
.cp-cmp-wrap { overflow-x: auto; margin-bottom: 14px; }
.cp-cmp { width: 100%; border-collapse: collapse; min-width: 560px; }
.cp-cmp th, .cp-cmp td {
    padding: 12px 14px; text-align: center; border-bottom: 1px solid var(--border);
    font-size: 14.5px; vertical-align: middle;
}
.cp-cmp thead th { background: var(--surface-2); vertical-align: top; }
.cp-cmp__rowhead {
    text-align: left !important; font-weight: 700; color: var(--text-strong);
    background: var(--surface-2); white-space: nowrap; width: 170px;
}
.cp-cmp__prod { display: block; text-decoration: none; color: var(--text-strong); }
.cp-cmp__prod img { width: 92px; height: 92px; object-fit: contain; display: block; margin: 0 auto 8px; }
.cp-cmp__title { font-size: 13px; font-weight: 600; line-height: 1.35; display: block; }
.cp-cmp__prod:hover .cp-cmp__title { color: var(--pink); }
.cp-cmp__sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.cp-cmp__na { color: var(--muted); }
.cp-cmp td.is-best {
    background: rgba(34,197,94,.10);
    box-shadow: inset 0 0 0 2px rgba(34,197,94,.35);
    font-weight: 800; color: #15803D; border-radius: 8px;
}
.cp-cmp__note { font-size: 13px; color: var(--muted); line-height: 1.6; }
.cp-cmp__group td {
    background: var(--text-strong); color: #fff;
    text-align: left !important; font-size: 12px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .7px; padding: 7px 14px;
}

/* Frais de livraison sur la carte — discrets mais lisibles : sur la literie
   ils pèsent couramment 30 à 60 €, ils font partie du prix réel. */
.cp-ship {
    margin-top: 2px;
    font-size: 12px;
    color: var(--orange-dk);
    font-weight: 700;
}

/* ============================================================================
   Entrées par besoin (.cp-needs) — raccourcis sous le hero pour les verticaux
   où l'on cherche une solution plutôt qu'une référence.
   ========================================================================== */
.cp-needs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    max-width: 1180px;
    margin: -14px auto 30px;
    padding: 0 18px;
}
.cp-need {
    display: block;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cp-need:hover {
    border-color: var(--pink);
    box-shadow: 0 6px 18px rgba(var(--shadow-rgb), .10);
    transform: translateY(-2px);
}
.cp-need__ico   { font-size: 24px; display: block; margin-bottom: 6px; }
/* Variante illustrée : le dessin porte le bloc, le texte passe dessous et se
   centre. Hauteur figée pour que les quatre cartes s'alignent même si les
   illustrations n'ont pas exactement les mêmes proportions. */
.cp-need--illus { text-align: center; padding: 12px 14px 16px; }
.cp-need__img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 92px;
    object-fit: contain;
    margin: 0 auto 8px;
}
.cp-need--illus:hover .cp-need__img { transform: scale(1.03); }
.cp-need__img { transition: transform .15s; }
.cp-need__label { display: block; font-weight: 800; color: var(--text-strong); font-size: 15px; }
.cp-need__hint  { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }

/* ============================================================================
   Période d'essai (.cp-trial) — tableau comparatif des politiques de marque.
   ========================================================================== */
.cp-trial__intro {
    max-width: 780px;
    margin: 0 0 16px;
    color: var(--text);
    line-height: 1.6;
}
/* Le tableau doit défiler DANS son conteneur : sinon c'est la page entière qui
   déborde en mobile (défaut déjà rencontré sur le tableau des offres). */
.cp-trial__wrap { overflow-x: auto; }
.cp-trial__table { min-width: 560px; }
.cp-trial__table td, .cp-trial__table th { white-space: nowrap; }
.cp-trial__none    { color: var(--muted); }
.cp-trial__nostock { color: var(--muted); font-size: 12.5px; font-style: italic; }
.cp-trial__link    { color: var(--pink-dk); font-weight: 700; text-decoration: none; }
.cp-trial__link:hover { text-decoration: underline; }
.cp-trial__notes {
    margin: 12px 0 0;
    padding-left: 20px;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.6;
}
.cp-trial__note {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--muted);
}

/* ============================================================================
   Le choix de la mascotte (.cp-picks) — sélections éditoriales par usage.
   ========================================================================== */
.cp-pick { margin: 18px 0 26px; }
.cp-pick__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    padding-left: 2px;
}
.cp-pick__ico {
    font-size: 26px;
    line-height: 1;
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2);
    border-radius: 12px;
}
.cp-pick__head h3 {
    margin: 0;
    font-size: 17px;
    color: var(--text-strong);
}
.cp-pick__head p {
    margin: 2px 0 0;
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.5;
}

/* ============================================================================
   Sélecteur de TAILLE (header) — même habillage que le sélecteur de pays,
   dont il réutilise les classes .cs-* du thème de base.
   ========================================================================== */
.size-selector { position: relative; margin-left: 10px; }
.size-selector .cs-dropdown { min-width: 210px; }
.size-selector .cs-option { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.size-selector .cs-option small { color: var(--muted); font-size: 11.5px; }
.size-selector .cs-option--reset {
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 13px;
}

/* Choix de taille en pleine page (« Meilleurs prix » sans taille retenue) */
.cp-sizepick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 18px 0 24px;
}
.cp-sizepick__item {
    display: block;
    padding: 18px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    text-align: center;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cp-sizepick__item:hover {
    border-color: var(--pink);
    box-shadow: 0 6px 18px rgba(var(--shadow-rgb), .10);
    transform: translateY(-2px);
}
.cp-sizepick__dim {
    display: block;
    font-size: 21px;
    font-weight: 800;
    color: var(--text-strong);
    letter-spacing: -0.3px;
}
.cp-sizepick__lbl { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }

/* Bandeau rappelant la taille active sur les pages de listing */
.cp-sizebar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
    padding: 10px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 13.5px;
    color: var(--text);
}
.cp-sizebar strong { color: var(--text-strong); }
.cp-sizebar a { color: var(--pink-dk); font-weight: 700; text-decoration: none; }
.cp-sizebar a:hover { text-decoration: underline; }

/* ============================================================================
   Mobile
   ========================================================================== */
@media (max-width: 560px) {
    /* Header : logo compact pour rester sur UNE ligne */
    .logo-img { gap: 8px; }
    .logo-img img.logo-mascot { height: 40px; }
    .logo-word { font-size: 19px; }

    /* Grille produits : 2 par ligne (au lieu d'un seul, trop de scroll) */
    .cp-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    /* Carrousel : pas de flèches, on fait défiler au doigt */
    .cp-carousel-btn { display: none; }
    .cp-carousel { gap: 10px; }
    .cp-carousel .product-card { width: 158px; flex-basis: 158px; }
    .cp-carousel-wrap { padding-right: 14px; }   /* laisse deviner la suite */

    /* Hero plus compact */
    .cp-hero { padding: 28px 14px 32px; }
    .cp-hero__mascot { height: 82px; }
    .cp-hero__title { font-size: 22px; }

    /* Marques : 2 colonnes régulières, limitées à 8 tant que non déplié */
    .cp-brands__row { grid-template-columns: repeat(2, 1fr); }
    .cp-brand { min-width: 0; padding: 0 10px; }
    .cp-brands__row .cp-brand:nth-child(n+9) { display: none; }
    .cp-brands__row.expanded .cp-brand:nth-child(n+9) { display: flex; }
    .cp-brands__more { display: block; }

    /* Contenu éditorial : padding réduit */
    .cp-content { padding: 22px 18px; }
}

/* — Tuile « Voir tout » en bout de rangée —
   Remplace l'ancien petit lien d'en-tête : le visiteur qui a fait défiler
   toute la sélection trouve la suite là où son regard s'arrête, sans devoir
   remonter au titre. Même gabarit qu'une carte produit pour ne pas casser
   l'alignement de la grille ni du carrousel. */
.cp-seeall {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 190px;
    padding: 18px 12px;
    border: 2px dashed var(--border);
    border-radius: 14px;
    background: transparent;
    color: var(--text-strong);
    text-decoration: none;
    text-align: center;
    transition: border-color .15s, background .15s, color .15s;
}
.cp-grid .cp-seeall { height: 100%; }
.cp-carousel .cp-seeall {
    width: 190px; flex: 0 0 190px;         /* aligné sur .cp-carousel .product-card */
    scroll-snap-align: start;
}
.cp-seeall__arrow {
    display: flex; align-items: center; justify-content: center;
    width: 58px; height: 58px;
    border-radius: 50%;
    background: var(--pink-lt);
    color: var(--pink);
    font-size: 34px; line-height: 1;
    padding-bottom: 4px;                   /* recentre le chevron optiquement */
    transition: background .15s, color .15s, transform .15s;
}
.cp-seeall__label { font-size: 14px; font-weight: 700; }
.cp-seeall:hover { border-color: var(--pink); background: var(--pink-lt); color: var(--pink-dk); }
.cp-seeall:hover .cp-seeall__arrow { background: var(--pink); color: #fff; transform: translateX(3px); }
.cp-seeall:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }