/**
 * EasyCM — Animations formulaires (focus, entrée échelonnée, erreurs, boutons)
 * S’applique à .ecm-form-premium et au bloc newsletter du footer.
 */
:root {
  --ecm-form-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ecm-form-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ecm-form-blue: #2563eb;
  --ecm-form-blue-mid: #3b82f6;
  --ecm-form-blue-glow: rgba(59, 130, 246, 0.28);
  --ecm-form-blue-soft: rgba(37, 99, 235, 0.12);
  --ecm-form-radius: 12px;
}

/* ——— Entrée échelonnée des champs ——— */
@keyframes ecm-form-field-in {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes ecm-form-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(-7px);
  }
  30% {
    transform: translateX(7px);
  }
  45% {
    transform: translateX(-5px);
  }
  60% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-2px);
  }
}

@keyframes ecm-form-error-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.08);
  }
}

@keyframes ecm-form-hint-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ecm-form-premium {
  position: relative;
}

.ecm-form-premium > .mb-3,
.ecm-form-premium > .form-check,
.ecm-form-premium > .d-flex,
.ecm-form-premium > .row {
  animation: ecm-form-field-in 0.65s var(--ecm-form-ease-out) backwards;
}

.ecm-form-premium button[type='submit'] {
  animation: ecm-form-field-in 0.65s var(--ecm-form-ease-out) backwards;
  animation-delay: 0.48s;
}

.ecm-form-premium > .mb-3:nth-of-type(1) {
  animation-delay: 0.04s;
}
.ecm-form-premium > .mb-3:nth-of-type(2) {
  animation-delay: 0.1s;
}
.ecm-form-premium > .mb-3:nth-of-type(3) {
  animation-delay: 0.16s;
}
.ecm-form-premium > .mb-3:nth-of-type(4) {
  animation-delay: 0.22s;
}
.ecm-form-premium > .mb-3:nth-of-type(5) {
  animation-delay: 0.28s;
}
.ecm-form-premium > .mb-3:nth-of-type(6) {
  animation-delay: 0.34s;
}
.ecm-form-premium > .mb-3:nth-of-type(7) {
  animation-delay: 0.4s;
}
.ecm-form-premium > .mb-3:nth-of-type(8) {
  animation-delay: 0.46s;
}

.ecm-form-premium > .form-check {
  animation-delay: 0.32s;
}
.ecm-form-premium > .d-flex {
  animation-delay: 0.38s;
}

/* Grilles admin : lignes dans .row */
.ecm-form-premium .row.g-2 > [class*='col-'],
.ecm-form-premium .row.g-3 > [class*='col-'] {
  animation: ecm-form-field-in 0.55s var(--ecm-form-ease-out) backwards;
}
.ecm-form-premium .row > [class*='col-']:nth-child(1) {
  animation-delay: 0.03s;
}
.ecm-form-premium .row > [class*='col-']:nth-child(2) {
  animation-delay: 0.08s;
}
.ecm-form-premium .row > [class*='col-']:nth-child(3) {
  animation-delay: 0.13s;
}
.ecm-form-premium .row > [class*='col-']:nth-child(4) {
  animation-delay: 0.18s;
}
.ecm-form-premium .row > [class*='col-']:nth-child(5) {
  animation-delay: 0.23s;
}
.ecm-form-premium .row > [class*='col-']:nth-child(6) {
  animation-delay: 0.28s;
}

/* Formulaire Bootstrap row sur le <form> (admin slides / services) */
.ecm-form-premium[class*='row'] > [class*='col-'] {
  animation: ecm-form-field-in 0.55s var(--ecm-form-ease-out) backwards;
}
.ecm-form-premium[class*='row'] > [class*='col-']:nth-child(1) {
  animation-delay: 0.04s;
}
.ecm-form-premium[class*='row'] > [class*='col-']:nth-child(2) {
  animation-delay: 0.09s;
}
.ecm-form-premium[class*='row'] > [class*='col-']:nth-child(3) {
  animation-delay: 0.14s;
}
.ecm-form-premium[class*='row'] > [class*='col-']:nth-child(4) {
  animation-delay: 0.19s;
}
.ecm-form-premium[class*='row'] > [class*='col-']:nth-child(5) {
  animation-delay: 0.24s;
}
.ecm-form-premium[class*='row'] > [class*='col-']:nth-child(6) {
  animation-delay: 0.29s;
}

