/* Site vitrine SellingAtHome — mise en page reprise du site WordPress, habillée avec la charte des documentations. */

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); position:relative; z-index:1; }
.deco { position:absolute; pointer-events:none; user-select:none; z-index:0; }
.band { padding:90px 0; position:relative; }
.band-white { background:#fff; }
.band-paper { background:var(--paper); }
.band-dark { background:var(--hero); color:var(--on-hero); }
.band-dark h2 { color:#fff; }
.sec-title { text-align:center; font-size:clamp(1.9rem,3.6vw,2.7rem); margin-bottom:48px; }
.sec-title .script { font-size:1.35em; }
/* Courbes d'angle du site actuel : la section suivante recouvre le bas de la précédente */
.curve-tl, .curve-tr { margin-top:-150px; z-index:2; }
.curve-tl { border-top-left-radius:150px; }
.curve-tr { border-top-right-radius:150px; }

/* =====================================================================
   En-tête
   ===================================================================== */
.site-header { position:sticky; top:0; z-index:60; background:var(--hero); color:var(--on-hero); --logo-ink:#FFFFFF; --logo-at:#A99DBE; transition:box-shadow .2s ease; }
.site-header.is-scrolled { box-shadow:0 10px 30px rgba(22,16,31,.35); }
body.has-band .site-header:not(.is-scrolled) { background:linear-gradient(90deg, var(--accent) 0 20.4%, var(--hero) 20.4%); --logo-at:var(--plum); }
/* Boutons contour sur fond sombre */
.home-hero .btn-outline, .band-dark .btn-outline, .page-hero .btn-outline { color:var(--accent); }
.home-hero .btn-outline:hover, .band-dark .btn-outline:hover, .page-hero .btn-outline:hover { background:rgba(121,198,192,.14); }
.sh-in { position:relative; display:flex; align-items:center; gap:28px; padding:20px 32px; }
.brand { display:block; line-height:0; flex:none; border-radius:8px; }
.brand svg { width:240px; height:auto; }
.mainnav { flex:1 1 auto; min-width:0; }
.nav-list { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:4px; }
.nav-item { position:relative; display:flex; align-items:center; }
.nav-item.mega-item { position:static; }
.nav-link { color:var(--on-hero); text-decoration:none; font-weight:600; font-size:1.02rem; padding:8px 12px; border-radius:100px; white-space:nowrap; }
.nav-link:hover, .nav-item.open > .nav-link { color:#fff; background:rgba(255,255,255,.08); }
.nav-link[aria-current="page"] { color:var(--accent); }
.nav-toggle { display:grid; place-items:center; width:26px; height:26px; margin-left:-8px; padding:0; border:0; border-radius:50%; background:none; color:var(--on-hero); cursor:pointer; }
.nav-toggle svg { width:14px; height:14px; transition:transform .15s ease; }
.nav-item.open > .nav-toggle svg { transform:rotate(180deg); }
.nav-panel { display:none; position:absolute; top:calc(100% + 12px); left:0; z-index:70; background:var(--card); color:var(--text); border:1px solid var(--rule); border-top:5px solid var(--accent); border-radius:18px; box-shadow:0 22px 48px rgba(22,16,31,.28); padding:10px; min-width:270px; }
.nav-item.open > .nav-panel { display:block; }
.nav-panel::before { content:""; position:absolute; left:0; right:0; top:-22px; height:18px; } /* pont de survol */
.drop-list, .mega-list { list-style:none; margin:0; padding:0; }
.drop-list a, .mega-list a { display:block; padding:10px 14px; border-radius:12px; color:var(--heading); font-weight:600; text-decoration:none; line-height:1.35; }
.drop-list a:hover, .mega-list a:hover { background:var(--surface); }
.drop-list a[aria-current="page"], .mega-list a[aria-current="page"] { background:var(--accent-wash); color:var(--accent-ink); }
.nav-panel.mega { left:32px; right:32px; top:calc(100% - 6px); padding:26px 34px 24px; }
.mega-list { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px 28px; }
.mega-list a { display:flex; align-items:center; gap:14px; padding:8px 10px; }
.mega-ico { width:54px; height:54px; flex:none; border-radius:50%; background:var(--surface); transition:transform .15s ease; }
.mega-list a:hover .mega-ico, .mega-list a:focus-visible .mega-ico { transform:scale(1.06); }
.mega-new { display:flex; align-items:center; gap:14px; margin:18px 0 0 10px; }
.mega-new::before { content:""; width:34px; height:2px; background:var(--accent); flex:none; }
.mega-new::after { content:""; flex:0 1 190px; height:2px; background:var(--accent); }
.mega-new-tag { font-family:var(--f-display); color:var(--accent); font-size:1.75rem; line-height:1; white-space:nowrap; }
.mega-new-btn { background:var(--plum); color:#fff; font-weight:700; text-decoration:none; border-radius:100px; padding:11px 20px; white-space:nowrap; }
.mega-new-btn:hover, .mega-new-btn:focus-visible { background:var(--hero); color:#fff; }
.nav-cta-mobile { display:none; }
.sh-right { display:flex; align-items:center; gap:10px; flex:none; margin-left:auto; }
.icon-btn { display:grid; place-items:center; width:42px; height:42px; padding:0; border:0; border-radius:50%; background:var(--plum); color:#fff; cursor:pointer; }
.icon-btn svg { width:18px; height:18px; }
.icon-btn:hover, .icon-btn[aria-expanded="true"] { background:#5E4D78; }
.lang { display:flex; align-items:center; background:var(--plum); border-radius:100px; padding:4px; font-weight:700; font-size:.88rem; }
.lang > * { padding:6px 11px; border-radius:100px; line-height:1.2; }
.lang .lang-cur { background:#fff; color:var(--heading); }
.lang a { color:#fff; text-decoration:none; }
.lang a:hover { color:var(--accent); }
.menu-btn { display:none; }
.search-panel { background:var(--hero-deep); padding:16px 32px 20px; }
.search-panel .search-box { max-width:720px; margin:0 auto; }

/* Recherche (reprise des documentations) */
.search-box { position:relative; }
.search-box input { font:inherit; width:100%; color:var(--text); background:#fff; border:2px solid transparent; border-radius:100px; padding:12px 18px 12px 46px; outline:none; }
.search-box input:focus { border-color:var(--accent); }
.search-box::before { content:""; position:absolute; left:18px; top:50%; width:16px; height:16px; transform:translateY(-50%); z-index:1;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23665C7A' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E"); }
.search-results { position:absolute; left:0; right:0; top:calc(100% + 8px); max-height:70vh; overflow-y:auto; background:var(--card); border:1px solid var(--rule); border-radius:16px; box-shadow:0 18px 40px rgba(22,16,31,.3); z-index:80; display:none; padding:6px; }
.search-results.open { display:block; }
.search-results a { display:block; padding:10px 12px; border-radius:12px; text-decoration:none; color:var(--text); }
.search-results a:hover, .search-results a.sel { background:var(--surface); }
.search-results .sr-path { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); }
.search-results .sr-title { display:block; font-weight:700; color:var(--heading); margin:2px 0; }
.search-results .sr-snip { display:block; font-size:.85rem; color:var(--muted); line-height:1.45; }
.search-results mark { background:var(--yellow-wash); color:inherit; padding:0 1px; border-radius:3px; }
.search-results .sr-empty, .search-results .sr-count { padding:10px 12px; color:var(--muted); font-size:.85rem; }

/* =====================================================================
   Boutons ronds (carrousels)
   ===================================================================== */
.round-btn { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--accent-ink); cursor:pointer; }
.round-btn svg { width:22px; height:22px; }
.round-btn:hover { background:var(--accent-wash); }
.round-btn.on-dark { color:var(--accent); }
.round-btn.on-dark:hover { background:rgba(255,255,255,.08); }
.round-btn:disabled { opacity:.3; cursor:default; background:none; }

/* =====================================================================
   Accueil : carrousel d'ouverture
   ===================================================================== */
.home-hero { position:relative; background:var(--hero); color:var(--on-hero); padding:40px 0 220px; overflow:hidden; }
.hh-band { position:absolute; left:0; top:0; bottom:0; width:20.4%; background:var(--accent) url("../media/2021/06/lignes-sah-08.svg") no-repeat right -40px top -120px / 130% auto; }
.home-hero .deco-tr { right:-30px; top:-40px; width:330px; }
.hh-slides { position:relative; z-index:1; max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
.hh-slide { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:70px; align-items:center; min-height:470px; }
.hh-slide.is-active { animation:fade .5s ease; }
@keyframes fade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.hh-media { margin-left:calc(var(--gutter) * -1); }
.hh-media img { display:block; width:100%; max-height:480px; object-fit:contain; filter:drop-shadow(0 22px 40px rgba(0,0,0,.25)); }
.hh-text { display:flex; flex-direction:column; gap:22px; max-width:560px; }
.hh-text h1, .hh-text .h1 { color:#fff; }
.hh-text p { font-size:1.08rem; color:var(--on-hero); }
.hh-nav { position:relative; display:flex; gap:8px; margin-top:12px; padding-left:calc(50% + 35px); }

/* Grille des fonctionnalités */
.feat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:22px; }
.feat-card { position:relative; overflow:hidden; background:var(--card); border:1px solid var(--rule); border-radius:22px; padding:30px 26px 24px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; text-decoration:none; color:var(--text); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.feat-card::before { content:""; position:absolute; left:0; right:0; top:0; height:6px; background:var(--c, var(--accent)); }
.feat-card:hover { transform:translateY(-3px); box-shadow:0 16px 34px rgba(22,16,31,.12); border-color:var(--c, var(--accent)); }
.feat-card h3 { font-size:1.22rem; margin-top:6px; }
.feat-card p { font-size:.97rem; color:var(--muted); }
.feat-card .more { margin-top:auto; padding-top:6px; font-weight:700; color:var(--accent-ink); font-size:.95rem; }
.lottie { width:190px; height:190px; border-radius:50%; background:var(--surface); flex:none; }
.lottie.ready { background:none; }
@media (min-width: 981px) { .feat-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } .feat-grid > :last-child:nth-child(3n+1) { grid-column:2; } }
.band-white + .band-white { padding-top:0; }
.c-accent { --c:var(--accent); } .c-pink { --c:var(--pink); } .c-yellow { --c:var(--yellow); }

/* Encart Live Shopping */
.live-card { max-width:1060px; margin:0 auto; background:var(--paper); border-radius:26px; padding:46px 44px; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:40px; align-items:center; }
.live-text { display:flex; flex-direction:column; gap:14px; }
.live-text h2 { font-size:clamp(2rem,3.6vw,2.6rem); color:var(--plum); }
.live-sub.script { font-size:2.3rem; line-height:1.05; color:var(--accent-ink); margin-top:-6px; }
.live-text h3 { font-size:1.3rem; color:var(--plum); }
.live-media img { display:block; width:100%; }

/* Actualités */
.news-in { display:grid; grid-template-columns:270px minmax(0,1fr); gap:44px; align-items:center; }
.news-head { display:flex; flex-direction:column; gap:18px; }
.news-head h2 { font-size:clamp(2rem,3.6vw,2.6rem); color:var(--plum); }
.news-head p { font-size:1.15rem; }
.carousel { position:relative; min-width:0; }
.car-track { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 40px) / 3); gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; padding:4px 2px 8px; }
.car-track::-webkit-scrollbar { display:none; }
.car-nav { display:flex; gap:6px; margin-top:12px; }
.post-card { scroll-snap-align:start; background:var(--card); border:1px solid var(--rule); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; min-width:0; transition:box-shadow .15s ease, transform .15s ease; }
.post-card:hover { box-shadow:0 14px 30px rgba(22,16,31,.12); transform:translateY(-2px); }
.pc-img img { display:block; width:100%; aspect-ratio:600 / 350; object-fit:cover; }
.pc-body { padding:22px 24px 24px; display:flex; flex-direction:column; gap:12px; flex:1; }
.pc-tags { display:flex; flex-wrap:wrap; gap:6px; }
.post-card h3 { font-size:1.28rem; line-height:1.3; }
.post-card h3 a { color:var(--heading); text-decoration:none; }
.post-card h3 a:hover { color:var(--accent-ink); }
.post-card p { font-size:.95rem; color:var(--muted); }
.more { font-weight:700; color:var(--accent-ink); text-decoration:none; }
.pc-body .more { margin-top:auto; }
.more:hover { text-decoration:underline; }

/* Témoignages */
.trust { position:relative; padding:100px 0 110px; background:linear-gradient(to bottom, var(--paper) 0, var(--paper) 52%, var(--plum) 52%); overflow:hidden; }
.trust .deco-l { left:-40px; top:60px; width:300px; }
.trust .deco-r { right:-60px; bottom:-60px; width:300px; transform:scaleX(-1); }
.trust .sec-title { color:var(--plum); margin-bottom:90px; }
.testi-card { position:relative; max-width:720px; margin:0 auto; background:var(--card); border-radius:26px; padding:84px 76px 36px; text-align:center; box-shadow:0 24px 50px rgba(22,16,31,.18); display:flex; flex-direction:column; align-items:center; gap:22px; }
.testi-stage { width:100%; }
.testi { margin:0; display:flex; flex-direction:column; align-items:center; gap:18px; }
.testi.is-active { animation:fade .45s ease; }
.testi-logo { position:absolute; top:-62px; left:50%; transform:translateX(-50%); width:124px; height:124px; border-radius:50%; overflow:hidden; background:#fff; box-shadow:0 10px 24px rgba(22,16,31,.15); }
.testi-logo img { display:block; width:100%; height:100%; object-fit:cover; }
.testi blockquote { margin:0; font-size:1.12rem; font-style:italic; font-weight:600; line-height:1.6; color:var(--heading); }
.testi figcaption { font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.testi figcaption b { color:var(--heading); }
.testi-prev, .testi-next { position:absolute; top:50%; transform:translateY(-50%); }
.testi-prev { left:14px; } .testi-next { right:14px; }
.dots { display:flex; gap:8px; }
.dots button { width:12px; height:12px; padding:0; border:0; border-radius:50%; background:var(--plum); cursor:pointer; opacity:.85; }
.dots button[aria-current="true"] { background:var(--accent); opacity:1; }

/* =====================================================================
   En-tête de page (articles, pages d'attente)
   ===================================================================== */
.page-hero { position:relative; background:var(--hero); color:var(--on-hero); padding:56px 0 54px; overflow:hidden; }
.page-hero .deco-tr { right:-30px; top:-40px; width:300px; }
.ph-in { max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:48px; align-items:center; position:relative; z-index:1; }
.ph-in.ph-solo { grid-template-columns:minmax(0,1fr); }
.ph-text { display:flex; flex-direction:column; gap:18px; max-width:860px; }
.page-hero h1 { color:#fff; }
.ph-lede { font-size:1.18rem; color:var(--on-hero); }
.ph-thumb { display:block; width:100%; border-radius:18px; aspect-ratio:700 / 394; object-fit:cover; box-shadow:0 18px 40px rgba(0,0,0,.3); }
.crumbs ol { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 0; font-size:.86rem; color:var(--on-hero-mut); }
.crumbs li + li::before { content:"›"; margin:0 9px; color:var(--accent); font-weight:700; }
.crumbs a { color:var(--on-hero-mut); text-decoration:none; }
.crumbs a:hover { color:#fff; text-decoration:underline; }
.crumbs [aria-current] { color:var(--on-hero); }

/* =====================================================================
   Article de blog
   ===================================================================== */
.article-wrap { max-width:1000px; margin:0 auto; padding:34px var(--gutter) 80px; display:flex; flex-direction:column; gap:18px; }
.article-meta { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 20px; }
.article-meta .date { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:.92rem; }
.article-meta .date svg { width:17px; height:17px; color:var(--pink-ink); }
.article { background:var(--card); border:1px solid var(--rule); border-radius:22px; padding:46px 56px; }
.prose { font-size:1.04rem; }
.prose > * + * { margin-top:1em; }
.prose > :first-child { margin-top:0; }
.prose h2 { font-size:clamp(1.45rem,2.6vw,1.85rem); margin-top:1.7em; color:var(--plum); }
.prose h3 { font-size:1.22rem; margin-top:1.5em; color:var(--heading); }
.prose li + li { margin-top:6px; }
.prose ul { padding-left:0; list-style:none; }
.prose ul li { position:relative; padding-left:24px; }
.prose ul li::before { content:""; position:absolute; left:4px; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.prose blockquote { margin:1.2em 0; border-left:4px solid var(--accent); background:var(--accent-wash); border-radius:0 16px 16px 0; padding:18px 22px; }
.prose figure { margin:1.6em 0; }
.prose figure img { display:block; width:100%; border-radius:14px; border:1px solid var(--rule); cursor:zoom-in; }
.share { display:flex; align-items:center; gap:10px; }
.share-title { font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-right:6px; }
.share a { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--plum); color:#fff; }
.share a:hover { background:var(--accent); color:#16101F; }
.share svg { width:18px; height:18px; }
.related h2 { margin-bottom:30px; color:var(--plum); }

/* Contenus importés de WordPress */
.prose img { display:block; max-width:100%; height:auto; border-radius:14px; }
.prose a[data-zoom] { display:inline-block; cursor:zoom-in; }
.prose video, .prose iframe { display:block; width:100%; aspect-ratio:16 / 9; height:auto; border:0; border-radius:14px; background:#000; }
.prose .gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px; }
.prose .gallery figure { margin:0; }
.prose .gallery img { width:100%; aspect-ratio:1; object-fit:cover; }
.prose .gallery.phones { grid-template-columns:repeat(3, minmax(0, 1fr)); max-width:620px; margin:1.6em auto; }
.prose .gallery.phones img { aspect-ratio:auto; object-fit:contain; border:0; border-radius:0; }
.prose table { border-collapse:collapse; width:100%; font-size:.95rem; }
.prose th, .prose td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--rule); }

/* =====================================================================
   Liste du blog et catégories
   ===================================================================== */
.blog-layout { max-width:var(--wrap); margin:0 auto; padding:40px var(--gutter) 90px; display:grid; grid-template-columns:240px minmax(0,1fr); gap:44px; align-items:start; }
.blog-cats { position:sticky; top:110px; }
.blog-cats-title { font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.blog-cats ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.blog-cats a { display:inline-block; padding:6px 16px; border:2px solid var(--accent); border-radius:100px; color:var(--accent-ink); font-weight:600; font-size:.92rem; text-decoration:none; }
.blog-cats a:hover { background:var(--accent-wash); }
.blog-cats a[aria-current] { background:var(--accent); color:#16101F; }
.post-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; }
.post-grid .post-card h2 { font-size:1.4rem; line-height:1.3; }
.post-grid .post-card h2 a { color:var(--heading); text-decoration:none; }
.post-grid .post-card h2 a:hover { color:var(--accent-ink); }
.pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 16px; margin-top:40px; }
.pagination ol { list-style:none; margin:0; padding:0; display:flex; gap:6px; }
.pagination li a, .pagination li span { display:grid; place-items:center; min-width:42px; height:42px; padding:0 8px; border-radius:100px; font-weight:700; text-decoration:none; color:var(--heading); background:var(--card); border:1px solid var(--rule); }
.pagination li a:hover { border-color:var(--accent); }
.pagination li span[aria-current] { background:var(--hero); color:#fff; border-color:var(--hero); }
.pg-prev, .pg-next { font-weight:700; color:var(--accent-ink); text-decoration:none; }
.pg-prev:hover, .pg-next:hover { text-decoration:underline; }
@media (max-width: 980px) {
  .blog-layout { grid-template-columns:1fr; gap:24px; padding-top:28px; }
  .blog-cats { position:static; }
  .blog-cats ul { flex-direction:row; flex-wrap:wrap; }
}
@media (max-width: 640px) { .post-grid { grid-template-columns:1fr; } }

/* =====================================================================
   Page fonctionnalité
   ===================================================================== */
.feat-hero { --split:330px; position:relative; background:linear-gradient(to bottom, var(--hero) 0, var(--hero) var(--split), #fff var(--split)); overflow:hidden; padding-bottom:40px; }
.feat-hero .deco-tr { right:-30px; top:-40px; width:300px; }
.fh-in { max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"title media" "intro media"; column-gap:70px; position:relative; z-index:1; }
.fh-title { grid-area:title; min-height:var(--split); padding:40px 0; display:flex; flex-direction:column; justify-content:center; gap:16px; }
.fh-title h1 { color:#fff; }
.fh-media { grid-area:media; padding-top:36px; }
.fh-media img { display:block; width:100%; border-radius:20px; box-shadow:0 22px 46px rgba(22,16,31,.25); }
.fh-intro { grid-area:intro; padding-top:34px; display:flex; flex-direction:column; gap:16px; font-size:1.05rem; }
.fh-intro .btns { margin-top:12px; }

.tabs { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:70px; align-items:center; }
.tab-side { display:flex; flex-direction:column; gap:30px; }
.tab-side h2 .script { font-size:1.3em; }
.frame { position:relative; isolation:isolate; padding:0 0 28px 28px; }
.frame::before { content:""; position:absolute; left:0; bottom:0; width:72%; height:78%; background:var(--hero); border-radius:20px; z-index:-1; }
.tab-panel a { cursor:zoom-in; }
.tab-panel { text-align:center; }
.tab-panel a { display:inline-block; max-width:100%; }
.tab-panel img { display:block; width:auto; max-width:100%; max-height:560px; border-radius:14px; background:#fff; box-shadow:0 16px 36px rgba(22,16,31,.16); }
.tab-panel:not([hidden]) { animation:fade .35s ease; }
.tab-list { display:flex; flex-direction:column; gap:10px; }
.tab-list [role="tab"] { display:flex; align-items:center; gap:22px; width:100%; text-align:left; font:inherit; font-size:1.06rem; line-height:1.45; color:var(--text); background:var(--paper); border:0; border-left:5px solid transparent; border-radius:16px; padding:18px 24px; cursor:pointer; transition:background .15s ease, border-color .15s ease; }
.tab-list [role="tab"]:hover { background:var(--surface); }
.tab-list [role="tab"][aria-selected="true"] { background:var(--pink-wash); border-left-color:var(--pink); }
.tab-list [role="tab"][aria-selected="true"] b { color:var(--pink-ink); }
.tab-list img { width:58px; height:58px; flex:none; border-radius:50%; background:#fff; }

.side-band { padding:110px 0 250px; overflow:hidden; }
.side-band::before { content:""; position:absolute; left:0; top:0; bottom:0; width:15%; background:var(--accent); }
.side-band .deco-band { left:-60px; top:-60px; width:calc(15% + 60px); opacity:.6; }
.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:60px; align-items:center; }
.side-band .split-text { padding-left:max(0px, calc(15vw + 40px - max(0px, (100vw - var(--wrap)) / 2))); display:flex; flex-direction:column; gap:22px; }
.side-band .sec-num { color:var(--pink); }
.split > .split-text { display:flex; flex-direction:column; gap:22px; }
.split-media img { display:block; width:100%; }
.underlined { position:relative; display:inline-block; color:var(--accent-ink); }
.band-dark .underlined, .side-band .underlined, .home-hero .underlined, .page-hero .underlined { color:var(--accent); }
.underlined svg { position:absolute; left:-2%; bottom:-.2em; width:104%; height:.4em; overflow:visible; }
.underlined path { fill:none; stroke:var(--yellow); stroke-width:5; stroke-linecap:round; }
.checks { list-style:none; padding:0; display:flex; flex-direction:column; gap:12px; }
.checks li { display:flex; gap:12px; align-items:flex-start; }
.checks svg { width:20px; height:20px; flex:none; margin-top:3px; color:var(--accent); }
.checks b { color:var(--heading); }
.band-dark .checks b, .side-band .checks b { color:#fff; }

/* =====================================================================
   Pied de page
   ===================================================================== */
.site-footer { background:var(--hero); color:var(--on-hero); --logo-ink:#FFFFFF; --logo-at:#A99DBE; }
.ft-in { max-width:var(--wrap); margin:0 auto; padding:70px var(--gutter) 60px; display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:36px; }
.ft-brand { display:flex; flex-direction:column; gap:22px; }
.ft-brand .brand svg { width:226px; }
.ft-phone { display:inline-flex; align-items:center; gap:12px; color:#fff; text-decoration:none; font-size:1.05rem; }
.ft-phone svg { width:24px; height:24px; }
.ft-links { list-style:none; padding:0; display:flex; flex-direction:column; gap:12px; }
.ft-links a { color:#fff; text-decoration:none; font-size:1.05rem; }
.ft-links a:hover { color:var(--accent); }
.social { display:flex; gap:10px; margin-top:22px; }
.social a { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#fff; color:var(--hero); }
.social a:hover { background:var(--accent); }
.social svg { width:18px; height:18px; }
.ft-cta { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.ft-bottom { background:var(--hero-deep); padding:14px 32px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 20px; font-size:.84rem; color:var(--on-hero-mut); }
.ft-bottom > div { display:flex; flex-direction:column; }
.ft-bottom a { color:var(--on-hero); text-decoration:none; }
.ft-bottom a:hover { color:#fff; text-decoration:underline; }

/* ---- Haut de page, vidéo, agrandissement ---- */
.to-top { position:fixed; right:24px; bottom:24px; z-index:40; width:46px; height:46px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center; color:#16101F; background:var(--accent); box-shadow:0 10px 24px rgba(22,16,31,.25); opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
.to-top.show { opacity:1; transform:none; pointer-events:auto; }
.to-top:hover { background:var(--accent-ink); color:#fff; }
.modal, .lightbox { position:fixed; inset:0; z-index:90; background:rgba(22,16,31,.88); display:flex; align-items:center; justify-content:center; padding:24px; }
.modal[hidden], .lightbox[hidden] { display:none; }
.modal-in { position:relative; width:min(1000px, 100%); }
.modal-frame { aspect-ratio:16 / 9; background:#000; border-radius:16px; overflow:hidden; }
.modal-frame iframe { width:100%; height:100%; border:0; display:block; }
.modal-close { position:absolute; right:-6px; top:-50px; width:42px; height:42px; border:0; border-radius:50%; background:#fff; color:var(--heading); font-size:1.6rem; line-height:1; cursor:pointer; }
.lightbox { cursor:zoom-out; }
.lightbox img { max-width:100%; max-height:100%; border-radius:12px; }

/* Formulaires : message d'envoi, erreurs par champ, champ piège anti-spam (hors écran) */
.form-msg { margin-top:14px; border-left:4px solid var(--accent); background:var(--accent-wash); border-radius:0 14px 14px 0; padding:14px 18px; }
.form-msg.is-err { border-left-color:var(--pink); background:var(--pink-wash); }
.form-msg:focus { outline:none; }
.field-error { display:block; margin-top:4px; font-size:.85rem; font-weight:600; color:var(--pink-ink); }
[aria-invalid="true"] { border-color:var(--pink-ink) !important; }
.form-piege { position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

/* =====================================================================
   Rubrique « Notre logiciel » : sous-navigation (générée par build.js)
   ===================================================================== */
.subnav { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.subnav a { display:inline-block; padding:8px 16px; border-radius:100px; background:var(--plum); color:#fff; font-weight:700; text-decoration:none; font-size:.95rem; }
.subnav a:hover { background:#5E4D78; }
.subnav a[aria-current] { background:var(--accent); color:#16101F; }
.feat-hero.has-subnav { --split:420px; }

/* =====================================================================
   Conformité légale : encadré (accueil, fonctionnalités) et page dédiée
   ===================================================================== */
.cmp-banner { display:flex; align-items:center; justify-content:space-between; gap:30px 50px; background:var(--paper); border-left:6px solid var(--accent); border-radius:0 26px 26px 0; padding:36px 44px; }
.cmp-banner-text { display:flex; flex-direction:column; gap:12px; max-width:760px; }
.cmp-banner h2 { font-size:clamp(1.5rem,2.6vw,2rem); color:var(--plum); }
.cmp-banner .btn { flex:none; }
.compliance-callout { padding-top:20px; }

.stake-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; margin-top:36px; }
.stake { position:relative; overflow:hidden; background:var(--card); border:1px solid var(--rule); border-radius:22px; padding:32px 28px 28px; display:flex; flex-direction:column; gap:12px; }
.stake::before { content:""; position:absolute; left:0; right:0; top:0; height:6px; background:var(--c, var(--accent)); }
.stake .ico { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:var(--w, var(--accent-wash)); color:var(--i, var(--accent-ink)); }
.stake .ico svg { width:26px; height:26px; }
.stake h3 { font-size:1.2rem; }
.stake p { color:var(--muted); }
.stake.c-pink { --w:var(--pink-wash); --i:var(--pink-ink); }
.stake.c-yellow { --w:var(--yellow-wash); --i:var(--yellow-ink); }

/* Bulletin de précompte d'exemple (visuel de l'en-tête) */
.payslip { margin:0 auto; max-width:420px; background:#fff; color:var(--heading); border-radius:22px; padding:28px 30px 22px; box-shadow:0 22px 46px rgba(22,16,31,.22); transform:rotate(-2deg); font-variant-numeric:tabular-nums; }
.payslip .ps-top { display:flex; justify-content:space-between; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.payslip .ps-name { font-family:var(--f-display); font-size:1.7rem; color:var(--accent-ink); line-height:1.2; margin:10px 0 14px; }
.payslip dl { margin:0; display:grid; grid-template-columns:1fr auto; gap:0; }
.payslip dt, .payslip dd { margin:0; padding:8px 0; border-bottom:1px dashed var(--rule); font-size:.92rem; }
.payslip dd { text-align:right; font-weight:700; }
.payslip dt.total, .payslip dd.total { border-bottom:0; border-top:2px solid var(--heading); font-weight:800; }
.payslip .ps-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.payslip figcaption { margin-top:12px; font-size:.75rem; color:var(--muted); text-align:right; }

/* Parcours d'une commande conforme */
.flow { list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:14px; counter-reset:etape; }
.flow li { counter-increment:etape; position:relative; background:rgba(255,255,255,.06); border:1px solid rgba(241,236,248,.14); border-radius:18px; padding:22px 18px 18px; display:flex; flex-direction:column; gap:8px; }
.flow li::before { content:counter(etape); width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:#16101F; font-weight:800; }
.flow b { color:#fff; font-size:1.05rem; }
.flow span { color:var(--on-hero); font-size:.93rem; }
.flow-note { margin-top:22px; color:var(--on-hero); }
.flow-note a, .band-dark .more { color:var(--accent); }

/* Chiffres et garanties */
.trust-stats { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; margin-top:36px; }
.trust-stats > div { background:var(--card); border:1px solid var(--rule); border-radius:20px; padding:24px; display:flex; flex-direction:column; gap:8px; }
.trust-stats b { font-size:1.9rem; line-height:1.1; color:var(--plum); letter-spacing:-.02em; }
.trust-stats img { height:48px; width:auto; align-self:flex-start; }
.trust-stats span { color:var(--muted); font-size:.95rem; }
.cmp-section-link { margin-top:22px; }
.split-text .cmp-section-link { margin-top:0; }

/* =====================================================================
   FAQ (questions dépliables ; build.js en tire les données structurées FAQPage)
   ===================================================================== */
.faq { display:flex; flex-direction:column; gap:10px; margin-top:30px; max-width:960px; }
.faq-item { background:var(--card); border:1px solid var(--rule); border-radius:16px; padding:0 24px; }
.faq-item summary { cursor:pointer; padding:18px 0; font-weight:700; color:var(--heading); font-size:1.05rem; list-style:none; display:flex; justify-content:space-between; gap:14px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; color:var(--accent-ink); font-size:1.4rem; line-height:1; }
.faq-item[open] summary::after { content:"−"; }
.faq-answer { padding:0 0 20px; display:flex; flex-direction:column; gap:10px; }

/* « En bref » : faits clés */
.facts { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 40px; margin-top:30px; }
.facts div { display:grid; grid-template-columns:200px minmax(0,1fr); gap:16px; padding:16px 0; border-bottom:1px solid var(--rule); }
.facts dt { font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding-top:3px; }
.facts dd { margin:0; }

/* =====================================================================
   « En bref » : chiffres clés, grille de cartes, FAQ en deux colonnes
   ===================================================================== */
.glance-stats { position:relative; overflow:hidden; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); background:var(--hero); border-radius:26px; padding:34px 10px; margin-top:34px; }
.glance-stats::after { content:""; position:absolute; right:-110px; top:-90px; width:240px; height:240px; background:url("../media/2021/01/lignes-sah-04.svg") no-repeat center / contain; opacity:.35; pointer-events:none; }
.glance-stats > div { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:6px 22px; }
.glance-stats > div + div { border-left:1px solid rgba(241,236,248,.16); }
.glance-stats b { font-size:clamp(2.2rem,4vw,3rem); line-height:1; font-weight:800; letter-spacing:-.03em; color:#fff; }
.glance-stats b small { font-size:.45em; font-weight:700; letter-spacing:0; color:var(--accent); }
.glance-stats .script { color:var(--accent); font-size:1.5rem; line-height:1.1; }
.glance-stats span { color:var(--on-hero-mut); font-size:.95rem; }

.bento { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; margin-top:22px; }
.bento-card { position:relative; overflow:hidden; background:var(--card); border:1px solid var(--rule); border-radius:22px; padding:28px 26px 26px; display:flex; flex-direction:column; gap:12px; }
.bento-card::before { content:""; position:absolute; left:0; right:0; top:0; height:6px; background:var(--c, var(--accent)); }
.bento-card.wide { grid-column:span 2; }
.bento-card.c-pink { --c:var(--pink); --w:var(--pink-wash); --i:var(--pink-ink); }
.bento-card.c-yellow { --c:var(--yellow); --w:var(--yellow-wash); --i:var(--yellow-ink); }
.bento-card.c-plum { --c:var(--plum); --w:var(--surface); --i:var(--plum); }
.bento-head { display:flex; align-items:center; gap:14px; }
.bento-head .ico { flex:none; width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:var(--w, var(--accent-wash)); color:var(--i, var(--accent-ink)); }
.bento-head .ico svg { width:24px; height:24px; }
.bento-card h3 { font-size:1.15rem; }
.bento-card p { color:var(--muted); }
.chips { list-style:none; margin:2px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.chips li { margin:0; }
.chips a, .chips span { display:inline-block; padding:6px 13px; border-radius:100px; font-size:.88rem; font-weight:600; line-height:1.3; text-decoration:none; color:var(--i, var(--accent-ink)); background:var(--w, var(--accent-wash)); }
.chips a:hover { background:var(--c, var(--accent)); color:#16101F; }
.bento-card .more { margin-top:auto; padding-top:4px; font-size:.95rem; }

.faq-layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); gap:50px; align-items:start; counter-reset:question; }
.faq-aside { position:sticky; top:120px; display:flex; flex-direction:column; gap:20px; }
.faq-aside > p { color:var(--muted); font-size:1.05rem; }
.faq-contact { background:var(--hero); color:var(--on-hero); border-radius:22px; padding:26px; display:flex; flex-direction:column; gap:12px; }
.faq-contact h3 { color:#fff; font-size:1.2rem; }
.faq-contact .script { color:var(--accent); }
.faq-contact a.phone { color:#fff; font-weight:700; font-size:1.15rem; text-decoration:none; }
.faq-contact .btn { align-self:flex-start; }
.faq-groups { display:flex; flex-direction:column; gap:34px; }
.faq-group h3 { font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--pink-ink); }
.faq-group .faq { margin-top:12px; max-width:none; }
.faq-groups .faq-item { counter-increment:question; border-left:4px solid transparent; transition:border-color .15s ease, box-shadow .15s ease; }
.faq-groups .faq-item summary { justify-content:flex-start; align-items:baseline; }
.faq-groups .faq-item summary::before { content:counter(question, decimal-leading-zero); font-family:var(--f-display); font-weight:400; font-size:1.5rem; line-height:1; color:var(--pink-ink); min-width:2.1em; }
.faq-groups .faq-item summary::after { margin-left:auto; }
.faq-groups .faq-item[open] { border-left-color:var(--accent); box-shadow:0 12px 28px rgba(22,16,31,.08); }
.faq-groups .faq-answer { padding-left:calc(2.1em * 1.5 / 1.05 + 4px); }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1240px) {
  .sh-in { gap:16px; padding:18px 24px; }
  .brand svg { width:200px; }
  .nav-link { font-size:.95rem; padding:8px 9px; }
}
@media (max-width: 1100px) {
  .menu-btn { display:grid; }
  .sh-cta { display:none; }
  .mainnav { display:none; position:absolute; left:16px; right:16px; top:calc(100% - 4px); background:var(--card); color:var(--text); border-radius:18px; box-shadow:0 22px 48px rgba(22,16,31,.35); padding:10px; max-height:calc(100vh - 110px); overflow-y:auto; }
  .site-header.menu-open .mainnav { display:block; }
  .nav-list { flex-direction:column; align-items:stretch; gap:2px; }
  .nav-item, .nav-item.mega-item { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; }
  .nav-link { color:var(--heading); padding:12px 14px; border-radius:12px; font-size:1rem; }
  .nav-link:hover, .nav-item.open > .nav-link { color:var(--heading); background:var(--surface); }
  .nav-link[aria-current="page"] { color:var(--accent-ink); }
  .nav-toggle { width:42px; height:42px; margin:0; color:var(--muted); }
  .nav-panel, .nav-panel.mega { position:static; grid-column:1 / -1; border:0; box-shadow:none; border-radius:0; padding:0 0 8px 12px; min-width:0; }
  .nav-panel::before { display:none; }
  .mega-list { grid-template-columns:1fr; gap:0; }
  .mega-list a { gap:12px; padding:7px 10px; }
  .mega-ico { width:38px; height:38px; }
  .mega-new { flex-wrap:wrap; gap:10px; margin:10px 0 4px 10px; }
  .mega-new::before, .mega-new::after { display:none; }
  .mega-new-tag { font-size:1.45rem; }
  .nav-cta-mobile { display:flex; margin:10px 4px 4px; }
  body.has-band .site-header:not(.is-scrolled) { background:var(--hero); }
}
@media (max-width: 980px) {
  .band { padding:70px 0; }
  .cmp-banner { flex-direction:column; align-items:flex-start; padding:28px 26px; }
  .stake-grid { grid-template-columns:1fr; }
  .flow { grid-template-columns:1fr 1fr; }
  .trust-stats { grid-template-columns:1fr 1fr; }
  .facts { grid-template-columns:1fr; }
  .glance-stats { grid-template-columns:1fr 1fr; row-gap:22px; }
  .glance-stats > div:nth-child(3) { border-left:0; }
  .bento { grid-template-columns:1fr 1fr; }
  .faq-layout { grid-template-columns:1fr; gap:30px; }
  .faq-aside { position:static; }
  .curve-tl, .curve-tr { margin-top:-90px; }
  .curve-tl { border-top-left-radius:90px; }
  .curve-tr { border-top-right-radius:90px; }
  .home-hero { padding-bottom:140px; }
  .hh-band { width:28%; height:260px; bottom:auto; }
  .hh-slide { grid-template-columns:1fr; gap:28px; min-height:0; }
  .hh-media { margin:0; max-width:520px; }
  .hh-nav { padding-left:0; }
  .live-card { grid-template-columns:1fr; padding:34px 28px; }
  .news-in { grid-template-columns:1fr; gap:28px; }
  .car-track { grid-auto-columns:calc((100% - 20px) / 2); }
  .testi-card { padding:80px 56px 32px; }
  .ph-in { grid-template-columns:1fr; gap:28px; }
  .ph-thumb { max-width:420px; }
  .feat-hero { background:#fff; padding-bottom:20px; }
  .fh-in { grid-template-columns:1fr; grid-template-areas:"title" "media" "intro"; }
  .fh-title { min-height:0; padding:40px 0 44px; background:var(--hero); box-shadow:0 0 0 100vmax var(--hero); clip-path:inset(0 -100vmax); }
  .fh-media { padding-top:28px; }
  .tabs, .split { grid-template-columns:1fr; gap:40px; }
  .tab-side { order:-1; }
  .side-band { padding:70px 0 170px; }
  .side-band::before { width:100%; height:14px; bottom:auto; }
  .side-band .deco-band { display:none; }
  .side-band .split-text { padding-left:0; }
  .ft-in { grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px) {
  :root { --gutter:16px; }
  .flow, .trust-stats { grid-template-columns:1fr; }
  .facts div { grid-template-columns:1fr; gap:4px; }
  .glance-stats { grid-template-columns:1fr; padding:20px 10px; }
  .glance-stats > div + div { border-left:0; border-top:1px solid rgba(241,236,248,.16); padding-top:18px; }
  .bento { grid-template-columns:1fr; }
  .bento-card.wide { grid-column:auto; }
  .faq-groups .faq-answer { padding-left:0; }
  .faq-item { padding:0 16px; }
  .payslip { transform:none; padding:22px 20px 18px; }
  body { font-size:16px; }
  .sh-in { padding:14px 16px; gap:10px; }
  .brand svg { width:168px; }
  .lang { display:none; }
  .search-panel { padding:12px 16px 16px; }
  .home-hero { padding-top:24px; }
  .home-hero .deco-tr, .feat-hero .deco-tr { width:180px; opacity:.6; }
  .sec-title { margin-bottom:32px; }
  .feat-grid { grid-template-columns:1fr; }
  .car-track { grid-auto-columns:86%; }
  .trust .sec-title { margin-bottom:80px; }
  .testi-card { padding:76px 20px 28px; }
  .testi-prev, .testi-next { top:auto; bottom:22px; transform:none; }
  .testi-prev { left:8px; } .testi-next { right:8px; }
  .testi blockquote { font-size:1.02rem; }
  .article { padding:28px 20px; }
  .tab-list [role="tab"] { padding:14px 16px; gap:14px; font-size:1rem; }
  .tab-list img { width:46px; height:46px; }
  .frame { padding:0 0 18px 18px; }
  .ft-in { grid-template-columns:1fr; gap:28px; padding-top:50px; }
  .ft-bottom { padding:14px 16px; }
  .to-top { right:16px; bottom:16px; }
}
@media print {
  .site-header, .site-footer, .to-top, .car-nav, .hh-nav, .share { display:none !important; }
}