/* ==========================================================================
   Fiche robot (modèle de page produit)
   ========================================================================== */

/* ---- En-tête produit ------------------------------------------------------ */
.product-hero { padding-block: var(--space-6) var(--space-8); }
.product-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; min-height: calc(100svh - 12rem); }
.product-hero .breadcrumb { margin-bottom: var(--space-6); }
.product-hero h1 { margin: var(--space-3) 0 var(--space-4); font-size: clamp(3rem, 7.5vw, 7rem); line-height: 0.9; letter-spacing: -0.05em; }
.product-hero__sub { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; max-width: 30ch; }
.product-hero .answer { margin-block: 0 var(--space-6); }
@media (max-width: 960px) { .product-hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; } }

/* Cadre de scan : canvas + relevés */
.scan-frame { position: relative; margin: 0; border: 1px solid var(--color-text); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
.scan-frame canvas { display: block; width: 100%; aspect-ratio: 1 / 1; max-height: 78svh; image-rendering: pixelated; cursor: grab; touch-action: pan-y; }
.scan-frame canvas:active { cursor: grabbing; }
.scan-frame .hud--tl { top: var(--space-4); left: var(--space-4); }
.scan-frame .hud--tr { display: block; top: var(--space-4); right: var(--space-4); }
@media (max-width: 560px) { .scan-frame .hud--tr { display: none; } }
.scan-frame figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); font-family: var(--font-pixel); font-size: var(--fs-sm); color: var(--color-text-muted); }
.scan-frame figcaption b { font-weight: 400; color: var(--color-text); }

/* Galerie de photos */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.gallery .media { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); }
.gallery .media span { font-size: 0.7rem; padding: 2px 6px; }

/* ---- Chiffres clés pleine largeur ---------------------------------------- */
.product-keyfacts { border-block: 1px solid var(--color-text); }
.product-keyfacts .keyfacts { border: 0; border-radius: 0; }
.product-keyfacts .keyfacts > div { padding-block: var(--space-6); }
.product-keyfacts .keyfacts dd { font-size: clamp(2.5rem, 5vw, 4.5rem); }

/* ---- Fonctionnement : carte + points forts ------------------------------- */
.how { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.how .pixel-map { --map-cell: 4px; }
.features { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-text); }
.features li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-5); border-bottom: 1px solid var(--color-border); }
.features .icon { font-size: 1.75rem; margin-top: 0.1rem; }
.features h3 { font-size: 1.25rem; margin-bottom: var(--space-2); }
.features p { margin: 0; color: var(--color-text-muted); }
@media (max-width: 960px) { .how { grid-template-columns: minmax(0, 1fr); } }

/* ---- Caractéristiques : plan coté + tableaux ----------------------------- */
.specs { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.specs__drawing { position: sticky; top: 9rem; margin: 0; }
.specs__drawing svg { display: block; width: 100%; height: auto; color: var(--color-text); }
.specs__drawing figcaption { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--color-text-muted); }
.drawing-line { fill: none; stroke: currentColor; stroke-width: 1.5; }
.drawing-thin { fill: none; stroke: currentColor; stroke-width: 1; }
.drawing-dash { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 3 4; }
.drawing-dim { fill: none; stroke: var(--color-accent); stroke-width: 1; }
.drawing-text { font-family: var(--font-pixel); font-size: 13px; fill: currentColor; }
.drawing-text--dim { fill: var(--color-accent-ink); }
.drawing-fill { fill: url(#trame); }
.spec-group + .spec-group { margin-top: var(--space-6); }
.spec-group h3 { display: flex; align-items: center; gap: var(--space-2); font-size: 1.125rem; margin-bottom: var(--space-3); }
.spec-group .table { min-width: 0; }
.spec-group .table tbody th { font-weight: 500; color: var(--color-text-muted); width: 55%; }
.spec-group .table td { font-family: var(--font-mono); font-size: 0.925rem; }
@media (max-width: 960px) { .specs { grid-template-columns: minmax(0, 1fr); } .specs__drawing { position: static; } }

/* ---- Adapté / à éviter ---------------------------------------------------- */
.fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1px; background: var(--color-text); border: 1px solid var(--color-text); }
.fit > div { padding: var(--space-6) var(--space-5); background: var(--color-bg); }
.fit h3 { display: flex; align-items: center; gap: var(--space-2); font-size: 1.375rem; }
.fit ul { margin: 0; padding: 0; list-style: none; }
.fit li { display: flex; gap: var(--space-3); padding-block: var(--space-3); border-top: 1px solid var(--color-border); }
.fit li .icon { margin-top: 0.2em; }
.fit--yes .icon { color: var(--color-success); }
.fit--no .icon { color: var(--color-error); }

/* ---- Prix et financement --------------------------------------------------- */
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--space-4); }
.offer { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6) var(--space-5); border: 1px solid var(--color-text); border-radius: var(--radius-lg); background: var(--color-surface); }
.offer h3 { margin: 0; font-size: 1.5rem; }
.offer__price { font-family: var(--font-pixel); font-size: 2rem; line-height: 1; }
.offer__price small { font-size: 0.45em; color: var(--color-text-muted); }
.offer ul { margin: 0; padding-left: 1.1em; color: var(--color-text-muted); }
.offer li + li { margin-top: var(--space-2); }
.offer li::marker { color: var(--color-mark); }
.offer .btn { margin-top: auto; align-self: start; }
.offer--main { background: var(--color-text); color: var(--color-bg); }
.offer--main ul { color: color-mix(in srgb, var(--color-bg) 75%, transparent); }
.offer--main .offer__price small { color: color-mix(in srgb, var(--color-bg) 70%, transparent); }

/* Barre d'action collante sur mobile */
.buybar { display: none; }
@media (max-width: 700px) {
  .buybar { position: fixed; inset: auto 0 0 0; z-index: 45; display: flex; gap: var(--space-2); padding: var(--space-3) var(--container-pad) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); background: var(--color-bg); border-top: 1px solid var(--color-text); }
  .buybar .btn { flex: 1; }
  .page-robot { padding-bottom: 5rem; }
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
}

