/* Simulations d'application : fenêtre ouverte depuis une carte du site. Jetons du site (--navy-*, --gold-*). */

/* Carte : image cliquable et bouton de simulation */
.app-play{position:relative;display:block;width:100%;margin:0;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:inherit;text-align:left}
.app-play:focus-visible{outline:3px solid #fff;outline-offset:-3px}
.app-play-badge{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 8px;border-radius:999px;background:rgba(7,20,42,.82);color:#fff;font-size:.8rem;font-weight:700;letter-spacing:-.005em;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(233,201,58,.55);transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.app-play-badge i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--gold-soft);color:var(--navy-950)}
.app-play-badge svg{width:11px;height:11px;margin-left:2px;fill:currentColor}
.app-play:hover .app-play-badge,.app-play:focus-visible .app-play-badge{background:var(--gold-soft);color:var(--navy-950);transform:translateY(-2px)}
.app-play:hover .app-play-badge i,.app-play:focus-visible .app-play-badge i{background:var(--navy-950);color:var(--gold-soft)}
.app-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.app-sim{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;border:1.5px solid var(--gold-soft);background:var(--gold-soft);color:var(--navy-950);font:inherit;font-size:.83rem;font-weight:700;letter-spacing:-.005em;cursor:pointer;transition:background var(--t-fast),transform var(--t-fast)}
.app-sim svg{width:10px;height:10px;fill:currentColor}
.app-sim:hover,.app-sim:focus-visible{background:#fff;border-color:#fff;transform:translateY(-1px)}
.app-sim:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* Fenêtre */
body.sim-open{overflow:hidden}
.sim[hidden]{display:none}
.sim{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:clamp(0px,2.4vw,28px)}
.sim-backdrop{position:absolute;inset:0;background:rgba(4,10,22,.82);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);animation:sim-in .25s var(--ease) both}
.sim-box{position:relative;width:min(1040px,100%);max-height:100%;display:flex;flex-direction:column;background:var(--navy-900);color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:18px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.55);animation:sim-pop .38s var(--ease) both}
@keyframes sim-in{from{opacity:0}to{opacity:1}}
@keyframes sim-pop{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.sim-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 12px 20px;border-bottom:1px solid rgba(255,255,255,.1)}
.sim-brand{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.sim-name{font-weight:800;font-size:1rem;letter-spacing:-.02em}
.sim-fict{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-soft);border:1px solid rgba(233,201,58,.5);border-radius:999px;padding:3px 10px}
.sim-x{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;cursor:pointer;transition:background var(--t-fast)}
.sim-x:hover{background:rgba(255,255,255,.12)}
.sim-x svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}
.sim :focus-visible{outline:3px solid var(--gold-soft);outline-offset:2px}

