/*
 * Cadres biseautés Azilum.
 *
 * Une bordure CSS standard ne suit pas les diagonales d'un clip-path.
 * Chaque cadre est donc composé de quatre lignes droites et quatre coins.
 */

.az-frame,
.panel,
.button,
.team-card,
.event-row,
.event-row time,
.featured-news,
.menu-toggle {
  --az-border-start: rgba(123, 77, 255, .72);
  --az-border-end: rgba(187, 44, 224, .66);
  position: relative;
  border-color: transparent;
}

.button {
  --az-border-start: #ff7918;
  --az-border-end: #f20f78;
}

.button--ghost {
  --az-border-start: #7845f2;
  --az-border-end: #b32ad9;
}

.team-card {
  --az-border-start: var(--card-accent);
  --az-border-end: var(--card-accent);
}

.event-row {
  --az-border-start: rgba(100, 73, 218, .62);
  --az-border-end: rgba(136, 63, 220, .55);
}

.event-row time {
  --az-border-start: var(--event-accent, var(--az-pink));
  --az-border-end: color-mix(in srgb, var(--event-accent, var(--az-pink)), #fff 28%);
}

.az-frame::before,
.panel::before,
.team-card::before,
.event-row::before,
.event-row time::before,
.featured-news::before,
.menu-toggle::before,
.button::after {
  position: absolute;
  z-index: 8;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 42%, var(--az-border-start) 46%, var(--az-border-start) 54%, transparent 58%) top left / var(--az-cut) var(--az-cut) no-repeat,
    linear-gradient(45deg, transparent 42%, var(--az-border-end) 46%, var(--az-border-end) 54%, transparent 58%) top right / var(--az-cut) var(--az-cut) no-repeat,
    linear-gradient(45deg, transparent 42%, var(--az-border-start) 46%, var(--az-border-start) 54%, transparent 58%) bottom left / var(--az-cut) var(--az-cut) no-repeat,
    linear-gradient(135deg, transparent 42%, var(--az-border-end) 46%, var(--az-border-end) 54%, transparent 58%) bottom right / var(--az-cut) var(--az-cut) no-repeat,
    linear-gradient(90deg, var(--az-border-start), var(--az-border-end)) top left var(--az-cut) / calc(100% - var(--az-cut) - var(--az-cut)) 1px no-repeat,
    linear-gradient(90deg, var(--az-border-start), var(--az-border-end)) bottom left var(--az-cut) / calc(100% - var(--az-cut) - var(--az-cut)) 1px no-repeat,
    linear-gradient(var(--az-border-start), var(--az-border-start)) top var(--az-cut) left / 1px calc(100% - var(--az-cut) - var(--az-cut)) no-repeat,
    linear-gradient(var(--az-border-end), var(--az-border-end)) top var(--az-cut) right / 1px calc(100% - var(--az-cut) - var(--az-cut)) no-repeat;
}

