/* ==========================================================================
   Alive — la page Conception
   À gauche, les fonctionnalités en cartes ; à droite, fixée, la maquette du
   site, sobre, en blanc. On glisse une carte sur la maquette pour l'ajouter.
   Sur téléphone, une barre en bas ouvre la maquette.
   ========================================================================== */

.conception-entete { padding-bottom: clamp(30px, 4vw, 56px); }
.conception { padding-bottom: clamp(90px, 10vw, 150px); position: relative; }
.conception__grille {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: clamp(30px, 4.5vw, 72px); align-items: start;
}
.conception__famille { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }

/* ==========================================================================
   LES CARTES
   ========================================================================== */
.cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; grid-auto-flow: row dense; }
.carte {
  position: relative;
  background: var(--noir-2); border: 1px solid var(--trait); border-radius: 6px;
  cursor: grab; user-select: none;
  transition: border-color .3s var(--doux), transform .35s var(--sortie), opacity .3s, background .3s;
}
.carte:hover { border-color: var(--trait-fort); }
.carte:hover { transform: translateY(-2px); }
.carte.source { opacity: 0; transition: none; }
.carte.souleve { opacity: .3; transform: scale(.97); }
.carte.choisie { border-color: color-mix(in srgb, var(--blanc) 55%, transparent); }

.carte__face { position: relative; aspect-ratio: 1; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 16px 16px 12px; }
.carte__icone {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 6px; background: var(--noir-3); border: 1px solid var(--trait);
  transition: background .3s, color .3s;
}
.carte__icone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.carte.choisie .carte__icone { background: var(--blanc); color: var(--noir); border-color: transparent; }
.carte__ajout {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--trait-fort); background: none; color: var(--blanc); cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .2s var(--sortie);
}
.carte__ajout:hover { border-color: var(--blanc); }
.carte__ajout:active { transform: scale(.9); }
.carte__ajout svg, .carte__ouvrir svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carte.choisie .carte__ajout { background: var(--blanc); color: var(--noir); border-color: var(--blanc); }
.carte__texte { align-self: end; padding-bottom: 12px; }
.carte__texte h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.carte__texte p { margin-top: 5px; font-size: .84rem; line-height: 1.4; color: var(--gris); }
.carte__ouvrir {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin: 0 -4px; padding: 9px 4px 2px; border: 0; border-top: 1px solid var(--trait); background: none;
  color: var(--gris-bas); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
  transition: color .2s;
}
.carte__ouvrir:hover { color: var(--blanc); }
.carte__ouvrir svg { transition: transform .35s var(--sortie); }
.carte__ouvrir:hover svg { transform: translateY(1px); }

/* la carte qu'on glisse */
.fantome {
  position: fixed; z-index: 500; margin: 0; pointer-events: none;
  background: var(--noir-2); border: 1px solid var(--blanc); border-radius: 6px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.8);
  will-change: transform;
}
.fantome .carte__ouvrir { visibility: hidden; }
body.en-glisse, body.en-glisse * { cursor: grabbing !important; user-select: none; }

/* ==========================================================================
   LA MAQUETTE : un site en blanc, sans décor
   ========================================================================== */
