/* ==========================================================
   Titres Elementor — cohérence H1 → H6
   Le kit Elementor a des couleurs globales (primary #6EC1E4, text #7A7A7A)
   qui peuvent s'appliquer aux widgets heading. On force la palette thème.
   Spécificité (0,2,0) < inline Elementor → les surcharges widget-level restent actives.
   ========================================================== */

/* Spécificité (0,3,0) : bat le global Elementor (0,2,0) qui force #6EC1E4 + Roboto,
   mais reste sous les overrides par-widget (0,4,0) pour ne pas bloquer la personnalisation. */
.elementor-kit-48 .elementor-widget-heading .elementor-heading-title {
  color: var(--color-rock);
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

/* ==========================================================
   Boutons Elementor — alignés sur le design du thème
   Chargé après elementor-frontend pour garantir la priorité.

   Dans Elementor, utilisez le champ "Type" du widget bouton :
     • Default  → orange (personnalisable par widget dans Elementor)
     • Info     → vert forêt
     • Warning  → vert forêt
     • Success  → contour blanc (sur fonds sombres)
     • Danger   → contour blanc (sur fonds sombres)
   ========================================================== */

/* Base : typographie et forme communes */
.elementor-widget-button .elementor-button {
  font-family: var(--font-condensed), 'Barlow Condensed', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.85rem 2rem !important;
  border-radius: 4px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  line-height: 1 !important;
  color: #ffffff !important;
}

/* Default → orange
   :where() réduit la spécificité à (0,1,0) pour que la couleur
   définie par widget dans Elementor (0,2,0) prenne le dessus. */
:where(.elementor-widget-button:not(.elementor-button-info):not(.elementor-button-warning):not(.elementor-button-success):not(.elementor-button-danger)) .elementor-button {
  background: var(--color-accent, #D4582A);
  border: none;
}
:where(.elementor-widget-button:not(.elementor-button-info):not(.elementor-button-warning):not(.elementor-button-success):not(.elementor-button-danger)) .elementor-button:hover {
  background: var(--color-accent-warm, #E8813E);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(212, 88, 42, 0.35);
}

/* Info / Warning → vert forêt
   Spécificité normale (0,3,0) : le type impose toujours le vert. */
.elementor-widget-button.elementor-button-info .elementor-button,
.elementor-widget-button.elementor-button-warning .elementor-button {
  background: var(--color-forest, #3B5C2F) !important;
  border: none !important;
}
.elementor-widget-button.elementor-button-info .elementor-button:hover,
.elementor-widget-button.elementor-button-warning .elementor-button:hover {
  background: var(--color-forest-mid, #4E7A3F) !important;
  transform: translateY(-1px);
}

/* Success / Danger → contour blanc */
.elementor-widget-button.elementor-button-success .elementor-button,
.elementor-widget-button.elementor-button-danger .elementor-button {
  background: transparent !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
}
.elementor-widget-button.elementor-button-success .elementor-button:hover,
.elementor-widget-button.elementor-button-danger .elementor-button:hover {
  border-color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================
   Images Elementor — rayon de bordure par défaut (10 px)
   ========================================================== */
.elementor-widget-image img {
  border-radius: 10px;
}

/* ==========================================================
   Images Elementor — alignement vertical dans la colonne/conteneur
   Ajouter la classe dans le champ "Classes CSS" du widget image :
     • img-valign-top    → en haut  (comportement natif Elementor)
     • img-valign-center → centré verticalement
     • img-valign-bottom → en bas
   Fonctionne dans les colonnes ET les conteneurs Flexbox Elementor.
   ========================================================== */
.elementor-widget-image.img-valign-top {
  align-self: flex-start;
}
.elementor-widget-image.img-valign-center {
  align-self: center;
}
.elementor-widget-image.img-valign-bottom {
  align-self: flex-end;
}

/* Shortcode [ceb_download] — bouton lien de téléchargement */
.ceb-btn-download {
  font-family: var(--font-condensed), 'Barlow Condensed', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.85rem 2rem !important;
  border-radius: 4px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  background: var(--color-forest, #3B5C2F) !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5em !important;
  text-decoration: none !important;
  cursor: pointer;
}
.ceb-btn-download::before {
  content: '↓';
  font-size: 1em;
  line-height: 1;
}
.ceb-btn-download:hover {
  background: var(--color-forest-mid, #4E7A3F) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(59, 92, 47, 0.35);
  color: #ffffff !important;
}

/* Wrappers d'alignement */
.ceb-btn-download-wrap {
  margin-bottom: 0.75rem;
}
.ceb-btn-download-wrap--left   { text-align: left; }
.ceb-btn-download-wrap--center { text-align: center; }
.ceb-btn-download-wrap--right  { text-align: right; }

/* Shortcodes [ceb_btn_inscription] et [ceb_inscription_ext] — même style que les boutons Elementor Default */
.ceb-btn-inscription,
.ceb-btn-inscription-ext {
  font-family: var(--font-condensed), 'Barlow Condensed', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.85rem 2rem !important;
  border-radius: 4px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  line-height: 1 !important;
  color: #ffffff !important;
  background: var(--color-accent, #D4582A) !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  cursor: pointer;
}
.ceb-btn-inscription:hover:not(.ceb-btn-inscription--complet),
.ceb-btn-inscription-ext:hover:not(.ceb-btn-inscription--complet) {
  background: var(--color-accent-warm, #E8813E) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(212, 88, 42, 0.35);
  color: #ffffff !important;
}

/* ==========================================================
   Flèches carousel image Elementor — visibilité
   Par défaut Elementor les met en quasi-blanc sans fond,
   invisibles sur les images claires.
   ========================================================== */
.elementor-widget-image-carousel .elementor-swiper-button-prev,
.elementor-widget-image-carousel .elementor-swiper-button-next {
  width: 44px !important;
  height: 44px !important;
  background: rgba(44, 44, 42, 0.55) !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.25s ease !important;
}

.elementor-widget-image-carousel .elementor-swiper-button-prev svg,
.elementor-widget-image-carousel .elementor-swiper-button-next svg {
  fill: #ffffff !important;
}

.elementor-widget-image-carousel .elementor-swiper-button-prev:hover,
.elementor-widget-image-carousel .elementor-swiper-button-next:hover {
  background: rgba(44, 44, 42, 0.85) !important;
}

.elementor-widget-image-carousel .elementor-swiper-button-prev.swiper-button-disabled,
.elementor-widget-image-carousel .elementor-swiper-button-next.swiper-button-disabled {
  opacity: 0.35 !important;
}