/*
* JDP Theme - V3 additions (refonte fidèle source-v3).
* Header / Footer / CartDrawer / Home parts / Article / Blog / Newsletter / refresh FAQ/Testimonials/Platforms.
* Chargé partout (composants partagés).
* @since 0.3.0
*/
/* ============================================================
* SECTION TITLE HELPERS (utilities partagées)
* ============================================================ */
.jdp-section-title--left { text-align: left; }
.jdp-section-title--light { color: var(--jdp-white); }
.jdp-container--narrow { max-width: 880px; margin: 0 auto; }
/* ============================================================
* HEADER REFONTE v3
* ============================================================ */
/* Promo strip */
.jdp-promo-strip {
background: var(--jdp-dark);
color: var(--jdp-white);
font-size: 13px;
font-weight: 500;
text-align: center;
padding: 8px 16px;
}
.jdp-promo-strip .jdp-container { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; align-items: center; }
.jdp-promo-text { display: inline-block; }
.jdp-promo-code {
background: var(--accent);
color: var(--jdp-white);
padding: 2px 8px;
border-radius: 4px;
font-weight: 700;
letter-spacing: 0.04em;
}
/* Utility row */
.jdp-utility-row {
background: var(--bg-soft);
border-bottom: 1px solid var(--jdp-separator);
font-size: 12px;
}
.jdp-utility-row-inner { padding: 8px 0; display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-5); }
.jdp-utility-nav { display: flex; align-items: center; gap: var(--sp-5); }
.jdp-utility-list { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--sp-4); }
.jdp-utility-list a { color: var(--fg2); text-decoration: none; transition: color var(--dur-fast); }
.jdp-utility-list a:hover { color: var(--accent); }
.jdp-utility-account-btn {
display: inline-flex; align-items: center; gap: 6px;
background: #FEF6E6;
color: var(--accent);
border: 1px solid #F4D78A;
border-radius: var(--radius-full);
padding: 5px 12px;
font-weight: 700;
font-size: 12px;
text-decoration: none;
transition: background var(--dur-fast), color var(--dur-fast);
}
.jdp-utility-account-btn:hover { background: var(--accent); color: var(--jdp-white); }
/* Main nav (mega menu) */
.jdp-mainnav {
background: var(--jdp-white);
border-bottom: 1px solid var(--jdp-separator);
position: sticky;
top: 0;
z-index: var(--z-sticky);
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.jdp-mainnav-inner {
padding: 16px 0;
display: flex;
align-items: center;
gap: var(--sp-8);
}
.jdp-mainnav-hamburger {
background: transparent;
border: 1px solid var(--jdp-separator);
border-radius: 10px;
padding: 9px;
cursor: pointer;
color: var(--jdp-dark);
display: none;
min-width: 44px;
min-height: 44px;
align-items: center;
justify-content: center;
}
.jdp-mainnav-logo { flex-shrink: 0; display: inline-block; }
.jdp-mainnav-logo img { height: 44px; width: auto; display: block; }
.jdp-mainnav-platforms {
display: flex;
gap: 4px;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
font-size: 14px;
font-weight: 500;
flex: 1;
justify-content: center;
}
.jdp-mainnav-platform { position: relative; }
.jdp-mainnav-platform-link {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: 0;
cursor: pointer;
font-family: inherit;
font-size: inherit;
font-weight: 500;
color: var(--jdp-dark);
padding: 10px 12px;
border-radius: 8px;
transition: color var(--dur-fast), background var(--dur-fast);
text-decoration: none;
}
.jdp-mainnav-platform-link:hover { color: var(--accent); background: var(--bg-soft); }
.jdp-mainnav-platform-chevron { opacity: 0.5; }
.jdp-mainnav-submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: var(--jdp-white);
border: 1px solid var(--jdp-separator);
border-radius: 12px;
box-shadow: 0 25px 50px rgba(0,0,0,0.15), 0 10px 20px rgba(0,0,0,0.08);
padding: 8px;
min-width: 320px;
margin-top: 4px;
z-index: var(--z-dropdown);
}
.jdp-mainnav-platform:hover .jdp-mainnav-submenu,
.jdp-mainnav-platform:focus-within .jdp-mainnav-submenu {
display: block;
}
.jdp-mainnav-submenu-item {
display: block;
padding: 9px 12px;
color: var(--jdp-dark);
text-decoration: none;
font-size: 13px;
font-weight: 500;
border-radius: 8px;
transition: background var(--dur-fast);
}
.jdp-mainnav-submenu-item:hover { background: var(--bg-soft); }
/* Cart button pill */
.jdp-cart-btn--pill {
flex-shrink: 0;
background: var(--jdp-black);
color: var(--jdp-white);
border: 0;
cursor: pointer;
border-radius: var(--radius-full);
padding: 10px 18px 10px 14px;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 700;
box-shadow: 0 6px 16px rgba(31,31,31,0.20);
transition: background var(--dur-normal), transform var(--dur-fast);
min-height: 44px;
}
.jdp-cart-btn--pill:hover { background: var(--jdp-dark); transform: translateY(-1px); }
.jdp-cart-btn-icon-wrap { position: relative; display: inline-flex; }
.jdp-cart-btn-badge {
position: absolute;
top: -7px;
right: -9px;
background: var(--jdp-white);
color: var(--accent);
border-radius: 999px;
min-width: 18px;
height: 18px;
padding: 0 4px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 800;
border: 2px solid var(--accent);
font-variant-numeric: tabular-nums;
}
.jdp-cart-btn-labels { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.jdp-cart-btn-label-mini { font-size: 11px; font-weight: 600; opacity: 0.9; }
.jdp-cart-btn-label-total { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* Mobile menu drawer */
.jdp-mobile-menu-backdrop {
position: fixed;
inset: 0;
/* Au-dessus du header sticky (--z-sticky = 200) pour couvrir toute la page,
mais sous le panneau du drawer : le film noir ne doit jamais recouvrir le menu. */
z-index: var(--z-overlay);
background: rgba(31,31,31,0.5);
border: 0;
padding: 0;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-normal);
}
.jdp-mobile-menu-backdrop.is-visible { opacity: 1; pointer-events: auto; }
.jdp-mobile-menu-drawer {
position: fixed;
top: 0;
left: 0;
bottom: 0;
/* Au-dessus du backdrop ET du header sticky : liens du menu cliquables et titre
« Plateformes » visible (le header ne passe plus devant le tiroir). */
z-index: calc(var(--z-modal) + 1);
width: min(320px, 90vw);
background: var(--jdp-white);
box-shadow: 25px 0 50px rgba(0,0,0,0.18);
transform: translateX(-100%);
transition: transform var(--dur-slow) cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
}
.jdp-mobile-menu-drawer.is-open { transform: translateX(0); }
/* iOS Safari : le header sticky peut se peindre au-dessus du tiroir fixed malgre le z-index.
Menu mobile ouvert -> on abaisse le header sous le backdrop, pour que le tiroir (et son
titre « Plateformes ») passe bien devant sur Safari comme ailleurs. */
body.jdp-drawer-open .jdp-site-header { z-index: 1; }
.jdp-mobile-menu-header {
padding: 16px 18px;
border-bottom: 1px solid var(--jdp-separator);
display: flex;
align-items: center;
justify-content: space-between;
}
.jdp-mobile-menu-logo img { height: 36px; width: auto; display: block; }
.jdp-mobile-menu-close {
background: transparent;
border: 0;
cursor: pointer;
color: var(--fg2);
padding: 8px;
display: inline-flex;
align-items: center;
min-width: 44px;
min-height: 44px;
justify-content: center;
}
.jdp-mobile-menu-body { flex: 1; overflow-y: auto; padding: 10px 12px; }
.jdp-mobile-menu-section-label {
padding: 12px 8px 6px;
font-size: 11px;
color: var(--fg2);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.jdp-mobile-menu-platform { border-bottom: 1px solid #F0F0F2; }
.jdp-mobile-menu-platform-toggle,
.jdp-mobile-menu-platform-link {
width: 100%;
background: transparent;
border: 0;
cursor: pointer;
padding: 13px 8px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-family: inherit;
font-weight: 600;
font-size: 14.5px;
color: var(--jdp-dark);
text-decoration: none;
}
.jdp-mobile-menu-platform-chevron { color: var(--jdp-text-disabled); transition: transform var(--dur-fast); }
.jdp-mobile-menu-platform-toggle[aria-expanded="true"] .jdp-mobile-menu-platform-chevron { transform: rotate(180deg); }
.jdp-mobile-menu-submenu { padding-bottom: 10px; }
.jdp-mobile-menu-submenu-item {
display: block;
padding: 9px 12px 9px 36px;
color: var(--fg2);
text-decoration: none;
font-size: 13px;
}
.jdp-mobile-menu-utility a {
display: block;
padding: 12px 8px;
color: var(--jdp-dark);
font-weight: 600;
font-size: 14px;
text-decoration: none;
border-bottom: 1px solid #F0F0F2;
}
.jdp-mobile-menu-footer { padding: 14px; border-top: 1px solid var(--jdp-separator); background: #FAFAFB; }
.jdp-mobile-menu-account {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--accent);
color: var(--jdp-white);
padding: 12px 16px;
border-radius: 10px;
font-weight: 700;
font-size: 14px;
text-decoration: none;
box-shadow: 0 6px 16px rgba(230,138,28,0.28);
min-height: 44px;
}
/* Hide hamburger on desktop, show on mobile */
@media (max-width: 900px) {
.jdp-mainnav-hamburger { display: inline-flex; }
.jdp-mainnav-platforms { display: none; }
}
/* ============================================================
* FOOTER REFONTE v3
* ============================================================ */
.jdp-footer-main {
background: var(--jdp-white);
border-top: 1px solid var(--jdp-separator);
padding: var(--sp-12) 0 var(--sp-6);
}
.jdp-footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: var(--sp-8);
}
.jdp-footer-brand { padding-right: var(--sp-6); }
.jdp-footer-logo img { height: 40px; width: auto; display: block; margin-bottom: var(--sp-3); }
.jdp-footer-tagline { font-size: 13px; line-height: 1.6; max-width: 280px; color: var(--fg2); }
.jdp-footer-socials { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.jdp-footer-social {
width: 34px;
height: 34px;
border-radius: 8px;
background: var(--bg-soft);
border: 1px solid var(--jdp-separator);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--dur-fast);
color: var(--jdp-dark);
}
.jdp-footer-social:hover { background: #FEF6E6; }
.jdp-footer-social svg { width: 16px; height: 16px; }
.jdp-footer-col-title {
font-weight: 600;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--jdp-dark);
margin: 0 0 var(--sp-3);
}
.jdp-footer-col-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.jdp-footer-col-list a {
color: var(--fg2);
font-size: 13px;
text-decoration: none;
transition: color var(--dur-fast);
}
.jdp-footer-col-list a:hover { color: var(--accent); }
.jdp-footer-bottom {
border-top: 1px solid var(--jdp-separator);
padding-top: var(--sp-5);
}
.jdp-footer-bottom .jdp-container {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--sp-3);
flex-wrap: wrap;
}
.jdp-footer-copy { font-size: 12px; color: var(--fg2); margin: 0; }
.jdp-footer-payments { display: flex; gap: var(--sp-2); align-items: center; }
.jdp-footer-payments img { height: 26px; width: auto; }
@media (max-width: 900px) {
.jdp-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
}
@media (max-width: 600px) {
.jdp-footer-grid { grid-template-columns: 1fr; }
.jdp-footer-bottom .jdp-container { flex-direction: column; align-items: flex-start; }
/* Logos de paiement masqués sur mobile (déclutter) ; affichés (cartes sombres) dès la tablette/desktop. */
.jdp-footer-payments { display: none; }
}
/* ============================================================
* CART DRAWER (design porté de redesign-home-v2)
* Panneau slide droite, overlay sombre, items WC dynamiques.
* Les items sont rendus par assets/js/cart.js (classes .jdp-cart-item*).
* Styles items scopés sous .jdp-cart-drawer pour ne pas entrer en
* collision avec la page panier WC (.jdp-cart-items > .jdp-cart-item grid).
* ============================================================ */
.jdp-cart-drawer-backdrop {
position: fixed;
inset: 0;
z-index: var(--z-overlay);
background: rgba(10, 9, 7, 0.45);
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-slow) var(--ease-out);
}
body.jdp-drawer-open .jdp-cart-drawer-backdrop { opacity: 1; pointer-events: auto; }
.jdp-cart-drawer {
position: fixed;
top: 0;
right: 0;
left: auto;
bottom: 0;
height: 100%;
inset: 0 0 0 auto;
z-index: calc(var(--z-modal) + 1);
width: 420px;
max-width: 92vw;
background: var(--jdp-white);
box-shadow: -24px 0 60px -20px rgba(10, 9, 7, 0.3);
transform: translateX(100%);
transition: transform 420ms var(--ease-drawer), visibility 0s linear 420ms;
display: flex;
flex-direction: column;
visibility: hidden;
pointer-events: none;
}
.jdp-cart-drawer[aria-hidden="false"] {
transform: translateX(0);
visibility: visible;
pointer-events: auto;
transition: transform 420ms var(--ease-drawer), visibility 0s linear 0s;
}
/* Header */
.jdp-cart-drawer-header {
padding: 22px 24px;
border-bottom: 1px solid var(--jdp-separator);
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.jdp-cart-drawer-title-row { display: flex; align-items: center; gap: 10px; }
.jdp-cart-drawer-title-icon {
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
background: var(--accent-soft);
color: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
}
.jdp-cart-drawer-title {
margin: 0;
font-weight: 700;
font-size: 16px;
color: var(--fg1);
letter-spacing: -0.01em;
}
.jdp-cart-drawer-count { font-size: 12.5px; color: var(--fg3); font-weight: 600; margin-top: 1px; }
.jdp-cart-drawer-close {
background: var(--jdp-white);
border: 1px solid var(--jdp-separator);
border-radius: var(--radius-full);
cursor: pointer;
color: var(--fg2);
width: 34px;
height: 34px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.jdp-cart-drawer-close:hover { background: var(--bg-soft); }
.jdp-cart-drawer-close:active { transform: scale(0.94); }
.jdp-cart-drawer-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Body + items (rendus par cart.js) */
.jdp-cart-drawer-body { flex: 1; overflow-y: auto; padding: 8px 24px; }
.jdp-cart-drawer .jdp-cart-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px 0;
border-bottom: 1px solid var(--jdp-separator);
}
.jdp-cart-drawer .jdp-cart-item:last-child { border-bottom: 0; }
.jdp-cart-drawer .jdp-cart-item-img {
width: 54px;
height: 54px;
border-radius: var(--radius-md);
object-fit: cover;
flex-shrink: 0;
background: var(--bg-soft);
}
.jdp-cart-drawer .jdp-cart-item-body {
flex: 1;
min-width: 0;
display: block;
}
.jdp-cart-drawer .jdp-cart-item-title {
font-size: 14px;
font-weight: 600;
color: var(--fg1);
line-height: 1.3;
letter-spacing: -0.005em;
margin: 0;
}
.jdp-cart-drawer .jdp-cart-item-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 10px;
}
.jdp-cart-drawer .jdp-cart-item-qty {
display: inline-flex;
align-items: center;
gap: 12px;
border: 1px solid var(--jdp-separator);
border-radius: var(--radius-full);
padding: 3px 4px;
}
.jdp-cart-drawer .jdp-cart-item-qty button {
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: var(--bg-soft);
border-radius: var(--radius-full);
color: var(--fg2);
font-size: 14px;
line-height: 1;
cursor: pointer;
transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.jdp-cart-drawer .jdp-cart-item-qty button:hover { background: var(--accent-soft); }
.jdp-cart-drawer .jdp-cart-item-qty button:active { transform: scale(0.92); }
.jdp-cart-drawer .jdp-cart-item-qty span {
font-size: 13px;
font-weight: 600;
color: var(--fg1);
min-width: 14px;
text-align: center;
font-variant-numeric: tabular-nums;
}
.jdp-cart-drawer .jdp-cart-item-price {
font-size: 14px;
font-weight: 700;
color: var(--fg1);
letter-spacing: -0.01em;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.jdp-cart-drawer .jdp-cart-item-remove {
border: none;
background: none;
color: var(--fg3);
cursor: pointer;
font-size: 18px;
line-height: 1;
padding: 2px 4px;
align-self: flex-start;
transition: color var(--dur-fast) var(--ease-out);
}
.jdp-cart-drawer .jdp-cart-item-remove:hover { color: var(--signal-hot); }
/* Empty state */
.jdp-cart-drawer-empty {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 24px;
text-align: center;
}
.jdp-cart-drawer-empty-icon {
width: 80px;
height: 80px;
border-radius: var(--radius-full);
background: var(--accent-soft);
color: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
}
.jdp-cart-drawer-empty-title { margin: 0 0 6px; font-weight: 700; font-size: 18px; color: var(--fg1); }
.jdp-cart-drawer-empty-text { margin: 0 0 20px; font-size: 13px; color: var(--fg3); line-height: 1.55; max-width: 280px; }
/* Footer */
.jdp-cart-drawer-footer {
padding: 18px 24px 22px;
border-top: 1px solid var(--jdp-separator);
background: var(--jdp-white);
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.jdp-cart-drawer-row--promo {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: var(--accent-soft);
border-radius: var(--radius-md);
font-size: 12.5px;
color: var(--fg2);
}
.jdp-cart-drawer-row--promo b,
.jdp-cart-drawer-row--promo strong { color: var(--accent); font-weight: 700; }
.jdp-cart-drawer-row--promo .jdp-cart-drawer-discount { margin-left: auto; }
.jdp-cart-drawer-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
color: var(--fg2);
}
.jdp-cart-drawer-row strong { color: var(--fg1); font-variant-numeric: tabular-nums; font-weight: 600; }
.jdp-cart-drawer-sep { display: none; }
.jdp-cart-drawer-row--total {
align-items: baseline;
}
.jdp-cart-drawer-row--total span { font-size: 14px; font-weight: 600; color: var(--fg1); }
.jdp-cart-drawer-row--total strong {
font-size: 22px;
font-weight: 800;
color: var(--fg1);
letter-spacing: -0.02em;
}
.jdp-cart-drawer-checkout {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
min-height: 50px;
margin-top: 2px;
}
.jdp-cart-drawer-trust {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 11.5px;
color: var(--fg3);
}
.jdp-cart-drawer-trust svg { color: var(--jdp-spotify); }
.jdp-cart-drawer-payments { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 2px; }
.jdp-cart-drawer-payments img { height: 22px; width: auto; }
/* ============================================================
* PRESSE MARQUEE (home, après hero)
* Port redesign-home-v2.html (.press). 2 rangées, scroll opposé,
* pause au survol, fond bone (var(--bg-soft)).
* ============================================================ */
.jdp-press {
background: var(--bg-soft);
padding: var(--sp-10) 0;
border-bottom: 1px solid var(--jdp-separator);
overflow: hidden;
}
.jdp-press-label {
text-align: center;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fg3);
margin-bottom: 18px;
}
.jdp-press-marquee {
display: flex;
gap: 0;
mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
overflow: hidden;
}
.jdp-press-marquee + .jdp-press-marquee { margin-top: 16px; }
.jdp-press-track {
display: flex;
gap: 64px;
flex-shrink: 0;
padding-right: 64px;
will-change: transform;
animation: jdp-press-scroll 70s linear infinite;
}
.jdp-press-track--reverse { animation-direction: reverse; animation-duration: 50s; }
.jdp-press:hover .jdp-press-track { animation-play-state: paused; }
@keyframes jdp-press-scroll {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
.jdp-press-logo {
font-size: 21px;
font-weight: 600;
color: var(--fg1);
opacity: 0.5;
letter-spacing: -0.01em;
white-space: nowrap;
flex-shrink: 0;
transition: opacity var(--dur-normal) var(--ease-out-quart);
}
.jdp-press-logo:hover { opacity: 0.85; }
@media (prefers-reduced-motion: reduce) {
.jdp-press-track { animation: none; }
}
/* ============================================================
* BENTO PLATEFORMES (home, ex featured-categories)
* Port redesign-home-v2.html (.bento). Cards BLANCHES, tint subtil
* par plateforme, Instagram en 2x2, hover translateY ease-out-quint.
* Les tints (.jdp-bento-card--xx::before) sont des teintes d'identité
* plateforme, scopées à la section.
* ============================================================ */
.jdp-bento-section { padding: var(--sp-16) 0; }
.jdp-bento {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
grid-auto-rows: minmax(190px, auto);
margin-top: var(--sp-12);
}
.jdp-bento-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 24px;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--jdp-separator);
background: var(--jdp-white);
text-decoration: none;
color: inherit;
transition: transform var(--dur-normal) var(--ease-out-quint), box-shadow var(--dur-normal) var(--ease-out-quint), border-color var(--dur-normal) var(--ease-out-quint);
}
.jdp-bento-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--fg3);
}
.jdp-bento-card:active { transform: scale(0.99); }
.jdp-bento-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
opacity: 0.55;
transition: opacity var(--dur-slow) var(--ease-out-quart);
}
.jdp-bento-card:hover::before { opacity: 0.85; }
.jdp-bento-card > * { position: relative; z-index: 1; }
/* Tints plateforme (subtils, blanc teinté) */
.jdp-bento-card--ig::before { background: linear-gradient(135deg, #FDF1DE 0%, #FCD2C1 50%, #F8D0E0 100%); }
.jdp-bento-card--tt::before { background: #F0F4F7; }
.jdp-bento-card--yt::before { background: #FFF1F1; }
.jdp-bento-card--tw::before { background: #F3EEFA; }
.jdp-bento-card--sp::before { background: #E8F5EC; }
.jdp-bento-card--fb::before { background: #EAF2FF; }
.jdp-bento-card--x::before { background: #F4F4F5; }
.jdp-bento-card--sc::before { background: #FDF1DE; }
/* Variance : Instagram en grande card 2x2 */
.jdp-bento-card--ig { grid-column: span 2; grid-row: span 2; }
.jdp-bento-card-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.jdp-bento-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: var(--jdp-white);
border-radius: 12px;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
color: var(--jdp-white);
}
.jdp-bento-icon svg { width: 22px; height: 22px; filter: brightness(0) invert(1); }
.jdp-bento-card--ig .jdp-bento-icon { background: linear-gradient(135deg, var(--jdp-instagram), var(--accent)); }
.jdp-bento-card--tt .jdp-bento-icon { background: var(--jdp-dark); }
.jdp-bento-card--yt .jdp-bento-icon { background: var(--jdp-youtube); }
.jdp-bento-card--tw .jdp-bento-icon { background: var(--jdp-twitch); }
.jdp-bento-card--sp .jdp-bento-icon { background: var(--jdp-spotify); }
.jdp-bento-card--fb .jdp-bento-icon { background: var(--jdp-facebook); }
.jdp-bento-card--x .jdp-bento-icon { background: var(--jdp-dark); }
.jdp-bento-card--sc .jdp-bento-icon { background: var(--jdp-soundcloud); }
.jdp-bento-count {
font-size: 11px;
font-weight: 500;
color: var(--fg2);
padding: 4px 10px;
background: rgba(255,255,255,0.92);
border-radius: 999px;
font-variant-numeric: tabular-nums;
}
.jdp-bento-name {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--fg1);
margin: 16px 0 0;
}
.jdp-bento-card--ig .jdp-bento-name { font-size: 32px; }
.jdp-bento-services {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.jdp-bento-pill {
font-size: 11px;
font-weight: 500;
padding: 4px 10px;
background: rgba(255,255,255,0.92);
color: var(--fg2);
border-radius: 999px;
}
.jdp-bento-foot {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-top: 18px;
font-size: 13px;
}
.jdp-bento-from { color: var(--fg3); }
.jdp-bento-from b { color: var(--fg1); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.jdp-bento-arrow {
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 500;
color: var(--fg1);
transition: transform var(--dur-normal) var(--ease-out-quart);
}
.jdp-bento-card:hover .jdp-bento-arrow { transform: translateX(2px); }
.jdp-bento-watermark {
position: absolute;
bottom: -10px;
right: -10px;
font-size: 96px;
font-weight: 800;
letter-spacing: -0.06em;
color: rgba(0,0,0,0.04);
z-index: 0;
text-transform: lowercase;
user-select: none;
pointer-events: none;
}
.jdp-bento-card--ig .jdp-bento-watermark { font-size: 140px; }
.jdp-bento-popular {
position: absolute;
top: 14px;
right: 14px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 4px 8px;
background: var(--jdp-dark);
color: var(--jdp-white);
border-radius: 999px;
z-index: 2;
}
@media (max-width: 1024px) {
.jdp-bento { grid-template-columns: repeat(2, 1fr); }
.jdp-bento-card--ig { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 640px) {
.jdp-bento { grid-template-columns: 1fr; }
.jdp-bento-card--ig { grid-column: span 1; }
}
/* ============================================================
* ADVANTAGES ROW
* ============================================================ */
.jdp-advantages-row { padding: var(--sp-10) 0; background: var(--jdp-dark); color: var(--jdp-white); }
.jdp-advantages-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-7); }
.jdp-advantage { display: flex; gap: 14px; align-items: center; }
.jdp-advantage-icon {
width: 52px;
height: 52px;
border-radius: 12px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.08);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
}
.jdp-advantage-icon svg { width: 26px; height: 26px; display: block; color: var(--accent); }
.jdp-advantage-title { font-weight: 700; font-size: 14px; color: var(--jdp-white); }
.jdp-advantage-subtitle { font-size: 12px; color: var(--jdp-text-disabled); margin-top: 2px; }
@media (max-width: 900px) { .jdp-advantages-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } }
@media (max-width: 600px) { .jdp-advantages-grid { grid-template-columns: 1fr; } }
/* ============================================================
* PROCESS V3
* ============================================================ */
/* Process v2 : 3 étapes numérotées (01/02/03), gros chiffres, séparateurs verticaux, pas de cards. */
.jdp-process-v3 { padding: var(--sp-12) 0; }
.jdp-process-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
margin: var(--sp-10) auto 0;
border-top: 1px solid var(--border);
}
.jdp-process-step {
padding: var(--sp-10) var(--sp-8);
border-right: 1px solid var(--border);
text-align: center;
position: relative;
}
.jdp-process-step:last-child { border-right: none; }
.jdp-process-num {
display: inline-block;
font-weight: 800;
font-size: 56px;
line-height: 1;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
color: var(--accent);
margin-bottom: var(--sp-5);
}
.jdp-process-title { font-weight: 600; font-size: var(--fs-h3); color: var(--fg1); letter-spacing: -0.015em; margin: 0 0 10px; }
.jdp-process-text { font-size: var(--fs-body); color: var(--fg2); line-height: 1.6; margin: 0 auto; max-width: 32ch; }
/* Survol (desktop) : le numéro de l'étape grossit légèrement. Respecte prefers-reduced-motion. */
@media (hover: hover) and (pointer: fine) {
.jdp-process-num { transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1); }
.jdp-process-step:hover .jdp-process-num { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
.jdp-process-num { transition: none; }
.jdp-process-step:hover .jdp-process-num { transform: none; }
}
@media (max-width: 900px) {
.jdp-process-grid { grid-template-columns: 1fr; }
.jdp-process-step { border-right: none; border-bottom: 1px solid var(--border); padding: var(--sp-8) 0; }
.jdp-process-step + .jdp-process-step { padding-left: 0; }
.jdp-process-step:last-child { border-bottom: none; }
}
/* ============================================================
* WHY US
* ============================================================ */
/* Why-us v2 : grille 2x2 sombre, séparateurs (bordures), icône tint orange, pas de cards. */
.jdp-why-us { padding: var(--sp-16) 0; background: var(--bg-dark); color: var(--fg-on-dark1); }
.jdp-why-us-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
margin: var(--sp-10) auto 0;
border-top: 1px solid var(--border-dark);
border-left: 1px solid var(--border-dark);
}
.jdp-why-us-item {
padding: var(--sp-10);
border-right: 1px solid var(--border-dark);
border-bottom: 1px solid var(--border-dark);
display: flex;
gap: var(--sp-4);
transition: background var(--dur-slow) var(--ease-out-quart);
}
.jdp-why-us-item:hover { background: rgba(255,255,255,0.02); }
.jdp-why-us-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-md);
background: var(--accent);
color: var(--bg);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.jdp-why-us-icon img { width: 22px; height: 22px; display: block; filter: brightness(0) invert(1); }
.jdp-why-us-title { font-weight: 600; font-size: var(--fs-h4); color: var(--fg-on-dark1); letter-spacing: -0.01em; margin-bottom: 6px; }
.jdp-why-us-body { font-size: 14px; color: var(--fg-on-dark2); line-height: 1.6; max-width: 42ch; }
@media (max-width: 700px) { .jdp-why-us-grid { grid-template-columns: 1fr; } }
/* ============================================================
* WP CONTENT AREA
* ============================================================ */
.jdp-wp-content-area { padding: var(--sp-16) 0; }
.jdp-wp-content h2 { font-weight: 700; font-size: 28px; letter-spacing: -0.02em; margin: 28px 0 12px; color: var(--jdp-dark); line-height: 1.2; }
.jdp-wp-content h3 { font-weight: 700; font-size: 20px; margin: 22px 0 10px; color: var(--jdp-dark); }
.jdp-wp-content p { margin: 0 0 var(--sp-4); line-height: 1.7; }
.jdp-wp-content a:not(.jdp-btn) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.jdp-wp-content ul { padding-left: 22px; margin: 0 0 18px; }
.jdp-wp-content ul li { margin-bottom: 6px; }
.jdp-wp-content strong { color: var(--jdp-dark); font-weight: 700; }
/* ============================================================
* LATEST ARTICLES + BLOG CARDS
* ============================================================ */
/* CTA final : 2 boutons centrés + ghost lisible sur fond sombre. */
.jdp-cta-final-actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
/* ============================================================
* CTA FINAL (section dark bas de page) : regles GLOBALES.
* Deplacees depuis home.css pour que home + tous les hubs aient
* le meme rendu compact et propre. Sinon les hubs s'affichent
* sans padding ni typography normalisee.
* ============================================================ */
.jdp-cta-final {
padding: 100px 0;
}
.jdp-cta-final h2 {
margin-bottom: var(--sp-4);
}
.jdp-cta-final-text {
font-size: 18px;
max-width: 600px;
margin: 0 auto var(--sp-8);
color: var(--fg-on-dark2);
}
@media (max-width: 600px) {
.jdp-cta-final h2 { font-size: 36px; }
}
.jdp-section--dark .jdp-btn--ghost--light { color: var(--jdp-white); border-color: rgba(255, 255, 255, 0.35); }
.jdp-section--dark .jdp-btn--ghost--light:hover { color: var(--jdp-white); border-color: var(--jdp-white); background: rgba(255, 255, 255, 0.08); }
.jdp-blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.jdp-blog-card {
display: flex;
flex-direction: column;
background: var(--jdp-white);
border-radius: 14px;
border: 1px solid var(--jdp-separator);
overflow: hidden;
text-decoration: none;
color: inherit;
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
transition: box-shadow var(--dur-normal), transform var(--dur-normal);
}
.jdp-blog-card:hover { box-shadow: 0 25px 50px rgba(0,0,0,0.10), 0 10px 20px rgba(0,0,0,0.06); transform: translateY(-2px); }
.jdp-blog-card-image {
aspect-ratio: 16/10;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.jdp-blog-card-image img { width: 100%; height: 100%; object-fit: cover; }
.jdp-blog-card-image-icon { color: var(--jdp-white); }
.jdp-blog-card-image-icon svg { width: 80px; height: 80px; filter: brightness(0) invert(1); }
.jdp-blog-card-image-shine { position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2) 0%, transparent 65%); pointer-events: none; }
.jdp-blog-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.jdp-blog-card-title { margin: 0; font-weight: 700; font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; color: var(--jdp-dark); }
.jdp-blog-card-excerpt { margin: 0; font-size: 13px; line-height: 1.55; color: var(--fg2); }
.jdp-blog-card-meta { display: flex; gap: 14px; font-size: 12px; color: var(--fg2); margin-top: auto; align-items: center; }
.jdp-blog-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.jdp-blog-card-meta-sep { color: var(--jdp-separator); }
/* Platform badge */
.jdp-platform-badge {
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 999px;
padding: 4px 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
width: fit-content;
}
.jdp-platform-badge-icon svg { width: 12px; height: 12px; filter: brightness(0); }
@media (max-width: 900px) { .jdp-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .jdp-blog-grid { grid-template-columns: 1fr; } }
/* ============================================================
* ARTICLE SINGLE
* ============================================================ */
.jdp-article-hero {
position: relative;
padding: var(--sp-12) 0 130px;
overflow: hidden;
color: var(--jdp-white);
}
.jdp-article-hero-bgicon {
position: absolute;
right: -60px;
top: -60px;
opacity: 0.12;
pointer-events: none;
color: var(--jdp-white);
}
.jdp-article-hero-bgicon svg { width: 420px; height: 420px; filter: brightness(0) invert(1); }
.jdp-article-hero-inner { position: relative; max-width: 880px; }
.jdp-article-breadcrumb { font-size: 12px; margin-bottom: 20px; display: flex; align-items: center; gap: 6px; }
.jdp-article-breadcrumb a { color: rgba(255,255,255,0.75); text-decoration: none; }
.jdp-article-breadcrumb a:hover { color: var(--jdp-white); }
.jdp-article-platform-pill {
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(255,255,255,0.18);
color: var(--jdp-white);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 999px;
padding: 5px 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 18px;
}
.jdp-article-platform-pill svg { width: 13px; height: 13px; filter: brightness(0) invert(1); }
.jdp-article-title { font-weight: 800; font-size: 44px; line-height: 1.12; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.jdp-article-excerpt { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,0.92); margin: 16px 0 24px; max-width: 680px; }
.jdp-article-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,0.85); }
.jdp-article-author { display: flex; align-items: center; gap: 10px; color: var(--jdp-white); text-decoration: none; }
.jdp-article-author-avatar { width: 38px; height: 38px; border-radius: 999px; background: rgba(255,255,255,0.2); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.jdp-article-author-name { font-weight: 600; color: var(--jdp-white); }
.jdp-article-author-role { font-size: 11px; color: rgba(255,255,255,0.7); }
.jdp-article-meta-sep { color: rgba(255,255,255,0.3); }
.jdp-article-meta-item { display: inline-flex; align-items: center; gap: 5px; }
.jdp-article-main { padding: 0 0 var(--sp-16); }
.jdp-article-grid {
display: grid;
/* Colonne de lecture élargie (~760px) : max-width alignée sur le conteneur du thème
(--container-lg 1280px) et colonnes latérales resserrées. Avant : centre ~600px (trop serré). */
grid-template-columns: 210px 1fr 230px;
gap: 40px;
max-width: 1280px;
margin: -60px auto 0;
}
.jdp-article-toc { position: sticky; top: 24px; align-self: start; height: fit-content; padding-top: 80px; }
.jdp-article-toc-label { font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg2); margin-bottom: 14px; }
.jdp-article-toc-nav { display: flex; flex-direction: column; }
.jdp-article-toc-nav a {
display: block;
font-size: 13px;
padding: 8px 0 8px 12px;
border-left: 2px solid var(--jdp-separator);
color: var(--fg2);
font-weight: 500;
text-decoration: none;
line-height: 1.4;
transition: color var(--dur-fast), border-color var(--dur-fast);
}
.jdp-article-toc-nav a:hover,
.jdp-article-toc-nav a.is-active { color: var(--jdp-dark); border-left-color: var(--accent); font-weight: 600; }
.jdp-article-body {
background: var(--jdp-white);
border-radius: 18px;
border: 1px solid var(--jdp-separator);
padding: 44px 48px;
line-height: 1.7;
color: var(--jdp-dark);
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.jdp-article-body h2 { font-weight: 700; font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; margin: 28px 0 14px; color: var(--jdp-dark); scroll-margin-top: 100px; }
.jdp-article-body h3 { font-weight: 700; font-size: 19px; margin: 22px 0 10px; color: var(--jdp-dark); }
.jdp-article-body p { margin: 0 0 16px; font-size: 15.5px; color: #3a414b; }
.jdp-article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.jdp-article-body ul, .jdp-article-body ol { padding-left: 22px; margin: 0 0 18px; }
.jdp-article-body li { margin-bottom: 6px; }
.jdp-article-body strong { color: var(--jdp-dark); font-weight: 700; }
.jdp-article-body blockquote { margin: 20px 0; padding: 18px 22px; border-left: 4px solid var(--accent); background: rgba(230,138,28,0.06); border-radius: 0 10px 10px 0; font-style: italic; }
.jdp-article-body img, .jdp-article-body figure img { max-width: 100%; height: auto; border-radius: 10px; margin: 18px 0; }
/* Image mise en avant, en tête de l'article : pleine largeur du contenu, arrondi cohérent avec le thème. */
.jdp-article-body .jdp-article-featured { margin: 0 0 28px; }
.jdp-article-body .jdp-article-featured img { width: 100%; height: auto; border-radius: 12px; margin: 0; display: block; }
.jdp-article-inline-cta {
margin: 30px 0 0;
padding: 24px 26px;
border-radius: 14px;
color: var(--jdp-white);
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
}
.jdp-article-inline-cta-title { font-weight: 700; font-size: 18px; margin-bottom: 4px; }
.jdp-article-inline-cta-text { font-size: 13px; opacity: 0.92; }
.jdp-article-inline-cta-btn { background: var(--jdp-white); padding: 11px 18px; border-radius: 8px; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.jdp-article-aside { position: sticky; top: 24px; align-self: start; height: fit-content; padding-top: 80px; display: flex; flex-direction: column; gap: 18px; }
.jdp-article-aside-card { background: var(--jdp-white); border: 1px solid var(--jdp-separator); border-radius: 12px; padding: 16px; }
.jdp-article-aside-label { font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg2); margin-bottom: 12px; }
.jdp-article-share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.jdp-article-share-btn { color: var(--jdp-white); padding: 9px 10px; border-radius: 8px; font-weight: 600; font-size: 12px; text-align: center; text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
.jdp-article-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.jdp-article-tag { background: var(--bg-soft); color: var(--jdp-dark); padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; text-decoration: none; border: 1px solid var(--jdp-separator); }
.jdp-article-aside-author { background: var(--jdp-dark); color: var(--jdp-white); border-radius: 12px; padding: 18px; }
.jdp-article-aside-author-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.jdp-article-aside-author-avatar { width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,0.12); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.jdp-article-aside-author-name { font-weight: 700; font-size: 14px; }
.jdp-article-aside-author-role { font-size: 11px; color: var(--jdp-text-disabled); }
.jdp-article-aside-author-bio { font-size: 12px; color: var(--jdp-text-disabled); line-height: 1.5; margin: 0; }
.jdp-article-related { padding: var(--sp-12) 0; }
.jdp-article-related-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-6); flex-wrap: wrap; gap: var(--sp-3); }
.jdp-article-related-link { font-size: 13px; font-weight: 600; text-decoration: none; }
@media (max-width: 1000px) {
.jdp-article-grid { grid-template-columns: 1fr; }
.jdp-article-toc, .jdp-article-aside { position: static; padding-top: 0; }
}
@media (max-width: 600px) {
.jdp-article-title { font-size: 30px; }
.jdp-article-body { padding: 24px 22px; }
}
/* ============================================================
* BLOG ARCHIVE
* ============================================================ */
.jdp-blog-hero { background: var(--jdp-white); padding: var(--sp-12) 0 var(--sp-8); border-bottom: 1px solid var(--jdp-separator); }
.jdp-blog-hero-title { font-weight: 800; font-size: 48px; line-height: 1.08; letter-spacing: -0.02em; margin: 14px 0 14px; color: var(--jdp-dark); }
.jdp-blog-hero-text { font-size: 16px; line-height: 1.55; color: var(--fg2); margin: 0 auto 28px; max-width: 640px; }
.jdp-blog-search {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--jdp-white);
border: 1px solid var(--jdp-separator);
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
border-radius: 999px;
padding: 10px 18px;
width: 100%;
max-width: 520px;
}
.jdp-blog-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(230,138,28,0.12); }
.jdp-blog-search svg { color: var(--fg2); flex-shrink: 0; }
.jdp-blog-search-input {
flex: 1;
border: 0;
outline: 0;
background: transparent;
font-family: var(--font-sans);
font-size: 14px;
color: var(--jdp-dark);
min-width: 0;
min-height: 28px;
}
.jdp-blog-category-nav { background: var(--jdp-white); border-bottom: 1px solid var(--jdp-separator); position: sticky; top: 0; z-index: var(--z-dropdown); }
.jdp-blog-category-row { padding: 12px 0; display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
.jdp-blog-chip {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
color: var(--jdp-dark);
border: 1px solid var(--jdp-separator);
border-radius: 999px;
padding: 8px 14px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: background var(--dur-normal), color var(--dur-normal), border-color var(--dur-normal);
}
.jdp-blog-chip:hover { background: var(--bg-soft); }
.jdp-blog-chip.is-active { color: var(--jdp-white); }
.jdp-blog-chip-icon svg { width: 14px; height: 14px; filter: brightness(0); }
.jdp-blog-chip.is-active .jdp-blog-chip-icon svg { filter: brightness(0) invert(1); }
.jdp-blog-archive { padding: var(--sp-10) 0 var(--sp-16); }
.jdp-blog-featured {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 28px;
background: var(--jdp-white);
border-radius: 18px;
border: 1px solid var(--jdp-separator);
padding: 14px;
text-decoration: none;
color: inherit;
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
transition: box-shadow var(--dur-normal), transform var(--dur-normal);
margin-bottom: 28px;
}
.jdp-blog-featured:hover { box-shadow: 0 25px 50px rgba(0,0,0,0.10), 0 10px 20px rgba(0,0,0,0.06); transform: translateY(-2px); }
.jdp-blog-featured-image { border-radius: 12px; aspect-ratio: 16/10; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.jdp-blog-featured-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.jdp-blog-featured-image-icon { color: var(--jdp-white); }
.jdp-blog-featured-image-icon svg { width: 140px; height: 140px; filter: brightness(0) invert(1); }
.jdp-blog-featured-badge { position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,0.95); color: var(--jdp-dark); border-radius: 999px; padding: 5px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.jdp-blog-featured-body { padding: 14px 18px 18px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.jdp-blog-featured-title { margin: 0; font-weight: 700; font-size: 28px; line-height: 1.18; letter-spacing: -0.02em; color: var(--jdp-dark); }
.jdp-blog-featured-excerpt { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg2); }
.jdp-blog-featured-cta { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 700; font-size: 14px; }
.jdp-blog-pagination { margin-top: var(--sp-10); display: flex; justify-content: center; }
.jdp-blog-pagination-list { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.jdp-blog-pagination .page-numbers {
background: var(--jdp-white);
color: var(--jdp-dark);
border: 1px solid var(--jdp-separator);
border-radius: 8px;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: background var(--dur-fast), color var(--dur-fast);
}
.jdp-blog-pagination .page-numbers:hover { background: var(--bg-soft); }
.jdp-blog-pagination .page-numbers.current { background: var(--jdp-dark); color: var(--jdp-white); border-color: var(--jdp-dark); }
.jdp-blog-pagination .page-numbers.prev,
.jdp-blog-pagination .page-numbers.next { width: auto; padding: 0 14px; gap: 6px; }
.jdp-blog-empty { text-align: center; padding: 60px 20px; background: var(--jdp-white); border: 1px dashed var(--jdp-separator); border-radius: 14px; }
.jdp-blog-empty-icon { font-size: 40px; margin-bottom: 12px; }
.jdp-blog-empty-title { font-weight: 700; font-size: 18px; color: var(--jdp-dark); margin: 0 0 6px; }
.jdp-blog-empty-text { font-size: 14px; color: var(--fg2); margin-bottom: 18px; max-width: 420px; margin-left: auto; margin-right: auto; }
@media (max-width: 900px) {
.jdp-blog-hero-title { font-size: 32px; }
.jdp-blog-featured { grid-template-columns: 1fr; }
}
/* ============================================================
* NEWSLETTER
* ============================================================ */
.jdp-newsletter { padding: var(--sp-12) 0; }
.jdp-newsletter-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; max-width: 980px; margin: 0 auto; }
.jdp-newsletter-text { font-size: 14px; line-height: 1.6; color: var(--jdp-text-disabled); margin: 10px 0 0; }
.jdp-newsletter-form { display: flex; gap: 8px; flex-wrap: wrap; }
.jdp-newsletter-input { flex: 1; border: 0; border-radius: 8px; padding: 13px 16px; font-family: var(--font-sans); font-size: 14px; outline: none; background: var(--jdp-white); color: var(--jdp-dark); min-width: 180px; min-height: 48px; }
.jdp-newsletter-input:focus { box-shadow: 0 0 0 3px rgba(230,138,28,0.3); }
.jdp-newsletter-submit { min-height: 48px; }
@media (max-width: 700px) { .jdp-newsletter-grid { grid-template-columns: 1fr; } }
/* ============================================================
* FAQ V3 REFRESH
* ============================================================ */
.jdp-faq-v3 { padding: var(--sp-12) 0; }
.jdp-faq-v3 .jdp-container--narrow { max-width: 768px; }
.jdp-faq-list { display: flex; flex-direction: column; gap: 0; margin-top: var(--sp-8); border-top: 1px solid var(--border); }
/* Catégorie FAQ (H3) au sein d'un accordion hub auto-rendu */
.jdp-faq-category {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 700;
color: var(--platform-color, var(--jdp-dark));
text-transform: uppercase;
letter-spacing: 0.08em;
margin: var(--sp-7) 0 var(--sp-3);
padding-bottom: var(--sp-2);
border-bottom: 1px solid var(--jdp-separator);
}
.jdp-faq-category:first-child { margin-top: 0; }
.jdp-hub-faq-accordion { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--border); }
/* FAQ v2 : liste bordée (pas de cards), chevron en cercle bordé qui pivote. */
.jdp-faq-item {
border-bottom: 1px solid var(--border);
}
.jdp-faq-summary {
width: 100%;
background: transparent;
border: 0;
cursor: pointer;
padding: var(--sp-6) 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-h4);
color: var(--fg1);
letter-spacing: -0.01em;
text-align: left;
list-style: none;
user-select: none;
transition: color var(--dur-normal) var(--ease-out-quart);
}
.jdp-faq-summary::-webkit-details-marker { display: none; }
.jdp-faq-summary:hover { color: var(--accent); }
.jdp-faq-chevron {
flex-shrink: 0;
width: 28px;
height: 28px;
border: 1px solid var(--border);
border-radius: var(--radius-full);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--fg2);
transition: transform var(--dur-normal) var(--ease-out-quart),
border-color var(--dur-normal) var(--ease-out-quart),
background var(--dur-normal) var(--ease-out-quart),
color var(--dur-normal) var(--ease-out-quart);
}
.jdp-faq-item[open] .jdp-faq-chevron {
transform: rotate(45deg);
background: var(--fg1);
border-color: var(--fg1);
color: var(--bg);
}
.jdp-faq-answer { padding: 0 0 var(--sp-6); font-size: var(--fs-body); line-height: 1.7; color: var(--fg2); max-width: 68ch; }
.jdp-faq-answer p { margin: 0; }
.jdp-faq-item[open] .jdp-faq-answer { animation: jdpFaqReveal var(--dur-slow) var(--ease-out-quint) both; }
@keyframes jdpFaqReveal {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
* TESTIMONIALS V3 REFRESH
* ============================================================ */
/* Témoignages v2 : cards bordées, hover lift, étoiles vertes (Trustpilot #00B67A). */
.jdp-testimonials-v3 { padding: var(--sp-12) 0; }
.jdp-testimonials-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-5);
margin-top: var(--sp-8);
}
.jdp-testimonial-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--sp-6);
display: flex;
flex-direction: column;
gap: var(--sp-4);
transition: transform var(--dur-normal) var(--ease-out-quart), border-color var(--dur-normal) var(--ease-out-quart), box-shadow var(--dur-normal) var(--ease-out-quart);
}
.jdp-testimonial-card:hover { transform: translateY(-2px); border-color: var(--fg3); box-shadow: var(--shadow-md); }
.jdp-testimonial-stars { display: flex; gap: 2px; }
.jdp-testimonial-star--filled { color: #00B67A; font-size: 15px; }
.jdp-testimonial-star--empty { color: var(--border); font-size: 15px; }
.jdp-testimonial-text { margin: 0; color: var(--fg1); font-size: var(--fs-body); line-height: 1.6; flex: 1; }
.jdp-testimonial-footer { margin-top: auto; display: flex; align-items: center; gap: 10px; padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.jdp-testimonial-avatar { width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--fg1); color: var(--bg); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex-shrink: 0; }
.jdp-testimonial-name { font-weight: 600; font-size: 13px; color: var(--fg1); }
.jdp-testimonial-role { font-size: 11px; color: var(--fg2); }
@media (max-width: 1100px) { .jdp-testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .jdp-testimonials-grid { grid-template-columns: 1fr; } }
/* ============================================================
* PLATFORMS V3 REFRESH
* ============================================================ */
.jdp-platforms-v3 { padding: var(--sp-16) 0; background: var(--jdp-dark); color: var(--jdp-white); }
.jdp-platforms-tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: var(--sp-8); }
.jdp-platform-tile {
background: var(--jdp-dark-alt);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
padding: 22px 18px;
cursor: pointer;
color: var(--jdp-text-light);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
text-align: left;
text-decoration: none;
transition: background var(--dur-normal), border-color var(--dur-normal), transform var(--dur-normal);
}
.jdp-platform-tile:hover { background: #3a4250; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.18), 0 4px 10px rgba(0,0,0,0.08); }
.jdp-platform-tile-icon svg { width: 32px; height: 32px; filter: brightness(0) invert(1); }
.jdp-platform-tile-name { font-weight: 600; font-size: 15px; color: var(--jdp-white); }
.jdp-platform-tile-subtitle { font-size: 12px; color: var(--jdp-text-disabled); margin-top: 2px; }
@media (max-width: 900px) { .jdp-platforms-tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .jdp-platforms-tile-grid { grid-template-columns: 1fr; } }
/* ============================================================
* HOME : SECTIONS SEO LONG-FORM (v0.3.1 mapping live)
* Partials : home-intro, home-credibility, home-platforms-detail,
* home-narrative, home-tips.
* ============================================================ */
/* Home intro (lede de section : eyebrow + titre + paragraphes accroche) */
.jdp-home-intro { padding: var(--sp-14) 0 var(--sp-10); }
.jdp-home-intro .jdp-section-header { margin-bottom: 0; }
.jdp-home-intro-body {
margin-top: var(--sp-7);
font-size: 16px;
color: var(--fg2);
line-height: 1.7;
max-width: 62ch;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.jdp-home-intro-body p { margin: 0 0 var(--sp-5); }
.jdp-home-intro-body p:last-child { margin-bottom: 0; }
/* ============================================================
* HOME CREDIBILITY : bande sombre, 4 stats (gros chiffres)
* Port redesign-home-v2.html (.cred-strip dark).
* Section sur fond var(--bg-dark) ; texte clair géré par
* le bloc .jdp-section--dark plus bas dans ce fichier.
* ============================================================ */
.jdp-home-credibility { padding: var(--sp-16) 0; }
.jdp-cred-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-top: var(--sp-12);
border-top: 1px solid var(--border-dark);
border-bottom: 1px solid var(--border-dark);
}
.jdp-cred-item {
padding: var(--sp-10) var(--sp-7);
border-right: 1px solid var(--border-dark);
}
.jdp-cred-item:last-child { border-right: none; }
.jdp-cred-num {
font-size: clamp(40px, 5vw, 64px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1;
color: var(--jdp-white);
font-variant-numeric: tabular-nums;
}
.jdp-cred-accent { color: var(--accent); }
.jdp-cred-unit { font-size: 0.5em; font-weight: 500; }
.jdp-cred-unit--muted { opacity: 0.5; }
.jdp-cred-label {
font-size: 13px;
color: var(--fg-on-dark2);
margin-top: var(--sp-3);
line-height: 1.5;
max-width: 30ch;
}
@media (max-width: 768px) {
.jdp-cred-strip { grid-template-columns: repeat(2, 1fr); }
.jdp-cred-item { border-bottom: 1px solid var(--border-dark); }
.jdp-cred-item:nth-child(odd) { border-right: 1px solid var(--border-dark); }
.jdp-cred-item:nth-child(even) { border-right: none; }
.jdp-cred-item:nth-last-child(-n+2) { border-bottom: none; }
}
/* Home platforms detail (5 plateformes verticales) */
.jdp-home-platforms-detail { padding: var(--sp-16) 0; }
.jdp-platforms-detail-list {
display: flex;
flex-direction: column;
gap: var(--sp-8);
margin-top: var(--sp-10);
max-width: 920px;
margin-left: auto;
margin-right: auto;
}
.jdp-platform-detail {
background: var(--jdp-white);
border: 1px solid var(--jdp-separator);
border-radius: 16px;
padding: var(--sp-8);
}
.jdp-platform-detail-title { font-weight: 700; font-size: 19px; color: var(--jdp-dark); margin: 0 0 var(--sp-4); }
.jdp-platform-detail-body { font-size: 14.5px; color: var(--fg2); line-height: 1.65; margin: 0 0 var(--sp-5); }
.jdp-platform-detail-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.jdp-platform-detail-bullets li {
position: relative;
padding-left: 22px;
font-size: 14px;
color: var(--fg2);
line-height: 1.55;
}
.jdp-platform-detail-bullets li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--accent);
font-weight: 700;
}
/* Home narrative (sections paragraphes "Devenez la star / Petit plus / Votre succès") */
/* Home narrative v2 : blocs éditoriaux containerisés (carte sobre, bordure complète), pas de texte nu. */
.jdp-home-narrative { padding: var(--sp-14) 0; background: var(--bg-soft); }
.jdp-narrative-block {
margin-bottom: var(--sp-6);
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--sp-10);
}
.jdp-narrative-block:last-child { margin-bottom: 0; }
.jdp-narrative-block h2 { margin: 0 0 var(--sp-5); }
.jdp-narrative-block p {
font-size: 15.5px;
color: var(--fg2);
line-height: 1.7;
margin: 0 0 var(--sp-4);
max-width: 68ch;
}
.jdp-narrative-block p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
.jdp-narrative-block { padding: var(--sp-7) var(--sp-6); }
}
/* Home tips v2 : 5 conseils, cards sobres, badge numéroté accent solide. */
.jdp-home-tips { padding: var(--sp-16) 0; }
.jdp-tips-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--sp-5);
margin-top: var(--sp-10);
}
.jdp-tip-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--sp-8) var(--sp-6);
position: relative;
transition: transform var(--dur-normal) var(--ease-out-quart), box-shadow var(--dur-normal) var(--ease-out-quart), border-color var(--dur-normal) var(--ease-out-quart);
}
.jdp-tip-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--fg3);
}
.jdp-tip-badge {
position: relative;
width: 56px;
height: 56px;
margin-bottom: var(--sp-5);
}
.jdp-tip-num {
width: 44px;
height: 44px;
border-radius: var(--radius-full);
background: var(--accent);
color: var(--bg);
font-weight: 800;
font-size: 17px;
display: inline-flex;
align-items: center;
justify-content: center;
letter-spacing: -0.01em;
}
.jdp-tip-icon {
position: absolute;
bottom: -4px;
right: -6px;
width: 26px;
height: 26px;
border-radius: var(--radius-full);
background: var(--bg);
color: var(--fg1);
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
}
.jdp-tip-icon svg {
width: 14px;
height: 14px;
stroke: var(--accent);
}
.jdp-tip-title {
font-weight: 600;
font-size: var(--fs-h4);
color: var(--fg1);
margin: 0 0 var(--sp-3);
letter-spacing: -0.01em;
line-height: 1.3;
}
.jdp-tip-body {
font-size: 14px;
color: var(--fg2);
line-height: 1.6;
margin: 0;
}
@media (max-width: 600px) {
.jdp-tip-card { padding: var(--sp-6) var(--sp-5); }
.jdp-tip-badge { width: 52px; height: 52px; margin-bottom: var(--sp-4); }
.jdp-tip-num { width: 40px; height: 40px; font-size: 16px; }
}
/* ============================================================
* PLATFORM HUB : hero scoped, breadcrumb, grid produits, content
* La variable --platform-color est posée sur .jdp-hub-hero
* et propagée via :root/page-level pour les sections suivantes.
* ============================================================ */
/* Couleur dynamique propagée : breadcrumb hover, prix, hover cards */
.jdp-hub-hero .jdp-check-circle { background: var(--platform-color, var(--accent)); }
.jdp-hub-hero .jdp-eyebrow { color: var(--platform-color, var(--accent)); }
.jdp-hub-hero .jdp-hero-trust strong { color: var(--platform-color, var(--jdp-dark)); }
.jdp-hub-hero .jdp-btn--primary {
background: var(--platform-color, var(--accent));
border-color: var(--platform-color, var(--accent));
}
.jdp-hub-hero .jdp-btn--primary:hover {
filter: brightness(0.92);
}
/* Hero hub : visual side = icon plateforme */
.jdp-hub-hero { background: var(--bg-soft); padding: 56px 0 64px; }
.jdp-hub-hero .jdp-hero-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 56px;
align-items: center;
}
.jdp-hub-hero-icon {
width: 240px;
height: 240px;
color: var(--platform-color, var(--accent));
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
filter: drop-shadow(0 14px 32px rgba(0,0,0,0.12));
}
.jdp-hub-hero-icon svg { width: 100%; height: 100%; }
/* Breadcrumb */
.jdp-hub-breadcrumb {
background: var(--bg-soft);
border-top: 1px solid var(--jdp-separator);
border-bottom: 1px solid var(--jdp-separator);
padding: 10px 0;
font-size: 12px;
color: var(--fg2);
}
.jdp-hub-breadcrumb .jdp-container {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.jdp-hub-breadcrumb-link {
color: var(--fg2);
text-decoration: none;
transition: color var(--dur-fast);
}
.jdp-hub-breadcrumb-link:hover,
.jdp-hub-breadcrumb-link:focus-visible {
color: var(--platform-color, var(--accent));
text-decoration: underline;
}
.jdp-hub-breadcrumb-sep { color: var(--fg3); }
.jdp-hub-breadcrumb-current { color: var(--jdp-dark); font-weight: 600; }
.jdp-hub-products { padding: var(--sp-14) 0; background: var(--jdp-white); }
.jdp-hub-products-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-6);
margin-top: var(--sp-10);
}
.jdp-hub-product-card {
position: relative;
background: var(--jdp-white);
border: 1px solid var(--jdp-separator);
border-radius: 14px;
overflow: hidden;
transition: transform var(--dur-normal), box-shadow var(--dur-normal), border-color var(--dur-normal);
}
.jdp-hub-product-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(0,0,0,0.08);
border-color: var(--platform-color, var(--accent));
}
/* Filigrane nom du reseau (repris du module liens hub home .jdp-bento-watermark). */
.jdp-hub-product-body {
position: relative;
}
.jdp-hub-product-watermark {
position: absolute;
bottom: -10px;
right: -6px;
font-size: 52px;
font-weight: 800;
letter-spacing: -0.06em;
line-height: 1;
color: rgba(0, 0, 0, 0.045);
text-transform: lowercase;
z-index: 0;
pointer-events: none;
user-select: none;
}
.jdp-hub-product-title,
.jdp-hub-product-price,
.jdp-hub-product-cta {
position: relative;
z-index: 1;
}
.jdp-hub-product-link {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
}
.jdp-hub-product-image {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--bg-soft);
}
.jdp-hub-product-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.jdp-hub-product-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.jdp-hub-product-title { font-weight: 700; font-size: 15px; color: var(--jdp-dark); margin: 0; line-height: 1.35; }
.jdp-hub-product-price { display: flex; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.jdp-hub-product-from { font-size: 12px; color: var(--fg2); }
.jdp-hub-product-amount { font-weight: 700; font-size: 18px; color: var(--platform-color, var(--accent)); }
.jdp-hub-product-amount .woocommerce-Price-amount { color: var(--platform-color, var(--accent)); }
.jdp-hub-product-amount .woocommerce-Price-amount .woocommerce-Price-currencySymbol { color: inherit; }
.jdp-hub-product-cta {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 600;
color: var(--jdp-dark);
margin-top: 6px;
}
.jdp-hub-product-card:hover .jdp-hub-product-cta { color: var(--platform-color, var(--accent)); }
.jdp-hub-products-empty { text-align: center; color: var(--fg2); padding: var(--sp-10) 0; }
@media (max-width: 1100px) { .jdp-hub-products-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .jdp-hub-products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .jdp-hub-products-grid { grid-template-columns: 1fr; } }
/* Hub content area (the_content() de la page) */
.jdp-hub-content { padding: var(--sp-14) 0; }
.jdp-hub-content .jdp-wp-content { font-size: 15.5px; color: var(--fg2); line-height: 1.7; }
.jdp-hub-content .jdp-wp-content h2 { margin-top: var(--sp-8); }
/* home-platforms-detail : liens bullets + CTA */
.jdp-platform-detail-bullet-link {
color: var(--jdp-dark);
text-decoration: none;
transition: color var(--dur-fast);
}
.jdp-platform-detail-bullet-link:hover {
color: var(--accent);
text-decoration: underline;
}
.jdp-platform-detail-cta {
margin-top: var(--sp-6);
display: inline-flex;
align-items: center;
gap: 6px;
}
/* =====================================================================
CTA BLOCKS (réutilisable, 5 variants)
Source design : source-v3/ui_kits/marketing-site/cta-library.html
Partial PHP : templates/parts/cta-block.php
===================================================================== */
.jdp-cta-block {
position: relative;
overflow: hidden;
width: 100%;
padding: var(--sp-16) 0;
}
.jdp-cta-block-inner {
position: relative;
max-width: var(--container-lg);
margin: 0 auto;
padding: 0 var(--sp-6);
}
@media (max-width: 600px) {
.jdp-cta-block-inner {
padding: 0 var(--sp-4);
}
}
.jdp-cta-block-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 12px;
}
.jdp-cta-block-title {
font-size: clamp(26px, 3vw, 34px);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.025em;
margin: 0 0 16px;
}
.jdp-cta-block-text {
font-size: 16px;
line-height: 1.6;
margin: 0 0 24px;
max-width: 560px;
}
.jdp-cta-block-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
.jdp-cta-block-trust {
margin: 14px 0 0;
font-size: 12px;
opacity: 0.75;
}
.jdp-cta-block-bullets {
list-style: none;
padding: 0;
margin: 0 0 24px;
display: flex;
flex-direction: column;
gap: 10px;
}
.jdp-cta-block-bullets li {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 500;
}
.jdp-cta-block-bullet-icon {
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--accent);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Span accent pour titres : couleur solide + poids (pas de gradient text). */
.jdp-cta-block-title .jdp-cta-accent {
color: var(--accent);
font-weight: 800;
}
/* === Backgrounds === */
.jdp-cta-block--bg-dark {
background: var(--bg-dark);
color: var(--fg-on-dark1);
}
.jdp-cta-block--bg-dark .jdp-cta-block-text { color: var(--fg-on-dark2); }
.jdp-cta-block--bg-dark .jdp-cta-block-title { color: var(--fg-on-dark1); }
.jdp-cta-block--bg-dark .jdp-cta-block-trust,
.jdp-cta-block--bg-dark .jdp-cta-block-trust strong { color: rgba(255, 255, 255, 0.78); }
.jdp-cta-block--bg-dark .jdp-cta-block-bullets li { color: rgba(255, 255, 255, 0.92); }
.jdp-cta-block--bg-soft {
background: var(--bg-soft);
color: var(--fg1);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.jdp-cta-block--bg-soft .jdp-cta-block-text { color: var(--fg2); }
.jdp-cta-block--bg-gradient {
background: linear-gradient(135deg, #E68A1C 0%, #FBA532 55%, #2baab1 100%);
color: #fff;
}
.jdp-cta-block--bg-gradient .jdp-cta-block-title,
.jdp-cta-block--bg-gradient .jdp-cta-block-text { color: #fff; }
.jdp-cta-block--bg-gradient .jdp-cta-block-eyebrow { color: #fff; opacity: 0.9; }
.jdp-cta-block--bg-accent {
background: var(--accent);
color: #fff;
}
.jdp-cta-block--bg-accent .jdp-cta-block-title,
.jdp-cta-block--bg-accent .jdp-cta-block-text { color: #fff; }
.jdp-cta-block--bg-accent .jdp-cta-block-eyebrow { color: #fff; opacity: 0.9; }
/* === Variant : banner (dark, deux colonnes copy/actions, blobs décoratifs) === */
/* Aligné sur source-v3/ui_kits/marketing-site/cta-library.html (.cta-banner) */
.jdp-cta-block--banner {
padding: 80px 40px;
}
.jdp-cta-block--banner.jdp-cta-block--bg-dark::before {
content: "";
position: absolute;
right: -10%;
top: -40%;
width: 700px;
height: 700px;
border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 60%);
pointer-events: none;
}
/* Layout 2 colonnes propre : copy col 1 + side col 2 (PHP wrapper .jdp-cta-block-side). */
.jdp-cta-block--banner .jdp-cta-block-inner {
max-width: 1080px;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 56px;
align-items: center;
padding: 0;
}
.jdp-cta-block--banner .jdp-cta-block-copy {
display: flex;
flex-direction: column;
gap: 14px;
}
.jdp-cta-block--banner .jdp-cta-block-eyebrow {
margin: 0;
}
.jdp-cta-block--banner .jdp-cta-block-title {
font-size: clamp(26px, 3vw, 34px);
margin: 0;
}
.jdp-cta-block--banner .jdp-cta-block-text {
margin: 0;
max-width: 540px;
}
.jdp-cta-block--banner .jdp-cta-block-bullets {
margin: 4px 0 0;
}
/* Side column (col 2) : encadré trust v2 (fond subtil + bordure + radius) */
.jdp-cta-block--banner .jdp-cta-block-side {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--sp-4);
align-self: center;
padding: var(--sp-8);
background: rgba(255,255,255,0.04);
border: 1px solid var(--border-dark);
border-radius: var(--radius-lg);
}
.jdp-cta-block--banner .jdp-cta-block-actions {
flex-direction: column;
align-items: stretch;
gap: 12px;
margin: 0;
}
.jdp-cta-block--banner .jdp-cta-block-trust {
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
font-size: 14px;
opacity: 1;
color: var(--fg-on-dark2);
}
.jdp-cta-block--banner .jdp-cta-block-trust strong,
.jdp-cta-block--banner .jdp-cta-block-trust b {
color: var(--fg-on-dark1);
font-weight: 700;
}
@media (max-width: 760px) {
.jdp-cta-block--banner {
padding: 64px 24px;
}
.jdp-cta-block--banner .jdp-cta-block-inner {
grid-template-columns: 1fr;
gap: 32px;
}
.jdp-cta-block--banner .jdp-cta-block-eyebrow,
.jdp-cta-block--banner .jdp-cta-block-title,
.jdp-cta-block--banner .jdp-cta-block-text,
.jdp-cta-block--banner .jdp-cta-block-bullets,
.jdp-cta-block--banner .jdp-cta-block-actions,
.jdp-cta-block--banner .jdp-cta-block-trust {
grid-column: 1;
}
.jdp-cta-block--banner .jdp-cta-block-actions {
align-items: stretch;
width: 100%;
}
}
/* === Variant : centered (CTA soft v2) === */
.jdp-cta-block--centered .jdp-cta-block-inner {
max-width: 720px;
text-align: center;
}
.jdp-cta-block--centered .jdp-cta-block-text {
margin-left: auto;
margin-right: auto;
font-size: 17px;
}
.jdp-cta-block--centered .jdp-cta-block-actions { justify-content: center; }
/* === Variant : split (visual gauche + copy droite) === */
/* Aligné sur source-v3/ui_kits/marketing-site/cta-library.html (.cta-split) */
.jdp-cta-block--split {
padding: 80px 40px;
background: var(--bg-light-alt, #F5F5F7);
}
.jdp-cta-block--split .jdp-cta-block-inner {
max-width: 1180px;
padding: 0;
background: #fff;
border-radius: 24px;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1.2fr;
box-shadow: 0 30px 60px rgba(15,15,18,.10), 0 10px 20px rgba(15,15,18,.05);
border: 1px solid var(--border-light, #E5E5E7);
}
.jdp-cta-block--split .jdp-cta-block-visual {
position: relative;
overflow: hidden;
min-height: 320px;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 32px;
}
.jdp-cta-block--split .jdp-cta-block-visual img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Visual gradient : fallback dégradé orange→teal du UI kit. Le hub override via --platform-color. */
.jdp-cta-block--split .jdp-cta-block-visual--gradient {
background: linear-gradient(135deg, #E68A1C 0%, #FBA532 55%, #2baab1 100%);
}
.jdp-cta-block--split .jdp-cta-block-visual--gradient::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 75% 20%, rgba(255,255,255,.35), transparent 50%);
pointer-events: none;
}
/* Card "+12 480 abonnés livrés" : horizontale compacte, blanc translucide, blur */
.jdp-cta-block--split .jdp-cta-block-visual-card {
position: relative;
background: rgba(255,255,255,.92);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
padding: 18px 22px;
border-radius: 14px;
box-shadow: 0 14px 30px rgba(0,0,0,.18);
display: flex;
align-items: center;
gap: 14px;
text-align: left;
align-self: flex-start;
}
.jdp-cta-block--split .jdp-cta-block-visual-num {
font-weight: 800;
font-size: 36px;
line-height: 1;
letter-spacing: -0.025em;
color: var(--platform-color, var(--accent));
font-variant-numeric: tabular-nums;
}
.jdp-cta-block--split .jdp-cta-block-visual-lab {
font-size: 12px;
color: var(--fg2, #4B5563);
line-height: 1.3;
font-weight: 500;
}
.jdp-cta-block--split .jdp-cta-block-visual-lab strong {
color: var(--jdp-dark, #000000);
font-weight: 700;
}
/* Copy side : padding asymétrique 48 48 48 44 (UI kit) */
.jdp-cta-block--split .jdp-cta-block-copy {
padding: 48px 48px 48px 44px;
display: flex;
flex-direction: column;
justify-content: center;
}
.jdp-cta-block--split .jdp-cta-block-eyebrow {
color: var(--platform-color, var(--accent));
margin: 0 0 12px;
}
.jdp-cta-block--split .jdp-cta-block-title {
font-size: clamp(24px, 3vw, 32px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0 0 14px;
color: var(--jdp-dark, #000000);
}
.jdp-cta-block--split .jdp-cta-block-title .jdp-cta-accent {
color: var(--platform-color, var(--accent));
font-weight: 800;
}
.jdp-cta-block--split .jdp-cta-block-text {
font-size: 15px;
color: var(--fg2, #4B5563);
line-height: 1.6;
margin: 0 0 22px;
}
.jdp-cta-block--split .jdp-cta-block-bullets {
gap: 8px;
margin: 0 0 26px;
}
.jdp-cta-block--split .jdp-cta-block-bullets li {
font-size: 13.5px;
font-weight: 500;
color: var(--jdp-dark, #000000);
}
.jdp-cta-block--split .jdp-cta-block-bullet-icon {
width: 20px;
height: 20px;
background: var(--platform-color, var(--accent));
}
.jdp-cta-block--split .jdp-cta-block-actions {
gap: 10px;
}
@media (max-width: 800px) {
.jdp-cta-block--split {
padding: 56px 20px;
}
.jdp-cta-block--split .jdp-cta-block-inner {
grid-template-columns: 1fr;
border-radius: 18px;
}
.jdp-cta-block--split .jdp-cta-block-visual {
min-height: 220px;
padding: 24px;
}
.jdp-cta-block--split .jdp-cta-block-visual-num {
font-size: 32px;
}
.jdp-cta-block--split .jdp-cta-block-copy {
padding: 32px 24px;
}
}
/* === Variant : promo strip (campagne, inline) === */
.jdp-cta-block--promo {
padding: 18px 0;
background: linear-gradient(90deg, #C91652 0%, #8a0d36 100%);
color: #fff;
}
.jdp-cta-block--promo .jdp-cta-block-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
flex-wrap: wrap;
}
.jdp-cta-block--promo .jdp-cta-block-title {
font-size: 14px;
font-weight: 600;
margin: 0;
letter-spacing: 0;
}
.jdp-cta-block--promo .jdp-cta-block-text { display: none; }
.jdp-cta-block--promo .jdp-cta-block-eyebrow { margin: 0; color: #fff; }
.jdp-cta-block--promo .jdp-cta-block-actions { margin: 0; }
/* =============================================================
* CHECKOUT v3 (page /checkout/)
* Override visuel form-checkout.php + WC standard.
* Layout 2 cols (left = form, right = récap sticky).
* ============================================================= */
.jdp-checkout-page-wrap {
max-width: var(--container-lg);
margin: 0 auto;
padding: 32px 24px 80px;
font-family: var(--font-sans, 'Poppins', sans-serif);
color: var(--fg1, #000000);
}
/* Breadcrumb */
.jdp-checkout-breadcrumb {
font-size: 12px;
color: var(--fg2, #69727D);
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 12px;
}
.jdp-checkout-breadcrumb a {
color: var(--fg2, #69727D);
text-decoration: none;
}
.jdp-checkout-breadcrumb a:hover { color: var(--accent, #E68A1C); }
.jdp-checkout-breadcrumb-sep { color: var(--fg3, #A5ADB8); }
.jdp-checkout-breadcrumb-current {
color: var(--fg1, #000000);
font-weight: 600;
}
/* Titre H1 */
.jdp-checkout-title {
font-family: var(--font-sans, 'Poppins', sans-serif);
font-weight: 800;
font-size: 36px;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--fg1, #000000);
margin: 8px 0 20px;
}
/* Stepper */
.jdp-checkout-stepper {
display: flex;
gap: 8px;
align-items: center;
list-style: none;
padding: 0;
margin: 0 0 28px;
flex-wrap: wrap;
}
.jdp-checkout-step {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border: 1px solid var(--border, #E9E6ED);
border-radius: 999px;
background: #fff;
font-size: 12.5px;
color: var(--fg2, #69727D);
font-weight: 600;
transition: background .2s, border-color .2s, color .2s;
}
.jdp-checkout-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--bg-soft, #F7F7F9);
color: var(--fg2, #69727D);
font-size: 11px;
font-weight: 800;
}
.jdp-checkout-step.is-active {
background: var(--accent-soft, #FEF6E6);
border-color: var(--accent, #E68A1C);
color: var(--accent, #E68A1C);
}
.jdp-checkout-step.is-active .jdp-checkout-step-num {
background: var(--accent, #E68A1C);
color: #fff;
}
.jdp-checkout-step.is-done {
background: #fff;
border-color: var(--border, #E9E6ED);
color: var(--fg1, #000000);
}
.jdp-checkout-step.is-done .jdp-checkout-step-num {
background: var(--fg1, #000000);
color: #fff;
}
/* Grille 2 cols */
.jdp-checkout-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 28px;
align-items: start;
}
/* Col left (formulaires) */
.jdp-checkout-col-left { min-width: 0; }
/* Customer details : passe en stack vertical (billing + shipping cards empilées) */
.jdp-checkout-customer {
display: flex;
flex-direction: column;
gap: 16px;
}
.jdp-checkout-customer .col-1,
.jdp-checkout-customer .col-2 { width: 100%; }
/* Cards billing / shipping / additional */
.jdp-checkout-form-section,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
background: #fff;
border: 1px solid var(--border, #E9E6ED);
border-radius: 14px;
padding: 22px 24px;
}
.jdp-checkout-form-section .woocommerce-billing-fields,
.jdp-checkout-form-section .woocommerce-shipping-fields,
.jdp-checkout-form-section .woocommerce-additional-fields {
background: transparent;
border: 0;
padding: 0;
}
.woocommerce-checkout h3 {
font-family: var(--font-sans, 'Poppins', sans-serif);
margin: 0 0 16px;
font-size: 16px;
font-weight: 700;
color: var(--fg1, #000000);
}
/* Col right (récap sticky) */
.jdp-checkout-col-right { min-width: 0; }
.jdp-checkout-summary {
position: sticky;
top: 24px;
background: #fff;
border: 1px solid var(--border, #E9E6ED);
border-radius: 14px;
padding: 22px 22px 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
.jdp-checkout-summary-title {
margin: 0;
font-family: var(--font-sans, 'Poppins', sans-serif);
font-weight: 700;
font-size: 16px;
color: var(--fg1, #000000);
}
/* Order review (table récap) */
.jdp-checkout-order-review {
background: transparent;
border: 0;
padding: 0;
}
.jdp-checkout-order-review table.shop_table {
width: 100%;
border: 0;
border-collapse: collapse;
background: transparent;
margin: 0;
}
.jdp-checkout-order-review table.shop_table thead { display: none; }
.jdp-checkout-order-review table.shop_table tbody tr.cart_item td {
padding: 8px 0;
border: 0;
border-bottom: 1px solid var(--border, #E9E6ED);
font-size: 13px;
color: var(--fg1, #000000);
}
.jdp-checkout-order-review table.shop_table .product-name {
font-weight: 600;
}
.jdp-checkout-order-review table.shop_table .product-quantity {
color: var(--fg2, #69727D);
font-weight: 500;
}
.jdp-checkout-order-review table.shop_table .product-total {
text-align: right;
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.jdp-checkout-order-review table.shop_table tfoot tr th,
.jdp-checkout-order-review table.shop_table tfoot tr td {
padding: 6px 0;
border: 0;
font-size: 13px;
color: var(--fg2, #69727D);
font-weight: 500;
}
.jdp-checkout-order-review table.shop_table tfoot tr td {
text-align: right;
color: var(--fg1, #000000);
font-variant-numeric: tabular-nums;
}
.jdp-checkout-order-review table.shop_table tfoot tr.cart-subtotal { font-size: 13px; }
.jdp-checkout-order-review table.shop_table tfoot tr.order-total th,
.jdp-checkout-order-review table.shop_table tfoot tr.order-total td {
border-top: 1px solid var(--border, #E9E6ED);
padding-top: 10px;
margin-top: 6px;
font-weight: 800;
font-size: 18px;
color: var(--fg1, #000000);
}
.jdp-checkout-order-review table.shop_table tfoot tr.cart-discount th,
.jdp-checkout-order-review table.shop_table tfoot tr.cart-discount td {
color: var(--accent, #E68A1C);
font-weight: 600;
}
/* Payment methods (à l'intérieur du récap) */
.jdp-checkout-order-review #payment,
.jdp-checkout-summary #payment {
background: transparent !important;
border: 0;
padding: 12px 0 0 !important;
margin: 6px 0 0;
}
.jdp-checkout-summary #payment ul.payment_methods {
background: transparent;
border: 0;
padding: 0;
margin: 0 0 12px;
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.jdp-checkout-summary #payment ul.payment_methods li {
padding: 12px 14px;
border: 1px solid var(--border, #E9E6ED);
border-radius: 10px;
background: #fff;
transition: background .15s, border-color .15s;
margin: 0;
}
.jdp-checkout-summary #payment ul.payment_methods li:has(input:checked) {
border-color: var(--accent, #E68A1C);
background: var(--accent-soft, #FEF6E6);
}
.jdp-checkout-summary #payment ul.payment_methods li label {
display: inline-block;
margin-left: 6px;
font-weight: 600;
font-size: 13px;
color: var(--fg1, #000000);
cursor: pointer;
}
.jdp-checkout-summary #payment .payment_box {
background: var(--bg-soft, #F7F7F9) !important;
border-radius: 8px;
padding: 12px 14px !important;
margin: 8px 0 0 !important;
font-size: 12.5px;
color: var(--fg2, #69727D);
}
.jdp-checkout-summary #payment .payment_box p:last-child { margin-bottom: 0; }
/* Terms */
.jdp-checkout-summary #payment .woocommerce-terms-and-conditions-wrapper {
margin: 8px 0 12px;
font-size: 12px;
color: var(--fg2, #69727D);
}
.jdp-checkout-summary #payment .woocommerce-terms-and-conditions-wrapper a {
color: var(--accent, #E68A1C);
font-weight: 600;
}
/* Place order button */
.jdp-checkout-summary #place_order {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
background: var(--accent, #E68A1C);
color: #fff;
border: 0;
border-radius: 12px;
padding: 16px 22px;
font-family: var(--font-sans, 'Poppins', sans-serif);
font-size: 15px;
font-weight: 800;
cursor: pointer;
min-height: 54px;
box-shadow: 0 10px 24px rgba(230, 138, 28, 0.32);
transition: background .2s, transform .2s;
margin-top: 6px;
}
.jdp-checkout-summary #place_order:hover,
.jdp-checkout-summary #place_order:focus-visible {
background: var(--accent-hover, #FBA532);
transform: translateY(-1px);
}
.jdp-checkout-summary #place_order:disabled {
opacity: .6;
cursor: not-allowed;
transform: none;
}
/* Garantie box */
.jdp-checkout-guarantee {
background: var(--bg-soft, #FAFAFB);
border: 1px solid #F0F0F2;
border-radius: 10px;
padding: 12px 14px;
font-size: 11.5px;
color: var(--fg2, #69727D);
line-height: 1.5;
}
.jdp-checkout-guarantee strong {
display: block;
color: var(--fg1, #000000);
font-weight: 700;
margin-bottom: 4px;
}
/* Trust row (payment logos) */
.jdp-checkout-trust-row {
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
padding-top: 4px;
}
.jdp-checkout-trust-row img {
height: 22px;
width: auto;
opacity: 0.9;
}
/* Note paiement sécurisé */
.jdp-checkout-secure-note {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
color: var(--fg2, #69727D);
justify-content: center;
}
.jdp-checkout-secure-note svg {
color: #1DB954;
flex-shrink: 0;
}
/* Champs WC : look v3 */
.woocommerce-checkout .form-row {
margin: 0 0 12px;
}
.woocommerce-checkout .form-row label {
font-family: var(--font-sans, 'Poppins', sans-serif);
font-size: 12px;
font-weight: 600;
color: var(--fg1, #000000);
margin-bottom: 6px;
display: block;
}
.woocommerce-checkout .form-row .required {
color: #C91652;
font-weight: 700;
text-decoration: none;
}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
width: 100%;
padding: 11px 14px;
border: 1px solid var(--border, #E9E6ED);
border-radius: 10px;
background: #fff;
color: var(--fg1, #000000);
font-family: var(--font-sans, 'Poppins', sans-serif);
font-size: 14px;
transition: border-color .15s, box-shadow .15s;
min-height: 44px;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
outline: none;
border-color: var(--accent, #E68A1C);
box-shadow: 0 0 0 3px rgba(230, 138, 28, 0.15);
}
/* Select2 (pays) compat */
.woocommerce-checkout .select2-container .select2-selection--single {
height: auto !important;
min-height: 44px !important;
padding: 6px 4px !important;
border-radius: 10px !important;
border: 1px solid var(--border, #E9E6ED) !important;
}
.woocommerce-checkout .select2-container--focus .select2-selection--single,
.woocommerce-checkout .select2-container--open .select2-selection--single {
border-color: var(--accent, #E68A1C) !important;
box-shadow: 0 0 0 3px rgba(230, 138, 28, 0.15);
}
.woocommerce-checkout .select2-selection__rendered {
line-height: 32px !important;
color: var(--fg1, #000000) !important;
}
/* Coupon form (au-dessus du form) */
.woocommerce-form-coupon-toggle {
margin: 0 0 16px;
}
.woocommerce-form-coupon-toggle .woocommerce-info {
background: var(--accent-soft, #FEF6E6);
border-left: 4px solid var(--accent, #E68A1C);
color: var(--fg1, #000000);
padding: 12px 14px;
border-radius: 8px;
font-size: 13px;
}
.woocommerce-form-coupon-toggle .showcoupon {
color: var(--accent, #E68A1C);
font-weight: 700;
text-decoration: none;
}
.woocommerce-form-coupon {
background: var(--bg-soft, #FAFAFB);
border: 1px solid var(--border, #E9E6ED);
border-radius: 12px;
padding: 16px;
margin: 0 0 16px;
}
.woocommerce-form-coupon .form-row { display: inline-block; vertical-align: top; }
/* Login form (au-dessus, si pas connecté) */
.woocommerce-form-login-toggle .woocommerce-info {
background: var(--bg-soft, #FAFAFB);
border-left: 4px solid var(--accent, #E68A1C);
padding: 12px 14px;
border-radius: 8px;
font-size: 13px;
color: var(--fg2, #69727D);
}
/* Notices WC */
.woocommerce-checkout .woocommerce-NoticeGroup,
.woocommerce-NoticeGroup-checkout {
margin-bottom: 16px;
}
/* Responsive : 2 cols -> 1 col */
@media (max-width: 900px) {
.jdp-checkout-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.jdp-checkout-summary {
position: static;
}
.jdp-checkout-title { font-size: 28px; }
.jdp-checkout-page-wrap { padding: 20px 16px 60px; }
}
@media (max-width: 600px) {
.jdp-checkout-form-section { padding: 18px 16px; }
.jdp-checkout-summary { padding: 18px 16px; }
.jdp-checkout-step-label { display: none; }
.jdp-checkout-step { padding: 8px 10px; }
}
/* =============================================================
* CART PAGE v3 (page /panier/)
* Override WooCommerce : cart.php + cart-empty.php.
* Layout 2 cols (left = items list, right = summary sticky).
* ============================================================= */
.jdp-cart-page,
.jdp-cart-empty-section {
padding: 48px 0 80px;
background: var(--bg, #fff);
}
.jdp-cart-page-breadcrumb {
display: flex;
gap: 8px;
align-items: center;
font-size: 13px;
color: var(--fg2, #69727D);
margin-bottom: 18px;
}
.jdp-cart-page-breadcrumb a {
color: var(--fg2, #69727D);
text-decoration: none;
transition: color .2s ease;
}
.jdp-cart-page-breadcrumb a:hover { color: var(--accent, #E68A1C); }
.jdp-cart-page-breadcrumb-current { color: var(--fg, #000000); font-weight: 600; }
.jdp-cart-page-header {
margin-bottom: 32px;
}
.jdp-cart-page-header .jdp-section-title {
margin: 0 0 6px;
}
.jdp-cart-page-count {
margin: 0;
color: var(--fg2, #69727D);
font-size: 14px;
}
/* Layout 2 cols */
.jdp-cart-page-wrap {
display: grid;
grid-template-columns: 1fr 380px;
gap: 32px;
align-items: start;
}
/* Items list (gauche) */
.jdp-cart-items {
background: #fff;
border: 1px solid var(--border, #E9E6ED);
border-radius: 14px;
padding: 8px 24px;
}
.jdp-cart-item {
display: grid;
grid-template-columns: 80px 1fr auto auto 36px;
grid-template-areas: "thumb body qty subtotal remove";
gap: 16px;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid var(--border, #F0F0F2);
}
.jdp-cart-item:last-of-type { border-bottom: 0; }
.jdp-cart-item-thumb {
grid-area: thumb;
width: 80px;
height: 80px;
border-radius: 10px;
background: var(--bg-soft, #FAFAFB);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.jdp-cart-item-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.jdp-cart-item-thumb a { display: block; width: 100%; height: 100%; }
.jdp-cart-item-body { grid-area: body; min-width: 0; }
.jdp-cart-item-title {
font-family: var(--font-display, "Poppins", sans-serif);
font-weight: 600;
font-size: 15px;
color: var(--fg, #000000);
line-height: 1.3;
margin-bottom: 4px;
}
.jdp-cart-item-title a {
color: inherit;
text-decoration: none;
}
.jdp-cart-item-title a:hover { color: var(--accent, #E68A1C); }
.jdp-cart-item-variant {
font-size: 12px;
color: var(--fg2, #69727D);
margin-bottom: 6px;
}
.jdp-cart-item-variant dl,
.jdp-cart-item-variant dt,
.jdp-cart-item-variant dd {
display: inline;
margin: 0;
padding: 0;
}
.jdp-cart-item-variant dt::after { content: ": "; }
.jdp-cart-item-variant dd::after { content: " · "; }
.jdp-cart-item-variant dd:last-of-type::after { content: ""; }
.jdp-cart-item-unit-price {
font-size: 12px;
color: var(--fg2, #69727D);
}
.jdp-cart-item-unit-price .amount { color: var(--fg, #000000); font-weight: 600; }
.jdp-cart-item-unit-label { margin-left: 2px; }
/* Qty stepper WC native restylé */
.jdp-cart-item-qty { grid-area: qty; }
.jdp-cart-item-qty .quantity {
display: inline-flex;
align-items: center;
border: 1px solid var(--border, #E9E6ED);
border-radius: 8px;
overflow: hidden;
background: #fff;
}
.jdp-cart-item-qty .quantity input[type="number"] {
width: 44px;
height: 36px;
border: 0;
background: transparent;
text-align: center;
font-family: var(--font-display, "Poppins", sans-serif);
font-size: 14px;
font-weight: 600;
color: var(--fg, #000000);
font-variant-numeric: tabular-nums;
-moz-appearance: textfield;
}
.jdp-cart-item-qty .quantity input[type="number"]::-webkit-outer-spin-button,
.jdp-cart-item-qty .quantity input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.jdp-cart-item-subtotal {
grid-area: subtotal;
font-family: var(--font-display, "Poppins", sans-serif);
font-weight: 800;
font-size: 16px;
color: var(--fg, #000000);
font-variant-numeric: tabular-nums;
min-width: 80px;
text-align: right;
}
.jdp-cart-item-remove { grid-area: remove; }
.jdp-cart-item-remove-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
color: #A5ADB8;
background: transparent;
border: 0;
cursor: pointer;
transition: background .2s ease, color .2s ease;
text-decoration: none;
}
.jdp-cart-item-remove-btn:hover {
background: #fdecec;
color: #d11a2a;
}
/* Actions row (coupon + update) */
.jdp-cart-actions-row {
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
padding: 20px 0 12px;
border-top: 1px solid var(--border, #F0F0F2);
margin-top: 4px;
flex-wrap: wrap;
}
.jdp-cart-coupon {
display: flex;
gap: 8px;
flex: 1;
max-width: 360px;
}
.jdp-cart-coupon-input {
flex: 1;
height: 40px;
border: 1px solid var(--border, #E9E6ED);
border-radius: 8px;
padding: 0 12px;
font-family: inherit;
font-size: 13px;
color: var(--fg, #000000);
background: #fff;
}
.jdp-cart-coupon-input:focus {
outline: none;
border-color: var(--accent, #E68A1C);
box-shadow: 0 0 0 3px rgba(230, 138, 28, 0.12);
}
.jdp-cart-coupon-btn {
height: 40px;
padding: 0 16px !important;
font-size: 13px !important;
}
.jdp-cart-update-btn {
height: 40px;
padding: 0 16px;
border: 1px solid var(--border, #E9E6ED);
background: #fff;
color: var(--fg2, #69727D);
border-radius: 8px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all .2s ease;
}
.jdp-cart-update-btn:hover {
border-color: var(--accent, #E68A1C);
color: var(--accent, #E68A1C);
}
.jdp-cart-continue-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 12px;
color: var(--fg2, #69727D);
font-size: 13px;
text-decoration: none;
transition: color .2s ease;
}
.jdp-cart-continue-link:hover { color: var(--accent, #E68A1C); }
/* Summary (droite, sticky) */
.jdp-cart-summary {
position: sticky;
top: 24px;
}
.jdp-cart-summary-inner {
background: #fff;
border: 1px solid var(--border, #E9E6ED);
border-radius: 14px;
padding: 24px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.jdp-cart-summary-title {
margin: 0 0 18px;
font-family: var(--font-display, "Poppins", sans-serif);
font-weight: 700;
font-size: 17px;
color: var(--fg, #000000);
}
.jdp-cart-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
font-size: 14px;
color: var(--fg2, #69727D);
}
.jdp-cart-summary-row strong {
color: var(--fg, #000000);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.jdp-cart-summary-row--discount { color: #1DB954; }
.jdp-cart-summary-row--discount strong { color: #1DB954; }
.jdp-cart-summary-row--total {
font-size: 16px;
font-weight: 700;
color: var(--fg, #000000);
padding: 10px 0 14px;
}
.jdp-cart-summary-row--total strong {
font-size: 18px;
font-weight: 800;
color: var(--fg, #000000);
}
.jdp-cart-summary-sep {
border: 0;
border-top: 1px solid var(--border, #E9E6ED);
margin: 8px 0 0;
}
.jdp-cart-checkout-btn {
width: 100%;
margin-top: 8px;
padding: 14px 20px !important;
font-size: 15px !important;
font-weight: 700 !important;
box-shadow: 0 6px 16px rgba(230, 138, 28, 0.28);
}
.jdp-cart-trust-list {
list-style: none;
padding: 0;
margin: 20px 0 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.jdp-cart-trust-list li {
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: var(--fg2, #69727D);
}
.jdp-cart-trust-list svg { flex-shrink: 0; }
.jdp-cart-payments {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
align-items: center;
padding-top: 12px;
border-top: 1px solid var(--border, #F0F0F2);
}
.jdp-cart-payments img {
height: 22px;
width: auto;
display: block;
}
/* ============================================================
Moyens de paiement (wordmarks HTML+CSS) : bloc commun
panier / commande / drawer. Repris du bloc fiche produit
(.smm-trust-block) qui fonctionne, sans dépendance SVG.
Partial : templates/parts/payment-methods.php.
============================================================ */
.jdp-paytrust-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--sp-2, 8px);
margin: 0;
padding: 0;
list-style: none;
}
.jdp-paytrust-card {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-1, 4px);
height: 38px;
min-width: 60px;
padding: 0 var(--sp-3, 12px);
background: #fff;
border: 1px solid var(--border, #e5e7eb);
border-radius: var(--radius-md, 9px);
box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, .06));
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
font-weight: 700;
line-height: 1;
letter-spacing: -.2px;
}
.jdp-paytrust-card svg {
display: block;
flex-shrink: 0;
width: 18px;
height: 18px;
}
.jdp-paytrust-paypal {
font-size: 18px;
font-weight: 800;
font-style: italic;
letter-spacing: -.3px;
}
.jdp-paytrust-paypal-1 { color: #003087; }
.jdp-paytrust-paypal-2 { color: #009cde; }
.jdp-paytrust-stripe {
font-size: 19px;
font-weight: 900;
color: #635BFF;
letter-spacing: -.5px;
font-family: Arial, sans-serif;
}
.jdp-paytrust-applepay {
font-size: 17px;
font-weight: 500;
color: #000;
}
.jdp-paytrust-gpay {
font-size: 16px;
font-weight: 500;
color: #5f6368;
}
.jdp-paytrust-ssl {
font-size: 13px;
font-weight: 700;
color: #10b981;
letter-spacing: .2px;
}
/* Footer : variante SOMBRE des cartes de paiement (le footer est noir, les pills blanches juraient).
Cartes sombres + wordmarks/icône Apple éclaircis pour rester lisibles. Scopé au footer :
panier, commande et drawer gardent les cartes blanches. */
.jdp-footer-payments .jdp-paytrust-card {
background: #1c1c20;
border-color: rgba(255, 255, 255, 0.12);
box-shadow: none;
}
.jdp-footer-payments .jdp-paytrust-paypal-1 { color: #ffffff; }
.jdp-footer-payments .jdp-paytrust-stripe { color: #8b85ff; }
.jdp-footer-payments .jdp-paytrust-applepay { color: #ffffff; }
.jdp-footer-payments .jdp-paytrust-gpay { color: #e8eaed; }
/* Icône Apple : fill noir d'origine -> blanc (le G Google reste multicolore, le cadenas SSL reste vert). */
.jdp-footer-payments .jdp-paytrust-card svg[fill="#000"] { fill: #ffffff; }
/* ============================================================
Bande preuve sociale (.jdp-social-proof) : sous le hero.
Visuel de marque (photo + likes) + signaux de confiance,
suivie du carrousel d'avis (trustpilot-rail). Fond clair,
photo a droite, empilement sur mobile.
============================================================ */
/* section.* : spécificité (1 élément + 1 classe) pour battre .jdp-section de
responsive.css (80/96px au desktop, chargé après), sinon du blanc revient
au-dessus et en dessous de l'image. Hauteur section = hauteur image. */
section.jdp-social-proof {
padding: var(--sp-10) 0 var(--sp-14); /* air au-dessus (séparation hero/breadcrumb) ; bas pour le carrousel d'avis intégré */
background: var(--bg);
}
/* Carrousel d'avis fusionné dans la section : espace sous la grille accroche + image. */
.jdp-proof-reviews {
margin-top: var(--sp-12);
}
.jdp-sp-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: var(--sp-10);
align-items: center;
}
.jdp-sp-title {
font-size: var(--fs-h2);
font-weight: 700;
line-height: 1.15;
color: var(--fg1);
margin: var(--sp-2) 0 var(--sp-4);
}
.jdp-sp-lead {
font-size: 17px;
line-height: 1.6;
color: var(--fg2);
margin: 0 0 var(--sp-6);
max-width: 46ch;
}
.jdp-sp-points {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.jdp-sp-point {
display: flex;
align-items: center;
gap: var(--sp-3);
font-size: 16px;
color: var(--fg2);
}
.jdp-sp-point strong { color: var(--fg1); font-weight: 700; }
.jdp-sp-ico {
flex-shrink: 0;
width: 22px;
height: 22px;
color: var(--accent);
}
.jdp-sp-ico--star { color: #00B67A; }
.jdp-sp-figure { margin: 0; position: relative; }
.jdp-sp-figure img {
width: 100%;
height: auto;
display: block;
}
/* Badge compteur "live" posé sur l'image (home) : pill noire arrondie, texte blanc,
chiffre vert, point vert clignotant. Le chiffre est animé en JS (initSocialProofCounter). */
/* Compteur d'interactions : même design que le compteur des fiches produit
(.jdp-hero-sp-counter dans product-content.css) : barre navy pleine largeur,
point vert statique, nombre vert clair. Animation count-up via data-jdp-counter
(initCounters dans main.js), pas d'incrément live. */
.jdp-sp-counter {
position: absolute;
left: 24px;
right: 24px;
bottom: 24px;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: rgba(17, 24, 39, 0.9);
color: var(--jdp-white);
border-radius: 16px;
line-height: 1.3;
box-shadow: 0 8px 20px rgba(17, 24, 39, 0.28);
}
.jdp-sp-counter-dot {
flex-shrink: 0;
width: 9px;
height: 9px;
border-radius: 50%;
background: #22C55E;
}
.jdp-sp-counter-text {
font-size: 12.5px;
font-weight: 600;
line-height: 1.3;
color: #fff;
}
.jdp-sp-counter-num {
color: #34D399;
font-weight: 800;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
.jdp-sp-counter { left: 16px; right: 16px; bottom: 16px; padding: 8px 12px; }
}
@media (max-width: 880px) {
section.jdp-social-proof { padding: var(--sp-8) 0; }
.jdp-sp-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
.jdp-sp-figure { order: -1; }
}
/* Empty state */
.jdp-cart-empty {
max-width: 480px;
margin: 40px auto 0;
padding: 48px 24px;
text-align: center;
background: #fff;
border: 1px solid var(--border, #E9E6ED);
border-radius: 16px;
}
.jdp-cart-empty-icon {
width: 96px;
height: 96px;
margin: 0 auto 24px;
border-radius: 50%;
background: var(--accent-soft, rgba(230, 138, 28, 0.1));
color: var(--accent, #E68A1C);
display: inline-flex;
align-items: center;
justify-content: center;
}
.jdp-cart-empty-title {
margin: 0 0 10px;
font-family: var(--font-display, "Poppins", sans-serif);
font-weight: 700;
font-size: 22px;
color: var(--fg, #000000);
}
.jdp-cart-empty-text {
margin: 0 0 24px;
font-size: 14px;
color: var(--fg2, #69727D);
line-height: 1.55;
}
.jdp-cart-empty-cta {
margin: 0 auto 28px;
}
.jdp-cart-empty-trust {
list-style: none;
padding: 24px 0 0;
margin: 0;
border-top: 1px solid var(--border, #F0F0F2);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 16px;
text-align: left;
}
.jdp-cart-empty-trust li {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--fg2, #69727D);
}
.jdp-cart-empty-trust svg { flex-shrink: 0; }
/* Responsive */
@media (max-width: 960px) {
.jdp-cart-page-wrap {
grid-template-columns: 1fr;
}
.jdp-cart-summary {
position: static;
}
}
@media (max-width: 640px) {
.jdp-cart-page,
.jdp-cart-empty-section { padding: 28px 0 60px; }
.jdp-cart-items { padding: 4px 16px; }
.jdp-cart-item {
grid-template-columns: 72px 1fr 32px;
grid-template-areas:
"thumb body remove"
"thumb qty subtotal";
gap: 12px;
padding: 16px 0;
}
.jdp-cart-item-thumb { width: 72px; height: 72px; }
.jdp-cart-item-title { font-size: 14px; }
.jdp-cart-item-subtotal { font-size: 14px; text-align: right; }
.jdp-cart-actions-row { flex-direction: column; align-items: stretch; }
.jdp-cart-coupon { max-width: 100%; }
.jdp-cart-update-btn { width: 100%; }
.jdp-cart-empty { padding: 32px 18px; }
.jdp-cart-empty-icon { width: 80px; height: 80px; margin-bottom: 18px; }
.jdp-cart-empty-title { font-size: 19px; }
.jdp-cart-empty-trust { grid-template-columns: 1fr; }
}
/* ============================================================
* MY-ACCOUNT v3
* Layout 2 cols (sidebar nav + content), cards radius 14px,
* tokens du thème (--accent, --jdp-dark, --jdp-separator, --bg-soft,
* --fg2, --sp-*). Réutilise le pattern de .jdp-credibility-card.
* ============================================================ */
/* Wrap section : on l'accroche au container WC fallback (.jdp-wc) */
.jdp-wc .woocommerce { padding: 0; }
.jdp-wc .woocommerce-MyAccount-content { all: unset; display: block; }
body:not(.single-product) .jdp-wc h1.entry-title,
.jdp-wc .page-title { display: none; }
.jdp-myaccount-wrap {
display: grid;
grid-template-columns: 260px 1fr;
gap: var(--sp-8);
align-items: start;
padding: var(--sp-10) 0 var(--sp-14);
}
/* ---- Sidebar nav ---- */
.jdp-myaccount-nav {
position: sticky;
top: 96px;
}
.jdp-myaccount-nav-list ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--sp-2);
background: var(--jdp-white);
border: 1px solid var(--jdp-separator);
border-radius: 14px;
padding: var(--sp-4);
}
.jdp-myaccount-nav-item { margin: 0; }
.jdp-myaccount-nav-link {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: 10px 12px;
border-radius: 10px;
color: var(--jdp-dark);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: background var(--dur-fast), color var(--dur-fast);
}
.jdp-myaccount-nav-link:hover {
background: var(--bg-soft);
color: var(--accent);
}
.jdp-myaccount-nav-link.is-active {
background: var(--accent);
color: var(--jdp-white);
box-shadow: 0 6px 16px -6px rgba(230, 138, 28, 0.45);
}
.jdp-myaccount-nav-link.is-active .jdp-myaccount-nav-icon { color: var(--jdp-white); }
.jdp-myaccount-nav-icon {
display: inline-flex;
width: 22px;
height: 22px;
align-items: center;
justify-content: center;
color: var(--fg2);
flex-shrink: 0;
}
.jdp-myaccount-nav-link:hover .jdp-myaccount-nav-icon { color: var(--accent); }
.jdp-myaccount-nav-label { line-height: 1.2; }
/* ---- Content area ---- */
.jdp-myaccount-content {
min-width: 0;
}
.jdp-myaccount-content > p:first-child,
.jdp-myaccount-content > .woocommerce-message,
.jdp-myaccount-content > .woocommerce-info,
.jdp-myaccount-content > .woocommerce-error {
margin: 0 0 var(--sp-6);
}
/* ---- Section header (orders, downloads, etc.) ---- */
.jdp-myaccount-section-header { margin: 0 0 var(--sp-7); }
.jdp-myaccount-section-title {
font-size: 24px;
font-weight: 700;
color: var(--jdp-dark);
margin: 0 0 6px;
}
.jdp-myaccount-section-sub {
font-size: 14px;
color: var(--fg2);
margin: 0;
}
/* ---- Dashboard header ---- */
.jdp-myaccount-dashboard-header { margin: 0 0 var(--sp-8); }
.jdp-myaccount-dashboard-hello {
font-size: 28px;
font-weight: 700;
color: var(--jdp-dark);
margin: var(--sp-2) 0 var(--sp-3);
line-height: 1.2;
}
.jdp-myaccount-dashboard-name { color: var(--accent); }
.jdp-myaccount-dashboard-intro {
font-size: 15px;
color: var(--fg2);
line-height: 1.6;
margin: 0;
max-width: 640px;
}
/* ---- Dashboard grid (4 cards) ---- */
.jdp-myaccount-dashboard-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-5);
margin: 0 0 var(--sp-8);
}
/* ---- Card (réutilise pattern .jdp-credibility-card) ---- */
.jdp-myaccount-card {
background: var(--jdp-white);
border: 1px solid var(--jdp-separator);
border-radius: 14px;
padding: var(--sp-6);
transition: transform var(--dur-normal), box-shadow var(--dur-normal), border-color var(--dur-normal);
}
.jdp-myaccount-card--link {
display: flex;
flex-direction: column;
gap: 8px;
color: var(--jdp-dark);
text-decoration: none;
}
.jdp-myaccount-card--link:hover {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07);
border-color: var(--accent);
}
.jdp-myaccount-card-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--bg-soft);
color: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: var(--sp-2);
transition: background var(--dur-fast), color var(--dur-fast);
}
.jdp-myaccount-card--link:hover .jdp-myaccount-card-icon {
background: var(--accent);
color: var(--jdp-white);
}
.jdp-myaccount-card-title {
display: block;
font-weight: 700;
font-size: 16px;
color: var(--jdp-dark);
}
.jdp-myaccount-card-body {
display: block;
font-size: 13.5px;
color: var(--fg2);
line-height: 1.55;
}
.jdp-myaccount-card-sub {
font-size: 14px;
color: var(--fg2);
margin: 6px 0 0;
}
.jdp-myaccount-card-header { margin: 0 0 var(--sp-5); }
.jdp-myaccount-dashboard-logout { margin: 0; }
/* ---- Login / register grid ---- */
.jdp-myaccount-login-grid {
display: grid;
gap: var(--sp-6);
max-width: 920px;
margin: 0 auto;
padding: var(--sp-4) 0 var(--sp-8);
}
.jdp-myaccount-login-grid--two { grid-template-columns: repeat(2, 1fr); }
.jdp-myaccount-login-grid--one { grid-template-columns: 1fr; max-width: 480px; }
.jdp-myaccount-card--form { padding: var(--sp-8); }
/* ---- Form fields (login + register) ---- */
.jdp-myaccount-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.jdp-myaccount-form-row { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.jdp-myaccount-form-row label {
font-size: 13px;
font-weight: 600;
color: var(--jdp-dark);
}
.jdp-myaccount-form-row .required { color: var(--accent); text-decoration: none; }
.jdp-myaccount-input,
.jdp-myaccount-form input[type="text"],
.jdp-myaccount-form input[type="email"],
.jdp-myaccount-form input[type="password"] {
width: 100%;
padding: 11px 14px;
border: 1px solid var(--jdp-separator);
border-radius: 10px;
font-size: 14px;
color: var(--jdp-dark);
background: var(--jdp-white);
transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
font-family: inherit;
}
.jdp-myaccount-input:focus,
.jdp-myaccount-form input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(230, 138, 28, 0.15);
}
.jdp-myaccount-form-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
flex-wrap: wrap;
margin: var(--sp-2) 0 0;
}
.jdp-myaccount-form-actions button { margin-left: auto; }
.jdp-myaccount-remember {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--fg2);
font-weight: 500;
cursor: pointer;
}
.jdp-myaccount-remember input { width: auto; margin: 0; }
.jdp-myaccount-lost {
margin: var(--sp-2) 0 0;
font-size: 13px;
}
.jdp-myaccount-lost a { color: var(--accent); text-decoration: none; }
.jdp-myaccount-lost a:hover { text-decoration: underline; }
.jdp-myaccount-form-hint {
font-size: 13px;
color: var(--fg2);
background: var(--bg-soft);
border-radius: 8px;
padding: 10px 12px;
margin: 0;
}
/* ---- Orders table ---- */
.jdp-myaccount-orders-wrap {
background: var(--jdp-white);
border: 1px solid var(--jdp-separator);
border-radius: 14px;
overflow: hidden;
}
.jdp-myaccount-orders-table {
width: 100%;
border-collapse: collapse;
margin: 0;
font-size: 14px;
}
.jdp-myaccount-orders-table thead th {
text-align: left;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--fg2);
background: var(--bg-soft);
padding: 14px 18px;
border-bottom: 1px solid var(--jdp-separator);
}
.jdp-myaccount-orders-table tbody td,
.jdp-myaccount-orders-table tbody th {
padding: 16px 18px;
border-bottom: 1px solid var(--jdp-separator);
vertical-align: middle;
color: var(--jdp-dark);
font-weight: 500;
text-align: left;
}
.jdp-myaccount-orders-table tbody tr:last-child td,
.jdp-myaccount-orders-table tbody tr:last-child th {
border-bottom: 0;
}
.jdp-myaccount-orders-num {
color: var(--accent);
text-decoration: none;
font-weight: 700;
}
.jdp-myaccount-orders-num:hover { text-decoration: underline; }
.jdp-myaccount-orders-date,
.jdp-myaccount-orders-total { color: var(--fg2); font-weight: 500; }
.jdp-myaccount-orders-table .jdp-btn { margin-right: 6px; }
.jdp-myaccount-orders-table .jdp-btn:last-child { margin-right: 0; }
.jdp-myaccount-orders-pagination {
display: flex;
justify-content: space-between;
gap: var(--sp-3);
margin-top: var(--sp-5);
}
/* ---- Status badges ---- */
.jdp-status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
text-transform: capitalize;
background: var(--bg-soft);
color: var(--fg2);
border: 1px solid var(--jdp-separator);
}
.jdp-status-badge::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
/* Terminée -> vert */
.jdp-status-badge--completed {
background: #E8F7EE;
color: #1F8A4C;
border-color: rgba(31, 138, 76, 0.2);
}
/* En cours / traitement -> orange */
.jdp-status-badge--processing,
.jdp-status-badge--on-hold,
.jdp-status-badge--pending {
background: #FFF5E1;
color: #B8740A;
border-color: rgba(184, 116, 10, 0.2);
}
/* Annulée / échouée / remboursée -> rouge */
.jdp-status-badge--cancelled,
.jdp-status-badge--failed,
.jdp-status-badge--refunded {
background: #FDECEC;
color: #C03434;
border-color: rgba(192, 52, 52, 0.2);
}
/* ---- Empty state ---- */
.jdp-myaccount-empty {
background: var(--jdp-white);
border: 1px solid var(--jdp-separator);
border-radius: 14px;
padding: var(--sp-12) var(--sp-6);
text-align: center;
}
.jdp-myaccount-empty-icon {
width: 56px;
height: 56px;
color: var(--accent);
margin: 0 auto var(--sp-4);
display: block;
}
.jdp-myaccount-empty-title {
font-size: 20px;
font-weight: 700;
color: var(--jdp-dark);
margin: 0 0 8px;
}
.jdp-myaccount-empty-body {
font-size: 14px;
color: var(--fg2);
margin: 0 0 var(--sp-6);
}
/* ---- Generic WC forms inside content area (edit-address, edit-account) ---- */
.jdp-myaccount-content .woocommerce-EditAccountForm,
.jdp-myaccount-content .woocommerce-address-fields__field-wrapper,
.jdp-myaccount-content form.edit-account,
.jdp-myaccount-content form.woocommerce-address-fields {
background: var(--jdp-white);
border: 1px solid var(--jdp-separator);
border-radius: 14px;
padding: var(--sp-7);
}
.jdp-myaccount-content .form-row input[type="text"],
.jdp-myaccount-content .form-row input[type="email"],
.jdp-myaccount-content .form-row input[type="password"],
.jdp-myaccount-content .form-row input[type="tel"],
.jdp-myaccount-content .form-row select {
width: 100%;
padding: 11px 14px;
border: 1px solid var(--jdp-separator);
border-radius: 10px;
font-size: 14px;
background: var(--jdp-white);
font-family: inherit;
transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.jdp-myaccount-content .form-row input:focus,
.jdp-myaccount-content .form-row select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(230, 138, 28, 0.15);
}
.jdp-myaccount-content .button,
.jdp-myaccount-content button[type="submit"] {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-6);
border-radius: var(--radius-md, 10px);
background: var(--accent);
color: var(--jdp-white);
font-weight: 600;
font-size: 14px;
border: 0;
cursor: pointer;
text-decoration: none;
transition: background var(--dur-normal);
}
.jdp-myaccount-content .button:hover,
.jdp-myaccount-content button[type="submit"]:hover {
background: var(--accent-hover, #b87f02);
color: var(--jdp-white);
}
/* ============================================================
* MY-ACCOUNT v3 : RESPONSIVE
* ============================================================ */
@media (max-width: 960px) {
.jdp-myaccount-wrap { grid-template-columns: 1fr; gap: var(--sp-6); }
.jdp-myaccount-nav { position: static; }
.jdp-myaccount-nav-list ul {
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
}
.jdp-myaccount-nav-link { padding: 8px 12px; font-size: 13px; }
.jdp-myaccount-login-grid--two { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.jdp-myaccount-dashboard-grid { grid-template-columns: 1fr; }
.jdp-myaccount-dashboard-hello { font-size: 22px; }
.jdp-myaccount-section-title { font-size: 20px; }
.jdp-myaccount-card--form { padding: var(--sp-6); }
/* Orders : passe en mode liste responsive */
.jdp-myaccount-orders-table thead { display: none; }
.jdp-myaccount-orders-table,
.jdp-myaccount-orders-table tbody,
.jdp-myaccount-orders-table tr {
display: block;
width: 100%;
}
.jdp-myaccount-orders-table tbody td,
.jdp-myaccount-orders-table tbody th {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 16px;
border-bottom: 1px solid var(--jdp-separator);
text-align: right;
}
.jdp-myaccount-orders-table tbody td::before,
.jdp-myaccount-orders-table tbody th::before {
content: attr(data-title);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
color: var(--fg2);
letter-spacing: 0.04em;
margin-right: var(--sp-3);
}
.jdp-myaccount-orders-table tbody tr {
border: 1px solid var(--jdp-separator);
border-radius: 12px;
margin: 0 0 var(--sp-3);
overflow: hidden;
}
.jdp-myaccount-orders-wrap { border: 0; padding: 0; background: transparent; }
}
/* ============================================================
* SINGLE PRODUCT v3 (refonte fidele ProductPage.jsx)
* Complete product.css : layout sticky, payment row, trust
* bullets, related grid v3, tabs polish. Preserve hooks WC.
* ============================================================ */
.jdp-product-page-wrap {
background: var(--jdp-white);
padding: var(--sp-5) 0 var(--sp-14);
}
/* Proportions fiche prod : container Elementor 1140px, colonnes 50/50, gouttière 30px (2x15px padding). */
.jdp-product-page-wrap .product {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
max-width: 1140px;
margin: 0 auto;
}
/* Conteneur colonne galerie : enveloppe la photo + le widget social-proof (hors flexslider).
C'est lui le cell grille de gauche, il ne doit pas s'etirer sur la hauteur du resume. */
.jdp-product-page-wrap .jdp-gallery-col {
align-self: start;
min-width: 0;
}
.jdp-product-page-wrap .woocommerce-product-gallery {
width: 100% !important;
float: none !important;
margin: 0 !important; /* la separation avec le widget vient de la marge haute du widget (snippet) */
position: static;
align-self: start;
height: fit-content;
}
.jdp-product-page-wrap .woocommerce-product-gallery__image {
border-radius: 18px;
overflow: hidden;
border: 1px solid var(--border);
background: var(--bg-soft);
aspect-ratio: 1 / 1;
}
.jdp-product-page-wrap .woocommerce-product-gallery__image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 18px;
display: block;
}
.jdp-product-page-wrap .flex-control-thumbs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin: 12px 0 0;
padding: 0;
list-style: none;
}
.jdp-product-page-wrap .flex-control-thumbs li { margin: 0; }
.jdp-product-page-wrap .flex-control-thumbs img {
border-radius: 10px;
border: 1px solid var(--border);
cursor: pointer;
opacity: 0.85;
aspect-ratio: 1 / 1;
object-fit: cover;
width: 100%;
height: auto;
transition: opacity var(--dur-fast), border-color var(--dur-fast);
}
.jdp-product-page-wrap .flex-control-thumbs img:hover,
.jdp-product-page-wrap .flex-control-thumbs img.flex-active {
opacity: 1;
border: 2px solid var(--accent);
}
.jdp-product-page-wrap .summary {
width: 100% !important;
float: none !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 18px;
font-family: var(--font-sans);
}
.jdp-product-page-wrap .product_title {
font-weight: 800;
font-size: 34px;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--fg1);
margin: 0;
}
.jdp-product-page-wrap .woocommerce-product-rating {
display: flex;
align-items: center;
gap: 14px;
font-size: 13px;
color: var(--fg2);
margin: 0;
}
.jdp-product-page-wrap .woocommerce-product-rating .star-rating {
color: var(--accent);
font-size: 16px;
letter-spacing: 1px;
}
.jdp-product-page-wrap .woocommerce-review-link {
color: var(--fg2);
text-decoration: none;
font-weight: 500;
}
.jdp-product-page-wrap .woocommerce-review-link:hover { color: var(--accent); }
.jdp-product-page-wrap .summary .price {
padding: 16px 18px;
border-radius: 14px;
background: var(--bg-soft);
border: 1px solid var(--border);
display: flex;
align-items: baseline;
gap: 14px;
flex-wrap: wrap;
margin: 0;
}
.jdp-product-page-wrap .summary .price ins,
.jdp-product-page-wrap .summary .price > .amount,
.jdp-product-page-wrap .summary .price ins .amount {
font-weight: 800;
font-size: 32px;
color: var(--accent);
font-variant-numeric: tabular-nums;
text-decoration: none;
background: transparent;
}
.jdp-product-page-wrap .summary .price del,
.jdp-product-page-wrap .summary .price del .amount {
font-size: 16px;
font-weight: 400;
color: var(--fg3);
text-decoration: line-through;
}
.jdp-product-page-wrap .woocommerce-product-details__short-description {
color: var(--fg2);
font-size: 15px;
line-height: 1.55;
margin: 0;
}
.jdp-product-page-wrap .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }
.jdp-product-page-wrap form.variations_form { margin: 0; }
.jdp-product-page-wrap table.variations {
margin: 0;
border: 0;
width: 100%;
}
.jdp-product-page-wrap table.variations tbody { display: flex; flex-direction: column; gap: 12px; }
.jdp-product-page-wrap table.variations tr { display: flex; flex-direction: column; gap: 6px; }
.jdp-product-page-wrap table.variations th,
.jdp-product-page-wrap table.variations td {
padding: 0;
border: 0;
font-family: var(--font-sans);
background: transparent;
display: block;
width: 100%;
}
.jdp-product-page-wrap table.variations th.label {
font-weight: 600;
font-size: 12px;
color: var(--fg1);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.jdp-product-page-wrap table.variations select {
width: 100%;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--jdp-white);
color: var(--fg1);
font-family: var(--font-sans);
font-size: 14px;
min-height: 48px;
cursor: pointer;
}
.jdp-product-page-wrap table.variations select:focus {
outline: 0;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(230, 138, 28, 0.15);
}
.jdp-product-page-wrap .reset_variations {
display: inline-block;
margin-top: 4px;
font-size: 12px;
color: var(--fg2);
text-decoration: underline;
}
.jdp-product-page-wrap .single_variation_wrap { margin-top: 6px; }
.jdp-product-page-wrap .woocommerce-variation-price {
padding: 12px 16px;
border-radius: 12px;
background: #FEF6E6;
border: 1px solid #F4D78A;
margin-bottom: 12px;
}
.jdp-product-page-wrap .woocommerce-variation-price .price,
.jdp-product-page-wrap .woocommerce-variation-price .amount {
color: var(--accent);
font-weight: 800;
font-size: 26px;
font-variant-numeric: tabular-nums;
}
.jdp-product-page-wrap .woocommerce-variation-description { font-size: 13px; color: var(--fg2); margin-bottom: 12px; }
.jdp-product-page-wrap .woocommerce-variation-availability { font-size: 12px; color: var(--fg2); margin-bottom: 8px; }
.jdp-product-page-wrap .cart {
display: flex;
gap: 10px;
align-items: center;
margin: 4px 0 0;
}
.jdp-product-page-wrap .cart .quantity {
display: inline-flex;
align-items: center;
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
height: 50px;
background: var(--jdp-white);
}
.jdp-product-page-wrap .cart .quantity input.qty {
width: 60px;
height: 100%;
border: 0;
text-align: center;
font-family: var(--font-sans);
font-size: 16px;
font-weight: 700;
font-variant-numeric: tabular-nums;
background: transparent;
color: var(--fg1);
-moz-appearance: textfield;
}
.jdp-product-page-wrap .cart .quantity input.qty::-webkit-outer-spin-button,
.jdp-product-page-wrap .cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.jdp-product-page-wrap .cart .quantity input.qty:focus { outline: 0; }
.jdp-product-page-wrap .single_add_to_cart_button {
flex: 1;
background: var(--accent);
color: var(--jdp-white);
border: 0;
border-radius: 10px;
padding: 16px 22px;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 800;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 50px;
box-shadow: 0 8px 22px rgba(230, 138, 28, 0.32);
transition: background var(--dur-normal), transform var(--dur-fast);
text-transform: none;
letter-spacing: 0;
}
.jdp-product-page-wrap .single_add_to_cart_button:hover,
.jdp-product-page-wrap .single_add_to_cart_button:focus-visible {
background: var(--accent-hover);
transform: translateY(-1px);
}
.jdp-product-page-wrap .single_add_to_cart_button.disabled,
.jdp-product-page-wrap .single_add_to_cart_button:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.jdp-product-trust-bullets {
list-style: none;
padding: 0;
margin: 4px 0 0;
display: flex;
flex-direction: column;
gap: 6px;
font-size: 12px;
color: var(--fg2);
}
.jdp-product-trust-bullets li {
display: flex;
align-items: center;
gap: 6px;
}
.jdp-product-trust-bullets li::before {
content: "\2713";
color: #1DB954;
font-weight: 700;
flex-shrink: 0;
}
.jdp-product-page-wrap .jdp-product-reassurance { margin-top: 6px; }
.jdp-product-payment-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding: 12px 14px;
background: var(--bg-soft);
border: 1px dashed var(--border);
border-radius: 10px;
margin-top: 4px;
}
.jdp-product-payment-row-label {
font-size: 11px;
font-weight: 600;
color: var(--fg2);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.jdp-product-payment-row-badges {
display: inline-flex;
gap: 6px;
flex-wrap: wrap;
}
.jdp-product-payment-badge {
background: var(--jdp-white);
border: 1px solid var(--border);
border-radius: 6px;
padding: 4px 9px;
font-size: 10px;
font-weight: 800;
color: var(--fg1);
letter-spacing: 0.04em;
font-family: var(--font-sans);
line-height: 1.2;
display: inline-flex;
align-items: center;
min-height: 22px;
}
.jdp-product-page-wrap .product_meta {
margin-top: 4px;
font-size: 12px;
color: var(--fg2);
padding-top: 14px;
border-top: 1px solid var(--border);
}
.jdp-product-page-wrap .product_meta a { color: var(--fg2); text-decoration: none; }
.jdp-product-page-wrap .product_meta a:hover { color: var(--accent); }
.jdp-product-page-wrap .woocommerce-tabs {
grid-column: 1 / -1;
margin-top: var(--sp-8);
padding: 0;
}
/* Onglets fiche produit : cartes stylées dans product-content.css (source de vérité). */
.jdp-product-page-wrap .woocommerce-Tabs-panel {
font-family: var(--font-sans);
color: var(--fg1);
line-height: 1.7;
font-size: 15.5px;
max-width: 1100px;
}
/* Panneau Avis : bloc centré dans la bande pleine largeur (le texte reste aligné à gauche).
Spécificité renforcée (html + div + double classe) pour battre la marge imposée par le
snippet #143 (CSS inline en footer, à retirer lors de la migration du snippet). */
html body.single-product .jdp-product-page-wrap div.woocommerce-tabs .woocommerce-Tabs-panel.woocommerce-Tabs-panel--reviews {
margin-left: auto !important;
margin-right: auto !important;
}
.jdp-product-page-wrap .woocommerce-Tabs-panel h2 {
font-weight: 700;
font-size: 22px;
margin: 18px 0 10px;
color: var(--fg1);
}
.jdp-product-page-wrap .woocommerce-Tabs-panel h3 {
font-weight: 700;
font-size: 17px;
margin: 16px 0 8px;
color: var(--fg1);
}
.jdp-product-page-wrap .woocommerce-Tabs-panel p,
.jdp-product-page-wrap .woocommerce-Tabs-panel li {
color: #3a414b;
}
.jdp-product-page-wrap .woocommerce-Tabs-panel ul,
.jdp-product-page-wrap .woocommerce-Tabs-panel ol { padding-left: 22px; margin: 0 0 14px; }
.jdp-product-page-wrap .woocommerce-Tabs-panel li { margin-bottom: 6px; }
.jdp-product-page-wrap .woocommerce-Tabs-panel strong { color: var(--fg1); }
.jdp-product-page-wrap #comments .commentlist {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.jdp-product-page-wrap #comments .commentlist li {
background: var(--jdp-white);
border: 1px solid var(--border);
border-radius: 12px;
padding: 18px;
margin: 0;
}
.jdp-product-page-wrap #comments .meta {
font-size: 13px;
color: var(--fg2);
margin-bottom: 6px;
}
.jdp-product-page-wrap #review_form_wrapper {
margin-top: var(--sp-6);
padding-top: var(--sp-6);
border-top: 1px solid var(--border);
}
.jdp-product-page-wrap #review_form textarea,
.jdp-product-page-wrap #review_form input[type="text"],
.jdp-product-page-wrap #review_form input[type="email"] {
width: 100%;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid var(--border);
font-family: var(--font-sans);
font-size: 14px;
}
.jdp-product-page-wrap .related.products,
.jdp-product-page-wrap .upsells.products {
grid-column: 1 / -1;
margin-top: var(--sp-12);
padding-top: var(--sp-8);
border-top: 1px solid var(--border);
}
.jdp-product-page-wrap .related.products > h2,
.jdp-product-page-wrap .upsells.products > h2 {
font-weight: 700;
font-size: 24px;
color: var(--fg1);
margin: 0 0 var(--sp-6);
letter-spacing: -0.01em;
}
.jdp-product-page-wrap .related .products,
.jdp-product-page-wrap .upsells .products {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
list-style: none;
padding: 0;
margin: 0;
}
.jdp-product-page-wrap .related li.product,
.jdp-product-page-wrap .upsells li.product {
background: var(--jdp-white);
border: 1px solid var(--border);
border-radius: 14px;
padding: 16px;
margin: 0;
transition: transform var(--dur-normal), box-shadow var(--dur-normal);
display: flex;
flex-direction: column;
gap: 8px;
}
.jdp-product-page-wrap .related li.product:hover,
.jdp-product-page-wrap .upsells li.product:hover {
transform: translateY(-3px);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
}
.jdp-product-page-wrap .related li.product img,
.jdp-product-page-wrap .upsells li.product img {
border-radius: 10px;
aspect-ratio: 1 / 1;
object-fit: cover;
width: 100%;
height: auto;
}
.jdp-product-page-wrap .related li.product .woocommerce-loop-product__title,
.jdp-product-page-wrap .upsells li.product .woocommerce-loop-product__title {
font-size: 14px;
font-weight: 700;
color: var(--fg1);
margin: 0;
line-height: 1.3;
}
.jdp-product-page-wrap .related li.product .price,
.jdp-product-page-wrap .upsells li.product .price {
font-size: 15px;
font-weight: 800;
color: var(--accent);
font-variant-numeric: tabular-nums;
margin: 0;
}
.jdp-product-page-wrap .related li.product .star-rating,
.jdp-product-page-wrap .upsells li.product .star-rating {
color: var(--accent);
font-size: 13px;
}
.jdp-product-page-wrap .related li.product .button,
.jdp-product-page-wrap .upsells li.product .button {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--accent);
color: var(--jdp-white);
border-radius: 8px;
padding: 8px 14px;
font-size: 13px;
font-weight: 700;
text-decoration: none;
margin-top: auto;
min-height: 38px;
border: 0;
}
.jdp-product-page-wrap .related li.product .button:hover,
.jdp-product-page-wrap .upsells li.product .button:hover {
background: var(--accent-hover);
}
@media (max-width: 1000px) {
.jdp-product-page-wrap .product {
grid-template-columns: 1fr;
gap: var(--sp-7);
}
.jdp-product-page-wrap .woocommerce-product-gallery {
position: static;
top: auto;
}
.jdp-product-page-wrap .related .products,
.jdp-product-page-wrap .upsells .products {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.jdp-product-page-wrap .product_title { font-size: 26px; }
.jdp-product-page-wrap .summary .price ins,
.jdp-product-page-wrap .summary .price > .amount { font-size: 26px; }
.jdp-product-page-wrap .related .products,
.jdp-product-page-wrap .upsells .products { grid-template-columns: 1fr; }
.jdp-product-payment-row {
flex-direction: column;
align-items: flex-start;
}
}
/* =========================================================================
* PLATFORM HUB premium sections (Twitch + SoundCloud + futur)
* Utilise --platform-color (défini sur .jdp-hub-wrap) pour le tinting.
* Sections : .jdp-platform-why, .jdp-platform-audience.
* ======================================================================= */
.jdp-platform-why {
padding: var(--sp-16) 0;
}
.jdp-platform-why-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: var(--sp-10);
}
.jdp-platform-why-item {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 26px 22px;
transition: transform var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.jdp-platform-why-item:hover {
transform: translateY(-4px);
border-color: var(--platform-color, var(--accent));
background: rgba(255, 255, 255, 0.06);
}
.jdp-platform-why-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 14px;
background: color-mix(in srgb, var(--platform-color, #E1306C) 18%, transparent);
color: var(--platform-color, #fff);
margin-bottom: 16px;
}
.jdp-platform-why-icon svg {
width: 28px;
height: 28px;
}
.jdp-platform-why-title {
font-weight: 700;
font-size: 17px;
color: var(--jdp-white);
margin: 0 0 8px;
letter-spacing: -0.01em;
}
.jdp-platform-why-body {
font-size: 13.5px;
color: var(--jdp-text-disabled, #A5ADB8);
line-height: 1.6;
margin: 0;
}
@media (max-width: 1024px) {
.jdp-platform-why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.jdp-platform-why-grid { grid-template-columns: 1fr; }
}
/* Audience cards (Pour qui) */
.jdp-platform-audience {
padding: var(--sp-16) 0;
}
.jdp-platform-audience-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: var(--sp-10);
}
.jdp-platform-audience-card {
background: #fff;
border: 1px solid var(--jdp-separator, #EAEAED);
border-radius: 18px;
padding: 32px 26px;
transition: transform var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast);
position: relative;
overflow: hidden;
}
.jdp-platform-audience-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--platform-color, var(--accent));
border-radius: 18px 18px 0 0;
opacity: 0.85;
}
.jdp-platform-audience-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--platform-color, #000) 28%, transparent);
border-color: color-mix(in srgb, var(--platform-color, var(--accent)) 35%, transparent);
}
.jdp-platform-audience-emoji {
font-size: 36px;
line-height: 1;
margin-bottom: 16px;
}
.jdp-platform-audience-title {
font-weight: 800;
font-size: 18px;
color: var(--jdp-dark);
margin: 0 0 10px;
letter-spacing: -0.01em;
}
.jdp-platform-audience-body {
font-size: 14px;
color: var(--fg2);
line-height: 1.6;
margin: 0;
}
@media (max-width: 900px) {
.jdp-platform-audience-grid { grid-template-columns: 1fr; gap: 18px; }
.jdp-platform-audience-card { padding: 26px 22px; }
}
/* Tinting CTA block split via --platform-color sur le hub */
.jdp-hub-wrap .jdp-cta-block--split .jdp-cta-block-visual--gradient {
background: linear-gradient(135deg, var(--jdp-dark) 0%, var(--jdp-card-alt) 100%);
}
.jdp-hub-wrap .jdp-cta-block--bg-gradient {
background: var(--bg-dark);
}
.jdp-hub-wrap .jdp-cta-block-title .jdp-cta-accent {
color: #fff;
font-weight: 800;
}
/* Fix texte blanc/blanc : sur CTA a fond clair (bg-soft = #F9F6F1), l accent
doit etre en couleur reseau (visible), pas en blanc. Selecteur plus
specifique (ajoute --bg-soft) ET place apres -> override la regle blanche
ci-dessus. Les CTA sombres (bg-dark, bg-gradient) ne sont PAS affectes. */
.jdp-hub-wrap .jdp-cta-block--bg-soft .jdp-cta-block-title .jdp-cta-accent {
color: var(--platform-color, var(--accent));
}
/* Idem pour les CTA en disposition split : le titre est sur le panneau de copie
clair (le visuel sombre est a cote), donc l accent doit etre en couleur reseau,
jamais blanc. Couvre les split en --bg-gradient (twitch, soundcloud) et --bg-soft. */
.jdp-hub-wrap .jdp-cta-block--split .jdp-cta-block-title .jdp-cta-accent {
color: var(--platform-color, var(--accent));
}
/* Boutons primaires sur les sections platform-tinted */
.jdp-hub-wrap .jdp-cta-block-actions .jdp-btn--primary {
background: var(--platform-color, var(--accent));
border-color: var(--platform-color, var(--accent));
}
.jdp-hub-wrap .jdp-cta-block-actions .jdp-btn--primary:hover {
filter: brightness(1.1);
}
/* ============================================================
* PLATFORM HUB v0.3.5 : sections premium personas + garanties.
* Réutilisé par platform-hub-spotify.php et platform-hub-tiktok.php.
* Couleur accent : var(--platform-color) propagée par .jdp-hub-wrap.
* ============================================================ */
/* Personas grid (3 cards Pour qui) */
.jdp-platform-personas { padding: var(--sp-10, 80px) 0; }
.jdp-personas-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-6, 24px);
margin-top: var(--sp-8, 48px);
}
.jdp-persona-card {
background: var(--jdp-white);
border: 1px solid var(--jdp-separator);
border-radius: 18px;
padding: var(--sp-7, 32px) var(--sp-6, 24px);
transition: transform var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast);
position: relative;
overflow: hidden;
}
.jdp-persona-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--platform-color, var(--accent));
opacity: 0.85;
}
.jdp-persona-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
border-color: var(--platform-color, var(--accent));
}
.jdp-persona-emoji {
font-size: 44px;
line-height: 1;
margin-bottom: var(--sp-4, 16px);
}
.jdp-persona-title {
font-size: 20px;
font-weight: 700;
color: var(--jdp-dark);
margin: 0 0 var(--sp-3, 12px);
line-height: 1.3;
}
.jdp-persona-body {
font-size: 15px;
line-height: 1.65;
color: var(--fg2);
margin: 0;
}
/* Garanties grid (4 cards engagements protection) */
.jdp-platform-guarantees { padding: var(--sp-10, 80px) 0; }
.jdp-guarantees-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-5, 20px);
margin-top: var(--sp-8, 48px);
}
.jdp-guarantee-card {
background: var(--jdp-white);
border: 1px solid var(--jdp-separator);
border-radius: 14px;
padding: var(--sp-6, 24px);
text-align: left;
transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.jdp-guarantee-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}
.jdp-guarantee-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 12px;
background: color-mix(in srgb, var(--platform-color, var(--accent)) 12%, transparent);
color: var(--platform-color, var(--accent));
margin-bottom: var(--sp-4, 16px);
}
.jdp-guarantee-title {
font-size: 17px;
font-weight: 700;
color: var(--jdp-dark);
margin: 0 0 var(--sp-2, 8px);
line-height: 1.35;
}
.jdp-guarantee-body {
font-size: 14.5px;
line-height: 1.6;
color: var(--fg2);
margin: 0;
}
/* Hub content area : H2/H3 SEO conservés, accentués par platform-color */
.jdp-hub-content--spotify .wp-content h2,
.jdp-hub-content--tiktok .wp-content h2 {
position: relative;
padding-top: var(--sp-3, 12px);
}
.jdp-hub-content--spotify .wp-content h2::before,
.jdp-hub-content--tiktok .wp-content h2::before {
content: "";
display: block;
width: 48px;
height: 4px;
background: var(--platform-color, var(--accent));
border-radius: 2px;
margin-bottom: var(--sp-4, 16px);
}
.jdp-hub-content--spotify .wp-content h3,
.jdp-hub-content--tiktok .wp-content h3 {
color: var(--jdp-dark);
border-left: 3px solid var(--platform-color, var(--accent));
padding-left: var(--sp-3, 12px);
}
.jdp-hub-content--spotify .wp-content strong,
.jdp-hub-content--tiktok .wp-content strong {
color: var(--jdp-dark);
}
/* Responsive */
@media (max-width: 1000px) {
.jdp-personas-grid { grid-template-columns: repeat(2, 1fr); }
.jdp-guarantees-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.jdp-personas-grid { grid-template-columns: 1fr; }
.jdp-guarantees-grid { grid-template-columns: 1fr; }
.jdp-platform-personas,
.jdp-platform-guarantees { padding: var(--sp-8, 48px) 0; }
}
/* =====================================================================
* PLATFORM HUB CONTENT v3
* Composants visuels pour platform-hub-{slug}.php (Instagram, Facebook).
* Conserve le SEO du content live tout en agençant en composants v3.
* ===================================================================== */
/* H1 SEO section (extrait du content live, rendu propre en haut de page) */
.jdp-hub-h1-section {
padding-top: var(--sp-6);
padding-bottom: 0;
}
.jdp-hub-h1 {
font-family: var(--font-display, "Poppins", system-ui, sans-serif);
font-size: clamp(28px, 4vw, 44px);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0;
color: var(--ink, #0b1220);
text-align: center;
}
/* Stats Bar (chiffres clés agence, horizontal, premium) */
.jdp-hub-stats-bar-wrap {
padding-top: var(--sp-10);
padding-bottom: var(--sp-10);
}
.jdp-hub-stats-bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-6);
padding: var(--sp-8) var(--sp-7);
background: var(--jdp-white);
border: 1px solid var(--jdp-separator);
border-radius: 18px;
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.05), 0 2px 6px rgba(15, 23, 42, 0.03);
color: var(--jdp-dark);
}
.jdp-hub-stat {
text-align: center;
position: relative;
padding: 0 var(--sp-3);
}
.jdp-hub-stat:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
right: calc(var(--sp-6) * -0.5);
transform: translateY(-50%);
height: 50%;
width: 1px;
background: var(--jdp-separator);
}
.jdp-hub-stat-num {
font-size: clamp(28px, 3.6vw, 42px);
font-weight: 800;
line-height: 1.05;
color: var(--platform-color, var(--accent));
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
}
.jdp-hub-stat-label {
margin-top: var(--sp-3);
font-size: 11.5px;
font-weight: 700;
color: var(--fg2);
line-height: 1.4;
letter-spacing: 0.06em;
text-transform: uppercase;
}
@media (max-width: 900px) {
.jdp-hub-stats-bar {
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-6);
padding: var(--sp-6) var(--sp-5);
}
.jdp-hub-stat:not(:last-child)::after {
display: none;
}
}
@media (max-width: 480px) {
.jdp-hub-stats-bar {
grid-template-columns: 1fr;
}
}
/* Pillars (3 garanties au-dessus du fold visuel) */
.jdp-hub-pillars-section {
padding-top: var(--sp-9);
padding-bottom: var(--sp-9);
}
.jdp-hub-pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-6);
margin-top: var(--sp-7);
}
.jdp-hub-pillar {
background: #fff;
border: 1px solid var(--border, #e5e7eb);
border-radius: var(--radius-lg, 18px);
padding: var(--sp-6);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.jdp-hub-pillar:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
border-color: var(--platform-color, #E1306C);
}
.jdp-hub-pillar-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: var(--radius-md, 14px);
background: color-mix(in srgb, var(--platform-color, #E1306C) 12%, transparent);
color: var(--platform-color, #E1306C);
margin-bottom: var(--sp-4);
}
.jdp-hub-pillar-title {
font-size: 18px;
font-weight: 700;
margin: 0 0 var(--sp-3) 0;
line-height: 1.3;
color: var(--ink, #0b1220);
}
.jdp-hub-pillar-body {
font-size: 15px;
line-height: 1.6;
color: var(--ink-2, #475569);
margin: 0;
}
@media (max-width: 900px) {
.jdp-hub-pillars {
grid-template-columns: 1fr;
gap: var(--sp-5);
}
}
/* Long-form sections (algorithme, formats, engagement, monétisation, ressources) */
.jdp-hub-longform {
padding-top: var(--sp-9);
padding-bottom: var(--sp-9);
}
.jdp-longform-header {
text-align: center;
max-width: 760px;
margin: 0 auto var(--sp-8);
}
.jdp-longform-header .jdp-section-title {
margin-top: var(--sp-2);
text-align: center;
}
.jdp-longform-body {
font-size: 16px;
line-height: 1.75;
color: var(--ink, #0b1220);
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.jdp-longform-body h3 {
font-size: 22px;
font-weight: 700;
line-height: 1.3;
margin-top: var(--sp-7);
margin-bottom: var(--sp-3);
color: var(--ink, #0b1220);
letter-spacing: -0.01em;
}
.jdp-longform-body h3:first-child {
margin-top: 0;
}
.jdp-longform-body p {
margin: 0 0 var(--sp-4) 0;
}
.jdp-longform-body ul,
.jdp-longform-body ol {
margin: 0 0 var(--sp-4) var(--sp-5);
padding: 0;
}
.jdp-longform-body li {
margin-bottom: var(--sp-2);
line-height: 1.65;
}
.jdp-longform-body a {
color: var(--platform-color, #E1306C);
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.jdp-longform-body a:hover {
text-decoration-thickness: 2px;
}
.jdp-longform-body strong,
.jdp-longform-body b {
color: var(--ink, #0b1220);
font-weight: 700;
}
.jdp-longform-body figure {
margin: var(--sp-6) 0;
border-radius: var(--radius-lg, 18px);
overflow: hidden;
}
.jdp-longform-body figure img {
max-width: 100%;
height: auto;
display: block;
}
/* Feature list (formats de contenu en cards numérotées) */
.jdp-hub-feature-list-section {
padding-top: var(--sp-9);
padding-bottom: var(--sp-9);
background: var(--surface-soft, #fafafa);
}
.jdp-hub-feature-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-6);
margin-top: var(--sp-7);
}
.jdp-hub-feature-card {
background: #fff;
border-radius: var(--radius-lg, 18px);
padding: var(--sp-6);
border: 1px solid var(--border, #e5e7eb);
display: flex;
flex-direction: column;
}
.jdp-hub-feature-num {
font-family: var(--font-display, "Poppins", system-ui, sans-serif);
font-size: 36px;
font-weight: 800;
line-height: 1;
color: var(--platform-color, #E1306C);
opacity: 0.18;
margin-bottom: var(--sp-3);
letter-spacing: -0.04em;
}
.jdp-hub-feature-title {
font-size: 20px;
font-weight: 700;
line-height: 1.3;
margin: 0 0 var(--sp-3) 0;
color: var(--ink, #0b1220);
}
.jdp-hub-feature-body {
font-size: 15px;
line-height: 1.65;
color: var(--ink-2, #475569);
}
.jdp-hub-feature-body p {
margin: 0 0 var(--sp-3) 0;
}
.jdp-hub-feature-body p:last-child {
margin-bottom: 0;
}
.jdp-hub-feature-body ul,
.jdp-hub-feature-body ol {
margin: 0 0 var(--sp-3) var(--sp-5);
}
.jdp-hub-feature-body strong,
.jdp-hub-feature-body b {
color: var(--ink, #0b1220);
}
.jdp-hub-feature-body a {
color: var(--platform-color, #E1306C);
font-weight: 600;
text-decoration: underline;
}
@media (max-width: 900px) {
.jdp-hub-feature-list {
grid-template-columns: 1fr;
gap: var(--sp-5);
}
}
/* Precautions cards (légalité & sécurité, dark) */
.jdp-hub-precautions-section {
padding-top: var(--sp-9);
padding-bottom: var(--sp-9);
}
.jdp-hub-precautions-section .jdp-section-title {
color: var(--fg1);
}
.jdp-hub-precautions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sp-5);
margin-top: var(--sp-7);
}
.jdp-hub-precaution-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg, 18px);
padding: var(--sp-6);
color: var(--fg2);
min-width: 0;
overflow-wrap: break-word;
box-shadow: var(--shadow-sm);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.jdp-hub-precaution-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--platform-color, #E1306C);
}
.jdp-hub-precaution-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-md, 14px);
background: color-mix(in srgb, var(--platform-color, #E1306C) 14%, transparent);
color: var(--platform-color, #E1306C);
margin-bottom: var(--sp-3);
}
.jdp-hub-precaution-title {
font-size: 18px;
font-weight: 700;
margin: 0 0 var(--sp-3) 0;
line-height: 1.3;
color: var(--fg1);
}
.jdp-hub-precaution-body {
font-size: 14.5px;
line-height: 1.65;
color: var(--fg2);
}
.jdp-hub-precaution-body p {
margin: 0 0 var(--sp-3) 0;
}
.jdp-hub-precaution-body p:last-child {
margin-bottom: 0;
}
.jdp-hub-precaution-body ul {
margin: 0 0 var(--sp-3) var(--sp-5);
}
.jdp-hub-precaution-body li {
margin-bottom: var(--sp-2);
}
.jdp-hub-precaution-body strong,
.jdp-hub-precaution-body b {
color: var(--fg1);
}
.jdp-hub-precaution-body img,
.jdp-hub-precaution-body table,
.jdp-hub-precaution-body pre {
max-width: 100%;
}
@media (max-width: 900px) {
.jdp-hub-precautions {
grid-template-columns: 1fr;
}
}
/* FAQ : colonne plus large et aeree (le template ne la bride plus en --narrow). */
.jdp-hub-faq-section .jdp-hub-faq-body {
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
.jdp-hub-faq-section .jdp-hub-faq-accordion {
gap: 0;
}
/* FAQ epuree : derniere ligne sans separateur. */
.jdp-hub-faq-section .jdp-faq-item:last-child {
border-bottom: 0;
}
/* FAQ : alignement strict sur la V2 (redesign-home-v2). ZERO rose : categories
en label neutre sans souligne ; liens en texte sombre souligne, survol orange
de marque (#E68A1C) comme la V2, jamais en platform-color rose. */
.jdp-hub-faq-section .jdp-faq-category {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg2);
border-bottom: 0;
padding-bottom: 0;
margin: var(--sp-8) 0 var(--sp-2);
}
.jdp-hub-faq-section .jdp-faq-category:first-child {
margin-top: 0;
}
.jdp-hub-faq-section .jdp-faq-answer a,
.jdp-hub-faq-section .jdp-hub-faq-body a {
color: var(--fg1);
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 600;
}
.jdp-hub-faq-section .jdp-faq-answer a:hover,
.jdp-hub-faq-section .jdp-hub-faq-body a:hover {
color: var(--accent);
}
/* ============================================================
* HUB RICHTEXT : rendu direct de the_content (TikTok et hubs sans
* extraction). Sections media-text ALTERNEES gauche/droite + typo SEO.
* ============================================================ */
.jdp-hub-richtext {
max-width: 1040px;
margin: 0 auto;
}
.jdp-hub-richtext > p,
.jdp-hub-richtext > ul,
.jdp-hub-richtext > ol {
max-width: 800px;
}
.jdp-hub-richtext h2 {
font-size: var(--fs-h2);
font-weight: 700;
line-height: 1.2;
letter-spacing: var(--tracking-tight);
color: var(--fg1);
margin: var(--sp-10) 0 var(--sp-4);
}
.jdp-hub-richtext h3 {
font-size: var(--fs-h3);
font-weight: 700;
line-height: 1.3;
color: var(--fg1);
margin: var(--sp-7) 0 var(--sp-3);
}
.jdp-hub-richtext p {
font-size: 16px;
line-height: 1.75;
color: var(--fg2);
margin: 0 0 var(--sp-4);
}
.jdp-hub-richtext ul,
.jdp-hub-richtext ol {
margin: 0 0 var(--sp-5);
padding-left: var(--sp-5);
color: var(--fg2);
line-height: 1.7;
}
.jdp-hub-richtext li { margin-bottom: var(--sp-2); }
.jdp-hub-richtext strong,
.jdp-hub-richtext b { color: var(--fg1); font-weight: 700; }
.jdp-hub-richtext a {
color: var(--platform-color, var(--accent));
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
/* media-text alternees : image a droite / gauche. !important pour battre le style inline du bloc. */
.jdp-hub-richtext .wp-block-media-text {
display: grid;
gap: var(--sp-9);
align-items: center;
margin: var(--sp-12) 0;
}
.jdp-hub-richtext .wp-block-media-text.has-media-on-the-right {
grid-template-columns: 1fr 44% !important;
}
.jdp-hub-richtext .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
order: 2;
}
.jdp-hub-richtext .wp-block-media-text.has-media-on-the-left {
grid-template-columns: 44% 1fr !important;
}
.jdp-hub-richtext .wp-block-media-text__media img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.jdp-hub-richtext .wp-block-media-text__content > :first-child { margin-top: 0; }
.jdp-hub-richtext .wp-block-media-text h2 { margin-top: 0; }
.jdp-hub-richtext .jdp-faq-list { max-width: none; margin-top: var(--sp-6); }
@media (max-width: 820px) {
.jdp-hub-richtext .wp-block-media-text {
grid-template-columns: 1fr !important;
gap: var(--sp-5);
}
.jdp-hub-richtext .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
order: 0;
}
}
/* FAQ section custom (avec H3 catégories + H4 questions du content live) */
.jdp-hub-faq-section {
padding-top: var(--sp-9);
padding-bottom: var(--sp-9);
}
.jdp-hub-faq-body {
margin-top: var(--sp-6);
}
.jdp-hub-faq-body h3 {
font-size: 22px;
font-weight: 700;
margin-top: var(--sp-7);
margin-bottom: var(--sp-3);
padding-bottom: var(--sp-2);
border-bottom: 2px solid var(--platform-color, #E1306C);
color: var(--ink, #0b1220);
}
.jdp-hub-faq-body h3:first-child {
margin-top: 0;
}
.jdp-hub-faq-body h4 {
font-size: 17px;
font-weight: 700;
margin-top: var(--sp-5);
margin-bottom: var(--sp-2);
color: var(--ink, #0b1220);
line-height: 1.4;
}
.jdp-hub-faq-body p {
font-size: 15px;
line-height: 1.7;
color: var(--ink-2, #475569);
margin: 0 0 var(--sp-3) 0;
}
.jdp-hub-faq-body a {
color: var(--platform-color, #E1306C);
font-weight: 600;
text-decoration: underline;
}
/* Influencers section (testimonials du content live) */
.jdp-hub-influencers-section {
padding-top: var(--sp-9);
padding-bottom: var(--sp-9);
}
/* Containers narrow réutilisable */
.jdp-container--narrow {
max-width: 880px;
margin-left: auto;
margin-right: auto;
}
/* =====================================================================
* HUB VARIANTS additionnels v0.3.5 (YouTube + X-Twitter)
* Variants 4 colonnes pour piliers et process. Bullets list dans personas.
* ===================================================================== */
/* Piliers en 4 colonnes (YouTube). Hérite de .jdp-hub-pillars. */
.jdp-hub-pillars--4 {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
.jdp-hub-pillars--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.jdp-hub-pillars--4 { grid-template-columns: 1fr; }
}
/* Process 4 steps (YouTube). Hérite de .jdp-process-grid. */
.jdp-process-grid--4 {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
.jdp-process-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.jdp-process-grid--4 { grid-template-columns: 1fr; }
}
/* Persona bullets dans personas cards (réutilise .jdp-persona-card du pattern TikTok) */
.jdp-persona-bullets {
list-style: none;
padding: 0;
margin: var(--sp-4, 16px) 0 0;
display: flex;
flex-direction: column;
gap: var(--sp-2, 8px);
}
.jdp-persona-bullets li {
font-size: 13.5px;
line-height: 1.5;
color: var(--fg2);
padding-left: var(--sp-4, 16px);
position: relative;
}
.jdp-persona-bullets li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--platform-color, var(--accent));
opacity: 0.85;
}
/* Hub wrapper YouTube + X-Twitter : accentuation du contenu WP (H2 underline color, etc.) */
.jdp-hub-wrap--youtube .jdp-wp-content h2,
.jdp-hub-wrap--x-twitter .jdp-wp-content h2 {
position: relative;
padding-top: var(--sp-3, 12px);
}
.jdp-hub-wrap--youtube .jdp-wp-content h2::before,
.jdp-hub-wrap--x-twitter .jdp-wp-content h2::before {
content: "";
display: block;
width: 48px;
height: 4px;
background: var(--platform-color, var(--accent));
border-radius: 2px;
margin-bottom: var(--sp-4, 16px);
}
.jdp-hub-wrap--youtube .jdp-wp-content h3,
.jdp-hub-wrap--x-twitter .jdp-wp-content h3 {
color: var(--jdp-dark);
border-left: 3px solid var(--platform-color, var(--accent));
padding-left: var(--sp-3, 12px);
}
.jdp-hub-wrap--youtube .jdp-wp-content strong,
.jdp-hub-wrap--x-twitter .jdp-wp-content strong {
color: var(--jdp-dark);
}
/* Hide the legacy SVG placeholder images inserted in raw post_content for YouTube + X-Twitter.
Le SEO content live contient des wp:image data:image/svg+xml; vides (influenceurs) sans alt
réel : on les masque visuellement pour ne pas casser l'esthétique du long-form. */
.jdp-hub-wrap--youtube .jdp-wp-content .wp-block-image img[src^="data:image/svg+xml"],
.jdp-hub-wrap--x-twitter .jdp-wp-content .wp-block-image img[src^="data:image/svg+xml"] {
display: none;
}
.jdp-hub-wrap--youtube .jdp-wp-content .wp-block-image:has(img[src^="data:image/svg+xml"]),
.jdp-hub-wrap--x-twitter .jdp-wp-content .wp-block-image:has(img[src^="data:image/svg+xml"]) {
display: none;
}
/* ============================================================
* TRUSTPILOT RAIL : véracité reviews (style Trustpilot vert)
* ============================================================ */
.jdp-trustpilot-rail { padding: var(--sp-12) 0; background: var(--bg-soft); }
.jdp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.jdp-trustpilot-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-7); flex-wrap: wrap; }
.jdp-trustpilot-head-left { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.jdp-trustpilot-qualifier { font-weight: 700; font-size: 22px; color: var(--jdp-dark); letter-spacing: -0.01em; }
.jdp-tp-stars { display: inline-flex; gap: 2px; align-items: center; }
/* Étoiles style Trustpilot (carrés verts, étoile blanche) sur la section avis, même si la source est CusRev (choix client). */
.jdp-tp-star { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 15px; color: #fff; background: #DCDCE6; border-radius: 3px; line-height: 1; }
.jdp-tp-star--on { background: #00B67A; }
.jdp-trustpilot-score { font-size: 14px; color: var(--fg2); }
.jdp-trustpilot-score strong { color: var(--jdp-dark); font-weight: 700; }
.jdp-trustpilot-sep { margin: 0 6px; color: #C2C8D0; }
.jdp-trustpilot-head-right { display: inline-flex; align-items: center; }
.jdp-trustpilot-logo { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--jdp-dark); font-size: 15px; }
/* Trustpilot rail v2 : cards bordées, hover lift, "Vérifié" vert uppercase, badge Trustpilot. */
.jdp-trustpilot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.jdp-trustpilot-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-4); transition: transform var(--dur-normal) var(--ease-out-quart), border-color var(--dur-normal) var(--ease-out-quart), box-shadow var(--dur-normal) var(--ease-out-quart); }
.jdp-trustpilot-card:hover { transform: translateY(-2px); border-color: var(--fg3); box-shadow: var(--shadow-md); }
.jdp-trustpilot-verified { display: inline-flex; align-items: center; gap: 4px; color: #00B67A; font-size: 11px; font-weight: 600; width: fit-content; text-transform: uppercase; letter-spacing: 0.06em; }
.jdp-trustpilot-card-title { font-weight: 600; font-size: var(--fs-h4); color: var(--fg1); margin: 0; line-height: 1.3; letter-spacing: -0.01em; }
.jdp-trustpilot-card-body { font-size: 14px; color: var(--fg2); line-height: 1.6; margin: 0; flex: 1; }
.jdp-trustpilot-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0; padding-top: var(--sp-4); border-top: 1px solid var(--border); font-size: 13px; }
.jdp-trustpilot-card-author { color: var(--fg1); font-weight: 600; }
.jdp-trustpilot-card-date { color: var(--fg3); display: inline-flex; align-items: center; gap: 6px; }
.jdp-trustpilot-card-date::after {
content: 'Trustpilot';
font-weight: 600;
color: var(--fg1);
font-size: 11px;
padding: 2px 6px;
background: #E6F7F0;
border-radius: 4px;
}
.jdp-trustpilot-nav { display: flex; justify-content: center; gap: 12px; margin-top: var(--sp-7); }
.jdp-trustpilot-nav-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--jdp-separator); background: transparent; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast); }
.jdp-trustpilot-nav-btn:hover { background: var(--jdp-white); border-color: var(--accent); }
@media (max-width: 1100px) { .jdp-trustpilot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .jdp-trustpilot-grid { grid-template-columns: 1fr; } .jdp-trustpilot-head { justify-content: center; text-align: center; } }
/* Carrousel d'avis (jdp-reviews-rail) : défilé horizontal continu (marquee GPU, transform).
Données CusRev (avis clients vérifiés), PAS Trustpilot : aucun logo ni badge Trustpilot. */
.jdp-reviews-rail .jdp-reviews-source { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--fg1); font-size: 14px; }
.jdp-reviews-marquee { position: relative; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.jdp-reviews-track { display: flex; gap: var(--sp-5); width: max-content; }
.jdp-reviews-marquee:hover .jdp-reviews-track,
.jdp-reviews-marquee:focus-within .jdp-reviews-track { animation-play-state: paused; }
.jdp-reviews-card { flex: 0 0 clamp(260px, 80vw, 330px); }
/* Pas de pseudo-badge "Trustpilot" sur les avis CusRev (honnêteté de la source). */
.jdp-reviews-rail .jdp-trustpilot-card-date::after { content: none; }
@keyframes jdp-reviews-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Carrousel avis : navigation par flèches (auto-scroll retiré), fondu latéral conservé. */
.jdp-reviews-carousel { position: relative; }
.jdp-reviews-marquee::-webkit-scrollbar { display: none; }
.jdp-reviews-arrow {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
background: #fff; color: var(--fg1); border: 1px solid var(--border); border-radius: 50%;
box-shadow: 0 4px 14px rgba(17, 17, 17, 0.10); cursor: pointer;
transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms ease, border-color 160ms ease, opacity 160ms ease;
}
.jdp-reviews-arrow:hover { color: var(--accent); border-color: var(--accent); }
.jdp-reviews-arrow:active { transform: translateY(-50%) scale(0.94); }
.jdp-reviews-arrow--prev { left: 4px; }
.jdp-reviews-arrow--next { right: 4px; }
.jdp-reviews-arrow svg { width: 20px; height: 20px; display: block; }
.jdp-reviews-arrow[disabled] { opacity: 0.3; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
.jdp-reviews-track { animation: none; }
.jdp-reviews-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* ============================================================
* AVIS CLIENTS V2 (v0.5.20) : refonte du rail (ex rail vert "trustpilot").
* Couleurs de marque (étoiles oranges, coche vérifiée turquoise), cartes
* blanches propres avec avatar, header aéré, fondu latéral subtil (24px) qui
* ne coupe plus la 1re carte, cartes à hauteur de contenu (plus de gros vide).
* Mécanique marquee conservée (JS initReviewsMarquee inchangé).
* ============================================================ */
.jdp-reviews-v2 { padding: var(--sp-14, 56px) 0; background: var(--bg-soft, #F9F6F1); }
.jdp-reviews-v2-head { max-width: 760px; margin: 0 0 var(--sp-9, 40px); }
.jdp-reviews-v2-head .jdp-section-title { text-align: left; margin: 0; }
.jdp-reviews-v2-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 12px; }
.jdp-reviews-v2-score { font-size: 15px; color: var(--fg2, #69727D); }
.jdp-reviews-v2-score strong { color: var(--fg1, #0b1220); font-weight: 700; font-size: 17px; }
.jdp-reviews-v2-sep { margin: 0 4px; color: var(--fg3, #C2C8D0); }
.jdp-reviews-v2 .jdp-reviews-track { align-items: flex-start; }
.jdp-reviews-v2 .jdp-reviews-marquee {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.jdp-review-card {
flex: 0 0 clamp(280px, 80vw, 340px);
display: flex;
flex-direction: column;
gap: 12px;
background: #fff;
border: 1px solid var(--border, #e7e7e7);
border-radius: var(--radius-lg, 18px);
padding: 22px 24px;
box-shadow: 0 6px 22px rgba(17, 17, 17, .05);
position: relative;
transition: transform .2s ease, box-shadow .2s ease;
}
/* Carte cliquable : lien en superposition vers l'avis vérifié sur la fiche produit. */
.jdp-review-card-link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.jdp-review-card-link:focus-visible { outline: 2px solid var(--jdp-orange, #E68A1C); outline-offset: 3px; }
.jdp-review-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(17, 17, 17, .10); }
/* Badge de preuve sociale réutilisable (note + nombre d'avis vérifiés). */
.jdp-reviews-badge-wrap { margin-top: 18px; }
.jdp-reviews-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--bg-soft, #f6f5f2); border: 1px solid var(--border, #e7e7e7); font-size: 14px; line-height: 1; color: var(--fg1, #1a1a1a); text-decoration: none; }
.jdp-reviews-badge--link { transition: transform .2s ease, box-shadow .2s ease; }
.jdp-reviews-badge--link:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(17, 17, 17, .08); }
.jdp-reviews-badge-stars { color: #00B67A; letter-spacing: 1px; font-size: 13px; }
.jdp-reviews-badge-text strong { font-weight: 700; }
.jdp-review-card-body { margin: 0; font-size: 15px; line-height: 1.6; color: var(--fg1, #1a1a1a); }
.jdp-review-card-foot { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.jdp-review-card-avatar {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 16px;
background: var(--accent-soft, #FDF1E3);
color: var(--accent, #E68A1C);
}
.jdp-review-card-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jdp-review-card-author { font-weight: 600; font-size: 14px; color: var(--fg1, #1a1a1a); }
.jdp-review-card-sub { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg3, #98a0ab); flex-wrap: wrap; }
.jdp-review-card-verified { display: inline-flex; align-items: center; gap: 3px; color: #00B67A; font-weight: 600; }
.jdp-reviews-v2-qualifier { font-weight: 700; font-size: 17px; color: var(--fg1, #0b1220); }
/* ============================================================
* LIVE ACTIVITY PILL : "+X,XXX commandes aujourd'hui" (vert pulsing)
* ============================================================ */
.jdp-live-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--jdp-dark);
color: var(--jdp-white);
padding: 8px 16px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
box-shadow: 0 8px 24px rgba(15,23,42,0.15), 0 2px 4px rgba(15,23,42,0.08);
}
.jdp-live-pill-dot {
width: 8px; height: 8px;
background: #2BE672;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(43,230,114,0.6);
animation: jdpLivePulse 1.8s ease-out infinite;
}
.jdp-live-pill-count { color: #2BE672; font-weight: 700; }
@keyframes jdpLivePulse {
0% { box-shadow: 0 0 0 0 rgba(43,230,114,0.6); }
70% { box-shadow: 0 0 0 10px rgba(43,230,114,0); }
100% { box-shadow: 0 0 0 0 rgba(43,230,114,0); }
}
@media (prefers-reduced-motion: reduce) { .jdp-live-pill-dot { animation: none; } }
/* ============================================================
* Hub responsive safety net (anti-overflow horizontal).
* Fix post-audit 2026-05-26 : iPhone mockup + stats bar peuvent
* déborder à <600px sans contraintes explicites.
* ============================================================ */
.jdp-hub-wrap {
overflow-x: clip;
max-width: 100vw;
}
.jdp-hub-hero {
overflow: hidden;
}
.jdp-hub-hero .jdp-hero-mockup-wrap {
max-width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
@media (max-width: 600px) {
.jdp-hub-hero .jdp-phone-showcase {
margin: 0 auto;
transform: scale(0.85);
transform-origin: center;
}
.jdp-hub-hero {
padding: 32px 0 40px;
}
.jdp-hub-stats-bar {
padding: var(--sp-4);
}
.jdp-hub-stat-num {
font-size: clamp(20px, 5vw, 28px);
}
.jdp-hub-stat-label {
font-size: 12px;
}
/* Titres section trop longs en mobile : break-word + plus petit */
.jdp-hub-products .jdp-section-title,
.jdp-hub-wrap .jdp-section-title,
.jdp-hub-wrap .jdp-hub-h1,
.jdp-hub-wrap h1,
.jdp-hub-wrap h2,
.jdp-hub-wrap h3 {
word-break: break-word;
overflow-wrap: anywhere;
hyphens: auto;
}
.jdp-hub-wrap .jdp-section-title,
.jdp-hub-products .jdp-section-title {
font-size: clamp(22px, 6vw, 32px);
}
.jdp-hub-wrap .jdp-hub-h1 {
font-size: clamp(24px, 6.5vw, 36px);
}
}
/* Sécurisation des grilles communes au-delà des plateformes
* (anti-débordement images, textes, bouton CTA). */
.jdp-hub-wrap img,
.jdp-hub-wrap svg {
max-width: 100%;
height: auto;
}
/* Sécurité anti-overflow horizontal : NE PAS override max-width des containers
* sur desktop (sinon narrow 880px / lg 1280px sont écrasés et le contenu
* s'étale sur 100vw). Limité au mobile uniquement. */
@media (max-width: 600px) {
.jdp-hub-wrap .jdp-container {
max-width: 100%;
}
}
/* ============================================================
* FOOTER FIX v0.3.4 : retire les 2 bandes dark fantômes
* Cause : .jdp-site-footer (components.css l.272) a background dark
* + padding sp-16/sp-8 + margin-top sp-16. Les enfants .jdp-footer-main
* (blanc) et .jdp-footer-bottom (transparent) laissent voir les paddings dark.
* Fix : neutralise le wrapper, garde les enfants comme source de vérité.
* ============================================================ */
.jdp-site-footer {
background: var(--jdp-white);
color: var(--jdp-dark);
padding: 0;
margin-top: 0;
}
/* ============================================================
* HUB LONGFORM + HUB CONTENT : BLOCS INDIVIDUELS (refonte)
* Patch surgical v2 : on supprime la grosse card englobante.
* Chaque paragraphe, liste, H3 est habillé individuellement.
* Le wrapper externe redevient transparent.
*
* Conservation SEO : aucun changement HTML, juste du styling.
* ============================================================ */
/* === 1. Wrapper externe : transparent (plus de grosse card) === */
.jdp-hub-longform .jdp-longform-body,
.jdp-hub-content .jdp-wp-content {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
border-radius: 0;
}
/* ============================================================
* PATTERN PRO LONGFORM v3 (refonte UI/UX 2026-05-26)
* Plus de mini-cards individuelles. Pull-quote intro + H3 iconique
* + listes check pro + CTA highlight encarts.
* Tokens : --platform-color = pivot couleur par hub.
* ============================================================ */
/* === 2. Intro pull-quote (1er paragraphe avant tout H3) === */
.jdp-hub-longform .jdp-longform-body > p:first-of-type,
.jdp-hub-content .jdp-wp-content > p:first-of-type {
background: linear-gradient(135deg,
color-mix(in srgb, var(--platform-color, #E1306C) 6%, transparent),
color-mix(in srgb, var(--platform-color, #E1306C) 1%, transparent));
border-left: 4px solid var(--platform-color, #E1306C);
border-radius: 0 14px 14px 0;
padding: 22px 26px;
margin: 0 0 28px;
font-size: 17px;
line-height: 1.7;
color: var(--jdp-dark, #000000);
font-weight: 450;
max-width: 72ch;
}
/* === 3. Paragraphes courants : texte fluide, pas de card === */
.jdp-hub-longform .jdp-longform-body > p,
.jdp-hub-content .jdp-wp-content > p {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
margin: 0 0 18px;
line-height: 1.7;
color: var(--fg2, #4B5563);
max-width: 72ch;
}
/* === 4. H3 : barre verticale platform-color + icône Lucide en cercle === */
.jdp-hub-longform .jdp-longform-body > h3,
.jdp-hub-content .jdp-wp-content > h3 {
display: flex;
align-items: center;
gap: 14px;
background: transparent;
border: none;
border-left: 4px solid var(--platform-color, #E1306C);
padding: 4px 0 4px 20px;
margin: 44px 0 18px;
font-size: 22px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--jdp-dark, #000000);
position: relative;
}
.jdp-hub-longform .jdp-longform-body > h3:first-child,
.jdp-hub-longform .jdp-longform-body > h3:first-of-type,
.jdp-hub-content .jdp-wp-content > h3:first-child,
.jdp-hub-content .jdp-wp-content > h3:first-of-type {
margin-top: 8px;
}
/* Icône Lucide générique : on utilise un wrapper cercle (background-color = pastel platform)
+ une icône inner via ::before child impossible, donc on combine ::before (cercle pastel
transparent) avec mask-image pour que l'icône suive --platform-color. */
.jdp-hub-longform .jdp-longform-body > h3::before,
.jdp-hub-content .jdp-wp-content > h3::before {
content: "";
display: inline-flex;
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--accent-soft);
position: relative;
}
/* Wrapper icône : on injecte le SVG via mask sur le H3 lui-même via ::after positionné absolu
par-dessus le ::before. Nécessite position relative sur H3. */
.jdp-hub-longform .jdp-longform-body > h3,
.jdp-hub-content .jdp-wp-content > h3 {
position: relative;
}
.jdp-hub-longform .jdp-longform-body > h3::after,
.jdp-hub-content .jdp-wp-content > h3::after {
content: "";
position: absolute;
left: 24px;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
background-color: var(--platform-color, #E1306C);
-webkit-mask-image: url("data:image/svg+xml;utf8, ::before plus bas. */
/* ============================================================
* LONGFORM HUB UNIFIE (.jdp-lf-*) - charte home, accents reseau
* Rendu par templates/parts/hub-longform.php (commun aux 8 hubs).
* Namespace neuf, isole du legacy .jdp-hub-longform/.jdp-hub-content
* (pas d heritage des barres laterales / cards de listes obsoletes).
* Lois impeccable : aucune bordure laterale coloree epaisse, accent
* = couleur unie, pas de #000/#fff bruts, paragraphes plafonnes ~80ch.
* Pivot couleur : var(--platform-color, var(--accent)).
* ============================================================ */
/* Bandes pleine largeur, fonds alternes clair / soft, rythme varie. */
.jdp-lf-band {
padding: var(--sp-14) 0;
background: var(--bg);
}
.jdp-lf-band--soft {
background: var(--bg-soft);
}
.jdp-lf-band--clair + .jdp-lf-band--clair,
.jdp-lf-band--soft + .jdp-lf-band--soft {
/* Deux bandes de meme fond qui se suivent : on resserre l espace pour
garder une continuite visuelle (rythme non uniforme). */
padding-top: var(--sp-8);
}
/* Conteneur ~1000px centre : en-tetes, listes et badges prennent toute la largeur. */
.jdp-lf-wrap {
max-width: 820px;
margin: 0 auto;
padding: 0 var(--sp-6);
}
/* En-tete de zone : eyebrow sobre couleur reseau (rendu une seule fois). */
.jdp-lf-head {
margin: 0 0 var(--sp-6);
text-align: center;
}
.jdp-lf-eyebrow {
color: var(--platform-color, var(--accent));
}
/* Corps : typo lisible, texte courant plafonne ~80ch. */
.jdp-lf-body {
font-size: 16px;
line-height: var(--lh-loose);
color: var(--fg2);
}
/* H2 facon home : titre soigne, sans barre laterale. */
.jdp-lf-body > .jdp-lf-h2,
.jdp-lf-body > h2 {
font-size: var(--fs-h2);
font-weight: 600;
line-height: 1.15;
letter-spacing: var(--tracking-tight);
color: var(--fg1);
margin: 0 0 var(--sp-5);
text-align: center;
}
.jdp-lf-body > .jdp-lf-h2:not(:first-child),
.jdp-lf-body > h2:not(:first-child) {
margin-top: var(--sp-10);
}
/* Mot d accent dans le H2 (si present dans le contenu) : couleur reseau unie. */
.jdp-lf-body .jdp-lf-h2 .jdp-lf-accent,
.jdp-lf-body .jdp-lf-h2 .jdp-cta-accent {
color: var(--platform-color, var(--accent));
font-weight: 700;
}
/* 1er paragraphe = lead : fond tint leger + typo plus grande, SANS border-left. */
.jdp-lf-body > p:first-of-type {
font-size: 17px;
line-height: 1.7;
color: var(--fg1);
margin: 0 0 var(--sp-5);
max-width: none;
}
/* Paragraphes courants : texte fluide, plafonne ~80ch pour la lisibilite. */
.jdp-lf-body > p {
margin: 0 0 var(--sp-4);
line-height: var(--lh-loose);
color: var(--fg2);
max-width: 80ch;
}
/* H3 : pastille ronde couleur reseau (REMPLACE la barre verticale epaisse). */
.jdp-lf-body > h3 {
display: flex;
align-items: baseline;
gap: var(--sp-3);
font-size: var(--fs-h3);
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--fg1);
margin: var(--sp-9) 0 var(--sp-3);
}
.jdp-lf-body > h3:first-child {
margin-top: 0;
}
.jdp-lf-body > h3::before {
content: "";
flex: 0 0 auto;
width: 10px;
height: 10px;
margin-top: 0.5em;
border-radius: var(--radius-full);
background: var(--platform-color, var(--accent));
}
/* Listes : coches rondes couleur reseau facon home (.jdp-lf-check), SANS card. */
.jdp-lf-body > ul,
.jdp-lf-body > ol {
list-style: none;
padding: 0;
margin: 0 0 var(--sp-5);
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.jdp-lf-body > ul > li,
.jdp-lf-body > ol > li {
position: relative;
padding-left: calc(22px + var(--sp-3));
line-height: var(--lh-normal);
color: var(--fg2);
}
.jdp-lf-body > ul > li::before,
.jdp-lf-body > ol > li::before {
content: "";
position: absolute;
left: 0;
top: 0.15em;
width: 22px;
height: 22px;
border-radius: var(--radius-full);
background-color: color-mix(in srgb, var(--platform-color, var(--accent)) 14%, transparent);
background-image: url("data:image/svg+xml;utf8, contient un === */
/* Sauf le pull-quote intro (déjà stylé) */
.jdp-hub-longform .jdp-longform-body > p:not(:first-of-type):has(a[href]),
.jdp-hub-content .jdp-wp-content > p:not(:first-of-type):has(a[href]) {
background: linear-gradient(135deg,
color-mix(in srgb, var(--platform-color, #E1306C) 9%, transparent),
color-mix(in srgb, var(--platform-color, #E1306C) 3%, transparent));
border: 1px solid color-mix(in srgb, var(--platform-color, #E1306C) 22%, transparent);
border-radius: 14px;
padding: 20px 22px 20px 60px;
margin: 20px 0 24px;
color: var(--jdp-dark, #000000);
position: relative;
line-height: 1.65;
max-width: 100%;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.jdp-hub-longform .jdp-longform-body > p:not(:first-of-type):has(a[href])::before,
.jdp-hub-content .jdp-wp-content > p:not(:first-of-type):has(a[href])::before {
content: "";
position: absolute;
left: 18px;
top: 20px;
width: 28px;
height: 28px;
border-radius: 50%;
background-color: var(--platform-color, #E1306C);
background-image: url("data:image/svg+xml;utf8, baked-in) : sans
* display:inline-block, le fond blanc + padding bavent sur plusieurs lignes (boutons "cassés"
* et chevauchés, surtout mobile). On en fait de vrais boutons, responsive. display/margin
* n'étant pas posés en inline, pas besoin de !important. */
.jdp-product-page-wrap .smm-fiche a[style*="background"] {
display: inline-block;
max-width: 100%;
box-sizing: border-box;
margin-top: 8px;
text-align: center;
white-space: normal;
word-break: break-word;
line-height: 1.3;
}
/* 2. Encadrés composant protégés par le dresser (bandeau CTA orange, boîte sombre, etc.) :
* rendus pleine largeur, jamais éclatés. On borne juste leur largeur. */
.smm-cta-wrap { margin: 28px 0; }
.smm-cta-wrap > div {
max-width: 100%;
box-sizing: border-box;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* 3. Galerie produit un peu plus étroite (desktop) -> colonne droite (résumé + commande) élargie. */
@media (min-width: 1001px) {
.jdp-product-page-wrap .product { grid-template-columns: 460px minmax(0, 1fr); }
.jdp-product-page-wrap .woocommerce-product-gallery { max-width: 460px; }
}
/* Fiche produit : réduit le grand vide entre le fil d'ariane et le produit. La règle de base
(.jdp-product-page-wrap padding-top: var(--sp-5)=20px) était écrasée à 96px par un override
externe (snippet). On rétablit un padding-top serré, conforme à l'intention d'origine. */
body.single-product .jdp-product-page-wrap { padding-top: 40px; }
/* ============================================================
Page FAQ (/faq/) : header centré + accordéon (blocs wp:details habillés façon thème).
Contenu verbatim, accordéon 100% CSS (details natifs), chevron dessiné en CSS.
============================================================ */
.jdp-faq-page { padding: var(--sp-12) 0 var(--sp-14); }
.jdp-faq-page-header { text-align: center; margin-bottom: var(--sp-10); }
.jdp-faq-page-title { font-size: var(--fs-h1, 40px); line-height: 1.15; margin: 10px 0 0; color: var(--fg1); }
.jdp-faq-page-content > p,
.jdp-faq-page-content > ul { color: var(--fg2); line-height: 1.7; }
.jdp-faq-page-content > ul { padding-left: 22px; }
.jdp-faq-page-content > p:first-child { font-size: 17px; }
.jdp-faq-page-content .wp-block-details {
background: #fff;
border: 1px solid var(--border);
border-radius: 14px;
margin: 12px 0;
overflow: hidden;
transition: box-shadow .2s ease, border-color .2s ease;
}
.jdp-faq-page-content .wp-block-details[open] {
border-color: #F0D6AE;
box-shadow: 0 6px 18px rgba(230, 138, 28, .10);
}
.jdp-faq-page-content .wp-block-details > summary {
list-style: none;
cursor: pointer;
padding: 18px 22px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 16px;
color: var(--fg1);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.jdp-faq-page-content .wp-block-details > summary::-webkit-details-marker { display: none; }
.jdp-faq-page-content .wp-block-details > summary::after {
content: "";
flex-shrink: 0;
width: 9px;
height: 9px;
border-right: 2px solid var(--jdp-orange, #E68A1C);
border-bottom: 2px solid var(--jdp-orange, #E68A1C);
transform: rotate(45deg);
transition: transform .24s ease;
margin-right: 4px;
}
.jdp-faq-page-content .wp-block-details[open] > summary::after { transform: rotate(-135deg); }
.jdp-faq-page-content .wp-block-details > *:not(summary) {
padding: 0 22px;
margin: 0 0 4px;
color: var(--fg2);
line-height: 1.7;
}
.jdp-faq-page-content .wp-block-details > *:not(summary):last-child { padding-bottom: 18px; }
/* ============================================================
Page Qui-sommes-nous (/qui-sommes-nous/) : design E-E-A-T (agence FR depuis 2019).
============================================================ */
.jdp-about { overflow: hidden; }
.jdp-about-hero { padding: var(--sp-14) 0 var(--sp-8); text-align: center; }
.jdp-about-h1 { font-size: var(--fs-h1, 40px); line-height: 1.12; margin: 12px 0 18px; color: var(--fg1); }
.jdp-about-lead { font-size: 18px; line-height: 1.65; color: var(--fg2); max-width: 720px; margin: 0 auto; }
.jdp-about-stats-wrap { padding: 0 0 var(--sp-8); }
.jdp-about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 18px; padding: 30px 24px; }
.jdp-about-stat { text-align: center; }
.jdp-about-stat-v { display: block; font-size: 32px; font-weight: 800; color: var(--jdp-orange, #E68A1C); line-height: 1; }
.jdp-about-stat-l { display: block; margin-top: 8px; font-size: 13px; color: var(--fg2); line-height: 1.3; }
.jdp-about-mission { padding: var(--sp-8) 0; }
.jdp-about-h2 { font-size: var(--fs-h2, 28px); line-height: 1.2; margin: 0 0 16px; color: var(--fg1); }
.jdp-about-h2--center { text-align: center; }
.jdp-about-p { font-size: 16px; line-height: 1.7; color: var(--fg2); margin: 0 0 28px; }
.jdp-about-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.jdp-about-pillar { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 24px 22px; }
.jdp-about-pillar-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft, rgba(230,138,28,.12)); color: var(--jdp-orange, #E68A1C); }
.jdp-about-pillar-icon svg { width: 22px; height: 22px; }
.jdp-about-pillar-t { font-size: 16px; font-weight: 700; margin: 14px 0 6px; color: var(--fg1); }
.jdp-about-pillar-d { font-size: 14px; line-height: 1.55; color: var(--fg2); margin: 0; }
.jdp-about-team { padding: var(--sp-8) 0; }
.jdp-about-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; }
.jdp-about-member { text-align: center; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 26px 16px; }
.jdp-about-avatar { display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; border-radius: 50%; background: linear-gradient(135deg, #E68A1C, #C91652); color: #fff; font-weight: 700; font-size: 20px; margin-bottom: 14px; }
.jdp-about-member-n { display: block; font-weight: 700; font-size: 15px; color: var(--fg1); }
.jdp-about-member-r { display: block; font-size: 13px; color: var(--fg2); margin-top: 3px; }
.jdp-about-trust { padding: var(--sp-8) 0; }
.jdp-about-trust-list { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.jdp-about-trust-list li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--fg1); }
.jdp-about-trust-check { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #E68A1C, #C91652); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.jdp-about-trust-check svg { width: 13px; height: 13px; }
.jdp-about-legal { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; }
.jdp-about-legal-t { font-size: 15px; font-weight: 700; margin: 0 0 8px; color: var(--fg1); }
.jdp-about-legal-p { font-size: 14px; line-height: 1.75; color: var(--fg2); margin: 0; }
.jdp-about-cta-wrap { padding: var(--sp-8) 0 var(--sp-14); }
.jdp-about-cta { text-align: center; background: linear-gradient(135deg, #0F172A, #1e293b); border-radius: 20px; padding: 44px 28px; }
.jdp-about-cta-t { font-size: 26px; font-weight: 800; margin: 0 0 10px; color: #fff; }
.jdp-about-cta-d { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.82); max-width: 560px; margin: 0 auto 24px; }
.jdp-about-cta-btn { display: inline-flex; padding: 14px 32px; border-radius: 999px; background: linear-gradient(135deg, #E68A1C, #FBA532); color: #fff; font-weight: 700; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.jdp-about-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(230,138,28,.3); }
@media (max-width: 900px) {
.jdp-about-stats, .jdp-about-team-grid { grid-template-columns: repeat(2, 1fr); }
.jdp-about-pillars, .jdp-about-trust-list { grid-template-columns: 1fr; }
}
/* ============================================================
PAGE GARANTIE (page-garantie.php) : réutilise .jdp-about-*, quelques ajouts.
============================================================ */
.jdp-garantie-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.jdp-garantie-pillar--accent { border-color: var(--jdp-orange, #E68A1C); box-shadow: 0 6px 20px rgba(230,138,28,.12); }
.jdp-garantie-conditions-title { font-size: 16px; font-weight: 700; color: var(--fg1); margin: 30px 0 12px; }
.jdp-garantie-conditions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.jdp-garantie-conditions li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.6; color: var(--fg2); }
.jdp-garantie-conditions li::before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 3px; border: 2px solid var(--jdp-orange, #E68A1C); opacity: .55; }
@media (max-width: 900px) {
.jdp-garantie-2col { grid-template-columns: 1fr; }
}
/* ============================================================
PAGE CONTACT (page-contact.php) : intro SEO + formulaire fonctionnel
Inputs alignés sur le langage myaccount, panneau latéral gradient navy.
============================================================ */
.jdp-contact-header { margin-bottom: 6px; max-width: 760px; }
.jdp-contact-title { font-size: var(--fs-h1); font-weight: 800; color: var(--fg1); margin: 8px 0 0; line-height: 1.15; }
.jdp-contact-intro { margin-bottom: var(--sp-8); max-width: 760px; }
.jdp-contact-intro > *:last-child { margin-bottom: 0; }
.jdp-contact-grid {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr);
gap: 28px;
align-items: start;
}
/* --- Carte formulaire --- */
.jdp-contact-card {
background: var(--jdp-white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 32px;
box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 12px 32px rgba(15,23,42,.05);
}
.jdp-contact-form { display: flex; flex-direction: column; gap: 18px; }
.jdp-contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.jdp-contact-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.jdp-contact-field label { font-size: 13px; font-weight: 600; color: var(--jdp-dark); }
.jdp-contact-req { color: var(--accent); }
.jdp-contact-field input,
.jdp-contact-field textarea {
width: 100%;
padding: 12px 14px;
min-height: 46px;
border: 1px solid var(--jdp-separator);
border-radius: 10px;
font-size: 15px;
font-family: inherit;
color: var(--jdp-dark);
background: var(--jdp-white);
transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.jdp-contact-field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.jdp-contact-field input:focus,
.jdp-contact-field textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(230,138,28,.15);
}
.jdp-contact-field input::placeholder { color: var(--fg2); opacity: .7; }
/* Honeypot anti-bot : hors écran, jamais visible */
.jdp-contact-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* reCAPTCHA v2 : le widget Google gère son propre style */
.jdp-contact-captcha { gap: 0; }
.jdp-contact-captcha .g-recaptcha { min-height: 78px; }
/* reCAPTCHA v2 = iframe 304px fixe : on la réduit sous 400px pour éviter le débordement horizontal */
@media (max-width: 400px) {
.jdp-contact-captcha { overflow: hidden; }
.jdp-contact-captcha .g-recaptcha { transform: scale(0.86); transform-origin: 0 0; min-height: 68px; }
}
.jdp-contact-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.jdp-contact-actions .jdp-btn--lg { min-height: 50px; }
.jdp-contact-note { font-size: 13px; color: var(--fg2); margin: 0; }
/* --- Bandeaux de statut --- */
.jdp-contact-alert { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 12px; margin-bottom: 22px; font-size: 14px; line-height: 1.5; }
.jdp-contact-alert strong { font-weight: 700; }
.jdp-contact-alert--success { background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46; }
.jdp-contact-alert--error { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }
/* --- Panneau latéral (gradient navy) --- */
.jdp-contact-aside { background: linear-gradient(155deg, #0F172A 0%, #1e293b 100%); border-radius: var(--radius-lg); padding: 32px 28px; color: #fff; position: sticky; top: 96px; }
.jdp-contact-aside-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #FBA532; }
.jdp-contact-aside-title { font-size: 22px; font-weight: 800; line-height: 1.25; margin: 10px 0 8px; color: #fff; }
.jdp-contact-aside-text { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.72); margin: 0; }
.jdp-contact-aside-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.jdp-contact-aside-list li { display: flex; align-items: flex-start; gap: 14px; }
.jdp-contact-aside-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: #FBA532; }
.jdp-contact-aside-ico svg { width: 20px; height: 20px; }
.jdp-contact-aside-list li > span:last-child { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: rgba(255,255,255,.66); line-height: 1.45; }
.jdp-contact-aside-list li strong { font-size: 14px; font-weight: 700; color: #fff; }
@media (max-width: 900px) {
.jdp-contact-grid { grid-template-columns: 1fr; gap: 22px; }
.jdp-contact-aside { position: static; }
}
@media (max-width: 560px) {
.jdp-contact-row { grid-template-columns: 1fr; }
.jdp-contact-card { padding: 22px; }
.jdp-contact-actions .jdp-btn--lg { width: 100%; }
.jdp-contact-note { text-align: center; width: 100%; }
}
/* Preuve client avant/apres (captures reelles non retouchees) : fiche Impressions Instagram #17433. */
.jdp-proof-compare {
background: var(--bg-soft, #F9F6F1);
border: 1px solid var(--border, #E9E6ED);
border-radius: var(--radius-lg, 20px);
padding: 32px 28px 28px;
margin: 32px 0;
max-width: none;
text-align: center;
}
.jdp-proof-compare__eyebrow {
display: flex;
width: max-content;
margin: 0 auto;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--eyebrow-color, #B45309);
}
.jdp-proof-compare__eyebrow svg { width: 14px; height: 14px; flex-shrink: 0; }
.jdp-proof-compare .jdp-proof-compare__title {
margin: 8px 0 22px;
font-size: 19px;
font-weight: 700;
color: var(--fg1, #1a1a1a);
line-height: 1.35;
text-align: center;
}
.jdp-proof-compare__panels {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 12px;
}
.jdp-proof-compare__panel {
flex: 1 1 0;
min-width: 0;
max-width: 220px;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.jdp-proof-compare__tag {
display: inline-block;
margin-bottom: 10px;
padding: 4px 14px;
border-radius: var(--radius-full, 9999px);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
}
.jdp-proof-compare__tag--before { background: #fff; border: 1px solid var(--border, #E9E6ED); color: var(--fg2, #69727D); }
.jdp-proof-compare__tag--after { background: var(--jdp-orange, #E68A1C); color: #fff; }
.jdp-proof-compare__photo {
display: block;
width: 100%;
aspect-ratio: var(--jdp-proof-ratio, 1284 / 1877);
background-size: cover;
background-position: top center;
border-radius: var(--radius-md, 12px);
border: 1px solid var(--border, #E9E6ED);
box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,.08));
}
.jdp-proof-compare__metric { margin: 12px 0 0; font-size: 15px; }
.jdp-proof-compare__metric strong {
display: block;
font-size: 22px;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--fg1, #1a1a1a);
line-height: 1.15;
}
.jdp-proof-compare__metric--after strong { color: #00B67A; }
.jdp-proof-compare__metric span { font-size: 12px; color: var(--fg2, #69727D); }
.jdp-proof-compare__arrow {
flex: 0 0 auto;
align-self: center;
margin-top: 46px;
font-size: 20px;
color: var(--fg3, #A5ADB8);
}
.jdp-proof-compare__delta {
margin: 22px 0 0;
padding-top: 18px;
border-top: 1px solid var(--border, #E9E6ED);
font-size: 15px;
color: var(--fg1, #1a1a1a);
}
.jdp-proof-compare__delta strong { color: #00B67A; font-size: 17px; font-variant-numeric: tabular-nums; }
.jdp-proof-compare__caption { margin: 14px auto 0; max-width: 640px; font-size: 13px; line-height: 1.55; color: var(--fg2, #69727D); }
.jdp-proof-compare__disclaimer { margin: 10px auto 0; max-width: 620px; font-size: 12px; line-height: 1.5; color: var(--fg3, #A5ADB8); font-style: italic; }
.jdp-proof-compare__link { margin: 12px 0 0; font-size: 14px; }
.jdp-proof-compare__link a { color: var(--jdp-orange, #E68A1C); font-weight: 600; text-decoration: underline; }
.jdp-proof-compare__link a:hover { color: var(--jdp-orange-hover, #FBA532); }
/* Centrage : le sélecteur est scopé sous .jdp-proof-compare pour battre la règle
thème .smm-split-group-header p{text-align:left} qui matche directement ces . */
.jdp-proof-compare .jdp-proof-compare__delta,
.jdp-proof-compare .jdp-proof-compare__caption,
.jdp-proof-compare .jdp-proof-compare__disclaimer,
.jdp-proof-compare .jdp-proof-compare__link { text-align: center; }
/* Le thème force `#tab-description p{margin:0 0 12px!important}` (product-content.css) :
ça met le gap photo/métrique à 0 et casse le centrage (margin:auto) des
du module,
et un strong noir écrase le vert. On re-scope sous #tab-description pour reprendre la main. */
body.single-product #tab-description .jdp-proof-compare__metric { margin-top: 20px !important; }
body.single-product #tab-description .jdp-proof-compare__caption { margin: 16px auto 0 !important; }
body.single-product #tab-description .jdp-proof-compare__disclaimer { margin: 10px auto 0 !important; }
body.single-product #tab-description .jdp-proof-compare__delta strong,
body.single-product #tab-description .jdp-proof-compare__metric--after strong { color: #00B67A !important; }
@media (max-width: 520px) {
.jdp-proof-compare { padding: 22px 16px 20px; }
.jdp-proof-compare__panels { gap: 8px; }
.jdp-proof-compare__arrow { margin-top: 40px; font-size: 16px; }
}
/* ===== Sommaire (table des matières) soigné : grille numérotée, survol net, chevron animé.
Rendu par l'habilleur (jdp_fiche_render_toc). Sélecteurs scopés sous #tab-description pour
battre les règles agressives du thème sur les listes/liens de la description. ===== */
body.single-product #tab-description .jdp-toc { max-width: 860px; margin: 4px auto 0; }
body.single-product #tab-description .jdp-toc__grid {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
body.single-product #tab-description .jdp-toc__grid > li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.single-product #tab-description .jdp-toc__grid > li::before { content: none !important; }
body.single-product #tab-description .jdp-toc__item {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
border-radius: var(--radius-md, 12px);
border: 1px solid var(--border, #E9E6ED);
background: var(--jdp-white, #fff);
color: var(--fg1, #15202e) !important;
text-decoration: none !important;
box-shadow: none !important;
transition: background-color 150ms cubic-bezier(0.23,1,0.32,1), border-color 150ms cubic-bezier(0.23,1,0.32,1), transform 150ms cubic-bezier(0.23,1,0.32,1);
}
.jdp-toc__num {
flex: 0 0 auto;
width: 30px; height: 30px;
display: grid; place-items: center;
border-radius: 8px;
background: var(--accent-soft, rgba(230,138,28,.1));
color: var(--jdp-orange, #E68A1C);
font-size: 13px; font-weight: 700;
font-variant-numeric: tabular-nums;
transition: background-color 150ms cubic-bezier(0.23,1,0.32,1), color 150ms cubic-bezier(0.23,1,0.32,1);
}
body.single-product #tab-description .jdp-toc__label {
flex: 1 1 auto;
min-width: 0;
font-size: 15px;
line-height: 1.4;
color: var(--fg1, #15202e);
}
.jdp-toc__chevron {
flex: 0 0 auto;
width: 16px; height: 16px;
color: var(--fg3, #A5ADB8);
transition: transform 150ms cubic-bezier(0.23,1,0.32,1), color 150ms cubic-bezier(0.23,1,0.32,1);
}
@media (hover: hover) and (pointer: fine) {
body.single-product #tab-description .jdp-toc__item:hover { border-color: var(--jdp-orange, #E68A1C); background: var(--bg-soft, #F9F6F1); }
.jdp-toc__item:hover .jdp-toc__num { background: var(--jdp-orange, #E68A1C); color: #fff; }
.jdp-toc__item:hover .jdp-toc__chevron { transform: translateX(3px); color: var(--jdp-orange, #E68A1C); }
}
.jdp-toc__item:active { transform: scale(0.99); }
.jdp-toc__item:focus-visible { outline: 2px solid var(--jdp-orange, #E68A1C); outline-offset: 2px; }
@media (max-width: 640px) {
body.single-product #tab-description .jdp-toc__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.jdp-toc__item, .jdp-toc__num, .jdp-toc__chevron { transition: background-color 150ms ease, color 150ms ease; }
.jdp-toc__item:active { transform: none; }
.jdp-toc__item:hover .jdp-toc__chevron { transform: none; }
}
/* ============================================================
* MY-ACCOUNT v3.2 : Refonte premium (v0.14.50)
* Élève la sidebar, le tableau de commandes, les cards, les
* en-têtes de section, l'état vide et les formulaires WC.
* Purement additif (gagne par cascade), conserve TOUS les hooks
* et classes WooCommerce. Micro-interactions Emil : transform /
* opacity uniquement, ease-out custom, :active scale, focus-visible
* WCAG, prefers-reduced-motion, cibles tactiles >= 44px.
* Contraintes couleur : l'orange vif --accent (#E68A1C) ne passe
* PAS l'AA en texte sur fond clair, on utilise #B45309 (--eyebrow)
* pour tout texte accent, l'orange vif restant réservé aux à-plats
* blancs et aux éléments graphiques (barres, points, icônes).
* ============================================================ */
.jdp-myaccount-wrap {
--acct-ease: cubic-bezier(0.22, 1, 0.36, 1);
--acct-accent-ink: #B45309; /* orange foncé lisible AA sur fond clair */
--acct-row-hover: rgba(230, 138, 28, 0.05);
--acct-focus-ring: 0 0 0 3px rgba(230, 138, 28, 0.35);
}
/* Anneau de focus clavier commun (jamais au clic souris) */
.jdp-myaccount-nav-link:focus-visible,
.jdp-myaccount-card--link:focus-visible,
.jdp-myaccount-orders-num:focus-visible,
.jdp-myaccount-content .jdp-btn:focus-visible,
.jdp-myaccount-content .button:focus-visible,
.jdp-myaccount-content button:focus-visible,
.jdp-myaccount-orders-pagination a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
box-shadow: var(--acct-focus-ring);
}
/* ---- SIDEBAR : carte élevée + items premium ------------------ */
.jdp-myaccount-nav-list ul {
border-radius: 16px;
box-shadow: var(--shadow-sm);
gap: 2px;
}
.jdp-myaccount-nav-link {
position: relative;
min-height: 44px;
padding: 11px 14px;
border-radius: 10px;
font-weight: 500;
overflow: hidden;
transition: background-color var(--dur-fast) var(--acct-ease),
color var(--dur-fast) var(--acct-ease);
}
/* Barre indicatrice à gauche (croît au survol, pleine si actif) */
.jdp-myaccount-nav-link::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 3px;
height: 0;
border-radius: 0 3px 3px 0;
background: var(--accent);
transform: translateY(-50%);
transition: height var(--dur-normal) var(--acct-ease);
}
.jdp-myaccount-nav-link:hover {
background: var(--bg-soft);
color: var(--acct-accent-ink);
}
.jdp-myaccount-nav-link:hover::before { height: 16px; }
.jdp-myaccount-nav-link:hover .jdp-myaccount-nav-icon { color: var(--acct-accent-ink); }
.jdp-myaccount-nav-icon { transition: color var(--dur-fast) var(--acct-ease), transform var(--dur-fast) var(--acct-ease); }
.jdp-myaccount-nav-link:hover .jdp-myaccount-nav-icon { transform: translateX(1px); }
/* État actif : à-plat orange doux + texte AA + barre + icône accent.
On neutralise l'ancien à-plat orange plein (texte blanc borderline). */
.jdp-myaccount-nav-link.is-active {
background: var(--accent-soft);
color: var(--acct-accent-ink);
font-weight: 600;
box-shadow: none;
}
.jdp-myaccount-nav-link.is-active::before { height: 22px; }
.jdp-myaccount-nav-link.is-active .jdp-myaccount-nav-icon { color: var(--accent); }
.jdp-myaccount-nav-link:active { transform: scale(0.98); }
/* ---- EN-TÊTE DE SECTION : détail accent ---------------------- */
.jdp-myaccount-section-header { position: relative; }
.jdp-myaccount-section-title { position: relative; padding-top: 14px; letter-spacing: -0.01em; }
.jdp-myaccount-section-title::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, var(--accent), var(--jdp-campaign));
}
/* ---- TABLEAU DE COMMANDES : liste premium (desktop) ---------- */
.jdp-myaccount-orders-wrap {
border-radius: 16px;
box-shadow: var(--shadow-sm);
}
.jdp-myaccount-orders-table thead th {
letter-spacing: 0.06em;
font-size: 11px;
padding: 15px 20px;
}
.jdp-myaccount-orders-table tbody td,
.jdp-myaccount-orders-table tbody th {
padding: 18px 20px;
transition: background-color var(--dur-fast) var(--acct-ease);
}
.jdp-myaccount-orders-table tbody tr {
transition: background-color var(--dur-fast) var(--acct-ease);
}
.jdp-myaccount-orders-table tbody tr:hover td,
.jdp-myaccount-orders-table tbody tr:hover th {
background: var(--acct-row-hover);
}
/* Numéro de commande : lien fort, chiffres alignés */
.jdp-myaccount-orders-num {
color: var(--acct-accent-ink);
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
/* Date + total : chiffres alignés (pas de décalage de colonne) */
.jdp-myaccount-orders-date,
.jdp-myaccount-orders-total { font-variant-numeric: tabular-nums; }
.jdp-myaccount-orders-date { white-space: nowrap; }
.jdp-myaccount-orders-total { color: var(--jdp-dark); font-weight: 600; }
/* Badge d'état : casse naturelle WC, jamais coupé sur 2 lignes */
.jdp-status-badge { text-transform: none; letter-spacing: 0.01em; white-space: nowrap; }
/* Actions Voir / Facture : boutons ghost sobres (une seule action
ne doit pas crier). On bat la règle .jdp-myaccount-content .button
(0,2,0) qui les peignait en orange plein. */
.jdp-myaccount-content .button.jdp-btn--ghost,
.jdp-myaccount-orders-pagination a.jdp-btn--ghost {
background: transparent;
color: var(--fg1);
border: 1px solid var(--border);
box-shadow: none;
font-weight: 600;
transition: color var(--dur-fast) var(--acct-ease),
border-color var(--dur-fast) var(--acct-ease),
background-color var(--dur-fast) var(--acct-ease),
transform var(--dur-fast) var(--acct-ease);
}
.jdp-myaccount-content .button.jdp-btn--ghost:hover,
.jdp-myaccount-orders-pagination a.jdp-btn--ghost:hover {
background: var(--accent-soft);
color: var(--acct-accent-ink);
border-color: var(--accent);
}
/* Feedback de pression (Emil) sur tous les boutons .jdp-btn de la zone compte
(actions ghost, pagination, CTA état vide). Bat le .jdp-btn:active global. */
.jdp-myaccount-content .jdp-btn:active { transform: scale(0.97); }
/* Boutons d'action : flux inline naturel (PAS de display:flex sur le
,
qui casserait la répartition des colonnes et l'alignement des lignes du
tableau). Espacement via marge, retour à la ligne géré proprement. */
.jdp-myaccount-orders-table .jdp-btn { margin: 4px 8px 4px 0; }
.jdp-myaccount-orders-table .jdp-btn:last-child { margin-right: 0; }
/* Entrée en cascade des lignes (fondu seul : pas de transform sur ,
qui provoque des artefacts de rendu sur les lignes de tableau). */
@media (prefers-reduced-motion: no-preference) {
.jdp-myaccount-orders-table tbody tr {
opacity: 0;
animation: jdpAcctRowIn 0.4s var(--acct-ease) forwards;
}
.jdp-myaccount-orders-table tbody tr:nth-child(1) { animation-delay: 0.02s; }
.jdp-myaccount-orders-table tbody tr:nth-child(2) { animation-delay: 0.06s; }
.jdp-myaccount-orders-table tbody tr:nth-child(3) { animation-delay: 0.10s; }
.jdp-myaccount-orders-table tbody tr:nth-child(4) { animation-delay: 0.14s; }
.jdp-myaccount-orders-table tbody tr:nth-child(n+5) { animation-delay: 0.16s; }
@keyframes jdpAcctRowIn { to { opacity: 1; } }
}
/* ---- CARDS DASHBOARD : affordance + presse + focus ----------- */
.jdp-myaccount-card--link {
position: relative;
transition: transform var(--dur-normal) var(--acct-ease),
box-shadow var(--dur-normal) var(--acct-ease),
border-color var(--dur-normal) var(--acct-ease);
}
/* Flèche discrète en bas à droite, glisse au survol (CSS pur) */
.jdp-myaccount-card--link::after {
content: "";
position: absolute;
right: 20px;
bottom: 20px;
width: 18px;
height: 18px;
background: currentColor;
color: var(--fg3);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
opacity: 0;
transform: translateX(-4px);
transition: opacity var(--dur-normal) var(--acct-ease), transform var(--dur-normal) var(--acct-ease), color var(--dur-normal) var(--acct-ease);
}
.jdp-myaccount-card--link:hover::after,
.jdp-myaccount-card--link:focus-visible::after {
opacity: 1;
transform: translateX(0);
color: var(--accent);
}
.jdp-myaccount-card--link:hover {
box-shadow: var(--shadow-md);
border-color: var(--accent);
}
.jdp-myaccount-card--link:active { transform: translateY(-1px) scale(0.985); }
.jdp-myaccount-card-icon { transition: background-color var(--dur-fast) var(--acct-ease), color var(--dur-fast) var(--acct-ease), transform var(--dur-normal) var(--acct-ease); }
.jdp-myaccount-card--link:hover .jdp-myaccount-card-icon { transform: scale(1.06); }
/* Entrée en cascade des 4 cards (coupée si reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
.jdp-myaccount-dashboard-grid .jdp-myaccount-card {
opacity: 0;
transform: translateY(8px);
animation: jdpAcctCardIn 0.45s var(--acct-ease) forwards;
}
.jdp-myaccount-dashboard-grid .jdp-myaccount-card:nth-child(1) { animation-delay: 0.04s; }
.jdp-myaccount-dashboard-grid .jdp-myaccount-card:nth-child(2) { animation-delay: 0.10s; }
.jdp-myaccount-dashboard-grid .jdp-myaccount-card:nth-child(3) { animation-delay: 0.16s; }
.jdp-myaccount-dashboard-grid .jdp-myaccount-card:nth-child(4) { animation-delay: 0.22s; }
@keyframes jdpAcctCardIn { to { opacity: 1; transform: none; } }
}
/* ---- ÉTAT VIDE : médaillon soft ------------------------------ */
.jdp-myaccount-empty {
border-radius: 16px;
box-shadow: var(--shadow-sm);
}
.jdp-myaccount-empty-icon {
width: 44px;
height: 44px;
padding: 18px;
box-sizing: content-box;
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent);
}
/* ---- FORMULAIRES WC (details du compte / adresse) ------------ */
.jdp-myaccount-content .woocommerce-EditAccountForm,
.jdp-myaccount-content .woocommerce-address-fields__field-wrapper,
.jdp-myaccount-content form.edit-account,
.jdp-myaccount-content form.woocommerce-address-fields {
border-radius: 16px;
box-shadow: var(--shadow-sm);
}
.jdp-myaccount-content .form-row > label,
.jdp-myaccount-content .woocommerce-form-row > label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--jdp-dark);
margin: 0 0 7px;
}
.jdp-myaccount-content .form-row .required { color: var(--accent); text-decoration: none; border: 0; }
.jdp-myaccount-content .form-row input[type="text"],
.jdp-myaccount-content .form-row input[type="email"],
.jdp-myaccount-content .form-row input[type="password"],
.jdp-myaccount-content .form-row input[type="tel"],
.jdp-myaccount-content .form-row select {
padding: 13px 14px;
border: 1.5px solid var(--jdp-separator);
border-radius: 12px;
font-size: 15px;
min-height: 48px;
box-sizing: border-box;
transition: border-color var(--dur-fast) var(--acct-ease), box-shadow var(--dur-fast) var(--acct-ease);
}
.jdp-myaccount-content .form-row input:focus,
.jdp-myaccount-content .form-row select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 4px rgba(230, 138, 28, 0.14);
}
.jdp-myaccount-content fieldset {
margin: var(--sp-5) 0 0;
padding: var(--sp-5);
border: 1px solid var(--jdp-separator);
border-radius: 12px;
background: var(--bg-soft);
}
.jdp-myaccount-content fieldset legend {
padding: 0 8px;
font-size: 13px;
font-weight: 700;
color: var(--jdp-dark);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Bouton submit (reste orange plein = action primaire) : presse + lift */
.jdp-myaccount-content .button,
.jdp-myaccount-content button[type="submit"] {
box-shadow: 0 8px 24px -6px rgba(230, 138, 28, 0.35);
transition: background-color var(--dur-normal) var(--acct-ease), transform var(--dur-fast) var(--acct-ease), box-shadow var(--dur-normal) var(--acct-ease);
}
.jdp-myaccount-content .button:not(.jdp-btn--ghost):hover,
.jdp-myaccount-content button[type="submit"]:hover { transform: translateY(-1px); }
.jdp-myaccount-content .button:not(.jdp-btn--ghost):active,
.jdp-myaccount-content button[type="submit"]:active { transform: scale(0.98); }
/* ---- TABLEAU DE COMMANDES : cartes premium (mobile) ---------- */
@media (max-width: 700px) {
.jdp-myaccount-orders-wrap { box-shadow: none; }
.jdp-myaccount-orders-table tbody tr {
background: var(--jdp-white);
border: 1px solid var(--jdp-separator);
border-radius: 14px;
box-shadow: var(--shadow-sm);
padding: 6px 4px;
margin: 0 0 var(--sp-4);
overflow: hidden;
}
.jdp-myaccount-orders-table tbody td,
.jdp-myaccount-orders-table tbody th {
padding: 11px 16px;
border-bottom: 1px solid var(--jdp-separator);
}
.jdp-myaccount-orders-table tbody td::before,
.jdp-myaccount-orders-table tbody th::before {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--fg2);
}
/* Numéro = en-tête de carte */
.jdp-myaccount-orders-table tbody th.woocommerce-orders-table__cell-order-number {
justify-content: flex-start;
background: var(--bg-soft);
padding: 13px 16px;
}
.woocommerce-orders-table__cell-order-number::before { display: none; }
.jdp-myaccount-orders-table tbody th.woocommerce-orders-table__cell-order-number .jdp-myaccount-orders-num { font-size: 16px; }
/* Actions : boutons pleine largeur, empilés, cible tactile 44px */
.woocommerce-orders-table__cell-order-actions {
flex-direction: column;
align-items: stretch;
border-bottom: 0;
gap: 8px;
}
.woocommerce-orders-table__cell-order-actions::before { display: none; }
.jdp-myaccount-orders-table .woocommerce-orders-table__cell-order-actions .jdp-btn {
width: 100%;
margin: 0;
min-height: 44px;
font-size: 14px;
}
/* Pagination : deux boutons confortables */
.jdp-myaccount-orders-pagination a { min-height: 44px; }
}
/* Sidebar mobile : items en pastilles, actif lisible, cibles 44px */
@media (max-width: 960px) {
.jdp-myaccount-nav-list ul { box-shadow: none; }
.jdp-myaccount-nav-link { min-height: 44px; }
.jdp-myaccount-nav-link::before { display: none; }
.jdp-myaccount-nav-link.is-active {
background: var(--accent-soft);
border: 1px solid var(--accent);
color: var(--acct-accent-ink);
}
}
/* ---- Respect explicite de prefers-reduced-motion ------------- */
@media (prefers-reduced-motion: reduce) {
.jdp-myaccount-nav-link,
.jdp-myaccount-nav-icon,
.jdp-myaccount-card--link,
.jdp-myaccount-card-icon,
.jdp-myaccount-card--link::after,
.jdp-myaccount-content .button,
.jdp-myaccount-content .button.jdp-btn--ghost { transition: none; }
.jdp-myaccount-card--link:hover,
.jdp-myaccount-card--link:active { transform: none; }
.jdp-myaccount-card--link:hover .jdp-myaccount-card-icon { transform: none; }
.jdp-myaccount-nav-link:active { transform: none; }
}
/* ============================================================
* MY-ACCOUNT v3.3 : compat WooCommerce (fix layout sidebar)
* woocommerce.css impose float + width 30%/70% à
* .woocommerce-MyAccount-navigation / -content. Sur notre layout
* GRID (sidebar 260px + 1fr), la nav tombait à 30% de 260px = 78px,
* assez pour l'icône seule : les LIBELLÉS étaient coupés (sidebar
* réduite à des icônes). On neutralise width/float. Et comme la
* couleur de lien globale du thème (var(--accent)) est posée via
* -webkit-text-fill-color (imbattable par `color` seul), on la
* rétablit explicitement sur les liens de nav.
* ============================================================ */
.jdp-myaccount-wrap .woocommerce-MyAccount-navigation { width: 100%; float: none; }
.jdp-myaccount-wrap .woocommerce-MyAccount-content { width: auto; float: none; }
.jdp-myaccount-wrap .woocommerce-MyAccount-navigation a.jdp-myaccount-nav-link {
color: #1F2433 !important;
-webkit-text-fill-color: #1F2433 !important;
text-decoration: none !important;
}
.jdp-myaccount-wrap .woocommerce-MyAccount-navigation a.jdp-myaccount-nav-link:hover,
.jdp-myaccount-wrap .woocommerce-MyAccount-navigation li.is-active a.jdp-myaccount-nav-link,
.jdp-myaccount-wrap .woocommerce-MyAccount-navigation a.jdp-myaccount-nav-link.is-active {
color: #B45309 !important;
-webkit-text-fill-color: #B45309 !important;
}