/* ═══════════════════════════════════════════════════════════════
   OFFRE — STRATÉGIE DIGITALE · FEUILLE DIFFÉRÉE · 11/10/2026
   Posée en media="print" par scripts/batir.py (FEUILLES_DIFFEREES),
   activée par js/v4/offre-strategie.js. Le tableau de bord (px-), les
   scènes de la méthode, la mosaïque des livrables, le défilement du cas.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ LE TABLEAU DE BORD ═══ */
.ox-pilote.est-pret { box-shadow: 0 60px 120px -60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06); user-select: none; -webkit-user-select: none; }
.px {
  --px-or: #D1A326;
  --px-panneau: #141414;
  --px-carte: #181818;
  --px-trait: rgba(255, 255, 255, 0.08);
  --px-doux: rgba(255, 255, 255, 0.55);
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  font: 400 12.5px/1.4 var(--police);
  color: #EDEDED;
}
.px svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.px svg .p { fill: currentColor; stroke: none; }
.px button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.px img { display: block; }

/* La colonne de gauche */
.px-cote { display: flex; flex-direction: column; gap: 14px; padding: 16px 12px; background: var(--px-panneau); border-right: 1px solid var(--px-trait); overflow: auto; }
.px-marque { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.px-marque > span:last-child { display: grid; }
.px-marque b { font-size: 14px; font-weight: 600; }
.px-marque small { color: var(--px-doux); font-size: 11px; }
.px-losange { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--px-or); color: #111; }
.px-compte { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: var(--px-carte); box-shadow: inset 0 0 0 1px var(--px-trait); }
.px-compte > span:last-child { display: grid; }
.px-compte small { color: var(--px-doux); font-size: 11px; }
.px-compte-av { display: grid; place-items: center; width: 34px; height: 34px; padding: 5px; border-radius: 9px; background: #EEF3F1; }
.px .px-compte-av svg { width: 100%; height: auto; stroke: none; overflow: visible; }
.px-nav { display: grid; gap: 2px; }
.px-nav button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--px-doux); text-align: left; transition: background-color 200ms ease, color 200ms ease; }
.px-nav button:hover { color: #EDEDED; background: rgba(255, 255, 255, 0.04); }
.px-nav button.est-actif { color: #111; background: var(--px-or); font-weight: 600; }
.px-sec { margin: 4px 4px -4px; color: var(--px-doux); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.px-canaux { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.px-canaux button { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 26px; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border-radius: 8px; text-align: left; transition: background-color 200ms ease, opacity 300ms ease; }
.px-canaux button:hover { background: rgba(255, 255, 255, 0.04); }
.px-canaux button:not(.est-on) { opacity: 0.45; }
.px-canal-logo { display: grid; place-items: center; width: 22px; height: 22px; }
.px-canal-logo img { width: 20px; height: 20px; }
.px-canal-logo .ox-logo-ig, .px-canal-logo .ox-logo-yt, .px-canal-logo .ox-logo-in { width: 22px; height: 22px; border-radius: 6px; }
.px-canal-logo .ox-logo-yt::after { left: 8.5px; top: 7px; }
.px-canal-logo .ox-logo-ig::after { inset: 6px; }
.px-canal-part { color: var(--px-doux); font-size: 11px; font-variant-numeric: tabular-nums; }
.px-inter { position: relative; width: 26px; height: 15px; border-radius: 99px; background: #3A3A3A; transition: background-color 250ms ease; }
.px-inter i { position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.px-canaux .est-on .px-inter, .px-inter.est-on { background: var(--px-or); }
.px-canaux .est-on .px-inter i, .px-inter.est-on i { transform: translateX(11px); }
.px-inter:disabled { opacity: 0.35; cursor: not-allowed; }
.px-note { display: flex; align-items: center; gap: 8px; margin: auto 4px 0; color: var(--px-doux); font-size: 10.5px; }
.px-note i { width: 6px; height: 6px; border-radius: 50%; background: var(--px-or); animation: px-pouls 1.6s ease infinite; }
@keyframes px-pouls { 50% { opacity: 0.3; } }

/* La partie principale */
.px-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.px-tete { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--px-trait); }
.px-titre { flex: 1; margin: 0; font-size: 16px; font-weight: 600; }
.px-periodes { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--px-carte); box-shadow: inset 0 0 0 1px var(--px-trait); }
.px-periodes[hidden] { display: none; }
.px-periodes button { padding: 5px 11px; border-radius: 6px; color: var(--px-doux); font-variant-numeric: tabular-nums; }
.px-periodes button.est-actif { background: #2C2C2C; color: #fff; }
.px .px-export {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 6px 4px 4px; border-radius: 10px;
  background: linear-gradient(180deg, #E6BA42, #C99A1F); color: #141414; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 22px -12px rgba(209, 163, 38, 0.8);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.px .px-export:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 14px 26px -12px rgba(209, 163, 38, 0.95); }
.px-export:active { transform: translateY(0); }
.px-export > * { position: relative; }
.px-export-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(0, 0, 0, 0.14); }
.px-export-ic svg { grid-area: 1 / 1; stroke-width: 1.8; transition: opacity 200ms ease, transform 300ms var(--ressort, ease); }
.px-export-ic svg:last-child { opacity: 0; transform: scale(0.4); }
.px-export.est-fait .px-export-ic svg:first-child { opacity: 0; transform: translateY(6px); }
.px-export.est-fait .px-export-ic svg:last-child { opacity: 1; transform: none; }
.px-export.est-en-cours .px-export-ic svg:first-child { animation: px-descend 700ms ease-in-out infinite; }
@keyframes px-descend { 50% { transform: translateY(2px); } }
.px-export-txt { min-width: 6.4em; text-align: left; white-space: nowrap; }
.px-export em { padding: 2px 6px; border-radius: 5px; background: #141414; color: var(--px-or); font-size: 10px; font-style: normal; letter-spacing: 0.06em; }
.px-export-barre { position: absolute !important; inset: 0; background: rgba(255, 255, 255, 0.3); transform: scaleX(0); transform-origin: left; }
.px-export.est-en-cours .px-export-barre { transform: scaleX(1); transition: transform 1100ms cubic-bezier(0.4, 0, 0.2, 1); }
.px-corps { flex: 1; min-height: 0; overflow: auto; padding: 16px 18px 14px; display: grid; align-content: start; gap: 14px; overscroll-behavior: contain; }
.px-corps.est-entre > * { animation: px-entre 450ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.px-corps.est-entre > :nth-child(2) { animation-delay: 60ms; }
.px-corps.est-entre > :nth-child(3) { animation-delay: 120ms; }
@keyframes px-entre { from { opacity: 0; transform: translateY(10px); } }
.px-carte { padding: 14px; border-radius: 14px; background: var(--px-carte); box-shadow: inset 0 0 0 1px var(--px-trait); }
.px-carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.px-carte-tete b { font-size: 13px; font-weight: 600; }
.px-pied-note { margin: 0; color: var(--px-doux); font-size: 10.5px; }

/* Les indicateurs */
.px-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.px-kpi { position: relative; display: grid; gap: 4px; padding: 14px 14px 10px; border-radius: 14px; background: var(--px-carte); box-shadow: inset 0 0 0 1px var(--px-trait); overflow: hidden; }
.px-kpi small { color: var(--px-doux); font-size: 11px; }
.px-kpi > b { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.px-kpi.est-or { background: linear-gradient(160deg, rgba(209, 163, 38, 0.22), rgba(209, 163, 38, 0.06)); box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.45); }
.px-kpi.est-or > b { color: var(--px-or); }
.px-kpi-pied { display: flex; align-items: center; gap: 6px; }
.px-delta { white-space: nowrap; padding: 1px 6px; border-radius: 99px; font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.px-delta.est-bon { background: rgba(127, 212, 155, 0.14); color: #7FD49B; }
.px-delta.est-mauvais { background: rgba(229, 72, 77, 0.14); color: #FF8A8E; }
.px .px-spark { width: 100%; height: 28px; margin-top: 4px; }
.px-spark polyline { fill: none; stroke: rgba(209, 163, 38, 0.8); stroke-width: 1.6; vector-effect: non-scaling-stroke; }

/* La courbe */
.px-rangee { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 12px; }
.px-legende { display: flex; gap: 12px; color: var(--px-doux); font-size: 11px; }
.px-legende span { display: inline-flex; align-items: center; gap: 6px; }
.px-legende i, .px-info i { width: 10px; height: 3px; border-radius: 2px; }
.est-gen { background: var(--px-or); }
.est-dep { background: #EDEDED; }
.px-zone { position: relative; height: 300px; cursor: crosshair; }
.px .px-svg { width: 100%; height: calc(100% - 22px); overflow: visible; }
.px-g-ligne { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.px-ligne-gen { fill: none; stroke: var(--px-or); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-dasharray: 1; animation: px-trace 1100ms cubic-bezier(0.65, 0, 0.35, 1) backwards; }
.px-ligne-dep { fill: none; stroke: #EDEDED; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 1; opacity: 0.8; animation: px-trace 1100ms cubic-bezier(0.65, 0, 0.35, 1) 150ms backwards; }
.px-aire { animation: px-aire 900ms ease 300ms backwards; }
@keyframes px-trace { from { stroke-dashoffset: 1; } }
@keyframes px-aire { from { opacity: 0; } }
.px-vide { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--px-doux); }
.px-viseur { position: absolute; left: 0; top: 0; bottom: 22px; width: 1px; background: rgba(255, 255, 255, 0.35); pointer-events: none; }
.px-viseur[hidden], .px-info[hidden] { display: none; }
.px-info { position: absolute; left: 0; top: 0; display: grid; gap: 3px; min-width: 150px; padding: 8px 10px; border-radius: 9px; background: #262626; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.8); pointer-events: none; font-size: 11.5px; }
.px-info small { color: var(--px-doux); }
.px-info span { display: flex; align-items: center; gap: 6px; }
.px-info b { margin-left: auto; font-variant-numeric: tabular-nums; }
.px-axe { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; color: var(--px-doux); font-size: 10.5px; }

/* Le budget */
.px-budget-val { color: var(--px-or); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.px-glisse { --p: 50%; width: 100%; height: 22px; margin: 2px 0 8px; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.px-glisse::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--px-or) var(--p), #2E2E2E var(--p)); }
.px-glisse::-moz-range-track { height: 6px; border-radius: 99px; background: #2E2E2E; }
.px-glisse::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--px-or); }
.px-glisse::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(209, 163, 38, 0.35); }
.px-glisse::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(209, 163, 38, 0.35); }
.px-sous { margin: 6px 0 8px; color: var(--px-doux); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.px-proj { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.px-proj span { display: grid; gap: 2px; padding: 9px 10px; border-radius: 10px; background: #202020; }
.px-proj small { color: var(--px-doux); font-size: 10.5px; line-height: 1.25; }
.px-proj b { font-size: 15px; font-variant-numeric: tabular-nums; }
.px-proj .est-or b { color: var(--px-or); }
.px-proj .est-alerte { box-shadow: inset 0 0 0 1px rgba(229, 72, 77, 0.6); }
.px-proj .est-alerte b { color: #FF8A8E; }
.px-repart { display: flex; align-items: center; gap: 14px; }
.px .px-donut { width: 84px; height: 84px; transform: rotate(-90deg); stroke-linecap: butt; }
.px-repart ul { flex: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 11.5px; }
.px-repart li { display: flex; align-items: center; gap: 8px; }
.px-repart li i { width: 8px; height: 8px; border-radius: 2px; }
.px-repart li b { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--px-doux); }

/* Les campagnes */
.px-table { display: grid; }
.px-tr { display: grid; grid-template-columns: 44px minmax(0, 2.6fr) repeat(4, minmax(0, 1fr)); align-items: center; gap: 10px; padding: 10px 6px; border-bottom: 1px solid var(--px-trait); font-variant-numeric: tabular-nums; transition: opacity 300ms ease, background-color 300ms ease; }
.px-tr > span:nth-child(n+3) { text-align: right; }
.px-th { color: var(--px-doux); font-size: 11px; }
.px-th button { width: 100%; text-align: right; color: var(--px-doux); }
.px-th button:hover, .px-th button.est-tri { color: #EDEDED; }
.px-tr.est-off { opacity: 0.4; }
.px-tr.est-alerte:not(.est-off) .px-cpa { color: #FF8A8E; }
.px-camp { display: flex; align-items: center; gap: 10px; min-width: 0; }
.px-camp > span:last-child { display: grid; min-width: 0; }
.px-camp b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-camp small { color: var(--px-doux); font-size: 10.5px; }
.px-total { border-bottom: 0; font-weight: 600; }

/* Les créations */
.px-creas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.px-crea { display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: var(--px-carte); box-shadow: inset 0 0 0 1px var(--px-trait); }
.px-crea.est-gagnante { box-shadow: inset 0 0 0 1.5px var(--px-or); }
.px-crea-tete { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.px-crea-tete img { width: 16px; height: 16px; }
.px-crea-tete em { margin-left: auto; padding: 2px 8px; border-radius: 99px; background: var(--px-or); color: #111; font-style: normal; font-size: 10.5px; font-weight: 600; }
.px-crea-vue { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: #fff; }
.px-crea-vue img { width: 100%; height: 100%; object-fit: cover; }
.px-crea-cta { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 8px 10px; border-radius: 6px; background: #1F6F78; color: #fff; font-size: 11.5px; font-weight: 600; }
.px-crea-serp { display: grid; align-content: center; gap: 5px; padding: 14px; color: #4D5156; font: 12px/1.4 Arial, sans-serif; }
.px-crea-serp small b { color: #202124; }
.px-crea-serp > b { color: #1A0DAB; font-weight: 400; font-size: 14px; line-height: 1.3; }
.px-crea-ext { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.px-crea-ext i { padding: 2px 8px; border-radius: 99px; box-shadow: inset 0 0 0 1px #DADCE0; font-style: normal; color: #1A0DAB; font-size: 11px; }
.px-crea-yt { aspect-ratio: 16 / 12; }
.px-crea-jouer { position: absolute; left: 50%; top: 50%; width: 44px; height: 30px; margin: -15px -22px; border-radius: 8px; background: #FF0000; }
.px-crea-jouer::after { content: ''; position: absolute; left: 18px; top: 9px; border-left: 11px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.px-crea-passer { position: absolute; right: 0; bottom: 14px; padding: 5px 10px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 11px; }
.px-crea-avance { position: absolute; left: 0; bottom: 0; height: 3px; width: 40%; background: #FFCC00; animation: px-video 6s linear infinite; }
@keyframes px-video { from { width: 0; } to { width: 100%; } }
.px-crea-pied { display: grid; gap: 2px; font-size: 11.5px; }
.px-crea-pied b { font-weight: 500; }
.px-crea-pied span { color: var(--px-doux); }
.px-crea-pied strong { color: #EDEDED; }

/* Le toast, la pancarte, le curseur */
.px-toast { position: absolute; left: 50%; bottom: 18px; z-index: 5; max-width: calc(100% - 40px); padding: 9px 14px; border-radius: 10px; background: #2A2A2A; box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(209, 163, 38, 0.4); transform: translateX(-50%); font-size: 12.5px; }
.px-toast[hidden] { display: none; }
.px-toast.est-vu { animation: px-toast 300ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes px-toast { from { opacity: 0; transform: translate(-50%, 10px); } }
.px-pancarte { position: absolute; left: 50%; top: 12px; z-index: 6; display: none; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 9px 16px 9px 12px; border-radius: 99px; background: var(--px-or) !important; color: #111 !important; font-size: 12.5px; font-weight: 600; white-space: nowrap; transform: translateX(-50%); box-shadow: 0 12px 30px -10px rgba(209, 163, 38, 0.55), 0 0 0 4px rgba(209, 163, 38, 0.18); }
.px-pancarte i { width: 8px; height: 8px; border-radius: 50%; background: #111; animation: px-pouls 1.4s ease infinite; }
.ox-pilote.est-demo:not(.est-en-main) .px-pancarte { display: inline-flex; }
.px-curseur { position: absolute; left: 0; top: 0; z-index: 7; display: flex; align-items: flex-start; pointer-events: none; opacity: 0; transition: opacity 400ms ease; will-change: transform; }
.ox-pilote.est-demo:not(.est-en-main) .px-curseur { opacity: 1; }
.px .px-curseur svg { width: 20px; height: 20px; fill: var(--px-or); stroke: #111; stroke-width: 1; }
.px-curseur > span { margin: 15px 0 0 -2px; padding: 2px 7px; border-radius: 4px 10px 10px 10px; background: var(--px-or); color: #111; font-size: 11px; font-weight: 600; }
.px-curseur.est-clic svg { animation: px-clic 300ms ease; }
@keyframes px-clic { 50% { transform: scale(0.8); } }

@media (max-width: 1100px) {
  .px { grid-template-columns: 196px minmax(0, 1fr); }
  .px-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-rangee { grid-template-columns: minmax(0, 1fr); }
  .px-creas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Les chiffres sont floutés : on voit la forme du pilotage, pas les
   résultats. Seuls le budget mensuel et sa barre restent lisibles. */
.px-kpi > b, .px-kpi .px-delta, .px-spark, .px-svg, .px-info b,
.px-proj b, .px-repart li b, .px-donut, .px-canal-part,
.px-tr:not(.px-th) > span:nth-child(n+3) {
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
}
.px-svg, .px-spark, .px-donut { filter: blur(4px); }
/* Une donnée reste lisible dans chaque zone floutée, en guise d'aperçu. */
.px-kpi.est-or > b, .px-kpi.est-or .px-delta, .px-kpi.est-or .px-spark,
.px-info span:first-of-type b, .px-proj span:first-child b, .px-repart li:first-child b,
.px-canaux li:first-child .px-canal-part, .px-th + .px-tr:not(.px-th) > span:nth-child(n+3) { filter: none; user-select: auto; }
.px-legende { margin-left: auto; }
.px-verrou { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 99px; background: rgba(209, 163, 38, 0.14); color: var(--px-or); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.px-verrou svg, .px-pied-note svg { width: 12px; height: 12px; }
.px-pied-note { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

@media (max-width: 760px) {
  .px { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .px-cote { flex-direction: row; flex-wrap: wrap; gap: 10px; border-right: 0; border-bottom: 1px solid var(--px-trait); overflow: visible; }
  .px-marque { flex: 1 1 100%; }
  .px-compte { display: none; }
  .px-nav { grid-auto-flow: column; flex: 1 1 100%; }
  .px-nav button { justify-content: center; }
  .px-sec, .px-note { display: none; }
  .px-canaux { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; flex: 1 1 100%; padding-bottom: 4px; }
  .px-canaux button { grid-template-columns: 22px auto 26px; }
  .px-canal-part { display: none; }
  .px-tete { flex-wrap: wrap; }
  .px-tr { grid-template-columns: 40px minmax(0, 1.8fr) repeat(2, minmax(0, 1fr)); }
  .px-tr > span:nth-child(5), .px-tr > span:nth-child(6), .px-th > button:nth-of-type(3), .px-th > button:nth-of-type(4) { display: none; }
  .px-creas { grid-template-columns: minmax(0, 1fr); }
  .px-zone { height: 210px; }
  .px-pancarte { top: auto; bottom: 14px; font-size: 11px; }
  .px-kpi-pied small { display: none; }
  .px-kpi > b { font-size: 19px; }
  .px-legende { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .px *, .px *::after { animation: none !important; transition: none !important; }
}

/* ═══ LA MÉTHODE : les scènes de la planche ═══
   Quatre mini-interfaces, rejouées chaque fois que l'étape devient la
   courante ([data-courant]). Toutes les données sont fictives. */
.ox-scene { position: absolute; inset: 0; display: grid; align-content: center; gap: 16px; padding: 50px 24px 30px; opacity: 0; visibility: hidden; transition: opacity 450ms ease, visibility 0s linear 450ms; color: var(--sur-noir); }
[data-courant="1"] .ox-scene--1, [data-courant="2"] .ox-scene--2,
[data-courant="3"] .ox-scene--3, [data-courant="4"] .ox-scene--4 { opacity: 1; visibility: visible; transition: opacity 450ms ease 120ms, visibility 0s; }
.ox-scene-note { position: absolute; right: 16px; bottom: 10px; color: rgba(255, 255, 255, 0.35); font-size: 10px; }
@keyframes ox-jauge { from { transform: scaleX(0); } }
@keyframes ox-monte { from { opacity: 0; transform: translateY(14px); } }
@keyframes ox-trace { from { stroke-dashoffset: 1; } }
@keyframes ox-trace-px { from { stroke-dashoffset: 600; } }
@keyframes ox-tampon { 0% { opacity: 0; transform: scale(1.8) rotate(-12deg); } 60% { opacity: 1; transform: scale(0.94) rotate(-4deg); } 100% { opacity: 1; transform: rotate(-4deg); } }

/* 1 · Le calcul */
.ox-calc { display: grid; gap: 0; padding: 6px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); font-variant-numeric: tabular-nums; }
.ox-calc-ligne { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: baseline; column-gap: 10px; padding: 9px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.1); font-size: 13px; }
.ox-calc-ligne:last-child { border-bottom: 0; }
.ox-calc-ligne > i { grid-row: 1; grid-column: 1; color: var(--or); font-style: normal; font-weight: 600; }
.ox-calc-ligne > span { grid-column: 2; color: var(--sur-noir-2); }
.ox-calc-ligne > b { grid-column: 3; font-size: 15px; font-weight: 600; }
.ox-calc-ligne > small { grid-column: 2 / 4; color: rgba(255, 255, 255, 0.4); font-size: 10.5px; }
.ox-calc-ligne--total { border-bottom: 1px solid rgba(209, 163, 38, 0.4); }
.ox-calc-ligne--total > span { color: var(--sur-noir); }
.ox-calc-ligne--total > b { color: var(--or); }
.ox-plafond { display: grid; gap: 10px; padding: 14px 16px 12px; border-radius: 14px; background: linear-gradient(140deg, rgba(209, 163, 38, 0.22), rgba(209, 163, 38, 0.06)); box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.45); }
.ox-plafond-tete { display: flex; justify-content: space-between; align-items: baseline; }
.ox-plafond-tete small { color: var(--sur-noir-2); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.ox-plafond-tete b { color: var(--or); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.ox-plafond-regle { position: relative; height: 10px; margin-top: 26px; border-radius: 99px; background: linear-gradient(90deg, rgba(229, 72, 77, 0.0) 62.4%, rgba(229, 72, 77, 0.55) 62.4%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ox-plafond-zone { position: absolute; left: 0; top: 0; bottom: 0; width: 62.4%; border-radius: 99px 0 0 99px; background: linear-gradient(90deg, rgba(61, 220, 132, 0.25), rgba(61, 220, 132, 0.6)); transform-origin: left; }
.ox-plafond-trait { position: absolute; left: 62.4%; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--or); box-shadow: 0 0 8px var(--or); }
.ox-plafond-aiguille { position: absolute; left: 41.2%; bottom: 14px; display: grid; justify-items: center; transform: translateX(-50%); white-space: nowrap; }
.ox-plafond-aiguille b { padding: 2px 8px; border-radius: 6px; background: #fff; color: #111; font-size: 12px; font-weight: 700; }
.ox-plafond-aiguille small { display: none; }
.ox-plafond-aiguille::after { content: ''; width: 0; height: 0; border: 5px solid transparent; border-top-color: #fff; }
.ox-plafond-legende { display: grid; grid-template-columns: auto 1fr 1fr auto; gap: 8px; color: rgba(255, 255, 255, 0.45); font-size: 10px; }
.ox-plafond-legende span:nth-child(2) { color: #7FD49B; text-align: center; } .ox-plafond-legende span:nth-child(3) { color: #FF8A8E; text-align: center; }
[data-courant="1"] .ox-calc-ligne { animation: ox-monte 500ms var(--ressort) backwards; }
[data-courant="1"] .ox-calc-ligne:nth-child(2) { animation-delay: 180ms; } [data-courant="1"] .ox-calc-ligne:nth-child(3) { animation-delay: 360ms; } [data-courant="1"] .ox-calc-ligne:nth-child(4) { animation-delay: 540ms; }
[data-courant="1"] .ox-plafond { animation: ox-monte 600ms var(--ressort) 750ms backwards; }
[data-courant="1"] .ox-plafond-zone { animation: ox-jauge 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 1000ms backwards; }
[data-courant="1"] .ox-plafond-aiguille { animation: ox-aiguille 1100ms cubic-bezier(0.3, 1.3, 0.5, 1) 1300ms backwards; }
@keyframes ox-aiguille { from { left: 0; opacity: 0; } 20% { opacity: 1; } }

/* 2 · Les tests de canaux */
.ox-tests { display: grid; gap: 6px; }
.ox-tests-tete { display: grid; grid-template-columns: 128px minmax(0, 1fr) 66px; gap: 10px; padding: 0 10px 4px; color: rgba(255, 255, 255, 0.4); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.ox-tests-tete span:last-child { text-align: right; }
.ox-test { display: grid; grid-template-columns: 18px 100px minmax(0, 1fr) 48px 66px; align-items: center; gap: 10px; height: 44px; padding: 0 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); font-size: 12.5px; transition: opacity 500ms ease; }
.ox-test img { width: 18px; height: 18px; }
.ox-test svg { width: 100%; height: 28px; overflow: visible; }
.ox-test-plafond { fill: none; stroke: rgba(255, 255, 255, 0.25); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.ox-test polyline { fill: none; stroke: var(--sur-noir-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 600; vector-effect: non-scaling-stroke; }
.ox-test.est-garde polyline { stroke: var(--or); }
.ox-test.est-coupe polyline { stroke: #FF8A8E; }
.ox-test b { font-size: 12.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.ox-test em { justify-self: end; padding: 3px 9px; border-radius: 6px; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.ox-test.est-garde em { background: var(--or); color: #111; }
.ox-test.est-coupe em { box-shadow: inset 0 0 0 1.5px #FF8A8E; color: #FF8A8E; }
.ox-tests-pied { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 2px; color: rgba(255, 255, 255, 0.45); font-size: 10.5px; }
.ox-tests-pied i { width: 16px; border-top: 1px dashed rgba(255, 255, 255, 0.45); }
[data-courant="2"] .ox-test { animation: ox-monte 450ms var(--ressort) backwards; }
[data-courant="2"] .ox-test:nth-child(3) { animation-delay: 80ms; } [data-courant="2"] .ox-test:nth-child(4) { animation-delay: 160ms; } [data-courant="2"] .ox-test:nth-child(5) { animation-delay: 240ms; } [data-courant="2"] .ox-test:nth-child(6) { animation-delay: 320ms; }
[data-courant="2"] .ox-test polyline { animation: ox-trace-px 1200ms cubic-bezier(0.65, 0, 0.35, 1) 400ms backwards; }
[data-courant="2"] .ox-test em { animation: ox-tampon 500ms cubic-bezier(0.3, 1.4, 0.5, 1) 1600ms backwards; }
[data-courant="2"] .ox-test:nth-child(3) em { animation-delay: 1750ms; } [data-courant="2"] .ox-test:nth-child(4) em { animation-delay: 1900ms; } [data-courant="2"] .ox-test:nth-child(5) em { animation-delay: 2050ms; } [data-courant="2"] .ox-test:nth-child(6) em { animation-delay: 2200ms; }
[data-courant="2"] .ox-test.est-coupe { animation: ox-monte 450ms var(--ressort) backwards, ox-coupe 500ms ease 2400ms forwards; }
@keyframes ox-coupe { to { opacity: 0.42; } }

/* 3 · La page qui fuit, la page réparée */
.ox-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ox-page { position: relative; display: grid; gap: 10px; align-content: start; }
.ox-page-tete { display: flex; justify-content: space-between; align-items: baseline; }
.ox-page-tete small { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sur-noir-2); }
.ox-page-tete b { font-size: 22px; font-weight: 700; line-height: 1; }
.ox-page-tete b span { font-size: 10px; font-weight: 500; color: var(--sur-noir-2); }
.ox-page--apres .ox-page-tete small, .ox-page--apres .ox-page-tete b { color: var(--or); }
.ox-page-ecran { position: relative; display: block; height: 128px; overflow: hidden; border-radius: 10px; background: #2A2A2A; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ox-page-nav { position: absolute; inset: 0 0 auto 0; z-index: 1; display: flex; gap: 4px; padding: 7px 8px; background: rgba(0, 0, 0, 0.35); }
.ox-page-nav i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.ox-page-gris { position: absolute; inset: 28px 12px 12px; display: grid; gap: 8px; align-content: start; }
.ox-page-gris i { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); }
.ox-page-gris i:first-child { height: 30px; } .ox-page-gris i:nth-child(3) { width: 70%; } .ox-page-gris i:nth-child(4) { width: 45%; }
.ox-page-trou { position: absolute; left: var(--x); bottom: 0; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #0B0B0B; box-shadow: 0 0 0 2px rgba(229, 72, 77, 0.7); transform: translateY(50%); }
.ox-gouttes-fuite { position: absolute; left: 0; right: 0; top: calc(26px + 128px); height: 40px; pointer-events: none; }
.ox-gouttes-fuite i { position: absolute; left: var(--x); top: 0; width: 6px; height: 8px; margin-left: -3px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--or); opacity: 0; animation: ox-fuit 1.6s ease-in var(--d, 0s) infinite; }
@keyframes ox-fuit { 0% { opacity: 0; transform: translateY(-4px) scale(0.6); } 15% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(36px); } }
.ox-page-ecran img { width: 100%; height: 100%; object-fit: cover; }
.ox-page-cta { position: absolute; left: 50%; bottom: 14px; padding: 6px 14px; border-radius: 99px; background: #A84E2E; color: #fff; font-size: 11px; font-weight: 600; transform: translateX(-50%); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.6); }
.ox-page--apres .ox-page-ecran { box-shadow: inset 0 0 0 1.5px rgba(209, 163, 38, 0.6), 0 18px 40px -20px rgba(209, 163, 38, 0.5); }
.ox-page-maux { display: grid; gap: 5px; margin-top: 30px; font-size: 11.5px; }
.ox-page--apres .ox-page-maux { margin-top: 30px; }
.ox-page-maux span { display: flex; align-items: center; gap: 7px; color: var(--sur-noir-2); }
.ox-page-maux i { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%; font-style: normal; font-size: 10px; font-weight: 700; }
.ox-page--avant .ox-page-maux i { background: rgba(229, 72, 77, 0.18); color: #FF8A8E; }
.ox-page--apres .ox-page-maux i { background: rgba(61, 220, 132, 0.18); color: #7FD49B; }
.ox-page--apres .ox-page-maux span { color: var(--sur-noir); }
[data-courant="3"] .ox-page--avant { animation: ox-monte 500ms var(--ressort) backwards; }
[data-courant="3"] .ox-page--apres { animation: ox-monte 500ms var(--ressort) 900ms backwards; }
[data-courant="3"] .ox-page-maux span { animation: ox-monte 400ms var(--ressort) backwards; }
[data-courant="3"] .ox-page--avant .ox-page-maux span:nth-child(1) { animation-delay: 300ms; } [data-courant="3"] .ox-page--avant .ox-page-maux span:nth-child(2) { animation-delay: 450ms; } [data-courant="3"] .ox-page--avant .ox-page-maux span:nth-child(3) { animation-delay: 600ms; }
[data-courant="3"] .ox-page--apres .ox-page-maux span:nth-child(1) { animation-delay: 1200ms; } [data-courant="3"] .ox-page--apres .ox-page-maux span:nth-child(2) { animation-delay: 1350ms; } [data-courant="3"] .ox-page--apres .ox-page-maux span:nth-child(3) { animation-delay: 1500ms; }

/* 4 · Le rapport du mois */
.ox-rapport { display: grid; gap: 12px; padding: 16px 18px 14px; border-radius: 12px; background: #FBFAF6; color: #141414; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.1); transform: rotate(-1.2deg); }
.ox-rapport-tete { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #E8E4D8; }
.ox-rapport-logo { display: block; width: 62px; flex: none; }
.ox-rapport-logo svg { display: block; width: 100%; height: auto; }
.ox-rapport-tete > span:last-child { display: grid; margin-left: auto; text-align: right; }
.ox-rapport-tete b { font-size: 12.5px; }
.ox-rapport-tete small { color: #77736A; font-size: 10px; }
.ox-rapport-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ox-rapport-kpis > span { position: relative; display: grid; gap: 1px; padding: 8px 9px; border-radius: 8px; background: #F1EEE5; }
.ox-rapport-kpis small { color: #77736A; font-size: 9.5px; line-height: 1.2; }
.ox-rapport-kpis b { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ox-rapport-kpis i { justify-self: start; padding: 0 5px; border-radius: 4px; font-style: normal; font-size: 9.5px; font-weight: 600; }
.ox-rapport-kpis i.est-bon { background: rgba(31, 145, 82, 0.12); color: #1F7A4A; }
.ox-rapport-kpis .est-or { background: #141414; color: #fff; }
.ox-rapport-kpis .est-or b { color: var(--or); }
.ox-rapport-kpis .est-or small { color: rgba(255, 255, 255, 0.6); }
.ox-rapport-kpis .est-or i.est-bon { background: rgba(127, 212, 155, 0.18); color: #7FD49B; }
.ox-rapport-graphe { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.ox-barres { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; height: 74px; align-items: end; }
.ox-barres > span { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; align-items: end; column-gap: 2px; height: 100%; }
.ox-barres i { display: block; border-radius: 3px 3px 0 0; transform-origin: bottom; }
.ox-barres i:first-child { height: calc(var(--d) * 45%); background: #CFC9B8; }
.ox-barres i:nth-child(2) { height: calc(var(--g) * 100%); background: var(--or); }
.ox-barres small { grid-column: 1 / 3; padding-top: 3px; color: #77736A; font-size: 9px; text-align: center; }
.ox-rapport-legende { display: grid; gap: 4px; font-size: 10px; color: #77736A; }
.ox-rapport-legende span { display: flex; align-items: center; gap: 5px; }
.ox-rapport-legende i { width: 8px; height: 8px; border-radius: 2px; background: #CFC9B8; }
.ox-rapport-legende i.est-or { background: var(--or); }
.ox-decisions { display: grid; gap: 5px; padding-top: 10px; border-top: 1px solid #E8E4D8; font-size: 12px; }
.ox-decisions b { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #8A6B12; }
.ox-decisions span { display: flex; align-items: center; gap: 8px; }
.ox-decisions i { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; font-style: normal; font-weight: 700; font-size: 11px; }
.ox-decisions .est-plus { background: var(--or); color: #111; }
.ox-decisions .est-moins { background: #141414; color: #fff; }
[data-courant="4"] .ox-rapport { animation: ox-papier 800ms var(--ressort) backwards; }
@keyframes ox-papier { from { opacity: 0; transform: translateY(40px) rotate(4deg); } }
[data-courant="4"] .ox-rapport-kpis > span { animation: ox-monte 500ms var(--ressort) backwards; }
[data-courant="4"] .ox-rapport-kpis > span:nth-child(1) { animation-delay: 400ms; } [data-courant="4"] .ox-rapport-kpis > span:nth-child(2) { animation-delay: 500ms; } [data-courant="4"] .ox-rapport-kpis > span:nth-child(3) { animation-delay: 600ms; } [data-courant="4"] .ox-rapport-kpis > span:nth-child(4) { animation-delay: 700ms; }
[data-courant="4"] .ox-barres i { animation: ox-pousse 700ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
@keyframes ox-pousse { from { transform: scaleY(0); } }
[data-courant="4"] .ox-barres > span:nth-child(1) i { animation-delay: 800ms; } [data-courant="4"] .ox-barres > span:nth-child(2) i { animation-delay: 880ms; } [data-courant="4"] .ox-barres > span:nth-child(3) i { animation-delay: 960ms; }
[data-courant="4"] .ox-barres > span:nth-child(4) i { animation-delay: 1040ms; } [data-courant="4"] .ox-barres > span:nth-child(5) i { animation-delay: 1120ms; } [data-courant="4"] .ox-barres > span:nth-child(6) i { animation-delay: 1200ms; }
[data-courant="4"] .ox-decisions span { animation: ox-monte 450ms var(--ressort) backwards; }
[data-courant="4"] .ox-decisions span:nth-of-type(1) { animation-delay: 1400ms; } [data-courant="4"] .ox-decisions span:nth-of-type(2) { animation-delay: 1550ms; }
@media (prefers-reduced-motion: reduce) {
  .ox-scene *, .ox-scene { animation: none !important; }
  .ox-gouttes-fuite { display: none; }
}

/* ═══ LES LIVRABLES : la mosaïque ═══ */
/* Le survol propre à la stratégie : pas les poignées de recadrage de
   l'offre Web design, mais un flux doré qui fait le tour de la carte
   (la donnée qui circule) et, dans le coin, une courbe qui monte. */
@property --ox-tour { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.ox-bento .od-poignees { display: none; }
.ox-bento .od-tuile { isolation: isolate; }
.ox-bento .od-tuile::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 3;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--ox-tour), transparent 0deg, rgba(209, 163, 38, 0.2) 60deg, #D1A326 140deg, #FFE08A 165deg, transparent 178deg, transparent 180deg, rgba(209, 163, 38, 0.2) 240deg, #D1A326 320deg, #FFE08A 345deg, transparent 358deg);
  filter: drop-shadow(0 0 4px rgba(209, 163, 38, 0.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}
.ox-bento .od-tuile::after {
  content: '';
  position: absolute;
  right: 26px;
  top: -14px;
  z-index: 4;
  width: 58px;
  height: 28px;
  border-radius: 99px;
  background: #141414 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath d='M2 13l7-4 6 2 8-6 6 2 8-5' fill='none' stroke='%23D1A326' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M32 2h5v5' fill='none' stroke='%23D1A326' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 38px 15px no-repeat;
  box-shadow: 0 0 0 1px rgba(209, 163, 38, 0.55), 0 10px 24px -10px rgba(209, 163, 38, 0.6);
  opacity: 0;
  transform: translateY(6px) scale(0.9);
  transition: opacity 350ms ease, transform 450ms var(--ressort);
  pointer-events: none;
}
.ox-bento .od-tuile:hover { border-color: rgba(209, 163, 38, 0.35); box-shadow: 0 34px 60px -36px rgba(209, 163, 38, 0.45), 0 0 0 4px rgba(209, 163, 38, 0.06); }
.ox-bento .od-tuile:hover::before { opacity: 1; animation: ox-tourne 2.6s linear infinite; }
.ox-bento .od-tuile:hover::after { opacity: 1; transform: none; }
@keyframes ox-tourne { to { --ox-tour: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .ox-bento .od-tuile:hover::before { animation: none; --ox-tour: 120deg; }
}
.ox-bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas:
    "audit audit audit audit eco eco"
    "meta meta gads gads gads gads"
    "video video lp lp mesure mesure"
    "tdb tdb tdb tdb tdb tdb";
  gap: var(--e4);
}
.ox-tuile--audit { grid-area: audit; } .ox-tuile--eco { grid-area: eco; } .ox-tuile--meta { grid-area: meta; }
.ox-tuile--gads { grid-area: gads; } .ox-tuile--video { grid-area: video; } .ox-tuile--lp { grid-area: lp; }
.ox-tuile--mesure { grid-area: mesure; } .ox-tuile--tdb { grid-area: tdb; }
.ox-bento .od-tuile-vue { height: 270px; }
.ox-bento img { display: block; }

/* 01 · L'audit des comptes */
.ox-audit { position: absolute; inset: 16px 18px; display: grid; align-content: center; gap: 6px; font-size: 12.5px; }
.ox-audit-tete { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.ox-audit-tete b { font-weight: 600; }
.ox-audit-tete small { color: rgba(238, 243, 241, 0.55); }
.ox-audit-ligne { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 84px; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 9px; background: rgba(255, 255, 255, 0.04); }
.ox-audit-ligne img, .ox-audit-ligne .ox-logo-ig { width: 16px; height: 16px; }
.ox-audit-ligne em { font-style: normal; font-variant-numeric: tabular-nums; }
.ox-audit-ligne i { justify-self: end; padding: 2px 9px; border-radius: 99px; font-style: normal; font-size: 11px; font-weight: 600; }
.ox-audit-ligne .est-ok { background: rgba(127, 212, 155, 0.14); color: #7FD49B; }
.ox-audit-ligne .est-perdu { background: rgba(229, 72, 77, 0.16); color: #FF8A8E; }
.ox-audit-total { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; padding: 10px 12px; border-radius: 10px; background: rgba(229, 72, 77, 0.12); box-shadow: inset 0 0 0 1px rgba(229, 72, 77, 0.45); }
.ox-audit-total b { white-space: nowrap; color: #FF8A8E; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.ox-tuile--audit.est-vu .ox-audit-ligne { animation: ox-monte 500ms var(--ressort) backwards; }
.ox-tuile--audit.est-vu .ox-audit-ligne:nth-child(3) { animation-delay: 90ms; }
.ox-tuile--audit.est-vu .ox-audit-ligne:nth-child(4) { animation-delay: 180ms; }
.ox-tuile--audit.est-vu .ox-audit-ligne:nth-child(5) { animation-delay: 270ms; }
.ox-tuile--audit.est-vu .ox-audit-total { animation: ox-monte 600ms var(--ressort) 500ms backwards; }

/* 02 · Le modèle économique */
.ox-eco { position: absolute; inset: 22px 18px 18px; }
.ox-eco svg { width: 100%; height: 100%; overflow: visible; }
.ox-eco-grille { fill: none; stroke: rgba(238, 243, 241, 0.18); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ox-eco-zone { fill: rgba(127, 212, 155, 0.1); }
.ox-eco-plafond { fill: none; stroke: #FF8A8E; stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.ox-eco-courbe { fill: none; stroke: var(--or); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 400; stroke-dashoffset: 0; }
.ox-tuile--eco.est-vu .ox-eco-courbe { animation: ox-trace-eco 1400ms cubic-bezier(0.65, 0, 0.35, 1) backwards; }
@keyframes ox-trace-eco { from { stroke-dashoffset: 400; } }
.ox-eco-lib { position: absolute; font-size: 11px; font-weight: 600; }
.ox-eco-lib--plafond { right: 0; top: 18%; color: #FF8A8E; }
.ox-eco-lib--cible { left: 10%; bottom: 12%; color: #7FD49B; }

/* 03 · Le test A/B Meta */
.ox-ab { position: absolute; inset: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; }
.ox-ab-pub { position: relative; display: grid; gap: 6px; padding: 8px; border-radius: 12px; background: #fff; color: #17322E; font-size: 11.5px; transition: transform 500ms var(--ressort); }
.ox-ab-pub img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.ox-ab-pub b { font-weight: 600; line-height: 1.25; }
.ox-ab-pub i { font-style: normal; color: #4F6461; }
.ox-ab-pub i::before { content: 'CTR '; }
.ox-ab-pub em { position: absolute; top: 14px; right: 14px; padding: 3px 9px; border-radius: 99px; background: var(--or); color: #111; font-style: normal; font-size: 10.5px; font-weight: 600; }
.ox-ab-pub--a { opacity: 0.7; transform: rotate(-2deg) scale(0.94); }
.ox-ab-pub--b { box-shadow: 0 0 0 2px var(--or), 0 24px 40px -18px rgba(0, 0, 0, 0.8); transform: rotate(2deg); }
.ox-tuile--meta:hover .ox-ab-pub--b { transform: rotate(0deg) scale(1.03); }

/* 04 · L'annonce Google */
.ox-gads { position: absolute; inset: 20px; display: grid; align-content: center; gap: 12px; font-family: Arial, system-ui, sans-serif; }
.ox-gads-barre { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 99px; background: #fff; color: #202124; font-size: 14px; }
.ox-gads-requete i { display: inline-block; width: 1.5px; height: 16px; margin-left: 2px; vertical-align: middle; background: #202124; animation: ox-caret 1s steps(1) infinite; }
@keyframes ox-caret { 50% { opacity: 0; } }
.ox-gads-pub { display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 2px var(--or); color: #4D5156; font-size: 12.5px; }
.ox-gads-pub small b { color: #202124; }
.ox-gads-titre { color: #1A0DAB; font-size: 17px; font-weight: 400; line-height: 1.3; }
.ox-gads-ext { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ox-gads-ext i { padding: 3px 10px; border-radius: 99px; box-shadow: inset 0 0 0 1px #DADCE0; font-style: normal; color: #1A0DAB; font-size: 12px; }
.ox-gads-types { display: flex; gap: 6px; }
.ox-gads-types i { padding: 3px 10px; border-radius: 99px; background: rgba(209, 163, 38, 0.16); color: var(--or); font-style: normal; font-size: 11px; font-family: var(--police); }
.ox-tuile--gads.est-vu .ox-gads-pub { animation: ox-monte 700ms var(--ressort) 300ms backwards; }

/* 05 · YouTube & LinkedIn */
.ox-video { position: absolute; inset: 18px; display: grid; gap: 10px; align-content: center; }
.ox-yt { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; }
.ox-yt img { width: 100%; height: 100%; object-fit: cover; }
.ox-yt-jouer { position: absolute; left: 50%; top: 50%; width: 46px; height: 32px; margin: -16px -23px; border-radius: 9px; background: #FF0000; }
.ox-yt-jouer::after { content: ''; position: absolute; left: 19px; top: 10px; border-left: 11px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.ox-yt-passer { position: absolute; right: 0; bottom: 14px; padding: 5px 10px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 11px; }
.ox-yt-avance { position: absolute; left: 0; bottom: 0; height: 3px; background: #FFCC00; animation: px-video 6s linear infinite; }
.ox-li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #fff; color: #191919; font-size: 12px; }
.ox-li .ox-logo-in { width: 22px; height: 22px; }
.ox-li > span:last-child { display: grid; }
.ox-li small { color: #666; }

/* 06 · Les pages d'atterrissage */
.ox-lp { position: absolute; inset: 22px 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: center; }
.ox-lp-page { display: grid; gap: 6px; padding: 6px 6px 10px; border-radius: 10px; background: #EEF3F1; color: #17322E; font-size: 11.5px; transition: transform 500ms var(--ressort); }
.ox-lp-page img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; }
.ox-lp-page b { font: 400 13px 'Fraunces', Georgia, serif; padding-left: 2px; }
.ox-lp-page i { height: 14px; border-radius: 99px; background: #A84E2E; }
.ox-lp-page:nth-child(2) { transform: translateY(-10px); }
.ox-tuile--lp:hover .ox-lp-page:nth-child(1) { transform: rotate(-4deg); }
.ox-tuile--lp:hover .ox-lp-page:nth-child(3) { transform: rotate(4deg); }

/* 07 · L'attribution */
.ox-attrib { position: absolute; inset: 24px 18px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: stretch; gap: 8px; }
.ox-attrib-sources { display: grid; align-content: space-between; }
.ox-attrib-sources i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; }
.ox-attrib-sources img, .ox-attrib-sources .ox-logo-ig, .ox-attrib-sources .ox-logo-yt { width: 18px; height: 18px; }
.ox-attrib-fils { width: 100%; height: 100%; overflow: visible; }
.ox-attrib-fils path { fill: none; stroke: var(--or); stroke-width: 1.6; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; animation: ox-fourmis 1s linear infinite; }
@keyframes ox-fourmis { to { stroke-dashoffset: -9; } }
.ox-attrib-but { display: grid; align-content: center; justify-items: center; align-self: center; padding: 12px 14px; border-radius: 12px; background: var(--or); color: #111; text-align: center; }
.ox-attrib-but b { font-size: 14px; }
.ox-attrib-but small { font-size: 11px; opacity: 0.75; }

/* 08 · Le tableau de bord (bandeau final noir) */
.ox-tuile--tdb .od-tuile-vue { height: 210px; }
.ox-tdb { position: absolute; inset: 16px 18px; display: grid; grid-template-rows: auto auto 1fr; gap: 10px; }
.ox-tdb-tete { display: flex; align-items: center; gap: 10px; }
.ox-tdb-tete img { width: auto; height: 22px; padding: 4px 8px; border-radius: 6px; background: #fff; box-sizing: border-box; }
.ox-tdb-tete b { font-weight: 600; }
.ox-tdb-direct { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #7FD49B; font-style: normal; font-size: 11px; }
.ox-tdb-direct::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: px-pouls 1.6s ease infinite; }
.ox-tdb-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ox-tdb-kpis span { display: grid; padding: 8px 10px; border-radius: 9px; background: rgba(255, 255, 255, 0.05); }
.ox-tdb-kpis small { color: rgba(238, 243, 241, 0.55); font-size: 10.5px; }
.ox-tdb-kpis b { font-size: 15px; font-variant-numeric: tabular-nums; }
.ox-tdb-kpis .est-or b { color: var(--or); }
.ox-tdb-barres { display: flex; align-items: flex-end; gap: 6px; min-height: 0; }
.ox-tdb-barres i { flex: 1; height: calc(var(--h) * 100%); border-radius: 4px 4px 0 0; background: linear-gradient(var(--or), rgba(209, 163, 38, 0.35)); transform-origin: bottom; }
.ox-tuile--tdb.est-vu .ox-tdb-barres i { animation: ox-barre 900ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.ox-tuile--tdb.est-vu .ox-tdb-barres i:nth-child(2n) { animation-delay: 120ms; }
.ox-tuile--tdb.est-vu .ox-tdb-barres i:nth-child(3n) { animation-delay: 240ms; }
@keyframes ox-barre { from { transform: scaleY(0); } }

@media (max-width: 1100px) {
  .ox-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "audit audit" "eco meta" "gads gads" "video lp" "mesure mesure" "tdb tdb"; }
}
@media (max-width: 700px) {
  .ox-bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: var(--e3); }
  .ox-bento > .od-tuile { grid-area: auto; }
  .ox-bento .od-tuile-vue { height: 280px; }
  .ox-tuile--audit .od-tuile-vue { height: 320px; }
  .ox-tuile--tdb .od-tuile-vue { height: 230px; }
  .ox-audit-ligne { grid-template-columns: 18px minmax(0, 1fr) 70px; }
  .ox-audit-ligne em { display: none; }
  .ox-tdb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ox-tdb-barres { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ox-scene *, .ox-bento *, .ox-bento *::after { animation: none !important; }
}

/* ═══ LE CAS · TRADEBUDDY ═══
   L'aperçu fait 4,117 largeurs ; la fenêtre en montre 0,625 : le
   défilement va jusqu'à −84,8 %. */
.ox-cas .od-cas-defile { animation-name: ox-defile-tb; }
@keyframes ox-defile-tb {
  0%, 10% { transform: translateY(0); }
  90%, 100% { transform: translateY(-84.8%); }
}