/* ===== Page « essai en ligne » (try*.html) : chargée par ces pages seulement, après site.css. Les jetons (couleurs, polices, rayons) viennent de theme.css.
   À plat comme le reste du site : aucun dégradé, aucune lueur, aucun flou, coins de 12 px au plus. L'écran de la démo est un objet sombre posé sur la page claire (jetons --dev-*). ===== */
.try-hero{padding-block:clamp(28px,4vw,56px) clamp(24px,3vw,40px)}
.try-hero-in{display:grid;gap:clamp(14px,1.8vw,22px);justify-items:start}
.try-hero .h1{font-size:clamp(46px,6.4vw,92px);max-width:11em}
.try-hero .lead{max-width:40em}
.try-hero .fine{max-width:44em}
p.chip{cursor:default}
p.chip:hover{text-decoration:none;color:var(--ink-2)}

/* ----- la scène : cadre d'appareil, affiche cliquable, puis la VRAIE page tablette dans une iframe ----- */
.try-stage-sec{padding-block:0 var(--sec-pad)}
.try-stage{max-width:1040px;margin-inline:auto}
.try-frame{padding:10px}
.try-screen{position:relative;aspect-ratio:4/3;background:#0B0B0D;border-radius:calc(var(--r-dev) - 8px);overflow:hidden}
.try-poster{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;margin:0;border:0;background:#0B0B0D;cursor:pointer}
.try-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.try-poster::after{content:"";position:absolute;inset:0;background:rgba(11,11,13,.4);transition:background-color .2s}
.try-poster:hover::after{background:rgba(11,11,13,.28)}
.try-poster .play{z-index:2}
.try-poster:hover .play{transform:scale(1.06)}
.try-poster .cap{position:absolute;z-index:2;left:16px;bottom:16px;padding:9px 14px;border-radius:var(--r-btn);background:var(--poster-cap-bg);color:var(--poster-cap-ink);font:600 16px/1 var(--text)}
.try-iframe{position:absolute;left:0;top:0;width:1024px;height:768px;border:0;background:#0B0B0D;transform-origin:0 0}
.try-tools{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.try-poster[hidden],.try-tools[hidden],.try-bar[hidden]{display:none}
.try-sound{gap:7px}
.try-sound .snd{flex:none}
.try-sound .off{display:none}
.try-sound[aria-pressed="false"] .waves{display:none}
.try-sound[aria-pressed="false"] .off{display:inline}
.try-sound[hidden]{display:none}
.try-bar-end{display:flex;align-items:center;gap:10px}
@media (max-width:480px){
  /* trois boutons dans la barre du plein écran : le bouton Son ne garde que son icône (le libellé reste lu par les lecteurs d'écran), les marges se resserrent */
  .try-bar{gap:8px}
  .try-bar .btn-sm{padding:0 12px;font-size:15px}
  .try-bar .try-sound{min-width:44px;justify-content:center}
  .try-bar .try-sound .lbl{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .try-bar-end{gap:8px}
}
.try-cap{margin-top:clamp(14px,2vw,22px)}
.try-nojs{margin-top:10px;max-width:44em}

/* plein écran : le même cadre devient la page entière (l'iframe ne bouge pas : la déplacer rechargerait la démo) */
html.try-lock,html.try-lock body{overflow:hidden}
html.try-lock{background:#0B0B0D}                /* la bande sous la barre d'état d'un téléphone prend la couleur de la page : sombre, comme la démo, tant que le plein écran dure */
.try-bar{--ink:#F4F4F6;--ink-2:#B9B9C4;--ink-3:#8E8E9B;--line-2:#34343D;--ghost-hover:#17171B;display:none}
.try-stage.is-full{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;max-width:none;margin:0;height:100vh;height:100dvh;background:#0B0B0D}
.try-stage.is-full .try-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:max(10px,env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) 10px max(14px,env(safe-area-inset-left,0px));background:#0B0B0D;color:var(--ink)}
.try-stage.is-full .try-bar .btn{color:var(--ink)}
.try-stage.is-full .try-frame{flex:1;min-height:0;padding:0;border:0;border-radius:0;box-shadow:none;background:#0B0B0D}
.try-stage.is-full .try-screen{aspect-ratio:auto;height:100%;border-radius:0}
.try-stage.is-full .try-iframe{width:100%;height:100%;transform:none}
.try-stage.is-full .try-tools{display:none}
.try-back .arr{transform:scaleX(-1)}

/* ----- cinq choses à essayer ----- */
.try-facts>div{grid-template-columns:minmax(200px,320px) 1fr}
.try-facts dt{font-size:clamp(26px,2.6vw,34px)}
.try-facts dd{max-width:44em}

/* ----- simulé / réel ----- */
.try-versus{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.try-col{display:grid;gap:18px;align-content:start;padding:clamp(18px,2.4vw,30px);border-radius:var(--r-card);border:1px solid var(--line);background:var(--surface)}
.try-col h3{font:var(--h3-weight) clamp(28px,3vw,38px)/1 var(--display);text-transform:uppercase;letter-spacing:var(--h-track)}
.try-col .checks{max-width:none}
.try-col .checks li{font-size:18px}
.try-col.demo .checks li::before{background:var(--ink-3)}

@media (max-width:900px){
  .try-versus{grid-template-columns:1fr}
  .try-facts>div{grid-template-columns:1fr}
  .try-poster .cap{left:12px;bottom:12px}
}
@media (max-width:640px){
  .try-hero .h1{font-size:clamp(42px,13vw,72px)}
  .try-hero .cta-row .btn{flex:1 1 100%}
}