/* ——— Groupes avec icônes : halo au focus ——— */
.ecm-form-premium .input-group {
  position: relative;
  border-radius: var(--ecm-form-radius);
  transition: box-shadow 0.45s var(--ecm-form-ease), transform 0.45s var(--ecm-form-ease);
  isolation: isolate;
}

.ecm-form-premium .input-group::after {
  content: '';
  position: absolute;
  left: var(--ecm-line-left, 0);
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ecm-form-blue), var(--ecm-form-blue-mid));
  border-radius: 0 0 var(--ecm-form-radius) var(--ecm-form-radius);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: transform 0.5s var(--ecm-form-ease), opacity 0.35s ease;
  pointer-events: none;
  z-index: 2;
}

.ecm-form-premium .input-group:focus-within {
  box-shadow: 0 4px 24px var(--ecm-form-blue-soft), 0 0 0 1px rgba(37, 99, 235, 0.15);
  transform: translateY(-1px);
}

.ecm-form-premium .input-group:focus-within::after {
  transform: scaleX(1);
  opacity: 1;
}

.ecm-form-premium .input-group .input-group-text {
  border-color: rgba(37, 99, 235, 0.14);
  transition: background 0.4s var(--ecm-form-ease), border-color 0.4s ease, color 0.35s ease,
    transform 0.35s var(--ecm-form-ease);
}

.ecm-form-premium .input-group:focus-within .input-group-text {
  background: linear-gradient(145deg, #eff6ff, #dbeafe) !important;
  border-color: rgba(37, 99, 235, 0.35);
  color: var(--ecm-form-blue) !important;
}

.ecm-form-premium .input-group:focus-within .input-group-text i {
  transform: scale(1.08);
  transition: transform 0.35s var(--ecm-form-ease);
}

/* Champs seuls (sans input-group) */
.ecm-form-premium > .mb-3 .form-control:not(.input-group .form-control),
.ecm-form-premium .mb-3 > .form-control,
.ecm-form-premium textarea.form-control {
  position: relative;
  border: 1px solid rgba(15, 23, 42, 0.12);
  transition: border-color 0.4s var(--ecm-form-ease), box-shadow 0.4s var(--ecm-form-ease),
    transform 0.35s var(--ecm-form-ease), background 0.35s ease;
}

.ecm-form-premium .input-group .form-control {
  border-color: rgba(15, 23, 42, 0.1);
  transition: border-color 0.4s var(--ecm-form-ease), box-shadow 0.4s var(--ecm-form-ease),
    transform 0.35s var(--ecm-form-ease), background 0.35s ease;
}

.ecm-form-premium .form-control:hover:not(:focus):not(.is-invalid) {
  border-color: rgba(37, 99, 235, 0.25);
}

.ecm-form-premium .form-control:focus {
  border-color: var(--ecm-form-blue-mid);
  box-shadow: 0 0 0 4px var(--ecm-form-blue-glow);
  outline: none;
  transform: translateY(-1px);
  background: #fff;
}

.ecm-form-premium .form-label {
  display: inline-block;
  transition: color 0.35s var(--ecm-form-ease), transform 0.35s var(--ecm-form-ease);
  transform-origin: left center;
}

.ecm-form-premium .mb-3:focus-within .form-label,
.ecm-form-premium .form-group:focus-within .form-label {
  color: var(--ecm-form-blue);
  transform: translateY(-1px);
}

/* ——— Erreurs validation ——— */
.ecm-form-premium .form-control.is-invalid {
  animation: ecm-form-shake 0.5s var(--ecm-form-ease), ecm-form-error-pulse 1.2s ease 0.2s 2;
  border-color: #dc3545 !important;
}

.ecm-form-premium .input-group:has(.form-control.is-invalid) {
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12);
}

