/* ==========================================================================
   EXIGENCES GROUPE — INTÉGRATION ELEMENTOR
   ==========================================================================
   Ces styles s'appliquent uniquement lorsque le thème rend une page construite
   avec Elementor (body.eg-elementor-page) ou lorsque l'éditeur Elementor est
   ouvert. Objectif : que le contenu Elementor épouse le design system du thème
   (tokens, typographies, boutons) sans combats de spécificité.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. En-tête : fond opaque sur les pages Elementor
   Le header de la maquette est transparent et survole le hero de page. Sur une
   page construite avec Elementor, le premier conteneur n'est pas forcément un
   hero sombre : on force le header en fond opaque dès le chargement.
   -------------------------------------------------------------------------- */
body.eg-elementor-page .header {
  background: var(--eg-ink-900);
  border-bottom: 1px solid var(--eg-ink-800);
}

body.eg-elementor-page .header.scrolled {
  background: var(--eg-ink-900);
}

/* --------------------------------------------------------------------------
   2. Contenu Elementor : typographie et rythme du design system
   -------------------------------------------------------------------------- */
.eg-elementor-page .elementor-widget-container,
.eg-elementor-page .elementor-section,
.eg-elementor-page .e-con,
.eg-elementor-page .elementor-widget-heading,
.eg-elementor-page .elementor-widget-text-editor,
.eg-elementor-page .elementor-widget-button .elementor-button,
.eg-elementor-page .elementor-widget-icon-box .elementor-icon-box-content {
  font-family: var(--eg-font-sans);
  color: var(--eg-ink-700);
}

.eg-elementor-page .elementor-widget-heading .elementor-heading-title {
  font-family: var(--eg-font-display);
  color: var(--eg-ink-900);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.eg-elementor-page .elementor-widget-text-editor p {
  margin-bottom: var(--space-4);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   3. Boutons Elementor alignés sur le design system
   -------------------------------------------------------------------------- */
.eg-elementor-page .elementor-button {
  font-family: var(--eg-font-sans);
  font-weight: 600;
  border-radius: var(--radius-full);
  padding: 0.9rem 1.8rem;
}

/* --------------------------------------------------------------------------
   4. Sections sombres : réutiliser les tokens sombres du thème
   -------------------------------------------------------------------------- */
.eg-elementor-page .eg-dark-section,
.eg-elementor-page .eg-dark-section .elementor-widget-heading .elementor-heading-title,
.eg-elementor-page .eg-dark-section .elementor-widget-text-editor {
  color: var(--eg-white);
}

.eg-elementor-page .eg-dark-section {
  background: var(--eg-ink-900);
}

/* --------------------------------------------------------------------------
   5. Concurrence d'ancres & reveal dans l'éditeur
   L'éditeur Elementor embarque le thème dans un iframe avec la classe
   elementor-editor-active : on neutralise les effets d'apparition pour que
   chaque section soit directement visible pendant l'édition.
   -------------------------------------------------------------------------- */
body.elementor-editor-active .reveal,
body.elementor-editor-active .reveal-mask,
body.elementor-editor-active .stagger .reveal {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}

body.elementor-editor-active .cursor {
  display: none !important;
}

/* --------------------------------------------------------------------------
   6. Conteneurs & pleine largeur
   Par défaut, on laisse Elementor gérer ses propres largeurs (Boxed 1240px
   recommandé dans les Réglages du site pour coller au .container du thème).
   -------------------------------------------------------------------------- */
.eg-elementor-page .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--container, 1240px);
}

@media (max-width: 767.98px) {
  .eg-elementor-page .elementor-widget-heading .elementor-heading-title {
    font-size: var(--text-2xl);
  }
}