/*
Theme Name: monarchie
couleur de la chorale lausanne : #ffe789
*/

*, *::before, *::after { box-sizing: border-box; }
body, input, button, textarea { font-family: monospace, monospace; font-size: large; margin: 0; padding: 0; border: none; background: #fff; color: #000; }
a { text-decoration: none; color: #000; }
a:hover { text-decoration: underline; }
input, textarea, select { border-bottom: 1px solid #555; }
textarea { min-height: 120px; }
input:focus, textarea:focus, select:focus { outline: none }
.cay-container { display: flex; flex-direction: column; gap: 10px; }
@keyframes fade { 0% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 1; transform: none; } }
.cay-section-label { font-size: large; margin-top: 40px; margin-bottom: 10px; }
.cay-empty { opacity: .6; font-style: italic; padding: 6px 0; }
audio { width: 100%; margin-top: 4px; }

.cay-rep-container, .cay-concert-container { margin-bottom: 30px; }
.cay-rep-item, .cay-concert-item { font-size: large; padding: 5px 0; }

.cay-concert-item {flex-direction: column;}
.cay-concert-header {font-size: 1.5rem; font-weight: 600; }
.cay-rep-date, .cay-concert-date { font-size: large; word-break: break-all; font-weight: 600; margin-bottom: 5px; }
.cay-rep-text, .cay-concert-text { font-size: large; color: #555; margin-bottom: 20px; white-space: pre-wrap; }



.cay-title-block { margin-top: 0px; }
.page-container { max-width: 600px; margin: 0 auto; text-align: left; }
.page-content { display: flex; flex-direction: column; align-content: center; max-width: 600px; padding: 0 10px; }
.cay-header { font-size: 1.5rem; }
.cay-header-1 { font-size: 1.5rem; font-weight: 600;  margin-bottom: 20px; }
.cay-header-color {font-size: 1.5rem; font-weight: 600; background: linear-gradient(60deg, rgb(221, 88, 121) 0%, rgb(138, 59, 121) 50%, rgb(123, 255, 178) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 300% 300%; display: inline-block; background-clip: text; color: transparent; animation: cayGradient 30s ease-in-out infinite; }
.cay-header-2 { font-size: 2rem; font-weight: 600; margin-bottom: 10px; }
.cay-header-0 { font-size: 4rem; font-weight: 600; text-transform: uppercase; margin-bottom: 20px; word-break: break-all; }

@keyframes cayGradient { 0% { background-position: 0% 50%; } 33% { background-position: 50% 30%; } 66% { background-position: 100% 100%; } 100% { background-position: 0% 50%; } }

.cay-wrap { max-width: 840px; margin: 0 auto; padding: 20px; }
.cay-logout { position: fixed; top: 15px; right: 20px; z-index: 999; }
.cay-btn { background: #2A7B9B; background: linear-gradient(90deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%); color: #fff; border: none; padding: 8px 14px; border-radius: 4px; cursor: pointer; }
.cay-btn-100 { width: 100%; text-align: center; background: #2A7B9B; background: linear-gradient(90deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%); color: #fff; border: none; padding: 8px 14px; border-radius: 4px; cursor: pointer; }
.cay-btn:hover, cay-btn-100:hover { background: #0d5eb0; }
.cay-del { color: #000; font-size: 18px; background: transparent; border: none; cursor: pointer; }
.cay-del:hover { color: #d32f2f; }
.cay-card { margin-top: 40px; }
.cay-card-header { display: flex; justify-content: space-between; align-items: top; padding-top: 10px; margin-bottom: 6px;}
.cay-card-title { font-size: 1.8rem; font-weight: 600; text-transform: uppercase; }
.cay-list { margin-bottom: 20px; }
.cay-list-text { font-size: 1.5rem; font-weight: 600; text-transform: uppercase; white-space: pre-wrap; }
.cay-list-item { display: flex; justify-content: space-between; align-items: top; border-top: 2px solid #000; padding-top: 10px; margin-bottom: 6px; }
.cay-list-pdf, .cay-list-mp3 { display: flex; justify-content: space-between; align-items: top; margin-bottom: 6px; border: 2px solid #2A7B9B; background-color: transparent; border-radius: 4px; padding: 4px 10px 0 4px; }
.cay-list-mp3 { border: 2px solid #57C785; }
.cay-btn-pdf, .cay-btn-mp3 { border: none; background: #2A7B9B; background: linear-gradient(90deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 100%, rgba(237, 221, 83, 1) 100%); color: #fff; margin-bottom: 6px; width: 100%; border-radius: 4px; padding: 8px 14px; cursor: pointer; }
.cay-btn-mp3 { background: #2A7B9B; background: linear-gradient(90deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 0%, rgba(237, 221, 83, 1) 100%); }
.cay-list-description { display: flex; width: 100%; flex-wrap: wrap; color: #777;  white-space: pre-wrap;   }
.cay-overlay-form { display: none; position: fixed; inset: 0; z-index: 99999; background: #fff; overflow-y: auto; animation: fade .3s ease forwards; }
.cay-inner-form { max-width: 600px; min-width: 0; width: 100%; margin: 0 auto; padding: 50px 10px; display: flex; flex-direction: column; gap: 10px; }

.cay-info-container { margin-bottom: 30px; }
.cay-info-item { font-size: large; white-space: pre-wrap; }

.cay-link-pdf, .cay-link-mp3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #000;
    border: 1px solid #000;
    background-color: transparent;
    border-radius: 10px;
    padding: 2px 5px 0px;
    display: inline-block;
    margin: 6px 0;
}
.cay-link-pdf:hover, .cay-link-mp3:hover {
    background: #000;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}


.cay-link-mp3::before {
    content: "♫";
    margin-right: .35rem;
    font-size: 1rem;
    line-height: 0;
}
.cay-link-pdf::before {
    content: "🗐";
    margin-right: .35em;
    font-size: .8rem;
    line-height: 0;
}

.cay-title-head.has-content {
    cursor:pointer;
}

/* arrow only when has-content */
.cay-title-head.has-content::after {
    content: "voir les fichiers";
    font-size: .9rem;
    margin-left: 6px;
    color: #777;
    display:inline-block;
    transition: transform 0.3s ease;
}

/* rotate when open */
.cay-title-block.open .cay-title-head.has-content::after {
    content: "fermer";
}

/* hide content by default */
.cay-content {
    opacity:0;
    max-height:0;
    overflow:hidden;
    transition: opacity .3s ease, max-height .3s ease;
}

/* when open */
.cay-title-block.open .cay-content {
    opacity:1;
    max-height:800px; /* must be > biggest possible content height */
}