/* ==========================================================
   Pages de vente Fiddes : complète styles.css (accueil)
   Règle : pas de texte seul, tout est bouton ou interaction.
   ========================================================== */

.sp { --acc: var(--saphir); --acc2: var(--violet); }
.sp main { overflow-x: hidden; }
.sp section { padding: 110px var(--gutter) 0; max-width: 1280px; margin: 0 auto; }
.sp .grad { background: linear-gradient(100deg, var(--acc), var(--acc2) 60%, #FF9A62); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-h2 { font-size: clamp(34px, 4.6vw, 64px); margin-bottom: 28px; }

/* Bouton pilule à bordure dégradée qui tourne (même famille que « Découvrir ») */
.spin-btn { display: inline-flex; align-items: center; gap: 12px; padding: 15px 26px; border-radius: 99px; text-decoration: none; cursor: pointer; color: var(--nuit); font: 700 16px Sora, sans-serif; letter-spacing: -0.01em;
  background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--ga), var(--saphir), var(--violet), var(--peche), var(--saphir)) border-box; border: 2.5px solid transparent;
  animation: goSpin 5s linear infinite; transition: transform .3s var(--ease), box-shadow .3s; }
.spin-btn:hover, .spin-btn:focus-visible { transform: translateY(-2px) scale(1.03); animation-duration: 1.2s; box-shadow: 0 16px 34px -18px rgba(139,92,246,.7); }
.spin-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.spin-btn:hover svg { transform: translateX(4px); }
.fill-btn { display: inline-flex; align-items: center; gap: 12px; padding: 17px 28px; border: 0; border-radius: 99px; cursor: pointer; text-decoration: none; color: #fff; font: 700 16px Sora, sans-serif;
  background: linear-gradient(100deg, var(--acc), var(--acc2)); box-shadow: 0 18px 40px -16px rgba(11,77,255,.65); transition: transform .3s var(--ease), box-shadow .3s; }
.fill-btn:hover, .fill-btn:focus-visible { transform: translateY(-3px); box-shadow: 0 26px 50px -18px rgba(139,92,246,.75); }
.fill-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.fill-btn:hover svg { transform: translateX(5px); }
.fill-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- HERO ---------- */
.sp-hero { padding-top: 150px !important; text-align: center; }
.sp-badge { display: inline-flex; align-items: center; gap: 12px; padding: 10px 22px 10px 12px; border-radius: 99px; font: 800 20px Sora, sans-serif; letter-spacing: -0.03em; color: var(--nuit); text-decoration: none;
  background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--ga), var(--saphir), var(--violet), var(--peche), var(--saphir)) border-box; border: 2.5px solid transparent; animation: goSpin 5s linear infinite; }
