/* Mode visite : plein écran, nuit, la caméra au centre. Un appareil photo, pas un formulaire. */
html.visite-ouverte, html.visite-ouverte body { overflow: hidden; }
.visite { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: auto 1fr auto; background: var(--nuit); color: #EDEBE4;
  padding-top: env(safe-area-inset-top, 0px); }
.visite .btn { border-color: rgba(255, 255, 255, .35); background: transparent; color: #fff; }
.visite .btn:hover { background: rgba(255, 255, 255, .08); }
.visite .btn--accent { background: var(--laiton-clair); border-color: var(--laiton-clair); color: var(--nuit); }
.visite .btn--accent:hover { background: #E2C592; color: var(--nuit); }
.visite .btn--encre { background: #fff; border-color: #fff; color: var(--nuit); }
.visite .btn[disabled] { opacity: .4; }

.visite__barre { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); position: relative; z-index: 3; }
.visite__fermer { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.visite__titre { flex: 1; min-width: 0; }
.visite__titre strong { display: block; font: 400 1.5rem/1.05 var(--display); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visite__titre small { font: 500 .74rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--laiton-clair); }
.visite__progression { display: flex; gap: 4px; max-width: 40%; flex-wrap: wrap; justify-content: flex-end; }
.visite__progression span { width: 18px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .18); }
.visite__progression span.fait { background: var(--laiton-clair); }
.visite__progression span.actif { background: #fff; }

/* Scène caméra */
.visite__scene { position: relative; overflow: hidden; background: #050A12; }
.visite__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visite__repli { position: absolute; inset: 0; display: grid; place-content: center; gap: 18px; padding: 24px; text-align: center; max-width: 440px; margin: 0 auto; color: #D9D6CE; }
.visite__fichier { position: relative; overflow: hidden; }
.visite__fichier input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.visite__viseur { position: absolute; inset: 12% 8%; pointer-events: none; }
.visite__viseur i { position: absolute; width: 34px; height: 34px; border: 2px solid rgba(255, 255, 255, .85); }
.visite__viseur i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.visite__viseur i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.visite__viseur i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.visite__viseur i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.visite__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.visite__flash.go { animation: visite-flash .38s ease-out; }
@keyframes visite-flash { 0% { opacity: .85; } 100% { opacity: 0; } }
.visite__guide { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; padding: 10px 18px; border-radius: 16px;
  background: rgba(8, 14, 24, .72); backdrop-filter: blur(8px); text-align: center; max-width: calc(100% - 32px); }
.visite__guide-etape { font: 600 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--laiton-clair); }
.visite__guide strong { font: 400 1.45rem/1.1 var(--display); color: #fff; }
.visite__guide-compte { font: 500 .8rem/1 var(--mono); color: #B9BDC4; margin-top: 2px; }
.visite__liste { position: absolute; right: 12px; bottom: 12px; margin: 0; padding: 10px 12px; list-style: none; border-radius: 12px; background: rgba(8, 14, 24, .6); backdrop-filter: blur(8px);
  font-size: .8rem; display: none; }
.visite__liste li { padding: 3px 0 3px 20px; position: relative; color: #9AA1AB; }
.visite__liste li::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #6D7480; }
.visite__liste li.fait { color: #D9D6CE; }
.visite__liste li.fait::before { background: var(--laiton-clair); border-color: var(--laiton-clair); }
.visite__liste li.actif { color: #fff; font-weight: 600; }
.visite__liste li.actif::before { border-color: #fff; }
@media (min-width: 900px) { .visite__liste { display: block; } }

/* Pied : vignettes, déclencheur, actions */
.visite__pied { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255, 255, 255, .08); }
.visite__vignettes { display: flex; align-items: center; gap: 4px; min-width: 0; }
.visite__vignettes img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .25); }
.visite__vignettes span { font: 600 .78rem/1 var(--mono); color: #B9BDC4; margin-left: 4px; }
.visite__declencheur { width: 78px; height: 78px; padding: 0; border: 0; background: none; cursor: pointer; }
.visite__declencheur svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.visite__declencheur .piste { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 4; }
.visite__declencheur .stable { fill: none; stroke: var(--laiton-clair); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 226; stroke-dashoffset: 226; transition: stroke-dashoffset .12s linear; }
.visite__declencheur .coeur { fill: #fff; transition: transform .12s; transform-origin: 40px 40px; }
.visite__declencheur:active .coeur { transform: scale(.9); }
.visite__actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }
.visite__auto { display: inline-flex; align-items: center; gap: 6px; font: 600 .82rem/1 var(--mono); letter-spacing: .04em; color: #D9D6CE; cursor: pointer; }
.visite__auto input { width: 18px; height: 18px; accent-color: var(--laiton-clair); }
.visite__etat { position: fixed; left: 50%; transform: translateX(-50%); top: calc(150px + env(safe-area-inset-top, 0px)); margin: 0; padding: 0; font: 500 .74rem/1 var(--mono); color: var(--laiton-clair); z-index: 4; }
.visite__etat:not(:empty) { padding: 6px 10px; border-radius: 10px; background: rgba(8, 14, 24, .72); }
@media (max-width: 520px) {
  .visite__pied { grid-template-columns: 1fr auto; grid-template-areas: "vig dcl" "act act"; }
  .visite__vignettes { grid-area: vig; } .visite__declencheur { grid-area: dcl; } .visite__actions { grid-area: act; justify-content: space-between; }
  .visite__actions .btn { flex: 1; }
}

/* Analyse : la proposition de l'IA, à valider */
.visite__analyse { overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 24px; background: var(--papier); color: var(--encre); }
.visite__analyse > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.visite__attente { display: grid; justify-items: center; gap: 18px; text-align: center; padding: 48px 0; color: var(--encre-2); }
.visite__scan { width: 180px; height: 120px; border-radius: 14px; background: linear-gradient(180deg, rgba(138, 90, 30, 0) 0%, rgba(138, 90, 30, .35) 50%, rgba(138, 90, 30, 0) 100%) 0 -120px/100% 60px no-repeat, var(--champ);
  border: 1px solid var(--trait); animation: visite-scan 1.6s ease-in-out infinite; }
@keyframes visite-scan { to { background-position: 0 180px, 0 0; } }
.visite__reconnue { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px; border-radius: var(--r); background: var(--ok-voile); margin-bottom: 10px; }
.visite__reconnue.doute { background: var(--info-voile); }
.visite__reconnue .lien { background: none; border: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; font-weight: 600; }
.visite__remarque { font-size: .92rem; color: var(--encre-2); padding: 8px 12px; border-left: 3px solid var(--laiton-clair); background: var(--feuille); margin-bottom: 10px; }
.visite__alerte { padding: 10px 14px; border-radius: var(--r); background: var(--alerte-voile); color: #5E1A13; margin-bottom: 10px; }
.visite__succes { padding: 10px 14px; border-radius: var(--r); background: var(--ok-voile); color: #0F4228; margin-bottom: 10px; }
.visite__tout { display: flex; justify-content: flex-end; margin: 6px auto 10px; }
.visite__tout .btn { background: var(--encre); border-color: var(--encre); color: #fff; }
.visite__elements { list-style: none; padding: 0; display: grid; gap: 10px; }
.visite__el { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px; border-radius: 14px; background: var(--feuille); border: 1px solid var(--trait); }
.visite__el.valide { border-color: #B9D2C4; }
.visite__el.aggrave { border-color: var(--mauvais); box-shadow: inset 3px 0 0 var(--mauvais); }
.visite__el.invisible:not(.valide) { opacity: .92; border-style: dashed; }
.visite__el-photo { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.visite__el-photo.vide { background: repeating-linear-gradient(135deg, var(--champ) 0 6px, #F3F1EC 6px 12px); }
.visite__el-corps { min-width: 0; display: grid; gap: 8px; }
.visite__el-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.visite__el-tete strong { font-weight: 700; }
.visite__conf { width: 52px; height: 5px; border-radius: 3px; background: var(--champ); overflow: hidden; }
.visite__conf i { display: block; height: 100%; background: var(--accent); }
.visite__ia, .visite__ok, .visite__manuel { margin-left: auto; font: 600 .68rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: 20px; }
.visite__ia { background: var(--accent-voile); color: var(--accent-fonce); }
.visite__ok { background: var(--ok-voile); color: var(--neuf); }
.visite__manuel { background: var(--champ); color: var(--encre-3); }
.visite__avant { margin: 0; font: 500 .8rem/1.3 var(--mono); color: var(--encre-2); }
.visite__alerte-el { margin: 0; font-weight: 700; font-size: .85rem; color: var(--mauvais); }
.visite__puces { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.visite__puces .puce { min-height: 40px; font-size: .74rem; }
.visite__obs { min-height: 40px; font-size: 15px; }
.visite__el .btn--petit { justify-self: start; border-color: var(--encre); color: var(--encre); background: var(--feuille); }
.visite__autres { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }
.visite__autres .etiquette { width: 100%; margin: 0; }
.visite__autre { display: grid; text-align: left; gap: 2px; padding: 8px 12px; border: 1px dashed var(--accent); border-radius: 12px; background: var(--feuille); cursor: pointer; font: inherit; color: var(--encre); }
.visite__autre small { color: var(--encre-3); }
.visite__pied--analyse { display: flex; justify-content: space-between; background: var(--nuit); }

/* Fin de visite */
.visite__fin { overflow-y: auto; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 32px 16px; text-align: center; }
.visite__fin h2 { color: #fff; margin: 0; }
.visite__sceau svg { width: 84px; height: 84px; }
.visite__sceau circle { fill: none; stroke: var(--laiton-clair); stroke-width: 2.5; }
.visite__sceau path { fill: none; stroke: var(--laiton-clair); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44; stroke-dashoffset: 44; animation: visite-trait .6s .2s ease-out forwards; }
@keyframes visite-trait { to { stroke-dashoffset: 0; } }
.visite__bilan { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; color: #C9C6BD; }
.visite__bilan strong { font: 400 1.9rem/1 var(--display); color: #fff; display: block; }
.visite__fin-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* Compteurs */
.visite__compteur-intro { display: grid; justify-items: center; gap: 16px; text-align: center; padding: 24px 0; }
.visite__compteur-pic svg { width: 180px; }
.visite__compteur-pic rect:first-child { fill: var(--feuille); stroke: var(--encre); stroke-width: 2; }
.visite__compteur-pic rect:nth-child(2) { fill: #1A2B1F; }
.visite__compteur-pic text { fill: #9EE6A8; font: 600 14px var(--mono); }
.visite__compteur-pic text.petit { fill: var(--encre-2); font-size: 8px; }
.visite__compteur-photo { width: 100%; max-height: 320px; object-fit: contain; border-radius: 14px; background: #000; margin-bottom: 10px; }
.visite__compteur-form { display: grid; gap: 4px; }
.visite__analyse .btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .visite__scan, .visite__sceau path, .visite__flash.go { animation: none; }
  .visite__sceau path { stroke-dashoffset: 0; }
  .visite__declencheur .stable { transition: none; }
}

/* Dans le générateur : la carte d'entrée du Mode visite */
.visite-carte { display: grid; gap: 16px; align-items: center; padding: 20px; margin: 0 0 18px; border-radius: 16px; background: var(--nuit); color: #E6E4DD;
  background-image: radial-gradient(120% 140% at 100% 0%, rgba(212, 178, 122, .22), transparent 55%); }
@media (min-width: 720px) { .visite-carte { grid-template-columns: 1fr auto; padding: 24px 26px; } }
.visite-carte__sur { font: 600 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--laiton-clair); }
.visite-carte strong { display: block; font: 400 1.9rem/1.05 var(--display); color: #fff; margin: 8px 0 6px; }
.visite-carte p { margin: 0 0 6px; color: #C9C6BD; max-width: 52ch; }
.visite-carte__compte { font: 500 .8rem/1 var(--mono); color: var(--laiton-clair) !important; }
.visite-carte .btn--accent { background: var(--laiton-clair); border-color: var(--laiton-clair); color: var(--nuit); }
.visite-carte .btn--accent:hover { background: #E2C592; color: var(--nuit); }
.btn--vision { border-color: var(--accent); color: var(--accent); }
.gen-actions-ligne { display: flex; flex-wrap: wrap; gap: 8px; }

/* Essai et mur de paiement, dans la visite */
.visite__essai { display: grid; gap: 10px; padding: 14px 16px; margin: 0 auto 12px; border-radius: 14px; background: var(--nuit); color: #E6E4DD; }
.visite__essai p { margin: 0; }
.visite__essai strong { color: var(--laiton-clair); }
.visite__essai .btn--accent { justify-self: start; background: var(--laiton-clair); border-color: var(--laiton-clair); color: var(--nuit); }
.visite__mur { display: grid; gap: 14px; }
.visite__mur-intro { font-size: 1.02rem; margin: 0; }
.visite__offres { display: grid; gap: 8px; }
.visite__offres .offre { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--trait); border-radius: 14px; background: var(--feuille); cursor: pointer; }
.visite__offres .offre:has(input:checked) { border-color: var(--encre); background: var(--accent-voile); }
.visite__offres .offre input { margin-top: 3px; accent-color: var(--accent); width: 18px; height: 18px; }
.visite__offres .offre small { display: block; color: var(--encre-3); }
.visite__mur .code-promo summary { cursor: pointer; color: var(--encre-2); font-size: .92rem; }
.reprise-visite { margin: 16px auto; max-width: 780px; }