/* CENIPE-APE — Styles du socle d'interface (notifications, effets, animations).
   Chargé par l'espace de gestion ET le portail parents.                        */

/* ---------- Notifications ---------- */
.toast-bac{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;
  gap:10px;max-width:min(400px,calc(100vw - 32px));pointer-events:none}
.toast{display:flex;align-items:flex-start;gap:11px;background:#fff;border-radius:13px;
  padding:13px 14px;box-shadow:0 12px 32px -12px rgba(4,52,44,.42),0 2px 6px rgba(4,52,44,.08);
  border-left:4px solid #0F6E56;font-size:13.8px;line-height:1.45;color:#1c2b27;
  transform:translateX(120%);opacity:0;transition:transform .3s cubic-bezier(.2,.9,.3,1),opacity .3s;
  pointer-events:auto}
.toast.entree{transform:none;opacity:1}
.toast.sortie{transform:translateX(120%);opacity:0}
.toast .t-ic{width:19px;height:19px;flex:none;margin-top:1px}
.toast .t-msg{flex:1}
.toast .t-x{background:none;border:0;color:#9aa8a2;font-size:19px;line-height:1;cursor:pointer;
  padding:0 2px;flex:none}
.toast .t-x:hover{color:#5f6b66}
.toast-ok{border-left-color:#0F6E56}      .toast-ok .t-ic{color:#0F6E56}
.toast-warn{border-left-color:#854F0B}    .toast-warn .t-ic{color:#854F0B}
.toast-err{border-left-color:#993C1D}     .toast-err .t-ic{color:#993C1D}
.toast-info{border-left-color:#185FA5}    .toast-info .t-ic{color:#185FA5}
@media(max-width:560px){
  .toast-bac{top:auto;bottom:14px;left:14px;right:14px;max-width:none}
  .toast{transform:translateY(140%)}
  .toast.sortie{transform:translateY(140%)}
}

/* ---------- Effet d'onde au clic ---------- */
.onde{position:absolute;border-radius:50%;background:currentColor;opacity:.22;
  transform:scale(0);animation:onde .6s ease-out;pointer-events:none;z-index:0}
@keyframes onde{to{transform:scale(2.2);opacity:0}}
button,.btn,.cta,.choice,.op{overflow:hidden}

/* ---------- Apparition progressive ---------- */
.anim{opacity:0;transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1)}
.anim.vu{opacity:1;transform:none}

/* ---------- Boutons modernisés (espace de gestion) ---------- */
.btn{position:relative;transition:transform .14s ease,box-shadow .18s ease,background .18s ease}
.btn:hover:not(:disabled){transform:translateY(-1.5px);box-shadow:0 8px 18px -8px rgba(15,110,86,.62)}
.btn:active:not(:disabled){transform:translateY(0)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-mini{transition:transform .12s ease,background .16s ease}
.btn-mini:hover{transform:translateY(-1px)}

/* ---------- Bascule du son ---------- */
.son-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);color:#cfe6dd;
  border-radius:9px;padding:7px 10px;font-size:11.5px;font-weight:600;cursor:pointer;width:100%}
.son-btn:hover{background:rgba(255,255,255,.2);color:#fff}
.son-btn svg{width:14px;height:14px}
.son-btn.off{opacity:.6}

@media(prefers-reduced-motion:reduce){
  .toast,.anim,.btn,.btn-mini{transition:none !important}
  .onde{display:none}
  .anim{opacity:1;transform:none}
}

/* ---------- Modale animée réutilisable ---------- */
.ui-modal-back{display:none;position:fixed;inset:0;z-index:200;align-items:center;justify-content:center;
  padding:20px;background:rgba(4,52,44,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .22s ease}
.ui-modal-back.ouvert{opacity:1}
.ui-modal-card{position:relative;background:#fff;border-radius:18px;padding:26px 26px 22px;
  width:100%;max-width:580px;max-height:90vh;overflow:auto;
  box-shadow:0 30px 70px -20px rgba(4,52,44,.5),0 4px 12px rgba(4,52,44,.12);
  transform:translateY(20px) scale(.96);opacity:0;
  transition:transform .27s cubic-bezier(.2,.85,.3,1),opacity .27s ease}
.ui-modal-back.ouvert .ui-modal-card{transform:none;opacity:1}
.ui-modal-x{position:absolute;top:13px;right:14px;width:32px;height:32px;border:none;border-radius:9px;
  background:#eef3f1;color:#5f6b66;font-size:22px;line-height:1;cursor:pointer;z-index:2;
  display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,transform .12s}
.ui-modal-x:hover{background:var(--coral-l,#FAECE7);color:var(--coral,#993C1D);transform:rotate(90deg)}
/* Le panneau réutilisé perd son cadre propre une fois dans la modale */
.ui-modal-body .panel{border:none!important;box-shadow:none!important;padding:0!important;margin:0!important;background:transparent!important}
.ui-modal-body h3{margin-top:0;padding-right:34px}
@media(max-width:560px){ .ui-modal-card{padding:22px 18px 18px;border-radius:15px} }
@media(prefers-reduced-motion:reduce){
  .ui-modal-back,.ui-modal-card{transition:none!important}
}