/* 📱💻🌐 LA DÉMO DE L'APP SUR LA VITRINE (chantier 10, point 5, 26/10/2026).
   Un faux site qu'on touche, comme celui de senseibook.fr : la même app dans trois cadres
   (le téléphone, l'app de bureau sous le lotus, le navigateur), les écrans du chantier 01
   (le dojo en conversation, la DZ et ses six lieux, la barre de verre à six entrées), des
   données inventées. Chaque cadre a sa taille de dessin, fixe, et se met à l'échelle de la
   place qu'il a : il se lit pareil sur un écran large et sur un téléphone.
   L'app dessinée est l'app en clair : c'est un appareil posé sur la page, pas la page. */

.demo{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  grid-template-areas:"appareils scene" "guide scene";grid-template-rows:auto 1fr;
  gap:20px clamp(24px,4vw,56px);margin-top:8px;align-items:start;}
.demo-appareils{grid-area:appareils;display:flex;gap:6px;flex-wrap:wrap;}
.demo-appareils button{font:inherit;font-size:14px;min-height:40px;padding:0 14px;cursor:pointer;
  color:var(--gris);background:transparent;border:1px solid var(--filet-gris);border-radius:20px;}
.demo-appareils button:hover{color:var(--encre);border-color:var(--trait);}
.demo-appareils button[aria-selected="true"]{color:var(--papier);background:var(--encre);border-color:var(--encre);}
.demo-appareils button:focus-visible{outline:2px solid var(--vert);outline-offset:2px;}
.demo-guide{grid-area:guide;display:flex;flex-direction:column;margin:0;padding:0;list-style:none;}
.demo-guide button{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;font:inherit;
  padding:12px 0 12px 16px;border:0;border-left:2px solid var(--filet-gris);background:none;
  color:var(--gris);cursor:pointer;}
.demo-guide b{font-weight:600;color:var(--encre);}
.demo-guide span{font-size:15px;line-height:1.5;}
.demo-guide button:hover b{color:var(--vert);}
.demo-guide button[aria-current="true"]{border-left-color:var(--vert);}
.demo-guide button[aria-current="true"] b{color:var(--vert);}
.demo-guide button:focus-visible{outline:2px solid var(--vert);outline-offset:2px;}
.demo[data-appareil="bureau"],.demo[data-appareil="web"]{grid-template-columns:minmax(0,1fr);
  grid-template-areas:"appareils" "scene" "guide";}
.demo[data-appareil="bureau"] .demo-guide,.demo[data-appareil="web"] .demo-guide{display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;}
.demo-scene{grid-area:scene;margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0;}
.demo-scene figcaption{font-size:14px;color:var(--gris);}
.demo-cale{position:relative;width:100%;overflow:hidden;}
.demo-ecran{position:absolute;top:0;left:50%;transform-origin:top center;
  transform:translateX(-50%) scale(var(--k,1));}
.demo-repli{display:block;width:min(300px,100%);height:auto;margin:0 auto;border-radius:32px;}
@media (max-width:700px){
  .demo[data-appareil="bureau"] .demo-guide,.demo[data-appareil="web"] .demo-guide{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:960px){
  .demo{grid-template-columns:minmax(0,1fr);grid-template-areas:"appareils" "scene" "guide";}
  .demo-appareils{justify-content:center;}
}

/* ── L'app : ses jetons, en clair ─────────────────────────────────────────── */
.app{--a-papier:#FFFFFF;--a-encre:#111111;--a-gris:#545454;--a-filet:#E5E4DE;--a-vert:#0B5C14;
  --a-rouge:#E24329;--a-bulle:rgba(17,17,17,.09);--a-voile:rgba(255,255,255,.72);
  position:relative;color:var(--a-encre);font-family:var(--texte);font-size:15px;line-height:1.4;
  -webkit-font-smoothing:antialiased;}
.app *{box-sizing:border-box;}
.app button{font:inherit;color:inherit;}
.app button:focus-visible{outline:2px solid var(--a-vert);outline-offset:2px;}

/* La barre de verre : six entrées, Demander à part. */
.barre{display:flex;align-items:flex-start;gap:2px;padding:8px 8px 6px;border-radius:22px;
  background:var(--a-voile);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid rgba(255,255,255,.95);box-shadow:0 10px 30px rgba(17,17,17,.14);}
.barre .onglet{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;width:64px;
  padding:0;border:0;background:none;cursor:pointer;font-size:11px;font-weight:600;color:var(--a-encre);}
.barre .onglet:first-child{margin-right:6px;padding-right:6px;border-right:1px solid var(--a-filet);width:70px;}
.barre .pic{width:44px;height:44px;border-radius:22px;background:var(--a-papier);border:1px solid var(--a-filet);
  display:flex;align-items:center;justify-content:center;}
.barre .onglet[aria-current="true"] .pic{border:2px solid var(--a-vert);}
.barre .pic img{width:32px;height:32px;object-fit:contain;}
.barre .compte{position:absolute;top:-4px;right:6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--a-vert);color:var(--a-papier);font-size:11px;line-height:18px;text-align:center;}

