/* Plus-Heberg — design system des pages publiques (refonte octobre 2026).
   Remplace ph.css, refonte-live.css et site-pro.css sur les pages body.ph.
   Direction : noir, gris, violet. Surfaces à plat, filets fins, une seule couleur d'action. */

:root {
  --bg: #09090b;
  --bg-2: #0d0d10;
  --surface: #111114;
  --surface-2: #17171b;
  --surface-3: #1e1e23;
  --line: #222227;
  --line-2: #2e2e35;
  --text: #f4f4f5;
  --text-2: #a1a1aa;
  --text-3: #71717a;
  --accent: #7c5cff;
  --accent-hover: #8e72ff;
  --accent-text: #b4a3ff;
  --accent-soft: rgba(124, 92, 255, .12);
  --accent-line: rgba(124, 92, 255, .45);
  --ok: #34d399;
  --err: #f87171;
  --warn: #fbbf24;
  --radius: 10px;
  --radius-lg: 14px;
  --max: 1180px;
  --header-h: 64px;
  --font: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); -webkit-text-size-adjust: 100%; }
body.ph { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 400 15px/1.6 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* Règles de base à spécificité nulle (:where) pour ne jamais écraser les composants. */
:where(body.ph) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset) { margin: 0; }
:where(body.ph) :where(ul, ol) { padding: 0; list-style: none; }
:where(body.ph) :where(h1, h2, h3, h4) { font-weight: 600; line-height: 1.15; letter-spacing: -.025em; }
:where(body.ph) :where(a) { color: inherit; text-decoration: none; }
:where(body.ph) :where(img, svg) { display: block; max-width: 100%; }
:where(body.ph) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(body.ph) :where(button) { cursor: pointer; }
body.ph code { padding: 2px 6px; border: 1px solid var(--line-2); border-radius: 5px; background: var(--surface-2); font: 500 .88em var(--mono); }
body.ph [hidden] { display: none !important; }
body.ph ::selection { background: var(--accent); color: #fff; }
body.ph :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 6px; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }

.ph-container { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }
.ph-skip { position: absolute; left: 12px; top: -60px; z-index: 300; padding: 10px 14px; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 600; }
.ph-skip:focus { top: 12px; }

.ph-i { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: middle; }
.ph-i--sm { width: 15px; height: 15px; }
.ph-i--lg { width: 22px; height: 22px; }

/* ---------- Typographie ---------- */
.ph-h1 { font-size: clamp(36px, 5vw, 58px); font-weight: 600; line-height: 1.05; letter-spacing: -.04em; }
.ph-h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 600; line-height: 1.1; letter-spacing: -.035em; }
.ph-h3 { font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.ph-lead { max-width: 620px; margin-top: 14px; color: var(--text-2); font-size: 16.5px; line-height: 1.65; }
.ph-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--text-3); font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ph-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }
.ph-mono { font-family: var(--mono); }
.ph-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--accent-text); font-size: 14px; font-weight: 500; }
.ph-link:hover { color: #d2c8ff; }
.ph-link .ph-i { width: 15px; height: 15px; transition: transform .15s; }
.ph-link:hover .ph-i { transform: translateX(2px); }

/* ---------- Boutons ---------- */
.ph-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 8px; font: 500 14px/1 var(--font); letter-spacing: -.005em; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .1s; }
.ph-btn:active:not(:disabled) { transform: translateY(1px); }
.ph-btn .ph-i { width: 16px; height: 16px; transition: transform .15s; }
.ph-btn:hover .ph-i--arrow { transform: translateX(2px); }
.ph-btn--primary, .btn.primary { background: var(--accent); color: #fff; }
.ph-btn--primary:hover, .btn.primary:hover { background: var(--accent-hover); }
.ph-btn--secondary { border-color: var(--line-2); background: var(--surface); color: var(--text); }
.ph-btn--secondary:hover { border-color: #3d3d46; background: var(--surface-2); }
.ph-btn--ghost { background: transparent; color: var(--text-2); }
.ph-btn--ghost:hover { background: var(--surface-2); color: var(--text); }
.ph-btn--sm { min-height: 34px; padding: 0 12px; font-size: 13px; }
.ph-btn--lg { min-height: 46px; padding: 0 20px; font-size: 15px; }
.ph-btn--xl { min-height: 50px; padding: 0 22px; font-size: 15.5px; }
.ph-btn--block { width: 100%; }
.ph-btn:disabled, .ph-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.ph-btn.is-loading { opacity: .8; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 8px; font-weight: 500; font-size: 14px; }

/* ---------- Petits éléments ---------- */
.ph-tile { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface-2); color: var(--text); overflow: hidden; }
.ph-tile img { width: 22px; height: 22px; object-fit: contain; }
.ph-tile img.ph-tile-full { width: 100%; height: 100%; object-fit: cover; }
.ph-tile svg { width: 18px; height: 18px; }
.ph-tile--lg { width: 48px; height: 48px; border-radius: 11px; }
.ph-tile--lg img { width: 28px; height: 28px; }
.ph-tile--lg svg { width: 22px; height: 22px; }
.ph-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface-2); color: var(--text-2); font: 500 11.5px/1 var(--mono); }
.ph-tag--accent { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-text); }
.ph-dot { width: 8px; height: 8px; flex: none; display: inline-block; border-radius: 50%; background: var(--text-3); }
.ph-dot[data-state="online"] { background: var(--ok); box-shadow: 0 0 0 3px rgba(52, 211, 153, .15); }
.ph-dot[data-state="offline"] { background: var(--err); box-shadow: 0 0 0 3px rgba(248, 113, 113, .15); }
.ph-list { display: grid; gap: 9px; }
.ph-list li { display: flex; align-items: flex-start; gap: 9px; color: var(--text-2); font-size: 14px; }
.ph-list .ph-i { width: 16px; height: 16px; margin-top: 3px; color: var(--accent-text); }
.ph-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text-2); font-size: 14px; }
.ph-note .ph-i { width: 17px; height: 17px; margin-top: 2px; color: var(--text-3); }
.ph-note strong { color: var(--text); font-weight: 600; }
.ph-note--warn { border-color: rgba(251, 191, 36, .25); }
.ph-note--warn .ph-i { color: var(--warn); }
.ph-pay { display: flex; gap: 6px; flex-wrap: wrap; }
.ph-pay svg { width: 40px; height: 26px; border-radius: 5px; }

/* ---------- Sections ---------- */
.ph-section { padding: 104px 0; }
.ph-section--tight { padding: 64px 0; }
.ph-section--alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.ph-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.ph-head > div { max-width: 640px; }
.ph-head .ph-lead { margin-top: 12px; }
.ph-head .ph-link { flex: none; margin-bottom: 6px; }
.ph-head--center { flex-direction: column; align-items: flex-start; gap: 0; }

