/* Docteure Apple — pages expérience (style apple.com : grands titres, noir profond, animations liées au défilement) */
.xp { --xp-bg: #000; --xp-fg: #f5f5f7; --xp-muted: #a1a1a6; --xp-card: #161617; --xp-accent: #00a3ae; --xp-link: #4fdde6; background: var(--xp-bg); color: var(--xp-fg); overflow: clip; }
.xp--light { --xp-bg: #fbfbfd; --xp-fg: #1d1d1f; --xp-muted: #6e6e73; --xp-card: #fff; --xp-link: #00757d; }
body.da-xp-dark { background: #000 !important; }
body.da-xp-dark .da-header:not(.is-stuck) .da-nav__desk > li > a { color: rgba(255, 255, 255, .7); }
body.da-xp-dark .da-header:not(.is-stuck) .da-nav__desk > li > a:hover { color: #fff; }
body.da-xp-dark .da-header:not(.is-stuck) .da-nav__icon { color: #fff; }
body.da-xp-dark .da-header:not(.is-stuck) .da-nav__logo img { filter: brightness(0) invert(1); }
body.da-xp-dark .da-header.is-stuck { background: rgba(22, 22, 23, .8); box-shadow: none; }
body.da-xp-dark .da-header.is-stuck .da-nav__desk > li > a, body.da-xp-dark .da-header.is-stuck .da-nav__icon { color: rgba(255, 255, 255, .8); }
body.da-xp-dark .da-header.is-stuck .da-nav__logo img { filter: brightness(0) invert(1); }
.xp h1, .xp h2, .xp h3 { color: inherit !important; font-family: var(--da-font) !important; }
.xp-wrap { max-width: 1040px; margin: 0 auto; padding: 0 22px; }
.xp-center { text-align: center; }
.xp-eyebrow { display: inline-block; font-size: 17px; font-weight: 600; color: var(--xp-accent); margin-bottom: 10px; letter-spacing: 0; }
.xp-h2 { font-size: clamp(32px, 6vw, 64px) !important; line-height: 1.05 !important; font-weight: 700 !important; letter-spacing: -.025em !important; margin: 0 0 18px !important; }
.xp-lead { font-size: clamp(17px, 2.2vw, 24px); line-height: 1.4; color: var(--xp-muted); max-width: 720px; }
.xp-center .xp-lead { margin: 0 auto 22px; }
.xp-body { font-size: 17px; line-height: 1.6; color: var(--xp-muted); }
.xp-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 26px; }
.xp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 999px; font-size: 17px; font-weight: 500; text-decoration: none !important; transition: transform .3s var(--da-ease), background .3s, opacity .3s; }
.xp-btn--primary { background: var(--xp-accent); color: #fff !important; }
.xp-btn--primary:hover { transform: scale(1.03); }
.xp-btn--ghost { border: 1.5px solid currentColor; color: var(--xp-fg) !important; }
.xp-btn--link { padding: 0 6px; min-height: 44px; color: var(--xp-link) !important; font-weight: 500; }
.xp-btn--link:hover { text-decoration: underline !important; }
.xp-btn--wa { background: #16a34a; color: #fff !important; }

/* Entrées douces au chargement */
.xp-in { opacity: 0; transform: translate3d(0, 24px, 0); animation: xp-in 1.1s var(--da-ease-apple) forwards; animation-delay: calc(.15s + var(--i, 0) * .12s); }
@keyframes xp-in { to { opacity: 1; transform: none; } }
.xp-reveal { opacity: 0; transform: translate3d(0, 50px, 0); transition: opacity 1s var(--da-ease-apple), transform 1.2s var(--da-ease-apple); transition-delay: var(--d, 0s); }
.xp-reveal.is-in { opacity: 1; transform: none; }

/* Hero : texte puis produit qui s'élève et grandit au défilement (--p = progression 0→1) */
.xp-hero { position: relative; height: 200vh; --p: 0; }
.xp-hero__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow: hidden; padding-top: calc(var(--da-nav-h) + 6vh); text-align: center; }
.xp-hero__text { position: relative; z-index: 2; padding: 0 22px; transform: translate3d(0, calc(var(--p) * -60px), 0); opacity: calc(1 - var(--p) * 1.6); }
.xp-hero__title { font-size: clamp(48px, 11vw, 132px) !important; line-height: .95 !important; letter-spacing: -.04em !important; font-weight: 700 !important; margin: 0 0 14px !important; background: linear-gradient(180deg, #fff 30%, #a1a1a6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.xp--light .xp-hero__title { background: linear-gradient(180deg, #1d1d1f 30%, #6e6e73); -webkit-background-clip: text; background-clip: text; }
.xp-hero__sub { font-size: clamp(19px, 2.6vw, 28px); color: var(--xp-muted); margin: 0 auto; max-width: 760px; }
.xp-hero .xp-actions { justify-content: center; }
.xp-hero__media { position: absolute; left: 50%; bottom: 0; width: min(1068px, 100vw); transform: translate3d(-50%, calc(28% - var(--p) * 28%), 0) scale(calc(.86 + var(--p) * .22)); transform-origin: 50% 100%; z-index: 1; will-change: transform; }
.xp-hero__media img { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
@media (max-width: 734px) { .xp-hero__media { width: 120vw; } }

/* Phrase révélée mot à mot */
.xp-statement { height: 220vh; --p: 0; }
.xp-statement__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; justify-content: center; padding: 0 22px; }
.xp-statement__text { max-width: 1000px; font-size: clamp(30px, 5.4vw, 64px); line-height: 1.12; font-weight: 700; letter-spacing: -.025em; margin: 0; }
.xp-statement__text span { opacity: .16; transition: opacity .25s linear; }
.xp-statement__text span.on { opacity: 1; }

/* Zoom au défilement */
.xp-zoom { height: 240vh; --p: 0; }
.xp-zoom__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: var(--da-nav-h) 22px 40px; text-align: center; }
.xp-zoom__head { position: relative; z-index: 2; opacity: calc(1 - var(--p) * 1.3); transform: translate3d(0, calc(var(--p) * -40px), 0); }
/* Le visuel reste à sa taille native (jamais agrandi au-delà de 100 %) : net sur écran Retina.
   Fond du cadre = fond de la photo, l'image est posée en bas et centrée, comme sur apple.com. */
.xp-zoom__frame { width: min(1100px, 92vw); aspect-ratio: 16 / 9; border-radius: calc(36px - var(--p) * 36px); overflow: hidden; background: #000; transform: scale(calc(.62 + var(--p) * .38)); will-change: transform; box-shadow: 0 40px 120px rgba(0, 0, 0, .5); }
.xp-zoom__frame img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: contain; }
.xp-zoom__caption { position: absolute; bottom: 7vh; left: 50%; transform: translateX(-50%); width: min(640px, 88vw); font-size: 19px; color: var(--xp-muted); opacity: calc((var(--p) - .6) * 3); }

/* Split */
.xp-split { padding: 16vh 0; }
.xp-split__grid { display: grid; gap: 50px; align-items: center; grid-template-columns: 1fr; max-width: 1200px; }
@media (min-width: 900px) { .xp-split__grid { grid-template-columns: 5fr 7fr; gap: 80px; } .xp-split--rev .xp-split__text { order: 2; } }
.xp-split__media { border-radius: 30px; overflow: hidden; background: var(--xp-card); }
.xp-split__media img { display: block; width: 100%; height: auto; transform: translate3d(0, var(--py, 0), 0) scale(1.08); will-change: transform; }

/* Bento */
.xp-features { padding: 16vh 0; }
.xp-bento { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 36px; }
@media (min-width: 734px) { .xp-bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1068px) { .xp-bento { grid-template-columns: repeat(3, 1fr); } .xp-tile--wide { grid-column: span 2; } }
.xp-tile { background: var(--xp-card); border-radius: 28px; padding: 34px 30px; min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; }
.xp-tile::before { content: ""; position: absolute; inset: -40% -40% auto auto; width: 70%; aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--xp-accent) 45%, transparent), transparent 65%); opacity: .35; }
.xp-tile h3 { font-size: 26px !important; letter-spacing: -.015em !important; margin: 0 0 8px !important; position: relative; }
.xp-tile p { color: var(--xp-muted); font-size: 17px; margin: 0; position: relative; line-height: 1.45; }

/* Galerie */
.xp-gallery { padding: 14vh 0; }
.xp-gallery__track { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 820px); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 20px max(22px, calc((100vw - 1040px) / 2)); scrollbar-width: none; }
.xp-gallery__track::-webkit-scrollbar { display: none; }
.xp-gallery__item { margin: 0; scroll-snap-align: center; }
.xp-gallery__item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 28px; display: block; }
.xp-gallery__item figcaption { margin-top: 14px; color: var(--xp-muted); font-size: 17px; }

