/* =========================================================
   K&S AUTOMOBILE — Boîtes de dialogue
   ---------------------------------------------------------
   Composant partagé par le site public et le backoffice.
   Repose sur l'élément natif <dialog> : centrage, capture du
   focus, fermeture par Échap et fond d'écran sont pris en
   charge par le navigateur ; ce fichier n'ajoute que
   l'apparence et les animations.

   Les couleurs sont redéfinissables : chaque contexte peut
   surcharger --ks-dlg-* sans toucher au composant.
   ========================================================= */

:root{
  --ks-dlg-bg:#ffffff;
  --ks-dlg-text:#15161a;
  --ks-dlg-muted:#6b7280;
  --ks-dlg-line:#e8e8e6;
  --ks-dlg-gold:#c9a227;
  --ks-dlg-gold-soft:#fbf7ea;
  --ks-dlg-dark:#0a0a0c;
  --ks-dlg-danger:#dc2626;
  --ks-dlg-danger-soft:#fee2e2;
  --ks-dlg-warn:#d97706;
  --ks-dlg-warn-soft:#fef3c7;
  --ks-dlg-ok:#16a34a;
  --ks-dlg-ok-soft:#dcfce7;
  --ks-dlg-info:#0284c7;
  --ks-dlg-info-soft:#e0f2fe;
  --ks-dlg-radius:16px;
  --ks-dlg-shadow:0 24px 60px -12px rgba(10,10,12,.35), 0 0 0 1px rgba(10,10,12,.05);
}

/* ---------------------------------------------------------
   Enveloppe
   --------------------------------------------------------- */
.ks-dialog{
  /* margin:auto centre la boîte dans les deux axes, y compris
     quand le contenu est plus haut que la fenêtre. */
  margin:auto;
  padding:0;
  border:none;
  width:min(440px, calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  border-radius:var(--ks-dlg-radius);
  background:var(--ks-dlg-bg);
  color:var(--ks-dlg-text);
  box-shadow:var(--ks-dlg-shadow);
  overflow:visible;
  font-family:inherit;

  /* État fermé de l'animation : la classe .is-open prend le relais. */
  opacity:0;
  transform:translateY(12px) scale(.96);
  transition:opacity .22s cubic-bezier(.16,1,.3,1),
             transform .28s cubic-bezier(.16,1,.3,1);
}

.ks-dialog.is-open{
  opacity:1;
  transform:translateY(0) scale(1);
}

.ks-dialog::backdrop{
  background:rgba(10,10,12,.55);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity .22s ease;
}
.ks-dialog.is-open::backdrop{ opacity:1; }

/* Léger rebond au refus d'une action (clic sur le fond). */
.ks-dialog.is-nudge{ animation:ks-dlg-nudge .28s ease; }
@keyframes ks-dlg-nudge{
  0%,100%{ transform:translateY(0) scale(1); }
  30%    { transform:translateY(0) scale(1.015); }
  65%    { transform:translateY(0) scale(.995); }
}

/* ---------------------------------------------------------
   Contenu
   --------------------------------------------------------- */
.ks-dialog__inner{ padding:26px 26px 20px; }

.ks-dialog__icon{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
  background:var(--ks-dlg-gold-soft);
  color:var(--ks-dlg-gold);
}
.ks-dialog__icon svg{ width:25px;height:25px; }

.ks-dialog--danger  .ks-dialog__icon{ background:var(--ks-dlg-danger-soft); color:var(--ks-dlg-danger); }
.ks-dialog--warnung .ks-dialog__icon{ background:var(--ks-dlg-warn-soft);   color:var(--ks-dlg-warn); }
.ks-dialog--erfolg  .ks-dialog__icon{ background:var(--ks-dlg-ok-soft);     color:var(--ks-dlg-ok); }
.ks-dialog--info    .ks-dialog__icon{ background:var(--ks-dlg-info-soft);   color:var(--ks-dlg-info); }

.ks-dialog__title{
  margin:0 0 8px;
  font-size:1.15rem;
  font-weight:700;
  line-height:1.3;
  text-align:center;
  letter-spacing:-.01em;
}

.ks-dialog__text{
  margin:0;
  font-size:.95rem;
  line-height:1.6;
  color:var(--ks-dlg-muted);
  text-align:center;
  overflow-wrap:anywhere;
}

/* Précision facultative, mise en évidence (nom du véhicule, référence…). */
.ks-dialog__detail{
  margin:14px 0 0;
  padding:11px 14px;
  border-radius:10px;
  background:var(--ks-dlg-gold-soft);
  border-left:3px solid var(--ks-dlg-gold);
  font-size:.9rem;
  font-weight:600;
  text-align:center;
  color:var(--ks-dlg-text);
  overflow-wrap:anywhere;
}
.ks-dialog--danger .ks-dialog__detail{
  background:var(--ks-dlg-danger-soft);
  border-left-color:var(--ks-dlg-danger);
}

/* ---------------------------------------------------------
   Actions
   --------------------------------------------------------- */
.ks-dialog__actions{
  display:flex;
  gap:10px;
  padding:18px 26px 24px;
}
.ks-dialog__actions > *{ flex:1; }

.ks-dialog__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 18px;
  border-radius:10px;
  border:1px solid transparent;
  font:inherit;
  font-size:.92rem;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
  text-decoration:none;
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
}
.ks-dialog__btn:active{ transform:translateY(1px); }
.ks-dialog__btn svg{ width:16px;height:16px;flex:none; }

.ks-dialog__btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(201,162,39,.35);
}

.ks-dialog__btn--ghost{
  background:transparent;
  color:var(--ks-dlg-muted);
  border-color:var(--ks-dlg-line);
}
.ks-dialog__btn--ghost:hover{ background:#f6f6f4; color:var(--ks-dlg-text); }

.ks-dialog__btn--gold{
  background:var(--ks-dlg-gold);
  color:var(--ks-dlg-dark);
}
.ks-dialog__btn--gold:hover{ background:#b8931f; }

.ks-dialog__btn--danger{
  background:var(--ks-dlg-danger);
  color:#ffffff;
}
.ks-dialog__btn--danger:hover{ background:#b91c1c; }
.ks-dialog__btn--danger:focus-visible{ box-shadow:0 0 0 3px rgba(220,38,38,.3); }

.ks-dialog__btn--dark{
  background:var(--ks-dlg-dark);
  color:#ffffff;
}
.ks-dialog__btn--dark:hover{ background:#22252c; }

/* Bouton de fermeture en coin */
.ks-dialog__close{
  position:absolute;
  top:12px;right:12px;
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;
  color:var(--ks-dlg-muted);
  border-radius:8px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.ks-dialog__close:hover{ background:#f1f1ef; color:var(--ks-dlg-text); }
.ks-dialog__close svg{ width:17px;height:17px; }

/* ---------------------------------------------------------
   Mobile : la boîte se colle en bas, comme une feuille
   --------------------------------------------------------- */
@media (max-width: 520px){
  .ks-dialog{
    width:100%;
    max-width:100%;
    margin:auto 0 0;
    border-radius:18px 18px 0 0;
    transform:translateY(100%);
    transition:opacity .2s ease, transform .3s cubic-bezier(.16,1,.3,1);
  }
  .ks-dialog.is-open{ transform:translateY(0); }

  /* Barre de préhension, pour signaler que la feuille se referme. */
  .ks-dialog__inner{ padding-top:30px; }
  .ks-dialog__inner::before{
    content:'';
    position:absolute;
    top:11px;left:50%;
    width:38px;height:4px;
    margin-left:-19px;
    border-radius:99px;
    background:var(--ks-dlg-line);
  }

  .ks-dialog__actions{
    flex-direction:column-reverse;   /* action principale sous le pouce */
    padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .ks-dialog__close{ display:none; }
}

/* ---------------------------------------------------------
   Accessibilité : mouvement réduit
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .ks-dialog,
  .ks-dialog::backdrop{ transition-duration:.01ms; }
  .ks-dialog{ transform:none; }
  .ks-dialog.is-open{ transform:none; }
  .ks-dialog.is-nudge{ animation:none; }
}

/* ---------------------------------------------------------
   Repli si <dialog> n'est pas pris en charge
   (le script ajoute alors .ks-dialog--fallback)
   --------------------------------------------------------- */
.ks-dialog--fallback{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  width:auto;
  max-height:none;
  background:rgba(10,10,12,.55);
  border-radius:0;
  box-shadow:none;
  padding:16px;
}
.ks-dialog--fallback .ks-dialog__inner,
.ks-dialog--fallback .ks-dialog__actions{
  background:var(--ks-dlg-bg);
}
.ks-dialog--fallback .ks-dialog__box{
  width:min(440px,100%);
  background:var(--ks-dlg-bg);
  border-radius:var(--ks-dlg-radius);
  box-shadow:var(--ks-dlg-shadow);
  overflow:hidden;
}