.sp-badge img { width: 34px; height: 34px; }
.sp-hero h1 { font-size: clamp(46px, 7.4vw, 112px); margin: 26px auto 22px; max-width: 1100px; }
.sp-hero h1 .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.sp-hero h1 .ln > span { display: inline-block; }
.sp-typed { min-height: 3.2em; max-width: 760px; margin: 0 auto; font: 700 clamp(18px, 1.7vw, 23px)/1.5 Manrope, sans-serif; color: var(--txt2); }
.sp-typed .hl { background: linear-gradient(100deg, var(--acc), var(--acc2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-typed .caret, .faq-a .caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.18em; background: var(--acc); animation: caretB .8s steps(1) infinite; }
.sp-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.sp-facts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.fact { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 12px; border-radius: 99px; border: 1px solid rgba(10,27,61,.1); background: #fff; font: 700 15px Sora, sans-serif; color: var(--nuit); cursor: default; transition: transform .3s var(--ease), box-shadow .3s; }
.fact i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 14px; background: var(--acc); transition: transform .5s var(--ease); }
.fact:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(10,27,61,.45); } .fact:hover i { transform: rotate(360deg); }

/* ---------- VIDÉO ---------- */
.sp-video { padding-top: 70px !important; }
.sp-player { position: relative; max-width: 1080px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 30px; overflow: hidden; background: #fff; box-shadow: 0 60px 120px -60px rgba(10,27,61,.5), 0 0 0 1px rgba(10,27,61,.06); }
.sp-player video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- POUR QUI : pastilles qui répondent ---------- */
.who-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: stretch; }
@media (max-width: 860px) { .who-wrap { grid-template-columns: 1fr; } }
.who-chips { display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.who-chip { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px 14px 14px; border-radius: 99px; border: 1px solid rgba(10,27,61,.12); background: #fff; cursor: pointer; font: 700 16px Sora, sans-serif; color: var(--nuit); transition: all .3s var(--ease); }
.who-chip i { width: 34px; height: 34px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; font-style: normal; font-size: 17px; transition: transform .4s var(--ease), background .3s; }
.who-chip:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(10,27,61,.45); }
.who-chip.on { background: var(--nuit); color: #fff; border-color: var(--nuit); } .who-chip.on i { background: rgba(255,255,255,.14); transform: rotate(-12deg) scale(1.1); }
.who-card { position: relative; border-radius: 28px; padding: 34px; background: var(--nuit); color: #fff; overflow: hidden; min-height: 240px; isolation: isolate; }
.who-card::before { content: ""; position: absolute; width: 420px; height: 420px; right: -140px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(139,92,246,.55), transparent 65%); z-index: -1; }
.who-card .k { font: 700 13px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .1em; color: #9DB5FF; }
.who-card h3 { font-size: clamp(28px, 3vw, 40px); margin: 10px 0 14px; }
.who-card p { margin: 0; font: 600 19px/1.5 Manrope, sans-serif; color: #C9D3EA; min-height: 3em; }
.who-card .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.who-card .tags span { padding: 8px 14px; border-radius: 99px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); font: 700 13px Sora, sans-serif; animation: rIn .5s var(--ease) both; }

/* ---------- PACKS ---------- */
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; align-items: stretch; }
.pack { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 32px 28px 28px; border-radius: 30px; background: #fff; border: 1px solid rgba(10,27,61,.1); transition: transform .45s var(--ease), box-shadow .45s; transform-style: preserve-3d; will-change: transform; }
.pack:hover { box-shadow: 0 50px 90px -50px rgba(10,27,61,.5); }
.pack.reco { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--ga), var(--saphir), var(--violet), var(--peche), var(--saphir)) border-box; border: 3px solid transparent; animation: goSpin 6s linear infinite; }
.pack .ribbon { position: absolute; top: -15px; left: 28px; padding: 7px 14px; border-radius: 99px; background: var(--nuit); color: #fff; font: 700 12px Sora, sans-serif; letter-spacing: .02em; }
.pack .pn { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pack h3 { font-size: 30px; letter-spacing: -0.04em; }
.pack .delay { padding: 7px 12px; border-radius: 99px; background: var(--soft); font: 700 13px Sora, sans-serif; white-space: nowrap; }
.price { display: flex; align-items: baseline; gap: 8px; }
.price b { font: 800 clamp(44px, 4.6vw, 60px)/1 Sora, sans-serif; letter-spacing: -0.05em; }
.price small { font: 700 14px Sora, sans-serif; color: var(--txt3); }
.price em { font: 700 16px Sora, sans-serif; font-style: normal; color: var(--txt3); }
.price { flex-wrap: nowrap; white-space: nowrap; }
.feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.feats li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px; font: 600 17px/1.4 "DM Sans", Manrope, sans-serif; color: var(--nuit); transition: background .25s, color .25s, transform .3s var(--ease); cursor: default; }
.feats li svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.feats li svg path { stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset .6s var(--ease); }
.packs.drawn .feats li svg path { stroke-dashoffset: 0; }
.feats li:hover { background: var(--soft); color: var(--nuit); transform: translateX(4px); }
.pack .fill-btn, .pack .spin-btn { justify-content: center; }

/* ---------- OPTION ABONNEMENT (M4) : bordure qui tourne, tuiles qui arrivent au scroll ---------- */
.ad { margin-top: 26px; padding: 28px; border-radius: 30px; display: flex; flex-direction: column; gap: 22px;
  background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--ga), var(--saphir), var(--violet), var(--peche), var(--saphir)) border-box; border: 3px solid transparent; animation: goSpin 6s linear infinite; }
.ad-top { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.ad h3 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.035em; }
.ad-sub { font: 600 16px "DM Sans", Manrope, sans-serif; color: var(--txt2); }
.ad-right { display: flex; align-items: center; gap: 18px; }
.ad-pr { font: 800 32px Sora, sans-serif; letter-spacing: -0.04em; } .ad-pr small { font-size: 15px; color: var(--txt3); }
.sw { position: relative; width: 74px; height: 42px; border-radius: 99px; background: #D3DBEC; border: 0; cursor: pointer; flex: none; transition: background .3s; }
.sw::after { content: ""; position: absolute; top: 5px; left: 5px; width: 32px; height: 32px; border-radius: 50%; background: #fff; box-shadow: 0 4px 10px rgba(10,27,61,.25); transition: transform .35s var(--ease); }
.sw[aria-pressed="true"] { background: var(--acc); } .sw[aria-pressed="true"]::after { transform: translateX(32px); }
.ad-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 860px) { .ad-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ad-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 128px; padding: 20px 14px; border-radius: 20px; background: var(--soft); text-align: center; font: 700 15px "DM Sans", Sora, sans-serif; cursor: default; opacity: 0; transform: translateX(-24px); transition: opacity .5s var(--ease) var(--d, 0s), transform .5s var(--ease) var(--d, 0s), background .3s, color .3s; }
.ad.in .ad-tile { opacity: 1; transform: none; }
.ad.in .ad-tile:hover { transform: translateY(-4px); transition-delay: 0s; }
.ad-tile b { display: block; font-size: 30px; margin-bottom: 8px; transition: transform .5s var(--ease); }
.ad-tile:hover { background: var(--nuit); color: #fff; }
.ad-tile:hover b { transform: scale(1.15); }

/* ---------- FAQ : questions en boutons, réponse tapée ---------- */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px 24px; border-radius: 22px; border: 1px solid rgba(10,27,61,.1); background: #fff; cursor: pointer; text-align: left; font: 700 18px Sora, sans-serif; letter-spacing: -0.015em; color: var(--nuit); transition: all .3s var(--ease); }
.faq-q i { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--soft); font-style: normal; font-size: 22px; transition: transform .4s var(--ease), background .3s, color .3s; }
.faq-q:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -22px rgba(10,27,61,.5); }
.faq-q[aria-expanded="true"] { background: var(--nuit); color: #fff; border-color: var(--nuit); } .faq-q[aria-expanded="true"] i { transform: rotate(45deg); background: var(--acc); color: #fff; }
.faq-a { margin: 0; padding: 0 24px; max-height: 0; overflow: hidden; font: 600 17px/1.55 Manrope, sans-serif; color: var(--txt2); transition: max-height .5s var(--ease), padding .4s; }
.faq-a.open { max-height: 360px; padding: 14px 24px 10px; }
.faq-a { font-family: "DM Sans", Manrope, sans-serif; font-size: 18px; }
.faq-a b { color: var(--nuit); background: linear-gradient(90deg, var(--acc), var(--acc2)) no-repeat 0 100% / 0 3px; transition: background-size .6s var(--ease) .2s; } .faq-a.open b { background-size: 100% 3px; }
.faq-pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 100px !important; padding-bottom: 20px; } .faq-pin .faq { gap: 8px; } .faq-pin .faq-q { padding: 14px 20px; font-size: 17px; } .faq-pin .sp-h2 { margin-bottom: 18px; }
.faq-prog { display: flex; gap: 6px; margin-top: 18px; } .faq-prog i { flex: 1; height: 4px; border-radius: 4px; background: #E3E9F6; transition: background .4s; } .faq-prog i.on { background: linear-gradient(90deg, var(--acc), var(--acc2)); }

/* ---------- FORMULAIRE DE COMMANDE ---------- */
.order { padding-bottom: 20px; }
.of { border-radius: 34px; background: var(--soft); padding: clamp(22px, 4vw, 44px); }
.of-steps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.of-step { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: 99px; border: 1px solid rgba(10,27,61,.1); background: #fff; font: 700 14px Sora, sans-serif; color: var(--txt3); cursor: pointer; transition: all .3s var(--ease); }
.of-step b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--nuit); font-size: 13px; transition: all .3s; }
.of-step.on { background: var(--nuit); color: #fff; border-color: var(--nuit); } .of-step.on b { background: var(--acc); color: #fff; }
.of-step.done b { background: #137A4A; color: #fff; }
.of-step[disabled] { cursor: not-allowed; opacity: .55; }
.of-bar { height: 6px; border-radius: 6px; background: #E3E9F6; overflow: hidden; margin-bottom: 30px; }
.of-bar span { display: block; height: 100%; width: 25%; border-radius: 6px; background: linear-gradient(90deg, var(--saphir), var(--violet), var(--peche)); transition: width .6s var(--ease); }
.of-panel { display: none; animation: rIn .5s var(--ease); }
.of-panel.on { display: block; }
.of-title { font: 800 clamp(24px, 2.6vw, 32px) Sora, sans-serif; letter-spacing: -0.035em; margin: 0 0 20px; }
.of-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.q { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.q > label, .q > .ql { font: 700 16px Sora, sans-serif; letter-spacing: -0.01em; color: var(--nuit); }
.q > label em, .q > .ql em { font-style: normal; color: var(--acc); }
.q input[type=text], .q input[type=email], .q input[type=tel], .q input[type=url], .q textarea { width: 100%; padding: 16px 18px; border-radius: 18px; border: 2px solid transparent; background: #fff; font: 600 16px Manrope, sans-serif; color: var(--nuit); box-shadow: 0 0 0 1px rgba(10,27,61,.08); transition: border-color .25s, box-shadow .25s, transform .25s var(--ease); }
.q textarea { min-height: 120px; resize: vertical; }
.q input:focus, .q textarea:focus { outline: 0; border-color: var(--acc); box-shadow: 0 14px 30px -20px rgba(11,77,255,.6); transform: translateY(-1px); }
.q input.bad, .q textarea.bad, .q .chips.bad { box-shadow: 0 0 0 2px #C62828; border-radius: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ochip { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 99px; border: 1px solid rgba(10,27,61,.12); background: #fff; cursor: pointer; font: 700 15px Sora, sans-serif; color: var(--nuit); transition: all .25s var(--ease); }
.ochip:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(10,27,61,.45); }
.ochip[aria-pressed="true"] { background: var(--nuit); color: #fff; border-color: var(--nuit); }
.ochip[aria-pressed="true"]::before { content: "✓"; color: var(--peche); }
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px; border-radius: 22px; border: 2px dashed rgba(11,77,255,.3); background: #fff; cursor: pointer; text-align: center; font: 700 16px Sora, sans-serif; transition: all .3s var(--ease); }
.drop:hover, .drop.over { border-color: var(--acc); background: #F0F5FF; transform: scale(1.01); }
.drop small { font: 600 13px Manrope, sans-serif; color: var(--txt3); }
.drop-list { display: flex; flex-wrap: wrap; gap: 8px; }
.drop-list span { padding: 8px 12px; border-radius: 99px; background: #fff; font: 700 13px Sora, sans-serif; box-shadow: 0 0 0 1px rgba(10,27,61,.1); }
.of-nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.of-sel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.of-pack { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 22px; border: 2px solid transparent; background: #fff; box-shadow: 0 0 0 1px rgba(10,27,61,.08); cursor: pointer; text-align: left; font: inherit; color: var(--nuit); transition: all .3s var(--ease); }
.of-pack b { font: 800 20px Sora, sans-serif; letter-spacing: -0.02em; } .of-pack span { font: 800 26px Sora, sans-serif; letter-spacing: -0.04em; } .of-pack small { font: 600 14px Manrope, sans-serif; color: var(--txt3); }
.of-pack:hover { transform: translateY(-3px); }
.of-pack[aria-pressed="true"] { border-color: var(--acc); box-shadow: 0 20px 40px -26px rgba(11,77,255,.7); }
.recap { display: flex; flex-direction: column; gap: 10px; }
.recap .line { display: flex; justify-content: space-between; gap: 16px; padding: 16px 20px; border-radius: 18px; background: #fff; font: 700 16px Sora, sans-serif; }
.recap .line span:last-child { color: var(--acc); text-align: right; }
.check { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 18px; background: #fff; cursor: pointer; border: 0; width: 100%; text-align: left; font: 600 15px/1.5 Manrope, sans-serif; color: var(--txt2); transition: box-shadow .25s; }
.check .bx { width: 26px; height: 26px; flex: none; border-radius: 8px; border: 2px solid rgba(10,27,61,.25); display: grid; place-items: center; transition: all .25s; }
.check[aria-checked="true"] .bx { background: var(--acc); border-color: var(--acc); } .check[aria-checked="true"] .bx::after { content: "✓"; color: #fff; font: 800 15px Sora, sans-serif; }
.check a { color: var(--acc); font-weight: 700; }
.check.bad { box-shadow: 0 0 0 2px #C62828; }
.note-pill { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 99px; background: #fff; font: 700 14px Sora, sans-serif; color: var(--nuit); margin: 6px 0 16px; }
.note-pill i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; background: var(--peche); display: grid; place-items: center; font-size: 13px; }
.of-done { text-align: center; padding: 40px 10px; }
.of-done .big { font: 800 clamp(30px, 4vw, 50px) Sora, sans-serif; letter-spacing: -0.04em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sp .r-sub, .sp .fx { margin-top: 110px; }
.sp-process { margin-top: 40px; }

/* Formulaire de commande en fenêtre */
.of-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; }
.of-modal[hidden] { display: none; }
.of-back { position: absolute; inset: 0; background: rgba(10,27,61,.55); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s ease; }
.of-sheet { position: relative; width: min(1040px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain; border-radius: 34px; background: #fff; box-shadow: 0 60px 120px -40px rgba(10,27,61,.6); transform: translateY(30px) scale(.97); opacity: 0; transition: transform .45s var(--ease), opacity .3s ease; }
.of-modal.on .of-back { opacity: 1; } .of-modal.on .of-sheet { transform: none; opacity: 1; }
.of-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px clamp(22px, 4vw, 44px) 14px; background: #fff; border-radius: 34px 34px 0 0; }
.of-h { margin: 0; font: 800 clamp(24px, 3vw, 36px) Sora, sans-serif; letter-spacing: -0.04em; }
.of-close { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 0; cursor: pointer; background: var(--soft); color: var(--nuit); font: 700 18px Sora, sans-serif; transition: transform .35s var(--ease), background .3s, color .3s; }
.of-close:hover { transform: rotate(90deg); background: var(--nuit); color: #fff; }
.of-sheet .of { border-radius: 0 0 34px 34px; }
body.of-open { overflow: hidden; }
.pk-tabs { margin: -6px 0 22px; flex-wrap: wrap; }
.pack[hidden] { display: none; }
.pnote { font: 600 14px "DM Sans", Manrope, sans-serif; color: var(--txt3); margin-top: -10px; }
.check[hidden]{display:none!important}

/* ---------- Correctifs 13/10 ---------- */
/* Packs : rien ne déborde sur l'option abonnement pendant les animations */
.pk-slider { position: relative; }
.packs { position: relative; z-index: 1; }
.ad { position: relative; z-index: 0; margin-top: 44px; }
/* Plus de 3 packs : une seule ligne qui glisse, flèches et pastilles comme le carrousel de l'accueil */
.packs.slide { display: flex; gap: 20px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: 26px 6px 34px; margin: -26px -6px -34px; scroll-padding-inline: 6px; outline: none; }
.packs.slide::-webkit-scrollbar { display: none; }
.packs.slide > .pack { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; }
.packs.slide:focus-visible { box-shadow: inset 0 0 0 3px rgba(11,77,255,.35); border-radius: 30px; }
@media (max-width: 1000px) { .packs.slide > .pack { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 640px) { .packs.slide > .pack { flex-basis: 86%; } }
.pk-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; }
.pk-nav[hidden] { display: none; }
.pk-nav .r-arrow[disabled] { opacity: .35; cursor: default; transform: none; background: #fff; color: var(--nuit); }
.pk-dots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pk-dot { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 99px; border: 1px solid rgba(10,27,61,.1); background: #fff; font: 700 14px/1 Sora, sans-serif; letter-spacing: -0.01em; color: var(--txt3); cursor: pointer; transition: all .3s var(--ease); }
.pk-dot i { width: 9px; height: 9px; border-radius: 50%; background: var(--acc); }
.pk-dot.on { background: var(--nuit); color: #fff; border-color: var(--nuit); }
.pk-dot.on i { background: var(--peche); }
@media (max-width: 640px) { .pk-dot span { display: none; } .pk-dot { padding: 10px; } }

/* Visite virtuelle (Studio) */
.sp-tour { padding-top: 90px !important; }
.sp-tour .sp-h2 { text-align: center; }
/* Vérification du nom de domaine */
.dc { margin-top: 10px; }
.dc-st { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 99px; font: 700 14px/1.3 Manrope, Inter, sans-serif; background: #EEF2FA; color: #3A4866; }
.dc-st i { width: 10px; height: 10px; border-radius: 50%; background: #8A96B3; flex: none; }
.dc[data-s="checking"] .dc-st i { background: var(--saphir, #0B4DFF); animation: dcPulse .9s ease-in-out infinite; }
.dc[data-s="free"] .dc-st { background: #E5F7EE; color: #0E7A45; } .dc[data-s="free"] .dc-st i { background: #12A05C; }
.dc[data-s="taken"] .dc-st { background: #FDECEC; color: #B42318; } .dc[data-s="taken"] .dc-st i { background: #E5484D; }
.dc[data-s="format"] .dc-st, .dc[data-s="unknown"] .dc-st { background: #FFF4E5; color: #8A4B00; } .dc[data-s="format"] .dc-st i, .dc[data-s="unknown"] .dc-st i { background: #F5A524; }
.dc-alt { margin-top: 10px; } .dc-alt small { display: block; font: 600 13px Manrope, sans-serif; color: #5B6785; margin-bottom: 6px; }
.dc-list { display: flex; flex-wrap: wrap; gap: 8px; }
@keyframes dcPulse { 50% { opacity: .35; } }