/**
* NCPACK — Composeur de pack pour fiche produit.
*
* Toutes les classes sont préfixées .NCPACK-* pour éviter tout conflit avec
* le thème PrestaShop. CSS auto-portant : pas de dépendance à Bootstrap / un
* framework externe — seule la police est héritée du thème (font-family: inherit).
*/
.NCPACK, .NCPACK *, .NCPACK *::before, .NCPACK *::after { box-sizing: border-box; font-family: inherit; }
.NCPACK {
/* Variables legacy (conservees — styles de layout existants) */
--nc-ink: #1a1a1a; --nc-ink-soft: #555; --nc-muted: #888; --nc-line: #e5e7eb;
--nc-bg: #fafafa; --nc-bg-soft: #f2f2f2; --nc-sel: #111;
--nc-ok: #1a7a3a; --nc-ko: #dc2626; --nc-radius: 6px;
/* Palette stricte v2 (specs Lionel 2026-04-24) — referencee par les
nouvelles classes prix, chips, tooltip stock et recap lateral. */
--nc-pvp: #4b5563; /* PVP barre (gris fonce) */
--nc-promo-struck: #f87171; /* Promo barree (rose-rouge attenue) */
--nc-red: #dc2626; /* Prix actif / promo / pack / offert */
--nc-label: #6b7280; /* Label "Prix pack" (11px uppercase) */
--nc-card-bg: #f9fafb; /* Fond carte produit */
--nc-pack-bg: #fee2e2; /* Fond bloc "Prix pack" du recap */
--nc-cta: #facc15; /* Jaune CTA (pastille panier topbar) */
--nc-cta-hover: #eab308; /* Jaune CTA hover */
--nc-recap-head: #1f2937; /* Bandeau noir "VOTRE PACK" */
--nc-green: #16a34a; /* Stock OK (vert) */
--nc-orange: #ea580c; /* Stock faible (orange) */
/* Fond neutre pour faire ressortir les cartes composants en blanc.
Aligne sur la maquette Lionel (#f3f4f6). */
width: 100%; margin: 40px 0px 0px; padding: 20px; background: #f3f4f6;
border: 1px solid var(--nc-line); border-radius: var(--nc-radius);
color: var(--nc-ink); line-height: 1.45; font-size: 14px;
}
.NCPACK[data-status="broken"] { border-color: #f5c2ba; }
.NCPACK-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 6px; flex-wrap: wrap; }
.NCPACK-title { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.NCPACK-title small { font-weight: 400; color: var(--nc-muted); font-size: 13px; margin-left: 8px; letter-spacing: 0; }
.NCPACK-save { font-size: 13px; color: var(--nc-ink-soft); background: var(--nc-hl); padding: 3px 8px; border-radius: 2px; white-space: nowrap; }
.NCPACK-sub { margin: 0 0 20px; font-size: 13px; color: var(--nc-ink-soft); }
.NCPACK-grid { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .NCPACK-grid { grid-template-columns: 1fr; } }
.NCPACK-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* Bloc composant = carte blanche lift sur le fond gris. Ombre double pour
profondeur (ombre courte + ombre diffuse, style Material/Tailwind).
Pattern collapsible (kitemana/flysurf) : fermé par défaut, résumé de la
sélection dans le header, clic sur head pour ouvrir/fermer. */
.NCPACK-block {
border: 1px solid var(--nc-line); border-radius: var(--nc-radius);
background: #fff; overflow: hidden;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
transition: box-shadow .15s;
}
.NCPACK-block[data-collapsed="false"] { box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.06); }
.NCPACK-block[data-collapsed="true"] .NCPACK-block-body { display: none; }
.NCPACK-block-head {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px; background: #fff;
cursor: pointer; user-select: none;
transition: background .12s;
}
.NCPACK-block-head:hover { background: #fafbfc; }
.NCPACK-block[data-collapsed="false"] .NCPACK-block-head { border-bottom: 1px solid var(--nc-line); }
.NCPACK-block-body { padding: 12px; background: #fafbfc; }
.NCPACK-block-title { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nc-ink); flex: 0 0 auto; }
/* Résumé de sélection basculé à droite du header (menu principal).
Pas de prix ici — le prix reste dans chaque ligne composant du body qui
s'ouvre. Gris si rien choisi, noir si choisi, rouge italique si manquant. */
.NCPACK-block-summary {
font-size: 13px; font-weight: 500;
color: var(--nc-muted);
min-width: 0; flex: 1 1 auto;
text-align: right;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-transform: none; letter-spacing: 0;
}
.NCPACK-block-summary.is-selected { color: var(--nc-ink); }
.NCPACK-block-summary.is-missing { color: var(--nc-ko); font-style: italic; }
.NCPACK-block-chevron { width: 16px; height: 16px; color: var(--nc-muted); transition: transform .2s; flex: 0 0 auto; display: inline-flex; align-items: center; }
.NCPACK-block[data-collapsed="false"] .NCPACK-block-chevron { transform: rotate(180deg); }
.NCPACK-block-hint { font-size: 12px; color: var(--nc-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.NCPACK-required { color: var(--nc-ko); font-weight: 700; margin-left: 4px; }
.NCPACK-thumb { width: 48px; height: 48px; border-radius: var(--nc-radius); background: var(--nc-bg-soft) center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: var(--nc-muted); font-size: 10px; text-align: center; padding: 4px; flex: 0 0 auto; line-height: 1.2; }
.NCPACK-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
/* Bloc composant unique obligatoire — même structure interne que .NCPACK-choice
pour alignement parfait des photos entre tous les types de blocs. */
.NCPACK-item {
position: relative;
display: grid;
grid-template-columns: 20px 48px 1fr auto;
gap: 12px;
align-items: center;
padding: 8px 12px;
border: 1px solid var(--nc-sel);
background: #fff;
border-radius: var(--nc-radius);
min-width: 0;
}
.NCPACK-item > * { min-width: 0; }
.NCPACK-name { font-size: 14px; font-weight: 600; margin: 0 0 2px; }
.NCPACK-desc { font-size: 12px; color: var(--nc-ink-soft); margin: 0; }
.NCPACK-price-col { text-align: right; font-size: 12px; white-space: nowrap; }
.NCPACK-price-col .amount { font-weight: 700; font-size: 14px; }
.NCPACK-price-col .strike { display: block; color: var(--nc-muted); text-decoration: line-through; font-size: 11px; font-weight: 400; margin-bottom: 2px; }
.NCPACK-choices { display: grid; gap: 10px; }
.NCPACK-choices[data-display-mode="list"] { grid-template-columns: 1fr; }
.NCPACK-choices[data-display-mode="grid"] { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.NCPACK-choice { position: relative; display: grid; grid-template-columns: 20px 48px 1fr auto; gap: 12px; align-items: center; padding: 8px 12px; border: 1px solid var(--nc-line); border-radius: var(--nc-radius); cursor: pointer; background: #fff; transition: border-color .12s, background .12s, box-shadow .12s; min-width: 0; }
/* Carte verticale (affichage grid/bloc) : thumb+nom en haut, dropdown au
milieu, prix poussé en bas via `margin-top: auto` sur le price-col. */
.NCPACK-choice.NCPACK-choice--grid {
display: flex; flex-direction: column; gap: 6px;
grid-template-columns: none;
align-items: stretch; padding: 12px;
}
.NCPACK-choice-grid-head {
display: flex; align-items: flex-start; gap: 10px; min-width: 0;
}
.NCPACK-choice-grid-head .NCPACK-thumb { width: 40px; height: 40px; }
.NCPACK-choice-grid-info { min-width: 0; flex: 1 1 auto; }
.NCPACK-choice--grid .NCPACK-choice-price {
align-self: stretch;
/* Prix TOUJOURS en bas a droite (regle Lionel 2026-04-22). `margin-top:
auto` eat tout l'espace vertical disponible → pousse au bas de la carte.
Associe a `align-items: stretch` du grid parent (par defaut), les cartes
dans une meme rangee ont la meme hauteur, donc les prix sont alignes
horizontalement en bas. */
margin-top: auto;
padding-top: 0;
text-align: right;
display: flex; flex-direction: column; align-items: flex-end; gap: 0;
}
/* Dropdown en grid : largeur auto (juste ce qu'il faut pour le label) et
aligne a droite. Remplace l'ancien `width: 100%` qui etendait le select
sur toute la carte. */
.NCPACK-choice--grid .NCPACK-combination-select {
margin-top: 0;
align-self: flex-end;
width: auto; max-width: none;
min-width: 72px;
}
.NCPACK-choice > * { min-width: 0; }
.NCPACK-choice:hover:not(.is-disabled) { border-color: #bbb; }
.NCPACK-choice.is-selected { border-color: var(--nc-sel); background: #fff; }
.NCPACK-choice.is-disabled { opacity: 0.55; cursor: not-allowed; background: var(--nc-bg-soft); }
.NCPACK-choice input { position: absolute; opacity: 0; pointer-events: none; }
.NCPACK-choice .NCPACK-thumb { width: 48px; height: 48px; }
.NCPACK-choice-name { font-size: 14px; font-weight: 600; margin: 0 0 2px; }
.NCPACK-choice-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; font-size: 12px; color: var(--nc-ink-soft); }
.NCPACK-choice-ref { color: var(--nc-muted); font-size: 11px; }
/* Col prix alignée en haut (avec le libellé produit) — `align-self: start`
surclasse l'`align-items: center` de la grille uniquement sur cette colonne
pour garder dot/thumb verticalement centrés. */
.NCPACK-choice-price { text-align: right; font-size: 12px; white-space: nowrap; align-self: start; padding-top: 2px; }
.NCPACK-choice-price .amount { font-weight: 700; font-size: 14px; }
.NCPACK-choice-price .strike { display: block; color: var(--nc-muted); text-decoration: line-through; font-size: 11px; font-weight: 400; }
.NCPACK-choice-price .delta { color: var(--nc-muted); display: block; margin-top: 2px; font-size: 11px; }
.NCPACK-accs { display: flex; flex-direction: column; gap: 8px; }
.NCPACK-acc { position: relative; display: grid; grid-template-columns: 20px 48px 1fr auto; gap: 12px; align-items: center; padding: 8px 12px; border: 1px solid var(--nc-line); border-radius: var(--nc-radius); cursor: pointer; background: #fff; transition: border-color .12s, background .12s; }
.NCPACK-acc:hover:not(.is-disabled) { border-color: #bbb; }
.NCPACK-acc.is-checked { border-color: var(--nc-sel); background: #fff; }
.NCPACK-acc.is-disabled { opacity: 0.55; cursor: not-allowed; background: var(--nc-bg-soft); }
.NCPACK-acc input { position: absolute; opacity: 0; pointer-events: none; }
.NCPACK-check { width: 20px; height: 20px; border: 1.5px solid #bbb; border-radius: 3px; display: flex; align-items: center; justify-content: center; background: #fff; color: transparent; font-size: 13px; font-weight: 700; line-height: 1; flex-shrink: 0; }
.NCPACK-acc.is-checked .NCPACK-check { background: var(--nc-sel); border-color: var(--nc-sel); color: #fff; }
/* Indicateur rond pour composants obligatoires / radios de choix —
même dimension que la case à cocher pour aligner parfaitement les photos. */
.NCPACK-dot {
width: 20px; height: 20px; border-radius: 50%;
border: 1.5px solid #bbb; background: #fff;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0; position: relative;
}
.NCPACK-dot.is-selected,
.NCPACK-dot.is-required {
border-color: var(--nc-sel);
}
.NCPACK-dot.is-selected::after,
.NCPACK-dot.is-required::after {
content: ''; width: 10px; height: 10px; border-radius: 50%;
background: var(--nc-sel);
}
.NCPACK-acc-name { font-size: 14px; font-weight: 600; margin: 0; }
.NCPACK-acc-desc { font-size: 12px; color: var(--nc-muted); margin: 2px 0 0; }
.NCPACK-acc-price { text-align: right; font-size: 13px; font-weight: 700; white-space: nowrap; align-self: start; padding-top: 2px; }
.NCPACK-acc-price .strike { display: block; color: var(--nc-muted); text-decoration: line-through; font-size: 11px; font-weight: 400; }
.NCPACK-stock { font-size: 11px; white-space: nowrap; font-weight: 500; }
.NCPACK-stock.is-ok { color: var(--nc-ok); }
.NCPACK-stock.is-low { color: #b8860b; }
.NCPACK-stock.is-ko { color: var(--nc-ko); }
/* Info stock placee sous le prix en colonne droite — display block pour
forcer le retour a la ligne apres `.NCPACK-price`, gap reduit au minimum
(1px) pour coller le stock au prix, regle Lionel 2026-04-22. */
.NCPACK-choice-price .NCPACK-stock,
.NCPACK-acc-price .NCPACK-stock,
.NCPACK-price-col .NCPACK-stock { display: block; margin-top: 1px; }
/* Dropdown declinaisons — utilisé uniquement par renderAcc (accessoires
optionnels). Les composants en liste (renderItem, renderChoice) utilisent
des pills. Livrables colorees en vert, rupture stricte en disabled. */
.NCPACK-combination-select {
display: inline-block; margin-top: 6px;
padding: 5px 8px; font-size: 12px;
border: 1px solid var(--nc-line); border-radius: 4px;
background: #fff; color: var(--nc-ink);
cursor: pointer; max-width: 240px;
}
.NCPACK-combination-select:focus { outline: 2px solid var(--nc-sel); outline-offset: 1px; }
.NCPACK-combination-select option:disabled { color: var(--nc-muted); }
/* Selecteurs multi-attributs (regle Lionel 2026-04-23) : une ligne par dimension
d'attribut (Modele, Couleur, Taille...). Chaque ligne : label a gauche +
selecteur a droite (dropdown en display_mode=grid, pills en list). */
.NCPACK-attrs { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.NCPACK-attr-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.NCPACK-attr-label {
font-size: 12px; font-weight: 600; color: var(--nc-ink);
min-width: 60px; flex: 0 0 auto;
}
.NCPACK-attr-row--grid .NCPACK-combination-select { margin-top: 0; flex: 1 1 auto; max-width: none; }
.NCPACK-attr-row--list .NCPACK-pills { margin-top: 0; flex: 1 1 auto; }
/* Pills e-commerce (pattern Decathlon/Nike) — utilise par renderItem et
renderChoice. Chaque pill = une taille/variante, selection visuelle par
bordure accent orange, "X restants" en rouge sous le label si stock faible,
strike-through + disabled si rupture, "sur commande" en bleu si backorder. */
.NCPACK-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.NCPACK-pill {
display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
min-width: 44px; padding: 4px 8px;
border: 1px solid var(--nc-line); border-radius: 5px;
background: #fff; color: var(--nc-ink);
font-family: inherit; font-size: 12px; font-weight: 600;
cursor: pointer; user-select: none;
transition: border-color .12s, box-shadow .12s, background .12s;
}
.NCPACK-pill:hover:not([disabled]) { border-color: var(--nc-sel); }
.NCPACK-pill.is-selected {
/* Cadre noir fin (1px, meme epaisseur que le defaut → pas de compensation
padding). Differenciation par couleur du cadre + fond legerement tinte. */
border-color: var(--nc-sel);
background: var(--nc-bg);
font-weight: 700;
}
/* Disabled : fond interieur leger (gris tres clair), bordure plus soutenue
pour quand meme signaler l'etat inactif, texte barre. Regle Lionel
2026-04-22 : "fond gris interieur plus leger". */
.NCPACK-pill[disabled] {
cursor: not-allowed;
color: #888; background: #f1f3f5; border-color: #9ca3af;
text-decoration: line-through;
}
.NCPACK-pill-label { font-size: 12px; font-weight: 600; line-height: 1.1; }
.NCPACK-pill-stock {
font-size: 9px; font-weight: 700; color: #c43e1a;
letter-spacing: .02em; line-height: 1.1; margin-top: 2px;
text-transform: uppercase; white-space: nowrap;
}
.NCPACK-pill-stock.is-backorder { color: #0284c7; }
/* Pill vignette couleur (swatch) — attributs de type 'color' avec image ou
hex sur ps_attribute. La pill devient carre compact centre autour de la
vignette ; le nom de la valeur reste dans title/aria-label pour l'access. */
.NCPACK-pill--swatch { padding: 3px; min-width: 0; }
.NCPACK-swatch {
display: block; width: 28px; height: 28px;
border-radius: 50%; overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
background: #fff center/cover no-repeat;
}
.NCPACK-swatch--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.NCPACK-pill--swatch.is-selected .NCPACK-swatch { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
/* Rupture sur un swatch : barre diagonale a travers la vignette (le
line-through du label texte ne s'applique pas a la vignette). */
.NCPACK-pill--swatch[disabled] .NCPACK-swatch {
opacity: 0.55;
background-image: linear-gradient(to bottom right, transparent calc(50% - 1px), #c43e1a calc(50% - 1px), #c43e1a calc(50% + 1px), transparent calc(50% + 1px));
}
/* Affichage des prix selon price_display_type — style flysurf :
PVP barré discret, prix public en évidence, prix promo en rouge vif,
prix pack en noir appuyé. Toujours sur une seule ligne (is-inline) pour
libérer la ligne du dessous pour l'info stock. Le prix final (promo/pack)
est celui qui compte le plus, d'où taille + contraste appuyés. */
.NCPACK-price.is-stacked,
.NCPACK-price.is-inline { display: inline-flex; gap: 8px; align-items: baseline; flex-wrap: nowrap; justify-content: flex-end; white-space: nowrap; }
.NCPACK-price-strike { text-decoration: line-through; color: var(--nc-muted); font-size: 13px; font-weight: 400; }
.NCPACK-price-main { font-size: 16px; font-weight: 800; color: var(--nc-ink); letter-spacing: -0.01em; }
.NCPACK-price-promo { font-size: 16px; font-weight: 800; color: var(--nc-ko); letter-spacing: -0.01em; }
.NCPACK-price-pack { font-size: 16px; font-weight: 800; color: var(--nc-sel); letter-spacing: -0.01em; }
.NCPACK-price-supp { font-size: 16px; font-weight: 800; color: var(--nc-ink); letter-spacing: -0.01em; }
/* Recap lateral — refonte selon la maquette Lionel 2026-04-22 :
header sombre + liste articles + calcul + remise + total orange gradient. */
.NCPACK-side {
position: sticky; top: 60px;
border: 1px solid var(--nc-line); border-radius: 12px;
background: #fff; overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 1px 3px rgba(15,39,68,0.04);
}
@media (max-width: 900px) { .NCPACK-side { position: static; order: 2; } }
/* Header sombre */
.NCPACK-side-head {
background: var(--nc-sel); color: #fff;
padding: 14px 20px;
display: flex; align-items: center; justify-content: space-between;
}
.NCPACK-side-title { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 2px; color: #fff; text-transform: uppercase; }
.NCPACK-side-count { font-size: 11px; color: #b4bccb; font-weight: 500; }
/* Corps */
.NCPACK-side-body { padding: 16px 20px 18px; }
/* Liste articles */
.NCPACK-lines { display: flex; flex-direction: column; }
.NCPACK-line { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; font-size: 13px; border-bottom: 1px dashed #eef1f6; gap: 10px; }
.NCPACK-line:last-child { border-bottom: 0; }
.NCPACK-line.is-optional { color: #4a5568; }
.NCPACK-line-label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; color: #4a5568; }
.NCPACK-line-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.NCPACK-line-rm { width: 16px; height: 16px; flex: 0 0 auto; border: 1px solid var(--nc-line); border-radius: 50%; background: #fff; color: var(--nc-ink-soft); font-size: 10px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-family: inherit; }
.NCPACK-line-rm:hover { background: var(--nc-sel); color: #fff; border-color: var(--nc-sel); }
.NCPACK-line-price { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; color: var(--nc-ink); }
/* Ligne fine de separation entre composants obligatoires et options
(regroupees en bas de la liste). */
.NCPACK-lines-sep {
height: 1px; background: var(--nc-line);
margin: 4px 0;
}
/* Bloc calcul "Prix a l'unite" — top border noir 2px */
.NCPACK-side-calc {
margin-top: 14px;
padding: 10px 0 6px;
border-top: 2px solid var(--nc-sel);
display: flex; justify-content: space-between; align-items: baseline;
font-size: 14px; font-weight: 700; color: var(--nc-ink);
}
.NCPACK-side-calc-value { font-variant-numeric: tabular-nums; font-size: 15px; }
/* Remise pack — entre deux lines, texte rouge accent */
.NCPACK-side-savings {
padding: 12px 0;
border-top: 1px solid var(--nc-line);
border-bottom: 1px solid var(--nc-line);
display: flex; justify-content: space-between; align-items: center;
}
.NCPACK-side-savings-label { font-size: 14px; font-weight: 700; color: #e44c14; }
.NCPACK-side-savings-amount { font-size: 15px; font-weight: 700; color: #e44c14; font-variant-numeric: tabular-nums; }
/* Bloc total prix pack — gradient orange */
.NCPACK-side-total {
background: linear-gradient(135deg, #fff5f0, #ffe4d3);
border-radius: 10px; padding: 14px 18px;
margin: 14px 0;
display: flex; justify-content: space-between; align-items: center;
}
.NCPACK-side-total-label { display: flex; flex-direction: column; }
.NCPACK-side-total-title { font-size: 14px; font-weight: 700; color: var(--nc-ink); }
.NCPACK-side-total-sub { font-size: 11px; color: #e44c14; font-weight: 600; margin-top: 2px; }
.NCPACK-side-total-amount { font-size: 28px; font-weight: 800; color: #e44c14; letter-spacing: -0.6px; font-variant-numeric: tabular-nums; }
/* CTA jaune (palette v2 Lionel — coherent avec pastille panier topbar).
Fond #facc15, texte noir, hover #eab308. Desactivation passe en gris. */
.NCPACK-cta {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: calc(100% - 32px);
margin: 0 16px 16px;
padding: 14px;
background: var(--nc-cta); color: var(--nc-recap-head);
border: 0; border-radius: 8px;
font-family: inherit; font-size: 15px; font-weight: 700;
cursor: pointer;
transition: background .15s, transform .08s;
}
.NCPACK-cta:active { transform: translateY(1px); }
.NCPACK-cta:hover { background: var(--nc-cta-hover); }
.NCPACK-cta:disabled { background: #d1d5db; color: #6b7280; cursor: not-allowed; }
.NCPACK-cta-sub { font-size: 11.5px; color: var(--nc-muted); text-align: center; margin: 8px 0 0; font-style: italic; }
/* Liens cliquables sur nom/image des composants (v1.0.6) — ouverture fiche produit en nouvel onglet.
Se fondent dans le design existant : couleur heritee du parent, souligne au hover uniquement.
Le qui wrappe un .NCPACK-thumb laisse le thumb porter ses dimensions (48x48) —
display:inline-block suffit pour que le epouse la taille du thumb interne. */
.NCPACK-product-link { color: inherit; text-decoration: none; display: inline-block; }
.NCPACK-product-link:hover,
.NCPACK-product-link:focus { text-decoration: underline; color: inherit; }
.NCPACK-choice-name .NCPACK-product-link,
.NCPACK-acc-name .NCPACK-product-link { display: inline; }
.NCPACK-alert { font-size: 12px; color: var(--nc-ko); background: #fdecea; border: 1px solid #f5c2ba; padding: 8px 10px; border-radius: var(--nc-radius); text-align: center; margin: 0 16px 10px; }
/* =============================================================================
REFONTE v2 (Lionel 2026-04-24) — nouvelles classes emises par ncpack.js v2.
Les classes legacy (.NCPACK-price-strike/main/promo/pack/supp, .NCPACK-lines,
.NCPACK-side-calc*, .NCPACK-side-savings*, .NCPACK-side-total*, .NCPACK-pill-stock)
restent dans le fichier mais ne sont plus emises par le JS — maintenues pour
compatibilite descendante au cas ou un theme heriterait ces selecteurs.
============================================================================= */
/* ------- A. Bloc prix gauche (par composant) ---------------------------- */
/* Ligne horizontale PVP + promo (meme ligne). Align baseline pour que les
nombres restent alignes meme si les tailles de police different. */
.NCPACK-price-row { display: flex; align-items: baseline; gap: 8px; }
/* PVP barre (modes 2/3 quand promo ou remise pack presente) */
.NCPACK-pvp {
color: var(--nc-pvp); text-decoration: line-through;
font-size: 13px; font-weight: 500; white-space: nowrap;
}
/* PVP sans promo ni remise pack — cas degrade du mode 2 (affiche PVP en rouge) */
.NCPACK-pvp-alone {
color: var(--nc-red); font-weight: 700; font-size: 17px; white-space: nowrap;
}
/* Promo active (mode 2 : remise pack absente → la promo est LE prix final) */
.NCPACK-promo-active {
color: var(--nc-red); font-weight: 700; font-size: 17px; white-space: nowrap;
}
/* Promo barree (mode 3 : remise pack presente → la promo est barree sous le PVP) */
.NCPACK-promo-struck {
color: var(--nc-promo-struck); text-decoration: line-through;
font-size: 13px; font-weight: 500; white-space: nowrap;
}
/* Bloc "PRIX PACK" + montant (modes 3/4/5 avec remise pack specifique) */
.NCPACK-pack {
color: var(--nc-red); font-weight: 700; font-size: 17px;
display: flex; align-items: baseline; gap: 6px;
white-space: nowrap;
}
.NCPACK-pack-label {
color: var(--nc-label);
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.4px;
}
/* Prix courant sans label (modes 4/5 sans remise pack specifique) */
.NCPACK-price-current {
color: var(--nc-red); font-weight: 700; font-size: 17px; white-space: nowrap;
}
/* Tag "Offert" (is_offered=1). show_reference_price=1 → precede d'un PVP barre
sur la meme ligne via .NCPACK-price-row. */
.NCPACK-offert-tag {
color: var(--nc-red); font-weight: 700; font-size: 17px;
text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap;
}
/* ------- B. Chips variation (tooltip stock + rupture) ------------------- */
/* Tooltip CSS positionne via [data-stock]:hover::after (apparait au survol).
Marque .NCPACK-pill--out ajoutee par buildAttributePills si state=out_of_stock.
Complete .NCPACK-pill[disabled] qui reste utilise pour "pas de combi possible
avec les autres selections" (grise mais pas forcement out_of_stock). */
.NCPACK-pill { position: relative; }
.NCPACK-pill--out,
.NCPACK-pill--out[disabled] {
cursor: not-allowed;
color: #d1d5db; background: #f9fafb; border-color: #e5e7eb;
text-decoration: line-through;
}
/* Le swatch (pill couleur) n'a pas de texte a barrer : on garde l'effet
degrade + diagonal des pills disabled (deja defini ligne 258). */
.NCPACK-pill[data-stock]:hover::after {
content: attr(data-stock);
position: absolute;
bottom: calc(100% + 6px); left: 50%;
transform: translateX(-50%);
background: var(--nc-recap-head); color: #fff;
padding: 4px 8px; border-radius: 4px;
font-size: 11px; font-weight: 500; white-space: nowrap;
z-index: 10; pointer-events: none;
text-decoration: none; text-transform: none; letter-spacing: 0;
}
.NCPACK-pill[data-stock]:hover::before {
content: '';
position: absolute;
bottom: 100%; left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-top-color: var(--nc-recap-head);
z-index: 10; pointer-events: none;
}
/* ------- C. Titre produit clampe 2 lignes ------------------------------- */
/* Pattern "NOM — variation" peut deborder sur libelles longs. Tronque 2 lignes ;
le title natif (ajoute par nameEl) fournit le tooltip du texte complet. */
.NCPACK-choice-name,
.NCPACK-acc-name {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
}
/* ------- D. Stock en bas du bloc prix (palette v2) ---------------------- */
/* Ajuste les teintes vert/orange/rouge sur la palette stricte Lionel. Les
regles legacy (.NCPACK-stock.is-ok/is-low/is-ko) restent en place — cette
surcharge s'applique en cascade. */
.NCPACK-stock.is-ok { color: var(--nc-green); }
.NCPACK-stock.is-low { color: var(--nc-orange); }
.NCPACK-stock.is-ko { color: var(--nc-red); }
/* ------- E. Recap lateral (refonte v2) ---------------------------------- */
/* Le nouveau JS emet [data-role="items"], [data-role="totals"],
[data-role="site-total"], [data-role="savings-row"], [data-role="savings-amount"].
L'ancien [data-role="lines" / "subtotal-*" / "savings"] n'est plus emis. */
/* Bandeau noir "VOTRE PACK" — palette Lionel */
.NCPACK-side { border-radius: 8px; }
.NCPACK-side-head {
background: var(--nc-recap-head); color: #fff;
padding: 14px 16px;
}
.NCPACK-side-title {
font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
color: #fff; text-transform: uppercase;
}
.NCPACK-side-count { font-size: 12px; color: #d1d5db; font-weight: 400; }
/* Zone items : prix en NOIR (pas rouge), label clampe 2 lignes + title natif */
.NCPACK-side-items { padding: 8px 16px; }
.NCPACK-side-items-sep { height: 1px; background: var(--nc-line); margin: 4px 0; }
.NCPACK-side-item {
display: grid; grid-template-columns: 1fr auto; gap: 12px;
align-items: start;
padding: 10px 0;
border-bottom: 1px dashed var(--nc-line);
}
.NCPACK-side-item:last-child { border-bottom: 0; }
.NCPACK-side-item-name {
font-size: 13px; color: var(--nc-recap-head); line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.NCPACK-side-item-price {
font-size: 13px; color: var(--nc-recap-head);
white-space: nowrap; font-weight: 500;
font-variant-numeric: tabular-nums;
}
.NCPACK-side-item-price--offert {
color: var(--nc-red); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.4px;
}
/* Bouton × de retrait d'accessoire optionnel */
.NCPACK-side-item-rm {
width: 16px; height: 16px;
margin-right: 6px;
border: 1px solid var(--nc-line); border-radius: 50%;
background: #fff; color: var(--nc-ink-soft);
font-size: 11px; line-height: 1;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
padding: 0; font-family: inherit;
vertical-align: middle;
}
.NCPACK-side-item-rm:hover {
background: var(--nc-recap-head); color: #fff;
border-color: var(--nc-recap-head);
}
/* Totaux : Prix site + Economie (rouge). */
.NCPACK-side-totals {
padding: 12px 16px;
border-top: 2px solid var(--nc-line);
}
.NCPACK-side-row {
display: flex; justify-content: space-between; align-items: center;
padding: 5px 0;
font-size: 14px; color: var(--nc-recap-head); font-weight: 500;
}
.NCPACK-side-row--savings { color: var(--nc-red); font-weight: 500; }
.NCPACK-side-row-value { font-variant-numeric: tabular-nums; }
/* Bloc rose "Prix pack" — toujours visible (y compris pack prix fixe pur). */
.NCPACK-side-pack {
margin: 14px 16px;
background: var(--nc-pack-bg);
border-radius: 8px;
padding: 14px 16px;
display: flex; justify-content: space-between; align-items: center;
gap: 12px;
}
.NCPACK-side-pack-label-wrap {
display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.NCPACK-side-pack-label {
font-weight: 600; font-size: 14px; color: var(--nc-recap-head);
}
.NCPACK-side-pack-sub {
font-size: 11px; font-weight: 600; color: var(--nc-red);
}
.NCPACK-side-pack-value {
font-weight: 800; font-size: 22px; color: var(--nc-red);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}