/* Fiche produit : tout est scopé sous .pdp. Textes clairs sur fond sombre (contraste AA), mise en page en 2 colonnes avec carte de réservation collante. */
.pdp { --bg: #0e0f16; --surface: #161823; --surface-2: #1d2030; --line: #2a2e42; --text: #eef0f8; --body: #d4d7e6; --muted: #aab0c6; --gold: #e4bf3b; --gold-2: #cd9343;
    background: var(--bg); color: var(--body); font-family: 'Atkinson Hyperlegible', 'Tajawal', sans-serif; padding-bottom: 96px; }
.pdp * { box-sizing: border-box; }
.pdp-wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }

/* hero */
.pdp-hero { position: relative; min-height: clamp(420px, 62vh, 620px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.pdp-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.pdp-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 15, 22, .55) 0%, rgba(14, 15, 22, .25) 38%, rgba(14, 15, 22, .94) 92%, var(--bg) 100%); }
.pdp-hero__in { padding: 130px 0 40px; }
.pdp-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: #cfd3e4; margin-bottom: 18px; } .pdp-crumbs a { color: #e8ebf7; text-decoration: none; } .pdp-crumbs a:hover { color: var(--gold); text-decoration: underline; } .pdp-crumbs span[aria-current] { color: #fff; }
.pdp-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pdp-badge { padding: 6px 14px; border-radius: 40px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 13px; font-weight: 700; }
.pdp-badge--vip { background: #1b1306; border-color: var(--gold); color: var(--gold); } .pdp-badge--pop { background: #fff; color: #1b1306; border-color: #fff; } .pdp-badge--promo { background: var(--gold); color: #1b1306; border-color: var(--gold); }
.pdp-title { margin: 0; font: 700 clamp(2.2rem, 5.4vw, 4.2rem)/1.05 'Rufina', 'Tajawal', serif; color: #fff; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, .5); }
.pdp-from { margin: 16px 0 0; font-size: 18px; color: #e8ebf7; } .pdp-from strong { color: var(--gold); font-size: 28px; } .pdp-from span { color: #c7cce0; }

/* mise en page */
.pdp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 36px; align-items: start; padding-top: 34px; }
.pdp-main { min-width: 0; display: grid; gap: 40px; }
@media (max-width: 980px) { .pdp-layout { grid-template-columns: minmax(0, 1fr); } .pdp-book { order: -1; } }

/* galerie : 1 grande + 4 miniatures */
.pdp-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 210px 150px; gap: 10px; }
.pdp-gallery__item { position: relative; overflow: hidden; border-radius: 16px; background: var(--surface-2); display: block; }
.pdp-gallery__item.is-big { grid-column: 1 / 4; grid-row: 1 / 3; } .pdp-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.22, 1, .36, 1); } .pdp-gallery__item:hover img { transform: scale(1.06); }
.pdp-gallery__item:nth-child(2) { grid-column: 4; grid-row: 1; } .pdp-gallery__item:nth-child(3) { grid-column: 4; grid-row: 2; }
.pdp-gallery__item:nth-child(n+4) { display: none; }
.pdp-gallery__more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(6, 7, 12, .6); color: #fff; font: 700 28px 'Atkinson Hyperlegible', sans-serif; }
@media (max-width: 640px) { .pdp-gallery { grid-template-columns: repeat(2, 1fr); grid-template-rows: 230px 120px; } .pdp-gallery__item.is-big { grid-column: 1 / 3; grid-row: 1; } .pdp-gallery__item:nth-child(2) { grid-column: 1; grid-row: 2; } .pdp-gallery__item:nth-child(3) { grid-column: 2; grid-row: 2; } }

