/* ==========================================================================
   Styles personnalisés — Thème enfant Hello Elementor
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */
:root {
  /* Polices */
  --font-global: "Titillium Web", sans-serif;
  --font-decorative: "Mr Dafoe", cursive;

  /* Couleurs */
  --color-text: var(--e-a-color-black);
  --color-border: var(--e-global-color-secondary);
  --color-accordion: var(--e-global-color-8a08f6c);

  /* Espacements */
  --gap-md: 20px;
  --event-offset: 70px;

  /* Typographie */
  --fw-bold: 700;
  --text-sm: 16px;
  --text-md: 20px;
  --text-md-x: 30px;
}

/* --------------------------------------------------------------------------
   2. Typographie globale
   -------------------------------------------------------------------------- */
body,
button,
input,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
li,
.elementor-widget-container {
  font-family: var(--font-global) !important;
}

h2,
h3 {
  font-weight: var(--fw-bold);
}

p,
h2 {
  color: var(--e-global-color-8a08f6c);
}

p {
  font-size: 22px !important;
  line-height: 26px !important;
}

.entry-title {
  font-weight: 700;
}

/* Titre décoratif Elementor */
.elementor h2 span {
  font-family: var(--font-decorative) !important;
  font-weight: 400;
  font-size: 53px;
  color: var(--e-global-color-primary);
  padding: 0 6px;
}

.event-details-content h2 {
  font-family: var(--font-global) !important;
  font-weight: 700 !important;
  font-size: 43px !important;
  color: var(--e-global-color-8a08f6c);
  margin-bottom: 30px !important;
}

.event-details-content h3 {
  font-family: var(--font-global) !important;
  font-weight: 700 !important;
  font-size: 30px !important;
  color: var(--e-global-color-8a08f6c) !important;
  margin-bottom: 20px !important;
}

/* --------------------------------------------------------------------------
   3. Grille d'articles (accueil)
   -------------------------------------------------------------------------- */
#grid-article-home .elementor-loop-container>div.e-loop-item:nth-child(3) {
  margin-top: 150px;
}

/* --------------------------------------------------------------------------
   4. Liste des événements
   -------------------------------------------------------------------------- */
.em-events-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.custom-event {
  display: flex;
  align-items: start;
  gap: var(--gap-md);
  padding: 15px 10px;
  max-width: 500px;
}

/* Date */
.custom-event .event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  min-width: 42px;
  color: #111;
}

.custom-event .event-date strong {
  font-size: 64px;
  font-weight: var(--fw-bold);
  line-height: 62px;
}

.custom-event .event-date span {
  font-size: var(--text-md);
  text-transform: lowercase;
}

/* Contenu */
.custom-event .event-content {
  min-width: 0;
  margin-top: 25px;
}