/* ---------- En-tête ---------- */
.ph-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); border-bottom: 1px solid var(--line); background: rgba(9, 9, 11, .82); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); }
.ph-nav { height: 100%; display: flex; align-items: center; gap: 28px; }
.ph-brand { flex: none; display: flex; align-items: center; }
.ph-brand img { width: 150px; height: auto; }
.ph-menu { display: flex; align-items: center; gap: 2px; }
.ph-menu > li { position: relative; }
.ph-menu-trigger, .ph-menu > li > a { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 12px; border: 0; border-radius: 7px; background: none; color: var(--text-2); font-size: 14px; font-weight: 500; transition: color .15s, background-color .15s; }
.ph-menu-trigger .ph-i { width: 14px; height: 14px; transition: transform .2s; }
.ph-menu-trigger:hover, .ph-menu > li > a:hover, .ph-menu-trigger[aria-expanded="true"] { background: var(--surface-2); color: var(--text); }
.ph-menu-trigger[aria-expanded="true"] .ph-i { transform: rotate(180deg); }
.ph-menu > li > a[aria-current="page"] { color: var(--text); }
.ph-mega { position: absolute; top: calc(100% + 10px); left: -8px; width: 360px; padding: 6px; border: 1px solid var(--line-2); border-radius: 12px; background: #121215; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; }
.ph-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.ph-mega[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.ph-mega-grid { display: grid; gap: 2px; }
.ph-mega-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 8px; transition: background-color .12s; }
.ph-mega-item:hover, .ph-mega-item:focus-visible { background: var(--surface-3); }
.ph-mega-item b { display: block; font-size: 14px; font-weight: 600; }
.ph-mega-item small { display: block; margin-top: 1px; color: var(--text-3); font-size: 12.5px; }
.ph-mega-item small strong { color: var(--text-2); font-weight: 600; }
.ph-mega-item .ph-tile { width: 36px; height: 36px; }
.ph-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ph-iconbtn { position: relative; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line-2); border-radius: 8px; background: transparent; color: var(--text-2); transition: color .15s, background-color .15s, border-color .15s; }
.ph-iconbtn:hover { background: var(--surface-2); color: var(--text); }
.ph-iconbtn .ph-i { width: 17px; height: 17px; }
.ph-badge-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font: 600 10.5px/1 var(--font); }
.ph-header .ph-btn { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.ph-burger { display: none; }

/* Tiroir mobile */
.ph-drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.ph-drawer[data-open="true"] { visibility: visible; }
.ph-drawer-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .2s; }
.ph-drawer[data-open="true"] .ph-drawer-backdrop { opacity: 1; }
.ph-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 100%); display: flex; flex-direction: column; border-left: 1px solid var(--line-2); background: var(--bg); transform: translateX(100%); transition: transform .22s ease; }
.ph-drawer[data-open="true"] .ph-drawer-panel { transform: none; }
.ph-drawer-head { height: var(--header-h); flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--line); }
.ph-drawer-head img { width: 130px; height: auto; }
.ph-drawer-body { flex: 1; overflow-y: auto; padding: 18px; }
.ph-drawer-cta { display: grid; gap: 8px; margin-bottom: 22px; }
.ph-drawer-group { display: grid; gap: 2px; margin-bottom: 20px; }
.ph-drawer-group > span { margin: 0 0 8px 10px; color: var(--text-3); font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ph-drawer-group a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; font-size: 14.5px; font-weight: 500; }
.ph-drawer-group a:hover { background: var(--surface-2); }
.ph-drawer-group a small { margin-left: auto; color: var(--text-3); font-size: 12.5px; font-weight: 400; }
.ph-drawer-group .ph-tile { width: 32px; height: 32px; }
.ph-drawer-group .ph-tile img { width: 19px; height: 19px; }
.ph-drawer-group .ph-tile img.ph-tile-full { width: 100%; height: 100%; }
.ph-drawer-group .ph-tile svg { width: 16px; height: 16px; }

/* ---------- Pied de page ---------- */
.ph-footer { border-top: 1px solid var(--line); background: var(--bg); }
.ph-footer-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 3fr); gap: 48px; padding: 64px 0 48px; }
.ph-footer-brand img { width: 140px; height: auto; }
.ph-footer-brand p { max-width: 280px; margin-top: 16px; color: var(--text-3); font-size: 13.5px; }
.ph-footer-brand .ph-status-link { margin-top: 20px; }
.ph-status-link { display: inline-flex; align-items: center; gap: 9px; height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; color: var(--text-2); font-size: 12.5px; }
.ph-status-link:hover { color: var(--text); border-color: #3d3d46; }
.ph-footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.ph-footer-cols h2 { margin-bottom: 14px; color: var(--text); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.ph-footer-cols ul { display: grid; gap: 9px; }
.ph-footer-cols a, .ph-footer-cols button { padding: 0; border: 0; background: none; color: var(--text-3); font-size: 13.5px; text-align: left; transition: color .15s; }
.ph-footer-cols a:hover, .ph-footer-cols button:hover { color: var(--text); }
.ph-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 22px 0 28px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 12.5px; }
.ph-footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.ph-footer-legal nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ph-footer-legal a, .ph-footer-legal button { padding: 0; border: 0; background: none; color: var(--text-3); font-size: 12.5px; }
.ph-footer-legal a:hover, .ph-footer-legal button:hover { color: var(--text); }
.ph-footer-note { width: 100%; color: #5d5d66; font-size: 12px; line-height: 1.6; }

/* ---------- Accueil ---------- */
.ph-hero { position: relative; padding: 88px 0 0; border-bottom: 1px solid var(--line); overflow: hidden; }
.ph-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(80% 70% at 70% 0%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(80% 70% at 70% 0%, #000 0%, transparent 70%); opacity: .55; }
.ph-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: center; }
.ph-hero h1 { max-width: 13ch; }
.ph-hero .ph-lead { max-width: 540px; margin-top: 20px; font-size: 17px; }
.ph-hero-badge { display: inline-flex; align-items: center; gap: 10px; height: 30px; margin-bottom: 26px; padding: 0 12px 0 6px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: 13px; }
.ph-hero-badge b { height: 20px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font: 600 11px var(--mono); }
.ph-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 32px; }
.ph-checks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; color: var(--text-2); font-size: 13.5px; }
.ph-checks li { display: inline-flex; align-items: center; gap: 7px; }
.ph-checks .ph-i { width: 15px; height: 15px; color: var(--ok); }

.ph-picker { border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); overflow: hidden; }
.ph-picker-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--text-3); font: 500 12px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.ph-picker-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 16px; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); transition: background-color .12s; }
.ph-picker-row:last-of-type { border-bottom: 0; }
.ph-picker-row:hover { background: var(--surface-2); }
.ph-picker-row b { display: block; font-size: 15px; font-weight: 600; }
.ph-picker-row small { display: block; color: var(--text-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-picker-price { font: 500 14px var(--mono); white-space: nowrap; }
.ph-picker-price span { color: var(--text-3); font-size: 12px; }
.ph-picker-row > .ph-i { width: 16px; height: 16px; color: var(--text-3); transition: transform .15s, color .15s; }
.ph-picker-row:hover > .ph-i { color: var(--text); transform: translateX(2px); }
.ph-picker-foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--bg-2); color: var(--text-3); font-size: 12.5px; }
.ph-picker-foot .ph-i { width: 14px; height: 14px; }