/* ── Le contenu commun aux trois cadres ───────────────────────────────────── */
.vue{display:flex;flex-direction:column;gap:14px;}
.vue h3{margin:0;font-family:var(--titre);font-weight:400;font-size:30px;line-height:1.1;letter-spacing:-.01em;}
.vue .sens{margin:0;color:var(--a-gris);font-size:13px;}
.plan{position:relative;width:100%;}
.plan img{display:block;width:100%;height:auto;}
.plan .rond{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;padding:0;
  background:var(--a-papier);border:0;box-shadow:0 1px 6px rgba(17,17,17,.35);cursor:pointer;
  transition:transform .2s var(--courbe);}
.plan .rond:hover,.plan .rond[aria-pressed="true"]{transform:scale(1.35);}
.plan .etiquette{position:absolute;z-index:2;transform:translate(-50%,calc(-100% - 20px));white-space:nowrap;pointer-events:none;
  display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:10px;background:var(--a-papier);
  box-shadow:0 2px 10px rgba(17,17,17,.18);font-size:13px;font-weight:600;}
.pastille{display:inline-block;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--a-rouge);
  color:var(--a-papier);font-size:11px;font-weight:600;line-height:18px;text-align:center;}
.pastille.verte{background:var(--a-vert);}

/* La carte d'un lieu : son nom, son sens, ses bulles (direction A du chantier 01). */
.salle{border:1px solid var(--a-filet);border-radius:18px;background:var(--a-papier);overflow:hidden;}
.salle-tete{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 14px 10px;
  border-bottom:1px solid var(--a-filet);text-align:center;}
.salle-tete b{display:flex;align-items:center;gap:8px;font-size:16px;}
.salle-tete img{width:24px;height:24px;border-radius:12px;object-fit:cover;object-position:top;}
.salle-tete p{margin:0;font-size:12px;color:var(--a-gris);}
.fil{display:flex;flex-direction:column;gap:22px;padding:22px 16px 18px 10px;}
.fil .vide{margin:0;font-size:13px;color:var(--a-gris);text-align:center;}
.rang{display:flex;align-items:flex-end;gap:10px;}
.rang .av{width:28px;height:28px;border-radius:14px;flex:none;object-fit:cover;object-position:top;background:var(--a-filet);}
.bA{position:relative;display:block;text-align:left;font-size:14px;line-height:1.38;
  background:var(--a-bulle);border:0;border-radius:18px;padding:8px 13px;max-width:100%;cursor:pointer;}
.bA:hover{background:rgba(17,17,17,.13);}
.bA .auteur{font-weight:600;}
.bA .precis{display:block;margin-top:6px;font-size:13px;line-height:1.45;color:var(--a-gris);}
.reac{position:absolute;top:-20px;right:-10px;width:26px;height:26px;border-radius:13px;background:var(--a-papier);
  border:2px solid var(--a-papier);display:flex;align-items:center;justify-content:center;font-size:13px;
  box-shadow:0 1px 4px rgba(17,17,17,.2);}
.gestes{display:flex;flex-wrap:wrap;gap:6px;padding-left:38px;margin-top:-12px;}
.gestes button{min-height:30px;padding:0 12px;border-radius:15px;border:1px solid var(--a-filet);
  background:var(--a-papier);font-size:12px;font-weight:600;cursor:pointer;}