/* Le bouton utilise un anneau continu dont les quatre diagonales sont fermées. */
.button::after {
  z-index: 3;
  padding: 1px;
  background: linear-gradient(115deg, var(--az-border-start), var(--az-border-end));
  -webkit-clip-path: polygon(var(--az-cut) 0, calc(100% - var(--az-cut)) 0, 100% var(--az-cut), 100% calc(100% - var(--az-cut)), calc(100% - var(--az-cut)) 100%, var(--az-cut) 100%, 0 calc(100% - var(--az-cut)), 0 var(--az-cut));
  clip-path: polygon(var(--az-cut) 0, calc(100% - var(--az-cut)) 0, 100% var(--az-cut), 100% calc(100% - var(--az-cut)), calc(100% - var(--az-cut)) 100%, var(--az-cut) 100%, 0 calc(100% - var(--az-cut)), 0 var(--az-cut));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/*
 * Cadre plein : la forme extérieure est la bordure et le fond est incrusté
 * d'un pixel. Cette variante garantit des coins fermés, même à fort zoom.
 */
.button {
  border: 0;
  background: linear-gradient(115deg, var(--az-border-start), var(--az-border-end));
  isolation: isolate;
}

.button::before {
  z-index: -1;
  inset: 1px;
  height: auto;
  background: radial-gradient(ellipse at 10% 50%, rgba(255, 91, 0, .2), transparent 48%), linear-gradient(108deg, #651806 0%, #5b0c25 52%, #190620 100%);
  box-shadow: inset 0 0 18px rgba(255, 35, 82, .065);
  -webkit-clip-path: polygon(calc(var(--az-cut) - 1px) 0, calc(100% - var(--az-cut) + 1px) 0, 100% calc(var(--az-cut) - 1px), 100% calc(100% - var(--az-cut) + 1px), calc(100% - var(--az-cut) + 1px) 100%, calc(var(--az-cut) - 1px) 100%, 0 calc(100% - var(--az-cut) + 1px), 0 calc(var(--az-cut) - 1px));
  clip-path: polygon(calc(var(--az-cut) - 1px) 0, calc(100% - var(--az-cut) + 1px) 0, 100% calc(var(--az-cut) - 1px), 100% calc(100% - var(--az-cut) + 1px), calc(100% - var(--az-cut) + 1px) 100%, calc(var(--az-cut) - 1px) 100%, 0 calc(100% - var(--az-cut) + 1px), 0 calc(var(--az-cut) - 1px));
}

.button--ghost::before {
  background: linear-gradient(105deg, rgba(7, 8, 30, .98), rgba(17, 8, 46, .9));
  box-shadow: inset 0 0 12px rgba(91,35,255,.06);
}

.button::after {
  display: none;
}

/* Variante continue pour les petits contrôles, sans rupture dans les coins. */
.az-frame--closed::before {
  z-index: 3;
  padding: 1px;
  background: linear-gradient(115deg, var(--az-border-start), var(--az-border-end));
  -webkit-clip-path: polygon(var(--az-cut) 0, calc(100% - var(--az-cut)) 0, 100% var(--az-cut), 100% calc(100% - var(--az-cut)), calc(100% - var(--az-cut)) 100%, var(--az-cut) 100%, 0 calc(100% - var(--az-cut)), 0 var(--az-cut));
  clip-path: polygon(var(--az-cut) 0, calc(100% - var(--az-cut)) 0, 100% var(--az-cut), 100% calc(100% - var(--az-cut)), calc(100% - var(--az-cut)) 100%, var(--az-cut) 100%, 0 calc(100% - var(--az-cut)), 0 var(--az-cut));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/*
 * Cadre continu pour les médias : le dégradé extérieur forme un anneau
 * plein de 1 px et le média intérieur reprend les mêmes diagonales.
 */
.az-frame--media {
  overflow: hidden;
  border: 0;
  padding: 1px;
  background: linear-gradient(115deg, var(--az-border-start), var(--az-border-end));
  isolation: isolate;
  -webkit-clip-path: polygon(var(--az-cut) 0, calc(100% - var(--az-cut)) 0, 100% var(--az-cut), 100% calc(100% - var(--az-cut)), calc(100% - var(--az-cut)) 100%, var(--az-cut) 100%, 0 calc(100% - var(--az-cut)), 0 var(--az-cut));
  clip-path: polygon(var(--az-cut) 0, calc(100% - var(--az-cut)) 0, 100% var(--az-cut), 100% calc(100% - var(--az-cut)), calc(100% - var(--az-cut)) 100%, var(--az-cut) 100%, 0 calc(100% - var(--az-cut)), 0 var(--az-cut));
}

.az-frame--media::before {
  display: none;
}

.az-frame--media > .az-frame__media {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--az-frame-media-fill, #09081c);
  -webkit-clip-path: polygon(calc(var(--az-cut) - 1px) 0, calc(100% - var(--az-cut) + 1px) 0, 100% calc(var(--az-cut) - 1px), 100% calc(100% - var(--az-cut) + 1px), calc(100% - var(--az-cut) + 1px) 100%, calc(var(--az-cut) - 1px) 100%, 0 calc(100% - var(--az-cut) + 1px), 0 calc(var(--az-cut) - 1px));
  clip-path: polygon(calc(var(--az-cut) - 1px) 0, calc(100% - var(--az-cut) + 1px) 0, 100% calc(var(--az-cut) - 1px), 100% calc(100% - var(--az-cut) + 1px), calc(100% - var(--az-cut) + 1px) 100%, calc(var(--az-cut) - 1px) 100%, 0 calc(100% - var(--az-cut) + 1px), 0 calc(var(--az-cut) - 1px));
}

.az-frame--solid {
  border: 0;
  background: linear-gradient(115deg, var(--az-border-start), var(--az-border-end));
  isolation: isolate;
}

.az-frame--solid::before {
  z-index: -1;
  inset: 1px;
  padding: 0;
  background: var(--az-frame-fill, linear-gradient(145deg, rgba(10, 15, 44, .96), rgba(3, 6, 22, .94)));
  -webkit-clip-path: polygon(calc(var(--az-cut) - 1px) 0, calc(100% - var(--az-cut) + 1px) 0, 100% calc(var(--az-cut) - 1px), 100% calc(100% - var(--az-cut) + 1px), calc(100% - var(--az-cut) + 1px) 100%, calc(var(--az-cut) - 1px) 100%, 0 calc(100% - var(--az-cut) + 1px), 0 calc(var(--az-cut) - 1px));
  clip-path: polygon(calc(var(--az-cut) - 1px) 0, calc(100% - var(--az-cut) + 1px) 0, 100% calc(var(--az-cut) - 1px), 100% calc(100% - var(--az-cut) + 1px), calc(100% - var(--az-cut) + 1px) 100%, calc(var(--az-cut) - 1px) 100%, 0 calc(100% - var(--az-cut) + 1px), 0 calc(var(--az-cut) - 1px));
  -webkit-mask: none;
  mask: none;
}

/*
 * Les petites icônes vocales utilisent une forme extérieure pleine et un
 * fond intérieur incrusté : les huit segments restent raccordés à tout zoom.
 */
.channel-card__icon.az-frame--closed {
  --az-border-start: color-mix(in srgb, var(--channel-accent), #fff 8%);
  --az-border-end: var(--channel-accent);
  border: 0;
  background: linear-gradient(115deg, var(--az-border-start), var(--az-border-end));
  isolation: isolate;
}

.channel-card__icon.az-frame--closed::before {
  z-index: -1;
  inset: 1px;
  padding: 0;
  background: linear-gradient(145deg, color-mix(in srgb, var(--channel-accent), #08102a 88%), #070a20);
  -webkit-clip-path: polygon(calc(var(--az-cut) - 1px) 0, calc(100% - var(--az-cut) + 1px) 0, 100% calc(var(--az-cut) - 1px), 100% calc(100% - var(--az-cut) + 1px), calc(100% - var(--az-cut) + 1px) 100%, calc(var(--az-cut) - 1px) 100%, 0 calc(100% - var(--az-cut) + 1px), 0 calc(var(--az-cut) - 1px));
  clip-path: polygon(calc(var(--az-cut) - 1px) 0, calc(100% - var(--az-cut) + 1px) 0, 100% calc(var(--az-cut) - 1px), 100% calc(100% - var(--az-cut) + 1px), calc(100% - var(--az-cut) + 1px) 100%, calc(var(--az-cut) - 1px) 100%, 0 calc(100% - var(--az-cut) + 1px), 0 calc(var(--az-cut) - 1px));
  -webkit-mask: none;
  mask: none;
}

.panel:hover::before,
.team-card:hover::before,
.event-row:hover::before,
.button:hover::after {
  filter: brightness(1.22) drop-shadow(0 0 3px var(--az-border-end));
}

/* Néon plus net sur l'accueil sombre, avec une lueur courte qui garde les contours lisibles. */
body.home .panel::before,
body.home .team-card::before,
body.home .event-row::before,
body.home .featured-news::before {
  filter: brightness(1.12) drop-shadow(0 0 2px var(--az-border-end));
}

body.home .button {
  filter: drop-shadow(0 0 5px rgba(255, 104, 20, .76)) drop-shadow(0 0 14px rgba(232, 16, 111, .28));
}

body.home .button--ghost {
  filter: drop-shadow(0 0 5px rgba(126, 70, 255, .62)) drop-shadow(0 0 13px rgba(191, 42, 222, .22));
}