.conception__apercu { position: sticky; top: 88px; display: grid; gap: 16px; }
.apercu__fermer { display: none; }
.site {
  --s-trait: #E7E6E2; --s-fond: #F5F4F1; --s-gris: #8B8B94; --s-texte: #18181B;
  background: #fff; color: var(--s-texte); border-radius: 12px; overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 40px 80px -30px rgba(0,0,0,.8);
  transition: box-shadow .3s var(--doux), transform .4s var(--sortie);
}
.site__barre { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #F1F0EE; border-bottom: 1px solid var(--s-trait); }
.site__barre i { width: 9px; height: 9px; border-radius: 50%; background: #D9D8D4; }
.site__barre span { margin: 0 auto; transform: translateX(-16px); padding: 2px 34px; border-radius: 5px; background: #fff; font-size: 10.5px; color: var(--s-gris); }
.site__page { display: grid; gap: 10px; padding: 14px; max-height: min(620px, calc(100svh - 230px)); overflow: auto; scrollbar-width: thin; }
.site__entete { display: flex; align-items: center; gap: 8px; }
.site__logo { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #CFCEC9; }
.site__entete b { font-size: 12px; font-weight: 600; color: #3F3F46; }
.site__menu { margin-left: auto; display: grid; gap: 3px; }
.site__menu i { width: 16px; height: 2px; border-radius: 2px; background: #CFCEC9; }
.site__une { display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; height: 140px; padding: 16px; border-radius: 8px; background: var(--s-fond); }
.site__trait { height: 8px; border-radius: 4px; background: #DDDCD7; }
.site__trait--court { width: 30%; height: 6px; background: #E6E5E1; }
.site__trait--titre { width: 72%; height: 12px; background: #CFCEC9; }
.site__trait--titre2 { width: 48%; height: 12px; background: #CFCEC9; }
.site__bouton { align-self: flex-start; margin-top: 4px; padding: 7px 12px; border-radius: 4px; background: var(--s-texte); color: #fff; font-size: 10.5px; font-weight: 600; }
.site__socle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.site__inclus { padding: 8px 10px; border-radius: 6px; background: var(--s-fond); font-size: 11px; color: #6B6B74; }
.site__modules { display: grid; gap: 6px; }
.site__modules:empty { display: none; }
.site__module {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 8px 8px 9px; border-radius: 8px;
  background: #fff; border: 1px solid var(--s-trait); box-shadow: 0 1px 2px rgba(0,0,0,.04);
  font-size: 12px;
}
.site__module b { flex: 1; font-weight: 600; }
.site__module-icone { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; background: var(--s-fond); }
.site__module-icone svg { width: 15px; height: 15px; fill: none; stroke: var(--s-texte); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.site__module button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: #A1A1AA; font-size: 15px; line-height: 1; cursor: pointer; }
.site__module button:hover { background: var(--s-fond); color: var(--s-texte); }
.site__module.arrive { animation: module-arrive .55s var(--sortie); }
.site__module.attend { opacity: 0; animation: none; }
@keyframes module-arrive { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
.site__depot {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 18px 12px; border: 1.5px dashed #D6D5D1; border-radius: 8px;
  font-size: 11.5px; color: #A1A1AA; text-align: center;
  transition: border-color .25s, color .25s, background .25s, padding .3s var(--sortie);
}
.site__depot svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.site__depot.discret { padding: 11px 12px; }
.pour-doigt { display: none; }
@media (hover: none) { .pour-souris { display: none; } .pour-doigt { display: inline; } }
.site.cible .site__depot { border-color: #8B8B94; color: #52525B; background: #FAFAF9; }
.site.dessus { box-shadow: 0 0 0 2px var(--blanc), 0 40px 80px -30px rgba(0,0,0,.8); transform: scale(1.01); }
.site.dessus .site__depot { border-color: var(--s-texte); color: var(--s-texte); background: var(--s-fond); }

.selection { display: grid; gap: 6px; padding: 0 2px; }
.selection b { font-size: 1rem; font-weight: 700; }
.selection p { font-size: .85rem; color: var(--gris); line-height: 1.45; }
.selection .btn { justify-content: center; margin-top: 8px; }

/* ==========================================================================
   DEMANDE PARTICULIÈRE, DÉPÔT DE FICHIERS, ENVOI
   ========================================================================== */
.bloc-perso {
  margin-top: clamp(40px, 5vw, 60px);
  display: grid; gap: 12px;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--trait); border-radius: 6px; background: var(--noir-2);
  transition: border-color .3s;
}
.bloc-perso.choisi { border-color: color-mix(in srgb, var(--blanc) 55%, transparent); }
.bloc-perso .btn { justify-self: start; }
.bloc-perso textarea, .bloc-perso input:not([type="file"]) {
  width: 100%; padding: 12px 14px;
  background: var(--noir); color: var(--blanc);
  border: 1px solid var(--trait-fort); border-radius: 0;
  font: inherit; font-size: .95rem; resize: vertical;
}
.bloc-perso textarea:focus, .bloc-perso input:focus { outline: none; border-color: var(--blanc); }
.depot {
  position: relative; display: grid; place-items: center; text-align: center;
  padding: 26px 16px; border: 1px dashed var(--trait-fort);
  color: var(--gris); font-size: .9rem; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.depot b { color: var(--blanc); }
.depot:hover, .depot.survol { border-color: var(--blanc); background: color-mix(in srgb, var(--blanc) 4%, transparent); }
.depot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.depot__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.depot__liste li { display: grid; grid-template-columns: 44px minmax(0, 1fr) 28px; align-items: center; gap: 12px; font-size: .84rem; }
.depot__liste li > span:not(.depot__pdf) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depot__liste img, .depot__pdf { width: 44px; height: 44px; object-fit: cover; display: grid; place-items: center; background: var(--noir-3); font-size: .66rem; font-weight: 700; color: var(--gris); }
.depot__liste button { background: none; border: 0; color: var(--gris); font-size: 1.2rem; cursor: pointer; }
.envoi__champs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.envoi .btn { justify-self: start; }
.envoi__etat { min-height: 1.3em; color: var(--blanc); }

/* ==========================================================================
   LA GRANDE FENÊTRE D'UNE FONCTIONNALITÉ
   Elle naît de la carte (conception.js) et s'ouvre par-dessus la page.
   ========================================================================== */
.loupe { position: fixed; inset: 0; z-index: 600; display: grid; place-items: center; padding: 24px; }
.loupe[hidden] { display: none; }
.loupe__voile { position: absolute; inset: 0; background: rgba(4, 4, 6, .74); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.loupe__panneau {
  position: relative; width: min(1040px, 100%); max-height: calc(100svh - 48px); overflow: auto;
  transform-origin: 0 0; border-radius: 14px;
  background: var(--noir-2); border: 1px solid var(--trait-fort);
  box-shadow: 0 50px 120px -30px rgba(0,0,0,.9);
}
.loupe__contenu { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.loupe__anim { padding: 14px; }
.loupe__texte { display: grid; align-content: center; gap: 14px; padding: 40px 36px; border-left: 1px solid var(--trait); }
.loupe__texte h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.loupe__resume { color: var(--blanc); font-size: 1.05rem; line-height: 1.4; }
.loupe__detail { color: var(--gris); font-size: .93rem; line-height: 1.6; }
.loupe__ajouter { justify-self: start; margin-top: 8px; }
.loupe__fermer {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--trait-fort); background: var(--noir-2); color: var(--blanc); font-size: 1.3rem; cursor: pointer;
}
.loupe__fermer:hover { border-color: var(--blanc); }
body.loupe-ouverte { overflow: hidden; }

/* ==========================================================================
   ANIMATIONS
   Du motion design à plat : une scène de 48 × 30 em. Chaque scène avance par
   étapes (classes e1, e2… posées par conception.js) ; les transitions font le
   reste, avec de petits décalages pour que chaque élément arrive à son tour.
   Seul le plan de salle est en 3D.
   ========================================================================== */
.mo { container-type: inline-size; }
.mo__scene {
  position: relative; aspect-ratio: 48 / 30; overflow: hidden; font-size: calc(100cqw / 48);
  border-radius: 10px; color: var(--blanc);
  background: radial-gradient(80% 70% at 50% 40%, #16161C, #0B0B0E);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; line-height: 1.3;
}
.mo__scene * { box-sizing: border-box; }
.mo svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mo-av {
  display: inline-grid; place-items: center; width: 3em; height: 3em; border-radius: 50%;
  background: #2A2A33; color: #D4D3CF; font-style: normal; font-size: 1em; font-weight: 700; letter-spacing: .02em;
}
.mo { --sortie: cubic-bezier(.22, 1, .36, 1); --ressort: cubic-bezier(.34, 1.56, .64, 1); }

/* ---------- Promouvoir la soirée : la frise ---------- */
.pr-frise { position: absolute; left: 5em; right: 5em; top: 23.5em; height: 3.4em; }
.pr-frise__fil { position: absolute; left: 0; right: 0; top: .55em; height: .22em; border-radius: 1em; background: rgba(255,255,255,.12); }
.pr-frise__fil::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #4F4FC4, #9A6BA8, #F59B3C); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--sortie); }
.mo--promo.e2 .pr-frise__fil::after { transform: scaleX(.333); }
.mo--promo.e3 .pr-frise__fil::after { transform: scaleX(.666); }
.mo--promo.e4 .pr-frise__fil::after { transform: scaleX(1); }
.pr-etape { position: absolute; top: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: .5em; font-size: .95em; color: var(--gris-bas); transition: color .4s; }
.pr-etape--0 { left: 0; } .pr-etape--1 { left: 33.3%; } .pr-etape--2 { left: 66.6%; } .pr-etape--3 { left: 100%; }
.pr-etape i { width: 1.3em; height: 1.3em; border-radius: 50%; background: #0B0B0E; box-shadow: inset 0 0 0 .2em rgba(255,255,255,.25); transition: background .4s, box-shadow .4s, transform .5s var(--ressort); }
.mo--promo.e1 .pr-etape--0, .mo--promo.e2 .pr-etape--1, .mo--promo.e3 .pr-etape--2, .mo--promo.e4 .pr-etape--3 { color: var(--blanc); }
.mo--promo.e1 .pr-etape--0 i, .mo--promo.e2 .pr-etape--1 i, .mo--promo.e3 .pr-etape--2 i, .mo--promo.e4 .pr-etape--3 i { background: #F59B3C; box-shadow: 0 0 0 .4em rgba(245,155,60,.2); transform: scale(1.15); }
.pr-msg {
  position: absolute; width: 16.5em; padding: .8em 1em .9em; border-radius: .9em .9em .9em .25em;
  background: #F1F0ED; color: #18181B; font-size: 1.05em; line-height: 1.35;
  box-shadow: 0 1.2em 2.4em -1em rgba(0,0,0,.7);
  opacity: 0; transform: translateY(1em) scale(.95); transform-origin: left bottom;
  transition: opacity .35s ease, transform .7s var(--ressort);
}
.pr-msg small { display: flex; align-items: center; gap: .5em; margin-bottom: .35em; font-size: .78em; color: #6B6B74; }
.pr-canal { padding: .1em .55em; border-radius: 1em; background: #E4E4E7; color: #3F3F46; font-weight: 700; }
.pr-canal--wa { background: #25D366; color: #fff; }
.pr-msg--0 { left: 2.5em; top: 3.2em; }
.pr-msg--1 { left: 13.5em; top: 11.2em; }
.pr-msg--3 { left: 28em; top: 3.2em; }
.pr-complet {
  position: absolute; left: 27.2em; top: 16.2em; display: flex; align-items: center; gap: .45em;
  padding: .5em 1em .5em .7em; border-radius: 2em; background: #F59B3C; color: #111; font-weight: 800; font-size: 1.05em;
  opacity: 0; transform: scale(.7); transition: opacity .3s ease, transform .6s var(--ressort);
}
.pr-complet svg { width: 1.1em; height: 1.1em; }
.mo--promo.e1 .pr-msg--0, .mo--promo.e2 .pr-msg--1, .mo--promo.e4 .pr-msg--3 { opacity: 1; transform: none; }
.mo--promo.e3 .pr-complet { opacity: 1; transform: none; }

/* ---------- Relances : l'onde passe, trois clients reviennent ---------- */
.re-seg { position: absolute; left: 3em; top: 3em; padding: .45em 1em; border-radius: 2em; background: rgba(79,70,229,.25); box-shadow: inset 0 0 0 1px rgba(129,131,255,.5); font-size: .95em; font-weight: 600; }
.re-rang { position: absolute; left: 4em; right: 4em; top: 10.5em; height: 6em; display: flex; justify-content: space-between; align-items: center; }
.re-client { position: relative; }
.re-client .mo-av { width: 4.4em; height: 4.4em; font-size: 1.05em; opacity: .32; filter: grayscale(1); transition: opacity .5s, filter .5s, background .6s, color .6s, box-shadow .6s, transform .6s var(--ressort); }
.re-client b { position: absolute; right: -.2em; bottom: -.2em; width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; background: #22C55E; color: #fff; box-shadow: 0 0 0 .2em #0B0B0E; transform: scale(0); transition: transform .5s var(--ressort); }
.re-client b svg { width: 1em; height: 1em; }
.re-onde { position: absolute; left: -2em; top: 50%; width: 5em; height: 5em; margin-top: -2.5em; border-radius: 50%; background: radial-gradient(closest-side, rgba(37,211,102,.75), rgba(37,211,102,0)); opacity: 0; transition: transform 1.8s cubic-bezier(.45, 0, .25, 1), opacity .3s; }
.mo--relances.e1 .re-onde { transform: translateX(40em); opacity: 1; }
.mo--relances.e2 .re-onde { opacity: 0; }
.mo--relances.e1 .re-client .mo-av { opacity: 1; filter: none; box-shadow: 0 0 0 .2em rgba(37,211,102,.7); }
.re-client--1 .mo-av { transition-delay: .3s; } .re-client--2 .mo-av { transition-delay: .6s; } .re-client--3 .mo-av { transition-delay: .9s; } .re-client--4 .mo-av { transition-delay: 1.2s; } .re-client--5 .mo-av { transition-delay: 1.5s; }
.mo--relances.e2 .re-client:not(.re-client--revient) .mo-av { opacity: .3; box-shadow: none; transition-delay: 0s; }
.mo--relances.e2 .re-client--revient .mo-av { background: linear-gradient(135deg, #4F4FC4, #9A6BA8, #F59B3C); color: #fff; box-shadow: none; transform: translateY(-.6em); transition-delay: 0s; }
.mo--relances.e2 .re-client--revient b { transform: scale(1); }
.mo--relances.e2 .re-client--2 b { transition-delay: .15s; } .mo--relances.e2 .re-client--4 b { transition-delay: .3s; }
.re-bulle { position: absolute; left: 3em; top: 20em; max-width: 19em; padding: .8em 1em; border-radius: .9em .9em .9em .25em; background: #DCF8C6; color: #111; font-size: 1.05em; opacity: 0; transform: translateY(.8em); transition: opacity .4s, transform .6s var(--sortie); }
.mo--relances.e1 .re-bulle { opacity: 1; transform: none; }
.re-bilan { position: absolute; right: 3em; top: 21em; font-size: 1.2em; color: var(--gris); opacity: 0; transform: translateY(.8em); transition: opacity .4s, transform .6s var(--sortie); }
.re-bilan b { font-size: 2em; color: var(--blanc); margin-right: .15em; }
.mo--relances.e3 .re-bilan { opacity: 1; transform: none; }

/* ---------- Chefs de rang : les zones se dessinent, le plan part ---------- */
.ch-plan { position: absolute; left: 2.5em; top: 2.5em; width: 27em; height: 25em; border-radius: .7em; background: #F4F3F0; overflow: hidden; }
.ch-scene { position: absolute; left: 7em; right: 7em; top: .8em; height: 2.4em; display: grid; place-items: center; border-radius: .3em; background: #E4E3DF; color: #A1A1AA; font-size: .75em; font-weight: 700; letter-spacing: .15em; }
.ch-table { position: absolute; left: calc(2.4em + var(--c) * 6.1em); top: calc(6em + var(--l) * 6em); width: 3.8em; height: 2.8em; border-radius: .45em; background: #fff; box-shadow: inset 0 0 0 1px #CFCEC9; z-index: 2; }
.ch-zone { position: absolute; top: 4.8em; height: 19.2em; border-radius: .7em; z-index: 1; clip-path: inset(0 100% 0 0 round .7em); transition: clip-path .8s cubic-bezier(.65, 0, .35, 1); }
.ch-zone--0 { left: 1.4em; width: 5.8em; background: rgba(99,102,241,.2); box-shadow: inset 0 0 0 1.5px rgba(99,102,241,.6); }
.ch-zone--1 { left: 7.5em; width: 11.9em; background: rgba(245,155,60,.2); box-shadow: inset 0 0 0 1.5px rgba(245,155,60,.7); }
.ch-zone--2 { left: 19.7em; width: 5.8em; background: rgba(168,85,247,.2); box-shadow: inset 0 0 0 1.5px rgba(168,85,247,.6); }
.mo--chefs.e1 .ch-zone--0, .mo--chefs.e2 .ch-zone--1, .mo--chefs.e3 .ch-zone--2 { clip-path: inset(0 0 0 0 round .7em); }
.ch-chef { position: absolute; top: 21.6em; z-index: 3; opacity: 0; transform: translateY(-2em); transition: opacity .3s, transform .6s var(--ressort) .25s; }
.ch-chef .mo-av { width: 2.6em; height: 2.6em; font-size: .85em; color: #fff; box-shadow: 0 .4em 1em -.3em rgba(0,0,0,.4); }
.ch-chef--0 { left: 3.2em; } .ch-chef--0 .mo-av { background: #6366F1; }
.ch-chef--1 { left: 12.3em; } .ch-chef--1 .mo-av { background: #F59B3C; }
.ch-chef--2 { left: 21.5em; } .ch-chef--2 .mo-av { background: #A855F7; }
.mo--chefs.e1 .ch-chef--0, .mo--chefs.e2 .ch-chef--1, .mo--chefs.e3 .ch-chef--2 { opacity: 1; transform: none; }
.ch-tels { position: absolute; left: 32.5em; right: 2.5em; top: 5.5em; display: grid; gap: 1.2em; }
.ch-tel { display: flex; align-items: center; gap: .9em; padding: .8em .9em; border-radius: .8em; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); opacity: 0; transform: translateX(2em); transition: opacity .4s, transform .6s var(--sortie); }
.ch-tel i { width: 1.6em; height: 2.7em; border-radius: .35em; box-shadow: inset 0 0 0 .18em #6B6B74; }
.ch-tel b { flex: 1; font-size: 1em; }
.ch-tel em { width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; background: #22C55E; color: #fff; transform: scale(0); transition: transform .5s var(--ressort); }
.ch-tel em svg { width: 1em; height: 1em; }
.mo--chefs.e4 .ch-tel { opacity: 1; transform: none; }
.mo--chefs.e4 .ch-tel--1 { transition-delay: .12s; } .mo--chefs.e4 .ch-tel--2 { transition-delay: .24s; }
.mo--chefs.e5 .ch-tel em { transform: scale(1); }
.mo--chefs.e5 .ch-tel--1 em { transition-delay: .15s; } .mo--chefs.e5 .ch-tel--2 em { transition-delay: .3s; }

/* ---------- Check-in : le QR code, la coche, l'arrivée ---------- */
.po-tel { position: absolute; left: 4.5em; top: 2.5em; width: 14em; height: 25em; display: grid; justify-items: center; align-content: center; gap: 1.2em; border-radius: 2em; background: #121217; box-shadow: inset 0 0 0 .5em #1C1C22, inset 0 0 0 .55em rgba(255,255,255,.08); text-align: center; }
.po-tel small { font-size: .85em; color: var(--gris); }
.po-tel b { font-size: .95em; }
.po-qr { position: relative; width: 9em; height: 9em; border-radius: .6em; overflow: hidden; background: #fff; }
.po-qr__motif { position: absolute; inset: .7em; background: repeating-conic-gradient(#111 0 25%, #fff 0 50%) 0 0 / 1.52em 1.52em; }
.po-qr__motif::before, .po-qr__motif::after { content: ''; position: absolute; width: 2.6em; height: 2.6em; background: #fff; box-shadow: inset 0 0 0 .5em #111, inset 0 0 0 .9em #fff, inset 0 0 0 2em #111; }
.po-qr__motif::before { left: 0; top: 0; } .po-qr__motif::after { right: 0; bottom: 0; }
.po-qr__ligne { position: absolute; left: 0; right: 0; top: 0; height: .35em; background: #F59B3C; box-shadow: 0 0 1em .3em rgba(245,155,60,.7); opacity: 0; transition: transform 1.1s cubic-bezier(.45, 0, .55, 1), opacity .2s; }
.mo--porte.e1 .po-qr__ligne { opacity: 1; transform: translateY(8.6em); }
.mo--porte.e2 .po-qr__ligne { opacity: 0; }
.po-qr__ok { position: absolute; inset: 0; display: grid; place-items: center; background: #22C55E; color: #fff; opacity: 0; transition: opacity .35s; }
.po-qr__ok svg { width: 4.5em; height: 4.5em; stroke-width: 2.4; stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset .5s var(--sortie) .15s; }
.mo--porte.e2 .po-qr__ok { opacity: 1; }
.mo--porte.e2 .po-qr__ok svg { stroke-dashoffset: 0; }
.po-liste { position: absolute; left: 22.5em; right: 3em; top: 3.5em; display: grid; gap: .7em; }
.po-tete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .3em; }
.po-tete b { font-size: 1.2em; }
.po-tete span { color: var(--gris); font-size: 1em; display: inline-flex; gap: .25em; }
.po-tete em { font-style: normal; font-weight: 700; color: var(--blanc); font-size: 1.3em; transition: opacity .3s, transform .5s var(--sortie); }
.po-apres { position: absolute; opacity: 0; transform: translateY(.6em); color: #22C55E !important; }
.po-tete span { position: relative; }
.mo--porte.e2 .po-avant { opacity: 0; transform: translateY(-.6em); }
.mo--porte.e2 .po-apres { opacity: 1; transform: none; }
.po-ligne { display: flex; align-items: center; gap: .8em; padding: .7em .8em; border-radius: .7em; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); transition: margin .6s var(--sortie), opacity .4s, background 1.4s; }
.po-ligne .mo-av { width: 2.6em; height: 2.6em; font-size: .85em; }
.po-ligne span { flex: 1; font-weight: 600; font-size: 1em; }
.po-ligne small { display: block; font-weight: 400; color: var(--gris); font-size: .85em; }
.po-ligne em { width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center; background: rgba(34,197,94,.2); color: #22C55E; }
.po-ligne em svg { width: .95em; height: .95em; }
.po-ligne--nouvelle { margin-top: -4.5em; opacity: 0; }
.mo--porte.e3 .po-ligne--nouvelle { margin-top: 0; opacity: 1; background: rgba(34,197,94,.14); }

/* ---------- Bouteilles : le panier, la jauge ---------- */
.bo-carte { position: absolute; left: 50%; top: 50%; width: 26em; transform: translate(-50%, -50%); padding: 1.4em 1.5em 1.5em; border-radius: 1em; background: #F1F0ED; color: #18181B; box-shadow: 0 2em 4em -2em rgba(0,0,0,.8); display: grid; gap: .1em; }
.bo-titre { font-size: 1.2em; margin-bottom: .6em; letter-spacing: -.02em; }
.bo-ligne { display: grid; grid-template-columns: 1fr auto 1.8em; gap: .8em; align-items: center; padding: .6em 0; border-top: 1px solid #E2E1DC; font-size: 1em; opacity: .3; transition: opacity .4s; }
.bo-ligne span:nth-child(2) { font-variant-numeric: tabular-nums; color: #52525B; }
.bo-ligne i { width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px #CFCEC9; color: transparent; transition: background .35s, box-shadow .35s, color .35s, transform .5s var(--ressort); }
.bo-ligne i svg { width: .95em; height: .95em; }
.mo--bouteilles.e1 .bo-ligne--0, .mo--bouteilles.e2 .bo-ligne--1, .mo--bouteilles.e3 .bo-ligne--2, .mo--bouteilles.e4 .bo-ligne--3 { opacity: 1; }
.mo--bouteilles.e1 .bo-ligne--0 i, .mo--bouteilles.e2 .bo-ligne--1 i, .mo--bouteilles.e3 .bo-ligne--2 i, .mo--bouteilles.e4 .bo-ligne--3 i { background: #F59B3C; box-shadow: none; color: #fff; transform: scale(1.12); }
.bo-min { display: flex; justify-content: space-between; align-items: center; margin-top: .9em; font-size: .95em; color: #52525B; }
.bo-min__ok { display: inline-flex; align-items: center; gap: .3em; color: #16A34A; font-weight: 700; opacity: 0; transform: translateX(.6em); transition: opacity .3s, transform .5s var(--sortie); }
.bo-min__ok svg { width: 1em; height: 1em; }
.mo--bouteilles.e5 .bo-min__ok { opacity: 1; transform: none; }
.bo-jauge { height: .6em; margin-top: .5em; border-radius: 1em; background: #E2E1DC; overflow: hidden; }
.bo-jauge i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4F4FC4, #9A6BA8, #F59B3C); transition: width .8s var(--sortie), background .4s; }
.mo--bouteilles.e1 .bo-jauge i { width: 42%; }
.mo--bouteilles.e2 .bo-jauge i { width: 66%; }
.mo--bouteilles.e3 .bo-jauge i { width: 73%; }
.mo--bouteilles.e4 .bo-jauge i { width: 100%; }
.mo--bouteilles.e5 .bo-jauge i { background: #16A34A; }

/* ---------- Promoteurs : un lien chacun, des barres qui montent ---------- */
.pm-ligne { position: absolute; left: 3em; right: 3em; display: grid; grid-template-columns: 3.4em 13em 1fr 6.5em; align-items: center; gap: 1.2em; opacity: 0; transform: translateY(.8em); transition: opacity .4s, transform .6s var(--sortie); }
.pm-ligne--0 { top: 4.5em; } .pm-ligne--1 { top: 12em; } .pm-ligne--2 { top: 19.5em; }
.pm-ligne .mo-av { width: 3.4em; height: 3.4em; }
.pm-nom { font-size: 1.15em; font-weight: 700; }
.pm-nom small { display: block; margin-top: .15em; font-size: .75em; font-weight: 500; color: var(--gris); font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.pm-barre { height: 1em; border-radius: 1em; background: rgba(255,255,255,.07); overflow: hidden; }
.pm-barre i { display: block; width: 0; height: 100%; border-radius: inherit; background: #D4D3CF; transition: width 1.1s var(--sortie); }
.pm-compte { font-size: 1.05em; text-align: right; opacity: 0; transition: opacity .4s; }
.mo--promoteurs.e1 .pm-ligne { opacity: 1; transform: none; }
.mo--promoteurs.e1 .pm-ligne--1 { transition-delay: .12s; } .mo--promoteurs.e1 .pm-ligne--2 { transition-delay: .24s; }
.mo--promoteurs.e2 .pm-barre i { width: var(--w); }
.mo--promoteurs.e2 .pm-ligne--1 .pm-barre i { transition-delay: .15s; } .mo--promoteurs.e2 .pm-ligne--2 .pm-barre i { transition-delay: .3s; }
.mo--promoteurs.e3 .pm-compte { opacity: 1; }
.mo--promoteurs.e3 .pm-ligne--tete .pm-barre i { background: linear-gradient(90deg, #4F4FC4, #9A6BA8, #F59B3C); }
.mo--promoteurs.e3 .pm-ligne--tete .mo-av { background: #F59B3C; color: #111; }
.mo--promoteurs.e3 .pm-ligne--tete .pm-compte { color: #F59B3C; }

/* ---------- Vue depuis la table : du plan à la vue ---------- */
.vu-plan { position: absolute; left: 50%; top: 50%; width: 26em; height: 18em; margin: -9em 0 0 -13em; border-radius: .7em; background: #F4F3F0; transform-origin: 69% 78%; transition: transform 1.3s cubic-bezier(.65, 0, .35, 1), opacity .5s .8s; }
.vu-scene { position: absolute; left: 5em; right: 5em; top: 1em; height: 2.4em; border-radius: .3em; background: #E4E3DF; }
.vu-table { position: absolute; left: calc(2.6em + var(--c) * 6em); top: calc(6em + var(--l) * 5.2em); width: 3.6em; height: 2.6em; border-radius: .45em; background: #fff; box-shadow: inset 0 0 0 1px #CFCEC9; }
.vu-table--choisie { background: #F59B3C; box-shadow: none; transition: box-shadow .5s; }
.mo--vue.e1 .vu-table--choisie { box-shadow: 0 0 0 .5em rgba(245,155,60,.3); }
.mo--vue.e2 .vu-plan { transform: scale(4.5); opacity: 0; }
.vu-vue { position: absolute; inset: 0; opacity: 0; transform: scale(1.12); background: linear-gradient(#07070C, #161222 60%, #0B0B0E); transition: opacity .7s .9s, transform 1.6s var(--sortie) .9s; overflow: hidden; }
.mo--vue.e2 .vu-vue { opacity: 1; transform: none; }
.vu-faisceau { position: absolute; top: -3em; left: 50%; width: 14em; height: 24em; margin-left: -7em; transform-origin: 50% 0; clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); background: linear-gradient(rgba(154,107,168,.55), rgba(154,107,168,0)); mix-blend-mode: screen; animation: faisceau 3.2s ease-in-out infinite alternate; }
.vu-faisceau--0 { animation-delay: -1s; background: linear-gradient(rgba(79,79,196,.6), rgba(79,79,196,0)); }
.vu-faisceau--2 { animation-delay: -2.2s; background: linear-gradient(rgba(245,155,60,.45), rgba(245,155,60,0)); }
@keyframes faisceau { from { transform: rotate(-26deg); } to { transform: rotate(26deg); } }
.vu-estrade { position: absolute; left: 11em; right: 11em; top: 15.5em; height: 2.2em; background: linear-gradient(#34343F, #1E1E26); border-radius: .2em; }
.vu-dj { position: absolute; left: 50%; top: 13.3em; width: 6em; height: 2.4em; margin-left: -3em; border-radius: .2em; background: #4F4FC4; box-shadow: 0 0 3em rgba(79,79,196,.9); }
.vu-foule { position: absolute; left: -2em; right: -2em; top: 17.5em; height: 5em; background: radial-gradient(circle at 50% 100%, #050508 1.6em, transparent 1.7em) 0 0 / 3.4em 5em repeat-x, radial-gradient(circle at 50% 100%, #08080C 1.9em, transparent 2em) 1.7em .8em / 3.4em 5em repeat-x; }
.vu-bord { position: absolute; left: -3em; right: -3em; bottom: -1em; height: 6.5em; border-radius: 50% 50% 0 0 / 1.5em 1.5em 0 0; background: linear-gradient(#26262E, #141418); box-shadow: 0 -1px 0 rgba(255,255,255,.12); }
.vu-bouteille { position: absolute; bottom: 4.5em; width: 1.4em; height: 5em; border-radius: .5em .5em .2em .2em; background: linear-gradient(90deg, #1b1b20, #3a3a44 45%, #15151a); }
.vu-bouteille::before { content: ''; position: absolute; left: .45em; top: -1.4em; width: .5em; height: 1.6em; border-radius: .2em; background: #2c2c34; }
.vu-bouteille--0 { left: 30em; } .vu-bouteille--1 { left: 33em; height: 4.2em; background: linear-gradient(90deg, #6b4a14, #F59B3C 45%, #6b4a14); }
.vu-legende { position: absolute; left: 1.6em; bottom: 1.4em; padding: .4em .9em; border-radius: 2em; background: rgba(255,255,255,.1); backdrop-filter: blur(6px); font-size: .95em; font-weight: 600; }

/* ---------- Analyses : les chiffres, les zones, la courbe ---------- */
.an-kpis { position: absolute; left: 3em; right: 3em; top: 2.6em; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.an-kpis span { padding: .8em 1em; border-radius: .7em; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); opacity: 0; transform: translateY(.7em); transition: opacity .4s, transform .6s var(--sortie); }
.an-kpis small { display: block; font-size: .8em; color: var(--gris); }
.an-kpis b { display: block; margin-top: .15em; font-size: 1.6em; letter-spacing: -.03em; }
.mo--analyses.e1 .an-kpis span { opacity: 1; transform: none; }
.mo--analyses.e1 .an-kpis span:nth-child(2) { transition-delay: .1s; } .mo--analyses.e1 .an-kpis span:nth-child(3) { transition-delay: .2s; }
.an-barres { position: absolute; left: 4em; right: 4em; bottom: 3em; height: 10.5em; display: flex; align-items: flex-end; gap: 2.2em; }
.an-barre { position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.an-barre i { width: 100%; height: 0; border-radius: .4em .4em .1em .1em; background: rgba(255,255,255,.2); transition: height 1s var(--sortie), background .5s; }
.an-barre small { position: absolute; bottom: -1.8em; font-size: .8em; color: var(--gris); }
.mo--analyses.e2 .an-barre i { height: var(--h); }
.an-barre--1 i { transition-delay: .08s; } .an-barre--2 i { transition-delay: .16s; } .an-barre--3 i { transition-delay: .24s; } .an-barre--4 i { transition-delay: .32s; }
.mo--analyses.e3 .an-barre--tete i { background: linear-gradient(#F59B3C, #9A6BA8); }
.an-bulle { position: absolute; left: 50%; top: -1.2em; transform: translate(-50%, .6em); padding: .35em .8em; border-radius: 2em; background: #F59B3C; color: #111; font-style: normal; font-weight: 800; font-size: .9em; white-space: nowrap; opacity: 0; transition: opacity .3s, transform .5s var(--ressort); }
.mo--analyses.e3 .an-bulle { opacity: 1; transform: translate(-50%, 0); }
.an-courbe { position: absolute; left: 4em; top: 9.6em; width: calc(100% - 8em); height: 4.2em; overflow: visible; }
.an-courbe { clip-path: inset(0 100% 0 0); transition: clip-path 1.8s var(--sortie) .3s; }
.an-courbe path { fill: none; stroke: #F1F0ED; stroke-width: 1.6; vector-effect: non-scaling-stroke; opacity: .85; }
.mo--analyses.e2 .an-courbe { clip-path: inset(0 0 0 0); }

/* ---------- Le plan de salle, en 3D ---------- */
.mo--plan3d .a3d {
  position: relative; aspect-ratio: 48 / 30; display: grid; place-items: center; overflow: hidden;
  perspective: 1000px; border-radius: 10px;
  background: radial-gradient(70% 70% at 50% 45%, #1A1A22, #0B0B0E);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.a3d__sol {
  position: relative; width: 200px; height: 170px; transform-style: preserve-3d;
  transform: scale(1.35) rotateX(58deg) rotateZ(-38deg);
  background: #1B1B22; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 0 60px rgba(79,79,196,.25);
  animation: tourne 9s ease-in-out infinite alternate;
}
@keyframes tourne { from { transform: scale(1.35) rotateX(58deg) rotateZ(-42deg); } to { transform: scale(1.35) rotateX(56deg) rotateZ(-28deg); } }
.a3d__piste {
  position: absolute; left: 36px; top: 76px; width: 128px; height: 34px; border-radius: 3px;
  background:
    linear-gradient(rgba(170,160,255,.25) 1px, transparent 1px) 0 0 / 16px 17px,
    linear-gradient(90deg, rgba(170,160,255,.25) 1px, transparent 1px) 0 0 / 16px 17px,
    #2B2550;
  box-shadow: 0 0 30px rgba(120,110,255,.35);
}
.bloc { --dessus: #F1F0ED; --avant: #BDBCC4; --gauche: #9C9BA5; position: absolute; left: var(--x); top: var(--y); width: var(--l); height: var(--p); transform-style: preserve-3d; }
.bloc > b { position: absolute; display: block; }
.bloc > b:nth-child(1) { inset: 0; transform: translateZ(var(--h)); background: var(--dessus); border-radius: 1px; }
.bloc > b:nth-child(2) { left: 0; top: 100%; width: 100%; height: var(--h); transform-origin: top; transform: rotateX(90deg); background: var(--avant); }
.bloc > b:nth-child(3) { top: 0; right: 100%; width: var(--h); height: 100%; transform-origin: right; transform: rotateY(90deg); background: var(--gauche); }
.bloc--scene { --dessus: #4A4A57; --avant: #373742; --gauche: #2D2D36; }
.bloc--dj { --dessus: #7B7BEA; --avant: #5A5AD0; --gauche: #4747AE; }
.bloc--banq { --dessus: #5C5C68; --avant: #45454F; --gauche: #3A3A43; }
.bloc--vedette { --dessus: #F59B3C; --avant: #C8752A; --gauche: #A65F20; animation: leve 4s var(--doux) infinite; }
.bloc--vedette-banq { --dessus: #9A5E28; --avant: #7A4A1F; --gauche: #6A401B; }
@keyframes leve { 0%, 20% { transform: none; } 32%, 85% { transform: translateZ(5px); } 100% { transform: none; } }
.plat { position: absolute; left: var(--x); top: var(--y); transform-style: preserve-3d; }
/* en 3D, une opacité aplatit l'élément : le mouvement sur le parent, le fondu sur l'enfant */
.epingle { animation: epingle 4s var(--sortie) infinite; }
.epingle em {
  display: block; white-space: nowrap; transform: translate(-50%, -100%) rotateZ(38deg) rotateX(-58deg); transform-origin: bottom center;
  padding: 3px 8px; border-radius: 12px; background: #F59B3C; color: #111; font-style: normal; font-size: 9px; font-weight: 800;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
  opacity: 0; animation: epingle-voit 4s var(--doux) infinite;
}
@keyframes epingle { 0%, 28% { transform: translateZ(26px); } 38% { transform: translateZ(40px); } 48%, 100% { transform: translateZ(34px); } }
@keyframes epingle-voit { 0%, 28% { opacity: 0; } 36%, 85% { opacity: 1; } 100% { opacity: 0; } }

/* ==========================================================================
   TABLETTE ET TÉLÉPHONE
   ========================================================================== */
.devis-barre { display: none; }
@media (max-width: 1180px) {
  .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .conception__grille { grid-template-columns: minmax(0, 1fr); }
  .cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .conception { padding-bottom: calc(110px + (100lvh - 100svh)); }
  .conception__apercu {
    display: none;
    position: fixed; inset: 0; z-index: 300; top: 0;
    overflow: auto; padding: 64px var(--gouttiere) 30px;
    background: var(--noir); align-content: start;
  }
  .conception__apercu.ouvert { display: grid; }
  .apercu__fermer {
    display: grid; place-items: center;
    position: absolute; top: 14px; right: var(--gouttiere);
    width: 40px; height: 40px; border: 1px solid var(--trait-fort); background: none;
    color: var(--blanc); font-size: 1.4rem; cursor: pointer;
  }
  .site__page { max-height: none; }
  .devis-barre {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; z-index: 200; left: 12px; right: 12px;
    bottom: calc(12px + (100lvh - 100svh) + env(safe-area-inset-bottom));
    padding: 10px 10px 10px 16px;
    background: color-mix(in srgb, var(--noir-2) 88%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--trait-fort); border-radius: 6px;
    font-size: .82rem; color: var(--gris);
  }
  .devis-barre b { color: var(--blanc); font-size: 1rem; margin-right: 4px; }
}
@media (max-width: 640px) {
  .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .carte__face { padding: 12px 12px 8px; }
  .carte__icone { width: 38px; height: 38px; }
  .carte__ajout { top: 10px; right: 10px; width: 30px; height: 30px; }
  .carte__texte p { display: none; }
  .carte__texte h3 { font-size: .92rem; }
  .carte__ouvrir span { font-size: .72rem; }
  .envoi__champs { grid-template-columns: 1fr; }
  .envoi .btn, .bloc-perso .btn { justify-self: stretch; justify-content: center; }
}
@media (max-width: 800px) {
  .loupe { padding: 10px; }
  .loupe__contenu { grid-template-columns: minmax(0, 1fr); }
  .loupe__texte { border-left: 0; border-top: 1px solid var(--trait); padding: 22px 20px 26px; }
  .loupe__anim { padding: 10px 10px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .a3d *, .mo * { animation: none !important; transition: none !important; }
}