/* ============================================================================
   CMS design system — shared components for the code-managed pages.
   Loaded once (cached) on CMS pages; replaces the per-page inline <style>.
   Tokens live on .cms-col (present on every CMS page); components are .cms-*.
   ========================================================================== */

.cms-col{
  --cms-ink:#11202f;
  --cms-muted:#3a4452;
  --cms-line:#e3e8ef;
  --cms-soft:#f5f7fa;
  --cms-orange:#ff7a33;
  --cms-orange-dk:#d75c10;
  --cms-green:#1f9d63;
  --cms-pro:#0f6b57;
  --cms-star:#ff9f1a;
}

/* Breadcrumb: ellipsize the (often long) current-page title instead of the
   default horizontal-scroll overflow, so a long title (e.g. the anti-cafard
   page) no longer looks awkwardly cut off at md+. Scoped to CMS pages; the full
   title stays in the <h1> just below and in the BreadcrumbList JSON-LD. */
.cms-col .breadcrumb__content{ overflow-x:hidden; }
.cms-col .breadcrumb__content > div:last-child{ min-width:0; overflow:hidden; }
.cms-col .breadcrumb__content > div:last-child a{ display:block; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Base wrapper + typography */
.cms{ font-size:16.5px; line-height:1.7; text-align:left; color:var(--cms-ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
.cms *{ box-sizing:border-box; }
.cms p{ color:var(--cms-muted); margin:0 0 1em; }
.cms h2{ font-size:1.55rem; line-height:1.25; color:var(--cms-ink); margin:0 0 .5em; letter-spacing:-.01em; }
.cms h3{ font-size:1.08rem; color:var(--cms-ink); margin:0 0 .35em; }
.cms a{ color:var(--cms-orange-dk); text-decoration:underline; }  /* a11y: links distinguishable by more than colour (WCAG 1.4.1). Buttons keep none via .cms a.cms-btn. */
.cms svg{ width:1.1em; height:1.1em; flex:0 0 auto; }
.cms-section{ margin:0 0 44px; }
.cms-section > p{ max-width:75ch; }

/* Eyebrow + lead */
.cms-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; font-size:.78rem; color:var(--cms-orange-dk); background:#fff2e9; padding:6px 13px; border-radius:999px; }
.cms-lead{ font-size:1.18rem; line-height:1.55; color:var(--cms-ink); max-width:780px; margin:0 0 22px; font-weight:500; }

/* Hero (bordered intro) */
.cms-hero{ padding-bottom:30px; border-bottom:1px solid var(--cms-line); margin-bottom:40px; }

/* Buttons */
.cms-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.cms a.cms-btn{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.95rem; text-decoration:none;
  padding:12px 20px; border-radius:10px; border:1px solid transparent; transition:transform .08s ease, background .15s ease; }
.cms a.cms-btn:hover{ transform:translateY(-1px); text-decoration:none; }
.cms a.cms-btn--primary{ background:var(--cms-orange); color:#fff; box-shadow:0 8px 20px -8px rgba(216,92,16,.8); }
.cms a.cms-btn--primary:hover{ background:var(--cms-orange-dk); color:#fff; }
.cms a.cms-btn--ghost{ background:#fff; color:var(--cms-ink); border-color:var(--cms-line); }
.cms a.cms-btn--ghost:hover{ border-color:#c4ccd8; color:var(--cms-ink); }

/* Chips (icon + label) */
.cms-chips{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px; }
.cms-chips li{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.88rem; color:var(--cms-ink);
  background:var(--cms-soft); border:1px solid var(--cms-line); border-radius:999px; padding:8px 14px; }
.cms-chips li svg{ color:var(--cms-orange-dk); }
.cms-chips--ok li svg{ color:var(--cms-green); }

/* Icon tile */
.cms-ic{ display:grid; place-items:center; width:48px; height:48px; border-radius:13px;
  background:#fff2e9; color:var(--cms-orange-dk); flex:0 0 auto; }
.cms-ic svg{ width:24px; height:24px; }

/* Grid of cards */
.cms-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:16px; }

/* Card */
.cms-card{ background:#fff; border:1px solid var(--cms-line); border-radius:18px; padding:24px; }
.cms-card--feature{ margin:0 0 18px; }
.cms-card--primary{ border-color:#ffd9c2; box-shadow:0 14px 40px -28px rgba(216,92,16,.6); }
.cms-card__head{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.cms-card--primary .cms-ic{ background:var(--cms-orange); color:#fff; }
.cms-tag{ display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--cms-orange-dk); background:#fff2e9; border-radius:999px; padding:3px 10px; margin-top:4px; }

/* Numbered steps */
.cms-steps{ counter-reset:step; list-style:none; padding:0; margin:6px 0 0; }
.cms-steps li{ position:relative; padding:0 0 12px 40px; color:var(--cms-muted); }
.cms-steps li:last-child{ padding-bottom:0; }
.cms-steps li::before{ counter-increment:step; content:counter(step); position:absolute; left:0; top:0;
  width:26px; height:26px; border-radius:50%; background:var(--cms-ink); color:#fff; font-size:.82rem; font-weight:700;
  display:grid; place-items:center; }

/* Note (info / success) */
.cms-note{ display:flex; gap:13px; align-items:flex-start; background:var(--cms-soft); border:1px solid var(--cms-line);
  border-radius:14px; padding:16px 18px; }
.cms-note svg{ width:24px; height:24px; color:var(--cms-orange-dk); margin-top:1px; }
.cms-note p{ margin:0; font-size:.92rem; }
.cms-note--ok{ background:#e6f6ed; border-color:#bce6cd; }
.cms-note--ok svg{ color:var(--cms-green); }
.cms-note--ok p{ color:#14532d; }

/* Decline / unavailable line */
.cms-decline{ display:flex; align-items:center; gap:9px; font-size:.92rem; color:var(--cms-muted);
  background:var(--cms-soft); border:1px solid var(--cms-line); border-radius:12px; padding:12px 16px; margin:0; }
.cms-decline svg{ width:20px; height:20px; color:#b0392f; }

/* Final CTA band */
.cms-final{ text-align:center; background:linear-gradient(135deg,#11203a,#1d3357); color:#fff;
  border-radius:22px; padding:40px 26px; }
.cms-final h2{ color:#fff; margin-bottom:.4em; }
.cms-final p{ color:#cdd7e6; max-width:600px; margin:0 auto 22px; }
.cms-final .cms-actions{ justify-content:center; }
.cms .cms-final a.cms-btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.cms .cms-final a.cms-btn--ghost:hover{ border-color:#fff; color:#fff; }

@media (max-width:600px){ .cms{ font-size:15.5px; } }


/* ---- Stats cards (médias, avis) ---- */
.cms-stats{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:14px; }
.cms-stats li{ flex:1 1 180px; max-width:240px; background:var(--cms-soft); border:1px solid var(--cms-line); border-radius:14px; padding:16px; }
.cms-stats .num{ display:block; font-size:1.6rem; font-weight:800; color:var(--cms-ink); line-height:1.1; }
.cms-stats .lbl{ display:block; font-size:.82rem; color:var(--cms-muted); margin-top:5px; }
.cms-stats .stars{ color:var(--cms-star); letter-spacing:2px; font-size:1.05rem; }
.cms-figrow{ display:flex; flex-wrap:wrap; gap:26px; margin:8px 0 4px; }
.cms-figrow .num{ font-size:1.7rem; font-weight:800; color:var(--cms-ink); }
.cms-figrow .lbl{ font-size:.86rem; color:var(--cms-muted); }
@media (max-width:600px){ .cms-figrow{ justify-content:center; text-align:center; } }  /* centre the stats on mobile */

/* ---- Outlet strip (médias) ---- */
.cms-strip{ text-align:center; margin:0 0 44px; }
.cms-strip-title{ display:block; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cms-muted); margin-bottom:14px; }
.cms-strip ul{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:center; align-items:center; }
.cms-strip li{ font-weight:800; font-size:1.25rem; color:#1b2536; letter-spacing:-.01em; opacity:.85; }
.cms-strip li small{ font-weight:700; font-size:.9rem; }
.cms-strip li img{ display:block; height:32px; width:auto; }
.cms-strip li, .cms-brands li{ transition:opacity .2s ease; }
.cms-strip li:hover, .cms-brands li:hover{ opacity:1; }

/* ---- Feature card (médias) ---- */
.cms-feature{ background:#fff; border:1px solid var(--cms-line); border-radius:20px; padding:28px; margin:0 0 26px; box-shadow:0 14px 40px -28px rgba(8,20,40,.5); }
.cms-feature-head{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:6px; }
.cms-outlet{ display:inline-flex; align-items:center; font-weight:800; font-size:1rem; color:#fff; background:var(--accent,#0f1a2b); padding:5px 12px; border-radius:8px; }
.cms-datebadge{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:600; color:var(--cms-muted); background:var(--cms-soft); border:1px solid var(--cms-line); padding:5px 11px; border-radius:999px; }

/* ---- Pull quote ---- */
.cms-quote{ position:relative; margin:18px 0; padding:18px 20px 18px 56px; background:var(--cms-soft); border-left:4px solid var(--cms-orange); border-radius:0 12px 12px 0; color:var(--cms-ink); font-style:italic; font-size:1.05rem; }
.cms-quote svg{ position:absolute; left:16px; top:16px; width:26px; height:26px; color:var(--cms-orange); opacity:.55; }
.cms-quote .who{ display:block; margin-top:8px; font-size:.82rem; font-weight:600; color:var(--cms-muted); font-style:normal; }
.cms-quote--sm{ font-size:.98rem; padding:12px 16px 12px 48px; margin:10px 0; }
.cms-quote--sm svg{ width:20px; height:20px; left:14px; top:13px; }

/* ---- Audio / replay block ---- */
.cms-audio{ display:flex; align-items:center; gap:16px; background:var(--cms-soft); border:1px solid var(--cms-line); border-radius:14px; padding:16px 18px; margin:6px 0 18px; }
.cms-audio .ico{ display:grid; place-items:center; width:48px; height:48px; border-radius:12px; background:var(--accent,var(--cms-orange)); color:#fff; flex:0 0 auto; }
.cms-audio .ico svg{ width:24px; height:24px; }
.cms-audio p{ margin:0; font-size:.92rem; }

/* ---- Video thumbnail grid ---- */
.cms-vgrid{ list-style:none; padding:0; margin:18px 0 0; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:18px; }
.cms .cms-vgrid a{ display:flex; flex-direction:column; text-decoration:none; color:var(--cms-ink); background:#fff; border:1px solid var(--cms-line); border-radius:14px; overflow:hidden; transition:transform .1s ease, box-shadow .15s ease; }
.cms .cms-vgrid a:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -20px rgba(8,20,40,.6); }
.cms-vgrid .thumb{ position:relative; aspect-ratio:16/9; background:#0c1320; }
.cms-vgrid .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.cms-vgrid .play{ position:absolute; inset:0; display:grid; place-items:center; }
.cms-vgrid .play svg{ width:48px; height:48px; color:#fff; background:rgba(216,92,16,.94); border-radius:50%; padding:13px; }
.cms-vgrid .g-title,.cms-vgrid .t{ font-weight:700; color:var(--cms-ink); padding:13px 14px; }
.cms-vgrid .g-meta{ font-size:.8rem; color:var(--cms-muted); padding:0 14px 14px; margin-top:auto; }

/* ---- Media bar (a-propos) ---- */
.cms-mediabar{ background:var(--cms-soft); border:1px solid var(--cms-line); border-radius:18px; padding:22px 26px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 26px; }
.cms-mediabar .ml{ display:flex; flex-direction:column; gap:10px; }
.cms-mediabar .lbl{ font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cms-muted); }
.cms-mediabar .outlets{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; }
.cms-mediabar .outlets li{ font-weight:800; font-size:1.05rem; color:#1b2536; opacity:.8; transition:opacity .2s ease; }
.cms-mediabar .outlets li:hover{ opacity:1; }
.cms-mediabar .outlets li img{ display:block; height:28px; width:auto; }
.cms .cms-mediabar .a-link{ font-weight:700; white-space:nowrap; text-decoration:none; }

/* ---- Credentials grid (a-propos, avis) ---- */
.cms-cred{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:14px; }
.cms-cred li{ background:#fff; border:1px solid var(--cms-line); border-radius:14px; padding:18px 16px; }
.cms-cred strong{ display:block; color:var(--cms-ink); }
.cms-cred span{ display:block; color:var(--cms-muted); font-size:.84rem; margin-top:3px; }
.cms-cred .cms-ic{ display:grid; place-items:center; width:40px; height:40px; border-radius:10px; margin:0 0 12px; color:var(--cms-orange-dk); }
.cms-cred .cms-ic svg{ width:21px; height:21px; }

/* ---- Trust band (a-propos) ---- */
.cms-trust{ background:var(--cms-soft); border:1px solid var(--cms-line); border-radius:18px; padding:24px 26px; }
.cms-trust .lbl{ display:block; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cms-muted); margin-bottom:14px; }
.cms-brands{ list-style:none; padding:0; margin:0 0 12px; display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; }
.cms-brands li{ font-weight:800; font-size:1.2rem; color:#1b2536; opacity:.8; }
.cms-brands li img{ display:block; height:32px; width:auto; }
.cms-trust .norms{ margin:0; font-size:.9rem; }
.cms-trust .norms b{ color:var(--cms-pro); }

/* ---- Timeline (a-propos) ---- */
.cms-timeline{ list-style:none; margin:18px 0 0; padding:0 0 0 28px; border-left:2px solid var(--cms-line); }
.cms-timeline li{ position:relative; padding:0 0 26px 6px; }
.cms-timeline li:last-child{ padding-bottom:0; }
.cms-timeline li::before{ content:""; position:absolute; left:-37px; top:2px; width:14px; height:14px; border-radius:50%; background:var(--cms-orange); border:3px solid #fff; box-shadow:0 0 0 2px var(--cms-orange); }
.cms-timeline .yr{ font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--cms-orange-dk); }
.cms-timeline h3{ font-size:1.2rem; }  /* slightly larger timeline entry titles */

/* ---- Step cards with explicit number (a-propos) ---- */
.cms-stepcards{ list-style:none; padding:0; margin:18px 0 0; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px; }
.cms-stepcards li{ background:#fff; border:1px solid var(--cms-line); border-radius:16px; padding:22px; }
.cms-stepcards .n{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:10px; background:var(--cms-ink); color:#fff; font-weight:800; margin-bottom:12px; }

/* ---- Icon+title+text cards (a-propos values/team, intervention engage) ---- */
.cms-cards{ list-style:none; padding:0; margin:18px 0 0; display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:16px; }
.cms-cards li{ background:#fff; border:1px solid var(--cms-line); border-radius:16px; padding:22px; }
.cms-cards .cms-ic{ margin-bottom:12px; }  /* stacked badge → space it from the title (was glued) */
.cms-cards--ok .cms-ic{ background:#e6f6ed; color:var(--cms-green); }

/* ---- Audience cards (a-propos) ---- */
.cms-aud{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.cms-aud .card{ border:1px solid var(--cms-line); border-radius:18px; padding:24px; background:#fff; }
.cms-aud .card .cms-ic{ width:46px; height:46px; color:#fff; margin-bottom:12px; }
.cms-aud .card.parti .cms-ic{ background:var(--cms-orange); }
.cms-aud .card.pro .cms-ic{ background:var(--cms-pro); }
.cms-aud .card ul{ margin:.6em 0 0; padding-left:0; list-style:none; }
.cms-aud .card li{ color:var(--cms-muted); margin:.3em 0; position:relative; padding-left:1.5em; }
.cms-aud .card li::before{ content:"\2713"; position:absolute; left:0; color:var(--cms-orange-dk); font-weight:700; }
.cms-aud .card.pro li::before{ color:var(--cms-pro); }
@media (max-width:760px){ .cms-aud{ grid-template-columns:1fr; } }

/* ---- Placeholder (a-propos) ---- */
.cms-ph{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:linear-gradient(135deg,#f3f6fa,#eaeff6); border:1px dashed #c7d0dc; border-radius:18px; color:#8693a5; text-align:center; padding:24px; min-height:230px; }
.cms-ph svg{ width:32px; height:32px; opacity:.65; }
.cms-ph span{ font-size:.8rem; font-weight:600; letter-spacing:.02em; }

/* ---- Hero split (a-propos) ---- */
.cms-hero--split{ display:grid; grid-template-columns:300px 1fr; gap:32px; align-items:center; }
.cms-hero--split .cms-ph{ min-height:360px; }
.cms-portrait{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; align-self:center; border-radius:18px; box-shadow:0 18px 50px -30px rgba(17,32,47,.55); }
.cms-name{ font-size:1.8rem; font-weight:800; color:var(--cms-ink); margin:14px 0 2px; letter-spacing:-.01em; }
.cms-role{ font-weight:600; color:var(--cms-orange-dk); margin:0 0 14px; }
@media (max-width:760px){ .cms-hero--split{ grid-template-columns:1fr; gap:22px; } .cms-hero--split .cms-ph{ min-height:260px; } .cms-portrait{ max-width:420px; margin:0 auto; } }

/* ---- Livraison: stat badges, meta pill, franco highlight, table, qa, flags ---- */
.cms-badges{ list-style:none; padding:0; margin:0 0 22px; display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:14px; }
.cms-badges li{ display:flex; gap:13px; align-items:center; background:var(--cms-soft); border:1px solid var(--cms-line); border-radius:14px; padding:16px; }
.cms-badges strong{ display:block; color:var(--cms-ink); font-size:1rem; }
.cms-badges span{ display:block; color:var(--cms-muted); font-size:.84rem; }
.cms-badges .cms-ic{ display:grid; place-items:center; width:42px; height:42px; border-radius:11px; color:var(--cms-orange-dk); }
.cms-badges .cms-ic svg{ width:22px; height:22px; }
.cms-meta{ display:inline-block; font-size:.82rem; font-weight:700; color:var(--cms-orange-dk); background:#fff2e9; border-radius:999px; padding:3px 10px; margin-bottom:10px; }
.cms-highlight{ display:flex; gap:14px; align-items:center; background:#e6f6ed; border:1px solid #bce6cd; border-radius:16px; padding:18px 20px; margin:0 0 16px; }
.cms-highlight .cms-ic{ background:var(--cms-green); color:#fff; }
.cms-highlight p{ margin:0; color:#14532d; }
.cms-highlight strong{ color:#0f3d22; }
.cms-table{ width:100%; border-collapse:collapse; margin:6px 0 10px; }
.cms-table th,.cms-table td{ border:1px solid var(--cms-line); padding:10px 12px; text-align:left; }
.cms-table th{ background:var(--cms-soft); font-weight:700; color:var(--cms-ink); }
.cms-table td{ color:var(--cms-muted); }
.cms-qa{ background:#fff; border:1px solid var(--cms-line); border-radius:14px; padding:18px 20px; margin:0 0 12px; }
.cms-flags{ list-style:none; padding:0; margin:8px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
.cms-flags li{ display:inline-flex; align-items:center; gap:8px; background:var(--cms-soft); border:1px solid var(--cms-line); border-radius:999px; padding:7px 14px; font-weight:600; font-size:.9rem; color:var(--cms-ink); }

/* ---- Intervention: pill, free box, zone, keyword line ---- */
.cms-pill-ok{ display:inline-flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; font-size:.8rem; color:#fff; background:var(--cms-green); padding:7px 14px; border-radius:999px; margin-bottom:16px; }
.cms-free{ background:#e6f6ed; border:1px solid #bce6cd; border-radius:18px; padding:24px; }
.cms-free .big{ font-size:1.5rem; font-weight:800; color:#0f3d22; margin:0 0 4px; }
.cms-free p{ color:#14532d; }
.cms-free ul{ list-style:none; padding:0; margin:12px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
.cms-free li{ display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid #bce6cd; border-radius:999px; padding:7px 14px; font-weight:700; color:#0f3d22; font-size:.9rem; }
.cms-free li svg{ width:16px; height:16px; color:var(--cms-green); }
.cms-zone{ display:flex; gap:16px; align-items:center; background:var(--cms-soft); border:1px solid var(--cms-line); border-radius:18px; padding:22px 24px; }
.cms-zone .cms-ic{ width:50px; height:50px; background:var(--cms-orange); color:#fff; }
.cms-zone .cms-ic svg{ width:26px; height:26px; }
.cms-zone strong{ color:var(--cms-ink); }
.cms-kw{ color:#9aa6b4; font-size:.8rem; margin:26px 0 0; }
@media (max-width:680px){ .cms-zone{ flex-direction:column; align-items:flex-start; } }

/* ---- Avis: reviews masonry ---- */
.cms-reviews{ columns:2; column-gap:18px; margin-top:18px; }
.cms-review{ break-inside:avoid; background:#fff; border:1px solid var(--cms-line); border-radius:16px; padding:18px 20px; margin:0 0 18px; }
.cms-review .r-src{ display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--cms-muted); margin-bottom:8px; }
.cms-review .stars{ color:var(--cms-star); letter-spacing:2px; margin-bottom:6px; }
.cms-review .r-title{ font-weight:700; color:var(--cms-ink); margin:0 0 4px; }
.cms-review p{ color:var(--cms-ink); font-style:italic; margin:0 0 8px; }
.cms-review .r-meta{ font-size:.8rem; color:var(--cms-muted); font-style:normal; }
.cms-review--shot{ padding:14px; }
.cms-review--shot img{ width:100%; height:auto; border-radius:8px; display:block; border:1px solid var(--cms-line); }
.cms-review--shot figcaption{ font-size:.82rem; color:var(--cms-muted); margin-top:8px; }
.cms-review--amixem{ background:linear-gradient(135deg,#fff6f0,#fff); border-color:#ffd9c2; }
@media (max-width:680px){ .cms-reviews{ columns:1; } }

/* Zoomable review screenshots (illegible at thumbnail size) */
.cms-hint{ font-size:.88rem; color:var(--cms-muted); margin:0 0 6px; }
.cms-review--shot .r-shot-wrap{ position:relative; display:block; }
.cms-review--shot .cms-zoom{ cursor:zoom-in; transition:filter .2s ease, transform .2s ease; }
.cms-review--shot .r-shot-wrap:hover .cms-zoom{ filter:brightness(.96); }
.cms-review--shot .cms-zoom:focus-visible{ outline:3px solid var(--cms-orange); outline-offset:2px; }
.cms-review--shot .r-zoom{
  position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:9px;
  display:grid; place-items:center; background:rgba(17,32,47,.72); color:#fff;
  pointer-events:none; transition:background .2s ease;
}
.cms-review--shot .r-shot-wrap:hover .r-zoom{ background:var(--cms-orange-dk); }
.cms-review--shot .r-zoom svg{ width:18px; height:18px; }

/* Fullscreen image lightbox */
.cms-lightbox{
  position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(8,13,20,.92); opacity:0; transition:opacity .2s ease; overflow:auto;
}
.cms-lightbox.is-open{ opacity:1; }
.cms-lightbox img{
  max-width:96vw; max-height:90vh; width:auto; height:auto;
  border-radius:8px; background:#fff; box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.cms-lightbox__close{
  position:fixed; top:14px; right:16px; width:46px; height:46px; border:0; border-radius:50%;
  background:rgba(255,255,255,.16); color:#fff; font-size:30px; line-height:1; cursor:pointer;
}
.cms-lightbox__close:hover{ background:rgba(255,255,255,.28); }