.grad-text {
  background: linear-gradient(120deg, #00E6FF 10%, #FF3EB5 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.btn-gradient {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  border-radius: 100px;
  background: linear-gradient(120deg, #00E6FF, #FF3EB5);
  border: none;
  color: #0A0A0A !important;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.btn-gradient:hover {
  box-shadow: 0 0 0 1px rgba(0, 230, 255, 0.4),
    0 16px 40px -16px rgba(255, 62, 181, 0.6);
  color: #0A0A0A !important;
}

.btn-gradient:active {
  transform: translateY(1px);
}

.card {
  position: relative;
  isolation: isolate;
  transition: all 0.3s ease-in-out !important;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 15px !important;
  padding: 30px !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* 1. L'effet de mouvement au survol (Hover) */
.card:hover {
  transform: translateY(-8px) !important;
  border: 1px solid #FF80EC !important;
  box-shadow: 0 15px 30px rgba(231, 8, 216, 0.2), 0 5px 10px rgba(0, 0, 0, 0.1) !important;
  cursor: pointer;
}

/* ===========================================================
   FAQ — HB Clean Auto 64  ·  version FOND CLAIR
   Widget : Accordéon imbriqué (nested-accordion)
   Classe à ajouter au widget : hb-faq
   =========================================================== */

.e-n-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 0;
}

/* --- Chaque item : une carte ---------------------------------------- */

.e-n-accordion-item {
  background: #FFFFFF;
  border: 1px solid #E4E2E8;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.e-n-accordion-item:hover {
  border-color: #C9C6D0;
}

.e-n-accordion-item[open] {
  border-color: transparent;
  box-shadow: 0 0 0 1.5px #00E6FF, 0 14px 34px -18px rgba(255, 62, 181, .35);
}

/* --- La question ----------------------------------------------------- */

.e-n-accordion-item-title {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
  outline: none;
  border: 0 !important;
  background: transparent;
}

/* Focus clavier visible, mais pas le cadre noir disgracieux */
.e-n-accordion-item-title:focus-visible {
  box-shadow: inset 0 0 0 2px #00E6FF;
  border-radius: 12px;
}

.e-n-accordion-item-title::-webkit-details-marker {
  display: none;
}

.e-n-accordion-item-title::marker {
  content: "";
}

/* --- Le texte de la question ---------------------------------------- */

.e-n-accordion-item-title-header {
  order: 2;
  /* l'icône passe à gauche */
  flex: 1 1 auto;
  min-width: 0;
}

.e-n-accordion-item-title-text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1B1A21 !important;
  text-align: left;
  transition: color .2s ease;
}

.e-n-accordion-item-title:hover .e-n-accordion-item-title-text {
  color: #0090A8 !important;
}

.e-n-accordion-item[open] .e-n-accordion-item-title-text {
  color: #0090A8 !important;
  /* cyan assombri : lisible sur blanc */
}

/* --- L'icône + / −  (cercle, pas ovale) ------------------------------ */

.e-n-accordion-item-title-icon {
  order: 1;
  flex: 0 0 30px;
  /* <- empêche le flex d'écraser le cercle */
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #F2F0F5;
  border: 0;
  transition: background .25s ease, transform .3s ease;
}

.e-n-accordion-item-title-icon svg {
  width: 10px;
  height: 10px;
  fill: #5C5A66;
  transition: fill .25s ease;
}

.e-n-accordion-item-title:hover .e-n-accordion-item-title-icon {
  background: #E2F9FD;
}

.e-n-accordion-item-title:hover .e-n-accordion-item-title-icon svg {
  fill: #0090A8;
}

/* Ouvert : pastille dégradée, icône « − » en négatif */
.e-n-accordion-item[open] .e-n-accordion-item-title-icon {
  background: linear-gradient(120deg, #00E6FF, #FF3EB5);
  transform: rotate(180deg);
}

.e-n-accordion-item[open] .e-n-accordion-item-title-icon svg {
  fill: #FFFFFF;
}

/* --- La réponse ------------------------------------------------------ */

.e-n-accordion-item>.e-con {
  padding: 0 22px 22px 68px !important;
  /* aligné sous le texte, pas sous l'icône */
}

.elementor-widget-text-editor {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: .95rem;
  line-height: 1.65;
  color: #5C5A66;
  max-width: 70ch;
}

/* --- Mobile ---------------------------------------------------------- */

@media (max-width: 640px) {
  .e-n-accordion-item-title {
    padding: 16px 16px;
    gap: 12px;
  }

  .e-n-accordion-item-title-text {
    font-size: .95rem;
  }

  .e-n-accordion-item>.e-con {
    padding: 0 16px 18px 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {

  .e-n-accordion-item,
  .e-n-accordion-item-title-icon,
  .e-n-accordion-item-title-icon svg,
  .e-n-accordion-item-title-text {
    transition: none;
  }
}

/* ===========================================================
   FORMULAIRE DE CONTACT — HB Clean Auto 64
   Classe du widget : hb-contact
   Variante fond clair : hb-contact hb-contact--light
   =========================================================== */

.hb-contact {
  --c-ink: #0A0A0A;
  --c-surface: #1B1A21;
  --c-panel: #141318;
  --c-text: #E7E7EA;
  --c-soft: #8F8DA0;
  --c-line: rgba(231, 231, 234, .18);
  --c-cyan: #00E6FF;
  --c-magenta: #FF3EB5;
  --c-danger: #FF6B6B;
  --c-focus-ring: rgba(0, 230, 255, .15);
}

/* Bascule fond clair */
.hb-contact--light {
  --c-ink: #FFFFFF;
  --c-surface: #FFFFFF;
  --c-panel: #F7F6F9;
  --c-text: #1B1A21;
  --c-soft: #5C5A66;
  --c-line: #DDDBE2;
  --c-cyan: #0090A8;
  /* cyan assombri : lisible sur blanc */
  --c-magenta: #C42E8C;
  --c-danger: #C0392B;
  --c-focus-ring: rgba(0, 144, 168, .15);
}

/* --- Conteneur ------------------------------------------------------- */

.hb-contact .elementor-form {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: clamp(24px, 4vw, 40px);
}

.hb-contact .elementor-form-fields-wrapper {
  gap: 4px 0;
  /* Elementor gère l'espacement horizontal via ses colonnes */
}

/* --- Libellés -------------------------------------------------------- */

.hb-contact .elementor-field-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-soft) !important;
  margin-bottom: 8px !important;
}

/* L'astérisque des champs obligatoires */
.hb-contact .elementor-field-required .elementor-field-label::after {
  content: " *";
  color: var(--c-magenta);
}

.hb-contact .elementor-mark-required .elementor-field-label:after {
  content: "";
}

/* --- Champs ---------------------------------------------------------- */

.hb-contact .elementor-field-textual {
  width: 100%;
  background: var(--c-surface) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  color: var(--c-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: .95rem !important;
  line-height: 1.5;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: none;
}

.hb-contact .elementor-field-textual::placeholder {
  color: var(--c-soft) !important;
  opacity: .75;
}

.hb-contact .elementor-field-textual:hover {
  border-color: var(--c-soft) !important;
}

.hb-contact .elementor-field-textual:focus {
  outline: none;
  border-color: var(--c-cyan) !important;
  box-shadow: 0 0 0 3px var(--c-focus-ring) !important;
}

.hb-contact textarea.elementor-field-textual {
  min-height: 140px;
  resize: vertical;
}

/* Champ en erreur */
.hb-contact .elementor-field-textual:user-invalid:not(:placeholder-shown) {
  border-color: var(--c-danger) !important;
}

/* Neutralise l'autofill bleuâtre de Chrome sur fond sombre */
.hb-contact .elementor-field-textual:-webkit-autofill,
.hb-contact .elementor-field-textual:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--c-text);
  -webkit-box-shadow: 0 0 0 1000px var(--c-surface) inset;
  caret-color: var(--c-text);
}

/* --- reCAPTCHA ------------------------------------------------------- */

.hb-contact .elementor-field-type-recaptcha {
  margin-top: 8px;
}

.hb-contact .elementor-g-recaptcha {
  display: flex;
  justify-content: flex-start;
}

/* --- Bouton d'envoi -------------------------------------------------- */

.hb-contact .elementor-button[type="submit"] {
  width: 100%;
  margin-top: 12px;
  background: linear-gradient(120deg, #00E6FF, #FF3EB5) !important;
  color: #0A0A0A !important;
  border: 0 !important;
  border-radius: 100px !important;
  padding: 16px 28px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: .92rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: box-shadow .2s ease, transform .12s ease;
}

.hb-contact .elementor-button[type="submit"]:hover {
  box-shadow: 0 0 0 1px rgba(0, 230, 255, .4),
    0 18px 40px -18px rgba(255, 62, 181, .65);
  color: #0A0A0A !important;
}

.hb-contact .elementor-button[type="submit"]:active {
  transform: translateY(1px);
}

/* --- Messages de retour ---------------------------------------------- */

.hb-contact .elementor-message {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: .9rem;
  line-height: 1.5;
}

.hb-contact .elementor-message.elementor-message-success {
  color: var(--c-cyan) !important;
  background: rgba(0, 230, 255, .08);
  border-left: 3px solid var(--c-cyan);
}

.hb-contact .elementor-message.elementor-message-danger {
  color: var(--c-danger) !important;
  background: rgba(255, 107, 107, .08);
  border-left: 3px solid var(--c-danger);
}

.hb-contact .elementor-message::before {
  display: none;
}

/* --- Mobile ---------------------------------------------------------- */

@media (max-width: 767px) {
  .hb-contact .elementor-form {
    padding: 22px 18px;
    border-radius: 12px;
  }

  .hb-contact .elementor-field-textual {
    padding: 13px 14px !important;
    font-size: 16px !important;
    /* 16px empêche iOS de zoomer au focus */
  }
}

@media (prefers-reduced-motion: reduce) {

  .hb-contact .elementor-field-textual,
  .hb-contact .elementor-button[type="submit"] {
    transition: none;
  }
}