/* Page produit Focal Review (/review). Autonome (hors coquille du vitrine) : grille 6 col., marges 36, gouttière 12. Aucune ombre, aucun dégradé, coins ≤ 4 px. */
/* Page produit Focal Review (/review) : même coquille que /about (nav et pied de page de shared/site-chrome.js, tokens et grille de shared/design.css : 6 colonnes, --margin, --gutter). Aucune ombre, aucun dégradé, coins ≤ 4 px. */
:root {
  /* Mode clair, fond #FFFFFF (page /review seulement) */
  --page: #FFFFFF; --bg: var(--blanc-focal); /* interfaces en Blanc Focal sur la page #FFF */ --ink: var(--noir-focal); --mute: var(--gris-moyen); --line: var(--gris-clair); --line-soft: var(--gris-tres-clair);
  --s1: transparent; /* cadres de démo : sans fond */ --s2: #FFFFFF; --s3: var(--gris-tres-clair);
  --ocre: var(--ocre-focal); --ocre-t: #B8863B; --blue: var(--bleu-info); --green: var(--vert-validation); --red: #E5604A; --red-t: #B04A3A;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-y: scroll; color-scheme: light; }
html, body { background: var(--page); }
body { color: var(--ink); font-family: var(--font-primary); font-weight: 400; font-size: 15px; line-height: 22px; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 4px; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { font-weight: 300; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: 8px; left: 8px; z-index: 50; background: var(--bg); padding: 8px 12px; border: 1px solid var(--ink); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.rv-main { padding: 0 var(--margin); }
.v-page .foot { margin-top: 160px; }
.tnum { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* Titres, boutons, pastilles */
h1 { font-size: 120px; line-height: 116px; letter-spacing: -0.04em; }
h2 { font-size: 56px; line-height: 60px; letter-spacing: -0.025em; }
h3 { font-size: 32px; line-height: 38px; letter-spacing: -0.015em; }
.label, .mini { font-size: 14px; color: var(--mute); }
.mini { font-size: 12px; line-height: 16px; }
.small, .cap { font-size: 12px; line-height: 18px; color: var(--mute); }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 24px; background: var(--ink); color: #fff; border: 0; border-radius: 4px; font-size: 15px; font-weight: 500; text-decoration: none; }
.btn:hover { background: #3a342f; } .btn:focus-visible { outline-color: var(--ink); outline-offset: 3px; }
.btn i { transition: transform .15s; } .btn:hover i { transform: translateX(4px); }
.ghostbtn { background: var(--s3); border: 1px solid transparent; border-radius: 4px; padding: 6px 12px; font-size: 13px; }
.ghostbtn:hover { border-color: var(--ink); }
.panel .ghostbtn, .card .ghostbtn { background: var(--s3); }
.chip { display: inline-block; font-size: 11px; line-height: 16px; padding: 0 8px; border-radius: 999px; background: var(--s3); }
.chip-abs { background: var(--bg); }
.chip-abs { position: absolute; left: 12px; top: 12px; }
.draft { display: inline-block; margin-top: 24px; font-size: 11px; color: var(--ocre-t); border: 1px dashed var(--ocre); border-radius: 999px; padding: 2px 12px; }

/* Sections */
.sec { border-top: 1px solid var(--line); margin-top: 160px; padding-top: 24px; }
.sec > .label { display: block; }
.sec > h2 { margin: -22px 0 72px calc((100% - 5 * var(--gutter)) / 6 * 2 + 2 * var(--gutter)); max-width: 60ch; }
.sec > h2 { padding-top: 0; }

/* Hero : l'image devient l'app. Tout est piloté par le défilement (review.js écrit les styles inline) ; .is-static = sans animation (mouvement réduit, mobile) */
.hero { position: relative; height: 260vh; }
.hero__stage { position: sticky; top: var(--nav-h, 72px); height: max(calc(100svh - var(--nav-h, 72px)), 680px); overflow: hidden; }
.hero__text { position: absolute; left: 0; right: 0; top: 24px; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.badges { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 20px; }
.badges a { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--bg); font-size: 12px; text-decoration: none; }
.badges a:hover { background: var(--s3); } .gdot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.hero h1 { font-size: clamp(44px, min(5.6vw, 9vh), 72px); line-height: 1.055; letter-spacing: -0.035em; }
.hero .sub { font-size: 19px; line-height: 28px; color: var(--mute); max-width: 500px; margin: 16px 0 24px; }
.hero__objects { position: absolute; inset: -7% 0 7% 0; z-index: 2; pointer-events: none; }
.hero__objects > * { pointer-events: auto; }
.hero__objects .pin { transform: none; }
.fo { position: absolute; background: var(--bg); border-radius: 2px; padding: 10px 12px; font-size: 12px; line-height: 17px; }
.fo-bubble { width: 236px; } .fo-bubble a { display: block; margin-top: 8px; color: var(--mute); font-size: 11px; text-decoration: underline; }
.fo-presence { display: grid; gap: 4px; } .fo-presence small, .fo-ver small, .fo-voice small { font-size: 11px; color: var(--mute); }
.avs { display: flex; } .avs i { width: 24px; height: 24px; border-radius: 50%; background: var(--s3); border: 2px solid var(--bg); margin-right: -6px; font-style: normal; font-size: 8px; display: grid; place-items: center; }
.fo-voice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 220px; }
.mic { width: 34px; height: 34px; border-radius: 50%; background: var(--ocre); color: #fff; display: grid; place-items: center; }
.wave { display: inline-flex; align-items: center; gap: 2px; height: 20px; } .wave i { width: 3px; background: var(--ocre); border-radius: 2px; } .wave i:nth-child(odd) { height: 70%; } .wave i:nth-child(even) { height: 40%; } .wave i:nth-child(3n) { height: 100%; }
.fo-ver { display: grid; gap: 6px; } .seg2 { display: inline-flex; background: var(--s3); border-radius: 2px; } .seg2 span { padding: 3px 12px; font-size: 12px; } .seg2 .on { background: var(--ink); color: #fff; }
.fo-cycle { display: flex; align-items: center; gap: 16px; padding: 12px 20px; font-size: 13px; color: var(--ink); } .fo-cycle .bars { display: inline-flex; gap: 8px; } .fo-cycle .bars i { width: 34px; height: 10px; background: var(--s3); } .fo-cycle .bars i.on { background: var(--ink); }
.fo-stamp { font-size: 13px; letter-spacing: .02em; border: 1.5px solid var(--ocre); color: var(--ocre-t); background: transparent; padding: 6px 14px; border-radius: 2px; } .fo-stamp.is-done { border-color: var(--green); color: var(--green); }
.cur { position: absolute; display: flex; align-items: flex-start; gap: 4px; pointer-events: none !important; --c: var(--ocre); }
.cur svg { fill: var(--c); } .cur em { font-style: normal; font-size: 11px; color: #fff; padding: 2px 10px; border-radius: 999px; margin-top: 10px; background: var(--c); }
.cur-green { --c: var(--green); } .cur-ocre { --c: var(--ocre); } .cur-blue { --c: var(--blue); }
#scenePins .pin { position: absolute; }
.reset { position: absolute; z-index: 5; left: 50%; bottom: 16px; transform: translateX(-50%); background: none; border: 0; font-size: 12px; text-decoration: underline; color: var(--mute); }
.hero__hint { position: absolute; z-index: 4; bottom: 24px; left: 0; display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; font-size: 13px; padding: 10px 16px; border-radius: 999px; pointer-events: none; }
.hero__stage { --hint-left: max(0px, calc((100% - 1208px) / 2)); }
.hero__hint { left: var(--hint-left); }

/* Fenêtre */
.win { position: absolute; z-index: 3; top: 24px; left: 0; right: 0; margin: 0 auto; width: min(1208px, 100%); transform-origin: 50% 0; border-radius: 4px; overflow: hidden; contain: layout paint; }
.win-inner { border-radius: 2px; }
.win-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; height: 64px; overflow: hidden; }
.win-body { position: relative; }
.win-body .stage { margin-right: 332px; }
.win-body .panel { position: absolute; top: 0; right: 0; bottom: 0; width: 320px; overflow: auto; }
.is-static .hero { height: auto; }
.is-static .hero__stage { position: static; height: auto; overflow: visible; }
.is-static .hero__text { position: static; padding: 24px 0 40px; }
.is-static .hero__objects, .is-static .hero__hint, .is-static .reset { display: none; }
.is-static .win { position: relative; top: auto; transform: none !important; background: var(--bg); padding: var(--space-s); }
.is-static .win-top { height: 44px; }
.is-static .win-body .stage { margin-right: 0; } .is-static .win-body .panel { position: static; width: auto; margin-top: 12px; transform: none; opacity: 1; }
.frame { background: transparent; padding: 0; }
.frame.fill { height: 100%; }
.frame.center { display: flex; flex-direction: column; justify-content: center; gap: 12px; height: 100%; }
.imgbox { position: relative; overflow: hidden; border-radius: 2px; background: var(--s3); }
.imgbox img { width: 100%; height: 100%; object-fit: cover; }
.r43 { aspect-ratio: 4 / 3; } .r169 { aspect-ratio: 16 / 9; } .tall { aspect-ratio: 4 / 5; }
.wm { position: absolute; right: 12px; bottom: 8px; font-size: 9px; line-height: 12px; color: rgba(255,255,255,.7); pointer-events: none; }

.win-send { display: flex; align-items: center; gap: 12px; }
.send { display: inline-flex; align-items: center; gap: 8px; background: var(--s3); border: 1px solid transparent; color: var(--ocre-t); border-radius: 999px; padding: 4px 12px; font-size: 11px; }
.send b { background: var(--ocre); color: #fff; border-radius: 999px; min-width: 16px; text-align: center; font-size: 10px; padding: 0 4px; }
.send.is-sent { border-color: transparent; color: var(--green); } .send.is-sent b { background: var(--green); }
.replay { background: none; border: 0; font-size: 11px; text-decoration: underline; }
.stage { position: relative; aspect-ratio: 1600 / 1196; overflow: hidden; border-radius: 2px; cursor: crosshair; background: var(--s3); }
.stage > img, .v1 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v1 { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 50% 0 0); display: none; }
.v1 img { filter: grayscale(.85) sepia(.25) brightness(.95); }
.is-cmp .v1, .imgbox .v1 { display: block; }
.imgbox .v1 { clip-path: inset(0 50% 0 0); }
.lab { position: absolute; top: 12px; font-size: 11px; background: var(--bg); border-radius: 999px; padding: 0 10px; line-height: 20px; }
.lab-v1 { left: 12px; } .lab-v2 { right: 12px; }
.split { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; transform: translateX(-1px); pointer-events: none; }
.split span { position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 13px; }
.range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.range:focus-visible + *, .range:focus-visible { opacity: 0; }
.imgbox:has(.range:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }

.pin { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--ocre); color: #fff; border: 2px solid #fff; font-size: 12px; font-weight: 500; display: grid; place-items: center; padding: 0; cursor: pointer; z-index: 2; }
.pin.is-sel { background: var(--bg); color: var(--ocre-t); border-color: var(--ocre); }
.pin.sm { width: 20px; height: 20px; margin: -10px 0 0 -10px; font-size: 10px; border-width: 1.5px; }
.pin.w { background: #fff; color: var(--ocre-t); border-color: var(--ocre); }
.comment .pin.sm, .thread .pin.sm, .cmeta .pin.sm { position: static; margin: 0; flex: none; display: inline-grid; }
.bubble { position: absolute; z-index: 3; background: var(--bg); border-radius: 2px; padding: 6px 10px; font-size: 11px; line-height: 15px; max-width: 150px; pointer-events: none; }
.bubble small { display: block; color: var(--mute); font-size: 10px; }
.bubble.sm { max-width: 130px; font-size: 10px; }

/* Panneau */
.panel { background: var(--s2); border-radius: 2px; padding: 10px; font-size: 11px; }
.tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.tabs button { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; border-radius: 999px; padding: 4px 8px; font-size: 11px; color: var(--mute); }
.tabs button .tn { display: none; } .tabs button em { font-style: normal; }
.tabs button[aria-selected="true"] { background: var(--bg); color: var(--ink); } .tabs button[aria-selected="true"] .tn { display: inline; }
.pane[hidden] { display: none; }
.pane-h { font-size: 12px; margin-bottom: 10px; } .pane-h span { color: var(--mute); }
.notes { list-style: none; display: grid; gap: 8px; margin-bottom: 12px; }
.notes li { background: var(--bg); border: 1px solid transparent; border-radius: 2px; padding: 8px; display: grid; gap: 6px; }
.notes li.is-sel { border-color: var(--ocre); }
.nh { display: flex; align-items: center; gap: 8px; color: var(--mute); }
.nh .pin { position: static; margin: 0; width: 18px; height: 18px; font-size: 10px; }
.nh .rm { margin-left: auto; background: none; border: 0; color: var(--mute); text-decoration: underline; font-size: 10px; }
.notes button.sel { background: none; border: 0; text-align: left; font-size: 11px; line-height: 15px; }
.ref { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--mute); } .ref img { width: 22px; height: 22px; border-radius: 2px; object-fit: cover; }
.refs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 12px; }
.refs button { padding: 0; border: 1px solid transparent; border-radius: 2px; background: none; aspect-ratio: 1; overflow: hidden; } .refs img { width: 100%; height: 100%; object-fit: cover; }
.refs button:hover { border-color: var(--ink); }
.vers { list-style: none; display: grid; gap: 6px; margin-bottom: 12px; }
.vers li { display: flex; justify-content: space-between; background: var(--bg); border-radius: 2px; padding: 8px; font-size: 11px; } .vers em { font-style: normal; color: var(--mute); }
.vers.lite { margin: 12px 0 0; }

/* Constat */
.split2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--gutter) * 2); align-items: stretch; }
.col { display: flex; flex-direction: column; gap: 12px; } .col .frame { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.mails { list-style: none; background: var(--bg); border-radius: 2px; font-size: 11px; }
.mails li { display: grid; grid-template-columns: 70px 1fr 16px; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); } .mails li:last-child { border: 0; }
.mails span { color: var(--mute); }
.pdf { display: flex; align-items: center; gap: 8px; background: var(--bg); border-radius: 2px; padding: 8px 12px; font-size: 11px; } .pdf em { margin-left: auto; font-style: normal; color: var(--mute); }
.arrows { position: absolute; inset: 0; width: 100%; height: 100%; } .arrows path { fill: none; stroke: var(--red); stroke-width: .7; stroke-linecap: round; }
.scrawl { position: absolute; background: #fff; color: var(--red-t); font-size: 10px; padding: 2px 8px; border-radius: 2px; transform: rotate(-4deg); }
.comment { display: flex; gap: 8px; background: var(--bg); border-radius: 2px; padding: 10px 12px; font-size: 11px; } .comment small { display: block; color: var(--mute); }
.bubble[style*="left:30%"] { max-width: 150px; }

/* Trio */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
.trio .num { font-size: 14px; color: var(--mute); display: block; margin-bottom: 24px; }
.desc { min-height: 88px; margin: 16px 0 24px; color: var(--mute); }
.desc2 { color: var(--mute); margin-top: 8px; max-width: 46ch; }
.dict { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.bars { display: inline-flex; align-items: center; gap: 3px; height: 20px; } .bars i { width: 3px; height: 100%; background: var(--ocre); border-radius: 2px; animation: lvl .8s ease-in-out infinite alternate; transform-origin: center; }
.bars i:nth-child(2) { animation-delay: .15s } .bars i:nth-child(3) { animation-delay: .3s } .bars i:nth-child(4) { animation-delay: .1s } .bars i:nth-child(5) { animation-delay: .25s }
@keyframes lvl { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .bars i { animation: none; } .zoombox img { transition: none !important; } }
.linkrow { display: flex; gap: 8px; margin: 6px 0 12px; } .link { flex: 1; min-width: 0; background: var(--s3); border: 0; border-radius: 2px; padding: 6px 10px; font-size: 11px; display: flex; gap: 6px; overflow: hidden; white-space: nowrap; }
.seg { display: flex; background: var(--s3); border: 0; border-radius: 2px; margin: 6px 0; }
.seg button { flex: 1; background: none; border: 0; padding: 6px 10px; font-size: 12px; } .seg button[aria-checked="true"] { background: var(--ink); color: #fff; }
.seg.sm { display: inline-flex; align-self: flex-start; } .seg.sm button { flex: none; padding: 5px 12px; font-size: 11px; }
.guests { list-style: none; display: grid; gap: 6px; margin-top: 10px; } .guests li { display: flex; align-items: center; gap: 8px; background: var(--bg); border-radius: 2px; padding: 6px 8px; font-size: 11px; } .guests em { margin-left: auto; font-style: normal; color: var(--mute); }
.av { width: 20px; height: 20px; border-radius: 50%; background: var(--s3); display: grid; place-items: center; font-size: 8px; }

/* Architecture */
.quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px var(--gutter); }
.quad article { display: flex; flex-direction: column; } .quad article .frame { flex: 1; margin-bottom: 16px; min-height: 280px; } .quad h3 { font-size: 24px; line-height: 30px; }
.zoombox img { transition: transform .35s ease-out; }
.card { background: var(--bg); border-radius: 2px; padding: 16px; display: grid; gap: 10px; font-size: 12px; } .cmeta { display: flex; justify-content: space-between; align-items: center; color: var(--mute); gap: 8px; } .cmeta span { display: flex; align-items: center; gap: 6px; } .cmeta em { font-style: normal; }
.rthumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .rthumbs button { padding: 0; border: 0; border-radius: 2px; aspect-ratio: 1; overflow: hidden; background: none; } .rthumbs button[aria-checked="true"] { outline: 2px solid var(--ink); outline-offset: 1px; } .rthumbs img { width: 100%; height: 100%; object-fit: cover; }
.ref.big { gap: 10px; font-size: 12px; } .ref.big img { width: 44px; height: 44px; }
.a3 { background: var(--bg); border-radius: 2px; padding: 14px; display: grid; gap: 10px; } .a3-row { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; } .a3 ol { font-size: 9px; line-height: 13px; padding-left: 14px; color: var(--mute); }
.cart { display: flex; justify-content: space-between; padding-top: 6px; font-size: 8px; letter-spacing: .04em; color: var(--mute); }
.status { list-style: none; background: var(--bg); border-radius: 2px; padding: 8px 16px; }
.status li button { width: 100%; display: flex; align-items: center; gap: 12px; background: none; border: 0; border-bottom: 1px solid var(--line-soft); padding: 14px 0; font-size: 13px; text-align: left; }
.status li:last-child button { border: 0; } .status em { margin-left: auto; font-style: normal; font-size: 11px; }
.status .d { width: 9px; height: 9px; border-radius: 50%; background: var(--s3); border: 0; flex: none; }
.status .done .d { background: var(--green); border-color: var(--green); } .status .done em { color: var(--green); }
.status .cur .d { background: var(--blue); border-color: var(--blue); } .status .cur em { color: var(--blue); } .status .todo em { color: var(--mute); }

/* Projet réel */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gutter); margin-bottom: 48px; }
.stats div { border-top: 1px solid var(--ink); padding-top: 12px; } .stats b { display: block; font-weight: 300; font-size: 48px; line-height: 52px; } .stats span { font-size: 12px; color: var(--mute); }
.real { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: var(--gutter); } .real .imgbox { grid-column: 1 / 4; align-self: start; } .thread { grid-column: 4 / 7; padding-left: 12px; }
.thread ul { list-style: none; display: grid; gap: 18px; margin-top: 12px; } .thread li { display: flex; gap: 10px; font-size: 12px; } .thread small { display: block; color: var(--mute); font-size: 10px; margin-bottom: 2px; } .thread small b { color: var(--ink); font-weight: 400; }
.tag { border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; margin-left: 4px; }
.dot { width: 20px; height: 20px; border: 1.5px solid var(--line); border-radius: 50%; flex: none; }

/* Tarif */
.period { display: inline-flex; margin: 0 0 24px; } .period button { padding: 8px 16px; font-size: 13px; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.plan { border: 1px solid var(--line); border-radius: 4px; padding: 24px; } .plan.feat { border-color: var(--ink); }
.plan h3 { font-size: 14px; line-height: 20px; color: var(--mute); font-weight: 400; letter-spacing: 0; } .plan .blurb { margin: 8px 0 24px; min-height: 44px; }
.price { font-size: 56px; line-height: 60px; font-weight: 300; letter-spacing: -.02em; } .price small { font-size: 12px; color: var(--mute); letter-spacing: 0; margin-left: 4px; }
.plan ul { list-style: none; margin-top: 24px; } .plan li { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; } .plan li i { color: var(--mute); }

/* Accès anticipé + final */
.wait { margin-left: calc((100% - 5 * var(--gutter)) / 6 * 2 + 2 * var(--gutter)); max-width: 640px; }
.wait-row { display: flex; gap: 12px; } .wait input[type=email] { flex: 1; min-width: 0; height: 48px; border: 0; border-radius: 4px; padding: 0 16px; font: inherit; background: var(--s3); }
.wait input[type=email]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; }
.wait-msg { min-height: 24px; margin: 12px 0; font-size: 14px; } .wait-msg.ok { color: var(--green); } .wait-msg.err { color: var(--red-t); }
.final { margin-top: 200px; padding-bottom: 0; display: grid; gap: 40px; justify-items: start; } .final h2 { font-size: 104px; line-height: 104px; max-width: 12ch; }
.hp[hidden] { display: none; }


@media (max-width: 760px) {
  h1 { font-size: 56px; line-height: 56px; } h2 { font-size: 40px; line-height: 44px; } .final h2 { font-size: 48px; line-height: 52px; }
  .sec { margin-top: 96px; } .sec > h2 { margin: 12px 0 40px; }
  .win-body, .split2, .trio, .quad, .plans { grid-template-columns: 1fr; } .quad { gap: 48px; } .trio { row-gap: 48px; } .desc { min-height: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 24px; } .stats b { font-size: 36px; }
  .real { display: block; } .thread { padding: 24px 0 0; }
  .wait { margin-left: 0; } .wait-row { flex-direction: column; } .v-page .foot { margin-top: 96px; }
  .tabs button .tn { display: none !important; }
}

/* Cadres sombres : les interfaces posées dessus sont blanches */
.frame > .seg, .frame > .dict { background: var(--bg); }
.frame > .dict { padding: 8px 12px; border-radius: 2px; margin-top: 0; }
.ui { background: var(--bg); border-radius: 2px; padding: 16px; }
.ui .seg { background: var(--s3); }
.frame > .seg { margin: 0; }
.ui .guests li { background: var(--s2); }
.ui .link { background: var(--s3); }

.plan.feat { border-color: var(--ink); }
.frame.center { justify-content: center; }
html[data-view="review"] .site-head::before { background: #fff; }

/* ===== Fenêtre : version simplifiée de la vraie interface Focal Review (/app) =====
   barre du haut (logo, version, « Valider les annotations »), barre d'outils verticale en pastille, bande de vues, canvas gris, panneau de droite à onglets, remarques en cartes, champ d'ajout en pied. */
.win-top { gap: 16px; justify-content: flex-start; font-size: 13px; }
.win-title { font-weight: 500; }
.vsel { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 4px; background: var(--s3); font-size: 12px; }
.vsel i { font-size: 14px; color: var(--mute); }
.win-send { margin-left: auto; }
.send { background: none; border: 0; padding: 0; gap: 0; font-size: 13px; color: var(--ink); }
.send b { margin-left: 8px; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: #fff; background: #B8863B; border-radius: 10px; }
.send.is-sent { color: var(--green); } .send.is-sent b { background: var(--green); }
.rv-left { display: flex; flex-direction: column; gap: 8px; }
.strip { display: flex; gap: 6px; }
.th { position: relative; display: block; width: 64px; height: 38px; border: 1px solid var(--s3); border-radius: 3px; overflow: hidden; opacity: .7; background: var(--s3); }
.th.is-on { opacity: 1; border-color: var(--ink); }
.th img { width: 100%; height: 100%; object-fit: cover; }
.th b { position: absolute; left: 3px; bottom: 2px; font-size: 9px; font-weight: 500; line-height: 12px; padding: 0 3px; background: rgba(255,255,255,.85); border-radius: 6px; }
.th-star { position: absolute; right: 3px; top: 3px; font-size: 11px; color: #fff; opacity: 0; } .th-star.is-on { opacity: 1; color: #F5B800; }
.win-body .stage { margin-right: 0; border-radius: 4px; background: var(--s3); }
.win-body { align-items: start; }
.win-body .rv-left { margin-right: 332px; }
.tb { position: absolute; z-index: 5; left: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; background: var(--blanc-focal); border-radius: 40px; cursor: default; }
.tb button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; display: flex; align-items: center; justify-content: center; }
.tb button:hover { background: var(--s3); } .tb button i { font-size: 16px; }
.tb button[aria-pressed="true"] { color: #B8863B; } .tb button[data-tool=star][aria-pressed="true"] { color: #F5B800; }
.cropbox { position: absolute; inset: 14% 10%; border: 1.5px dashed #fff; pointer-events: none; z-index: 2; } .cropbox span { position: absolute; left: 0; top: -20px; font-size: 11px; color: #fff; }
#pins .pin { width: 26px; height: 26px; margin: -13px 0 0 -13px; background: #fff; color: #B8863B; border: 1.5px solid var(--ocre); font-size: 12px; }
#pins .pin.is-sel { background: var(--ocre); color: #fff; }
.bubble { box-shadow: none; }

.win-body .panel { padding: 0; display: flex; flex-direction: column; background: var(--blanc-focal); border: 1px solid var(--gris-clair); border-radius: 4px; overflow: hidden; font-size: 13px; }
.rv-head { flex: 0 0 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; border-bottom: 1px solid #DAD6D0; }
.rv-head .tabs { margin: 0; gap: 2px; }
.rv-head .tabs button { height: 40px; min-width: 44px; padding: 0 12px; justify-content: center; gap: 6px; border-radius: 4px; font-size: 12px; color: var(--ink); }
.rv-head .tabs button i { font-size: 18px; } .rv-head .tabs button em { color: var(--mute); font-size: 12px; }
.rv-head .tabs button[aria-selected="true"] { background: var(--s3); padding: 0 16px; } .rv-head .tabs button[aria-selected="true"] i { color: #B8863B; }
.collapse { color: var(--mute); font-size: 16px; padding: 0 8px; }
.rv-body { flex: 1; min-height: 0; overflow: auto; padding: 8px; }
.win-body .pane-h { display: none; }
.win-body .notes { gap: 8px; }
.win-body .notes li { background: #fff; border: 1px solid var(--gris-clair); border-radius: 4px; padding: 12px; gap: 12px; cursor: pointer; }
.win-body .notes li.is-sel { border-color: var(--ocre); }
.nh { gap: 10px; }
.nh .st { flex: 1; font-size: 13px; color: var(--mute); }
.rpill { flex: 0 0 26px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: #B8863B; border: 1.5px solid var(--ocre); border-radius: 50%; }
.notes li.is-sel .rpill { color: #fff; background: var(--ocre); }
.nh .tag { flex: 0 0 auto; padding: 4px 10px; font-size: 12px; line-height: 18px; color: var(--mute); background: var(--s3); border: 0; border-radius: 4px; margin: 0; }
.nh .rm { margin-left: 0; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: var(--mute); text-decoration: none; background: none; border: 0; opacity: 0; } .notes li:hover .rm, .rm:focus-visible { opacity: 1; }
.ntx { font-size: 13px; line-height: 1.45; }
.win-body .ref { font-size: 12px; color: var(--mute); } .win-body .ref img { width: 28px; height: 28px; }
.rv-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; border-top: 1px solid #DAD6D0; background: var(--blanc-focal); }
.rv-foot[hidden] { display: none; }
.rv-foot:focus-within { background: #fff; }
.rv-foot input { flex: 1; min-width: 0; height: 40px; padding: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--ink); }
.rv-foot input::placeholder { color: var(--mute); }
.rv-foot button { flex: none; width: 36px; height: 36px; border: 0; border-radius: 4px; background: var(--s3); display: inline-flex; align-items: center; justify-content: center; } .rv-foot button:hover { background: var(--ink); color: #fff; }
.is-static .win-body .rv-left { margin-right: 0; } .is-static .win-body .panel { height: 420px; }
/* Rangée du haut : alignée en haut pour que l'espace au-dessus (16 px de cadre) égale celui des côtés */
.win-top { height: 44px; align-items: flex-start; }
.win-title, .win-send { height: 32px; display: flex; align-items: center; }