/* skann.ma — feuille de style du site (design « Skann — Design site & app »).
   Charte : Sora (titres) + Inter (texte), accent #C41E4A, fond rose #FDF2F4, foncé #2B1119.
   Les styles inline des maquettes .dc.html sont factorisés ici ; point de rupture unique à 900 px. */

:root {
  --accent: #C41E4A;
  --accent-hover: #8E1038;
  --pink: #FDF2F4;
  --pink-2: #F3E8EB;
  --dark: #2B1119;
  --text: #1F141A;
  --text-2: #4A3A41;
  --muted: #6B5A61;
  --border: #EFE4E7;
  --dash: #E6D3D9;
  --on-dark: #D9C3CB;
  --on-accent: #FCE1E8;
  --rose: #FF7A95;
  --ok: #15803D;
  --ko: #B3003C;
  --sora: 'Sora', system-ui, sans-serif;
  --inter: 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #ffffff; color: var(--text); font-family: var(--inter); font-size: 16px; line-height: 1.5; }
.page { width: 100%; min-width: 0; overflow-x: clip; position: relative; display: flex; flex-direction: column; min-height: 100vh; }
.page > main { flex: 1 0 auto; }
img, svg { max-width: 100%; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.on-dark :focus-visible, .footer :focus-visible { outline-color: var(--rose); }
h1, h2, h3, p { margin: 0; }
button { font: inherit; }
[hidden] { display: none !important; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--dark); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; color: #fff; }

.wrap { max-width: 1320px; margin: 0 auto; width: 100%; padding-left: 40px; padding-right: 40px; }

/* ------------------------------------------------------------ typo */
.sora { font-family: var(--sora); }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.eyebrow--line::before { content: ""; width: 32px; height: 2px; background: currentColor; flex: 0 0 auto; }
.kicker { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.display { font-family: var(--sora); font-weight: 800; letter-spacing: -0.05em; }
.h-hero { font-size: 100px; line-height: .94; }
.h-xl { font-size: 72px; line-height: .98; }
.h-84 { font-size: 84px; line-height: .94; }
.h-64 { font-size: 64px; }
.h-lg { font-size: 56px; line-height: 1; letter-spacing: -0.045em; }
.h-page { font-family: var(--sora); font-weight: 800; font-size: 44px; line-height: 1.02; letter-spacing: -0.04em; }
.h-sec { font-family: var(--sora); font-weight: 800; font-size: 32px; letter-spacing: -0.04em; line-height: 1.1; }
.h-card { font-family: var(--sora); font-weight: 700; font-size: 22px; letter-spacing: -0.03em; line-height: 1.2; }
.h-small { font-family: var(--sora); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; }
.lead { font-size: 20px; line-height: 1.5; color: var(--muted); }
.intro { font-size: 18px; line-height: 1.5; color: var(--muted); max-width: 380px; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.prose { font-size: 16px; line-height: 1.65; color: var(--text-2); max-width: 760px; }
.prose h2 { font-family: var(--sora); font-weight: 700; font-size: 24px; letter-spacing: -0.03em; color: var(--text); margin: 40px 0 12px; }
.prose h3 { font-family: var(--sora); font-weight: 700; font-size: 18px; color: var(--text); margin: 24px 0 8px; }
.prose p, .prose ul, .prose ol { margin: 0 0 14px; }
.prose li { margin-bottom: 6px; }
.placeholder { color: var(--muted); }

.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.sec-head--base { align-items: baseline; gap: 16px; }
.stack { display: flex; flex-direction: column; }
.gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-14 { gap: 14px; } .gap-16 { gap: 16px; }
.gap-20 { gap: 20px; } .gap-24 { gap: 24px; } .gap-28 { gap: 28px; } .gap-32 { gap: 32px; } .gap-40 { gap: 40px; } .gap-48 { gap: 48px; } .gap-56 { gap: 56px; }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------ boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: inherit; font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none; border-radius: 999px; padding: 12px 20px; min-height: 44px; border: 0; cursor: pointer; transition: transform .25s, background .25s, color .25s, box-shadow .25s; text-align: center; }
.btn:hover { transform: translateY(-2px); }
.btn-red { background: var(--accent); color: #fff; }
.btn-red:hover { color: #fff; box-shadow: 0 18px 40px -12px rgba(196, 30, 74, .55); }
.btn-dark { background: var(--dark); color: #fff; }
.btn-dark:hover { color: #fff; box-shadow: 0 18px 40px -12px rgba(43, 17, 25, .5); }
.btn-outline { background: #fff; color: var(--text); border: 1.5px solid var(--border); }
.btn-outline:hover { color: var(--text); border-color: var(--accent); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--text); transform: none; }
.btn-lg { font-size: 17px; padding: 16px 28px; min-height: 56px; gap: 12px; }
.btn-56 { min-height: 56px; font-size: 16px; padding: 14px 24px; }
.btn-52 { min-height: 52px; padding: 12px 22px; }
.btn-48 { min-height: 48px; font-size: 14px; padding: 10px 20px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.link-btn:disabled { color: var(--muted); text-decoration: none; cursor: default; }
.link-btn { border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.link-arrow { color: var(--accent); font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.link-arrow:hover { text-decoration: underline; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { background: var(--pink); color: var(--text); text-decoration: none; border-radius: 999px; padding: 0 16px; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; border: 0; cursor: pointer; }
.chip:hover { color: var(--text); background: var(--pink-2); }
.chip.is-on, .chip[aria-current="page"], .chip[aria-selected="true"] { background: var(--dark); color: #fff; }
.chip .count { font-size: 11px; background: rgba(255,255,255,.2); border-radius: 999px; padding: 1px 7px; }

.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; line-height: 1.3; }
.badge-red { background: var(--accent); color: #fff; }
.badge-pink { background: var(--pink); color: var(--accent); }
.badge-dark { background: var(--dark); color: #fff; }
.badge-line { border: 1px solid var(--border); color: var(--text-2); font-weight: 600; }
.tag-drop { font-size: 11px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 6px; padding: 3px 8px; }

/* ------------------------------------------------------------ champs */
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field > label, .label { font-size: 13px; font-weight: 600; }
.label .opt, .field .opt { color: var(--muted); font-weight: 400; }
.input { height: 52px; border-radius: 14px; border: 1px solid var(--border); background: #fff; padding: 0 16px; font: inherit; font-size: 15px; color: var(--text); width: 100%; min-width: 0; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(196, 30, 74, .12); }
.input::placeholder, textarea::placeholder { color: #8A7A80; }
textarea.input { height: auto; padding: 14px 16px; resize: vertical; line-height: 1.5; }
select.input { appearance: auto; }
.input-sm { height: 44px; border-radius: 12px; padding: 0 12px; font-size: 14px; }
.input-prefix { display: flex; gap: 8px; }
.prefix { height: 52px; border-radius: 14px; border: 1px solid var(--border); background: var(--pink); padding: 0 14px; display: inline-flex; align-items: center; font-size: 15px; font-weight: 600; flex: 0 0 auto; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; min-height: 44px; cursor: pointer; }
.check input, .chk { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; flex: 0 0 auto; }
.check-top { align-items: flex-start; line-height: 1.5; color: var(--text-2); font-size: 13px; }
.check-top input { margin-top: 2px; }
.alert { border-radius: 16px; padding: 14px 18px; font-size: 14px; line-height: 1.5; }
.alert-error { background: #FFF0F3; color: var(--ko); border: 1px solid #F5C2CF; }
.alert-ok { background: #ECFDF3; color: #14532D; border: 1px solid #BBE5C8; }
.alert-info { background: var(--pink); color: var(--text-2); border: 1px solid var(--border); }
.on-dark .alert-ok { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2); }
.on-dark .alert-error { background: rgba(255,122,149,.12); color: #FFD3DD; border-color: rgba(255,122,149,.4); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* switch (préférences) */
.switch-row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 4px; border-bottom: 1px solid var(--pink-2); cursor: pointer; }
.switch-row:last-child { border-bottom: 0; }
.switch-row .txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.switch-row .txt span:first-child { font-weight: 600; font-size: 15px; }
.switch-row .txt span + span { font-size: 13px; color: var(--muted); }
.switch { appearance: none; -webkit-appearance: none; width: 48px; height: 28px; border-radius: 999px; background: #D9C9CF; position: relative; margin: 0; cursor: pointer; flex: 0 0 auto; transition: background .25s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .25s; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(20px); }

/* ------------------------------------------------------------ en-tête */
.site-header { background: #fff; border-bottom: 1px solid var(--border); position: relative; z-index: 40; }
.site-header--home { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.site-header--plain { background: transparent; border-bottom: 0; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding-top: 16px; padding-bottom: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); min-height: 44px; }
.brand:hover { color: var(--text); }
.brand-mark { display: inline-flex; width: 38px; height: 38px; border-radius: 12px; background: var(--accent); align-items: center; justify-content: center; flex: 0 0 auto; color: #fff; }
.brand-name { font-family: var(--sora); font-weight: 800; font-size: 24px; letter-spacing: -0.04em; }
.brand-name .dot { color: var(--accent); }
.nav-links { display: flex; flex-wrap: wrap; gap: 0 28px; margin-left: auto; align-items: center; font-size: 15px; font-weight: 500; }
.nav-links a { color: var(--text-2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--accent); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-actions--push { margin-left: auto; }
.nav-login { color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px; padding: 10px 14px; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.nav-login:hover { color: var(--accent); }
.nav-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--pink); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-family: var(--sora); font-weight: 700; font-size: 13px; }
.searchbar { flex: 1 1 320px; min-width: 0; display: flex; align-items: center; gap: 4px; background: var(--pink); border-radius: 999px; padding: 0 18px 0 4px; height: 52px; }
.searchbar:focus-within { box-shadow: 0 0 0 3px rgba(196,30,74,.35); }
.searchbar button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.searchbar button:hover { color: var(--accent); }
.searchbar input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--text); height: 100%; }
.searchbar input:focus { outline: none; }
.searchbar input::placeholder { color: #7A6A70; }
.cat-tabs { display: flex; gap: 0 24px; flex-wrap: wrap; font-size: 14px; font-weight: 500; padding-bottom: 4px; }
.cat-tabs a { color: var(--text-2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; border-bottom: 2px solid transparent; }
.cat-tabs a:hover { color: var(--accent); }
.cat-tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.dot-red { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; flex: 0 0 auto; }
.back-link { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }

.crumbs { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs li { display: inline-flex; gap: 8px; }
.crumbs li + li::before { content: "/"; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs [aria-current] { color: var(--text); }

.main { padding-top: 32px; padding-bottom: 100px; display: flex; flex-direction: column; gap: 56px; }
.main--tight { gap: 28px; }

/* ------------------------------------------------------------ pied de page */
.footer { background: var(--dark); color: var(--on-dark); }
.footer a { color: var(--on-dark); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer-full { padding-top: 80px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 56px; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 48px 64px; }
.footer-about { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.footer-about p { line-height: 1.55; font-size: 15px; max-width: 360px; }
.footer-brand { font-family: var(--sora); font-weight: 800; font-size: 28px; letter-spacing: -0.04em; color: #fff; }
.footer-brand .dot { color: var(--rose); }
.footer-col { display: flex; flex-direction: column; gap: 4px; font-size: 14px; min-width: 160px; }
.footer-col a { min-height: 32px; display: inline-flex; align-items: center; }
.footer-col .title { color: #fff; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.footer-nl { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.footer-nl form { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-nl input { flex: 1 1 180px; min-width: 0; height: 48px; border-radius: 12px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); color: #fff; padding: 0 14px; font: inherit; font-size: 14px; }
.footer-nl input::placeholder { color: #BFA9B1; }
.footer-nl input:focus { outline: none; border-color: var(--rose); }
.footer-nl button { height: 48px; border-radius: 12px; border: 0; background: var(--accent); color: #fff; font: inherit; font-weight: 600; font-size: 14px; padding: 0 18px; cursor: pointer; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); font-size: 13px; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer-bottom a { min-height: 32px; display: inline-flex; align-items: center; }
.footer-mini { padding-top: 40px; padding-bottom: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; font-size: 13px; }
.footer-mini .footer-brand { font-size: 20px; }
.footer-mini nav { display: flex; gap: 4px 20px; flex-wrap: wrap; }
.footer-mini a { min-height: 32px; display: inline-flex; align-items: center; }

/* ------------------------------------------------------------ carte produit */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.pcard { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--text); border: 1px solid var(--border); border-radius: 24px; padding: 16px; position: relative; background: #fff; transition: transform .4s var(--ease), box-shadow .4s; }
.pcard:hover { color: var(--text); transform: translateY(-6px); box-shadow: 0 24px 48px -28px rgba(196, 30, 74, .3); }
.pcard-badge { position: absolute; top: 24px; left: 24px; z-index: 1; }
.pimg { aspect-ratio: 1 / 1; border-radius: 16px; background: var(--pink); display: flex; align-items: center; justify-content: center; overflow: hidden; color: #B9A3AB; }
.pimg img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 8%; }
.pimg--lg { border-radius: 28px; }
.pimg--lg img { padding: 10%; }
.pimg--sm { width: 64px; height: 64px; border-radius: 14px; flex: 0 0 auto; }
.pimg--sm img { padding: 6px; }
.pcard-brand { font-size: 11px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.pcard-name { font-weight: 600; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-meta { font-size: 12px; color: var(--muted); }
.pcard-price { font-family: var(--sora); font-weight: 800; font-size: 20px; letter-spacing: -0.03em; margin-top: auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

/* logo marchand (logo souvent absent : nom en texte) */
.mlogo { display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: #fff; overflow: hidden; text-align: center; flex: 0 0 auto; }
.mlogo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mlogo-name { font-family: var(--sora); font-weight: 700; letter-spacing: -0.02em; color: var(--text); line-height: 1.1; padding: 4px 8px; }
.mlogo--sm { width: 120px; min-height: 40px; font-size: 13px; background: var(--pink); }
.mlogo--md { width: 140px; min-height: 48px; font-size: 14px; }
.mlogo--lg { width: 200px; height: 110px; border-radius: 20px; font-size: 22px; border: 1px solid var(--border); }
.mlogo--tile { width: 100%; height: 56px; font-size: 16px; }
.mlogo--marquee { width: 190px; height: 48px; border: 1px solid var(--border); font-size: 14px; }
.on-dark .mlogo--sm, .row-best .mlogo--sm { background: #fff; }

/* ------------------------------------------------------------ catalogue */
.cat-layout { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.filters-wrap { flex: 0 1 260px; min-width: 0; }
.filters-box > summary { display: none; }
.filters { min-width: 0; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.filters fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.filters legend { font-family: var(--sora); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; padding: 0; margin-bottom: 8px; }
.filters .check { min-height: 40px; }
.filters .check .n { margin-left: auto; color: var(--muted); font-size: 12px; }
.filters details summary { font-size: 13px; font-weight: 600; color: var(--accent); min-height: 40px; display: inline-flex; align-items: center; cursor: pointer; list-style: none; }
.filters details summary::-webkit-details-marker { display: none; }
.price-range { display: flex; gap: 8px; align-items: center; }
.price-range .input { flex: 1 1 0; }
.mtiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mtile { position: relative; min-height: 48px; border-radius: 10px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; font-weight: 600; color: var(--text-2); padding: 6px 8px; cursor: pointer; line-height: 1.2; }
.mtile input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mtile:hover { border-color: var(--accent); }
.mtile.is-on, .mtile:has(input:checked) { border: 2px solid var(--accent); color: var(--accent); background: var(--pink); }
.mtile:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.mtile .n { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }
.results { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.sort { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.sort select { height: 44px; border-radius: 12px; border: 1px solid var(--border); background: #fff; padding: 0 12px; font: inherit; font-size: 14px; color: var(--text); }
.js .js-hide { display: none; }
.pager { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; align-items: center; }
.empty { border: 1.5px dashed var(--dash); border-radius: 28px; padding: 48px 32px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

/* ------------------------------------------------------------ fiche produit */
.p-top { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.p-media { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.p-info { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.best-box { background: var(--accent); color: #fff; border-radius: 28px; padding: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.best-box .lbl { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-accent); font-weight: 600; }
.best-box .amount { font-family: var(--sora); font-weight: 800; font-size: 56px; letter-spacing: -0.05em; line-height: 1; }
.best-box .amount small { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.best-box .where { font-size: 14px; color: var(--on-accent); }
.best-box .where strong { color: #fff; font-weight: 600; }
.best-box .where a { color: #fff; }
.best-box .side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; margin-left: auto; }
.best-box .mlogo--md { background: #fff; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.tile { background: var(--pink); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.tile .k { font-size: 12px; color: var(--muted); }
.tile .v { font-family: var(--sora); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.tile--white { background: #fff; border-radius: 14px; padding: 12px; font-size: 13px; color: var(--muted); }
.tile--white .v { font-family: var(--inter); font-size: 18px; color: var(--text); display: block; white-space: nowrap; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.actions form { display: contents; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.offers { width: 100%; min-width: 820px; border-collapse: separate; border-spacing: 0 10px; margin: -10px 0; }
.offers th { text-align: left; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; padding: 0 12px; }
.offers th:first-child { padding-left: 20px; }
.offers td { padding: 14px 12px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 15px; }
.offers td:first-child { border-left: 1px solid var(--border); border-radius: 20px 0 0 20px; padding-left: 20px; }
.offers td:last-child { border-right: 1px solid var(--border); border-radius: 0 20px 20px 0; padding-right: 20px; text-align: right; }
.offers tr { transition: transform .3s; }
.offers tbody tr:hover { transform: translateX(4px); }
.offers .row-best td { background: var(--dark); color: #fff; border-color: var(--dark); }
.offers .row-best .muted, .offers .row-best .avail { color: var(--on-dark); }
.offers .row-out td { color: var(--muted); }
.offers .mname { font-weight: 600; color: inherit; text-decoration: none; }
.offers .mname:hover { text-decoration: underline; }
.offers .avail { font-size: 14px; color: var(--muted); }
.offers .total { font-family: var(--sora); font-weight: 700; font-size: 20px; letter-spacing: -0.03em; white-space: nowrap; }
.offers .row-best .total { font-weight: 800; }
.offers .best-lbl { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rose); }
.offers .strike { text-decoration: line-through; font-size: 12px; color: var(--muted); display: block; }
.offers .row-best .strike { color: var(--on-dark); }
.offers .btn { min-height: 44px; font-size: 14px; padding: 10px 18px; white-space: nowrap; }
.offers .row-best .btn-outline { background: var(--accent); color: #fff; border-color: var(--accent); }
.in-stock { color: var(--ok); font-weight: 600; }
.row-best .in-stock { color: #86EFAC; }
.out-stock { color: var(--ko); font-weight: 600; }
.mini-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mini-badge { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px; background: var(--pink); color: var(--text-2); }
.row-best .mini-badge { background: rgba(255,255,255,.12); color: #fff; }

.p-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.panel-pink { background: var(--pink); border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.panel-dark { background: var(--dark); color: #fff; border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.panel-dark p, .panel-dark .muted { color: var(--on-dark); }
.panel-dark a { color: var(--rose); }
.panel-line { background: #fff; border: 1px solid var(--border); border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.icon-sq { width: 52px; height: 52px; border-radius: 16px; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.icon-sq--pink { width: 48px; height: 48px; border-radius: 14px; background: var(--pink); color: var(--accent); }
.input-dark { flex: 1 1 auto; min-width: 0; height: 52px; border-radius: 14px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); color: #fff; padding: 0 16px; font: inherit; font-size: 18px; font-weight: 600; }
.input-dark:focus { outline: none; border-color: var(--rose); }
.range-tabs { display: flex; gap: 6px; }
.range-tabs a { font-size: 12px; font-weight: 600; text-decoration: none; color: var(--muted); padding: 0 12px; border-radius: 999px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.range-tabs a:hover { color: var(--text); background: #fff; }
.range-tabs a[aria-selected="true"] { color: #fff; background: var(--dark); }
.chart { width: 100%; height: auto; background: #fff; border-radius: 18px; display: block; }
.chart-empty { background: #fff; border-radius: 18px; padding: 28px 24px; font-size: 14px; color: var(--muted); line-height: 1.55; min-height: 160px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.big-price { font-family: var(--sora); font-weight: 800; font-size: 40px; letter-spacing: -0.05em; line-height: 1.1; }
.trend-down { font-size: 13px; color: var(--ok); font-weight: 600; }
.specs { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; font-size: 14px; align-content: start; }
.specs dt { color: var(--muted); }
.specs dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.specs--10 { gap: 10px 20px; }

/* ------------------------------------------------------------ marchand */
.m-head { background: var(--pink); border-radius: 32px; padding: 40px; display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }
.m-head .body { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.m-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--text-2); }
.m-facts span { display: inline-flex; align-items: center; gap: 8px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.kpi { border: 1px solid var(--border); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.kpi .v { font-family: var(--sora); font-weight: 800; font-size: 36px; letter-spacing: -0.05em; line-height: 1.1; }
.kpi .k { font-size: 14px; color: var(--muted); }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.mcard { background: #fff; border: 1px solid var(--border); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--text); transition: transform .4s var(--ease), border-color .3s, box-shadow .4s; }
.mcard:hover { color: var(--text); transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 24px 48px -28px rgba(196, 30, 74, .3); }
.mcard .mlogo { justify-content: flex-start; }

/* ------------------------------------------------------------ connexion */
.auth-page { background: var(--pink); }
.auth-main { padding-top: 24px; padding-bottom: 80px; display: flex; flex-wrap: wrap; gap: 48px; align-items: stretch; }
.auth-aside { flex: 1 1 420px; min-width: 0; background: var(--dark); color: #fff; border-radius: 32px; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; position: relative; overflow: hidden; }
.auth-aside::after { content: ""; position: absolute; right: -160px; bottom: -160px; width: 460px; height: 460px; border-radius: 50%; background: var(--accent); opacity: .9; pointer-events: none; }
.auth-aside > * { position: relative; z-index: 1; }
.auth-aside .claim { font-family: var(--sora); font-weight: 800; font-size: 48px; line-height: 1; letter-spacing: -0.045em; }
.ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; color: #F7E9EE; font-size: 16px; }
.auth-aside .foot { color: #F7E9EE; }
.ticks li { display: flex; gap: 12px; align-items: center; }
.tick { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #fff; }
.auth-card { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 28px; background: #fff; border-radius: 32px; padding: 48px; border: 1px solid var(--border); }
.auth-card form { display: flex; flex-direction: column; gap: 20px; }
.auth-card h1 { font-family: var(--sora); font-weight: 800; font-size: 30px; letter-spacing: -0.04em; line-height: 1.15; }
.seg { display: flex; gap: 8px; background: var(--pink); border-radius: 999px; padding: 4px; align-self: flex-start; }
.seg a { min-height: 44px; border-radius: 999px; font-size: 14px; font-weight: 600; padding: 0 18px; display: inline-flex; align-items: center; text-decoration: none; color: var(--muted); }
.seg a:hover { color: var(--text); }
.seg a[aria-current="page"] { background: var(--dark); color: #fff; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border); }
.otp { display: flex; gap: 8px; flex-wrap: wrap; border: 0; padding: 0; margin: 0; }
.otp legend { padding: 0; margin-bottom: 10px; font-size: 13px; font-weight: 600; }
.otp-cell { width: 48px; height: 60px; border-radius: 14px; border: 1px solid var(--border); background: #fff; font-family: var(--sora); font-weight: 700; font-size: 24px; text-align: center; color: var(--text); min-width: 0; padding: 0; }
.otp-cell:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(196, 30, 74, .12); }

/* ------------------------------------------------------------ compte */
.acc-head { background: var(--pink); border-radius: 32px; padding: 36px 40px; display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--sora); font-weight: 800; font-size: 30px; flex: 0 0 auto; }
.acc-counts { display: flex; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.acc-counts div { background: #fff; border-radius: 16px; padding: 14px 18px; min-width: 110px; display: flex; flex-direction: column; }
.acc-counts .v { font-family: var(--sora); font-weight: 800; font-size: 22px; letter-spacing: -0.03em; }
.acc-counts .k { font-size: 12px; color: var(--muted); }
.acc-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.fav-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fav { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; border: 1px solid var(--border); border-radius: 20px; padding: 14px 16px; }
.fav .body { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fav .name { font-weight: 600; font-size: 15px; color: var(--text); text-decoration: none; line-height: 1.3; }
.fav .name:hover { color: var(--accent); }
.fav .sub { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fav .reached { color: var(--ok); font-weight: 600; }
.fav .price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 90px; }
.fav .price .v { font-family: var(--sora); font-weight: 800; font-size: 18px; letter-spacing: -0.03em; }
.fav .price .d { font-size: 12px; font-weight: 600; color: var(--muted); }
.fav .price .d.down { color: var(--ok); }
.fav .price .d.up { color: var(--ko); }
.fav-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; padding-top: 10px; border-top: 1px solid var(--pink-2); }
.fav-tools form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fav-tools .input { width: 120px; }
.icon-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: #fff; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.card-list { background: #fff; border: 1px solid var(--border); border-radius: 24px; padding: 8px 20px; }
.notif { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--pink-2); font-size: 14px; }
.notif:last-child { border-bottom: 0; }

/* ------------------------------------------------------------ partenaires */
.pa-hero { background: var(--pink); position: relative; overflow: hidden; }
.pa-hero::before { content: ""; position: absolute; right: -200px; top: -200px; width: 640px; height: 640px; border-radius: 50%; background: var(--accent); opacity: .1; pointer-events: none; }
.pa-hero .wrap { padding-top: 96px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 28px; position: relative; }
.pa-hero h1 { font-family: var(--sora); font-weight: 800; font-size: 76px; line-height: .96; letter-spacing: -0.05em; max-width: 900px; }
.pa-figs { display: flex; flex-wrap: wrap; gap: 32px; padding-top: 8px; }
.pa-figs div { display: flex; flex-direction: column; }
.pa-figs .v { font-family: var(--sora); font-weight: 800; font-size: 40px; letter-spacing: -0.05em; }
.pa-figs .k { font-size: 14px; color: var(--muted); }
.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.offer { border-radius: 28px; padding: 36px; display: flex; flex-direction: column; gap: 18px; transition: transform .4s var(--ease), box-shadow .4s; }
.offer:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -28px rgba(196, 30, 74, .3); }
.offer h3 { font-family: var(--sora); font-weight: 700; font-size: 26px; letter-spacing: -0.03em; }
.offer ul { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; }
.offer .price { margin-top: auto; font-family: var(--sora); font-weight: 700; font-size: 20px; }
.offer--dark { background: var(--dark); color: #fff; }
.offer--dark ul { color: var(--on-dark); }
.offer--dark .kicker { color: var(--rose); }
.offer--line { background: #fff; border: 1px solid var(--border); }
.offer--line ul, .offer--pink ul { color: var(--muted); }
.offer--pink { background: var(--pink); }
.steps-ol { flex: 1 1 480px; min-width: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.steps-ol li { display: flex; gap: 16px; align-items: flex-start; background: #fff; border-radius: 18px; padding: 18px 20px; line-height: 1.5; }
.steps-ol .n { font-family: var(--sora); font-weight: 800; font-size: 20px; color: var(--accent); flex: 0 0 32px; }
.form-card { flex: 1 1 520px; min-width: 0; background: #fff; border: 1px solid var(--border); border-radius: 28px; padding: 36px; display: flex; flex-direction: column; gap: 18px; }
.form-card fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form-card legend { font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 10px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-radio { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 999px; padding: 0 16px; min-height: 44px; font-size: 14px; font-weight: 600; cursor: pointer; }
.pill-radio input { accent-color: var(--accent); margin: 0; width: 16px; height: 16px; }
.pill-radio:has(input:checked) { border-color: var(--dark); background: var(--dark); color: #fff; }
.pill-radio:has(input:checked) input { accent-color: var(--rose); }
.pill-radio:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------ accueil */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; z-index: 60; pointer-events: none; }
.hero { background: var(--pink); position: relative; overflow: hidden; }
.hero-word { position: absolute; left: -2%; top: 48%; font-family: var(--sora); font-weight: 800; font-size: 340px; line-height: 1; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1px rgba(196, 30, 74, .16); white-space: nowrap; user-select: none; pointer-events: none; }
.hero-in { padding-top: 96px; padding-bottom: 80px; display: flex; flex-wrap: wrap; align-items: center; gap: 56px; position: relative; }
.hero-copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.hero-copy .lead { max-width: 520px; }
.hero-line { display: block; }
.hero-perks { display: flex; flex-wrap: wrap; gap: 12px 32px; color: var(--muted); font-size: 14px; padding-top: 8px; margin: 0; list-style: none; padding-left: 0; }
.hero-perks li { display: flex; align-items: center; gap: 8px; }
.hero-search { display: flex; max-width: 560px; background: #fff; border: 1.5px solid var(--border); border-radius: 999px; padding: 6px 6px 6px 20px; gap: 8px; align-items: center; }
.hero-search:focus-within { border-color: var(--accent); }
.hero-search input { flex: 1 1 auto; min-width: 0; border: 0; font: inherit; font-size: 16px; background: transparent; color: var(--text); height: 44px; }
.hero-search input:focus { outline: none; }
.hero-phone { flex: 0 1 380px; min-width: 0; display: flex; justify-content: center; position: relative; }
.hero-glow { position: absolute; width: 440px; height: 440px; border-radius: 50%; background: var(--accent); opacity: .14; filter: blur(90px); top: 18%; left: 50%; transform: translateX(-50%); }
.phone { position: relative; width: 320px; height: 660px; border-radius: 48px; background: var(--dark); padding: 12px; box-shadow: 0 60px 120px -40px rgba(43, 17, 25, .55), inset 0 0 0 1px rgba(255, 255, 255, .08); max-width: 100%; flex: 0 0 auto; }
.phone-screen { width: 100%; height: 100%; border-radius: 38px; background: #fff; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.ph-top { padding: 54px 20px 0; display: flex; align-items: center; justify-content: space-between; }
.ph-brand { font-family: var(--sora); font-weight: 800; font-size: 18px; letter-spacing: -0.04em; color: var(--text); }
.ph-brand span { color: var(--accent); }
.ph-cap { font-size: 11px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.ph-scan { margin: 20px; height: 210px; border-radius: 22px; background: var(--dark); position: relative; overflow: hidden; flex: 0 0 auto; }
.ph-scan .c { position: absolute; width: 28px; height: 28px; border: 0 solid #fff; }
.ph-scan .c1 { left: 24px; top: 24px; border-left-width: 3px; border-top-width: 3px; border-radius: 6px 0 0 0; }
.ph-scan .c2 { right: 24px; top: 24px; border-right-width: 3px; border-top-width: 3px; border-radius: 0 6px 0 0; }
.ph-scan .c3 { left: 24px; bottom: 24px; border-left-width: 3px; border-bottom-width: 3px; border-radius: 0 0 0 6px; }
.ph-scan .c4 { right: 24px; bottom: 24px; border-right-width: 3px; border-bottom-width: 3px; border-radius: 0 0 6px 0; }
.ph-scan .laser { position: absolute; left: 36px; right: 36px; top: 10%; height: 2px; background: var(--rose); box-shadow: 0 0 18px var(--rose); }
.ph-scan .bars { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 3px; opacity: .5; }
.ph-scan .bars i { display: block; height: 54px; background: #fff; }
.ph-body { margin: 0 20px; flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; color: var(--text); min-height: 0; }
.ph-name { margin-top: 4px; font-family: var(--sora); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ph-best { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; background: var(--accent); color: #fff; border-radius: 16px; padding: 14px 16px; }
.ph-best .l { font-size: 11px; color: var(--on-accent); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ph-best .p { margin-top: 2px; font-family: var(--sora); font-weight: 800; font-size: 28px; letter-spacing: -0.04em; line-height: 1.1; }
.ph-best .p small { font-size: 14px; font-weight: 600; }
.ph-best .s { font-size: 12px; color: var(--on-accent); text-align: right; }
.ph-rows { display: flex; flex-direction: column; font-size: 13px; }
.ph-rows div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--pink-2); }
.ph-rows div:last-child { border-bottom: 0; }
.ph-rows span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-rows b { font-weight: 600; white-space: nowrap; }
.ph-rows .first b { color: var(--accent); }

.marquee-wrap { border-top: 1px solid var(--pink-2); padding: 22px 0; overflow: hidden; position: relative; background: #fff; }
.marquee { display: flex; width: max-content; }
.marquee > ul { display: flex; gap: 20px; padding: 0 20px 0 0; margin: 0; list-style: none; white-space: nowrap; }
.marquee a { text-decoration: none; }

.sec { position: relative; }
.sec-pink { background: var(--pink); }
.sec-white { background: #fff; }
.sec-in { padding-top: 140px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 72px; }
.sec-in--m { padding-top: 120px; padding-bottom: 120px; gap: 48px; }
.sec-in--s { padding-top: 96px; padding-bottom: 96px; gap: 40px; }
.steps3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.step-card { border-radius: 32px; padding: 40px; min-height: 380px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; transition: transform .5s var(--ease), box-shadow .5s; }
.step-card:hover, .uni-card:hover, .pa-card:hover { transform: translateY(-10px); box-shadow: 0 30px 60px -30px rgba(196, 30, 74, .35); }
.step-card .num { font-family: var(--sora); font-weight: 800; font-size: 72px; line-height: 1; letter-spacing: -0.06em; color: var(--accent); }
.step-card h3 { font-family: var(--sora); font-weight: 700; font-size: 26px; letter-spacing: -0.03em; }
.step-card p { font-size: 16px; line-height: 1.55; color: var(--muted); }
.step-card--line { background: #fff; border: 1px solid var(--border); }
.step-card--red { background: var(--accent); color: #fff; }
.step-card--red .num, .step-card--red p { color: var(--on-accent); }
.step-card--pink { background: var(--pink); }

.scrolly { padding-top: 120px; padding-bottom: 120px; display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start; }
.scrolly-phone { flex: 0 1 460px; min-width: 0; position: sticky; top: 100px; display: flex; justify-content: center; }
.scrolly-steps { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; }
.sstep { min-height: 620px; display: flex; flex-direction: column; justify-content: center; gap: 20px; transition: opacity .5s, transform .5s; }
.sstep .tag { font-family: var(--sora); font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.sstep p { font-size: 19px; line-height: 1.55; color: var(--muted); max-width: 480px; }
.screen { position: absolute; inset: 0; padding: 56px 20px 20px; display: flex; flex-direction: column; gap: 16px; color: var(--text); transition: opacity .6s, transform .6s var(--ease); background: #fff; }
.screen--pink { background: var(--pink); gap: 20px; }
.scr-cap { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.scr-title { font-family: var(--sora); font-weight: 700; font-size: 17px; letter-spacing: -0.03em; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scr-rows { display: flex; flex-direction: column; gap: 10px; }
.scr-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 16px; padding: 12px 16px; font-size: 14px; }
.scr-row b { font-family: var(--sora); font-weight: 700; font-size: 17px; white-space: nowrap; }
.scr-row--best { background: var(--accent); color: #fff; border-color: var(--accent); }
.scr-row--best small { display: block; font-size: 11px; color: var(--on-accent); font-weight: 600; letter-spacing: .04em; }
.scr-row--best b { font-weight: 800; font-size: 19px; }
.scr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; font-size: 12px; color: var(--muted); }
.scr-stats div { background: var(--pink); border-radius: 12px; padding: 10px; }
.scr-stats b { display: block; font-weight: 700; color: var(--text); font-size: 15px; }
.bell { position: relative; width: 120px; height: 120px; margin: 24px auto 0; display: flex; align-items: center; justify-content: center; }
.bell .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); }
.bell .core { width: 96px; height: 96px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; color: #fff; }
.scr-cta { margin-top: auto; background: var(--accent); color: #fff; border-radius: 999px; padding: 16px; text-align: center; font-weight: 600; font-size: 15px; }

.uni { padding: 140px 0 120px; display: flex; flex-direction: column; gap: 56px; }
.hstrip { overflow: hidden; }
.track { display: flex; gap: 24px; will-change: transform; padding: 0 40px; margin: 0; list-style: none; }
.uni-card { flex: 0 0 340px; height: 400px; border-radius: 32px; padding: 36px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; color: var(--text); transition: transform .5s var(--ease), box-shadow .5s; background: var(--pink); border: 1px solid var(--pink-2); }
.uni-card:hover { color: var(--text); }
.uni-card .st { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.uni-card .nm { font-family: var(--sora); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -0.05em; margin-bottom: 8px; }
.uni-card .bl { color: var(--muted); font-size: 15px; }
.uni-card--red { background: var(--accent); color: #fff; border-color: var(--accent); }
.uni-card--red:hover { color: #fff; }
.uni-card--red .st, .uni-card--red .bl { color: var(--on-accent); }
.uni-card--soon { background: #fff; border: 1.5px dashed var(--dash); }
.uni-card--soon .st, .uni-card--soon .nm { color: var(--muted); }
.uni-card--dark { background: var(--dark); color: #fff; border-color: var(--dark); justify-content: center; align-items: center; gap: 14px; text-align: center; }
.uni-card--dark:hover { color: #fff; }
.uni-card--dark p { color: var(--on-dark); font-size: 15px; }
.uni-card--dark .q { font-family: var(--sora); font-weight: 700; font-size: 24px; letter-spacing: -0.03em; color: #fff; }
.uni-card--dark .go { color: var(--rose); font-weight: 600; }

.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.logo-tile { background: #fff; border: 1px solid var(--border); border-radius: 20px; height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px; text-decoration: none; color: var(--text); transition: transform .4s var(--ease), border-color .3s; }
.logo-tile:hover { transform: scale(1.04); border-color: var(--accent); color: var(--text); }
.logo-tile .n { font-size: 12px; color: var(--muted); }
.logo-tile--cta { background: var(--accent); border-color: var(--accent); color: #fff; font-family: var(--sora); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; align-items: flex-start; justify-content: flex-end; }
.logo-tile--cta:hover { color: #fff; }

.band { background: var(--accent); color: #fff; overflow: hidden; }
.band-in { padding-top: 96px; padding-bottom: 96px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px; margin: 0 auto; list-style: none; }
.band-in li { display: flex; flex-direction: column; gap: 8px; border-left: 2px solid rgba(255, 255, 255, .35); padding-left: 24px; }
.band-in .v { font-family: var(--sora); font-weight: 800; font-size: 88px; line-height: .9; letter-spacing: -0.06em; }
.band-in .v small { font-size: 40px; }
.band-in .k { font-size: 17px; font-weight: 500; }

.app-cta { background: #fff; position: relative; overflow: hidden; }
.app-blob { position: absolute; right: -220px; top: -140px; width: 720px; height: 720px; border-radius: 50%; background: var(--pink); }
.app-in { padding-top: 160px; padding-bottom: 160px; display: flex; flex-wrap: wrap; align-items: center; gap: 56px; position: relative; }
.store { display: inline-flex; align-items: center; gap: 14px; background: var(--dark); color: #fff; text-decoration: none; border-radius: 16px; padding: 12px 22px; min-height: 60px; transition: transform .25s; }
.store:hover { color: #fff; transform: translateY(-2px); }
.store .t { display: flex; flex-direction: column; line-height: 1.15; }
.store .t small { font-size: 11px; color: var(--on-dark); }
.store .t b { font-family: var(--sora); font-weight: 700; font-size: 18px; }
.store--soon { background: #fff; color: var(--text-2); border: 1.5px dashed var(--dash); }
.store--soon:hover { transform: none; color: var(--text-2); }
.store--soon .t small { color: var(--muted); }
.qr { width: 220px; height: 220px; border-radius: 28px; background: #fff; border: 1px dashed var(--dash); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; font-weight: 500; text-align: center; padding: 20px; }
.pa-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.pa-card { background: #fff; border: 1px solid var(--border); border-radius: 28px; padding: 36px; display: flex; flex-direction: column; gap: 18px; transition: transform .5s var(--ease), box-shadow .5s; }
.pa-card h3 { font-family: var(--sora); font-weight: 700; font-size: 24px; letter-spacing: -0.03em; }
.pa-card p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.pa-card .link-arrow { margin-top: auto; }

/* ------------------------------------------------------------ animations (accueil) */
@keyframes sk-rise { from { opacity: 0; transform: translateY(60px) skewY(3deg); } to { opacity: 1; transform: none; } }
@keyframes sk-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sk-laser { 0% { top: 10%; } 50% { top: 88%; } 100% { top: 10%; } }
@keyframes sk-pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes sk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero-line { animation: sk-rise 1s var(--ease) both; }
  .hero-line:nth-child(2) { animation-delay: .14s; }
  .hero-line:nth-child(3) { animation-delay: .28s; }
  .hero-fade { animation: sk-rise 1s var(--ease) .5s both; }
  .marquee { animation: sk-marquee 36s linear infinite; }
  .marquee:hover, .marquee:focus-within { animation-play-state: paused; }
  .laser { animation: sk-laser 2.6s ease-in-out infinite; }
  .ring { animation: sk-pulse 1.8s ease-out infinite; }
  .float { animation: sk-float 6s ease-in-out infinite; }
}
/* contenus révélés au défilement : masqués seulement si le JS d'animation tourne (classe posée par home.js) */
.sk-js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.sk-js [data-reveal="scale"] { transform: scale(.9); }
.sk-js [data-reveal].is-in { opacity: 1; transform: none; }
.sk-js [data-reveal-group] > * { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.sk-js [data-reveal-group].is-in > * { opacity: 1; transform: none; }
.sk-js [data-reveal-group].is-in > *:nth-child(2) { transition-delay: .08s; }
.sk-js [data-reveal-group].is-in > *:nth-child(3) { transition-delay: .16s; }
.sk-js [data-reveal-group].is-in > *:nth-child(4) { transition-delay: .24s; }
.sk-js [data-reveal-group].is-in > *:nth-child(5) { transition-delay: .32s; }
.sk-js [data-reveal-group].is-in > *:nth-child(6) { transition-delay: .4s; }
.sk-js [data-reveal-group].is-in > *:nth-child(7) { transition-delay: .48s; }
.sk-js [data-reveal-group].is-in > *:nth-child(8) { transition-delay: .56s; }
.sk-js [data-reveal-group].is-in > *:nth-child(n+9) { transition-delay: .64s; }
.sk-js [data-wipe] { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s cubic-bezier(.7, 0, .2, 1); }
.sk-js [data-wipe].is-in { clip-path: inset(0 0 0 0); }
.sk-js.sk-steps .sstep { opacity: .3; }
.sk-js.sk-steps .sstep.is-active { opacity: 1; }
.sk-steps .screen { opacity: 0; transform: translateY(24px); }
.sk-steps .screen.is-on { opacity: 1; transform: none; }
html:not(.sk-steps) .screen:not([data-screen="0"]) { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .btn:hover, .pcard:hover, .step-card:hover, .uni-card:hover, .pa-card:hover, .logo-tile:hover, .offer:hover, .mcard:hover, .offers tbody tr:hover { transform: none; }
}

/* ------------------------------------------------------------ responsive (maquettes : 900 px) */
@media (max-width: 900px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .track { padding: 0 20px; }
  .h-hero { font-size: 60px; }
  .h-xl, .h-lg, .h-84, .h-64 { font-size: 48px; }
  .hero-word { font-size: 150px; }
  .hstrip { overflow-x: auto; overflow-y: hidden; }
  .track { transform: none !important; }
  .scrolly-phone { position: static; }
  .sk-js.sk-steps .sstep { opacity: 1; }
  .sstep { min-height: 0; padding: 32px 0; }
  .h-page { font-size: 34px; }
  .pa-hero h1 { font-size: 48px; }
  .auth-aside { display: none; }
  .auth-card { padding: 28px 20px; border-radius: 24px; }
  .m-head { padding: 28px 20px; }
  .acc-grid { grid-template-columns: minmax(0, 1fr); }
  .acc-counts { margin-left: 0; }
  .best-box .side { align-items: flex-start; margin-left: 0; }
  .best-box .amount { font-size: 46px; }
  .sec-in { padding-top: 88px; padding-bottom: 80px; gap: 48px; }
  .uni { padding: 88px 0 80px; }
  .app-in { padding-top: 96px; padding-bottom: 96px; }
  .band-in .v { font-size: 64px; }
  .step-card { min-height: 0; padding: 32px; }
  .panel-pink, .panel-dark, .panel-line { padding: 24px; }
  .form-card { padding: 24px 20px; }
  .uni-card { flex-basis: 280px; height: 340px; }
  .nav-links { margin-left: 0; width: 100%; order: 3; gap: 0 20px; }
}

/* tableau des offres → cartes empilées */
@media (max-width: 900px) {
  .table-scroll { overflow: visible; }
  .offers { min-width: 0; border-spacing: 0; margin: 0; display: block; }
  .offers thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .offers tbody { display: flex; flex-direction: column; gap: 10px; }
  .offers tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; border: 1px solid var(--border); border-radius: 20px; padding: 16px; align-items: start; }
  .offers tbody tr:hover { transform: none; }
  .offers tr.row-best { background: var(--dark); color: #fff; border-color: var(--dark); }
  .offers td, .offers td:first-child, .offers td:last-child { display: block; padding: 0; border: 0; border-radius: 0; background: transparent !important; text-align: left; }
  .offers .c-merchant { grid-column: 1; grid-row: 1; }
  .offers .c-price { grid-column: 2; grid-row: 1; text-align: right; }
  .offers .c-avail, .offers .c-deliv, .offers .c-total { grid-column: 1 / -1; }
  .offers .c-deliv::before, .offers .c-total::before { content: attr(data-label) " : "; color: var(--muted); font-size: 13px; }
  .offers .row-best .c-deliv::before, .offers .row-best .c-total::before { color: var(--on-dark); }
  .offers .c-cta { grid-column: 1 / -1; padding-top: 8px; }
  .offers .c-cta .btn { width: 100%; }
  .filters-wrap { flex-basis: 100%; }
  .filters-box > summary { display: inline-flex; list-style: none; cursor: pointer; }
  .filters-box > summary::-webkit-details-marker { display: none; }
  .filters-box[open] > summary { margin-bottom: 20px; }
}
@media (max-width: 600px) {
  .nav-cta { display: none; }
  .site-header--home .nav-links { display: none; }
  .site-header--home .nav-actions { margin-left: auto; }
  .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pcard { padding: 10px; border-radius: 18px; gap: 8px; }
  .pcard-badge { top: 16px; left: 16px; }
  .pcard-price { font-size: 17px; }
  .tile--white .v { font-size: 15px; }
}
@media (max-width: 420px) {
  .h-hero { font-size: 46px; }
  .otp-cell { width: 42px; height: 54px; }
  .phone { width: 290px; height: 600px; }
}