/* Scène */
.sim-stage{position:relative;flex:none;width:100%;aspect-ratio:16/10;max-height:min(62vh,calc(100dvh - 290px));min-height:180px;background:#070f1e;overflow:hidden}
.sim-frame{position:absolute;left:0;top:0;transform-origin:0 0;--inv:1;will-change:transform;transition:transform 1.15s var(--ease),opacity .35s ease}
.sim-frame.neuf{transition:none;opacity:0}
.sim-frame img{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.sim-frame.phone{border-radius:calc(26px*var(--inv));box-shadow:0 0 0 calc(5px*var(--inv)) #1b2740,0 18px 60px rgba(0,0,0,.6);overflow:hidden}
.sim-hl{position:absolute;border:calc(3px*var(--inv)) solid var(--gold-soft);border-radius:calc(8px*var(--inv));box-shadow:0 0 0 calc(2px*var(--inv)) rgba(7,20,42,.35),0 0 calc(26px*var(--inv)) rgba(233,201,58,.55);opacity:0;transform:scale(1.05);transition:opacity .5s ease,transform .5s var(--ease);pointer-events:none}
.sim-hl.on{opacity:1;transform:none}
.sim-cur{position:absolute;width:0;height:0;transform:scale(var(--inv));transform-origin:0 0;transition:left 1s cubic-bezier(.45,.05,.2,1),top 1s cubic-bezier(.45,.05,.2,1);pointer-events:none}
.sim-cur svg{position:absolute;left:-4px;top:-2px;width:26px;height:26px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.sim-cur::after{content:"";position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:3px solid var(--gold-soft);opacity:0}
.sim-cur.clic::after{animation:sim-clic .7s ease-out}
@keyframes sim-clic{0%{opacity:.95;transform:scale(.3)}100%{opacity:0;transform:scale(2.4)}}

/* Cartes d'ouverture et de fin */
.sim.carte .sim-box{background:#07142a}
.sim-card{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:clamp(20px,5vw,56px);text-align:center;background:radial-gradient(120% 90% at 50% 0,#1a3a66 0,#0b1b33 55%,#07142a 100%)}
.sim-card.on{display:flex;animation:sim-in .5s ease both}
.sim-card{overflow:auto}
.sim-card-in{max-width:640px;margin:auto}
.sim-kicker{margin:0 0 14px;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft)}
.sim-card h2{margin:0 0 14px;font-size:clamp(1.45rem,3.6vw,2.4rem);line-height:1.12;letter-spacing:-.03em;font-weight:900;color:#fff;text-wrap:balance}
.sim-card p.t{margin:0;font-size:clamp(.95rem,1.7vw,1.1rem);line-height:1.55;color:#C6D5EA;text-wrap:pretty}
.sim-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.sim-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:999px;border:1.5px solid rgba(233,201,58,.55);background:transparent;color:var(--gold-soft);font:inherit;font-size:.9rem;font-weight:700;text-decoration:none;cursor:pointer;transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.sim-btn:hover{background:var(--gold-soft);color:var(--navy-950);transform:translateY(-1px)}
.sim-btn.plein{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--navy-950)}
.sim-btn.plein:hover{background:#fff;border-color:#fff}

/* Légende et commandes */
.sim-cap{flex:none;min-height:104px;padding:16px 22px 6px}
.sim-cap h3{margin:0 0 6px;font-size:1.12rem;letter-spacing:-.02em;color:#fff}
.sim-cap p{margin:0;max-width:78ch;font-size:.95rem;line-height:1.55;color:#C6D5EA;text-wrap:pretty}
.sim-cap.vide{visibility:hidden}
.sim-bar{display:flex;align-items:center;gap:14px;padding:10px 18px 16px 22px}
.sim-segs{flex:1;display:flex;gap:6px}
.sim-seg{position:relative;flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden;border:0;padding:0;cursor:pointer}
.sim-seg::before{content:"";position:absolute;inset:0;background:var(--gold-soft);transform:scaleX(0);transform-origin:left}
.sim-seg.fait::before{transform:scaleX(1)}
.sim-seg.cours::before{animation:sim-rempli var(--d,7s) linear forwards}
.sim.pause .sim-seg.cours::before{animation-play-state:paused}
@keyframes sim-rempli{to{transform:scaleX(1)}}
.sim-seg:focus-visible{outline-offset:3px}
.sim-ctrl{display:flex;gap:6px}
.sim-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;cursor:pointer;transition:background var(--t-fast)}
.sim-ic:hover{background:rgba(255,255,255,.14)}
.sim-ic:disabled{opacity:.35;cursor:default}
.sim-ic svg{width:15px;height:15px;fill:currentColor}
.sim-ic .p{display:none}
.sim.pause .sim-ic .p{display:block}
.sim.pause .sim-ic .q{display:none}
.sim-note{margin:0;padding:0 22px 14px;font-size:.78rem;color:#8EA3C2}

@media (max-width:640px){
  .sim{padding:8px}
  .sim-box{border-radius:14px}
  .sim-stage{aspect-ratio:4/3;max-height:calc(100dvh - 350px)}
  .sim.carte .sim-stage{aspect-ratio:auto;max-height:none;min-height:min(440px,70vh)}
  .sim.carte .sim-cap{display:none}
  .sim-cap{padding:14px 16px 4px;min-height:132px;overflow:auto}
  .sim-bar{padding:8px 12px 14px 16px;gap:10px}
  .sim-ic{width:36px;height:36px}
  .sim-btn{width:100%}
}
@media (max-height:560px) and (orientation:landscape){
  .sim-stage{max-height:50vh}
  .sim-cap{min-height:0;padding-top:8px}
}
@media (prefers-reduced-motion:reduce){
  .sim-backdrop,.sim-box,.sim-card.on{animation:none}
  .sim-frame,.sim-hl,.sim-cur{transition:none}
  .sim-cur.clic::after{animation:none}
  .sim-seg.cours::before{animation:none;transform:scaleX(1)}
  .app-play-badge,.app-sim{transition:none}
}

/* Langues qui s'écrivent de droite à gauche (arabe) : progression et flèches dans le bon sens. */
html[dir="rtl"] .sim-seg::before{transform-origin:right}
html[dir="rtl"] .sim-ic[data-act="prec"] svg,html[dir="rtl"] .sim-ic[data-act="suiv"] svg{transform:scaleX(-1)}