.custom-event .event-content h3 a {
  color: var(--e-global-color-8a08f6c) !important;
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.custom-event .event-content p {
  margin: 0;
  font-size: var(--text-md);
  color: var(--e-global-color-8a08f6c);
  margin-bottom: 0 !important;
}

.custom-event .event-date p.month {
  font-size: var(--text-md-x) !important;
  margin: 0 0 0px !important;
}

.custom-event:nth-child(2) {
  flex-direction: row-reverse;
  margin-top: var(--event-offset);
  align-items: end;
}

.custom-event:nth-child(2) p {
  text-align: right;
}

.custom-event:nth-child(1) {
  margin-bottom: var(--event-offset);
  align-items: start;
}

.custom-event:nth-child(1) p.month {
  margin-bottom: 30px !important;
}

/* --------------------------------------------------------------------------
   5. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .em-events-list {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  #grid-article-home .elementor-loop-container>div.e-loop-item:nth-child(3) {
    margin-top: 0;
  }

  .custom-event:nth-child(2) {
    margin-top: 0;
  }

  .custom-event:nth-child(1) {
    margin-bottom: 0;
  }
}



#agenda-home h3 {
  margin-bottom: 0 !important;
}

/* Lignes de séparation grises entre les items */
.bloc-accordeon .e-n-accordion-item {
  border-top: 1px solid var(--color-border);
}

.bloc-accordeon .e-n-accordion-item:last-child {
  border-bottom: 1px solid var(--color-border);
}

/* En-tête : sans fond ni bordure, bien aéré */
.bloc-accordeon .e-n-accordion-item-title {
  background: transparent !important;
  border: none !important;
  padding: 18px 20px !important;
}

.bloc-accordeon .e-n-accordion-item-title-text {
  font-size: 30px;
  font-weight: var(--fw-bold);
  color: var(--color-accordion);
}

/* Icône + / − fine et grise */
.bloc-accordeon .e-n-accordion-item-title-icon svg,
.bloc-accordeon .e-n-accordion-item-title-icon i {
  width: 16px;
  font-size: var(--text-sm);
  fill: var(--color-accordion);
  color: var(--color-accordion);
}

/* Contenu légèrement indenté */
.bloc-accordeon .e-n-accordion-item>[role="region"] {
  padding: 0 20px 25px 30px;
  font-size: 14px;
  color: var(--color-accordion);
}

/* Sous-titres cyan */
.bloc-accordeon .e-n-accordion-item h4 {
  color: var(--e-global-color-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 18px 0 10px;
}

/* Puces carrées */
.bloc-accordeon .e-n-accordion-item ul {
  list-style: square;
  padding-left: 20px;
}

.bloc-accordeon .e-n-accordion-item li {
  margin-bottom: 8px;
  line-height: 1.5;
}

/* Le titre occupe toute la largeur, l'icône part à droite */
.bloc-accordeon .e-n-accordion-item-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-md);
  /* espace minimum entre texte et icône */
}

/* Le texte prend tout l'espace restant */
.bloc-accordeon .e-n-accordion-item-title-header {
  flex: 1 1 auto;
  min-width: 0;
}

/* L'icône ne se rétrécit jamais et reste collée à droite */
.bloc-accordeon .e-n-accordion-item-title-icon {
  flex: 0 0 auto;
  margin-left: auto;
}

h4 {
  color: var(--e-global-color-primary);
  font-size: 25px;
}

@media (max-width: 767px) {
  .titre-missions .elementor-heading-title span {
    display: block;
    margin-left: 2.25em;
  }
}

.bloc-image.elementor-widget-text-editor,
.bloc-image.elementor-widget-text-editor *,
.bloc-image .elementor-widget-text-editor,
.bloc-image .elementor-widget-text-editor * {
  font-size: 34px !important;
}

/* Styles des shortcodes événement dans Elementor */
.evt_dates,
.evt_dates *,
.evt_heures,
.evt_lieu,
.evt_lieu *,
.evt_bouton_access {
  color: var(--e-global-color-primary);
}

.reserve-and-location .infos-btn a.elementor-button {
  width: 300px;
  height: 40px;
}

.evt_date_debut {
  display: flex;
  align-items: center;
  gap: 4px;
}

.evt_jour1 {
  color: var(--e-global-color-primary);
  font-size: 36px;
  line-height: 1;
  font-weight: 700;
}

.evt_jour2 {
  color: var(--e-global-color-primary);
  font-size: 13px;
  line-height: 1.05;
}

.evt_mois {
  font-weight: 700;
}

.evt_heures {
  color: var(--e-global-color-primary);
  font-size: 22px;
  font-weight: 700;
}

.evt_lieu,
.evt_lieu * {
  color: var(--e-global-color-primary);
  font-size: 14px;
  line-height: 1.35;
}

/* 0.875em converti en pixels sur une base de 16px. */
.em-event-single .modele-evenement p,
.em-event-single .modele-evenement .event-content p {
  line-height: 1.35;
}

@media (max-width: 767px) {
  .evt_jour1 {
    font-size: 32px;
  }

  .newletters {
    margin: 0;
  }
}

/* Events Manager : le modèle Elementor remplace les informations natives. */
.em-event-single>div[style*="float:right"],
.em-event-single>p:nth-of-type(1),
.em-event-single>p:nth-of-type(2),
.em-event-single>br[style*="clear"] {
  display: none;
}

/* Évite les marges et l'espace supplémentaire entre les shortcodes séparés. */
.info_fiche_evt .evt_infos_detail {
  row-gap: 4px;
}

.info_fiche_evt .evt_infos_detail .elementor-widget,
.info_fiche_evt .evt_infos_detail .elementor-widget p {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Secours si un ancien widget Éditeur de texte contient encore le lieu. */
.info_fiche_evt .evt_infos_detail .elementor-widget-text-editor p {
  color: #26358c;
  font-size: 16px;
  line-height: 1.35;
}

/* Évite que la colonne des boutons soit étirée par tout le contenu de l'événement. */
.em-event-single .events-infos-details,
.em-event-single .reserve-and-location {
  align-self: flex-start;
  height: auto;
}

/* Le bloc bleu doit suivre son contenu, sans espace vertical artificiel. */
.em-event-single .info_fiche_evt {
  height: auto;
  min-height: 0;
  gap: 0;
}

.em-event-single .info_fiche_evt>.e-con {
  align-items: flex-start;
}

.em-event-single .info_fiche_evt .evt_infos_detail {
  align-self: flex-start;
  height: auto;
  gap: 4px !important;
}

/* Le conteneur PMR doit avoir la hauteur de son icône et de son libellé. */
.em-event-single .info_fiche_evt .evt_infos_detail>.e-con {
  align-items: center;
  width: 189px;
  min-height: 0;
  height: auto;
  box-sizing: border-box;
  padding: 4px 9px;
}

.em-event-single .info_fiche_evt .evt_infos_detail>.e-con .elementor-widget-heading,
.em-event-single .info_fiche_evt .evt_infos_detail>.e-con .elementor-heading-title {
  height: auto;
  margin: 0 !important;
}

.em-event-single .info_fiche_evt .evt_infos_detail>.e-con .elementor-heading-title {
  font-size: 14px !important;
  line-height: 1.2;
}

/* Elementor génère parfois des paragraphes vides dans les conteneurs. */
.em-event-single .elementor p:empty {
  display: none;
}

/* Le titre PMR reste compact malgré la règle .em.pixelbones h4 du plugin. */
.em-event-single .modele-evenement .evt_infos_detail .elementor-heading-title {
  color: var(--e-global-color-primary);
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  margin: 0 !important;
}

/* Titre de l'événement. */
.em-event-single .modele-evenement .event-title,
.em-event-single .modele-evenement .event-title * {
  color: var(--e-global-color-8a08f6c) !important;
  font-weight: 700 !important;
}

/* Catégorie de l'événement. */
.em-event-single .modele-evenement .evt_cats,
.em-event-single .modele-evenement .evt_cats * {
  color: var(--e-global-color-04a2023) !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
}

.em-event-single .modele-evenement .evt_cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.em-event-single .modele-evenement .evt_cats .evt_categorie {
  display: inline-block;
  color: #fff !important;
  background-color: var(--evt-category-color) !important;
  border-radius: 8px;
  padding: 6px 16px;
  box-sizing: border-box;
  text-decoration: none !important;
}

.em-event-single .modele-evenement .evt_cats h1,
.em-event-single .modele-evenement .evt_cats h2,
.em-event-single .modele-evenement .evt_cats h3,
.em-event-single .modele-evenement .evt_cats h4,
.em-event-single .modele-evenement .evt_cats h5,
.em-event-single .modele-evenement .evt_cats h6,
.em-event-single .modele-evenement .evt_cats p,
.em-event-single .modele-evenement .evt_cats ul,
.em-event-single .modele-evenement .evt_cats li,
.em-event-single .modele-evenement .evt_cats a,
.em-event-single .modele-evenement .evt_cats span {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
}

/* Boutons d'action de la fiche événement. */
.em-event-single .modele-evenement .reserve-and-location {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: flex-start;
  gap: 12px !important;
  height: auto !important;
}

.em-event-single .modele-evenement .reserve-and-location .infos-btn {
  width: 300px;
  max-width: 100%;
  margin: 0 !important;
}

.em-event-single .modele-evenement .reserve-and-location .infos-btn a.elementor-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 300px !important;
  max-width: 100%;
  min-height: 40px;
  height: 40px !important;
  box-sizing: border-box;
  padding: 0 14px !important;
  border-radius: 6px !important;
  font-family: "Titillium Web", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
  text-decoration: none !important;
}

