/* ════════════════════════════════════════════════════════════════════
   MyGatô — surcharge du module Divi « Amelia – Events List »
   Transforme les lignes natives d'Amelia (.am-ec) en cartes identiques
   à la maquette, sans toucher au plugin Amelia : contenu, disponibilités
   et réservation restent entièrement gérés par Amelia.

   PORTÉE — la classe .mga-amelia se pose sur le MODULE Divi :
   module « Amelia – Events List » → Avancé → Classe CSS → mga-amelia
   (et non sur la liste : il faut pouvoir atteindre .am-elf, au-dessus).
   Ajouter mga-vitrine pour masquer recherche et pagination (page d'accueil).
   Nombre de colonnes : --mga-cols, 4 par défaut.

   Relevé sur mygato.fr (Amelia v2, 18 septembre 2026) :
   · Amelia bride tout son bloc à max-width:792px via .am-elf ;
   · ses règles sont en « .amelia-v2-booking #amelia-container … », donc à
     spécificité d'ID : les propriétés de boîte exigent !important ;
   · le liseré orange des cartes est une box-shadow, pas une bordure ;
   · couleurs et police passent par ses variables --am-*, sans !important.
   ════════════════════════════════════════════════════════════════════ */

/* ---------- 1. Jetons Amelia repeints (aucun !important nécessaire) ---------- */
.mga-amelia{
  --am-c-primary:#A8122F;
  --am-c-btn-prim:#A8122F;
  --am-c-btn-prim-text:#ffffff;
  --am-c-main-text:#2B1A18;
  --am-c-main-heading-text:#2B1A18;
  --am-c-inp-border:#E5D3C6;
  --am-font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
  /* jetons MyGatô, repris pour que le bloc soit autonome */
  --mga-serif:'Fraunces',Georgia,serif;
  --mga-sans:'Inter',-apple-system,'Segoe UI',sans-serif;
  --mga-ink:#2B1A18; --mga-ink-soft:#6B534C;
  --mga-carmin:#A8122F; --mga-carmin-d:#7E0C22; --mga-carmin-l:#FBE9EC;
  --mga-sable:#F4EADC;
}

/* ---------- 2. Libérer la largeur bridée par Amelia ---------- */
/* .am-elf porte aussi le fond blanc et les angles arrondis du bloc : on
   libère la largeur mais on lui rend un padding, sinon le compteur, le
   bouton « Filtres » et les cartes touchent le bord. */
.mga-amelia .am-elf{
  max-width:none !important; width:100% !important;
  padding:var(--mga-pad,clamp(18px,2.2vw,34px)) !important;
  box-sizing:border-box !important;   /* ne pas dépendre du reset d'Amelia */
}
.mga-amelia .am-els{max-width:none !important;width:100% !important}

/* ---------- 3. La grille de cartes ---------- */
.mga-amelia .am-els__wrapper{
  display:grid !important;
  grid-template-columns:repeat(var(--mga-cols,4),minmax(0,1fr));
  gap:22px;
}
@media(max-width:1080px){ .mga-amelia .am-els__wrapper{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:560px){  .mga-amelia .am-els__wrapper{grid-template-columns:1fr} }

.mga-amelia .am-ec{
  position:relative;
  display:grid !important;
  grid-template-columns:1fr;
  grid-template-rows:auto auto auto 1fr;   /* photo · titre · heure · actions */
  background:#fff !important;
  border:0 !important;
  border-radius:28px;
  overflow:hidden;
  padding:0 !important;
  margin:0 !important;
  /* la 3e ombre d'Amelia est le liseré orange : on remplace tout le lot */
  box-shadow:0 1px 2px rgba(43,26,24,.04),0 8px 24px -12px rgba(43,26,24,.16) !important;
  transition:transform .3s cubic-bezier(.22,.68,0,1),box-shadow .3s;
}
.mga-amelia .am-ec:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 4px rgba(43,26,24,.05),0 24px 48px -20px rgba(43,26,24,.26) !important;
}

/* ---------- 4. La photo (Amelia la pose en background-image) ---------- */
.mga-amelia .am-ec__image{
  grid-row:1;
  width:100% !important; height:auto !important;
  aspect-ratio:4/3;
  margin:0 !important; border-radius:0 !important;
  background-size:cover !important; background-position:center !important;
  background-color:var(--mga-sable);
  transition:transform .5s cubic-bezier(.22,.68,0,1);
}
.mga-amelia .am-ec:hover .am-ec__image{transform:scale(1.05)}
.mga-amelia .am-ec__image img{width:100%;height:100%;object-fit:cover}

/* ---------- 5. Date en pastille sur la photo, heure sous le titre ---------- */
.mga-amelia .am-ec__period{
  grid-row:3;
  display:block !important;
  padding:0 20px !important; margin:0 !important;
}
.mga-amelia .am-ec__period-date{
  position:absolute; top:12px; left:12px; z-index:2;
  display:block !important; width:auto;
  background:rgba(255,255,255,.96);
  border-radius:12px; padding:7px 11px !important;
  text-align:center; line-height:1.05;
  box-shadow:0 4px 12px rgba(43,26,24,.2);
}
.mga-amelia .am-ec__period-date__day{
  display:block; font-family:var(--mga-serif) !important;
  font-size:1.28rem !important; font-weight:600 !important; color:var(--mga-ink);
}
.mga-amelia .am-ec__period-date__month{
  display:block; font-size:.65rem !important; font-weight:600 !important;
  letter-spacing:.07em; text-transform:uppercase; color:var(--mga-ink-soft);
}
/* les dates ne vont qu'à deux mois : l'année est du bruit */
.mga-amelia .am-ec__period-date__year{display:none !important}

.mga-amelia .am-ec__period-time{
  display:flex; align-items:center; gap:6px;
  font-size:.8rem !important; font-weight:500 !important; color:var(--mga-ink-soft);
}
/* horloge en SVG : un emoji se rend en contour dans Inter */
.mga-amelia .am-ec__period-time::before{
  content:''; width:13px; height:13px; flex-shrink:0;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B534C' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

/* ---------- 6. Titre ---------- */
.mga-amelia .am-ec__info{
  grid-row:2;
  display:block !important;
  padding:18px 20px 0 !important; margin:0 !important; min-width:0;
}
.mga-amelia .am-ec__info-name{
  font-family:var(--mga-serif) !important;
  font-weight:600 !important; font-size:1.15rem !important;
  line-height:1.2 !important; letter-spacing:-.01em;
  color:var(--mga-ink); text-transform:none;
  margin:0 !important; overflow-wrap:anywhere;
}
.mga-amelia .am-ec__info-other{display:block !important;margin:0 !important;min-height:0 !important}

/* ---------- 7. Disponibilité, en pastille sur la photo ---------- */
/* « Ouvert » est redondant avec le nombre de places */
.mga-amelia .am-ec__info-availability{display:none !important}
.mga-amelia .am-ec__info-availability.closed,
.mga-amelia .am-ec__info-availability.full,
.mga-amelia .am-ec__info-capacity{
  position:absolute; top:14px; right:12px; z-index:2;
  display:inline-flex !important; align-items:center; gap:4px;
  white-space:nowrap; line-height:1.3;
  /* Amelia colore ces libellés en rgba(…,.5) depuis une règle à ID :
     sans !important la pastille reste délavée et illisible. */
  background:var(--mga-sable) !important; color:#6D5334 !important;
  opacity:1 !important;
  border-radius:999px; padding:5px 12px !important;
  font-size:.8rem !important; font-weight:600 !important;
}
.mga-amelia .am-ec__info-capacity__number,
.mga-amelia .am-ec__info-capacity__text{
  color:inherit !important; font-size:inherit !important;
  font-weight:inherit !important; opacity:1 !important;
}
/* dernière place : classe posée par mga-amelia-cards.js */
.mga-amelia .am-ec.mga-hot .am-ec__info-capacity{
  background:var(--mga-carmin-l) !important; color:var(--mga-carmin-d) !important;
}
/* « Complet » : pastille pleine, lisible de loin. Aucune opacité sur la
   carte — un atelier plein reste une preuve sociale, il doit se lire. */
.mga-amelia .am-ec__info-availability.full{
  background:var(--mga-carmin) !important; color:#fff !important;
}
.mga-amelia .am-ec.mga-full{opacity:1}

/* ---------- 7 bis. Ateliers fermés : retirés de la liste ---------- */
/* Amelia marque .closed les sessions dont les inscriptions sont closes.
   :has() agit dès le premier rendu (pas de clignotement) ; la classe
   .mga-closed, posée par le JS, couvre les navigateurs sans :has().
   Pour les réafficher : classe mga-garder-fermes sur la ligne/colonne. */
.mga-amelia .am-ec:has(.am-ec__info-availability.closed),
.mga-amelia .am-ec.mga-closed{display:none !important}
.mga-garder-fermes .am-ec:has(.am-ec__info-availability.closed),
.mga-garder-fermes .am-ec.mga-closed{display:grid !important}

/* ---------- 8. Prix et bouton ---------- */
.mga-amelia .am-ec__actions{
  grid-row:4;
  display:flex !important; align-items:center; justify-content:space-between;
  gap:10px; padding:14px 20px 22px !important; margin:0 !important;
  align-self:end;
}
.mga-amelia .am-ec__actions-price,
.mga-amelia .am-ec__actions-price p{
  font-family:var(--mga-serif) !important;
  font-size:1.42rem !important; font-weight:600 !important; line-height:1 !important;
  color:var(--mga-ink) !important; margin:0 !important; white-space:nowrap;
}
.mga-amelia .am-ec__actions-price small{
  font-family:var(--mga-sans) !important; font-size:.76rem !important;
  font-weight:500 !important; color:var(--mga-ink-soft) !important;
}
.mga-amelia .am-ec__actions-btn{margin:0 !important}
.mga-amelia .am-ec__actions-btn .am-button{
  border-radius:999px !important; min-height:44px !important;
  padding:0 20px !important; font-weight:600 !important; font-size:.92rem !important;
  transition:.2s cubic-bezier(.22,.68,0,1);
}
.mga-amelia .am-ec__actions-btn .am-button:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px -10px rgba(168,18,47,.6);
}

