:root{
  --bg:#0a0a0c;
  --accent:#e63946;
  --text:#f5f5f7;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  overflow:hidden;-webkit-tap-highlight-color:transparent}

/* ---------- Écran d'aide ---------- */
.setup{max-width:640px;margin:12vh auto;padding:2rem;line-height:1.6}
.setup h1{margin-bottom:.5rem;font-size:1.6rem}
.setup ol{margin:1rem 0 1rem 1.2rem}
.setup li{margin:.4rem 0}
.setup code{background:#1c1c22;padding:.15em .4em;border-radius:5px;font-size:.9em}
.setup .muted{opacity:.6;margin-top:1rem}

/* ---------- Cadre ---------- */
.frame{position:fixed;inset:0;overflow:hidden;background:#000}

.stage{position:absolute;inset:0}
.slide{
  position:absolute;inset:0;
  background-size:contain;background-position:center;background-repeat:no-repeat;
  opacity:0;transition:opacity 1.2s ease;
  will-change:opacity;
}
.slide.is-active{opacity:1}
figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:6rem 2rem 2rem;font-size:1.3rem;
  background:linear-gradient(transparent,rgba(0,0,0,.7));
  text-shadow:0 2px 8px rgba(0,0,0,.8);
}

/* ---------- Barre de progression ---------- */
.progress{
  position:absolute;top:0;left:0;right:0;height:5px;z-index:7;
  background:rgba(255,255,255,.12);
}
.progress i{
  display:block;height:100%;width:0;
  background:var(--accent);
  box-shadow:0 0 12px var(--accent);
}

/* ---------- Carte QR / branding (bouton cliquable) ---------- */
.card{
  position:absolute;right:2rem;bottom:2rem;z-index:5;
  display:flex;align-items:center;gap:1rem;text-align:left;
  padding:1rem 1.25rem;border-radius:16px;cursor:pointer;
  color:var(--text);font:inherit;
  background:rgba(12,12,16,.72);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 40px rgba(0,0,0,.5);
  transition:transform .2s ease,border-color .2s ease;
}
.card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.28)}
.card .qr{
  width:132px;height:132px;border-radius:10px;
  background:#fff;padding:8px;display:block;
}
.card-text{display:flex;flex-direction:column;gap:.2rem;max-width:200px}
.card-text strong{font-size:1.25rem;line-height:1.15}
.card-text span{opacity:.75;font-size:.95rem}
.card-text strong::before{content:"";display:inline-block;width:8px;height:8px;
  border-radius:50%;background:var(--accent);margin-right:.5rem;vertical-align:middle}

/* ---------- QR agrandi (plein écran) ---------- */
.qr-modal{
  position:absolute;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  background:rgba(6,6,9,.92);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
  cursor:pointer;
}
.qr-modal.open{opacity:1;visibility:visible}
.qr-modal-box{
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  transform:scale(.85);transition:transform .3s ease;
}
.qr-modal.open .qr-modal-box{transform:scale(1)}
.qr-modal-box img{
  width:min(62vmin,560px);height:min(62vmin,560px);
  background:#fff;padding:20px;border-radius:20px;
  box-shadow:0 20px 80px rgba(0,0,0,.6);
}
.qr-modal-box strong{font-size:2rem}
.qr-modal-box span{opacity:.75;font-size:1.1rem}

/* ---------- Contrôles ---------- */
.controls{
  position:absolute;left:50%;bottom:2rem;transform:translateX(-50%);z-index:6;
  display:flex;gap:.6rem;padding:.5rem;border-radius:999px;
  background:rgba(12,12,16,.7);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.frame.show-ui .controls{opacity:1;pointer-events:auto}
.controls button{
  width:52px;height:52px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.08);color:var(--text);
  font-size:1.5rem;line-height:1;display:grid;place-items:center;
  transition:background .2s ease;
}
.controls button:hover{background:var(--accent)}

/* ---------- Catalogue (toutes les photos) ---------- */
.catalog{
  position:absolute;inset:0;z-index:25;
  display:flex;flex-direction:column;
  background:rgba(8,8,11,.97);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
}
.catalog.open{opacity:1;visibility:visible}
.catalog-bar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.1);
}
.catalog-bar strong{font-size:1.3rem}
.catalog-close{
  width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.08);color:var(--text);font-size:1.2rem;
  transition:background .2s ease;
}
.catalog-close:hover{background:var(--accent)}
/* Mosaïque (façon Pinterest) : chaque photo entière, à son format naturel */
.catalog-grid{
  flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:1.2rem 1.5rem 2rem;
  column-width:200px;column-gap:.6rem;
}
.thumb{
  display:block;width:100%;margin:0 0 .6rem;
  border:0;padding:0;cursor:pointer;border-radius:12px;overflow:hidden;
  background:#15151b;break-inside:avoid;-webkit-column-break-inside:avoid;
  transition:transform .15s ease,box-shadow .15s ease;
}
.thumb img{width:100%;height:auto;display:block}
.thumb:hover{transform:scale(1.02);box-shadow:0 8px 30px rgba(0,0,0,.5)}