/* Ajouter à mon agenda : bouton clair avec contour bleu. */
.em-event-single .modele-evenement .reserve-and-location .infos-btn:nth-of-type(1) a.elementor-button {
  background: #fff !important;
  border: 1px solid var(--e-global-color-primary) !important;
  color: var(--e-global-color-primary) !important;
  fill: var(--e-global-color-primary) !important;
}

/* Localisation : bouton bleu avec texte blanc. */
.em-event-single .modele-evenement .reserve-and-location .infos-btn:nth-of-type(2) a.elementor-button {
  background: var(--e-global-color-primary) !important;
  border: 1px solid var(--e-global-color-primary) !important;
  color: var(--e-global-color-04a2023) !important;
  fill: var(--e-global-color-04a2023) !important;
}

/* Au survol, le bouton agenda prend le même aspect que Localisation. */
.em-event-single .modele-evenement .reserve-and-location .infos-btn:nth-of-type(1) a.elementor-button:hover,
.em-event-single .modele-evenement .reserve-and-location .infos-btn:nth-of-type(1) a.elementor-button:focus {
  background: var(--e-global-color-primary) !important;
  border-color: var(--e-global-color-primary) !important;
  color: var(--e-global-color-04a2023) !important;
  fill: var(--e-global-color-04a2023) !important;
  opacity: 1;
}

.em-event-single .modele-evenement .reserve-and-location .infos-btn:nth-of-type(1) a.elementor-button:hover span,
.em-event-single .modele-evenement .reserve-and-location .infos-btn:nth-of-type(1) a.elementor-button:focus span {
  color: var(--e-global-color-04a2023) !important;
  fill: var(--e-global-color-04a2023) !important;
}

/* Au survol, le bouton localisation inverse ses couleurs. */
.em-event-single .modele-evenement .reserve-and-location .infos-btn:nth-of-type(2) a.elementor-button:hover,
.em-event-single .modele-evenement .reserve-and-location .infos-btn:nth-of-type(2) a.elementor-button:focus {
  background: #fff !important;
  border-color: var(--e-global-color-primary) !important;
  color: var(--e-global-color-primary) !important;
  fill: var(--e-global-color-primary) !important;
  opacity: 1;
}

.em-event-single .modele-evenement .reserve-and-location .infos-btn:nth-of-type(2) a.elementor-button:hover span,
.em-event-single .modele-evenement .reserve-and-location .infos-btn:nth-of-type(2) a.elementor-button:focus span {
  color: var(--e-global-color-primary) !important;
  fill: var(--e-global-color-primary) !important;
}

.em-event-single .modele-evenement .reserve-and-location .infos-btn a.elementor-button:hover,
.em-event-single .modele-evenement .reserve-and-location .infos-btn a.elementor-button:focus {
  opacity: 0.9;
}

/* Tailles et couleurs du fil d’Ariane. */
.em-event-single .modele-evenement .event-breadcrumbs {
  font-size: 18px !important;
}

.em-event-single .modele-evenement .event-breadcrumbs>a,
.em-event-single .modele-evenement .event-breadcrumbs>span[aria-hidden="true"] {
  color: var(--e-global-color-primary) !important;
}

.em-event-single .modele-evenement .event-breadcrumbs>.event-breadcrumb-current {
  color: #000 !important;
}

.em-event-single .modele-evenement .evt_jour1 {
  font-size: 33px !important;
}

.em-event-single .modele-evenement .evt_jour2,
.em-event-single .modele-evenement .evt_mois,
.em-event-single .modele-evenement .evt_annee {
  font-size: 22px !important;
}

.em-event-single .modele-evenement .evt_lieu,
.em-event-single .modele-evenement .evt_lieu * {
  font-size: 22px !important;
}

.newletters p {
  color: var(--e-global-color-04a2023);
  font-size: 18px !important;
}

/* ================================================================

   POPUP NEWSLETTER — Design complet
   ================================================================ */

/* ---- Conteneur du popup (Elementor) ---- */
.newletters-modal {
  padding: 40px 35px 30px !important;
  text-align: center !important;
}

/* Titre "Restez informé" */
.newletters-modal .elementor-heading-title {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  margin-bottom: 8px !important;
}

