/* Travel2World — pages pays /destinations/<pays> (pays.js) — version du 16 octobre 2026 : « journal en ligne »
   Quatre blocs : en-tête (UNE photo, titre, 3 faits, acheter) · « Est-ce que je peux partir ? » (3 touches) ·
   l'article gratuit (début réel du guide) qui s'efface dans « Lisez la suite pour 19 € » · une rangée de vidéos.
   Sobre et professionnel : Playfair Display pour les titres, Inter pour le texte (fonts/elegant.css), colonne de
   lecture de 65 caractères, couleurs du site (theme-pro.css : --bg, --ink, --muted, --line…), mode sombre compris.
   Classes « pj- » (nouvelles) : les anciennes règles « py- » de theme-pro.css ne s'y appliquent pas.
   Mouvement : rien ne bouge sans geste ; repli « mouvement réduit » à la fin du fichier. */

/* ------------------------------------------------------------ cadre de la page */
html.py-on .gd-sticky { display: none !important; }
/* ordre fixe des blocs ajoutés autour de <main> par les autres scripts (FAQ, avis, à lire ensuite) */
html.py-on #app { display: flex; flex-direction: column; }
html.py-on #app > :not(.py-dock) { width: 100%; min-width: 0; }
html.py-on #app > header { order: 0; }
html.py-on #app > main { order: 1; }
html.py-on #app > .al-box { order: 2; }
html.py-on #app > .faq-t2w { order: 3; }
html.py-on #app > #avis { order: 5; }
html.py-on #app > .seo-next { order: 6; }
html.py-on #app > footer { order: 7; }
/* l'ancien bloc « Lire tout le guide sur une seule page » ne doit plus jamais s'afficher */
#app .gc { display: none !important; }