/* ---------- Écran de démarrage ---------- */
.start-screen{
  position:absolute;inset:0;z-index:30;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at center,#141419 0%,var(--bg) 70%);
  transition:opacity .6s ease;
}
.start-screen.closing{opacity:0;pointer-events:none}
.start-screen.hidden{display:none}
.start-inner{
  display:flex;flex-direction:column;align-items:center;gap:1.4rem;
  transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .5s ease;
}
.start-screen.closing .start-inner{transform:scale(1.12);opacity:0}

/* Entrée du diaporama (léger zoom) quand l'accueil se referme */
@keyframes diapoIntro{from{transform:scale(1.06)}to{transform:scale(1)}}
.stage.intro{animation:diapoIntro 1.3s cubic-bezier(.22,1,.36,1)}
.start-settings{
  border:0;background:transparent;cursor:pointer;color:var(--text);
  opacity:.7;font:inherit;font-size:1rem;padding:.6rem 1rem;border-radius:999px;
  transition:opacity .2s ease,background .2s ease;
}
.start-settings:hover{opacity:1;background:rgba(255,255,255,.08)}
.start-countdown{
  min-height:1.2em;font-size:.95rem;opacity:.55;letter-spacing:.02em;
}
.start-countdown b{color:var(--accent);opacity:1;font-variant-numeric:tabular-nums}
.start-btn{
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  padding:2.4rem 3.2rem;border:0;border-radius:24px;cursor:pointer;
  color:var(--text);font:inherit;
  background:rgba(20,20,26,.85);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 20px 70px rgba(0,0,0,.55);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.start-btn:hover,.start-btn:active{
  transform:translateY(-3px);
  border-color:var(--accent);
  box-shadow:0 24px 90px rgba(230,57,70,.35);
}
.start-icon{
  width:88px;height:88px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent);color:#fff;font-size:2.4rem;
  padding-left:.25rem;
  box-shadow:0 0 30px rgba(230,57,70,.6);
}
.start-label{font-size:1.6rem;font-weight:600}
.start-sub{opacity:.65;font-size:1rem;letter-spacing:.02em}

/* ---------- Panneau de réglages ---------- */
.settings{
  position:absolute;inset:0;z-index:40;
  display:flex;align-items:center;justify-content:center;
  background:rgba(6,6,9,.9);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;
  padding:1.5rem;
}
.settings.open{opacity:1;visibility:visible}
.settings-box{
  width:min(460px,100%);
  background:rgba(20,20,26,.96);
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;padding:1.8rem;
  box-shadow:0 20px 80px rgba(0,0,0,.6);
}
.settings-box h2{font-size:1.4rem;margin-bottom:1.2rem}
.setting-row{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.08);
}
.setting-row > span:first-child{font-size:1rem;opacity:.9}
.setting-field{display:flex;align-items:center;gap:.4rem;opacity:.7;flex:0 0 auto}
.setting-field input{
  width:70px;padding:.5rem .6rem;text-align:right;
  background:rgba(255,255,255,.06);color:var(--text);
  border:1px solid rgba(255,255,255,.16);border-radius:10px;
  font:inherit;font-size:1.05rem;
}
.setting-field input:focus{outline:none;border-color:var(--accent)}
.settings-actions{display:flex;gap:.8rem;align-items:center;margin-top:1.5rem;flex-wrap:wrap}
.settings-actions-left{display:flex;gap:.8rem;margin-right:auto;flex-wrap:wrap}
.settings-reset{background:transparent;border:1px solid rgba(255,255,255,.18) !important;opacity:.85}
.settings-reset:hover{background:rgba(255,255,255,.08);opacity:1}
.settings-actions button{
  border:0;border-radius:12px;cursor:pointer;font:inherit;font-size:1rem;
  padding:.7rem 1.4rem;color:var(--text);transition:background .2s ease,transform .15s ease;
}
.settings-cancel{background:rgba(255,255,255,.08)}
.settings-cancel:hover{background:rgba(255,255,255,.16)}
.settings-save{background:var(--accent);font-weight:600}
.settings-save:hover{transform:translateY(-1px)}

/* ---------- Notification (toast) ---------- */
.toast{
  position:absolute;left:50%;top:2rem;transform:translate(-50%,-16px);z-index:50;
  max-width:90vw;padding:.8rem 1.3rem;border-radius:999px;
  background:rgba(20,20,26,.92);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  color:var(--text);font-size:1rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,transform .3s ease,visibility .3s ease;
}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ---------- Zone invisible retour accueil (bas gauche) ---------- */
.home-hotspot{
  position:absolute;left:0;bottom:0;width:90px;height:90px;z-index:15;
  border:0;background:transparent;padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- Zones tactiles ---------- */
.tap{position:absolute;top:0;bottom:0;width:33%;z-index:4;
  border:0;background:transparent;cursor:pointer}
.tap-left{left:0}
.tap-right{right:0}

/* ---------- Curseur masqué en veille ---------- */
.frame:not(.show-ui){cursor:none}

/* ---------- Petits écrans ---------- */
@media (max-width:640px){
  .card{right:1rem;bottom:1rem;padding:.7rem .8rem;gap:.7rem}
  .card .qr{width:96px;height:96px}
  .card-text strong{font-size:1rem}
  .card-text span{font-size:.8rem}
  .controls{bottom:1rem}
  .controls button{width:46px;height:46px;font-size:1.3rem}
  .catalog-grid{column-width:120px;column-gap:.4rem;padding:1rem}
  .thumb{margin-bottom:.4rem}
  .catalog-bar strong{font-size:1.05rem}
}