/**
 * Fenêtre du visuel d'avis d'obsèques.
 * Styles volontairement autonomes : la même fenêtre s'ouvre depuis l'espace
 * professionnel et depuis la page publique, qui n'ont pas les mêmes feuilles.
 *
 * @package zayactu-obseques
 */

.zayobs-visuel-fond{
  position:fixed;inset:0;z-index:100000;
  background:rgba(16,20,40,.62);
  display:flex;align-items:center;justify-content:center;
  padding:20px;overflow:auto;
}

.zayobs-visuel-boite{
  background:#fff;border-radius:16px;
  width:min(560px,100%);max-height:calc(100vh - 40px);
  display:flex;flex-direction:column;
  box-shadow:0 30px 70px rgba(10,16,48,.4);
  overflow:hidden;
}

.zayobs-visuel-tete{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid #E7E9F0;flex:none;
}
.zayobs-visuel-tete h2{margin:0;font-size:18px;color:#16216B}
.zayobs-visuel-fermer{
  border:0;background:transparent;font-size:28px;line-height:1;
  color:#6B7280;cursor:pointer;padding:0 4px;
}
.zayobs-visuel-fermer:hover{color:#16216B}

.zayobs-visuel-onglets{
  display:flex;gap:6px;padding:12px 20px 0;flex:none;flex-wrap:wrap;
}
.zayobs-visuel-onglets button{
  border:1px solid #D8DCE8;background:#fff;color:#4B5563;
  padding:8px 16px;border-radius:999px;cursor:pointer;font-size:14px;
  min-height:38px;
}
.zayobs-visuel-onglets button.est-actif{
  background:#16216B;border-color:#16216B;color:#fff;font-weight:600;
}

.zayobs-visuel-scene{
  flex:1;min-height:0;overflow:auto;
  padding:16px 20px;background:#F3F4F8;
  display:flex;align-items:flex-start;justify-content:center;
}
/* La hauteur est bornée pour que les trois formats, très différents,
   restent entièrement visibles sans déformer leurs proportions. */
.zayobs-visuel-canvas{
  max-width:100%;max-height:52vh;height:auto;width:auto;
  border:1px solid #E0E3ED;border-radius:6px;background:#fff;
  box-shadow:0 6px 18px rgba(16,33,107,.12);
}

.zayobs-visuel-actions{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 20px;border-top:1px solid #E7E9F0;flex:none;
}
.zayobs-visuel-btn{
  border:1px solid #D8DCE8;background:#fff;color:#1C2333;
  padding:10px 20px;border-radius:10px;cursor:pointer;
  font-size:15px;font-weight:600;min-height:44px;
}
.zayobs-visuel-btn:hover{border-color:#16216B}
.zayobs-visuel-btn--primaire{background:#16216B;border-color:#16216B;color:#fff}
.zayobs-visuel-btn--primaire:hover{background:#1E2C8A}
.zayobs-visuel-note{font-size:13px;color:#6B7280;margin-left:auto}

@media (max-width:600px){
  .zayobs-visuel-fond{padding:0}
  .zayobs-visuel-boite{border-radius:0;width:100%;max-height:100vh;height:100vh}
  .zayobs-visuel-canvas{max-height:46vh}
  .zayobs-visuel-note{margin-left:0;width:100%}
}