/* ---------- 8 bis. Tuile « page suivante » ---------- */
/* Comble le blanc laissé par une dernière rangée incomplète, qui donne à
   croire que la liste s'arrête là. Posée par le JS, uniquement s'il existe
   une page suivante ET au moins une case vide. */
.mga-amelia .mga-suite{
  display:flex !important; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  min-height:220px; width:100%; padding:28px 24px !important;
  border:2px dashed #E9D8C8 !important; border-radius:28px !important;
  background:transparent !important; box-shadow:none !important;
  cursor:pointer; text-align:center; -webkit-appearance:none; appearance:none;
  transition:border-color .2s, background .2s, transform .2s;
}
.mga-amelia .mga-suite__fleche{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:999px;
  background:var(--mga-carmin-l); color:var(--mga-carmin-d);
  font-size:1.25rem; line-height:1; transition:transform .2s;
}
.mga-amelia .mga-suite__titre{
  font-family:var(--mga-serif) !important; font-size:1.15rem !important;
  font-weight:600 !important; color:var(--mga-ink) !important; line-height:1.3;
}
.mga-amelia .mga-suite__note{
  font-size:.85rem !important; color:var(--mga-ink-soft) !important;
  letter-spacing:.02em;
}
.mga-amelia .mga-suite:hover{
  border-color:var(--mga-carmin) !important; background:#FFFBF8 !important;
}
.mga-amelia .mga-suite:hover .mga-suite__fleche{transform:translateX(4px)}
.mga-amelia .mga-suite:focus-visible{
  outline:2px solid var(--mga-carmin) !important; outline-offset:3px;
}
@media(prefers-reduced-motion:reduce){
  .mga-amelia .mga-suite,
  .mga-amelia .mga-suite__fleche{transition:none}
  .mga-amelia .mga-suite:hover .mga-suite__fleche{transform:none}
}

/* ---------- 9. Recherche, filtres, pagination ---------- */
.mga-amelia .am-els__filters{margin-bottom:22px}
.mga-amelia .am-input{border-radius:999px !important;min-height:44px !important;background:#fff}
.mga-amelia .am-button--plain{border-radius:999px !important;min-height:44px !important;font-weight:600 !important}

/* Amelia empile quatre décorations froides sur la barre de recherche et le
   bouton « Filtres » : deux ombres portées sur les conteneurs, un anneau
   box-shadow gris #D1D5D7 sur .el-input__wrapper (Element Plus) et une
   bordure rgba(26,44,55,.3) sur le bouton. On remet tout à plat, dans les
   tons sable — l'anneau reste, discret, pour que le champ se lise. */
.mga-amelia .am-els__filters-top,
.mga-amelia .am-els__filters-search,
.mga-amelia .am-els__filters-menu__btn,
.mga-amelia .am-els__filters .am-input{box-shadow:none !important;border:0 !important}
.mga-amelia .am-els__filters .el-input__wrapper{
  box-shadow:inset 0 0 0 1px var(--mga-sable) !important;
  background:#fff !important; border:0 !important; border-radius:999px !important;
}
.mga-amelia .am-els__filters .el-input__wrapper.is-focus,
.mga-amelia .am-els__filters .el-input__wrapper:focus-within{
  box-shadow:inset 0 0 0 2px var(--mga-carmin) !important;
}
.mga-amelia .am-els__filters .am-button--plain{
  border:1px solid var(--mga-sable) !important;
  box-shadow:none !important; background:#fff !important;
}
.mga-amelia .am-els__filters .am-button--plain:hover{
  border-color:var(--mga-carmin) !important;
  color:var(--mga-carmin) !important; background:#fff !important;
}
/* Pagination Element Plus : ul.el-pager > li.number(.is-active) */
.mga-amelia .el-pager li.number,
.mga-amelia .am-pagination .btn-prev,
.mga-amelia .am-pagination .btn-next{border-radius:12px !important;font-weight:600 !important}
.mga-amelia .am-els__available{margin-bottom:14px}
.mga-amelia .am-els__pagination{margin-top:26px}
/* en vitrine (4 cartes sur la page d'accueil) : ni recherche ni pagination.
   mga-vitrine se pose sur le module OU sur la colonne / la ligne qui le
   contient — le module Amelia n'expose pas toujours de champ « Classe CSS ». */
.mga-vitrine .am-els__filters,
.mga-vitrine .am-els__available,
.mga-vitrine .am-els__pagination,
.mga-vitrine .am-pagination{display:none !important}

@media(prefers-reduced-motion:reduce){
  .mga-amelia .am-ec,
  .mga-amelia .am-ec__image,
  .mga-amelia .am-ec__actions-btn .am-button{transition:none}
  .mga-amelia .am-ec:hover,
  .mga-amelia .am-ec:hover .am-ec__image,
  .mga-amelia .am-ec__actions-btn .am-button:hover{transform:none}
}