/* --------------------------------------------------------------------------
   Colibri × Elementor — couche de compatibilité
   Neutralise ce qu'Elementor ajoute autour des blocs du site, pour que la
   maquette d'origine reste identique une fois éditable dans Elementor.
   -------------------------------------------------------------------------- */

/* Les wrappers d'Elementor ne doivent introduire ni largeur, ni marge, ni
   contexte de positionnement supplémentaire dans les sections Colibri. */
.colibri-page .elementor-section > .elementor-container,
.colibri-page .elementor-section .elementor-container {
  max-width: none;
  width: 100%;
}

/* Flux normal plutôt que flex : les marges verticales des blocs se cumulent
   comme dans la maquette d'origine (et se fusionnent quand elles doivent).
   Le sélecteur reprend la spécificité de la règle d'Elementor
   (.elementor:not(.elementor-bc-flex-widget) .elementor-widget-wrap). */
.colibri-page .elementor .elementor-widget-wrap,
.colibri-page .elementor-widget-wrap {
  padding: 0;
  display: block;
}

.colibri-page .elementor-widget:not(:last-child) {
  margin-block-end: 0;
}

.colibri-page .elementor-widget-html > .elementor-widget-container,
.colibri-page .elementor-widget-text-editor > .elementor-widget-container {
  display: contents;
}

/* Le conteneur .shell (largeur de lecture du site) devient une colonne ou une
   section Elementor : sa largeur doit l'emporter sur le width:100% qu'Elementor
   applique à toute colonne et à tout élément d'une colonne. */
.colibri-page .elementor .elementor-element.shell,
.colibri-page .elementor-element.shell {
  width: var(--shell);
  max-width: 100%;
  margin-inline: auto;
}

/* NB : selon la version d'Elementor, le contenu d'un widget est enveloppé dans
   un div .elementor-widget-container… ou pas (« optimized markup », 3.3x+).
   Toutes les règles ci-dessous visent donc les deux structures. */

/* Un enfant de grille (souvent une carte <a>) redevient un élément de bloc :
   hors grille, un lien resterait inline — et un élément inline ignore
   min-height, ce qui aplatit la carte. Écrit avec :where() pour ne jamais
   l'emporter sur le display défini par le style du site. */
:where(.colibri-page .elementor-widget-container > a),
:where(.colibri-page .elementor-widget-container > figure),
:where(.colibri-page .elementor-widget-container > article),
:where(.colibri-page .elementor-widget > a),
:where(.colibri-page .elementor-widget > figure),
:where(.colibri-page .elementor-widget > article) {
  display: block;
}

/* Les cartes d'une rangée gardent la même hauteur qu'en grille. */
.colibri-cols > .elementor-container > .elementor-column,
.colibri-cols .elementor-widget-wrap,
.colibri-cols .elementor-widget-wrap > .elementor-widget,
.colibri-cols .elementor-widget-container > a,
.colibri-cols .elementor-widget-container > article,
.colibri-cols .elementor-widget-container > figure,
.colibri-cols .elementor-widget > a,
.colibri-cols .elementor-widget > article,
.colibri-cols .elementor-widget > figure {
  height: auto;
  align-self: stretch;
}

/* Comme dans une grille CSS, le contenu d'une colonne occupe toute sa hauteur. */
.colibri-cols > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget:only-child,
.colibri-cols > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget:only-child > .elementor-widget-container > *,
.colibri-cols > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget:only-child > * {
  height: 100%;
}

/* Rangées de colonnes générées à partir d'une grille CSS d'origine.
   La classe d'origine est conservée (fond, padding, couleurs) mais son
   display grid/flex est neutralisé : c'est Elementor qui compose la rangée. */
.colibri-degrid {
  display: block !important;
}

.colibri-cols > .elementor-container {
  align-items: stretch;
}

.colibri-cols > .elementor-container > .elementor-column > .elementor-widget-wrap {
  align-content: stretch;
}

.colibri-gap-12 > .elementor-container { gap: 12px; }
.colibri-gap-16 > .elementor-container { gap: 16px; }
.colibri-gap-18 > .elementor-container { gap: 18px; }
.colibri-gap-20 > .elementor-container { gap: 20px; }
.colibri-gap-24 > .elementor-container { gap: 24px; }
.colibri-gap-28 > .elementor-container { gap: 28px; }
.colibri-gap-32 > .elementor-container { gap: 32px; }
.colibri-gap-40 > .elementor-container { gap: 40px; }
.colibri-gap-48 > .elementor-container { gap: 48px; }
.colibri-gap-56 > .elementor-container { gap: 56px; }
.colibri-gap-64 > .elementor-container { gap: 64px; }

/* Une colonne dont la largeur est fixée par Elementor doit tenir compte du gap. */
.colibri-cols > .elementor-container > .elementor-column {
  flex-grow: 0;
  flex-shrink: 1;
  min-width: 0;
}

/* Les cartes remplissent la hauteur de leur colonne comme dans la grille. */
.colibri-cols > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget {
  width: 100%;
}

/* Sur mobile, Elementor empile les colonnes : on retrouve le comportement
   des grilles d'origine. */
@media (max-width: 767px) {
  .colibri-cols > .elementor-container > .elementor-column {
    width: 100% !important;
  }
}

/* Le bloc d'article (pages événement) garde sa largeur de lecture. */
.colibri-article-block > .elementor-container > .elementor-column {
  width: 100%;
}