/* =========================================================
   GANCIO – THEME “ETXEPARE IKASKOOP” (inspiré Mastodon)
   - Dark glass + accents verts
   - Border radius 30px PARTOUT (sauf avatars/icônes rondes)
   - Calendrier “table pro” + plein écran + mobile-first
   ========================================================= */

/* -----------------------------
   1) Variables (reprise Mastodon)
------------------------------ */
:root{
  --etx-bg: #050b10;
  --etx-bg-soft: #0b1720;

  --etx-accent: #18c29c;                 /* vert IKASKOOP */
  --etx-accent-soft: rgba(24, 194, 156, 0.16);

  --etx-text: #e6f0f7;
  --etx-muted: #9aa8b5;

  --etx-border: rgba(255, 255, 255, 0.05);

  /* Gancio tokens */
  --r: 30px;                             /* <<< le radius partout */
  --shadow: 0 14px 36px rgba(0,0,0,.40);
  --shadow-strong: 0 18px 44px rgba(0,0,0,.58);
  --glass: blur(14px);

  --table-gap-x: 10px;
  --table-gap-y: 12px;
}

/* -----------------------------
   2) Base globale + typographie
------------------------------ */
html, body{
  background: radial-gradient(circle at top, #163047 0, var(--etx-bg) 55%, #020509 100%) !important;
  color: var(--etx-text) !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Liens */
a{ color: var(--etx-accent) !important; text-decoration: none; }
a:hover{ text-decoration: underline; }

/* -----------------------------
   3) Border radius 30px “partout”
------------------------------ */
*,
*::before,
*::after{
  border-radius: var(--r) !important;
}

/* Exceptions utiles : avatars / icônes doivent rester ronds */
img.avatar,
.avatar,
.icon,
.icon *{
  border-radius: 999px !important;
}

/* Si certains éléments cassent (ex: tableaux internes), on corrige au cas par cas plus bas. */


/* -----------------------------
   4) Layout “plein écran” + marges réduites
------------------------------ */
/* Conteneurs courants (fallbacks, Gancio peut varier) */
main, .container, .content, .page, .wrapper, .center, #app{
  width: min(1400px, 96vw) !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 14px !important;
}

/* -----------------------------
   5) “Cartes” / surfaces glass
------------------------------ */
/* Cibles larges: calendriers, panneaux, boîtes, cartes, modales… */
.calendar, .calendar-container, .months,
.panel, .box, .card, .content-box,
.modal, .dialog, .popup, .dropdown, .menu,
article, section{
  background: var(--etx-bg-soft) !important;
  border: 1px solid var(--etx-border) !important;
  box-shadow: var(--shadow);
  backdrop-filter: var(--glass);
}

/* Hover “carte qui flotte” (sur items) */
.card:hover, .box:hover, .panel:hover, article:hover{
  transform: translateY(-1px);
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
  box-shadow: var(--shadow-strong);
}

/* Petits textes secondaires */
small, .muted, .secondary, .subtitle, .help{
  color: var(--etx-muted) !important;
}

/* -----------------------------
   6) Recherche / champs / formulaires
------------------------------ */
input[type="search"], input[type="text"], input[type="email"], input[type="url"],
textarea, select{
  background: rgba(11,23,32,.70) !important;
  color: var(--etx-text) !important;
  border: 1px solid var(--etx-border) !important;
  padding: 12px 16px !important;
  outline: none !important;
}

/* Focus */
input:focus, textarea:focus, select:focus{
  border-color: rgba(24,194,156,.55) !important;
  box-shadow: 0 0 0 5px var(--etx-accent-soft) !important;
}

/* Placeholder */
input::placeholder, textarea::placeholder{
  color: rgba(154,168,181,.70) !important;
}

/* -----------------------------
   7) Boutons (pill verts comme Mastodon)
------------------------------ */
button, .btn, .button,
input[type="submit"], input[type="button"], a.button{
  background: var(--etx-accent) !important;
  color: #021212 !important;
  border: none !important;
  padding: 10px 18px !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.50);
  transition: transform .12s ease-out, box-shadow .12s ease-out, opacity .12s ease-out;
  cursor: pointer;
}

