/* ============================================================
   Ruach Hub — assets/css/elementor-overrides.css
   Ajustements FINS pour l'intégration Elementor. Ne touche
   jamais au core Elementor : se contente d'aligner les valeurs
   par défaut sur les tokens de marque Ruach Hub.
   ------------------------------------------------------------
   Chargé sur le front ET dans l'éditeur (voir inc/enqueue.php).
   Garder ce fichier léger : Elementor gère la mise en page,
   on ne fait qu'harmoniser typographie, couleurs et composants.
   ============================================================ */

/* Le contenu Elementor occupe la zone de contenu du thème,
   sans marge parasite héritée du thème. */
.elementor-page .rh-content { padding: 0; }

/* Largeur de contenu par défaut alignée sur le design system
   (Elementor « Boxed »). Réglable dans Site Settings > Layout. */
.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--maxw); }

/* ---------- Typographie : titres Elementor en Space Grotesk ---------- */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  line-height: 1.08;
  color: var(--fg-1);
}
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  font-family: var(--font-body);
  color: var(--fg-1);
  line-height: 1.6;
}

/* ---------- Boutons Elementor → style Ruach Hub ---------- */
.elementor-button {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: all .18s cubic-bezier(.2,0,0,1);
  box-shadow: none;
}
.elementor-button:not(:hover) { background-color: var(--ruach-500); color: #fff; }
.elementor-button:hover { background-color: var(--ruach-600); color: #fff; }
.elementor-button:active { transform: scale(.98); }

/* Variante secondaire : ajouter la classe CSS « is-secondary »
   au bouton dans Elementor (Avancé > CSS Classes). */
.elementor-button.is-secondary {
  background-color: var(--surface);
  color: var(--fg-1);
  border: 1px solid var(--line-strong);
}
.elementor-button.is-secondary:hover { background-color: var(--surface-sunk); }

/* ---------- Champs de formulaire (Elementor Pro Forms) ---------- */
.elementor-field-group .elementor-field {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--fg-1);
  font-family: var(--font-body);
}
.elementor-field-group .elementor-field:focus {
  border-color: var(--ruach-500);
  box-shadow: var(--focus-ring);
  outline: none;
}

/* ---------- Liens dans le contenu Elementor ---------- */
.elementor-widget-text-editor a { color: var(--ruach-700); }

/* ---------- Espacements de section alignés sur l'échelle ---------- */
.elementor-section { --section-rhythm: var(--space-9); }

/* Petite classe utilitaire : carte Ruach Hub réutilisable
   (à appliquer à une colonne/conteneur Elementor via CSS Classes). */
.rh-elementor-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: all .2s cubic-bezier(.2,0,0,1);
}
.rh-elementor-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }