/* ==========================================================================
   LM Danse — ajustements Elementor
   Chargée APRÈS la charte (lm-site.css). Elle ne redéfinit pas le style du
   site : elle recolle les endroits où Elementor insère un <div> de plus
   entre la grille et son contenu.
   ========================================================================== */

/* ---------- 1. Widgets « transparents » ----------
   Un widget Elementor s'écrit :
     <div class="elementor-element …">      ← porte la classe de la charte
       <div class="elementor-widget-container">
         contenu réel
   Pour les blocs où la charte cible le contenu directement, on efface
   le conteneur intermédiaire de la mise en page. */
/* Un widget HTML ne doit pas s'interposer entre une grille de la charte et
   son contenu : widget et wrapper disparaissent de la mise en page, le bloc
   d'origine redevient l'enfant direct du conteneur. */
.lm-flat,
.lm-flat > .elementor-widget-container,
.elementor-widget-heading > .elementor-widget-container,
.elementor-widget-text-editor > .elementor-widget-container {
  display: contents;
}

/* ---------- 2. Titres ---------- */
.elementor-heading-title {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin: 0;
}

/* ---------- 3. Textes ---------- */
/* Mêmes valeurs que les règles p, .lead et .muted de la charte. */
.elementor-widget-text-editor p { margin: 0 0 1em; }
/* Sur le site d'origine, un paragraphe perd sa marge basse (p:last-child)
   seulement s'il est le dernier élément de son bloc. Ici chaque paragraphe vit
   dans son widget, où il est toujours « dernier » : on ne retire donc la marge
   que pour le dernier widget du conteneur. (Elementor 4 n'écrit plus de
   .elementor-widget-container : le paragraphe est l'enfant direct du widget.) */
.elementor-widget-text-editor:last-child p:last-child,
.lm-flat:last-child > p:last-child { margin-bottom: 0; }
.lm-flat:not(:last-child) > p:last-child { margin-bottom: 1em; }
.elementor-widget-text-editor.lead p {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--ink-2);
  line-height: 1.65;
}
.elementor-widget-text-editor.muted p { color: var(--ink-2); }
.on-dark .elementor-widget-text-editor.lead p { color: var(--on-dark-2); }

/* ---------- 3 bis. Marges basses de la charte ----------
   Elementor 4 remet à zéro la marge basse de tout widget placé dans un
   conteneur (« .e-con .elementor-widget.elementor-widget », spécificité 0,3,0),
   ce qui écrase les règles de la charte. On rétablit celles qui visent un titre
   ou un texte devenu widget (relevées page par page). */
.elementor.elementor .champions__body .display { margin-bottom: 24px; }
.elementor.elementor .split__body .display { margin-bottom: 26px; }
.elementor.elementor .faq__intro .lead { margin-bottom: 28px; }

/* ---------- 4. Boutons ---------- */
/* Le widget bouton d'Elementor reprend l'habillage .btn de la charte :
   pilule, capitales espacées et pastille ronde avec la flèche (.btn__icon,
   écrite dans le texte du bouton). Mêmes valeurs que lm-site.css. */
.elementor-widget-button .elementor-button {
  --b-bg: var(--ink);
  --b-fg: var(--white);
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  min-height: 50px; padding: 0 24px;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--b-bg); color: var(--b-fg);
  font-family: var(--f-body); font-size: 13.5px; font-weight: 600; letter-spacing: .08em; line-height: 1;
  text-transform: uppercase; text-decoration: none; white-space: nowrap; fill: currentColor;
  transition: transform .35s var(--ease), background-color .25s, color .25s, border-color .25s;
}
.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button:focus { background: var(--b-bg); color: var(--b-fg); }
.elementor-widget-button .elementor-button:active { transform: scale(.98); }
.elementor-widget-button .elementor-button-content-wrapper,
.elementor-widget-button .elementor-button-text { display: inline-flex; align-items: center; gap: .7em; font-weight: 600; }
.elementor-widget-button .elementor-button:has(.btn__icon) { padding: 0 12px 0 24px; }
.elementor-widget-button .elementor-button:hover .btn__icon { transform: rotate(-45deg); background: var(--gold); color: var(--ink); }
.elementor-widget-button { display: inline-block; }

.lm-btn--light .elementor-button { --b-bg: var(--white); --b-fg: var(--ink); }
.lm-btn--light .btn__icon { background: var(--bg); }
.lm-btn--gold .elementor-button { --b-bg: var(--gold); --b-fg: var(--ink); }
.lm-btn--gold .btn__icon { background: rgba(22, 21, 20, .12); }
.lm-btn--gold .elementor-button:hover .btn__icon { background: var(--ink); color: var(--gold); }
.lm-btn--outline .elementor-button,
.lm-btn--outline .elementor-button:has(.btn__icon) { --b-bg: transparent; --b-fg: var(--ink); border-color: var(--ink); padding: 0 22px; }
.lm-btn--outline .elementor-button:hover { --b-bg: var(--ink); --b-fg: var(--white); }
.lm-btn--outline .btn__icon { background: rgba(22, 21, 20, .08); }
.on-dark .lm-btn--outline .elementor-button { --b-fg: var(--on-dark); border-color: rgba(243, 241, 236, .4); }
.on-dark .lm-btn--outline .elementor-button:hover { --b-bg: var(--on-dark); --b-fg: var(--ink); }
.lm-btn--sm .elementor-button { min-height: 42px; padding: 0 7px 0 18px; font-size: 12.5px; }