/* blocs de contenu */
.pdp-block { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 28px 30px; }
.pdp-h { margin: 0 0 16px; font: 700 clamp(1.4rem, 2.2vw, 1.8rem)/1.15 'Rufina', 'Tajawal', serif; color: #fff; } .pdp-h3 { margin: 20px 0 10px; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.pdp-text { font-size: 17.5px; line-height: 1.8; color: var(--body); } .pdp-text p { margin: 0 0 1em; color: var(--body); } .pdp-text p:last-child { margin: 0; } .pdp-text strong, .pdp-text b { color: #fff; } .pdp-text ul { padding-inline-start: 1.2em; } .pdp-text li { margin-bottom: .4em; }
.pdp-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 0; }
.pdp-facts > div { padding: 16px 18px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); } .pdp-facts dt { margin: 0 0 6px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .pdp-facts dd { margin: 0; font-size: 20px; font-weight: 700; color: #fff; }
.pdp-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .pdp-tags li { padding: 8px 16px; border-radius: 40px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font-size: 15px; }
.pdp-video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 18px; overflow: hidden; cursor: pointer; background: #000; } .pdp-video img { width: 100%; height: 100%; object-fit: cover; opacity: .85; } .pdp-video--on { border: 0; }
.pdp-video__play { position: absolute; inset: 0; margin: auto; width: 78px; height: 78px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 10px rgba(228, 191, 59, .25); } .pdp-video__play::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-inline-start: 22px solid #1b1306; border-block: 14px solid transparent; transform: translateX(3px); }
.pdp-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } .pdp-review { margin: 0; padding: 22px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); } .pdp-review blockquote { margin: 0 0 14px; font-size: 16.5px; line-height: 1.65; color: var(--text); } .pdp-review figcaption strong { color: #fff; } .pdp-review figcaption span { display: block; color: var(--muted); font-size: 14px; }

/* carte de réservation collante */
.pdp-book { position: sticky; top: calc(var(--promo-h, 0px) + 100px); }
.pdp-book__card { padding: 26px; border-radius: 24px; background: linear-gradient(180deg, #1c1f2f, var(--surface)); border: 1px solid #3a3f58; box-shadow: 0 30px 70px -36px #000; }
.pdp-book__h { margin: 0 0 14px; font: 700 20px 'Rufina', 'Tajawal', serif; color: #fff; }
.pdp-tiers { list-style: none; margin: 0; padding: 0; } .pdp-tiers li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--text); } .pdp-tiers b { font-size: 20px; color: #fff; font-variant-numeric: tabular-nums; } .pdp-tiers s { color: var(--muted); font-size: 14px; font-weight: 400; margin-inline-end: 6px; }
.pdp-book__note { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); }
.pdp-promo { display: flex; gap: 12px; align-items: center; margin: 18px 0 4px; padding: 12px 14px; border-radius: 16px; background: rgba(228, 191, 59, .1); border: 1.5px dashed rgba(228, 191, 59, .6); } .pdp-promo > b { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--gold); color: #1b1306; font-size: 14px; } .pdp-promo strong { display: block; color: #fff; font-size: 14.5px; line-height: 1.3; } .pdp-promo span { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.pdp-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; margin-top: 12px; border-radius: 40px; font: 700 16px 'Atkinson Hyperlegible', 'Tajawal', sans-serif; text-decoration: none; border: 1.5px solid transparent; transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s, border-color .2s; } .pdp-btn:hover { transform: translateY(-2px); }
.pdp-btn--gold { margin-top: 18px; color: #1b1306; background: linear-gradient(135deg, #f4d03f, var(--gold) 50%, var(--gold-2)); box-shadow: 0 16px 34px -18px rgba(228, 191, 59, .9); } .pdp-btn--gold:hover { color: #1b1306; }
.pdp-btn--ghost { color: var(--text); border-color: #3c4160; background: transparent; } .pdp-btn--ghost:hover { border-color: #25d366; color: #fff; } .pdp-btn--ghost i { color: #25d366; }
.pdp-trust { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; font-size: 14px; color: var(--body); } .pdp-trust li { position: relative; padding-inline-start: 26px; } .pdp-trust li::before { content: ""; position: absolute; inset-inline-start: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.4l2.4 2.4 5.2-5.4' fill='none' stroke='%231b1306' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }

/* similaires */
.pdp-similar { margin-top: 56px; padding: 48px 0 8px; border-top: 1px solid var(--line); }
.pdp-similar__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; } .pdp-similar__head .pdp-h { margin: 0; } .pdp-link { color: var(--gold); text-decoration: none; font-weight: 700; } .pdp-link:hover { text-decoration: underline; }
.pdp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.pdp-card { display: flex; flex-direction: column; gap: 4px; padding-bottom: 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; text-decoration: none; transition: transform .45s cubic-bezier(.22, 1, .36, 1), border-color .3s; } .pdp-card:hover { transform: translateY(-6px); border-color: var(--gold); }
.pdp-card__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; display: block; background: #22263a; } .pdp-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.22, 1, .36, 1); } .pdp-card:hover .pdp-card__img img { transform: scale(1.07); } .pdp-card__img em { position: absolute; top: 10px; inset-inline-start: 10px; padding: 3px 10px; border-radius: 20px; background: var(--gold); color: #1b1306; font: 700 12px/1.3 inherit; font-style: normal; }
.pdp-card__t { padding: 12px 16px 0; font: 700 18px/1.25 'Rufina', 'Tajawal', serif; color: #fff; } .pdp-card__m { padding: 0 16px; font-size: 14px; color: var(--muted); } .pdp-card__p { padding: 2px 16px 0; font-size: 14px; color: var(--body); } .pdp-card__p b { color: var(--gold); }

/* barre mobile */
.pdp-bar { display: none; position: fixed; inset: auto 0 0 0; z-index: 9990; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: rgba(14, 15, 22, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.pdp-bar small { display: block; color: var(--muted); font-size: 12px; } .pdp-bar strong { color: var(--gold); font-size: 21px; } .pdp-bar .pdp-btn { width: auto; margin: 0; padding: 0 32px; }
@media (max-width: 980px) { .pdp-bar { display: flex; } .pdp-book { position: static; } .pdp-block { padding: 22px 18px; } .pdp-hero__in { padding-top: 120px; } }
@media (prefers-reduced-motion: reduce) { .pdp * { transition-duration: .01ms !important; } }

/* corps de fiche (sections du pack A.8) */
.pdp-text h2 { margin: 30px 0 10px; font: 700 1.35rem/1.3 'Rufina', 'Tajawal', serif; color: #fff; }
.pdp-text h3 { margin: 18px 0 6px; font-size: 1.02rem; color: #f2d25a; }
.pdp-text ul { margin: 0 0 14px; padding-inline-start: 22px; } .pdp-text li { margin-bottom: 6px; }
.pdp-text a { color: #f2d25a; text-decoration: underline; text-underline-offset: 3px; } .pdp-text a:hover { color: #fff; }
.pdp-text strong { color: #fff; }
.pdp-faq { margin-top: 24px; padding: 6px 22px 12px; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }