/* Fenêtres modales du site (revendication de fiche, devis d'une fiche, demande générale).
   <dialog> natif : focus piégé, Échap et fond inerte fournis par le navigateur. Le thème pose
   « * { margin:0 } », qui annule le centrage natif : inset:0 + margin:auto le rétablissent. */
.sc-modale { position: fixed; inset: 0; margin: auto; border: 0; border-radius: 10px; padding: 0;
  width: min(600px, calc(100vw - 32px)); max-height: 92vh; overflow: hidden; color: #323232;
  box-shadow: 0 24px 70px rgba(21,30,37,.28); }
.sc-modale[open] { display: flex; flex-direction: column; animation: sc-modale-in .18s ease-out; }
.sc-modale::backdrop { background: rgba(21,30,37,.6); backdrop-filter: blur(2px); }
@keyframes sc-modale-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.sc-modale__tete { flex: 0 0 auto; display: flex; gap: 14px; align-items: flex-start; padding: 22px 24px 18px;
  border-bottom: 1px solid #eef0f2; }
.sc-modale__icone { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: #e6f7fe; color: #00adf2;
  display: flex; align-items: center; justify-content: center; }
.sc-modale__icone svg { width: 22px; height: 22px; }
.sc-modale__titres { flex: 1 1 auto; min-width: 0; }
.sc-modale__titres h2, .sc-modale__titres h3 { font-family: Poppins, Arial, sans-serif; font-size: 19px; line-height: 26px;
  font-weight: 700; color: #151e25; margin: 0 0 4px; }
.sc-modale__titres p { font-size: 13.5px; line-height: 21px; color: #767676; margin: 0; float: none; }
.sc-modale__fermer { flex: 0 0 auto; width: 34px; height: 34px; margin: -4px -6px 0 0; border: 0; border-radius: 50%;
  background: none; color: #767676; font-size: 24px; line-height: 34px; cursor: pointer; }
.sc-modale__fermer:hover, .sc-modale__fermer:focus-visible { background: #f2f4f5; color: #151e25; }

/* corps défilable sur petit écran, sans barre visible sur un écran normal */
.sc-modale__corps { flex: 1 1 auto; overflow-y: auto; padding: 20px 24px 22px; scrollbar-width: thin; }
.sc-modale form { margin: 0; }
.sc-modale__grille { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.sc-modale__champ { margin: 0 0 14px; }
.sc-modale__champ--large { grid-column: 1 / -1; }
.sc-modale__champ label { display: block; font-family: Poppins, Arial, sans-serif; font-size: 13px; font-weight: 500;
  color: #323232; margin: 0 0 6px; }
.sc-modale__champ label small { font-weight: 400; color: #767676; font-size: 12px; }
.sc-modale__champ .form-control { width: 100%; height: 46px; box-sizing: border-box; margin: 0; padding: 0 14px;
  border: 1px solid #dfe3e7; border-radius: 6px; background: #fff; font-size: 15px; color: #323232; box-shadow: none;
  transition: border-color .15s, box-shadow .15s; }
/* le thème impose textarea.form-control { height:210px } et ignore rows */
.sc-modale__champ textarea.form-control { height: 108px; padding: 11px 14px; line-height: 22px; resize: vertical; }
.sc-modale__champ .form-control:focus { border-color: #00adf2; box-shadow: 0 0 0 3px rgba(0,173,242,.15); outline: 0; }
.sc-modale__champ .form-control::placeholder { color: #a3a9b0; }

.sc-modale__pied { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.sc-modale__pied .wt-btn { float: none; width: auto; margin: 0; padding: 0 26px; height: 46px; line-height: 46px;
  border-radius: 6px; background: #151e25; color: #fff; transition: background .15s; }
.sc-modale__pied .wt-btn:hover, .sc-modale__pied .wt-btn:focus-visible { background: #00adf2; color: #fff; }
.sc-modale__pied .wt-btn[disabled] { opacity: .6; cursor: wait; }
.sc-modale__annuler { border: 0; background: none; color: #767676; font-size: 14px; cursor: pointer; padding: 8px 6px; }
.sc-modale__annuler:hover { color: #151e25; text-decoration: underline; }
.sc-modale__note { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 19px; color: #8a9097;
  margin: 16px 0 0; float: none; }
.sc-modale__note svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; }

.sc-modale__retour { margin: 12px 0 0; padding: 10px 12px; border-radius: 6px; font-size: 13.5px; line-height: 20px;
  background: #f2f4f5; color: #323232; float: none; }
.sc-modale__retour.is-erreur { background: #fdecec; color: #c62828; }
.sc-modale__succes { text-align: center; padding: 18px 8px 8px; }
.sc-modale__succes-icone { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: #e8f6ec; color: #2e7d32;
  display: flex; align-items: center; justify-content: center; }
.sc-modale__succes-icone svg { width: 28px; height: 28px; }
.sc-modale__succes h3 { font-family: Poppins, Arial, sans-serif; font-size: 18px; margin: 0 0 6px; color: #151e25; }
.sc-modale__succes p { color: #767676; font-size: 14px; line-height: 22px; margin: 0 0 18px; float: none; }
.sc-modale__succes .wt-btn { float: none; }

/* pot de miel : hors écran plutôt que display:none, que certains robots détectent */
.sc-modale__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 600px) {
  /* feuille qui monte du bas de l'écran */
  .sc-modale { width: 100%; max-width: 100%; max-height: 94vh; margin: auto 0 0; border-radius: 14px 14px 0 0; }
  .sc-modale__grille { grid-template-columns: 1fr; }
  .sc-modale__tete { padding: 18px 18px 14px; }
  .sc-modale__corps { padding: 16px 18px 20px; }
  .sc-modale__pied .wt-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .sc-modale[open] { animation: none; } }
