/* ══════════════════════════
   conseils.css
   ══════════════════════════ */

/* ── COOKIE BANNER ── */
    #cookie-banner {
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
      background: rgba(28,26,23,0.97); backdrop-filter: blur(12px);
      border-top: 1px solid rgba(255,255,255,0.1);
      padding: 20px 40px; display: flex; align-items: center;
      justify-content: space-between; gap: 24px;
      transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
    }
    #cookie-banner.visible { transform: translateY(0); }
    #cookie-banner p { margin:0; font-size:13px; color:rgba(255,255,255,0.65); line-height:1.6; max-width:680px; }
    #cookie-banner p a { color:var(--gold-light); text-decoration:underline; text-underline-offset:3px; }
    .cookie-actions { display:flex; gap:10px; flex-shrink:0; }
    .btn-cookie-accept { background:var(--gold); color:#fff; border:none; padding:9px 22px; font-family:'DM Sans',sans-serif; font-size:12px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; border-radius:2px; cursor:pointer; transition:background .2s; }
    .btn-cookie-accept:hover { background:#a07840; }
    .btn-cookie-decline { background:transparent; color:rgba(255,255,255,0.45); border:1px solid rgba(255,255,255,0.2); padding:9px 18px; font-family:'DM Sans',sans-serif; font-size:12px; font-weight:400; letter-spacing:0.08em; text-transform:uppercase; border-radius:2px; cursor:pointer; transition:all .2s; }
    .btn-cookie-decline:hover { color:rgba(255,255,255,0.75); border-color:rgba(255,255,255,0.4); }
    @media(max-width:700px) { #cookie-banner { flex-direction:column; align-items:flex-start; padding:20px 24px; } .cookie-actions { width:100%; } .btn-cookie-accept,.btn-cookie-decline { flex:1; text-align:center; } }

    /* ── HERO ── */
    .page-hero {
      background: var(--charcoal);
      padding: 150px 80px 72px;
      position: relative;
      overflow: hidden;
    }
    .page-hero::after {
      content: 'Conseils';
      position: absolute; right: -20px; bottom: -40px;
      font-family: 'Cormorant Garamond', serif;
      font-size: 180px; font-weight: 600;
      color: rgba(255,255,255,.025);
      pointer-events: none; line-height: 1; user-select: none;
    }
    .page-hero-inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; }
    .page-hero .eyebrow {
      font-size: 11px; font-weight: 500; letter-spacing: .28em;
      text-transform: uppercase; color: var(--gold);
      margin-bottom: 18px; display: block;
    }
    .page-hero h1 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(38px, 5vw, 68px); font-weight: 300;
      color: rgba(255,255,255,.88); line-height: 1.12; margin-bottom: 22px;
    }
    .page-hero h1 em { font-style: italic; color: var(--gold); }
    .page-hero .hero-sub {
      font-size: 15px; color: rgba(255,255,255,.38); line-height: 1.8; max-width: 520px;
    }

    /* ── DISCLAIMER ── */
    .disclaimer-wrap { background: var(--cream); border-bottom: 1px solid var(--border); }
    .disclaimer {
      max-width: 900px; margin: 0 auto;
      padding: 16px 0;
      font-size: 12.5px; color: var(--muted);
      display: flex; gap: 10px; align-items: flex-start;
    }
    .disclaimer svg { flex-shrink: 0; margin-top: 1px; }

    /* ── MAIN LAYOUT ── */
    .conseils-main { background: var(--warm-white); padding: 0 80px 100px; }
    .conseils-container { max-width: 900px; margin: 0 auto; }

    /* ── SECTION HEADER ── */
    .section-divider {
      display: flex; align-items: center; gap: 20px;
      padding: 64px 0 48px;
      border-bottom: 1px solid rgba(28,26,23,.08);
    }
    .section-divider span {
      font-size: 10px; font-weight: 500; letter-spacing: .28em;
      text-transform: uppercase; color: var(--gold); white-space: nowrap;
    }
    .section-divider::after { content:''; flex:1; height:1px; background:rgba(28,26,23,.08); }

    /* ── PRODUCT CARD ── */
    .product-card {
      border-bottom: 1px solid rgba(28,26,23,.08);
      padding: 56px 0;
    }
    .product-card:last-child { border-bottom: none; }

    /* meta */
    .product-meta {
      display: flex; align-items: center; gap: 14px;
      margin-bottom: 20px; flex-wrap: wrap;
    }
    .product-badge {
      display: inline-block;
      font-size: 10px; font-weight: 500; letter-spacing: .18em;
      text-transform: uppercase; color: #fff;
      background: var(--accent-green);
      padding: 4px 12px; border-radius: 2px;
    }
    .product-badge.premium { background: var(--accent-red); }
    .product-badge.travel { background: #2563EB; }
    .product-badge.soin { background: #6D28D9; }
    .product-stars { font-size: 12px; color: var(--muted); }
    .stars { color: var(--gold); letter-spacing: 1px; }

    /* titre */
    .product-brand {
      font-size: 10px; font-weight: 500; letter-spacing: .2em;
      text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
    }
    .product-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(26px, 3vw, 38px); font-weight: 400;
      color: var(--charcoal); line-height: 1.2; margin-bottom: 6px;
    }
    .product-tagline {
      font-size: 14px; color: var(--muted); font-style: italic; margin-bottom: 24px;
    }

    /* avis chiro */
    .chiro-note {
      background: var(--section-bg);
      border-left: 2px solid var(--gold);
      padding: 18px 22px; margin-bottom: 22px;
    }
    .chiro-note-label {
      font-size: 10px; font-weight: 500; letter-spacing: .18em;
      text-transform: uppercase; color: var(--gold);
      margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
    }
    .chiro-note p {
      font-size: 14px; color: var(--text); line-height: 1.8;
      font-style: italic;
    }

    /* points forts */
    .product-points {
      list-style: none; display: flex; flex-direction: column;
      gap: 8px; margin-bottom: 28px;
    }
    .product-points li {
      display: flex; align-items: flex-start; gap: 12px;
      font-size: 14px; color: var(--muted); line-height: 1.6;
    }
    .product-points li::before {
      content: '';
      display: block; width: 20px; height: 1px;
      background: var(--gold); margin-top: 10px; flex-shrink: 0;
    }

    /* specs pills */
    .product-specs {
      display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px;
    }
    .spec-pill {
      background: var(--cream); border: 1px solid var(--border);
      font-size: 11px; font-weight: 500; padding: 4px 12px;
      border-radius: 2px; color: var(--text); white-space: nowrap;
    }

    /* CTA */
    .product-cta {
      display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    }
    .product-cta-dual {
      flex-direction: column; align-items: flex-start; gap: 10px;
    }
    .product-cta-dual .btn-amazon-wrap {
      display: flex; gap: 10px; flex-wrap: wrap;
    }
    .btn-amazon {
      display: inline-flex; align-items: center; gap: 10px;
      background: var(--gold); color: #fff;
      font-family: 'DM Sans', sans-serif;
      font-size: 12px; font-weight: 500; letter-spacing: .1em;
      text-transform: uppercase; text-decoration: none;
      padding: 12px 24px; border-radius: 2px;
      transition: background .2s, transform .15s;
    }
    .btn-amazon:hover { background: var(--charcoal); transform: translateY(-1px); }
    .btn-amazon-secondary {
      background: transparent;
      color: var(--gold);
      border: 1.5px solid var(--gold);
    }
    .btn-amazon-secondary:hover { background: var(--gold); color: #fff; }
    .price-note { font-size: 12px; color: var(--muted); font-style: italic; }

    /* ── COMING SOON ── */
    .coming-soon {
      background: var(--cream); border: 1px dashed var(--border);
      padding: 48px 40px; text-align: center; margin-top: 64px;
    }
    .coming-soon h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 28px; font-weight: 300; color: var(--charcoal);
      margin-bottom: 12px;
    }
    .coming-soon h3 em { font-style: italic; color: var(--gold); }
    .coming-soon p { font-size: 14px; color: var(--muted); max-width: 480px; margin: 0 auto 28px; }
    .coming-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 16px; max-width: 760px; margin: 0 auto;
    }
    .coming-item {
      background: #fff; border: 1px solid var(--border);
      padding: 20px 16px; text-align: center;
    }
    .coming-item .ci-icon { font-size: 1.8rem; margin-bottom: 8px; }
    .coming-item p { font-size: 12px; color: var(--muted); margin-top: 4px; }
    .coming-item strong { font-size: 13px; color: var(--charcoal); font-weight: 500; display: block; }

    /* ── RESPONSIVE ── */
    @media(max-width:1100px) {
      .page-hero { padding: 140px 48px 64px; }
      .conseils-main { padding: 0 48px 80px; }
    }
    @media(max-width:860px) {
      .page-hero { padding: 120px 28px 56px; }
      .conseils-main { padding: 0 28px 72px; }
      .disclaimer { padding: 16px 28px; }
    }
    @media(max-width:560px) {
      .page-hero { padding: 110px 20px 48px; }
      .page-hero::after { font-size: 80px; }
      .conseils-main { padding: 0 20px 60px; }
      .disclaimer { padding: 14px 20px; }
      .product-card { padding: 44px 0; }
      .section-divider { padding: 48px 0 36px; }
      .coming-soon { padding: 36px 20px; }
    }
    @media(max-width:380px) {
      .page-hero { padding: 100px 16px 40px; }
      .conseils-main { padding: 0 16px 52px; }
    }

    /* ── PRODUCT THUMBNAIL ── */
    .product-card-inner { display:flex; gap:32px; align-items:flex-start; }
    .product-thumb {
      width:200px; min-width:200px; height:188px;
      border-radius:4px; overflow:hidden;
      background:#F0EBE2; border:1px solid #E0DAD0;
      display:flex; align-items:center; justify-content:center;
      transition:box-shadow .3s;
    }
    .product-thumb:hover { box-shadow:0 8px 28px rgba(184,150,90,.18); }
    .product-thumb svg { width:100%; height:100%; }
    .product-content { flex:1; min-width:0; }
    @media(max-width:700px){
      .product-card-inner { flex-direction:column; }
      .product-thumb { width:100%; min-width:unset; height:160px; }
    }