/* ══════════════════════════════════════════════════════════════════
   COMBI — FICHE PRODUIT, STRUCTURE LUVENTA — 31 août 2026
   Sections ajoutées : accordéon Fiche technique, bande de bénéfices,
   ligne méta, blocs éditoriaux par produit, bloc « Bon à savoir ».
   Charte Combi (crème / charbon / or), pas de réassurance.
   ══════════════════════════════════════════════════════════════════ */

/* ─── ACCORDÉON FICHE TECHNIQUE ─────────────────────────────────── */
#cb2 .cb2-spec {
    margin-top: 18px;
    background: #fff;
    border: 1px solid var(--gray-light, #E4DBD1);
    border-radius: 12px;
    overflow: hidden;
}
#cb2 .cb2-spec > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 16px;
    cursor: pointer;
    list-style: none;
    font-family: 'Cormorant Garamond', serif;
    font-size: 19px;
    color: var(--charcoal, #2C2421);
}
#cb2 .cb2-spec > summary::-webkit-details-marker { display: none; }
#cb2 .cb2-spec > summary svg { width: 19px; height: 19px; color: var(--gold, #C4A882); flex: 0 0 auto; }
#cb2 .cb2-spec > summary .t { flex: 1; }
#cb2 .cb2-spec > summary .n {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: var(--gray, #8B7E74);
    background: var(--cream-2, #F7F2EA);
    border-radius: 999px;
    padding: 3px 9px;
}
#cb2 .cb2-spec > summary i {
    width: 14px; height: 14px; position: relative; flex: 0 0 auto;
}
#cb2 .cb2-spec > summary i::before,
#cb2 .cb2-spec > summary i::after {
    content: ''; position: absolute; background: var(--gold, #C4A882);
    left: 50%; top: 50%; transform: translate(-50%, -50%);
}
#cb2 .cb2-spec > summary i::before { width: 14px; height: 1.5px; }
#cb2 .cb2-spec > summary i::after  { width: 1.5px; height: 14px; transition: opacity .2s; }
#cb2 .cb2-spec[open] > summary i::after { opacity: 0; }
#cb2 .cb2-spec-in { padding: 0 16px 14px; }
#cb2 .cb2-spec-in .r {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 9px 0; border-top: 1px solid var(--gray-light, #E4DBD1);
    font-size: 13.5px;
}
#cb2 .cb2-spec-in .k { color: var(--gray, #8B7E74); flex: 0 0 auto; }
#cb2 .cb2-spec-in .v { color: var(--charcoal, #2C2421); text-align: right; }

/* ─── BANDE DE BÉNÉFICES (faits produit, jamais une promesse) ────── */
#cb2 .cb2-benef {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
    padding: 20px 12px;
    background: var(--cream-2, #F7F2EA);
    border-radius: 12px;
}
#cb2 .cb2-benef .bn { text-align: center; }
#cb2 .cb2-benef .med {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; margin: 0 auto 10px;
    background: #fff; border-radius: 50%;
}
#cb2 .cb2-benef .med svg { width: 21px; height: 21px; color: var(--gold, #C4A882); }
#cb2 .cb2-benef b {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px; font-weight: 500;
    color: var(--charcoal, #2C2421);
    line-height: 1.25;
}
#cb2 .cb2-benef em {
    display: block; font-style: normal; margin-top: 4px;
    font-size: 12.5px; line-height: 1.4; color: var(--gray, #8B7E74);
}

/* ─── LIGNE MÉTA ────────────────────────────────────────────────── */
#cb2 .cb2-meta {
    display: flex; flex-wrap: wrap; gap: 4px 18px;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--gray-light, #E4DBD1);
    font-size: 12.5px; color: var(--gray, #8B7E74);
}
#cb2 .cb2-meta a { color: var(--gold, #C4A882); text-decoration: underline; }

/* ─── BLOCS ÉDITORIAUX PAR PRODUIT ──────────────────────────────── */
#cb2 .cb2-blocs { max-width: 780px; margin: 8px auto 0; padding: 0 16px; }
#cb2 .cb2-bloc { margin: 44px 0; }
#cb2 .cb2-bloc img {
    width: 100%; height: auto; display: block;
    border-radius: 14px; margin-bottom: 22px;
}
#cb2 .cb2-bloc h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px; font-weight: 500; line-height: 1.2;
    color: var(--charcoal, #2C2421); margin: 0 0 14px;
}
#cb2 .cb2-bloc p {
    font-size: 15.5px; line-height: 1.72;
    color: var(--gray, #8B7E74); margin: 0 0 16px;
}
#cb2 .cb2-bloc p strong { color: var(--charcoal, #2C2421); font-weight: 600; }
#cb2 .cb2-bloc figure { margin: 26px 0; text-align: center; }
#cb2 .cb2-bloc figcaption {
    margin-top: 10px; font-size: 12.5px; color: var(--gray, #8B7E74);
}

