<section id="napoon-experts" class="napoon-experts">
<div class="wrap">
<h2 class="nx-heading">Ce que disent les experts.</h2>
</div>
<div class="nx-slider wrap">
<div class="swiper nx-swiper" data-desktop-view="3" data-tablet-view="2" data-mobile-view="1.1" data-gap="36">
<div class="swiper-wrapper">
<!-- Intro — masqué sur mobile -->
<div class="swiper-slide nx-hide-mobile">
<article class="nx-card nx-card--intro">
<div class="nx-card-intro">
<h3>Ne nous croyez pas sur parole.</h3>
<p>Écoutez les experts parler de l'effet des couvertures lestées</p>
</div>
<div class="nx-floor-shadow" aria-hidden="true"></div>
</article>
</div>
<!-- Avis 1 -->
<div class="swiper-slide">
<article class="nx-card">
<div class="nx-avatar">
<img src="//napoon.fr/cdn/shop/files/Dr_Jimmy_Mohamed_400x400.jpg?v=1745617427" alt="Dr Jimmy Mohamed" loading="lazy">
</div>
<div class="nx-card-body">
<p class="nx-text">
J’avais testé la couverture lestée et j’en étais plutôt satisfait. C’est une couette très lourde, qui possède des vertus étonnantes, et qui est même préconisée dans l’apaisement des troubles autistiques.
</p>
<p class="nx-author">Dr Jimmy Mohamed</p>
<p class="nx-tag">Chroniqueur santé (France 2)</p>
</div>
<div class="nx-floor-shadow" aria-hidden="true"></div>
</article>
</div>
<!-- Avis 2 -->
<div class="swiper-slide">
<article class="nx-card">
<div class="nx-avatar">
<img src="//napoon.fr/cdn/shop/files/Dr_Michael_J_Breus_400x400.webp?v=1745616431" alt="Dr. Michael J. Breus" loading="lazy">
</div>
<div class="nx-card-body">
<p class="nx-text">
Les couvertures lestées sont recommandées pour les personnes souffrant de troubles tels que l'autisme, le TDAH et les troubles du traitement sensoriel. Elles favorisent l'endormissement.
</p>
<p class="nx-author">Dr. Michael J. Breus</p>
<p class="nx-tag">Spécialiste du sommeil</p>
</div>
<div class="nx-floor-shadow" aria-hidden="true"></div>
</article>
</div>
<!-- Avis 3 -->
<div class="swiper-slide">
<article class="nx-card">
<div class="nx-avatar">
<img src="//napoon.fr/cdn/shop/files/Suzanne_Dawson_400x400.jpg?v=1745617390" alt="Suzanne Dawson" loading="lazy">
</div>
<div class="nx-card-body">
<p class="nx-text">
En ergothérapie, les couvertures lestées deviennent courantes comme technologie d'assistance, et les preuves sont solides pour que leur utilisation soit recommandée par les professionnels de santé.
</p>
<p class="nx-author">Suzanne Dawson</p>
<p class="nx-tag">Ergothérapeute</p>
</div>
<div class="nx-floor-shadow" aria-hidden="true"></div>
</article>
</div>
</div>
<div class="nx-nav">
<button class="nx-prev" aria-label="Précédent">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none"><path d="M16 4l-8 8 8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<button class="nx-next" aria-label="Suivant">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none"><path d="M8 4l8 8-8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
</div>
</div>
</div>
<style>
:root{
--nx-ink:#0A2D53;
--nx-bg:#F6F1E6;
--nx-muted:#8C939D;
--nx-radius:28px;
--nx-shadow-1:0 12px 32px rgba(0,0,0,.06);
--nx-shadow-2:0 6px 16px rgba(0,0,0,.05);
--nx-dot-shadow:0 10px 28px rgba(10,45,83,.25);
}
#napoon-experts{ background:var(--nx-bg); padding:32px 0 72px !important; }
#napoon-experts .wrap{
max-width:1600px !important;
margin:0 auto; padding:0 28px;
}
/* TITRE avec couleur #1E1B29 */
#napoon-experts .nx-heading{
text-align:center;
color:#1E1B29;
font-weight:900;
font-size:clamp(40px,4.4vw,68px);
line-height:1.05;
margin:0 0 56px !important;
transform:none !important;
}
.nx-swiper, .nx-swiper .swiper-wrapper, .nx-swiper .swiper-slide{ overflow:visible !important; }
.nx-swiper .swiper-wrapper{ align-items:stretch; }
.nx-swiper .swiper-slide{ display:flex; }
.nx-card{
position:relative; display:flex; flex-direction:column; width:100%;
background:#fff; border-radius:var(--nx-radius);
padding:88px 36px 40px;
box-shadow:var(--nx-shadow-1), var(--nx-shadow-2);
height:100%;
}
.nx-card-body{ margin-top:0 !important; flex:1 1 auto; }
/* INTRO — fond #1E1B29 + texte blanc */
.nx-card--intro{
background:#1E1B29; color:#fff; padding:48px 44px;
display:flex; align-items:flex-start;
}
.nx-card--intro .nx-card-intro{ max-width:640px; }
.nx-card--intro h3{
margin:0 0 14px;
font-weight:800;
font-size:clamp(24px,2.3vw,38px);
line-height:1.18;
color:#fff;
}
.nx-card--intro p{
margin:0;
color:#fff;
opacity:.95;
}
.nx-avatar{
position:absolute; top:-56px; right:28px;
width:120px; height:120px; border-radius:999px; z-index:3; pointer-events:none;
}
.nx-avatar img{
width:100%; height:100%; border-radius:inherit; object-fit:cover; object-position:center;
border:6px solid var(--nx-bg); box-shadow:0 14px 30px rgba(0,0,0,.18); background:#fff;
}
.nx-floor-shadow{
position:absolute; left:24px; right:24px; bottom:-18px; height:28px; border-radius:999px;
background:radial-gradient(ellipse at center, rgba(0,0,0,.12), rgba(0,0,0,0) 60%);
filter:blur(6px);
}
.nx-text{ margin:0 0 18px; line-height:1.7; color:#1F2937; }
.nx-author{ margin:14px 0 2px; font-weight:800; color:#0D1722; }
.nx-tag{ margin:0; color:var(--nx-muted); }
/* BOUTONS NAV — fond #1E1B29 */
.nx-nav{ display:flex; gap:14px; justify-content:center; margin-top:26px; }
.nx-nav .nx-prev, .nx-nav .nx-next{
width:52px; height:52px; border-radius:999px; border:0;
background:#1E1B29; color:#fff;
display:inline-flex; align-items:center; justify-content:center;
box-shadow:var(--nx-dot-shadow); cursor:pointer;
}
@media (min-width:1024px){
.nx-card, .nx-card--intro{ min-height:360px; }
}
@media (max-width:1199.98px){
#napoon-experts .wrap{ max-width:94vw !important; padding:0 20px; }
.nx-heading{ margin-bottom:44px !important; }
.nx-card{ padding:82px 28px 34px; }
.nx-avatar{ top:-50px; right:18px; width:110px; height:110px; }
}
@media (max-width:767.98px){
#napoon-experts .wrap{ max-width:96vw !important; padding:0 16px; }
.nx-heading{ margin-bottom:28px !important; }
.nx-card{ padding:76px 18px 28px; }
.nx-avatar{ top:-44px; right:14px; width:96px; height:96px; }
/* Masquer la carte d’intro sur téléphone */
#napoon-experts .nx-hide-mobile{
display: none !important;
}
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const root = document.querySelector('#napoon-experts .nx-swiper');
if (!root || typeof Swiper === 'undefined') return;
const gap = parseInt(root.dataset.gap || 36, 10);
const swiper = new Swiper(root, {
loop: false,
centeredSlides: false,
watchSlidesProgress: true,
spaceBetween: gap,
slidesPerView: parseFloat(root.dataset.mobileView || 1.1),
breakpoints: {
768: { slidesPerView: parseFloat(root.dataset.tabletView || 2), spaceBetween: gap },
1024: { slidesPerView: parseFloat(root.dataset.desktopView || 3), spaceBetween: gap }
},
navigation: {
nextEl: '#napoon-experts .nx-next',
prevEl: '#napoon-experts .nx-prev'
},
on: { init: equalizeHeights, resize: equalizeHeights }
});
function equalizeHeights(){
const cards = root.querySelectorAll('.nx-card');
let maxH = 0;
cards.forEach(c => c.style.height='auto');
cards.forEach(c => { maxH = Math.max(maxH, c.getBoundingClientRect().height); });
if (maxH > 0) cards.forEach(c => c.style.height = Math.ceil(maxH) + 'px');
}
});
</script>
</section>
Pastebin
Retrouvez, créez et partagez vos snippets en temps réel.