/* À tire d'ailes — réalité augmentée. S'appuie sur ../app.css (polices, couleurs, fiche). */
body.ar{background:#0f100c;color:#f6f1e4}
.ar-scene{position:fixed;inset:0;overflow:hidden;background:#0f100c}
.ar-scene video{object-fit:cover}
.ar-layer{position:fixed;inset:0;pointer-events:none;z-index:2}

/* Anneaux posés sur les perles réelles : on entoure, on ne recouvre jamais */
.ring{position:absolute;left:0;top:0;width:0;height:0;will-change:transform;transition:opacity .25s}
.ring i{position:absolute;left:calc(var(--r) / -2);top:calc(var(--r) / -2);width:var(--r);height:var(--r);border-radius:50%;
  background:radial-gradient(circle,transparent 0 42%,rgba(122,31,26,.32) 44%);
  border:3px solid #fffaf0;box-shadow:0 0 0 1.5px rgba(20,18,12,.6),inset 0 0 0 1.5px rgba(20,18,12,.45),0 2px 8px rgba(0,0,0,.35);transition:transform .2s,box-shadow .2s}
.ring.lieu i{border:3.5px solid #e8c877;box-shadow:0 0 0 1.5px rgba(20,18,12,.6),inset 0 0 0 1.5px rgba(20,18,12,.45),0 0 14px rgba(232,200,119,.75)}
.ring.ajout i{border:3px dashed #e8c877}
.ring.vise{z-index:2}
.ring.ici{z-index:3}
.ring.vise i{transform:scale(1.3);border-color:#e8c877;box-shadow:0 0 0 1.5px rgba(20,18,12,.6),inset 0 0 0 1.5px rgba(20,18,12,.45),0 0 18px rgba(255,236,190,.9)}
.ring.choisi{z-index:2}
.ring.choisi i{border-color:#e8c877}
.ring.off{opacity:.15}
.ring .tag{position:absolute;left:0;bottom:calc(var(--r) / 2 + 10px);transform:translateX(-50%);padding:5px 11px;border-radius:999px;background:rgba(30,32,23,.88);
  font:600 .8rem/1.2 var(--f-body);white-space:nowrap;color:#f6f1e4;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.ring.tag-g .tag{left:auto;right:-14px;transform:none}
.ring.tag-d .tag{left:-14px;transform:none}
.ring .tag small{display:block;font-family:var(--f-label);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#e8c877}
.layer-off .ring{opacity:0}
.ar-layer.estime .ring:not(.off){opacity:.6}  /* position estimée sans gyroscope : en attendant que la caméra recale */

/* Viseur : un grand cercle à quatre repères, centre dégagé pour voir la perle visée */
.ar-reticle{--c:#fffaf0;position:fixed;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;z-index:3;pointer-events:none;
  border:3px solid var(--c);box-shadow:0 0 0 1.5px rgba(20,18,12,.5),inset 0 0 0 1.5px rgba(20,18,12,.35);transition:transform .2s,border-color .2s;
  background:linear-gradient(var(--c),var(--c)) 50% 4px/3px 13px no-repeat,linear-gradient(var(--c),var(--c)) 50% calc(100% - 4px)/3px 13px no-repeat,
    linear-gradient(var(--c),var(--c)) 4px 50%/13px 3px no-repeat,linear-gradient(var(--c),var(--c)) calc(100% - 4px) 50%/13px 3px no-repeat}
.ar-reticle.on{--c:#e8c877;transform:scale(1.12)}
/* Bandeau du producteur : en bas, il garde la dernière perle visée tant qu'une autre n'entre pas dans le viseur */
.ar-aim{position:fixed;left:12px;right:12px;margin:0 auto;max-width:440px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:4;
  display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px;padding:11px 14px 12px 16px;border-radius:18px;
  background:rgba(30,32,23,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 0 1.5px rgba(246,241,228,.14),0 10px 26px rgba(0,0,0,.4);
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:box-shadow .2s,bottom .2s}
.avec-bouton .ar-aim{bottom:calc(86px + env(safe-area-inset-bottom))}
.ar-aim.en-visee{box-shadow:0 0 0 2px #e8c877,0 10px 26px rgba(0,0,0,.4)}
.ar-aim .k{grid-column:1;font-family:var(--f-label);font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#e8c877;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-aim b{grid-column:1;font-family:var(--f-title);font-weight:500;font-size:1.28rem;line-height:1.18;margin-top:3px}
.ar-aim .s{grid-column:1;font-size:.84rem;color:rgba(246,241,228,.75);margin-top:2px}
.ar-aim em{grid-column:2;grid-row:1/4;display:inline-flex;align-items:center;gap:2px;font-style:normal;font-weight:600;font-size:.86rem;
  padding:9px 8px 9px 13px;border-radius:999px;background:#f6f1e4;color:#1e2017}
.ar-aim em svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Cadre de visée tant que l'œuvre n'est pas reconnue */
.ar-guide{position:fixed;left:50%;top:50%;width:min(86vw,86vh * 1.5);aspect-ratio:1.5;transform:translate(-50%,-50%);z-index:2;pointer-events:none;
  border-radius:14px;box-shadow:0 0 0 100vmax rgba(15,16,12,.35)}
.ar-guide::before,.ar-guide::after,.ar-guide span::before,.ar-guide span::after{content:"";position:absolute;width:34px;height:34px;border:3px solid #e8c877}
.ar-guide::before{left:-2px;top:-2px;border-right:0;border-bottom:0;border-radius:14px 0 0 0}
.ar-guide::after{right:-2px;top:-2px;border-left:0;border-bottom:0;border-radius:0 14px 0 0}
.ar-guide span::before{left:-2px;bottom:-2px;border-right:0;border-top:0;border-radius:0 0 0 14px}
.ar-guide span::after{right:-2px;bottom:-2px;border-left:0;border-top:0;border-radius:0 0 14px 0}
.ar-guide{animation:respire 2.4s ease-in-out infinite}
@keyframes respire{50%{opacity:.55}}

/* Haut d'écran */
.ar-top{position:fixed;left:0;right:0;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
  background:linear-gradient(rgba(15,16,12,.75),rgba(15,16,12,0))}
.ar-back{display:inline-flex;align-items:center;gap:4px;height:38px;padding:0 12px 0 8px;border-radius:999px;background:rgba(30,32,23,.7);color:#f6f1e4;text-decoration:none;font-size:.86rem;font-weight:600;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);flex:none}
.ar-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ar-title{font-family:var(--f-title);font-size:1rem;line-height:1.2;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-title b{font-weight:500}
.ar-title i{font-weight:400}
.ar-chips{position:fixed;left:0;right:0;top:calc(58px + env(safe-area-inset-top));z-index:5;background:none;height:auto;padding:0 12px 8px}
.ar-chips .chip{background:rgba(30,32,23,.62);color:#f6f1e4;border-color:rgba(246,241,228,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ar-chips .chip .n{color:rgba(246,241,228,.6)}
.ar-chips .chip[aria-pressed="true"]{background:#f6f1e4;color:#1e2017;border-color:#f6f1e4}
.ar-status{position:fixed;left:50%;top:calc(112px + env(safe-area-inset-top));transform:translateX(-50%);z-index:4;max-width:calc(100% - 32px);white-space:normal;text-align:center;padding:9px 16px;border-radius:999px;
  background:rgba(30,32,23,.85);font-size:.86rem;font-weight:500;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}


/* Figer l'image : bouton en bas, puis image immobile qu'on explore au doigt (zoom par pincement) */
.ar-fige{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:4;display:inline-flex;align-items:center;gap:8px;
  height:52px;padding:0 22px 0 18px;border:0;border-radius:999px;background:#f6f1e4;color:#1e2017;font:600 .95rem/1 var(--f-body);white-space:nowrap;
  box-shadow:0 0 0 1.5px rgba(20,18,12,.25),0 8px 22px rgba(0,0,0,.4);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ar-fige svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ar-fige:disabled{opacity:.6}
.ar-stage{position:fixed;inset:0;z-index:1;overflow:hidden;background:#0f100c;touch-action:none;-webkit-user-select:none;user-select:none}
.ar-still{position:absolute;inset:0;transform-origin:0 0}
.ar-still canvas{position:absolute}

/* Accueil */
.ar-intro{position:fixed;inset:0;z-index:6;overflow-y:auto;background:radial-gradient(ellipse at 50% 0%,rgba(201,154,62,.18),transparent 60%),rgba(15,16,12,.94);
  display:flex;align-items:center;justify-content:center;padding:calc(70px + env(safe-area-inset-top)) 22px calc(30px + env(safe-area-inset-bottom))}
.ar-intro-in{max-width:440px}
.ar-intro .eyebrow{color:#e8c877}
.ar-intro h1{font-size:2rem;margin:8px 0 12px}
.ar-intro .lead{color:rgba(246,241,228,.8);margin-bottom:20px}
.ar-intro .lead em{color:#f6f1e4}
.ar-steps{list-style:none;display:grid;gap:12px;margin-bottom:24px}
.ar-steps li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:rgba(246,241,228,.88)}
.ar-steps b{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1.5px solid #e8c877;color:#e8c877;font:600 .8rem var(--f-label)}
.ar-intro .btn-primary{width:100%;background:#f6f1e4;color:#1e2017}
.ar-note{font-size:.82rem;color:rgba(246,241,228,.6);margin-top:16px}
.ar-note a{color:#e8c877}
.ar-err{color:#f0b9a6;font-weight:500}

/* Fiche : celle de la carte, posée en bas sur un fond clair */
.ar-card{position:fixed;left:0;right:0;bottom:0;z-index:7;max-height:72vh;overflow-y:auto;background:var(--paper);color:var(--ink);border-radius:20px 20px 0 0;
  box-shadow:0 -10px 34px rgba(0,0,0,.45);padding:16px 0 calc(18px + env(safe-area-inset-bottom));animation:monte .3s cubic-bezier(.2,.8,.2,1)}
.ar-card .card-head{padding:0 14px 10px 18px}
.ar-card .pane-body{padding:0 18px;overflow:visible}
@keyframes monte{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.ar-guide{animation:none}}