/* ─── « AVANT DE COMMANDER / BON À SAVOIR » ─────────────────────── */
#cb2 .cb2-know { max-width: 780px; margin: 48px auto 0; padding: 0 16px; }
#cb2 .cb2-know-head { text-align: center; margin-bottom: 22px; }
#cb2 .cb2-know-head .cb2-eyebrow { display: block; margin-bottom: 6px; }
#cb2 .cb2-know-head h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 30px; font-weight: 500; margin: 0;
    color: var(--charcoal, #2C2421);
}
#cb2 .cb2-know-head h2 em { font-style: italic; color: var(--gold, #C4A882); }
#cb2 .cb2-know details { border-bottom: 1px solid var(--gray-light, #E4DBD1); }
#cb2 .cb2-know details:first-of-type { border-top: 1px solid var(--gray-light, #E4DBD1); }
#cb2 .cb2-know summary {
    display: flex; align-items: center; gap: 11px;
    padding: 17px 2px; cursor: pointer; list-style: none;
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px; color: var(--charcoal, #2C2421);
}
#cb2 .cb2-know summary::-webkit-details-marker { display: none; }
#cb2 .cb2-know summary svg { width: 20px; height: 20px; color: var(--gold, #C4A882); flex: 0 0 auto; }
#cb2 .cb2-know summary .t { flex: 1; }
#cb2 .cb2-know summary i { width: 14px; height: 14px; position: relative; flex: 0 0 auto; }
#cb2 .cb2-know summary i::before,
#cb2 .cb2-know summary i::after {
    content: ''; position: absolute; background: var(--gold, #C4A882);
    left: 50%; top: 50%; transform: translate(-50%, -50%);
}
#cb2 .cb2-know summary i::before { width: 14px; height: 1.5px; }
#cb2 .cb2-know summary i::after  { width: 1.5px; height: 14px; transition: opacity .2s; }
#cb2 .cb2-know details[open] summary i::after { opacity: 0; }
#cb2 .cb2-know .b { padding: 0 2px 20px; font-size: 14.5px; line-height: 1.7; color: var(--gray, #8B7E74); }
#cb2 .cb2-know .b p { margin: 0 0 12px; }
#cb2 .cb2-know .b a { color: var(--gold, #C4A882); text-decoration: underline; }
#cb2 .cb2-know .b strong { color: var(--charcoal, #2C2421); }

/* ─── DESKTOP ───────────────────────────────────────────────────── */
@media (min-width: 901px) {
    #cb2 .cb2-blocs, #cb2 .cb2-know { padding: 0 24px; }
    #cb2 .cb2-bloc { margin: 60px 0; }
    #cb2 .cb2-bloc h2 { font-size: 34px; }
    #cb2 .cb2-know { margin-top: 64px; }
}

/* ─── « + » PARASITE ────────────────────────────────────────────────
   common.css l.1192 pose un `details > summary::after { content:'+' }`
   GLOBAL. Nos accordéons ont déjà leur propre indicateur <i> : sans ça
   on affiche deux « + », dont un qui déborde du cadre. */
#cb2 .cb2-spec > summary::after,
#cb2 .cb2-know summary::after { content: none !important; display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   V9 — DISPOSITION LUVENTA, 3 septembre 2026
   Ajouts : sous-titre catégorie, « En stock », mention fiscale collée
   au prix, encadré « Points clés », lien Guide, et surtout la mise en
   page ZIGZAG des blocs éditoriaux (2 colonnes alternées pleine
   largeur, fonds alternés) que la V8 n'avait pas : .cb2-bloc y était
   une simple colonne de 780 px, image au-dessus du texte.
   ══════════════════════════════════════════════════════════════════ */

/* ── Colonne d'achat : titre → sous-titre → stock → prix ───────────── */
#cb2 .cb2-sub {
    margin: 6px 0 0; font-family:'Inter',sans-serif; font-size:11.5px; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase; color:var(--gold,#C4A882);
}
#cb2 .cb2-stock {
    margin-top:12px; font-size:13px; color:var(--gray,#8B7E74);
    display:flex; align-items:center; gap:7px;
}
#cb2 .cb2-stock::before {
    content:''; width:7px; height:7px; border-radius:50%; background:#4A7C59; flex:0 0 auto;
}
#cb2 .cb2-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; }
#cb2 .cb2-price .cb2-vat {
    font-family:'Inter',sans-serif; font-size:11.5px; font-weight:400; line-height:1.3;
    letter-spacing:0; text-transform:none; color:var(--gray,#8B7E74);
}