button:hover, .btn:hover, .button:hover,
input[type="submit"]:hover, a.button:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(0,0,0,.65);
  opacity: .96;
}

/* Boutons “icône” plus sobres */
.icon-button, .btn.icon, button.icon{
  background: var(--etx-accent-soft) !important;
  color: var(--etx-text) !important;
  box-shadow: none !important;
  padding: 8px 10px !important;
}

/* -----------------------------
   8) Calendrier “tableau pro”
------------------------------ */
/* Table principale */
.calendar table{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: var(--table-gap-x) var(--table-gap-y) !important;

  /* la table ne doit pas avoir d'arrondi interne chelou */
  border-radius: 0 !important;
}
.calendar thead, .calendar tbody, .calendar tr{
  border-radius: 0 !important;
}

/* En-têtes jours */
.calendar th{
  color: var(--etx-muted) !important;
  font-weight: 800 !important;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: .78rem !important;
  padding: 6px 8px !important;
  background: transparent !important;
  border: none !important;
}

/* Cellules jours */
.calendar td{
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--etx-border) !important;
  padding: 12px 12px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.calendar td:hover{
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.10) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,.38);
}

/* “Aujourd’hui” / “sélection” (plusieurs fallbacks possibles) */
.calendar .today,
.calendar .selected,
.calendar td.is-today,
.calendar td.is-selected,
.calendar td[aria-current="date"]{
  background: linear-gradient(135deg, var(--etx-accent), #7cf0d7) !important;
  color: #021212 !important;
  font-weight: 900 !important;
  border: none !important;
}

/* Jours avec événement (fallbacks) */
.calendar .has-event,
.calendar td.has-event,
.calendar td.event,
.calendar td[data-has-event="true"]{
  background: rgba(24,194,156,0.12) !important;
  border-color: rgba(24,194,156,0.25) !important;
  font-weight: 800 !important;
}

/* -----------------------------
   9) Tags / badges (ikastolak)
------------------------------ */
.tag, .badge, .chip, .tags a, .tags span{
  background: rgba(24,194,156,0.10) !important;
  border: 1px solid rgba(24,194,156,0.20) !important;
  color: var(--etx-text) !important;
  padding: 8px 12px !important;
  font-weight: 800 !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Petit point indicateur */
.tag::before, .badge::before, .chip::before, .tags a::before, .tags span::before{
  content: "";
  width: 10px; height: 10px;
  border-radius: 999px !important;
  background: var(--etx-accent);
  box-shadow: 0 0 0 3px rgba(0,0,0,.25);
}

/* Zone filtres (si présente) */
.filters, .filter, .taglist, .tag-list{
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px !important;
  margin: 12px 0 0 !important;
}

/* -----------------------------
   10) Header / Footer (glass)
------------------------------ */
header, .header, nav, .navbar{
  background: rgba(5,11,16,.55) !important;
  border-bottom: 1px solid var(--etx-border) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}

footer, .footer, .bottom-bar, .bottomnav{
  background: rgba(5,11,16,.55) !important;
  border-top: 1px solid var(--etx-border) !important;
  backdrop-filter: blur(10px);
}

/* -----------------------------
   11) Modales / menus (au-dessus)
------------------------------ */
.modal, .dialog, .popup, .dropdown, .menu{
  z-index: 9999 !important;
}

/* Overlay si présent */
.overlay, .modal-overlay{
  background: rgba(0,0,0,.60) !important;
  backdrop-filter: blur(6px);
}

/* -----------------------------
   12) Mobile-first (jours plus gros + confort)
------------------------------ */
@media (max-width: 768px){
  main, .container, .content, .page, .wrapper, .center, #app{
    width: 96vw !important;
    padding: 10px !important;
  }

  .calendar table{
    border-spacing: 8px 10px !important;
  }
  .calendar td{
    padding: 14px 10px !important;
    font-size: 1.02rem !important;
  }

  button, .btn, .button, input[type="submit"], a.button{
    padding: 12px 16px !important;
  }
}

/* -----------------------------
   13) Accessibilité (focus visible)
------------------------------ */
:focus-visible{
  outline: 3px solid rgba(24,194,156,.55) !important;
  outline-offset: 3px !important;
}