/* Sous-titre */
.newletters-modal .elementor-widget-text-editor:first-of-type p {
  font-size: 15px !important;
  color: #6b7280 !important;
  margin-bottom: 24px !important;
  line-height: 1.5 !important;
}

/* Texte de désinscription en bas */
.newletters-modal .elementor-widget-text-editor:last-child p {
  font-size: 13px !important;
  color: #9ca3af !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}

/* ---- Conteneur AcyMailing : écrase les styles inline ---- */
#acym_fulldiv_formAcym2,
#acym_fulldiv_formAcym2.acym__subscription__form__shortcode {
  height: auto !important;
  min-height: 0 !important;
  max-width: 100% !important;
  background-color: transparent !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: block !important;
}

/* ---- Structure du formulaire ---- */
#acym_fulldiv_formAcym2 form,
#acym_fulldiv_formAcym2.acym__subscription__form__shortcode #formAcym2 {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  gap: 0 !important;
}

/* Zone des champs */
#acym_fulldiv_formAcym2 .acym__subscription__form__fields {
  display: block !important;
  width: 100% !important;
}

#acym_fulldiv_formAcym2 .acym__subscription__form__fields .onefield {
  width: 100% !important;
  margin: 0 !important;
}

/* ---- Champ E-mail ---- */
#acym_fulldiv_formAcym2 input.acym__user__edit__email[type="email"],
#acym_fulldiv_formAcym2.acym__subscription__form__shortcode .acym__subscription__form__fields .onefield input[type="email"] {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 14px 18px !important;
  font-size: 15px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background-color: #f9fafb !important;
  color: #374151 !important;
  margin: 0 !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* Placeholder */
#acym_fulldiv_formAcym2 input.acym__user__edit__email[type="email"]::placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}

/* Focus */
#acym_fulldiv_formAcym2 input.acym__user__edit__email[type="email"]:focus {
  border-color: #21b5ca !important;
  box-shadow: 0 0 0 3px rgba(33, 181, 202, 0.15) !important;
  outline: none !important;
  background-color: #ffffff !important;
}

/* ---- Bouton S'abonner ---- */
#acym_fulldiv_formAcym2 .acym__subscription__form__button,
#acym_fulldiv_formAcym2.acym__subscription__form__shortcode .acym__subscription__form__button {
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
}

#acym_fulldiv_formAcym2 .acym__subscription__form__button button[type="submit"],
#acym_fulldiv_formAcym2.acym__subscription__form__shortcode .acym__subscription__form__button button {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 14px 20px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  background-color: #21b5ca !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 15px !important;
  cursor: pointer !important;
  transition: background-color 0.25s ease, transform 0.15s ease !important;
}

#acym_fulldiv_formAcym2 .acym__subscription__form__button button[type="submit"]:hover {
  background-color: #1a9db0 !important;
}

#acym_fulldiv_formAcym2 .acym__subscription__form__button button[type="submit"]:active {
  transform: scale(0.98) !important;
}

/* ---- Masquer les listes et la modale interne ---- */
#acym_fulldiv_formAcym2 .acym__subscription__form__lists {
  display: none !important;
}

.acym_module_form div.modal,
#acym_fulldiv_formAcym2 div.modal,
body div.modal[style*="z-index"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---- Messages de réponse ---- */
#acym_fulldiv_formAcym2.acym__subscription__form__shortcode .responseContainer,
#acym_fulldiv_formAcym2 .responseContainer {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 14px 20px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin: 10px 0 !important;
  display: block !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Succès */
#acym_fulldiv_formAcym2.acym__subscription__form__shortcode .responseContainer.acym_module_success,
#acym_fulldiv_formAcym2 .responseContainer.acym_module_success {
  color: #155724 !important;
  background-color: #d4edda !important;
  border: 1px solid #c3e6cb !important;
}

/* Info/erreur — "Vous êtes déjà abonné" */
#acym_fulldiv_formAcym2.acym__subscription__form__shortcode .responseContainer.acym_module_error,
#acym_fulldiv_formAcym2 .responseContainer.acym_module_error {
  color: #0c5460 !important;
  background-color: #d1ecf1 !important;
  border: 1px solid #bee5eb !important;
}