/* Elementor retire le SVG écrit dans le texte d'un bouton : la flèche de la
   pastille est donc redessinée en CSS (même tracé que sur le site d'origine). */
.elementor-button .btn__icon:empty::before {
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Rangée de boutons : chaque bouton est un widget, donc un bloc par défaut. */
.btn-row > .elementor-widget { width: auto; flex: none; }

/* ---------- 5. Images ---------- */
.elementor-widget-image { line-height: 0; }
.elementor-widget-image img { display: block; width: 100%; height: auto; }
.elementor-widget-image figure, .elementor-widget-image .elementor-image { margin: 0; }

/* ---------- 6. Placement dans les grilles de la charte ----------
   Quand le bloc de la charte est un lien (<a class="hero__badge">), on ne peut
   pas fusionner la classe avec le widget : le widget porte alors une classe
   « -wrap » à qui l'on donne la position dans la grille. */


/* Les blocs « photo » et « activité » deviennent eux-mêmes l'élément de grille. */
.bento__a, .bento__c, .bento__d { display: block; min-height: 0; }
.bento__a .photo, .bento__c .photo, .bento__d .photo { height: 100%; }

/* ---------- 7. Champions : le corps de carte est un conteneur ---------- */
.champions > .elementor-widget:first-child { display: block; }

/* ---------- 8. Éditeur Elementor ---------- */
.elementor-editor-active .e-con:empty { min-height: 40px; }
.elementor-editor-active .lm-flat > .elementor-widget-container { display: block; }

/* ---------- 9. Cartes « formats de cours » ---------- */
/* Dans la charte, .plan .btn est poussé en bas de carte ; ici le bouton
   est un widget, c'est donc lui qu'il faut pousser. */
.plan > .elementor-widget-button { margin-top: auto; align-self: flex-start; }

/* ---------- 10. Blocs « appel à contact » ---------- */
.cta > .elementor-widget { min-width: 0; }

/* ---------- 11. Largeurs de lecture ----------
   Elementor plafonne la largeur des widgets (« .elementor.elementor .e-con >
   .elementor-widget », spécificité 0,4,0). On rend la main à la charte pour les
   blocs qui fixent volontairement une largeur de lecture. */
.elementor.elementor .feature > .lead { max-width: 62ch; }
.elementor.elementor .section-head > :last-child { max-width: 48ch; }
.elementor.elementor .hero__aside { max-width: 46ch; }

/* ---------- 12. Boutons placés par la charte ----------
   Les règles « .champions__body .btn » visent le lien ; ici c'est le widget
   bouton qui occupe cette place. */
.champions__body > .elementor-widget-button { margin-top: 34px; }

/* ---------- 13. Hero ----------
   Le hero d'origine (titre à encoche, photo et texte en position absolue)
   se cale sur la largeur du bloc (unités cqw) : aucune hauteur imposée ici,
   c'est la charte qui la calcule. */

/* ---------- 13 bis. Conteneurs sans mise en page propre ----------
   Elementor écrit « --display: flex » dans le CSS de chaque conteneur. Sur le
   site d'origine, un bloc sans display déclaré reste un simple bloc (les
   petites étiquettes dorées y gardent leur hauteur de ligne) ; la charte
   reprend la main partout où elle déclare grid ou flex. Spécificité 0,4,0 :
   le CSS propre à chaque page (post-N.css, 0,3,0) est chargé après. */
.elementor.elementor .e-con.e-con { --display: block; }

/* ---------- 14. Conteneurs en colonne ----------
   Elementor impose la direction des conteneurs flex avec une spécificité que
   la charte ne peut pas dépasser (.e-con-full.e-flex, 0-2-0). On la rétablit
   pour les deux blocs que la charte veut en colonne. */
.e-con.plan,
.e-con.tile { flex-direction: column; }

/* ---------- 15. En-tête et pied de page ----------
   lm-reset.css retire l'habillage que le thème Hello pose sur .site-header et
   .site-footer, avec une spécificité que la charte ne dépasse pas. On remet
   ici les espacements et le fond « au défilement » de la charte. */
html body .site-header:not(.dynamic-header) { padding-block: 14px; }
html body .site-header.is-scrolled:not(.dynamic-header) {
  padding-block: 8px;
  background: rgba(236, 235, 230, .82);
  box-shadow: 0 1px 0 var(--line);
}
html body .site-footer:not(.dynamic-footer) { padding: 16px 0 24px; }