/* Page de réservation exposant */

.resa-tete{background:var(--nuit);color:var(--blanc);padding:clamp(130px,15vw,180px) 0 0}
.resa-tete .chapo{color:#d9d6cf;margin-top:18px}
.progression{display:flex;gap:6px;list-style:none;margin-top:44px;overflow-x:auto;scrollbar-width:none}
.progression button{background:none;border:0;color:#8a867e;display:flex;align-items:center;gap:10px;padding:12px 16px 12px 0;font-weight:700;white-space:nowrap}
.progression b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:2px solid currentColor;font-family:var(--f-mono);font-size:.85rem;transition:background .3s,color .3s,border-color .3s}
.progression li.fait button{color:#d9d6cf}
.progression li.fait b{background:var(--bleu-clair);border-color:var(--bleu-clair);color:var(--blanc)}
.progression li.actif button{color:var(--blanc)}
.progression li.actif b{background:var(--metre);border-color:var(--metre);color:var(--nuit)}
.progression button:disabled{cursor:default}
/* Progression : la mini-pelle avance sur la piste jusqu'à l'étape en cours, la piste se remplit derrière elle */
.regle{position:relative;height:74px;margin-top:10px;background:linear-gradient(#ffffff1f,#ffffff1f) 0 100%/100% 8px no-repeat}
.regle-jauge{position:absolute;left:0;bottom:0;height:8px;width:20%;background:repeating-linear-gradient(-45deg,var(--metre) 0 10px,var(--nuit) 10px 20px);transition:width .9s var(--ease)}
.pelle-jauge{position:absolute;bottom:8px;left:20%;transform:translateX(-100%);transition:left .9s var(--ease);height:66px}
.pelle-jauge svg.pelle{height:66px;width:auto;display:block;overflow:visible}
@media (max-width:760px){.regle{height:56px}.pelle-jauge,.pelle-jauge svg.pelle{height:48px}}

.resa{padding:48px 0 120px}
.resa-grille{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;align-items:start}
.etape-resa h2{margin-bottom:10px}
.aide-etape{color:#57534b;margin-bottom:28px;max-width:62ch}
.erreur-etape{display:none;color:var(--rouge);font-weight:700;margin-top:18px}
.erreur-etape.vu{display:block}
.facultatif{font-weight:400;color:#7a766e}

/* Étape 1 : salons */
.choix-salons{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.salon-carte{position:relative;border-radius:24px;overflow:hidden;background:var(--blanc);border:3px solid transparent;text-align:left;padding:0;display:flex;flex-direction:column;transition:border-color .2s,transform .25s var(--ease),box-shadow .25s}
.salon-carte:hover{transform:translateY(-4px);box-shadow:0 18px 40px #11111118}
.salon-carte[aria-pressed=true]{border-color:var(--metre);box-shadow:0 0 0 4px #F7B33455}
.salon-carte .img{aspect-ratio:16/10;overflow:hidden;position:relative}
.salon-carte img{width:100%;height:100%;object-fit:cover}
.salon-carte .coche{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:#ffffffcc;display:grid;place-items:center;color:transparent;transition:background .2s,color .2s,transform .3s var(--ease)}
.salon-carte[aria-pressed=true] .coche{background:var(--metre);color:var(--nuit);transform:scale(1.1)}
.salon-carte .coche svg{width:20px;height:20px}
.salon-carte .num{position:absolute;left:16px;bottom:10px;font-family:var(--f-titre);font-weight:800;font-size:3rem;color:var(--metre);line-height:1;-webkit-text-stroke:2px var(--nuit)}
.salon-carte .txt{padding:18px 20px 22px;display:flex;flex-direction:column;gap:4px}
.salon-carte h3{font-family:var(--f-titre);font-weight:800;text-transform:uppercase;font-size:1.15rem}
.salon-carte .d{font-family:var(--f-mono);font-size:.82rem;color:var(--bleu);font-weight:700}
.salon-carte .l{font-size:.92rem;color:#57534b}
.salon-carte .dispo{margin-top:8px;font-size:.85rem;font-weight:700;color:var(--rouge)}
.pass{display:flex;gap:16px;align-items:center;margin-top:20px;padding:18px 22px;border-radius:20px;background:var(--metre);color:var(--nuit);transform-origin:left;transform:scaleX(.6);opacity:0;pointer-events:none;transition:transform .5s var(--ease),opacity .3s}
.pass.vu{transform:none;opacity:1}
.pass svg{width:30px;height:30px}
.pass b{display:block;font-family:var(--f-titre);font-weight:800;text-transform:uppercase}

/* Étape 2 : plan */
.onglets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.onglets button{border:2px solid #dedad2;background:var(--blanc);border-radius:999px;padding:.6em 1.2em;font-weight:700;display:flex;gap:8px;align-items:center}
.onglets button[aria-selected=true]{background:var(--nuit);color:var(--blanc);border-color:var(--nuit)}
.onglets .pastille{background:var(--metre);color:var(--nuit);border-radius:999px;font-size:.75rem;padding:1px 8px;font-family:var(--f-mono)}
.legende{display:flex;gap:18px;flex-wrap:wrap;font-size:.88rem;color:#57534b;margin-bottom:16px}
.legende span{display:flex;align-items:center;gap:8px}
.legende i{width:16px;height:16px;border-radius:4px;display:inline-block}
.l-libre{background:var(--blanc);border:2px solid var(--bleu)}
.l-pris{background:repeating-linear-gradient(45deg,#c8cfdc 0 4px,#e2e6ee 4px 8px)}
.l-choisi{background:var(--metre);border:2px solid var(--nuit)}
.l-zone{background:var(--bleu)}

.plan{background:var(--nuit);border-radius:28px;padding:clamp(16px,3vw,32px);color:var(--blanc);position:relative;overflow:hidden}
.plan::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#ffffff14 1px,transparent 1px);background-size:16px 16px;pointer-events:none}
.plan h4{font-family:var(--f-mono);font-size:.8rem;color:#b3afa6;font-weight:500;margin:0 0 10px;position:relative;display:flex;justify-content:space-between}
.zone-plan{position:relative;border:2px dashed #ffffff30;border-radius:18px;padding:14px;margin-bottom:18px}
.hall{display:grid;grid-template-columns:90px repeat(10,1fr) 90px;gap:6px;align-items:stretch}
.allee{grid-column:2 / span 10;text-align:center;font-family:var(--f-mono);font-size:.72rem;color:#8a867e;padding:8px 0;letter-spacing:.3em}
.bloc{border-radius:10px;background:var(--bleu);display:grid;place-items:center;text-align:center;font-family:var(--f-titre);font-weight:800;text-transform:uppercase;font-size:.6rem;line-height:1.1;padding:6px;color:#ece9e2}
.bloc svg{width:18px;height:18px;margin:0 auto 4px;color:var(--metre)}
.bloc.ring{background:var(--rouge)}
.bloc.ring svg{color:var(--blanc)}
.ext{display:grid;grid-template-columns:repeat(10,1fr) 1.4fr;gap:6px}
.stand{width:100%;aspect-ratio:1/1;align-self:center;border-radius:8px;border:2px solid #8a867e;background:#ffffff0f;color:#ece9e2;font-family:var(--f-mono);font-size:.72rem;font-weight:700;display:grid;place-items:center;position:relative;transition:transform .15s var(--ease),background .15s,border-color .15s;min-width:0;padding:0}
.stand:hover:not(:disabled){background:#ffffff24;border-color:var(--metre);transform:scale(1.08);z-index:2}
.stand:disabled{background:repeating-linear-gradient(45deg,#ffffff14 0 4px,transparent 4px 8px);border-color:transparent;color:#ffffff40;cursor:not-allowed}
.stand.choisi{background:var(--metre);border-color:var(--metre);color:var(--nuit);animation:pose .35s var(--ease)}
.stand.ext-stand{border-color:#9bd27f}
@keyframes pose{0%{transform:scale(.7)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.stand.apparait{animation:apparait .45s var(--ease) both}
@keyframes apparait{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.bulle{position:fixed;z-index:95;pointer-events:none;background:var(--blanc);color:var(--nuit);border-radius:12px;padding:10px 14px;font-size:.85rem;box-shadow:0 10px 30px #11111140;opacity:0;transform:translateY(6px);transition:opacity .15s,transform .15s;white-space:nowrap}
.bulle.vu{opacity:1;transform:none}
.bulle b{font-family:var(--f-titre);font-weight:800}
.selection{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;min-height:38px}
.selection .puce{display:inline-flex;align-items:center;gap:8px;background:var(--metre);border-radius:999px;padding:6px 8px 6px 14px;font-weight:700;font-size:.9rem}
.selection .puce button{border:0;background:var(--nuit);color:var(--blanc);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.8rem}
.selection .vide{color:#7a766e;font-style:italic}
.lien-copier{margin-top:14px;background:none;border:0;color:var(--bleu);font-weight:700;display:flex;gap:8px;align-items:center;text-decoration:underline;text-underline-offset:4px}
.lien-copier svg{width:18px;height:18px}

/* Étape 3 : options */
.options{display:grid;gap:10px}
.option{display:grid;grid-template-columns:48px 1fr auto;gap:16px;align-items:center;background:var(--blanc);border-radius:20px;padding:16px 18px;border:2px solid transparent;transition:border-color .2s}
.option.on{border-color:var(--metre)}
.option .ic{width:48px;height:48px;border-radius:14px;background:var(--craie);display:grid;place-items:center;color:var(--bleu);transition:background .2s,color .2s}
.option.on .ic{background:var(--metre);color:var(--nuit)}
.option .ic svg{width:22px;height:22px}
.option b{display:block}
.option small{color:#7a766e;font-family:var(--f-mono)}
.interrupteur{position:relative;width:58px;height:32px;border-radius:999px;background:#dedad2;border:0;transition:background .25s}
.interrupteur::after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:var(--blanc);box-shadow:0 2px 6px #0003;transition:transform .3s var(--ease)}
.interrupteur[aria-checked=true]{background:var(--bleu)}
.interrupteur[aria-checked=true]::after{transform:translateX(26px)}
.compteur{display:flex;align-items:center;gap:6px;background:var(--craie);border-radius:999px;padding:4px}
.compteur button{width:32px;height:32px;border-radius:50%;border:0;background:var(--blanc);font-weight:800;font-size:1.1rem;color:var(--nuit)}
.compteur button:disabled{opacity:.35}
.compteur output{min-width:24px;text-align:center;font-family:var(--f-mono);font-weight:700}

/* Étape 5 */
.recap-detail{background:var(--blanc);border-radius:24px;padding:clamp(20px,3vw,32px)}
.recap-detail h3{font-family:var(--f-titre);font-weight:800;text-transform:uppercase;font-size:1.05rem;margin:18px 0 8px;display:flex;justify-content:space-between;gap:12px}
.recap-detail h3:first-child{margin-top:0}
.recap-detail .ligne{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed #11111120;font-size:.95rem}
.recap-detail .ligne b{font-family:var(--f-mono)}
.recap-detail .contact{margin-top:20px;padding-top:16px;border-top:2px solid var(--nuit);color:#57534b;font-size:.95rem}

/* Navigation */
.nav-etapes{display:flex;justify-content:space-between;gap:12px;margin-top:36px;padding-top:24px;border-top:1px solid #1111111f}
.nav-etapes #precedent{visibility:hidden}
.nav-etapes.avec-retour #precedent{visibility:visible}

/* Récapitulatif */
.recap{position:sticky;top:96px}
.recap-in{background:var(--nuit);color:var(--blanc);border-radius:28px;padding:28px}
.recap-tete{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;color:#b3afa6}
.recap-bascule{display:none;background:none;border:1px solid #ffffff40;color:var(--blanc);border-radius:999px;padding:4px 12px;font-size:.85rem}
.recap-lignes{display:grid;gap:4px;max-height:42vh;overflow:auto}
.recap-lignes .salon{font-family:var(--f-titre);font-weight:800;text-transform:uppercase;font-size:.9rem;margin-top:12px;color:var(--metre)}
.recap-lignes .salon:first-child{margin-top:0}
.recap-lignes .l{display:flex;justify-content:space-between;gap:12px;font-size:.9rem;color:#d9d6cf}
.recap-lignes .l b{font-family:var(--f-mono);font-weight:500;color:var(--blanc)}
.recap-lignes .remise{color:#7ee08a}
.recap-lignes .remise b{color:#7ee08a}
.recap-lignes .vide{color:#8a867e;font-style:italic}
.recap-total{margin-top:18px;padding-top:16px;border-top:1px solid #ffffff26;display:grid;gap:6px}
.recap-total > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.recap-total b{font-family:var(--f-titre);font-weight:800;font-size:2rem;letter-spacing:-.03em;color:var(--metre)}
.recap-total .petit{font-size:.88rem;color:#b3afa6}
.recap-total .acompte{margin-top:10px;background:#ffffff10;border-radius:14px;padding:12px 14px;font-size:.9rem}
.recap-total .acompte b{font-size:1.2rem;color:var(--blanc)}
.recap-note{display:flex;gap:8px;align-items:center;margin-top:16px;font-size:.85rem;color:#b3afa6}
.recap-note svg{width:18px;height:18px;color:#7ee08a}

/* Confirmation */
.confirmation{position:relative;text-align:left}
.confirmation canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:96}
.actions-fin{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
body.fini .recap,body.fini .nav-etapes{display:none}
body.fini .resa-grille{grid-template-columns:1fr}

@media (max-width:1100px){
  .resa-grille{grid-template-columns:1fr}
  .recap{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:70}
  .recap-in{border-radius:24px 24px 0 0;padding:16px 20px;box-shadow:0 -10px 30px #11111140}
  .recap-bascule{display:block}
  .recap-lignes,.recap-total .petit,.recap-note{display:none}
  .recap.ouvert .recap-lignes{display:grid}
  .recap.ouvert .recap-total .petit,.recap.ouvert .recap-note{display:flex}
  .recap-total{margin-top:0;padding-top:0;border:0}
  .recap.ouvert .recap-total{margin-top:14px;padding-top:12px;border-top:1px solid #ffffff26}
  .recap-tete{margin-bottom:6px}
  .recap-total .acompte{display:none}
  .recap.ouvert .recap-total .acompte{display:flex}
  .resa{padding-bottom:200px}
  .pied{padding-bottom:200px}
}
@media (max-width:760px){
  .choix-salons{grid-template-columns:1fr}
  .salon-carte{flex-direction:row}
  .salon-carte .img{aspect-ratio:auto;width:38%;flex:none}
  .hall{grid-template-columns:repeat(10,1fr)}
  .hall .bloc{grid-column:span 5;min-height:54px}
  .hall .allee{grid-column:1 / -1}
  .ext{grid-template-columns:repeat(10,1fr)}
  .ext .bloc{grid-column:1 / -1;min-height:54px}
  .stand{font-size:.58rem;border-radius:6px}
  .option{grid-template-columns:40px 1fr;row-gap:10px}
  .option .ic{width:40px;height:40px}
  .option > :last-child{grid-column:2}
  .etapes{grid-template-columns:1fr!important}
}

/* Plan indicatif : mention non contractuelle ; modules non disponibles simplement grisés */
.plan-indicatif{display:flex;gap:10px;align-items:flex-start;background:#F7B33422;border-left:4px solid var(--metre);padding:10px 14px;margin:0 0 16px;font-size:.9rem;color:#ece9e2}
.plan-indicatif svg{width:18px;height:18px;flex:none;color:var(--metre);margin-top:2px}
.stand:disabled{opacity:.35;background:#ffffff0a;border-color:#ffffff22;color:#ffffff55;cursor:not-allowed;text-decoration:none}