.ph-specbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 88px; border-top: 1px solid var(--line); }
.ph-specbar > div { padding: 24px 24px 26px; border-left: 1px solid var(--line); }
.ph-specbar > div:first-child { padding-left: 0; border-left: 0; }
.ph-specbar small { display: block; color: var(--text-3); font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ph-specbar b { display: block; margin-top: 8px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.ph-specbar span { display: block; margin-top: 2px; color: var(--text-3); font-size: 13px; }

/* Tarifs à onglets */
.ph-pricing-tabs { display: inline-flex; gap: 4px; margin-bottom: 20px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.ph-pricing-tabs button { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 0; border-radius: 7px; background: none; color: var(--text-2); font-size: 14px; font-weight: 500; transition: background-color .15s, color .15s; }
.ph-pricing-tabs button:hover { color: var(--text); }
.ph-pricing-tabs button[aria-selected="true"] { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.ph-pricing-tabs img { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; }
.ph-pricing-tabs .ph-i { width: 16px; height: 16px; }
.ph-ptable { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.ph-ptable-row { display: grid; grid-template-columns: minmax(150px, 1.3fr) repeat(3, minmax(80px, .7fr)) minmax(110px, .8fr) 150px; align-items: center; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--line); }
.ph-ptable-row:first-child { border-top: 0; }
.ph-ptable-row--head { padding-block: 12px; background: var(--bg-2); color: var(--text-3); font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ph-ptable-row b { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.ph-ptable-row small { display: block; margin-top: 2px; color: var(--text-3); font-size: 12.5px; }
.ph-ptable-row .ph-cell { color: var(--text-2); font: 400 13.5px var(--mono); }
.ph-ptable-row .ph-cell-price { font: 500 16px var(--mono); white-space: nowrap; }
.ph-ptable-row .ph-cell-price span { color: var(--text-3); font-size: 12px; }
.ph-ptable-row--rec { background: linear-gradient(90deg, var(--accent-soft), transparent 60%); }
.ph-ptable-row .ph-btn { width: 100%; }
.ph-pricing-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 18px; color: var(--text-3); font-size: 13.5px; }
.ph-pricing-foot div { display: flex; flex-wrap: wrap; gap: 8px 22px; }

.ph-callout { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-top: 16px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); transition: border-color .15s, background-color .15s; }
.ph-callout:hover { border-color: var(--line-2); background: var(--surface); }
.ph-callout b { display: block; font-size: 14.5px; font-weight: 600; }
.ph-callout small { display: block; margin-top: 2px; color: var(--text-3); font-size: 13.5px; }

/* Grille à filets */
.ph-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--line); overflow: hidden; }
.ph-bento > * { padding: 28px; background: var(--bg); }
.ph-section--alt .ph-bento > * { background: var(--bg-2); }
.ph-bento .ph-i { width: 20px; height: 20px; color: var(--accent-text); }
.ph-bento h3 { margin-top: 18px; font-size: 16px; font-weight: 600; }
.ph-bento p { margin-top: 8px; color: var(--text-2); font-size: 14px; line-height: 1.6; }
.ph-bento p a { color: var(--accent-text); }
.ph-bento-meta { display: block; margin-top: 14px; color: var(--text-3); font: 500 12px var(--mono); }

/* Étapes */
.ph-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: step; border-top: 1px solid var(--line); }
.ph-steps li { position: relative; padding: 28px 28px 0 0; counter-increment: step; }
.ph-steps li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.ph-steps li::before { content: "0" counter(step); display: block; margin-bottom: 18px; color: var(--accent-text); font: 500 13px var(--mono); }
.ph-steps h3 { font-size: 17px; }
.ph-steps p { margin-top: 8px; color: var(--text-2); font-size: 14px; }

/* FAQ */
.ph-faq-wrap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: 64px; align-items: start; }
.ph-faq-wrap .ph-head { position: sticky; top: calc(var(--header-h) + 32px); flex-direction: column; align-items: flex-start; margin: 0; }
.ph-faq-wrap .ph-head p + p { margin-top: 18px; }
.ph-faq { max-width: 860px; border-top: 1px solid var(--line); }
.ph-faq details { border-bottom: 1px solid var(--line); }
.ph-faq summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 36px 20px 0; list-style: none; cursor: pointer; font-size: 15.5px; font-weight: 500; transition: color .15s; }
.ph-faq summary::-webkit-details-marker { display: none; }
.ph-faq summary > .ph-i { display: none; }
.ph-faq summary::before, .ph-faq summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 12px; height: 1.5px; border-radius: 1px; background: var(--text-3); transition: transform .2s, background-color .15s; }
.ph-faq summary::after { transform: rotate(90deg); }
.ph-faq details[open] summary::after { transform: rotate(0deg); }
.ph-faq summary:hover { color: #fff; }
.ph-faq summary:hover::before, .ph-faq summary:hover::after, .ph-faq details[open] summary::before { background: var(--text); }
.ph-faq details > div { max-width: 680px; padding: 0 36px 22px 0; color: var(--text-2); font-size: 14.5px; line-height: 1.7; }
.ph-faq details a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.ph-faq-group { margin-top: 48px; }
.ph-faq-group:first-child { margin-top: 0; }
.ph-faq-group > h2 { margin-bottom: 12px; color: var(--text-3); font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* ---------- En-tête de page ---------- */
.ph-pagehead { position: relative; padding: 48px 0 64px; border-bottom: 1px solid var(--line); overflow: hidden; }
.ph-pagehead::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(70% 90% at 85% 0%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(70% 90% at 85% 0%, #000 0%, transparent 70%); opacity: .4; }
.ph-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 40px; color: var(--text-3); font-size: 13px; }
.ph-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.ph-crumbs li + li::before { content: "/"; color: #45454d; }
.ph-crumbs a:hover { color: var(--text); }
.ph-crumbs [aria-current] { color: var(--text-2); }
.ph-pagehead-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: end; }
.ph-pagehead-grid:has(> div:only-child) { grid-template-columns: 1fr; }
.ph-pagehead .ph-h1 { font-size: clamp(34px, 4.4vw, 52px); max-width: 18ch; }
.ph-pagehead + .ph-section:not(.ph-section--tight) { padding-top: 72px; }
.ph-pagehead-title { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ph-pagehead-title > span { display: flex; gap: 8px; }
.ph-facts { display: flex; flex-wrap: wrap; gap: 0; margin-top: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); width: fit-content; max-width: 100%; }
.ph-facts > div { padding: 12px 18px; border-left: 1px solid var(--line); }
.ph-facts > div:first-child { border-left: 0; }
.ph-facts small { display: block; color: var(--text-3); font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ph-facts b { display: block; margin-top: 3px; font-size: 14.5px; font-weight: 600; }
.ph-pagehead .ph-hero-actions { margin-top: 26px; }
.ph-buy { min-width: 280px; padding: 22px; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--surface); }
.ph-buy > small { color: var(--text-3); font-size: 12.5px; }
.ph-buy-price { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 16px; }
.ph-buy-price strong { font: 600 30px var(--mono); letter-spacing: -.03em; }
.ph-buy-price em { color: var(--text-3); font-style: normal; font-size: 13px; }
.ph-buy .ph-list { margin-bottom: 18px; }

/* ---------- Formules (générées par site-v2.js) ---------- */
.ph-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ph-plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ph-plan { position: relative; display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); transition: border-color .15s, background-color .3s; }
.ph-plan:hover { border-color: var(--line-2); }
.ph-plan--rec { border-color: var(--accent-line); background: linear-gradient(180deg, rgba(124, 92, 255, .08), var(--surface) 45%); }
.ph-plan--match { box-shadow: 0 0 0 1px var(--accent); }
.ph-plan--flash { background: #1b1730; }
.ph-plan-badge { position: absolute; top: -10px; left: 20px; height: 20px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 6px; background: var(--accent); color: #fff; font: 600 11px var(--mono); }
.ph-plan h3 { font-size: 16px; font-weight: 600; }
.ph-plan-usage { min-height: 40px; margin-top: 4px; color: var(--text-3); font-size: 13px; line-height: 1.5; }
.ph-plan-price { display: flex; align-items: baseline; gap: 5px; margin-top: 18px; }
.ph-plan-price strong { font: 600 30px var(--mono); letter-spacing: -.04em; }
.ph-plan-price small { color: var(--text-3); font-size: 13px; }
.ph-plan-terms { margin: 2px 0 18px; color: var(--text-3); font-size: 12.5px; }
.ph-plan-specs { display: grid; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.ph-plan-specs li { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 13px; }
.ph-plan-specs .ph-i { width: 15px; height: 15px; color: var(--text-3); }
.ph-plan-specs b { color: var(--text); font-weight: 600; font-family: var(--mono); font-size: 12.5px; }

/* Aide au choix */
.ph-finder-toggle { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.ph-finder-toggle > summary { display: flex; align-items: center; gap: 12px; padding: 16px 20px; list-style: none; cursor: pointer; font-size: 14.5px; font-weight: 500; }
.ph-finder-toggle > summary::-webkit-details-marker { display: none; }
.ph-finder-toggle > summary .ph-i { color: var(--accent-text); }
.ph-finder-toggle > summary span { color: var(--text-3); font-weight: 400; }
.ph-finder-toggle > summary::after { content: ""; width: 7px; height: 7px; margin-left: auto; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.ph-finder-toggle[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.ph-finder-toggle[open] > summary { border-bottom: 1px solid var(--line); }
.ph-finder-toggle .ph-finder { border: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.ph-finder { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.ph-finder-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.ph-finder-tabs button { display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; border: 0; border-left: 1px solid var(--line); background: none; color: var(--text-2); font-size: 14px; font-weight: 500; transition: background-color .15s, color .15s; }
.ph-finder-tabs button:first-child { border-left: 0; }
.ph-finder-tabs button:hover { color: var(--text); background: var(--surface-2); }
.ph-finder-tabs button[aria-selected="true"] { color: var(--text); background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--accent); }
.ph-finder-tabs .ph-tile { width: 26px; height: 26px; border-radius: 6px; }
.ph-finder-tabs .ph-tile img { width: 16px; height: 16px; }
.ph-finder-tabs .ph-tile img.ph-tile-full { width: 100%; height: 100%; }
.ph-finder-tabs .ph-tile svg { width: 14px; height: 14px; }
.ph-finder-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.ph-finder-questions { display: grid; gap: 22px; align-content: start; padding: 24px; }
.ph-finder-title { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ph-finder-title .ph-i { color: var(--accent-text); }
.ph-q { min-width: 0; padding: 0; border: 0; }
.ph-q legend { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 0; font-size: 14px; font-weight: 600; }
.ph-q legend span { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 5px; color: var(--text-3); font: 500 11px var(--mono); }
.ph-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-seg label { position: relative; }
.ph-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ph-seg span { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; color: var(--text-2); font-size: 13px; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s; }
.ph-seg span:hover { border-color: #3d3d46; color: var(--text); }
.ph-seg input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.ph-seg input:focus-visible + span { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.ph-switch { display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 13.5px; cursor: pointer; }
.ph-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ph-switch-ui { position: relative; width: 34px; height: 20px; flex: none; border-radius: 10px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color .15s; }
.ph-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-2); transition: transform .15s, background-color .15s; }
.ph-switch input:checked + .ph-switch-ui { background: var(--accent); box-shadow: none; }
.ph-switch input:checked + .ph-switch-ui::after { transform: translateX(14px); background: #fff; }
.ph-switch input:focus-visible + .ph-switch-ui { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.ph-finder-result { display: flex; align-items: stretch; padding: 24px; border-left: 1px solid var(--line); background: var(--bg-2); }
.ph-finder-result > div { width: 100%; }
.ph-finder-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--text-3); font-size: 13.5px; }
.ph-finder-empty strong { color: var(--text); font-size: 15px; }
.ph-finder-empty .ph-i { color: var(--text-3); }
.ph-finder-pick > small { color: var(--text-3); font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ph-finder-name { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 6px; }
.ph-finder-name strong { font-size: 22px; letter-spacing: -.02em; }
.ph-finder-name span { color: var(--text-3); font-size: 13px; }
.ph-finder-name b { color: var(--text); font: 600 17px var(--mono); }
.ph-finder-needs { margin-top: 6px; color: var(--text-3); font-size: 13px; }
.ph-finder-specs { display: grid; gap: 8px; margin: 18px 0 20px; padding: 14px 0; border-block: 1px solid var(--line); }
.ph-finder-specs li { display: flex; align-items: center; gap: 10px; color: var(--text-2); font: 400 13px var(--mono); }
.ph-finder-specs .ph-i { width: 15px; height: 15px; color: var(--text-3); }
.ph-finder-actions { display: grid; gap: 12px; justify-items: center; }

/* Inclus + paiement */
.ph-included { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--line); overflow: hidden; }
.ph-included > div { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--bg); }
.ph-included .ph-i { width: 18px; height: 18px; color: var(--accent-text); }
.ph-included b { display: block; font-size: 13.5px; font-weight: 600; }
.ph-included small { display: block; color: var(--text-3); font-size: 12.5px; }
.ph-trustpay { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ph-trustpay-main { display: flex; align-items: center; gap: 12px; }
.ph-trustpay-main .ph-tile { width: 34px; height: 34px; }
.ph-trustpay b { display: block; font-size: 14px; }
.ph-trustpay small { display: block; color: var(--text-3); font-size: 12.5px; }

/* ---------- Dialogues ---------- */
.ph-dialog, .games-review { width: min(460px, calc(100% - 32px)); padding: 0; border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: 0 40px 100px rgba(0, 0, 0, .7); }
.ph-dialog::backdrop, .games-review::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(3px); }
.ph-dialog form, .games-review form { position: relative; display: grid; gap: 14px; padding: 26px; }
.ph-dialog [data-dialog-close] { position: absolute; top: 14px; right: 14px; }
.ph-dialog-eyebrow { color: var(--text-3); font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ph-dialog h2, .games-review h2 { font-size: 21px; }
.ph-dialog p, .games-review p { color: var(--text-2); font-size: 14px; }
.ph-field, .games-review label { display: grid; gap: 7px; color: var(--text-2); font-size: 13px; font-weight: 500; }
body.ph select, body.ph textarea, .ph-input, body.ph input:not([type]), body.ph input[type="text"], body.ph input[type="search"], body.ph input[type="email"], body.ph input[type="password"], body.ph input[type="number"], body.ph input[type="datetime-local"], body.ph input[type="date"] { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 14px; transition: border-color .15s; }
body.ph textarea { padding: 10px 12px; resize: vertical; }
body.ph select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2371717a' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
body.ph select:focus, body.ph textarea:focus, .ph-input:focus, body.ph input:not([type]):focus, body.ph input[type="text"]:focus, body.ph input[type="search"]:focus, body.ph input[type="email"]:focus, body.ph input[type="password"]:focus, body.ph input[type="number"]:focus, body.ph input[type="datetime-local"]:focus, body.ph input[type="date"]:focus { outline: none; border-color: var(--accent); }
body.ph input[type="checkbox"], body.ph input[type="radio"] { accent-color: var(--accent); }
.ph-dialog-summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-2); color: var(--text-3); font-size: 13px; }
.ph-dialog-summary strong { color: var(--text); }
.ph-dialog-error, .games-error { min-height: 1em; color: var(--err) !important; font-size: 13px !important; }
.games-review-actions { display: flex; gap: 8px; }

/* ---------- Livechat ---------- */
.ph-chat { position: fixed; right: 20px; bottom: 20px; z-index: 150; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.ph-chat-launcher { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 13.5px; font-weight: 500; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); transition: background-color .15s; }
.ph-chat-launcher:hover { background: var(--surface-3); }
.ph-chat-launcher .ph-i { width: 16px; height: 16px; color: var(--accent-text); }
.ph-chat-panel { width: min(370px, calc(100vw - 32px)); height: min(520px, calc(100vh - 120px)); display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); overflow: hidden; }
.ph-chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ph-chat-head img { width: 34px; height: 34px; border-radius: 9px; }
.ph-chat-head strong { display: block; font-size: 14px; }
.ph-chat-head small { display: flex; align-items: center; gap: 7px; color: var(--text-3); font-size: 12px; }
.ph-chat-head .ph-iconbtn { margin-left: auto; width: 32px; height: 32px; }
.ph-chat-messages { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px; overflow-y: auto; }
.chat-empty { margin: auto; color: var(--text-3); font-size: 13.5px; text-align: center; }
.chat-bubble { max-width: 85%; padding: 10px 12px; border-radius: 12px; background: var(--surface-3); font-size: 14px; }
.chat-bubble small { display: block; margin-bottom: 3px; color: var(--text-3); font-size: 11.5px; }
.chat-bubble.from-client { align-self: flex-end; background: var(--accent); color: #fff; }
.chat-bubble.from-client small { color: rgba(255, 255, 255, .7); }
.chat-login-required { margin: auto; display: grid; gap: 10px; justify-items: center; text-align: center; }
.chat-login-required p { color: var(--text-2); font-size: 13.5px; }
.chat-login-required .btn { background: var(--accent); color: #fff; }
.ph-chat form { padding: 12px; border-top: 1px solid var(--line); }
.ph-chat-compose { display: flex; gap: 8px; align-items: flex-end; }
.ph-chat-compose textarea { min-height: 42px; max-height: 120px; }
.ph-chat [data-chat-error] { color: var(--err); font-size: 12.5px; }

/* ---------- Bandeau cookies ---------- */
.ph-cookie { position: fixed; left: 20px; bottom: 20px; z-index: 160; width: min(400px, calc(100% - 40px)); display: grid; gap: 10px; padding: 18px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.ph-cookie strong { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ph-cookie strong .ph-i { width: 16px; height: 16px; color: var(--text-3); }
.ph-cookie p { color: var(--text-2); font-size: 13px; }
.ph-cookie p a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.ph-cookie-actions { display: flex; gap: 8px; }
.ph-cookie-actions .ph-btn { flex: 1; min-height: 36px; font-size: 13px; }

/* ---------- Panier ---------- */
.ph-progress-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; counter-reset: stp; }
.ph-progress-steps li { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 13px; counter-increment: stp; }
.ph-progress-steps li::before { content: counter(stp); width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 6px; font: 500 11px var(--mono); }
.ph-progress-steps li + li::after { content: none; }
.ph-progress-steps li:not(:last-child) { padding-right: 8px; }
.ph-progress-steps li:not(:last-child)::after { content: ""; width: 28px; height: 1px; margin-left: 8px; background: var(--line-2); }
.ph-progress-steps li[aria-current] { color: var(--text); }
.ph-progress-steps li[aria-current]::before { border-color: var(--accent); background: var(--accent); color: #fff; }
.ph-checkout-head { margin-bottom: 28px; }
.ph-checkout-head p { margin-top: 8px; color: var(--text-2); }
.ph-cart { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.ph-cart-items { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.cart-item { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; border-top: 1px solid var(--line); }
.cart-item:first-child { border-top: 0; }
.cart-item small { color: var(--text-3); font: 500 11px var(--mono); letter-spacing: .06em; }
.cart-item h3 { margin-top: 4px; font-size: 16px; }
.cart-item p { margin-top: 4px; color: var(--text-2); font-size: 13.5px; }
.cart-item-side { display: grid; justify-items: end; gap: 6px; flex: none; }
.cart-item-side strong { font: 600 15px var(--mono); }
.cart-item-side button { padding: 0; border: 0; background: none; color: var(--text-3); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.cart-item-side button:hover { color: var(--err); }
.cart-original-price { color: var(--text-3) !important; text-decoration: line-through; letter-spacing: 0 !important; }
.cart-empty { display: grid; justify-items: center; gap: 8px; padding: 56px 24px; text-align: center; }
.cart-empty strong { font-size: 17px; }
.cart-empty p { color: var(--text-2); font-size: 14px; }
.cart-empty .btn { margin-top: 10px; }
.ph-cart-summary { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 0; padding: 22px; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--surface); }
.ph-cart-summary h2 { margin-bottom: 12px; font-size: 17px; }
.ph-sumline { display: flex; justify-content: space-between; padding: 9px 0; color: var(--text-2); font-size: 14px; }
.ph-sumline strong { color: var(--text); font-weight: 500; }
.ph-sumline--promo strong { color: var(--ok); }
.ph-sumtotal { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 8px 0 18px; padding-top: 16px; border-top: 1px solid var(--line); font-weight: 600; }
.ph-sumtotal small { display: block; margin-top: 2px; color: var(--text-3); font-size: 11.5px; font-weight: 400; }
.ph-sumtotal strong { font: 600 24px var(--mono); letter-spacing: -.03em; }
.ph-promo { display: grid; gap: 8px; margin-bottom: 18px; }
.ph-promo label { color: var(--text-2); font-size: 13px; font-weight: 500; }
.ph-promo > div { display: flex; gap: 6px; }
.ph-promo .ph-btn { min-height: 42px; }
.ph-promo p { color: var(--text-3); font-size: 12.5px; }
.ph-promo p:empty { display: none; }
.ph-promo p.success { color: var(--ok); }
.ph-paymethods { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; }
.ph-paymethods legend { margin-bottom: 8px; padding: 0; color: var(--text-2); font-size: 13px; font-weight: 500; }
.payment-method { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line-2); border-radius: 10px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.payment-method input { position: absolute; opacity: 0; pointer-events: none; }
.payment-method .ph-tile { width: 34px; height: 34px; }
.payment-method strong { display: block; font-size: 14px; font-weight: 600; }
.payment-method small { display: block; color: var(--text-3); font-size: 12.5px; }
.payment-method b { margin-left: auto; font: 500 13px var(--mono); }
.payment-method.selected { border-color: var(--accent); background: var(--accent-soft); }
.payment-method.disabled { opacity: .5; cursor: not-allowed; }
.ph-consent { display: grid; gap: 12px; margin: 0 0 16px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: var(--text-2); font-size: 12.5px; line-height: 1.6; }
.ph-consent legend { padding: 0 6px; color: var(--text); font-size: 13px; font-weight: 600; }
.ph-consent label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.ph-consent input { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.ph-consent a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.checkout-message { min-height: 0; margin-top: 10px; color: var(--text-2); font-size: 13px; }
.checkout-message:empty { display: none; }
.checkout-message a { color: var(--accent-text); }
.ph-secure { display: flex; gap: 10px; margin: 16px 0 14px; color: var(--text-3); font-size: 12.5px; }
.ph-secure .ph-i { width: 16px; height: 16px; margin-top: 2px; }
.ph-cart-back { margin-top: 16px; }
.ph-cart .ph-included { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- Statut ---------- */
.st-banner { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--surface); }
.st-banner-icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--surface-3); color: var(--text-3); }
.st-banner-icon .ph-i { width: 22px; height: 22px; }
.st-banner h2 { font-size: 19px; letter-spacing: -.02em; }
.st-banner p { margin-top: 3px; color: var(--text-3); font-size: 13px; }
.st-banner .ph-btn { margin-left: auto; }
[data-overall="online"] .st-banner { border-color: rgba(52, 211, 153, .3); background: linear-gradient(90deg, rgba(52, 211, 153, .07), var(--surface) 50%); }
[data-overall="online"] .st-banner-icon { background: rgba(52, 211, 153, .12); color: var(--ok); }
[data-overall="offline"] .st-banner, [data-overall="degraded"] .st-banner { border-color: rgba(248, 113, 113, .3); background: linear-gradient(90deg, rgba(248, 113, 113, .07), var(--surface) 50%); }
[data-overall="offline"] .st-banner-icon, [data-overall="degraded"] .st-banner-icon { background: rgba(248, 113, 113, .12); color: var(--err); }
.st-list { margin-top: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.st-node { border-top: 1px solid var(--line); }
.st-node:first-child { border-top: 0; }
.st-node-main { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 24px; padding: 18px 22px; }
.st-node h3 { font-size: 15px; font-weight: 600; }
.st-node-main small { display: block; margin-top: 2px; color: var(--text-3); font: 400 12.5px var(--mono); }
.st-latency { color: var(--text-2); font: 400 13px var(--mono); }
.st-state { display: inline-flex; align-items: center; gap: 8px; min-width: 128px; justify-content: flex-end; font-size: 13px; font-weight: 500; }
.st-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
[data-state="online"] .st-state { color: var(--ok); }
[data-state="online"] .st-state::before { background: var(--ok); box-shadow: 0 0 0 3px rgba(52, 211, 153, .15); }
[data-state="offline"] .st-state { color: var(--err); }
[data-state="offline"] .st-state::before { background: var(--err); box-shadow: 0 0 0 3px rgba(248, 113, 113, .15); }
.st-checks { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 22px 18px; }
.st-check { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-2); color: var(--text-2); font: 400 12px var(--mono); }
.st-check::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.st-check[data-ok="true"]::before { background: var(--ok); }
.st-check[data-ok="false"]::before { background: var(--err); }
.st-message { padding: 0 22px 18px; color: var(--text-3); font-size: 13px; }
.st-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--line); overflow: hidden; }
.st-meta > div { padding: 18px 20px; background: var(--bg); }
.st-meta small { display: block; color: var(--text-3); font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.st-meta b { display: block; margin-top: 6px; font-size: 14px; font-weight: 500; }
.st-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 24px; color: var(--text-3); font-size: 13.5px; }

/* ---------- Contenus ---------- */
.ph-rows { border-top: 1px solid var(--line); }
.ph-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
a.ph-row:hover h2, a.ph-row:hover h3 { color: var(--accent-text); }
.ph-row .ph-tile { width: 44px; height: 44px; }
.ph-row h2, .ph-row h3 { font-size: 16.5px; font-weight: 600; transition: color .15s; }
.ph-row p { margin-top: 4px; color: var(--text-2); font-size: 14px; }
.ph-row-meta { display: block; margin-bottom: 4px; color: var(--text-3); font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ph-row > .ph-i { color: var(--text-3); }
.ph-row-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ph-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 64px; align-items: start; }
.ph-split-aside { position: sticky; top: calc(var(--header-h) + 32px); }
.ph-split-aside p { margin-top: 12px; color: var(--text-2); font-size: 14.5px; }

.ph-article { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; }
.ph-toc { position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: 2px; padding-left: 14px; border-left: 1px solid var(--line); }
.ph-toc strong { margin-bottom: 8px; color: var(--text-3); font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ph-toc a { padding: 5px 0; color: var(--text-2); font-size: 13.5px; }
.ph-toc a:hover { color: var(--text); }
.ph-prose { max-width: 740px; color: var(--text-2); font-size: 15.5px; line-height: 1.75; }
.ph-prose > * + * { margin-top: 16px; }
.ph-prose h2 { margin-top: 44px; color: var(--text); font-size: 21px; letter-spacing: -.02em; scroll-margin-top: calc(var(--header-h) + 24px); }
.ph-prose h2:first-child, .ph-legal-date + h2 { margin-top: 0; }
.ph-prose h3 { margin-top: 28px; color: var(--text); font-size: 16.5px; }
.ph-prose a:not(.ph-link) { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.ph-prose strong { color: var(--text); font-weight: 600; }
.ph-prose ul, .ph-prose ol { display: grid; gap: 8px; padding-left: 20px; }
.ph-prose ul { list-style: disc; }
.ph-prose ol { list-style: decimal; }
.ph-prose li::marker { color: var(--text-3); }
.ph-prose blockquote { padding: 14px 18px; border-left: 2px solid var(--accent); background: var(--surface); color: var(--text-2); }
.ph-legal-date { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 32px; padding: 0 12px; height: 32px; border: 1px solid var(--line); border-radius: 8px; color: var(--text-3); font: 400 12.5px var(--mono); }
.ph-legal-date .ph-i { width: 14px; height: 14px; }
.code-block { padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 10px; background: #0b0b0e; color: #e4e4e7; font: 400 13.5px/1.6 var(--mono); white-space: pre-wrap; overflow-x: auto; }
.notice { padding: 14px 16px; border: 1px solid rgba(251, 191, 36, .25); border-radius: 10px; background: rgba(251, 191, 36, .05); color: var(--text-2); font-size: 14px; }
.source-link { margin-top: 28px !important; }
.ph-cookie-table { display: grid; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ph-cookie-table > div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 14px; }
.ph-cookie-table > div:first-child { border-top: 0; }
.ph-cookie-table code { justify-self: start; }

/* Résultat de paiement / erreur */
.ph-result { max-width: 560px; margin: 0 auto; text-align: center; }
.ph-result-icon { width: 56px; height: 56px; display: grid; place-items: center; margin: 0 auto 24px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); color: var(--text-3); }
.ph-result-icon .ph-i { width: 24px; height: 24px; }
.ph-result .ph-i--ok, .ph-result .ph-i--err { display: none; }
.ph-result[data-state="paid"] .ph-i--wait, .ph-result[data-state="error"] .ph-i--wait { display: none; }
.ph-result[data-state="paid"] .ph-i--ok { display: block; }
.ph-result[data-state="paid"] .ph-result-icon { border-color: rgba(52, 211, 153, .3); color: var(--ok); }
.ph-result[data-state="error"] .ph-i--err { display: block; }
.ph-result[data-state="error"] .ph-result-icon { border-color: rgba(248, 113, 113, .3); color: var(--err); }
.ph-result h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.035em; }
.ph-result > p { margin-top: 12px; color: var(--text-2); }
.ph-result dl { display: grid; grid-template-columns: 1fr 1fr; margin-top: 24px; border: 1px solid var(--line); border-radius: 10px; text-align: left; }
.ph-result dl div { padding: 12px 16px; }
.ph-result dl div + div { border-left: 1px solid var(--line); }
.ph-result dt { color: var(--text-3); font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ph-result dd { margin-top: 4px; font: 500 14px var(--mono); }
.ph-result .ph-hero-actions { justify-content: center; }
.ph-error { padding: 120px 0; text-align: center; }
.ph-error-code { color: var(--text-3); font: 500 14px var(--mono); letter-spacing: .1em; }
.ph-error h1 { margin-top: 16px; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.035em; }
.ph-error p { max-width: 460px; margin: 12px auto 0; color: var(--text-2); }
.ph-error .ph-hero-actions { justify-content: center; }

/* Autres jeux */
.games-picker { display: grid; gap: 16px; margin-bottom: 28px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.games-picker .ph-h2 { font-size: 22px; }
.games-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.games-fields label { display: grid; gap: 7px; color: var(--text-2); font-size: 13px; font-weight: 500; }
.games-count { color: var(--text-3); font: 400 12.5px var(--mono); }
.games-selection { font-size: 17px; font-weight: 600; }
.games-selection:empty { display: none; }
.games-delivery { color: var(--text-2); font-size: 14px; }
section.games-delivery { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
section.games-delivery h3 { color: var(--text); font-size: 15px; }
section.games-delivery h4 { color: var(--text); font-size: 14px; }
section.games-delivery a { color: var(--accent-text); text-decoration: underline; }
.games-message:empty { display: none; }
.games-picker > .ph-btn { justify-self: start; }

/* Essai gratuit */
.trial-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.trial-card { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.trial-card h2 { font-size: 22px; }
.trial-intro { margin-top: 8px; color: var(--text-2); font-size: 14px; }
.trial-card form { display: grid; gap: 16px; margin-top: 22px; }
.trial-card form > label, .trial-fields label, [data-other-fields] label { display: grid; gap: 7px; color: var(--text-2); font-size: 13px; font-weight: 500; }
.trial-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trial-help { margin-top: 8px; color: var(--text-3); font-size: 12.5px; }
.trial-check { display: flex !important; gap: 10px; align-items: flex-start; color: var(--text-2); font-size: 13px !important; font-weight: 400 !important; line-height: 1.6; }
.trial-check input { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.trial-check a { color: var(--text); text-decoration: underline; }
.trial-card form .ph-btn { justify-self: start; }
.trial-message { color: var(--text-2); font-size: 13.5px; }
.trial-message:empty { display: none; }
.trial-message.error { color: var(--err); }
.trial-side { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.trial-side h2 { font-size: 17px; }
.trial-side ol { display: grid; gap: 16px; margin-top: 18px; counter-reset: t; }
.trial-side li { position: relative; padding-left: 36px; color: var(--text-2); font-size: 14px; counter-increment: t; }
.trial-side li::before { content: counter(t); position: absolute; left: 0; top: 0; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 6px; color: var(--text-3); font: 500 11.5px var(--mono); }
.trial-side li strong { display: block; color: var(--text); font-weight: 600; }
.trial-side > p { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 13.5px; }
.trial-side a { color: var(--accent-text); }
.trial-status [data-trial-state] { margin-top: 10px; font-weight: 600; }
.trial-status [data-trial-dates] { margin-top: 4px; color: var(--text-2); font-size: 14px; }
.trial-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.trial-status form { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.trial-status form p { color: var(--text-2); font-size: 14px; }

/* ---------- Conseiller (aide au choix) ---------- */
.ph-menu > li > a.ph-menu-advisor { color: var(--accent-text); }
.ph-menu > li > a.ph-menu-advisor .ph-i { width: 15px; height: 15px; }
.ph-menu > li > a.ph-menu-advisor:hover { color: #d2c8ff; }
.ph-finder-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, var(--accent-soft), transparent 70%); }
.ph-finder-avatar { position: relative; width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--accent); color: #fff; }
.ph-finder-avatar::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border: 2px solid var(--surface); border-radius: 50%; background: var(--ok); }
.ph-finder-avatar .ph-i { width: 17px; height: 17px; }
.ph-finder-head b { display: block; font-size: 14px; font-weight: 600; }
.ph-finder-head small { display: block; color: var(--text-3); font-size: 12.5px; }
.ph-finder--compact { box-shadow: 0 30px 80px rgba(0, 0, 0, .45); border-color: var(--line-2); }
.ph-finder--compact .ph-finder-body { grid-template-columns: 1fr; }
.ph-finder--compact .ph-finder-questions { gap: 18px; padding: 18px 20px; }
.ph-finder--compact .ph-finder-result { padding: 18px 20px; border-left: 0; border-top: 1px solid var(--line); }
.ph-finder--compact .ph-finder-empty { flex-direction: row; justify-content: flex-start; gap: 10px; text-align: left; }
.ph-finder--compact .ph-finder-empty strong { display: none; }
.ph-finder--compact .ph-finder-empty p { font-size: 13px; }
.ph-finder--compact .ph-finder-specs { margin: 12px 0 14px; padding: 10px 0; grid-template-columns: repeat(3, auto); justify-content: start; gap: 6px 18px; }
.ph-finder--compact .ph-seg span { height: 32px; font-size: 12.5px; }
.ph-advisor-section .ph-finder { box-shadow: 0 30px 80px rgba(0, 0, 0, .35); border-color: var(--line-2); }
.ph-advisor-points { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; color: var(--text-2); font-size: 13.5px; }
.ph-advisor-points li { display: inline-flex; align-items: center; gap: 7px; }
.ph-advisor-points .ph-i { width: 15px; height: 15px; color: var(--accent-text); }

/* ---------- En-tête produit ---------- */
.ph-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var(--text-2); font-size: 13.5px; font-weight: 500; }
.ph-kicker img, .ph-kicker .ph-i { width: 20px; height: 20px; border-radius: 4px; object-fit: contain; }
.ph-kicker .ph-i { color: var(--accent-text); }
.ph-kicker span { color: var(--text-3); }
.ph-pagehead-grid--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 56px; }
.ph-pagehead-grid--split .ph-h1 { max-width: 15ch; }

/* ---------- Formules en tableau (VPS) ---------- */
.ph-plans--table { display: block; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.ph-plans-head, .ph-plan--row { display: grid; grid-template-columns: minmax(180px, 1.5fr) repeat(3, minmax(70px, .6fr)) minmax(120px, .8fr) 190px; align-items: center; gap: 16px; padding: 16px 22px; }
.ph-plans-head { padding-block: 12px; background: var(--bg-2); color: var(--text-3); font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ph-plan--row { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.ph-plan--row:hover { border-color: var(--line); background: var(--surface-2); }
.ph-plan--row.ph-plan--rec { background: linear-gradient(90deg, var(--accent-soft), transparent 60%); }
.ph-plan--row.ph-plan--match { box-shadow: inset 3px 0 0 var(--accent); }
.ph-plan--row .ph-plan-badge { top: 0; left: 22px; height: 18px; font-size: 10.5px; transform: translateY(-50%); }
.ph-plan--row .ph-plan-usage { min-height: 0; margin-top: 2px; }
.ph-plan-row-spec { color: var(--text-2); font: 400 13.5px var(--mono); }
.ph-plan--row .ph-plan-price { flex-wrap: wrap; margin: 0; }
.ph-plan--row .ph-plan-price strong { font-size: 18px; letter-spacing: -.02em; }
.ph-stock { width: 100%; display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 12px; }
.ph-stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.ph-stock[data-state="in"] { color: var(--ok); }
.ph-stock[data-state="in"]::before { background: var(--ok); }
.ph-stock[data-state="out"] { color: var(--err); }
.ph-stock[data-state="out"]::before { background: var(--err); }
.ph-plan--row .ph-btn { min-height: 38px; font-size: 13px; }

/* Systèmes VPS */
.ph-os { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ph-os article { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.ph-os .ph-tile { width: 48px; height: 48px; }
.ph-os .ph-tile svg { width: 24px; height: 24px; }
.ph-os h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.ph-os p { margin-top: 6px; color: var(--text-2); font-size: 14px; }
.ph-os ul { display: grid; gap: 6px; margin-top: 14px; }
.ph-os li { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13.5px; }
.ph-os li .ph-i { width: 15px; height: 15px; color: var(--accent-text); }

@media (max-width: 1100px) {
  .ph-plans-head, .ph-plan--row { grid-template-columns: minmax(150px, 1.4fr) repeat(3, minmax(64px, .6fr)) minmax(110px, .8fr) 170px; padding-inline: 18px; }
}
@media (max-width: 1020px) {
  .ph-pagehead-grid--split { grid-template-columns: 1fr; gap: 36px; }
  .ph-plans-head { display: none; }
  .ph-plan--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; padding: 20px 18px; }
  .ph-plan-row-name { grid-column: 1 / -1; padding-right: 100px; }
  .ph-plan-row-spec::before { content: attr(data-label); display: block; color: var(--text-3); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
  .ph-plan--row .ph-plan-price { grid-column: 1 / 2; }
  .ph-plan--row > .ph-btn { grid-column: 2 / -1; }
  .ph-os { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ph-finder--compact .ph-finder-specs { grid-template-columns: 1fr; }
}

/* ---------- Avis clients (carrousel) ---------- */
.ph-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.ph-stars .ph-i { width: 16px; height: 16px; color: var(--line-2); }
.ph-stars .ph-i.is-on { color: var(--warn); }
[data-reviews-summary] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
[data-reviews-summary] b { color: var(--text); }
.ph-reviews-nav { display: flex; gap: 8px; flex: none; }
.ph-reviews-nav .ph-iconbtn:disabled { opacity: .35; cursor: default; }
.ph-reviews-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; margin: -2px; }
.ph-reviews-track::-webkit-scrollbar { display: none; }
.ph-reviews-track:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; border-radius: var(--radius-lg); }
.ph-review { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); scroll-snap-align: start; }
.ph-review p { flex: 1; color: var(--text); font-size: 14.5px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.ph-review footer { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.ph-review-avatar { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.ph-review b { display: block; font-size: 14px; font-weight: 600; }
.ph-review small { display: block; color: var(--text-3); font-size: 12px; }
.ph-reviews-note { margin-top: 18px; color: var(--text-3); font-size: 12.5px; }
@media (max-width: 1020px) { .ph-reviews-track { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (max-width: 760px) { .ph-reviews-track { grid-auto-columns: 86%; } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .ph-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-plans--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-ptable-row { grid-template-columns: minmax(140px, 1.3fr) repeat(3, minmax(70px, .6fr)) minmax(100px, .8fr) 130px; padding-inline: 18px; }
  .ph-footer-top { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 1020px) {
  .ph-menu, .ph-actions .ph-hide-md { display: none; }
  .ph-burger { display: grid; }
  .ph-hero-grid, .ph-faq-wrap, .ph-split, .ph-pagehead-grid, .ph-cart, .trial-layout { grid-template-columns: 1fr; gap: 40px; }
  .ph-faq-wrap .ph-head, .ph-split-aside, .ph-cart-summary { position: static; }
  .ph-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-included { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-finder-body { grid-template-columns: 1fr; }
  .ph-finder-result { border-left: 0; border-top: 1px solid var(--line); }
  .ph-article { grid-template-columns: 1fr; gap: 28px; }
  .ph-toc { position: static; }
  .ph-buy { min-width: 0; }
  /* Tableau de prix en cartes */
  .ph-ptable-row--head { display: none; }
  .ph-ptable-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; padding: 18px; }
  .ph-ptable-row > :first-child { grid-column: 1 / -1; }
  .ph-ptable-row .ph-cell::before { content: attr(data-label); display: block; color: var(--text-3); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
  .ph-ptable-row .ph-cell-price { grid-column: 1 / 2; align-self: center; }
  .ph-ptable-row .ph-cell-action { grid-column: 2 / -1; }
}
@media (max-width: 760px) {
  .ph-container { width: calc(100% - 32px); }
  .ph-section { padding: 72px 0; }
  .ph-section--tight { padding: 48px 0; }
  .ph-hide-sm { display: none !important; }
  .ph-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 28px; }
  .ph-hero { padding-top: 48px; }
  .ph-hero .ph-lead { font-size: 15.5px; }
  .ph-specbar { grid-template-columns: 1fr 1fr; margin-top: 56px; }
  .ph-specbar > div { padding: 18px 16px 20px; }
  .ph-specbar > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .ph-specbar > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .ph-plans, .ph-plans--3 { grid-template-columns: 1fr; }
  .ph-bento, .ph-included, .st-meta { grid-template-columns: 1fr; }
  .ph-steps { grid-template-columns: 1fr; }
  .ph-steps li, .ph-steps li + li { padding: 24px 0; border-left: 0; border-top: 1px solid var(--line); }
  .ph-steps li:first-child { border-top: 0; }
  .ph-pricing-tabs { display: flex; width: 100%; overflow-x: auto; }
  .ph-pricing-tabs button { flex: 1; justify-content: center; padding: 0 10px; }
  .ph-pricing-tabs button span { display: none; }
  .ph-pricing-tabs button[aria-selected="true"] span { display: inline; }
  .ph-finder-tabs { grid-template-columns: repeat(2, 1fr); }
  .ph-finder-tabs button:nth-child(3) { border-left: 0; }
  .ph-finder-tabs button:nth-child(n+3) { border-top: 1px solid var(--line); }
  .ph-footer-cols { grid-template-columns: 1fr 1fr; }
  .ph-row { grid-template-columns: 40px minmax(0, 1fr); }
  .ph-row > .ph-i, .ph-row-actions { grid-column: 2; justify-content: flex-start; }
  .ph-row > .ph-i { display: none; }
  .st-node-main { grid-template-columns: minmax(0, 1fr) auto; }
  .st-latency { display: none; }
  .st-banner { flex-wrap: wrap; }
  .st-banner .ph-btn { margin-left: 0; }
  .games-fields, .trial-fields { grid-template-columns: 1fr; }
  .ph-cookie-table > div { grid-template-columns: 1fr; gap: 4px; }
  .ph-facts { width: 100%; }
  .ph-facts > div { flex: 1 1 33%; }
  .ph-chat { right: 14px; bottom: 14px; }
  .ph-chat-launcher span { display: none; }
  .ph-chat-launcher { width: 44px; padding: 0; justify-content: center; }
  .ph-cookie { left: 14px; bottom: 14px; width: calc(100% - 28px); }
}
@media (max-width: 420px) {
  .ph-nav { gap: 10px; }
  .ph-brand img { width: 118px; }
  .ph-actions { gap: 6px; }
  .ph-header .ph-btn { padding: 0 11px; font-size: 13px; }
  .ph-hero-actions .ph-btn { width: 100%; }
  .ph-picker-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; padding: 13px 14px; }
  .ph-picker-row > .ph-i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}