/* Vidéo */
.xp-video { position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; }
.xp-video__el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xp-video__overlay { position: relative; z-index: 2; padding-bottom: 12vh; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); width: 100%; max-width: none; }

/* Caractéristiques */
.xp-specs { padding: 14vh 0; }
.xp-specs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px 40px; margin: 40px 0 0; }
.xp-specs__grid div { border-top: 1px solid rgba(134, 134, 139, .3); padding-top: 18px; }
.xp-specs__grid dt { color: var(--xp-muted); font-size: 14px; margin-bottom: 6px; }
.xp-specs__grid dd { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.01em; }

/* CTA final */
.xp-cta { padding: 18vh 0 20vh; background: radial-gradient(80% 60% at 50% 100%, color-mix(in srgb, var(--xp-accent) 22%, transparent), transparent 70%); }
.xp-cta__title { font-size: clamp(44px, 8vw, 96px) !important; font-weight: 700 !important; letter-spacing: -.035em !important; margin: 0 0 12px !important; }
.xp-cta__price { font-size: 19px; color: var(--xp-fg); margin: 0 0 8px; }
.xp-cta__note { margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .12); display: inline-block; }
.xp-cta__note a { color: var(--xp-link) !important; font-size: 17px; font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .xp-hero, .xp-statement, .xp-zoom { height: auto; }
  .xp-hero__sticky, .xp-statement__sticky, .xp-zoom__sticky { position: relative; height: auto; min-height: 80vh; }
  .xp-hero__media, .xp-zoom__frame, .xp-zoom__frame img, .xp-hero__text, .xp-zoom__head { transform: none !important; opacity: 1 !important; }
  .xp-hero__media { position: relative; left: auto; }
  .xp-statement__text span { opacity: 1; }
  .xp-in, .xp-reveal { opacity: 1; transform: none; animation: none; }
}

/* Liens secondaires du hero (« Essayer en showroom ») : bouton à contour, lisible sur fond sombre */
.xp-hero .xp-btn--link { min-height: 44px; padding: 0 22px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .7); color: #fff !important; font-weight: 500; }
.xp-hero .xp-btn--link:hover { background: rgba(255, 255, 255, .12); text-decoration: none !important; }
.xp--light .xp-hero .xp-btn--link { border-color: rgba(0, 0, 0, .55); color: #1d1d1f !important; }
.xp--light .xp-hero .xp-btn--link:hover { background: rgba(0, 0, 0, .06); }
.xp-hero .xp-actions { gap: 14px; flex-wrap: wrap; }

/* Mobile : en-tête toujours visible et lisible (logo = retour à l'accueil, recherche, panier, menu) */
@media (max-width: 821px) {
  body.da-xp-dark .da-header, body.da-xp-dark .da-header.is-stuck { background: rgba(22, 22, 23, .86); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); transform: none !important; }
  body.da-xp-dark .da-header .da-nav__icon { color: #fff !important; }
  body.da-xp-dark .da-header .da-nav__logo img { filter: brightness(0) invert(1); }
}