/* ---- Visionneuse : scan 3D ou photos -------------------------------------- */
.viewer { position: relative; }
.viewer__photo { position: absolute; z-index: 2; inset: 0; border: 1px solid var(--color-text); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
.viewer__photo img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-5); }
.thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.thumbs button { position: relative; display: block; aspect-ratio: 1 / 1; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; overflow: hidden; }
.thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button[aria-pressed="true"] { border-color: var(--color-text); box-shadow: inset 0 0 0 2px var(--color-text); }
.thumbs button:hover { border-color: var(--color-text); }
.thumbs__scan { display: grid; place-items: center; font-family: var(--font-pixel); font-size: var(--fs-sm); color: var(--color-text); background: repeating-conic-gradient(var(--color-border) 0 25%, transparent 0 50%) 0 0 / 4px 4px, var(--color-surface) !important; }
.photo-credit { margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ---- Bandeau photo pleine largeur ---------------------------------------- */
.photo-band { position: relative; margin: 0; border-bottom: 1px solid var(--color-text); background: var(--color-bg-subtle); }
.photo-band img { display: block; width: 100%; height: clamp(18rem, 48vw, 42rem); object-fit: cover; }
.photo-band .hud--tl { top: var(--space-5); left: var(--container-pad); }
.photo-band .hud--tr { display: block; top: var(--space-5); right: var(--container-pad); }
.photo-band figcaption { position: absolute; right: var(--container-pad); bottom: var(--space-3); font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ---- Points forts en rangées alternées ------------------------------------ */
.feature-rows { display: grid; gap: clamp(3rem, 8vw, 7rem); }
.feature-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.feature-row:nth-child(even) > :first-child { order: 2; }
.feature-row:nth-child(even) { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.feature-row__text .step__k { margin-bottom: var(--space-3); }
.feature-row__text h3 { font-size: clamp(1.75rem, 3.2vw, 2.75rem); letter-spacing: -0.04em; line-height: 1; margin-bottom: var(--space-4); }
.feature-row__text p { color: var(--color-text-muted); font-size: 1.0625rem; }
.feature-row__text .specs-inline { margin-top: var(--space-4); font-size: 1rem; }
@media (max-width: 860px) { .feature-row, .feature-row:nth-child(even) { grid-template-columns: minmax(0, 1fr); } .feature-row:nth-child(even) > :first-child { order: 0; } }

/* Photo annotée : coins d'instrument et étiquettes */
.shot { position: relative; margin: 0; border: 1px solid var(--color-text); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-subtle); }
.shot img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.shot::before, .shot::after { content: ""; position: absolute; width: 1rem; height: 1rem; border: solid var(--color-text); z-index: 1; }
.shot::before { top: var(--space-3); left: var(--space-3); border-width: 2px 0 0 2px; }
.shot::after { bottom: var(--space-3); right: var(--space-3); border-width: 0 2px 2px 0; }
.shot__tag { position: absolute; left: var(--x); top: var(--y); z-index: 1; display: flex; align-items: center; gap: var(--space-2); transform: translate(-0.3rem, -50%); font-family: var(--font-pixel); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; pointer-events: none; }
.shot__tag::before { content: ""; flex: none; width: 0.6rem; height: 0.6rem; background: var(--color-accent); box-shadow: 0 0 0 3px var(--color-surface); }
.shot__tag span { padding: 0.2rem 0.45rem; background: var(--color-text); color: var(--color-bg); }
.shot__tag--left { flex-direction: row-reverse; transform: translate(calc(-100% + 0.3rem), -50%); }
.shot figcaption { position: absolute; right: 2.25rem; bottom: 0.55rem; z-index: 1; font-size: var(--fs-xs); color: var(--color-text-muted); }
@media (max-width: 560px) { .shot__tag { font-size: 0.7rem; } }

/* Écran d'application (illustration) */
.app-visual { display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--color-text); border-radius: var(--radius-lg); background: repeating-conic-gradient(var(--color-border) 0 25%, transparent 0 50%) 0 0 / 6px 6px, var(--color-bg-subtle); }
.phone { width: min(18rem, 100%); padding: 0.75rem; border-radius: 2.25rem; background: var(--color-text); box-shadow: var(--shadow-pop); }
.phone__screen { overflow: hidden; border-radius: 1.6rem; background: var(--color-surface); }
.phone__bar { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem 0.5rem; font-family: var(--font-pixel); font-size: 0.75rem; color: var(--color-text-muted); }
.phone__title { padding: 0 1rem 0.75rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }
.phone__title small { display: block; font-family: var(--font-pixel); font-weight: 400; font-size: 0.75rem; color: var(--color-accent-ink); letter-spacing: 0.04em; text-transform: uppercase; }
.phone .pixel-map { --map-cell: 3px; aspect-ratio: 1 / 1.05; }
.phone__tools { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.75rem; }
.phone__tools span { display: grid; place-items: center; min-height: 2.25rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; }
.phone__tools span:last-child { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }

/* Schéma technique (SVG) */
.diagram { margin: 0; padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--color-text); border-radius: var(--radius-lg); background: var(--color-surface); }
.diagram svg { display: block; width: 100%; height: auto; color: var(--color-text); }
.diagram figcaption { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--color-text-muted); }

/* Lieux : photo + secteurs */
.places { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; margin-top: var(--space-7); }
.places .shot img { aspect-ratio: 954 / 828; }
.places .sectors { margin: 0; }
@media (max-width: 860px) { .places { grid-template-columns: minmax(0, 1fr); } }
.places .sector-row__name { font-size: clamp(1.5rem, 2.6vw, 2.25rem); }