.ecm-form-premium .input-group:has(.form-control.is-invalid)::after {
  background: linear-gradient(90deg, #dc2626, #f87171);
  transform: scaleX(1);
  opacity: 1;
}

.ecm-form-premium .invalid-feedback,
.ecm-form-premium .invalid-feedback.d-block {
  animation: ecm-form-hint-in 0.4s var(--ecm-form-ease-out) both;
}

/* ——— Checkbox / switch ——— */
.ecm-form-premium .form-check-input {
  width: 1.15em;
  height: 1.15em;
  margin-top: 0.15em;
  cursor: pointer;
  border: 2px solid rgba(37, 99, 235, 0.35);
  transition: transform 0.3s var(--ecm-form-ease), box-shadow 0.3s ease, border-color 0.3s ease,
    background-color 0.3s ease;
}

.ecm-form-premium .form-check-input:focus {
  box-shadow: 0 0 0 4px var(--ecm-form-blue-glow);
  border-color: var(--ecm-form-blue);
}

.ecm-form-premium .form-check-input:checked {
  background-color: var(--ecm-form-blue);
  border-color: var(--ecm-form-blue-deep, #1d4ed8);
  transform: scale(1.06);
}

.ecm-form-premium .form-check-label {
  transition: color 0.25s ease;
  cursor: pointer;
}

.ecm-form-premium .form-check:hover .form-check-label {
  color: var(--ecm-form-blue);
}

/* ——— Bouton submit ——— */
.ecm-form-premium button[type='submit'] {
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--ecm-form-ease), box-shadow 0.35s ease, filter 0.25s ease;
}

.ecm-form-premium button[type='submit']::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 45%,
    transparent 60%
  );
  transform: translateX(-120%);
  transition: transform 0.85s var(--ecm-form-ease);
  pointer-events: none;
}

.ecm-form-premium button[type='submit']:hover::before {
  transform: translateX(120%);
}

.ecm-form-premium button[type='submit']:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.35);
}

.ecm-form-premium button[type='submit']:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.08s;
}

/* ——— Footer newsletter ——— */
.ecm-footer .ecm-newsletter-box .form-control {
  transition: border-color 0.4s var(--ecm-form-ease), box-shadow 0.4s var(--ecm-form-ease),
    transform 0.3s ease;
}

.ecm-footer .ecm-newsletter-box .form-control:focus {
  border-color: var(--ecm-form-blue-mid) !important;
  box-shadow: 0 0 0 4px var(--ecm-form-blue-glow) !important;
  transform: translateY(-1px);
  outline: none;
}

.ecm-footer .ecm-newsletter-box .newsletter-btn {
  transition: transform 0.3s var(--ecm-form-ease), box-shadow 0.3s ease, filter 0.2s ease;
}

.ecm-footer .ecm-newsletter-box .newsletter-btn:hover {
  transform: translateY(-50%) scale(1.03);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
}

/* ——— Accueil : bloc newsletter si .ecm-form-premium ——— */
.ecm-page-home .ecm-form-premium .form-control {
  transition: border-color 0.4s var(--ecm-form-ease), box-shadow 0.4s var(--ecm-form-ease),
    transform 0.3s ease;
}

.ecm-page-home .ecm-form-premium .form-control:focus {
  box-shadow: 0 0 0 4px var(--ecm-form-blue-glow);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .ecm-form-premium > *,
  .ecm-form-premium .row > [class*='col-'],
  .ecm-form-premium[class*='row'] > [class*='col-'],
  .ecm-form-premium button[type='submit'] {
    animation: none !important;
  }

  .ecm-form-premium .form-control.is-invalid {
    animation: none !important;
  }

  .ecm-form-premium button[type='submit']::before {
    display: none;
  }
}