/* ==========================================================================
   Alive — le produit, tel qu'il apparaît sur le site vitrine
   1. Le logiciel (back-office) : un seul jeu de composants, en clair, avec la
      police du système — c'est un outil, pas une page de marque.
      Tout est mesuré en « em » : chaque maquette règle sa taille de police
      d'après la largeur de son cadre (unités cqw), et tout suit.
   2. Les plans de salle : vue de dessus (logiciel, tablette) et 3D simple
      (téléphone). Ils sont générés par outils/generer-plans.py.
   3. Les appareils du haut de page : ordinateur, tablette, téléphone.
   4. Gérer : la grande fenêtre, le tiroir de la demande, le curseur.
   5. Fidéliser : l'interface des clients, puis le motion design.
   ========================================================================== */

/* ==========================================================================
   1. LE LOGICIEL
   ========================================================================== */
.app {
  --a-fond: #F6F6F4; --a-carte: #FFFFFF; --a-trait: #E7E6E2; --a-trait-2: #F0EFEC;
  --a-texte: #18181B; --a-gris: #6B6B74; --a-gris-2: #A1A1AA;
  --a-indigo: #4F46E5; --a-orange: #F59B3C;
  position: relative;
  display: grid; grid-template-columns: 17em minmax(0, 1fr);
  background: var(--a-fond); color: var(--a-texte);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif;
  line-height: 1.35; letter-spacing: -.005em;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.app b { font-weight: 600; }
.app-ico { width: 1.35em; height: 1.35em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-ico--petit { width: .95em; height: .95em; }

/* le menu */
.app__nav { display: flex; flex-direction: column; gap: 1.5em; padding: 1.2em .9em 1.1em; min-width: 0; }
.app__club {
  display: flex; align-items: center; gap: .75em;
  padding: .5em .6em; border-radius: .7em;
  background: var(--a-carte); box-shadow: 0 0 0 1px var(--a-trait), 0 1px 2px rgba(0,0,0,.04);
}
.app__club > span:nth-child(2) { flex: 1; min-width: 0; }
.app__club b { display: block; font-size: 1.1em; }
.app__club small { display: block; font-size: .95em; color: var(--a-gris); }
.app__club .app-ico { color: var(--a-gris-2); }
.app__logo {
  width: 2.4em; height: 2.4em; border-radius: .55em; flex-shrink: 0;
  display: grid; place-items: center;
  background: #18181B; color: #fff; font-size: .95em; font-weight: 700; letter-spacing: .02em;
}
.app__groupe { display: grid; gap: .15em; }
.app__groupe small { display: block; padding: 0 .75em .35em; font-size: .92em; font-weight: 500; color: var(--a-gris-2); }
.app__lien {
  display: flex; align-items: center; gap: .7em;
  padding: .5em .75em; border-radius: .5em;
  font-size: 1.08em; color: #52525B; white-space: nowrap;
}
.app__lien .app-ico { width: 1.25em; height: 1.25em; color: #8B8B94; }
.app__lien.actif { background: var(--a-carte); color: var(--a-texte); font-weight: 600; box-shadow: 0 0 0 1px var(--a-trait), 0 1px 2px rgba(0,0,0,.04); }
.app__lien.actif .app-ico { color: var(--a-texte); }
.app__lien em { margin-left: auto; font-style: normal; font-size: .8em; font-weight: 700; padding: .1em .55em; border-radius: 1em; background: #FFEDD5; color: #C2410C; }
.app__moi { margin-top: auto; display: flex; align-items: center; gap: .7em; padding: 0 .5em; }
.app__moi .av { width: 2.3em; height: 2.3em; }
.app__moi b { display: block; font-size: 1.05em; }
.app__moi small { display: block; font-size: .92em; color: var(--a-gris); }

/* le cadre principal, posé comme une feuille sur le fond */
.app__principal {
  display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0;
  margin: .6em .6em .6em 0; border-radius: .8em;
  background: var(--a-carte); box-shadow: 0 0 0 1px var(--a-trait), 0 1px 3px rgba(0,0,0,.04);
  overflow: hidden;
}
.app__barre { display: flex; align-items: center; gap: 1.2em; height: 3.8em; padding: 0 1.6em; border-bottom: 1px solid var(--a-trait-2); }
.app__fil { display: flex; align-items: center; gap: .45em; font-size: 1.08em; color: var(--a-gris); white-space: nowrap; }
.app__fil b { color: var(--a-texte); }
.app__fil .app-ico { color: var(--a-gris-2); }
.app__recherche {
  margin-left: auto; display: flex; align-items: center; gap: .55em;
  width: 22em; height: 2.5em; padding: 0 .5em 0 .75em;
  border-radius: .55em; box-shadow: 0 0 0 1px var(--a-trait);
  font-size: 1em; color: var(--a-gris-2); white-space: nowrap;
}
.app__recherche .app-ico { width: 1.15em; height: 1.15em; }
.app__recherche kbd { margin-left: auto; font: inherit; font-size: .85em; padding: .05em .45em; border-radius: .3em; box-shadow: 0 0 0 1px var(--a-trait); }
.app__cloche { position: relative; display: grid; color: var(--a-gris); }
.app__cloche i { position: absolute; top: .05em; right: .05em; width: .45em; height: .45em; border-radius: 50%; background: var(--a-orange); box-shadow: 0 0 0 .15em #fff; }

.app__page { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 1.4em; padding: 1.7em 1.9em; min-height: 0; overflow: hidden; }
.app__tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; }
.app__tete h5 { margin: 0; font-size: 1.85em; font-weight: 650; letter-spacing: -.022em; line-height: 1.1; }
.app__tete p { margin: .25em 0 0; font-size: 1.05em; color: var(--a-gris); }
.app__actions { display: flex; align-items: center; gap: .6em; }
.app__seg { display: inline-flex; padding: .22em; border-radius: .6em; background: #F1F1EF; }
.app__seg span { padding: .4em .95em; border-radius: .45em; font-size: 1.02em; font-weight: 500; color: var(--a-gris); transition: background .3s, color .3s, box-shadow .3s; }
.app__seg .actif { background: #fff; color: var(--a-texte); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.03); }
.app__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  height: 2.65em; padding: 0 1.05em; border-radius: .55em;
  background: #fff; box-shadow: 0 0 0 1px var(--a-trait), 0 1px 2px rgba(0,0,0,.04);
  font-size: 1.02em; font-weight: 600; color: var(--a-texte); white-space: nowrap;
  transition: transform .15s, background .3s;
}
.app__btn .app-ico { width: 1.15em; height: 1.15em; }
.app__btn--plein { background: #18181B; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.app__btn--nu { background: none; box-shadow: none; color: var(--a-gris); }
.app__btn.appuye { transform: scale(.95); background: var(--a-indigo); }

/* les chiffres de la soirée : une seule bande, séparée par des filets */
.app__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: .8em; box-shadow: 0 0 0 1px var(--a-trait); }
.app__kpis > div { padding: 1em 1.25em; min-width: 0; }
.app__kpis > div + div { border-left: 1px solid var(--a-trait); }
.app__kpis span { display: block; font-size: .98em; color: var(--a-gris); }
.app__kpis b { display: block; margin: .2em 0 .25em; font-size: 1.85em; font-weight: 650; letter-spacing: -.025em; font-variant-numeric: tabular-nums; transition: color .5s; }
.app__kpis b.change { color: var(--a-indigo); }
.app__kpis small { display: block; font-size: .92em; color: var(--a-gris); white-space: nowrap; }
.app__kpis small.hausse { color: #15803D; }
.app__jauge { display: block; height: .4em; margin-top: .5em; border-radius: 1em; background: #F0EFEC; overflow: hidden; }
.app__jauge i { display: block; height: 100%; border-radius: inherit; background: var(--a-indigo); transition: width .8s var(--sortie); }

.app__duo { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 1.2em; min-height: 0; }
.app__carte { border-radius: .8em; background: #fff; box-shadow: 0 0 0 1px var(--a-trait); overflow: hidden; min-height: 0; }
.app__carte-tete { display: flex; justify-content: space-between; align-items: center; padding: .85em 1.1em; border-bottom: 1px solid var(--a-trait-2); }
.app__carte-tete b { font-size: 1.08em; }
.legende { display: flex; align-items: center; gap: .45em; font-size: .9em; color: var(--a-gris); }
.legende i { width: .75em; height: .75em; border-radius: .2em; margin-left: .5em; }
.l-vendue { background: #27272A; } .l-attente { background: var(--a-orange); } .l-libre { background: #fff; box-shadow: inset 0 0 0 1px #A1A1AA; }
.app__carte--plan { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.app__carte--plan .plan2d { width: 100%; height: 100%; padding: .6em; }

/* les tableaux */
.app__ligne {
  display: grid; align-items: center; gap: .9em;
  padding: .72em 1.15em; border-bottom: 1px solid var(--a-trait-2);
  font-size: 1.04em; white-space: nowrap;
}
.app__ligne > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.app__ligne--tete { padding-block: .6em; background: #FAFAF9; font-size: .94em; font-weight: 500; color: var(--a-gris); }
.app--soir .app__ligne { grid-template-columns: 2fr .75fr .5fr .8fr .85fr 1.25fr; }
.app__client { display: flex; align-items: center; gap: .65em; }
.app__client b { overflow: hidden; text-overflow: ellipsis; }
.num { font-variant-numeric: tabular-nums; }
.chip-table { font-style: normal; font-size: .9em; font-weight: 600; padding: .18em .5em; border-radius: .35em; background: #F1F1EF; color: #3F3F46; font-family: ui-monospace, 'SF Mono', Menlo, monospace; }

.av {
  width: 2.05em; height: 2.05em; border-radius: 50%; flex-shrink: 0;
  display: inline-grid; place-items: center;
  font-style: normal; font-size: .8em; font-weight: 700; letter-spacing: .01em;
  background: #EDEDEB; color: #52525B;
}
.app__client .av { font-size: .78em; width: 2.6em; height: 2.6em; }
.av--1 { background: #E0E7FF; color: #3730A3; } .av--2 { background: #FDE8D7; color: #9A3412; }
.av--3 { background: #F3E8FF; color: #6B21A8; } .av--4 { background: #DCFCE7; color: #166534; }
.av--5 { background: #E4E4E7; color: #3F3F46; } .av--6 { background: #FFE4E6; color: #9F1239; }
.tag { flex-shrink: 0; font-size: .8em; font-weight: 600; padding: .15em .5em; border-radius: .35em; }
.tag--h { background: #EEF2FF; color: #4338CA; } .tag--a { background: #FFF1E6; color: #B45309; } .tag--v { background: #18181B; color: #fff; }
.pill { display: inline-flex; align-items: center; gap: .4em; padding: .22em .6em .22em .5em; border-radius: 1em; font-size: .9em; font-weight: 600; white-space: nowrap; }
.pill i { width: .45em; height: .45em; border-radius: 50%; }
.pill--attente { background: #FFF4E5; color: #B45309; } .pill--attente i { background: var(--a-orange); }
.pill--acompte { background: #EEF2FF; color: #4338CA; } .pill--acompte i { background: #6366F1; }
.pill--paye { background: #ECFDF3; color: #15803D; } .pill--paye i { background: #22C55E; }

.app__ligne.nouvelle { animation: app-arrive .7s var(--sortie) both; background: #FFFBF5; transition: background 1.5s; }
.app__ligne.nouvelle.lue { background: #fff; }
@keyframes app-arrive { from { opacity: 0; transform: translateY(-1em); } }

/* la notification, en haut à droite */
.app__toast {
  position: absolute; bottom: 2em; right: 2em; z-index: 8;
  display: flex; align-items: center; gap: .8em;
  padding: .85em 1.2em .85em 1em; border-radius: .8em;
  background: #fff; color: #18181B;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 1em 2.5em -.6em rgba(0,0,0,.3);
  opacity: 0; transform: translateY(.8em) scale(.98);
  transition: opacity .35s var(--doux), transform .5s var(--sortie);
}
.app__toast.montre { opacity: 1; transform: none; }
.app__toast b { display: block; font-size: 1.05em; font-weight: 600; }
.app__toast small { display: block; font-size: .95em; color: #6B6B74; }
.app__toast-point { width: .7em; height: .7em; border-radius: 50%; background: var(--g3); box-shadow: 0 0 0 .3em rgba(245,155,60,.2); }

/* le curseur qui clique dans les maquettes */
.curseur {
  position: absolute; left: 60%; top: 60%; z-index: 20;
  width: 1.9em; height: 1.9em; pointer-events: none;
  opacity: 0; transition: opacity .3s, left .75s cubic-bezier(.45,0,.2,1), top .75s cubic-bezier(.45,0,.2,1);
}
.curseur svg { width: 100%; height: 100%; fill: #18181B; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 .15em .25em rgba(0,0,0,.3)); transition: transform .12s; }
.curseur.visible { opacity: 1; }
.curseur.clic svg { transform: scale(.82); }

/* ==========================================================================
   2. LES PLANS DE SALLE
   ========================================================================== */
/* ---------- Vue de dessus ---------- */
.plan2d { display: block; font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; }
.plan2d text { text-anchor: middle; dominant-baseline: central; }
.p-sol { fill: #FAFAF9; stroke: #C9C8C4; stroke-width: 2.2; }
.p-piste { fill: #F2F2F0; stroke: #D6D5D1; stroke-width: 1; stroke-dasharray: 3 3; }
.p-scene { fill: #E6E5E1; } .p-dj { fill: #B7B6B2; } .p-bar { fill: #E6E5E1; }
.p-legende { font-size: 5.5px; font-weight: 600; letter-spacing: .14em; fill: #A1A1AA; }
.p-legende--petit { font-size: 4.2px; }
.p-entree { stroke: #FAFAF9; stroke-width: 4; }
.p-banq { fill: #E4E3DF; }
.p-plateau { fill: #fff; stroke: #A1A1AA; stroke-width: .9; transition: fill .5s, stroke .5s; }
.p-num { font-size: 4.6px; font-weight: 700; fill: #52525B; transition: fill .5s; }
.p-table--vendue .p-plateau { fill: #27272A; stroke: #27272A; }
.p-table--vendue .p-num { fill: #fff; }
.p-table--vendue .p-banq { fill: #D4D3CF; }
.p-table--attente .p-plateau { fill: #FFF4E5; stroke: #F59B3C; stroke-width: 1.3; }
.p-table--attente .p-num { fill: #B45309; }
.p-table.eclat .p-plateau { animation: p-eclat 1s var(--sortie); }
@keyframes p-eclat { 0% { stroke: #4F46E5; stroke-width: 5; } 100% { stroke-width: .9; } }
/* les zones des chefs de rang, les noms, les arrivées : seulement pour l'équipe */
.p-zone, .p-client, .p-coche { opacity: 0; transition: opacity .6s var(--doux); }
.p-zone { stroke-width: 1; }
.p-zone--mia { fill: rgba(99,102,241,.1); stroke: rgba(99,102,241,.35); }
.p-zone--sofiane { fill: rgba(245,155,60,.12); stroke: rgba(245,155,60,.45); }
.p-zone--ines { fill: rgba(168,85,247,.1); stroke: rgba(168,85,247,.35); }
.p-client { font-size: 3.6px; font-weight: 600; fill: #3F3F46; }
.p-coche { fill: #22C55E; }
.equipe .p-zone, .equipe .p-client { opacity: 1; }
.equipe .p-table--arrivee .p-coche { opacity: 1; }

/* ---------- La 3D du téléphone : simple, lisible, en vraie perspective ---------- */
.plan3d { display: block; width: 100%; height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; }
.plan3d polygon { stroke: rgba(0,0,0,.35); stroke-width: .4; stroke-linejoin: round; }
.i-sol { fill: #26262E; stroke: #3A3A45 !important; stroke-width: 1 !important; }
.i-mur--fond { fill: #32323C; } .i-mur--gauche { fill: #2B2B34; }
.i-piste { fill: #2E2858; }
.i-piste-ligne { stroke: rgba(170,160,255,.28); stroke-width: .6; }
.i-scene.f-dessus { fill: #4A4A57; } .i-scene.f-avant { fill: #393944; } .i-scene.f-cote { fill: #30303A; }
.i-dj.f-dessus { fill: #7B7BEA; } .i-dj.f-avant { fill: #5A5AD0; } .i-dj.f-cote { fill: #4747AE; }
.i-bar.f-dessus { fill: #54545F; } .i-bar.f-avant { fill: #41414B; } .i-bar.f-cote { fill: #373740; }
.i-banq.f-dessus { fill: #7A7A86; } .i-banq.f-avant { fill: #5E5E69; } .i-banq.f-cote { fill: #51515B; }
.i-banq--vendue.f-dessus, .i-banq--attente.f-dessus { fill: #3E3E48; }
.i-banq--vendue.f-avant, .i-banq--attente.f-avant, .i-banq--vendue.f-cote, .i-banq--attente.f-cote { fill: #33333C; }
.i-banq--choisie.f-dessus { fill: #9A5E28; } .i-banq--choisie.f-avant { fill: #7A4A1F; } .i-banq--choisie.f-cote { fill: #6A401B; }
.i-table--libre.f-dessus { fill: #FFFFFF; } .i-table--libre.f-avant { fill: #CFCED6; } .i-table--libre.f-cote { fill: #ADACB6; }
.i-table--vendue.f-dessus, .i-table--attente.f-dessus { fill: #4B4B56; }
.i-table--vendue.f-avant, .i-table--attente.f-avant { fill: #3A3A44; }
.i-table--vendue.f-cote, .i-table--attente.f-cote { fill: #32323B; }
.i-table--choisie.f-dessus { fill: #F59B3C; } .i-table--choisie.f-avant { fill: #C8752A; } .i-table--choisie.f-cote { fill: #A65F20; }
.i-etiquette rect { fill: rgba(14,14,18,.9); stroke: rgba(255,255,255,.25); stroke-width: .6; }
.i-etiquette text { font-size: 7.6px; font-weight: 700; fill: #fff; text-anchor: middle; letter-spacing: -.01em; }
.i-etiquette circle { fill: #fff; }
.i-etiquette--choisie rect { fill: #F59B3C; stroke: none; }
.i-etiquette--choisie text { fill: #111; }
.i-pouls { fill: #F59B3C; animation: i-pouls 1.6s var(--doux) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes i-pouls { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }

/* l'écran « choisissez votre table » du téléphone */
.ecran--plan { background: #0A0A0D; }
.choix__tete { position: absolute; top: 46px; left: 16px; right: 16px; display: grid; gap: 4px; z-index: 2; }
.choix__tete small { font-size: 10.5px; color: rgba(255,255,255,.55); }
.choix__tete b { font-size: 18px; font-weight: 800; letter-spacing: -.035em; }
.choix__filtres { display: flex; gap: 5px; margin-top: 6px; }
.choix__filtres em { font-style: normal; font-size: 10px; font-weight: 600; padding: 4px 9px; border-radius: 20px; border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.7); }
.choix__filtres em.actif { background: #F1F0ED; color: #0B0B0E; border-color: transparent; }
.ecran--plan .ecran__ligne span { white-space: nowrap; }
.choix__salle { position: absolute; left: 4px; right: 4px; top: 128px; bottom: 150px; }
.zoom-table { position: absolute; left: 0; right: 0; top: 0; height: 56%; background: #0A0A0D; }
.zoom-table::after { content: ''; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, #050507); }

/* l'affiche de la soirée : un visuel graphique, plus de rendu 3D */
.affiche__visuel {
  background:
    radial-gradient(60% 50% at 30% 30%, rgba(79,79,196,.95), transparent 70%),
    radial-gradient(55% 45% at 75% 60%, rgba(245,155,60,.85), transparent 70%),
    radial-gradient(40% 40% at 55% 20%, rgba(154,107,168,.9), transparent 70%),
    #0b0b12 !important;
}
.affiche__visuel::before {
  content: 'NUIT\A BLANCHE'; white-space: pre; position: absolute; left: 16px; top: 62px;
  font-size: 50px; font-weight: 900; line-height: .82; letter-spacing: -.06em; color: rgba(255,255,255,.92); mix-blend-mode: overlay;
}

/* ==========================================================================
   3. LES APPAREILS DU HAUT DE PAGE
   ========================================================================== */
.vitrine {
  container-type: inline-size;
  position: relative;
  margin-top: clamp(36px, 6vh, 64px);
  padding-bottom: 7cqw;
}
.vitrine.rev { transform: translateY(40px); transition-duration: 1.3s; }
.vitrine.rev.vu { transform: none; }

/* L'ordinateur : 100 em de large */
.mac { position: relative; width: 74%; margin: 0 auto; font-size: calc(74cqw / 100); }
.mac__ecran {
  position: relative;
  padding: .85em .85em 1.05em;
  border-radius: 1.9em 1.9em .5em .5em;
  background: #0A0A0C;
  box-shadow: inset 0 0 0 .12em #3A3A40, 0 0 0 .08em #151518,
              0 5em 9em -3em rgba(0,0,0,.9), 0 0 16em -5em color-mix(in srgb, var(--g1) 55%, transparent);
}
.mac__encoche { position: absolute; top: .85em; left: 50%; z-index: 9; width: 10em; height: 1.35em; margin-left: -5em; border-radius: 0 0 .75em .75em; background: #0A0A0C; }
.mac .app { height: 60em; border-radius: .7em; }
.mac .app__barre { padding-right: 1.6em; }
.mac .app__toast { bottom: 2.6em; right: 2.4em; }
.mac__base {
  position: relative; height: 1.45em; width: 114%; margin-left: -7%;
  border-radius: .15em .15em 1.3em 1.3em / .15em .15em 1.1em 1.1em;
  background: linear-gradient(#EDEDEF, #C4C4C9 35%, #8D8D93 80%, #6E6E74);
  box-shadow: 0 2.5em 3em -2em rgba(0,0,0,.9);
}
.mac__base span { position: absolute; top: 0; left: 50%; width: 14em; height: .55em; margin-left: -7em; border-radius: 0 0 .7em .7em; background: linear-gradient(#9E9EA4, #C6C6CB); }

/* La tablette, à l'horizontale : 64 em de large */
.ipad {
  position: absolute; left: 0; bottom: 0; z-index: 3;
  width: 34%; font-size: calc(34cqw / 64);
  padding: 1.25em; border-radius: 2.8em;
  background: #0E0E11;
  box-shadow: inset 0 0 0 .14em #3A3A41, 0 0 0 .1em #070708, 0 3em 7em -2em rgba(0,0,0,.95);
}
.ipad::before { content: ''; position: absolute; top: 50%; left: .45em; width: .42em; height: .42em; margin-top: -.21em; border-radius: 50%; background: #25252B; }
.ipad__ecran { aspect-ratio: 1.43; border-radius: 1.3em; overflow: hidden; background: #fff; }

.equipe {
  --a-trait: #E7E6E2; --a-gris: #6B6B74;
  display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%;
  color: #18181B; font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; line-height: 1.3;
}
.equipe__barre { display: flex; justify-content: space-between; align-items: center; padding: 1.2em 1.5em; border-bottom: 1px solid var(--a-trait); }
.equipe__barre b { display: block; font-size: 1.4em; font-weight: 650; letter-spacing: -.02em; }
.equipe__barre small { display: block; font-size: 1em; color: var(--a-gris); }
.equipe__arrives { display: inline-flex; align-items: center; gap: .4em; padding: .45em .85em; border-radius: 2em; background: #ECFDF3; color: #15803D; font-size: 1.05em; font-weight: 600; }
.equipe__arrives .app-ico { stroke-width: 2.4; width: 1.1em; height: 1.1em; }
.equipe__arrives b { display: inline; font-size: 1em; font-variant-numeric: tabular-nums; }
.equipe__corps { display: grid; grid-template-columns: minmax(0, 1fr) 16em; min-height: 0; }
.equipe__plan { padding: .7em; min-height: 0; }
.equipe__plan .plan2d { width: 100%; height: 100%; }
.equipe__zones { display: grid; align-content: start; gap: .6em; padding: 1.1em 1em; border-left: 1px solid var(--a-trait); }

.zone { display: flex; align-items: center; gap: .65em; padding: .55em .65em; border-radius: .6em; }
.zone .av { width: 2.3em; height: 2.3em; font-size: .85em; color: #fff; }
.zone b { display: block; font-size: 1.05em; }
.zone small { display: block; font-size: .92em; color: #6B6B74; }
.zone--mia { background: rgba(99,102,241,.09); } .zone--mia .av { background: #6366F1; }
.zone--sofiane { background: rgba(245,155,60,.12); } .zone--sofiane .av { background: #F59B3C; }
.zone--ines { background: rgba(168,85,247,.09); } .zone--ines .av { background: #A855F7; }
.equipe__note { margin-top: .3em; padding: .7em .8em; border-radius: .6em; background: #FAFAF9; box-shadow: 0 0 0 1px var(--a-trait); font-size: 1em; line-height: 1.35; }
.equipe__note small { display: block; margin-bottom: .2em; font-size: .88em; color: #6B6B74; }

/* Le téléphone : à droite ; sa taille (--k) suit la largeur de la vitrine */
.appareil--vitrine { position: absolute; right: 2%; bottom: 0; z-index: 3; --k: .44; }
.appareil--vitrine .ecran { opacity: 1; transform: none; }

/* ==========================================================================
   4. GÉRER : la grande fenêtre
   ========================================================================== */
.scene--large .scene__colle { justify-content: center; }
.large__tete { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 72px); align-items: end; margin-bottom: clamp(20px, 3vh, 32px); }
.large__tete .scene__titre { margin: 0; max-width: 14ch; font-size: clamp(2rem, 3.6vw, 3.2rem); }
.large__tete .scene__para { margin: 0; }

.onglets { list-style: none; margin: 0 0 clamp(14px, 2vh, 22px); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.onglets li {
  position: relative; padding: 14px 18px 0 0; border-top: 1px solid var(--trait);
  color: var(--gris-bas); font-size: .95rem; font-weight: 500; cursor: pointer; transition: color .4s;
}
.onglets li b { margin-right: 8px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .75rem; font-weight: 400; }
.onglets li:hover { color: var(--gris); }
.onglets li.actif { color: var(--blanc); }
.onglets li::after { content: ''; position: absolute; left: 0; right: 18px; top: -1px; height: 2px; background: var(--degrade); transform: scaleX(0); transform-origin: left; }
.scene.joue .onglets li.actif::after { animation: fil-remplit var(--duree, 3s) linear forwards; }
.scene:not(.joue) .onglets li.actif::after { transform: none; }
.scene.joue.attente .onglets li.actif::after { animation-play-state: paused; }

.fenetre {
  container-type: inline-size;
  position: relative; border-radius: 12px; overflow: hidden;
  background: #F6F6F4;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 50px 110px -40px rgba(0,0,0,.95), 0 0 160px -50px color-mix(in srgb, var(--g1) 55%, transparent);
}
.theme-clair .fenetre { box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 40px 90px -40px rgba(0,0,0,.35); }
.fenetre__barre { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; background: #EBEBE8; border-bottom: 1px solid #DEDDD8; }
.fenetre__barre i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.fenetre__barre i:nth-child(2) { background: #FEBC2E; } .fenetre__barre i:nth-child(3) { background: #28C840; }
.fenetre__barre span {
  display: flex; align-items: center; gap: 6px; margin: 0 auto; transform: translateX(-24px);
  padding: 3px 70px; border-radius: 6px; background: #fff;
  font: 500 12px/1.4 -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; color: #6B6B74;
}
.fenetre__cadenas { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; }

.fenetre--gerer .app { font-size: calc(100cqw / 100); height: 44em; }
.app--grand .app__page { grid-template-rows: auto minmax(0, 1fr); }
.app--grand .app__ligne { grid-template-columns: 2.1fr .75fr .5fr .75fr .8fr .8fr 1.3fr; }
.app__filtres { display: flex; gap: .5em; margin-bottom: 1em; }
.app__filtres span { padding: .4em .85em; border-radius: 2em; box-shadow: 0 0 0 1px var(--a-trait); font-size: 1em; color: var(--a-gris); }
.app__filtres span.actif { background: #18181B; color: #fff; box-shadow: none; }
.app__filtres em { font-style: normal; margin-left: .35em; opacity: .65; }

.vues { position: relative; min-height: 0; }
.vue { position: absolute; inset: 0; transition: opacity .5s var(--doux), transform .6s var(--sortie); }
.vue--liste { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.vue--plan { display: grid; grid-template-columns: minmax(0, 1fr) 22em; gap: 1.2em; opacity: 0; transform: translateY(.8em); }
[data-scene='gerer']:is([data-etape='2'], [data-etape='3']) .vue--liste { opacity: 0; transform: translateY(-.8em); }
[data-scene='gerer']:is([data-etape='2'], [data-etape='3']) .vue--plan { opacity: 1; transform: none; }
[data-scene='gerer']:is([data-etape='0'], [data-etape='1']) .seg-liste,
[data-scene='gerer']:is([data-etape='2'], [data-etape='3']) .seg-plan { background: #fff; color: var(--a-texte); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.03); }

/* la demande de Chloé : invisible avant qu'elle n'arrive */
.ligne--nouvelle { display: none !important; }
.fenetre.recu .ligne--nouvelle { display: grid !important; animation: app-arrive .7s var(--sortie) both; background: #FFFBF5; }
.fenetre.paye .ligne--nouvelle { background: #fff; transition: background 1s; }
.bascule .pill--acompte, .fenetre.paye .bascule .pill--attente { display: none; }
.fenetre.paye .bascule .pill--acompte { display: inline-flex; }

.vue-plan__salle { padding: .6em; display: grid; }
.vue-plan__salle .plan2d { width: 100%; height: 100%; }
[data-scene='gerer'][data-etape='3'] .vue--plan .p-zone, [data-scene='gerer'][data-etape='3'] .vue--plan .p-client { opacity: 1; }
.vue-plan__volets { position: relative; }
.volet { position: absolute; inset: 0; padding: 1.3em 1.2em; display: grid; align-content: start; gap: .7em; transition: opacity .5s var(--doux); }
.volet > b { font-size: 1.2em; }
.volet > p { margin: 0 0 .4em; font-size: 1em; color: var(--a-gris); line-height: 1.4; }
.volet ul { list-style: none; margin: 0; padding: 0; }
.volet li { display: flex; align-items: center; gap: .75em; padding: .7em 0; border-bottom: 1px solid var(--a-trait-2); }
.volet li .app-ico { color: var(--a-gris); }
.volet li span { font-size: 1.05em; font-weight: 600; }
.volet li small { display: block; font-size: .9em; font-weight: 400; color: var(--a-gris); }
.volet li i { margin-left: auto; width: .55em; height: .55em; border-radius: 50%; background: #22C55E; }
[data-scene='gerer'][data-etape='2'] .volet li i { animation: synchro 1s var(--doux) both; }
[data-scene='gerer'][data-etape='2'] .volet li:nth-child(2) i { animation-delay: .9s; }
[data-scene='gerer'][data-etape='2'] .volet li:nth-child(3) i { animation-delay: 1s; }
[data-scene='gerer'][data-etape='2'] .volet li:nth-child(4) i { animation-delay: 1.1s; }
[data-scene='gerer'][data-etape='2'] .volet li:nth-child(1) i { animation-delay: .8s; }
@keyframes synchro { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 100% { box-shadow: 0 0 0 .9em rgba(34,197,94,0); } }
.volet--briefing { opacity: 0; }
.volet--briefing .app__btn { margin-top: .6em; height: 3em; }
[data-scene='gerer'][data-etape='3'] .volet--briefing { opacity: 1; }
[data-scene='gerer'][data-etape='3'] .volet--synchro { opacity: 0; }

/* le tiroir de la demande */
.tiroir {
  position: absolute; top: .6em; right: .6em; bottom: .6em; z-index: 6; width: 31em;
  display: grid; align-content: start; gap: 1.3em;
  padding: 1.7em 1.6em; border-radius: .8em;
  background: #fff; box-shadow: 0 0 0 1px var(--a-trait), -1.5em 0 4em -1.5em rgba(0,0,0,.25);
  transform: translateX(110%); transition: transform .65s var(--sortie);
}
[data-scene='gerer'][data-etape='1'] .tiroir { transform: none; }
.tiroir__tete { display: flex; align-items: center; gap: .8em; }
.tiroir__tete .av { width: 3.4em; height: 3.4em; font-size: 1em; }
.tiroir__tete > span:nth-child(2) { flex: 1; }
.tiroir__tete b { display: block; font-size: 1.35em; letter-spacing: -.015em; }
.tiroir__tete small { display: block; font-size: 1em; color: var(--a-gris); }
.tiroir__infos { margin: 0; border-top: 1px solid var(--a-trait-2); }
.tiroir__infos div { display: flex; justify-content: space-between; gap: 1em; padding: .65em 0; border-bottom: 1px solid var(--a-trait-2); font-size: 1.04em; }
.tiroir__infos dt { color: var(--a-gris); }
.tiroir__infos dd { margin: 0; font-weight: 600; text-align: right; }
.tiroir__message { padding: .85em 1em; border-radius: .7em; background: #F6F6F4; font-size: 1.05em; line-height: 1.4; }
.tiroir__message small { display: block; margin-bottom: .2em; font-size: .9em; color: var(--a-gris); }
.tiroir__actions { display: grid; gap: .55em; }
.tiroir__actions .app__btn { height: 2.9em; }
.tiroir__statut {
  display: flex; align-items: center; gap: .75em; padding: .85em 1em; border-radius: .7em;
  background: #ECFDF3; color: #15803D;
  opacity: 0; transform: translateY(.5em); transition: opacity .4s, transform .5s var(--sortie);
}
.tiroir__statut .app-ico { width: 1.6em; height: 1.6em; stroke-width: 2.4; }
.tiroir__statut b { display: block; font-size: 1.05em; }
.tiroir__statut small { display: block; font-size: .92em; }
.fenetre.paye .tiroir__statut { opacity: 1; transform: none; }

/* ==========================================================================
   5. FIDÉLISER : l'interface, puis le mouvement
   ========================================================================== */
.fidele { container-type: inline-size; position: relative; aspect-ratio: 64 / 44; }
.fenetre--clients { position: absolute; inset: 0; transition: opacity .6s var(--doux), transform .8s var(--sortie), filter .6s; }
.fenetre--clients .app { font-size: calc(100cqw / 64); height: calc(100% - 36px); grid-template-columns: 5.2em minmax(0, 1fr); }
.app__nav--icones { align-items: center; gap: .5em; padding: 1.1em .5em; }
.app__nav--icones .app__logo { margin-bottom: .8em; }
.app__nav--icones .app__lien { padding: .6em; }
.app__nav--icones .app__lien .app-ico { width: 1.4em; height: 1.4em; }
.app--clients .app__principal { grid-template-rows: minmax(0, 1fr); }
.app--clients .app__page { grid-template-rows: auto auto minmax(0, 1fr); gap: 1.1em; padding: 1.5em 1.6em; }
.app--clients .app__tete p { display: grid; }
.app--clients .app__tete p > span { grid-area: 1 / 1; transition: opacity .4s; }
.compte-cibles { opacity: 0; color: var(--a-indigo); font-weight: 600; }
.app--clients .app__ligne { grid-template-columns: 1.9fr 1.55fr .8fr .95fr; max-height: 4em; transition: max-height .55s var(--sortie), opacity .4s, padding .55s var(--sortie); }
.segments { display: flex; flex-wrap: wrap; gap: .45em; }
.segment { padding: .42em .85em; border-radius: 2em; box-shadow: 0 0 0 1px var(--a-trait); font-size: .98em; color: var(--a-gris); white-space: nowrap; transition: background .4s, color .4s, box-shadow .4s; }
.segment em { font-style: normal; font-weight: 600; margin-left: .3em; color: var(--a-texte); transition: color .4s; }
.seg-tous { background: #18181B; color: #fff; box-shadow: none; }
.seg-tous em { color: #fff; }
.visites { display: flex; align-items: center; gap: .28em; }
.visites i { width: .6em; height: .6em; border-radius: 50%; background: #E7E6E2; }
.visites i.on { background: var(--a-indigo); }
.visites em { font-style: normal; margin-left: .45em; font-weight: 600; font-variant-numeric: tabular-nums; }
.dormant .visites i.on { background: #A5A3F0; }

/* étape 2 : le segment « pas revenus depuis 60 jours » */
[data-scene='fideliser']:not([data-etape='0']) .seg-tous { background: none; color: var(--a-gris); box-shadow: 0 0 0 1px var(--a-trait); }
[data-scene='fideliser']:not([data-etape='0']) .seg-tous em { color: var(--a-texte); }
[data-scene='fideliser']:not([data-etape='0']) .seg-relancer { background: var(--a-indigo); color: #fff; box-shadow: none; }
[data-scene='fideliser']:not([data-etape='0']) .seg-relancer em { color: #fff; }
[data-scene='fideliser']:not([data-etape='0']) .compte-tous { opacity: 0; }
[data-scene='fideliser']:not([data-etape='0']) .compte-cibles { opacity: 1; }
[data-scene='fideliser']:not([data-etape='0']) .app--clients .app__ligne:not(.dormant):not(.app__ligne--tete) { max-height: 0; padding-block: 0; opacity: 0; border-bottom-width: 0; }
/* étapes 3 et 4 : l'interface s'efface, le mouvement prend le relais */
[data-scene='fideliser']:is([data-etape='2'], [data-etape='3']) .fenetre--clients { opacity: 0; transform: scale(.94); filter: blur(6px); }

.fidele__motion { position: absolute; inset: 0; font-size: calc(100cqw / 64); opacity: 0; pointer-events: none; transition: opacity .6s var(--doux) .25s; }
[data-scene='fideliser']:is([data-etape='2'], [data-etape='3']) .fidele__motion { opacity: 1; }

.m-message {
  position: absolute; left: 0; top: 11em; width: 17.5em;
  display: grid; gap: .8em; padding: 1.1em;
  border-radius: 1em; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 1.5em 3em -1.5em rgba(0,0,0,.3);
  color: #18181B; font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
}
.m-message__tete { display: flex; align-items: center; gap: .7em; }
.m-wa { width: 2.4em; height: 2.4em; border-radius: 50%; display: grid; place-items: center; background: #25D366; }
.m-wa svg { width: 1.3em; height: 1.3em; fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.m-message__tete b { display: block; font-size: 1.1em; font-weight: 600; }
.m-message__tete small { display: block; font-size: .95em; color: #6B6B74; }
.m-message__bulle { padding: .8em .9em; border-radius: .9em .9em .9em .25em; background: #DCF8C6; font-size: 1.05em; line-height: 1.4; }
.m-message__pied { font-size: .9em; color: #6B6B74; }
.m-titre { position: absolute; left: 22.5em; top: 6.2em; width: 23em; font-size: 1em; font-weight: 600; color: var(--gris); }

.m-av { position: absolute; width: 3.4em; height: 3.4em; }
.m-av .av { width: 100%; height: 100%; font-size: .95em; box-shadow: 0 0 0 .18em transparent; transition: background .5s var(--doux), color .5s, box-shadow .5s, opacity .5s; }
.m-av b { position: absolute; right: -.25em; bottom: -.25em; width: 1.5em; height: 1.5em; border-radius: 50%; display: grid; place-items: center; background: #22C55E; box-shadow: 0 0 0 .15em var(--noir); transform: scale(0); transition: transform .45s var(--sortie); }
.m-av b svg { width: .95em; height: .95em; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
[data-scene='fideliser'][data-etape='2'] .m-av .av { animation: m-recu .5s var(--doux) calc(var(--d) + .75s) both; }
@keyframes m-recu { to { box-shadow: 0 0 0 .18em #25D366; } }
[data-scene='fideliser'][data-etape='3'] .m-av:not(.m-av--revient) .av { opacity: .3; }
[data-scene='fideliser'][data-etape='3'] .m-av--revient .av { background: var(--degrade); color: #fff; transition-delay: var(--d2); }
[data-scene='fideliser'][data-etape='3'] .m-av--revient b { transform: scale(1); transition-delay: var(--d2); }

.m-bulle { position: absolute; left: 17.6em; top: 20.4em; width: 1.2em; height: 1.2em; border-radius: 50% 50% 50% .2em; background: #25D366; opacity: 0; }
[data-scene='fideliser'][data-etape='2'] .m-bulle { animation: m-vole .85s cubic-bezier(.5,0,.3,1) var(--d) both; }
@keyframes m-vole {
  0% { opacity: 0; transform: translate(0, 0) scale(.5); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); }
}
.m-jeton {
  position: absolute; margin: -.8em 0 0 -1.8em; padding: .2em .55em; border-radius: 1em;
  background: #18181B; color: #fff; font-size: .85em; font-weight: 700; white-space: nowrap; opacity: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
}
[data-scene='fideliser'][data-etape='3'] .m-jeton { animation: m-jeton 1.1s cubic-bezier(.5,0,.3,1) calc(var(--d) + .3s) both; }
@keyframes m-jeton {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  20% { opacity: 1; transform: translate(0, -.6em) scale(1); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--dx) / .85), calc(var(--dy) / .85)) scale(.8); }
}
.m-soiree {
  position: absolute; left: 46.5em; top: 11em; width: 17.5em;
  display: grid; gap: .8em; padding: 1.2em;
  border-radius: 1em; background: #fff; color: #18181B;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 1.5em 3em -1.5em rgba(0,0,0,.3);
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
}
.m-soiree small { font-size: 1em; color: #6B6B74; }
.m-soiree__ligne { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05em; color: #52525B; }
.m-soiree__ligne b { font-size: 1.7em; font-weight: 650; color: #18181B; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.m-soiree__ligne--petit { font-size: .95em; }
.m-soiree__ligne s { color: #A1A1AA; margin-right: .3em; }
.m-soiree__jauge { height: .55em; border-radius: 1em; background: #F0EFEC; overflow: hidden; }
.m-soiree__jauge i { display: block; width: 38%; height: 100%; border-radius: inherit; background: var(--degrade); transition: width 1.8s var(--sortie) .6s; }
[data-scene='fideliser'][data-etape='3'] .m-soiree__jauge i { width: 86%; }

/* ==========================================================================
   RUPTURES
   ========================================================================== */
@media (max-width: 980px) {
  .large__tete { grid-template-columns: 1fr; gap: 14px; }
  .onglets li { font-size: .82rem; }
  .fenetre--gerer .app { font-size: calc(100cqw / 78); height: 46em; grid-template-columns: minmax(0, 1fr); }
  .fenetre--gerer .app__nav { display: none; }
  .fenetre--gerer .app__principal { margin: .6em; }
  .fenetre--gerer .app__recherche { display: none; }
  .mac { width: 84%; font-size: calc(84cqw / 100); }
  .ipad { width: 38%; font-size: calc(38cqw / 64); left: -2%; }
  .appareil--vitrine { right: -1%; }
  .vitrine { padding-bottom: 12cqw; }
}
@media (max-width: 640px) {
  .onglets { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
  .onglets li { padding-top: 10px; font-size: .78rem; }
  .fenetre--gerer .app { font-size: calc(100cqw / 60); height: 52em; }
  .app--grand .app__ligne { grid-template-columns: 2fr .8fr 1.4fr; }
  .app--grand .app__ligne > span:nth-child(3), .app--grand .app__ligne > span:nth-child(4),
  .app--grand .app__ligne > span:nth-child(5), .app--grand .app__ligne > span:nth-child(6) { display: none; }
  .app--grand .app__tete .app__btn { display: none; }
  .vue--plan { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 15em; }
  .tiroir { width: auto; left: .6em; }
  .fenetre__barre span { padding: 3px 24px; }
  .mac { width: 100%; font-size: calc(100cqw / 100); }
  .ipad { display: none; }
  .appareil--vitrine { right: -3%; }
  .vitrine { padding-bottom: 20cqw; }
  .fidele { aspect-ratio: auto; height: var(--visuel); }
  .fenetre--clients .app { font-size: calc(100cqw / 44); }
  .app--clients .app__ligne { grid-template-columns: 1.7fr 1.5fr; }
  .app--clients .app__ligne > span:nth-child(3), .app--clients .app__ligne > span:nth-child(4) { display: none; }
  .app__nav--icones { display: none; }
  .fenetre--clients .app { grid-template-columns: minmax(0, 1fr); }
  .fenetre--clients .app__principal { margin: .6em; }
  .fidele__motion { font-size: calc(100cqw / 64); top: 12%; }
}