#app .pj-hero, #app .pj-sec {
  --pj-titre: "Playfair Display", Georgia, "Times New Roman", serif;
  --pj-texte: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pj-accent: var(--orange, #c94d23);
  --pj-gut: 16px;
  font-family: var(--pj-texte); color: var(--ink);
}
@media (min-width: 600px) { #app .pj-hero, #app .pj-sec { --pj-gut: clamp(20px, 4vw, 32px); } }
#app .pj-sec { padding: clamp(40px, 5vw, 64px) 0 0; }
#app .pj-wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--pj-gut); box-sizing: border-box; }
#app .pj-col { max-width: calc(68ch + 2 * var(--pj-gut)); }
#app .pj-i { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; }
#app :is(.pj-hero, .pj-sec) h2 { font-family: var(--pj-titre); font-weight: 700; letter-spacing: -.01em; color: var(--ink); line-height: 1.12; margin: 0; }
#app :is(.pj-hero, .pj-sec) h2:focus { outline: none; }
#app .pj-lien { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; text-decoration: underline; text-decoration-color: var(--pj-accent); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
#app .pj-fine { font-size: .8rem; line-height: 1.5; color: var(--muted); margin: 14px 0 0; }
#app .pj-fine a { color: inherit; }
#app .pj-pub { display: inline-block; font-style: normal; font-size: .66rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-strong, #d1d5db); border-radius: 4px; padding: 0 5px; line-height: 1.6; }
#app :is(.pj-hero, .pj-sec) :is(button, a, [tabindex="0"]):focus-visible { outline: 2px solid var(--pj-accent); outline-offset: 3px; border-radius: 4px; }

/* bouton d'achat : plein, une ligne « Acheter le guide · 19 € » (cart.js ajoute .in-cart) */
#app .pj-buy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; max-width: 100%; padding: 0 22px; border: 0; border-radius: 10px; background: var(--pj-accent); color: #fff; font: 600 1rem/1.2 var(--pj-texte); cursor: pointer; transition: background-color .15s ease; -webkit-tap-highlight-color: transparent; }
#app .pj-buy-in { display: none; align-items: center; gap: 6px; }
#app .pj-buy.in-cart { background: #2d7a4f; }
#app .pj-buy.in-cart .pj-buy-l { display: none; }
#app .pj-buy.in-cart .pj-buy-in { display: inline-flex; }
@media (hover: hover) and (pointer: fine) { #app .pj-buy:not(.in-cart):hover { background: var(--orange-ink, #a83b17); } }

/* ------------------------------------------------------------ 1. en-tête */
#app .pj-hero { padding: 0; }
#app .pj-hero > link { display: none; }
#app .pj-hero-in { display: grid; gap: 22px; padding-top: 0; }
#app .pj-photo { margin: 0 calc(-1 * var(--pj-gut)); position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
#app .pj-img { display: block; width: 100%; height: 100%; object-fit: cover; }
#app .pj-photo figcaption { position: absolute; left: 0; bottom: 0; max-width: 100%; box-sizing: border-box; padding: 4px 10px; font-size: .72rem; line-height: 1.4; color: #fff; background: rgba(11, 18, 32, .55); border-top-right-radius: 6px; }
#app .pj-photo figcaption a { color: inherit; }
#app .pj-kicker { margin: 0 0 10px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
#app .pj-hero h1 { margin: 0; font-family: var(--pj-titre); font-weight: 700; font-size: clamp(2.2rem, 6.2vw, 3.6rem); line-height: 1.04; letter-spacing: -.015em; color: var(--ink); }
#app .pj-hero h1 em { font-style: normal; }
#app .pj-chapo { margin: 12px 0 0; font-size: 1.08rem; line-height: 1.5; color: var(--muted); max-width: 46ch; }
#app .pj-faits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 20px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#app .pj-faits > div { padding: 12px 10px 12px 0; min-width: 0; }
#app .pj-faits > div + div { padding-left: 12px; border-left: 1px solid var(--line); }
#app .pj-faits dt { font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 0 3px; }
#app .pj-faits dd { margin: 0; }
#app .pj-faits b { display: block; font-size: 1.02rem; font-weight: 700; line-height: 1.25; }
#app .pj-faits small { display: block; margin-top: 2px; font-size: .76rem; line-height: 1.3; color: var(--muted); }
#app .pj-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 22px 0 0; }
#app .pj-cta .pj-buy { flex: 1 1 100%; }
#app .pj-cta .pj-lien { font-size: .95rem; }
@media (min-width: 600px) { #app .pj-cta .pj-buy { flex: 0 0 auto; } }
@media (min-width: 861px) {
  #app .pj-hero { padding-top: clamp(24px, 3vw, 40px); }
  #app .pj-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: clamp(28px, 4vw, 56px); }
  #app .pj-photo { order: 2; margin: 0; border-radius: 12px; }
  #app .pj-hero-txt { order: 1; }
}

/* ------------------------------------------------------------ 2. est-ce que je peux partir ? */
#app .pj-elig h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); }
#app .pj-sous { margin: 6px 0 16px; font-size: .92rem; color: var(--muted); line-height: 1.45; }
#app .pj-qs { display: grid; gap: 12px; }
#app .pj-q-t { margin: 0 0 6px; font-size: .86rem; font-weight: 600; }
#app .pj-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
#app .pj-q[aria-labelledby="py-q-passeport"] .pj-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#app .pj-opt { min-height: 44px; padding: 6px 4px; border: 1px solid var(--line-strong, #d1d5db); border-radius: 8px; background: var(--surface, #fff); color: var(--ink); font: 500 .88rem/1.2 var(--pj-texte); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-tap-highlight-color: transparent; }
#app .pj-opt[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { #app .pj-opt:not([aria-pressed="true"]):hover { border-color: var(--ink); } }
#app .pj-verdict { position: relative; overflow: hidden; margin: 16px 0 0; padding: 14px 16px; border-radius: 10px; background: var(--soft, #f6f7f9); border: 1px solid var(--line); min-height: 22px; }
#app .pj-verdict > :not(.pj-vol) { position: relative; z-index: 1; }
/* états : « oui » vert très léger, « à vérifier » ambre très léger, « non » neutre (aucune couleur criarde) */
#app .pj-verdict[data-etat="ouverte"] { background: color-mix(in srgb, #2d7a4f 7%, var(--surface, #fff)); border-color: color-mix(in srgb, #2d7a4f 32%, var(--line)); }
#app .pj-verdict[data-etat="verif"] { background: color-mix(in srgb, #b7791f 7%, var(--surface, #fff)); border-color: color-mix(in srgb, #b7791f 30%, var(--line)); }
/* coche du « oui » (se dessine au geste : pays.js, celebrer()) */
#app .pj-v-ok { flex: none; width: 28px; height: 28px; overflow: visible; }
#app .pj-v-ok-d { fill: #2d7a4f; transform-box: fill-box; transform-origin: center; }
#app .pj-v-ok-c { fill: none; stroke: #2d7a4f; stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; }
#app .pj-v-ok-p { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
/* le petit avion qui traverse la carte (ajouté puis retiré par pays.js) */
#app .pj-vol { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
#app .pj-vol > svg { position: absolute; left: 0; top: 0; overflow: visible; }
#app .pj-vol mask path { fill: none; stroke: #fff; stroke-width: 6; stroke-dasharray: 1; }
#app .pj-vol-t { fill: none; stroke: var(--pj-accent); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .55; }
#app .pj-vol-a { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; color: var(--pj-accent); will-change: transform; }
#app .pj-vol-a svg { display: block; width: 100%; height: 100%; fill: currentColor; transform: rotate(90deg); }
#app .pj-v-att { margin: 0; font-size: .9rem; color: var(--muted); }
#app .pj-v-r { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.05rem; }
#app .pj-v-r i { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; font-style: normal; font-weight: 700; font-size: .9rem; color: #fff; background: #2d7a4f; }
#app .pj-v-r.is-verif i { background: #b7791f; }
#app .pj-v-r.is-fermee i { background: #b42318; }
#app .pj-v-l { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
#app .pj-v-l li { display: flex; gap: 8px; font-size: .86rem; line-height: 1.45; color: var(--muted); }
#app .pj-v-l li i { flex: none; width: 1em; font-style: normal; font-weight: 700; color: #2d7a4f; }
#app .pj-v-l li.is-verif i { color: #b7791f; }
#app .pj-v-l li.is-non i { color: #b42318; }
#app .pj-v-s { margin: 10px 0 0; font-size: .9rem; line-height: 1.45; }
#app .pj-v-s a { color: var(--ink); font-weight: 600; text-decoration-color: var(--pj-accent); text-underline-offset: 3px; }

/* ------------------------------------------------------------ 3. l'article (mise en page de journal) */
#app .pj-art-sec { padding-top: clamp(44px, 6vw, 72px); }
#app .pj-art { padding-top: 22px; border-top: 1px solid var(--ink); }
#app .pj-rubrique { margin: 0 0 12px; font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--pj-accent); }
#app .pj-art h2 { font-size: clamp(1.8rem, 4.4vw, 2.6rem); line-height: 1.1; }
#app .pj-byline { margin: 12px 0 0; padding-bottom: 18px; border-bottom: 1px solid var(--line); font-size: .84rem; color: var(--muted); }
#app .pj-art-txt { position: relative; margin-top: 22px; font-size: 1.075rem; line-height: 1.72; color: var(--ink); }
#app .pj-art-txt > * { max-width: 65ch; }
#app .pj-art-txt p { margin: 0 0 1.05em; }
#app .pj-art-txt > p:first-child { font-size: 1.16rem; }
#app .pj-art-txt h3 { margin: 1.5em 0 .5em; font-family: var(--pj-titre); font-weight: 700; font-size: 1.28rem; line-height: 1.25; }
#app .pj-art-txt .pj-art-ch { margin-top: 1.9em; padding-top: 1.2em; border-top: 1px solid var(--line); font-size: 1.5rem; }
#app .pj-art-ch small { display: block; margin-bottom: 6px; font-family: var(--pj-texte); font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
#app .pj-art-txt :is(ul, ol) { margin: 0 0 1.05em; padding-left: 1.3em; }
#app .pj-art-txt li { margin: 0 0 .45em; padding-left: .2em; }
#app .pj-art-txt li::marker { color: var(--muted); }
#app .pj-art-txt .is-cible, #app .pj-ch.is-cible { background: color-mix(in srgb, var(--pj-accent) 14%, transparent); border-radius: 4px; transition: background-color .4s ease; }
/* la fin de l'extrait s'efface (comme un journal en ligne) : les dernières lignes pâlissent jusqu'au fond de page */
#app .pj-art-txt::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: min(10em, 55%); background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 0%, transparent) 0%, color-mix(in srgb, var(--bg) 75%, transparent) 45%, var(--bg) 82%); pointer-events: none; }

/* « Lisez la suite pour 19 € » : un bloc centré, sans cadre — cadenas sur un filet, titre, un seul bouton,
   puis le sommaire du guide (simple liste) et, en petit, le pack et l'accompagnement */
#app .pj-pw { position: relative; margin: -1.6em auto 0; max-width: 40rem; text-align: center; }
#app .pj-pw-sceau { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; color: var(--pj-accent); }
#app .pj-pw-sceau::before, #app .pj-pw-sceau::after { content: ""; flex: 1; height: 1px; background: var(--line-strong, #d1d5db); }
#app .pj-pw-sceau span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid currentColor; background: var(--bg); }
#app .pj-pw-sceau .pj-i { width: 22px; height: 22px; stroke-width: 1.8; vertical-align: 0; }
#app .pj-pw-k { margin: 0 0 10px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
#app .pj-pw h2 { font-size: clamp(2rem, 5.2vw, 2.9rem); line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; }
#app .pj-pw-prix { color: var(--pj-accent); white-space: nowrap; font-variant-numeric: lining-nums proportional-nums; }
#app .pj-pw-l { margin: 12px auto 0; max-width: 34rem; font-size: 1rem; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
#app .pj-buy-pw { margin: 24px auto 0; width: 100%; max-width: 360px; min-height: 54px; font-size: 1.05rem; border-radius: 12px; }
#app .pj-pw-sur { margin: 10px 0 0; font-size: .8rem; line-height: 1.45; color: var(--muted); }
#app .pj-pw-som { margin: 36px 0 0; padding: 22px 24px 16px; border-radius: 14px; background: var(--soft, #f6f7f9); text-align: left; }
#app .pj-pw-h3 { margin: 0 0 6px; font-weight: 700; font-size: 1.22rem; line-height: 1.25; color: var(--ink); text-align: center; }
#app .pj-chs { list-style: none; margin: 10px 0 0; padding: 0; columns: 2; column-gap: 28px; font-size: .93rem; line-height: 1.35; }
#app .pj-ch { break-inside: avoid; display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
#app .pj-ch-n { flex: none; min-width: 1.6em; font-variant-numeric: tabular-nums; color: var(--muted); font-size: .8rem; }
#app .pj-ch-t { min-width: 0; }
#app .pj-ch-lu { margin-left: auto; padding-left: 6px; flex: none; font-size: .72rem; color: var(--muted); white-space: nowrap; }
#app .pj-pw-plus { display: grid; gap: 8px; margin: 22px 0 0; }
#app .pj-pack, #app .pj-coach { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--muted); }
#app .pj-pack s { color: var(--muted); }
#app .pj-pw .pj-fine { margin-top: 16px; }

/* téléphone : tout un peu plus serré (page de 5 écrans au plus) */
@media (max-width: 599px) {
  #app .pj-sec { padding-top: 28px; }
  #app .pj-hero-in { gap: 16px; }
  #app .pj-chapo { font-size: 1rem; margin-top: 8px; }
  #app .pj-faits { margin-top: 14px; }
  #app .pj-faits > div { padding-top: 9px; padding-bottom: 9px; }
  #app .pj-cta { margin-top: 16px; gap: 10px 18px; }
  #app .pj-sous { margin-bottom: 12px; }
  #app .pj-qs { gap: 9px; }
  #app .pj-opt { min-height: 42px; font-size: .84rem; }
  #app .pj-verdict { margin-top: 12px; padding: 12px 14px; }
  #app .pj-art-sec { padding-top: 32px; }
  #app .pj-art { padding-top: 16px; }
  #app .pj-byline { padding-bottom: 14px; }
  #app .pj-art-txt { margin-top: 16px; font-size: 1.02rem; line-height: 1.64; }
  #app .pj-art-txt > p:first-child { font-size: 1.08rem; }
  #app .pj-art-txt h3 { margin-top: 1em; font-size: 1.18rem; }
  #app .pj-art-txt li { margin-bottom: .2em; line-height: 1.55; }
  #app .pj-art-txt :is(ul, ol) { margin-bottom: .8em; }
  #app .pj-photo { aspect-ratio: 16 / 10; }
  #app .pj-art-txt .pj-art-ch { margin-top: 1.4em; padding-top: .9em; font-size: 1.32rem; }
  #app .pj-pw { margin-top: -1.2em; }
  #app .pj-pw-sceau { margin-bottom: 14px; }
  #app .pj-pw-sceau span { width: 44px; height: 44px; }
  #app .pj-pw h2 { font-size: 1.95rem; }
  #app .pj-pw-l { font-size: .95rem; }
  #app .pj-buy-pw { margin-top: 20px; max-width: none; }
  #app .pj-pw-som { margin-top: 28px; padding: 18px 14px 10px; margin-left: calc(-1 * var(--pj-gut) + 8px); margin-right: calc(-1 * var(--pj-gut) + 8px); }
  #app .pj-chs { font-size: .86rem; column-gap: 16px; }
  #app .pj-ch { padding: 7px 0; gap: 7px; }
  #app .pj-ch-lu { display: none; }
  #app .pj-pw-plus { margin-top: 18px; }
  #app .pj-pack, #app .pj-coach { font-size: .88rem; }
}

/* ------------------------------------------------------------ 4. en vidéo : une rangée compacte */
#app .pj-videos { padding-bottom: clamp(36px, 5vw, 56px); }
#app .pj-h-petit { font-size: 1.35rem !important; margin-bottom: 14px !important; }
#app .pj-vids { list-style: none; margin: 0; padding: 0 0 6px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; overscroll-behavior-x: contain; }
#app .pj-vids > li { flex: none; scroll-snap-align: start; }
#app .pj-v-yt { width: min(78vw, 340px); }
#app .pj-v-tk { width: 116px; }
#app .pj-film { margin: 0; position: relative; }
#app .pj-film-box { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #1b2433; }
#app .pj-film-box img, #app .pj-film-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
#app .pj-film-play { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; border: 0; padding: 0; background: rgba(11, 18, 32, .22); cursor: pointer; }
#app .pj-film-rond { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: #0f1b2a; }
#app .pj-film-rond .pj-i { width: 22px; height: 22px; margin-left: 3px; }
#app .pj-film figcaption { display: grid; gap: 3px; margin-top: 8px; font-size: .84rem; line-height: 1.35; }
#app .pj-film figcaption span { color: var(--muted); font-size: .78rem; }
#app .pj-film figcaption a { color: inherit; }
#app .pj-consent { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 12px 14px; border-radius: 10px; background: #0b1220; color: #f1f4f8; font-size: .8rem; line-height: 1.4; }
#app .pj-consent p { margin: 0; }
#app .pj-consent a { color: inherit; }
#app .pj-btn2 { align-self: flex-start; min-height: 40px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 8px; background: transparent; color: inherit; font: 600 .85rem/1 var(--pj-texte); cursor: pointer; }
#app .pj-tk { display: block; color: var(--ink); text-decoration: none; }
#app .pj-tk img, #app .pj-tk-ph { display: block; width: 116px; aspect-ratio: 9 / 16; height: auto; object-fit: cover; border-radius: 10px; background: var(--soft, #f6f7f9); }
#app .pj-tk-ph { display: grid; place-items: center; color: var(--muted); }
#app .pj-tk-t { display: grid; gap: 2px; margin-top: 6px; font-size: .78rem; line-height: 1.3; }
#app .pj-tk-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app .pj-tk-t > span { color: var(--muted); }
#app .pj-note { margin: 14px 0 0; font-size: .86rem; line-height: 1.5; }
#app .pj-note summary { cursor: pointer; font-weight: 600; }
#app .pj-note p { margin: 8px 0 0; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { #app .pj-tk:hover b { text-decoration: underline; text-decoration-color: var(--pj-accent); } }

/* ------------------------------------------------------------ barre d'achat (téléphone) */
#app .py-dock { display: none; }
@media (max-width: 760px) {
  /* au-dessus de la barre du bas ; la place de droite reste à Globi (.globi) ; suit la barre quand elle se range */
  #app .py-dock { display: block; position: fixed; z-index: 8790; left: 12px; right: 84px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); transition: translate .32s var(--ease-out, ease), opacity .2s ease; }
  @starting-style { #app .py-dock { opacity: 0; translate: 0 14px; } }
  #app .py-dock[hidden] { display: none; }
  html.mc-range #app .py-dock { translate: 0 71px; }
  #app .py-dock-buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 50px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--orange, #c94d23); color: #fff; font: 600 .98rem/1.1 "Inter", system-ui, sans-serif; box-shadow: 0 6px 20px -6px rgba(15, 27, 42, .35); cursor: pointer; }
  #app .py-dock-buy span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #app .py-dock-buy b { flex: none; font-weight: 700; white-space: nowrap; }
  #app .py-dock-buy.in-cart { background: #2d7a4f; }
}

/* ------------------------------------------------------------ mode sombre (jetons de theme-pro.css + quelques couleurs fixes) */
html[data-theme=dark] #app :is(.pj-buy, .py-dock-buy):not(.in-cart) { color: #0b1220; }
html[data-theme=dark] #app .pj-v-l li i { color: #6fcf97; }
html[data-theme=dark] #app .pj-v-l li.is-verif i { color: #f5c35f; }
html[data-theme=dark] #app .pj-v-l li.is-non i { color: #ff8a80; }
html[data-theme=dark] #app .pj-tk-ph { background: var(--soft); }

/* ------------------------------------------------------------ mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  #app :is(.pj-buy, .py-dock, .pj-ch, .pj-art-txt *) { transition: none !important; }
}
/* 16/10 : sur telephone avec « réduire les animations », la rangée de vidéos élargissait toute la page (589 px au lieu de 390) */
#app .pj-vids { contain: paint; }