/* ═══════════════════════════════════════════════════════════════════
   LA MODALE DES VIDÉOS (#modale-demo) ET LES BOUTONS « VOIR LA DÉMO »
   Un seul fichier, chargé par welcome_demo_assets() (inc/01-assets.php 1.8)
   sur /pros/, /tarif/, /aide/ et les guides pro. Sorti de pros-v2.css le
   23/09 : les guides n'ont pas ce socle. Script : assets/demo.js ; modale :
   parts/modale-demo.php (la page d'aide garde la sienne, avec son titre).
   ⚠️ La base du <dialog> est posée sur L'IDENTIFIANT : une règle `.modale`
   chargée ici, après pros-v2.css, écraserait la largeur de la modale des
   magasins (`.modale-app`, même poids, déclarée avant).
   ═══════════════════════════════════════════════════════════════════ */

/* Un <dialog> natif plutôt qu'un div : Échap ferme, le focus est piégé, le
   fond est inerte — trois comportements qu'on n'a pas à réécrire. La vidéo
   n'est montée qu'à l'ouverture et démontée à la fermeture : rien ne se
   télécharge avant le clic, rien ne tourne derrière une fois fermée. */
#modale-demo{border:0; padding:0; background:transparent; max-width:min(1040px,92vw); width:100%}
#modale-demo::backdrop{background:rgba(10,9,7,.82); backdrop-filter:blur(6px)}
.modale-cadre{position:relative; border-radius:18px; overflow:hidden; background:#000;
  aspect-ratio:16/9; box-shadow:0 40px 90px rgba(0,0,0,.5)}
/* ⚠️ Poids d'une classe, pas de l'identifiant : aide-v2.css recale l'iframe des
   tutoriels verticaux (`.modale.vertical .modale-cadre iframe`), elle doit gagner. */
.modale-cadre iframe{width:100%; height:100%; border:0; display:block}
.modale-cadre video{width:100%; height:100%; display:block; background:#000; object-fit:contain}
/* Le bouton reste DANS le cadre : posé au-dessus (top:-46px) il tombait hors
   de la boîte du <dialog>, qui interceptait le clic — vérifié, il devenait
   inatteignable. Par-dessus la vidéo, il est cliquable partout et n'a pas
   besoin d'une variante pour le téléphone. */
.modale-fermer{position:absolute; top:12px; right:12px; z-index:2;
  width:38px; height:38px; border-radius:999px;
  border:1px solid rgba(255,255,255,.35); background:rgba(10,9,7,.55); color:#fff;
  display:grid; place-items:center; cursor:pointer; transition:background .18s;
  backdrop-filter:blur(6px)}
.modale-fermer:hover{background:rgba(10,9,7,.85)}

/* ── La fin de la démo : un voile propose l'essai ou de revoir (le bouton
   Fermer reste au-dessus, z-index 2). Le bouton d'essai est dessiné ici, pas
   emprunté au socle : les guides ne chargent pas pros-v2.css. ── */
.modale-fin{position:absolute; inset:0; z-index:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.9rem; padding:1.5rem; text-align:center;
  background:rgba(10,9,7,.72); backdrop-filter:blur(4px); color:#fff}
.modale-fin[hidden]{display:none}
.modale-fin p{margin:0; font-size:.95rem; color:rgba(255,255,255,.82)}
.modale-fin-essai{display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:#17150F; border-radius:999px; font-weight:600;
  padding:15px 30px; font-size:1.02rem; white-space:nowrap; text-decoration:none;
  transition:background .2s, transform .25s cubic-bezier(.22,1,.36,1)}
.modale-fin-essai:hover{background:#F6F2E9; color:#17150F; transform:translateY(-2px)}
.modale-revoir{appearance:none; -webkit-appearance:none; background:none; border:0; font:inherit;
  cursor:pointer; margin-top:.4rem; padding:0 0 2px; color:rgba(255,255,255,.75);
  border-bottom:1px solid rgba(255,255,255,.4); font-size:.95rem}
.modale-revoir:hover{color:#fff; border-color:#fff}

/* ── LA MODALE VERTICALE — vidéo en 9/16 : tutoriels de l'aide (YouTube) et
   démo sur un écran en portrait. Le cadre prend le format de la vidéo, borné
   à la hauteur de l'écran. La classe `vertical` est posée par demo.js. ── */
#modale-demo.vertical{max-width:min(430px,92vw); width:auto; margin:auto}
#modale-demo.vertical .modale-cadre{aspect-ratio:9/16; width:min(430px,92vw); max-height:84vh;
  max-height:84svh; margin:0 auto; overflow:hidden}
/* 84 svh de haut à 9/16 = 47 svh de large : sur un écran bas, la largeur
   suit la hauteur, pas l'inverse. */
@media(max-height:820px){
  #modale-demo.vertical .modale-cadre{width:calc(84svh * 9 / 16); max-width:92vw}
}

/* ── LE BOUTON « VOIR LA DÉMO » — un lien souligné, pas un bouton plein : il
   accompagne l'essai, il ne lui dispute pas le regard. C'était un <button>
   sans remise à plat : le navigateur lui ajoutait son cadre gris, son fond et
   sa police système. `appearance:none` + fond, bordure, police repris à la main.
   Blanc sur les héros sombres ; `.sur-clair` sur le papier (guides, aide). ── */
.lien-demo{appearance:none; -webkit-appearance:none; background:none; border:0;
  font:inherit; cursor:pointer; padding:0;
  display:inline-flex; align-items:center; gap:.55rem;
  color:#fff; font-weight:500; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.45); padding-bottom:3px;
  transition:border-color .2s, color .2s;
  text-shadow:0 1px 6px rgba(10,9,7,.55)}
.lien-demo:hover{border-color:#fff}
.lien-demo svg{flex:none; color:var(--tan, #D2B48C)}
.lien-demo.sur-clair{color:var(--encre, #17150F); border-bottom-color:rgba(23,21,15,.3); text-shadow:none}
.lien-demo.sur-clair:hover{border-color:var(--encre, #17150F)}
.lien-demo.sur-clair svg{color:var(--brun, #8A6A45)}