.gestes button:hover{border-color:var(--a-vert);color:var(--a-vert);}
.gestes button.premier{background:var(--a-vert);border-color:var(--a-vert);color:var(--a-papier);}
.moi{display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.moi .citation{font-size:11px;color:var(--a-gris);background:rgba(17,17,17,.05);border-radius:9px;padding:3px 9px;
  max-width:80%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bY{font-size:14px;line-height:1.38;color:var(--a-papier);background:var(--a-vert);border-radius:18px;
  padding:8px 13px;max-width:88%;}
.entre{animation:demo-entre .32s var(--courbe) both;}
@keyframes demo-entre{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.entre{animation:none;}.plan .rond{transition:none;}}

/* Demander : Gaïa, puis Préparer ou Écrire. */
.gaia{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 0 4px;text-align:center;}
.gaia img{width:72px;height:72px;object-fit:contain;}
.gaia p{margin:0;font-family:var(--titre);font-size:22px;}
.portes{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.portes button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;cursor:pointer;
  border:1px solid var(--a-filet);border-radius:16px;background:var(--a-papier);font-weight:600;}
.portes button:hover{border-color:var(--a-vert);}
.portes img{width:48px;height:48px;object-fit:contain;}
.portes span{font-size:12px;font-weight:400;color:var(--a-gris);}
.champ{width:100%;min-height:64px;padding:10px 12px;border:1px solid var(--a-filet);border-radius:12px;
  font:inherit;font-size:14px;color:var(--a-encre);background:var(--a-papier);resize:none;}
.app .agir{align-self:flex-end;min-height:36px;padding:0 16px;border-radius:18px;border:0;cursor:pointer;
  background:var(--a-vert);color:var(--a-papier);font-weight:600;}
.app .agir.discret{background:none;color:var(--a-gris);border:1px solid var(--a-filet);}
.choix{display:flex;flex-wrap:wrap;gap:6px;padding-left:38px;}
.choix button{min-height:30px;padding:0 12px;border-radius:15px;border:1px solid var(--a-vert);
  background:var(--a-papier);color:var(--a-vert);font-size:12px;font-weight:600;cursor:pointer;}
.agents{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
.agents button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;border:0;
  background:none;cursor:pointer;font-size:11px;}
.agents img{width:44px;height:44px;border-radius:22px;object-fit:cover;object-position:top;
  border:2px solid transparent;background:var(--a-filet);}
.agents button[aria-pressed="true"] img{border-color:var(--a-vert);}

/* Le cahier, le coffre-fort, le combi : des listes. */
.liste{display:flex;flex-direction:column;border:1px solid var(--a-filet);border-radius:16px;
  background:var(--a-papier);overflow:hidden;}
.liste>*{display:flex;align-items:center;gap:12px;padding:12px 14px;border:0;border-bottom:1px solid var(--a-filet);
  background:none;text-align:left;width:100%;}
.liste>*:last-child{border-bottom:0;}
.liste button{cursor:pointer;}
.liste button:hover{background:rgba(17,17,17,.03);}
.liste .av{width:34px;height:34px;border-radius:17px;flex:none;object-fit:cover;object-position:top;background:var(--a-filet);}
.liste .logo{width:34px;height:34px;flex:none;padding:6px;border-radius:9px;border:1px solid var(--a-filet);object-fit:contain;}
.liste .corps{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.liste .corps b{font-size:14px;}
.liste .corps span{font-size:13px;color:var(--a-gris);}
.liste .corps .bY{color:var(--a-papier);font-size:13px;padding:6px 12px;}
.liste .corps code{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:13px;letter-spacing:.04em;}
.liste .heure{font-size:11px;color:var(--a-gris);flex:none;align-self:flex-start;}
.liste .nonlu{width:8px;height:8px;border-radius:4px;background:var(--a-vert);flex:none;}
.liste .fleche{color:var(--a-gris);flex:none;}
.liste .etat{font-size:12px;font-weight:600;color:var(--a-vert);flex:none;}
.accord{display:flex;gap:8px;margin-top:8px;}
.accord button{min-height:30px;padding:0 16px;border-radius:15px;border:1px solid var(--a-vert);
  background:var(--a-papier);color:var(--a-vert);font-size:12px;font-weight:600;cursor:pointer;}
.accord button.oui{background:var(--a-vert);color:var(--a-papier);}
.note{margin:0;font-size:12px;color:var(--a-gris);text-align:center;}
.toast{position:absolute;left:50%;bottom:110px;transform:translateX(-50%);z-index:20;max-width:86%;
  padding:9px 16px;border-radius:18px;background:rgba(17,17,17,.88);color:var(--a-papier);font-size:13px;
  text-align:center;pointer-events:none;}

/* La visite, que le combi rejoue. */
.visite{position:absolute;inset:0;z-index:15;background:rgba(17,17,17,.5);display:flex;align-items:flex-end;
  justify-content:center;padding:0 16px 120px;}
.visite .bulle{max-width:320px;padding:16px 18px;border-radius:16px;background:var(--a-papier);
  box-shadow:0 10px 40px rgba(17,17,17,.3);display:flex;flex-direction:column;gap:6px;}
.visite .bulle small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--a-gris);}
.visite .bulle b{font-size:16px;}
.visite .bulle p{margin:0;font-size:14px;color:var(--a-gris);}
.visite .bulle div{display:flex;justify-content:flex-end;gap:8px;margin-top:6px;}

/* ── Cadre 1 : le téléphone (celui de senseibook.fr : noir, coins de 40 px, 10 px de bord) ── */
.cadre-telephone{width:395px;padding:10px;border-radius:52px;background:#000000;
  box-shadow:0 0 0 1px var(--trait),0 30px 60px rgba(17,17,17,.22);}
.cadre-telephone .app{width:375px;height:780px;border-radius:42px;overflow:hidden;background:var(--a-papier);
  display:flex;flex-direction:column;}
.cadre-telephone .statut{flex:none;height:46px;display:flex;align-items:center;justify-content:space-between;
  padding:6px 30px 0 34px;font-size:14px;font-weight:600;}
.cadre-telephone .ile{width:110px;height:30px;border-radius:15px;background:#000000;}
.cadre-telephone .defile{flex:1;overflow-y:auto;padding:6px 16px 120px;scrollbar-width:none;}
.cadre-telephone .defile::-webkit-scrollbar{display:none;}
.cadre-telephone .barre{position:absolute;left:8px;right:8px;bottom:22px;justify-content:space-between;}
.cadre-telephone .barre .onglet{width:50px;font-size:9.5px;}
.cadre-telephone .barre .onglet:first-child{width:54px;margin-right:2px;padding-right:2px;}
.cadre-telephone .barre .pic{width:40px;height:40px;}
.cadre-telephone .barre .pic img{width:28px;height:28px;}
.cadre-telephone .barre-maison{position:absolute;left:50%;bottom:8px;width:120px;height:4px;margin-left:-60px;
  border-radius:2px;background:#111111;}

/* ── Cadre 2 : l'app de bureau, sous le lotus de la barre des menus ─────── */
.cadre-bureau{width:1200px;height:750px;border-radius:12px;overflow:hidden;position:relative;
  box-shadow:0 0 0 1px var(--trait),0 30px 60px rgba(17,17,17,.22);}
.cadre-bureau .fond{position:absolute;inset:0;width:100%;height:100%;}
.cadre-bureau .menus{position:absolute;top:0;left:0;right:0;height:28px;display:flex;align-items:center;gap:18px;
  padding:0 14px;font-size:13px;color:var(--a-encre);background:rgba(255,255,255,.55);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:5;}
.cadre-bureau .menus b{font-weight:600;}
.cadre-bureau .menus .droite{margin-left:auto;display:flex;align-items:center;gap:16px;}
.cadre-bureau .lotus-menus{display:flex;align-items:center;justify-content:center;width:30px;height:22px;border-radius:5px;
  background:rgba(17,17,17,.12);}
.cadre-bureau .lotus-menus img{height:13px;width:auto;}
.cadre-bureau .app{position:absolute;inset:0;}
.cadre-bureau .barre{position:absolute;top:38px;right:14px;z-index:4;}
.cadre-bureau .panneau{position:absolute;top:126px;right:14px;width:820px;bottom:14px;border-radius:16px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.95);box-shadow:0 18px 50px rgba(17,17,17,.2);overflow:hidden;}
.cadre-bureau .defile{height:100%;overflow-y:auto;padding:20px 22px 22px;}
.cadre-bureau .toast{bottom:40px;}

/* ── Cadre 3 : le web, dans un navigateur ─────────────────────────────── */
.cadre-web{width:1200px;height:750px;border-radius:12px;overflow:hidden;background:var(--a-papier, #FFFFFF);
  border:1px solid var(--filet-gris);box-shadow:0 30px 60px rgba(17,17,17,.18);display:flex;flex-direction:column;}
.cadre-web .chrome{flex:none;height:44px;display:flex;align-items:center;gap:14px;padding:0 16px;
  background:rgba(17,17,17,.06);border-bottom:1px solid rgba(17,17,17,.08);}
.cadre-web .feux{display:flex;gap:7px;}
.cadre-web .feux i{width:12px;height:12px;border-radius:6px;background:rgba(17,17,17,.18);}
.cadre-web .url{flex:1;max-width:520px;margin:0 auto;height:28px;border-radius:14px;background:#FFFFFF;
  display:flex;align-items:center;justify-content:center;font-size:13px;color:#545454;font-family:var(--texte);}
.cadre-web .app{flex:1;display:flex;flex-direction:column;min-height:0;background:#FFFFFF;}
.cadre-web .entete{flex:none;display:flex;align-items:center;gap:14px;padding:12px 26px;
  border-bottom:1px solid var(--a-filet);}
.cadre-web .entete .marque-app{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;}
.cadre-web .entete .marque-app img{height:22px;width:auto;}
.cadre-web .entete .barre{margin-left:auto;}
.cadre-web .torii{width:46px;height:46px;border-radius:23px;border:1px solid var(--a-filet);background:#FFFFFF;
  display:flex;align-items:center;justify-content:center;}
.cadre-web .torii img{width:28px;height:28px;}
.cadre-web .defile{flex:1;overflow-y:auto;padding:22px 40px 30px;}
.cadre-web .toast{bottom:30px;}

/* En large (bureau, web), le plan à gauche, la carte à droite. */
.large .vue.deux{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:8px 22px;align-items:start;}
.large .vue.deux>h3,.large .vue.deux>.sens{grid-column:1 / -1;}
.large .vue.etroite{max-width:520px;margin:0 auto;width:100%;}