/* ── Encadré « Points clés » (Luventa : « — KEY FEATURES — ») ───────
   La description courte y est affichée ENTIÈRE : plus de coupe à 150
   caractères, donc plus de « … » en fin de phrase. */
#cb2 .cb2-keys {
    margin-top:18px; padding:18px 18px 16px; background:var(--cream-2,#F7F2EA);
    border:1px solid var(--gray-light,#E4DBD1); border-radius:12px;
}
#cb2 .cb2-keys-h { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
#cb2 .cb2-keys-h::before, #cb2 .cb2-keys-h::after {
    content:''; flex:1; height:1px; background:var(--gray-light,#E4DBD1);
}
#cb2 .cb2-keys-h span {
    font-family:'Inter',sans-serif; font-size:10.5px; font-weight:600;
    letter-spacing:.16em; text-transform:uppercase; color:var(--gold,#C4A882);
}
#cb2 .cb2-keys p { margin:0; font-size:14.5px; line-height:1.68; color:var(--charcoal,#2C2421); }

/* ── Lien « Guide des tailles » sous le bouton d'achat ─────────────── */
#cb2 .cb2-guide { margin:10px 0 0; font-size:13px; text-align:center; }
#cb2 .cb2-guide a { color:var(--gray,#8B7E74); text-decoration:underline; text-underline-offset:3px; }
#cb2 .cb2-guide a:hover { color:var(--gold,#C4A882); }

/* ══ BLOCS ÉDITORIAUX EN ZIGZAG ════════════════════════════════════
   Luventa : 3 sections pleine largeur, image d'un côté, texte de
   l'autre, sens inversé un bloc sur deux, fonds alternés crème/blanc.
   On sort donc de la contrainte 780 px héritée de la V8. */
#cb2 .cb2-blocs { max-width:none; margin:52px 0 0; padding:0; }
#cb2 .cb2-bloc {
    margin:0; padding:0; background:#fff;
    display:grid; grid-template-columns:1fr; gap:0;
}
#cb2 .cb2-bloc.droite { background:var(--cream-2,#F7F2EA); }
#cb2 .cb2-bloc .im { margin:0; }
#cb2 .cb2-bloc .im img {
    width:100%; height:100%; min-height:260px; object-fit:cover;
    display:block; border-radius:0; margin:0;
}
#cb2 .cb2-bloc .tx { padding:34px 20px 40px; align-self:center; }
#cb2 .cb2-bloc h2 {
    font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:500; line-height:1.18;
    color:var(--charcoal,#2C2421); margin:0 0 14px;
}
#cb2 .cb2-bloc p { font-size:15.5px; line-height:1.72; color:var(--gray,#8B7E74); margin:0 0 12px; }
#cb2 .cb2-bloc p:last-child { margin-bottom:0; }
#cb2 .cb2-bloc p strong { color:var(--charcoal,#2C2421); font-weight:600; }
#cb2 .cb2-bloc .lk a { color:var(--gold,#C4A882); text-decoration:underline; text-underline-offset:3px; font-size:14px; }

@media (min-width:901px) {
    #cb2 .cb2-blocs { margin-top:72px; padding:0; }
    #cb2 .cb2-bloc { grid-template-columns:1fr 1fr; align-items:stretch; }
    #cb2 .cb2-bloc .im img { min-height:420px; }
    /* un bloc sur deux : le texte passe à gauche, l'image à droite */
    #cb2 .cb2-bloc.droite .im { grid-column:2; grid-row:1; }
    #cb2 .cb2-bloc.droite .tx { grid-column:1; grid-row:1; }
    #cb2 .cb2-bloc .tx { padding:56px 62px; }
    #cb2 .cb2-bloc.gauche .tx { padding-right:76px; }
    #cb2 .cb2-bloc.droite .tx { padding-left:76px; }
    #cb2 .cb2-bloc h2 { font-size:34px; }
}

/* ── Barre d'achat collante : mobile uniquement ─────────────────────
   Luventa n'en a pas sur grand écran ; en mobile c'est un raccourci de
   navigation utile, sans argument commercial (ni promo ni urgence). */
@media (min-width:901px) { #cb2-sticky { display:none !important; } }