/* ============= VARIABLES ET CONFIGURATION ============= */
:root {
    /* Couleurs principales */
    --black: #292929;
    --purple: #7f36ff;
    --white: #fff;
    
    /* Couleurs de fond */
    --color-bg1: #7f36ff;
    --color-bg2: #7F34FF;
    
    /* Palette de couleurs pour animations */
    --color1: 160, 100, 255, .5; /* Violet clair transparent */
    --color2: 127, 54, 255; /* Ton exact de purple */
    --color3: 140, 120, 240; /* Violet pastel */
    --color4: 190, 80, 255; /* Violet rosé */
    --color5: 120, 70, 220, .2; /* Violet foncé transparent */
    --color-interactive: 150, 100, 255; /* Violet interactif légèrement plus clair */
    
    /* Configuration gradients */
    --circle-size: 80%;
    --blending: hard-light;
    
    /* Espacements */
    --spacing-xs: 5px;
    --spacing-sm: 8px;
    --spacing-md: 15px;
    --spacing-lg: 30px;
    --spacing-xl: 50px;
    
    /* Rayons de bordure */
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 30px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.4s ease-in-out;
    
    /* Ombres */
    --shadow-md: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    --shadow-sm: rgba(17, 12, 46, 0.1) 0px 10px 30px 0px;
    
    /* Typographie */
    --font-primary: "omnes-pro", sans-serif;
    --font-size-h1: 5rem;
    --font-size-h2: 35px;
    --font-size-h3: 25px;
    --font-size-normal: 16px;
    --font-size-large: 18px;
    --font-size-small: 14px;
}

/* ============= ANIMATIONS ============= */
@keyframes moveInCircle {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

@keyframes moveVertical {
  0% { transform: translateY(-50%); }
  50% { transform: translateY(50%); }
  100% { transform: translateY(-50%); }
}

@keyframes moveHorizontal {
  0% { transform: translateX(-50%) translateY(-10%); }
  50% { transform: translateX(50%) translateY(10%); }
  100% { transform: translateX(-50%) translateY(-10%); }
}

@keyframes sway {
  0%, 50%, 100% { transform: translateX(-5px) rotate(0deg); }
  25% { transform: translateX(-5px) rotate(-3deg); }
  75% { transform: translateX(-5px) rotate(3deg); }
}

@keyframes fadeInSlide {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============= STYLES DE BASE ============= */
* {
    font-family: var(--font-primary);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    position: relative;
    background-color: var(--black);
    overflow-x: hidden;
    color: var(--white);
    line-height: 1.5;
}

.container {
    overflow: hidden;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
    padding: 0 15px;
}

/* État initial pour l'animation */
.animation-pending h1, 
.animation-pending h2, 
.animation-pending h3, 
.animation-pending .infos p, 
.animation-pending .calendar-dropdown, 
.animation-pending h4, 
.animation-pending form,
.animation-pending #new,
.animation-pending .gradient-bg,
.animation-pending #party-hat {
    opacity: 0 !important;
    visibility: hidden !important;
}

.animation-pending #old,
.animation-pending .logo {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Style explicite pour s'assurer que le logo old est visible au démarrage */
.show-old-logo #old {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(2.5) !important;
    z-index: 1000 !important;
}

/* ============= GRADIENT BACKGROUND ============= */
.gradient-bg {
    z-index: -1;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
}

.gradient-bg svg {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
}

.gradient-bg .gradients-container {
    filter: url(#goo) blur(40px);
    width: 100%;
    height: 100%;
}

/* Styles communs pour les éléments de gradient */
.gradient-bg [class^="g"] {
    position: absolute;
    mix-blend-mode: var(--blending);
    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);
    background-repeat: no-repeat;
    background-position: center;
    will-change: transform;
}

.gradient-bg .g1 {
    background: radial-gradient(circle at center, rgba(var(--color1), 0.8) 0, rgba(var(--color1), 0) 50%);
    transform-origin: center center;
    animation: moveVertical 30s ease infinite;
}

.gradient-bg .g2 {
    background: radial-gradient(circle at center, rgba(var(--color2), 0.8) 0, rgba(var(--color2), 0) 50%);
    transform-origin: calc(50% - 400px);
    animation: moveInCircle 20s reverse infinite;
}

.gradient-bg .g3 {
    background: radial-gradient(circle at center, rgba(var(--color3), 0.8) 0, rgba(var(--color3), 0) 50%);
    top: calc(50% - var(--circle-size) / 2 + 200px);
    left: calc(50% - var(--circle-size) / 2 - 500px);
    transform-origin: calc(50% + 400px);
    animation: moveInCircle 40s linear infinite;
}

.gradient-bg .g4 {
    background: radial-gradient(circle at center, rgba(var(--color4), 0.8) 0, rgba(var(--color4), 0) 50%);
    transform-origin: calc(50% - 200px);
    animation: moveHorizontal 40s ease infinite;
    opacity: 0.7;
}

.gradient-bg .g5 {
    background: radial-gradient(circle at center, rgba(var(--color5), 0.8) 0, rgba(var(--color5), 0) 50%);
    width: calc(var(--circle-size) * 2);
    height: calc(var(--circle-size) * 2);
    top: calc(50% - var(--circle-size));
    left: calc(50% - var(--circle-size));
    transform-origin: calc(50% - 800px) calc(50% + 200px);
    animation: moveInCircle 20s ease infinite;
}

.gradient-bg .interactive {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color-interactive), 0.8) 0, rgba(var(--color-interactive), 0) 50%);
    mix-blend-mode: var(--blending);
    width: 100%;
    height: 100%;
    top: -50%;
    left: -50%;
    opacity: 0.7;
    will-change: transform;
}

/* ============= HEADER ============= */
#party-hat {
    color: var(--white);
    width: 50px;
    height: 50px;
    position: absolute;
    top: 2.85rem;
    left: 50%;
    z-index: 0;
    animation: sway 1s ease-in-out infinite;
}
#new, #old {
    color: var(--white);
    height: auto;
    position: absolute;
    left: 50%;
    height: auto;
    transform: translateX(-50%);
}
#old {
    width: 350px;
}
#old svg {
    width: 85px;
    margin-bottom: 5px;
}
#old p {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 12px;
}
#new {
    width: 250px;
}

/* ============= TYPOGRAPHIE ============= */
h1, h2, h3, h4 {
    margin: 0;
    color: var(--white);
    line-height: 1.2;
}

h1 {
    font-size: var(--font-size-h1);
    font-weight: 700;
    text-transform: uppercase;
    padding-top: 14rem;
    padding-bottom: var(--spacing-md);
    max-width: 800px;
    margin: 0 auto;
    user-select: none;
    line-height: 1;
}

h1 span {
    color: transparent;
    -webkit-text-stroke: 2px var(--white);
}

h2 {
    text-transform: uppercase;
    font-size: var(--font-size-h2);
    position: relative;
}

h2 span {
    border-bottom: 2px solid var(--white);
}

h3 {
    text-transform: uppercase;
    font-weight: 500;
    font-size: var(--font-size-h3);
}

h4 {
    margin: 25px auto;
    max-width: 415px;
    background: var(--white);
    font-weight: 500;
    padding: var(--spacing-lg) 50px;
    color: var(--purple);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-normal);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

h4 span {
    font-size: var(--font-size-large);
    font-weight: 700;
    display: block;
    margin-bottom: var(--spacing-xs);
}

/* ============= INFOS ET CONTENUS ============= */
.infos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.infos svg {
    color: var(--white);
}

.infos p {
    margin: 0;
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-end;
    justify-content: center;
}

.infos p span {
    color: var(--white);
    font-size: var(--font-size-large);
    transition: color var(--transition-fast);
}

.infos p a {
    text-decoration: none;
    transition: color var(--transition-fast);
}

.infos p a:hover span {
    color: rgba(211, 211, 211, 0.8);
}

/* ============= CALENDRIER ============= */
.calendar-dropdown {
    z-index: 1;
    position: relative;
    display: inline-block;
}

.calendar-button {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 14px;
    background-color: var(--white);
    border: none;
    border-radius: var(--radius-md);
    color: var(--purple);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: var(--transition-fast);
    text-transform: uppercase;
    font-size: var(--font-size-small);
}

.calendar-icon svg {
    color: var(--purple);
}

.calendar-button:hover {
    opacity: 0.9;
    transform: scale(1.03);
}
.calendar-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 10px 15px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 20;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: var(--transition-fast);
    transform: translateY(-10px);
}

.calendar-dropdown.open .calendar-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.calendar-menu a {
    font-size: var(--font-size-small);
    display: block;
    color: var(--purple);
    text-decoration: none;
    font-weight: 500;
    padding: var(--spacing-sm) 12px;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.calendar-menu a:hover {
    background-color: rgba(var(--color2), 0.1);
    color: var(--purple);
}

/* ============= FORMULAIRE ============= */
form {
    text-align: left;
    background-color: var(--white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-md);
}

/* Styles réutilisables pour boutons et champs */
.form-button,
input[type="submit"] {
    cursor: pointer;
    transition: var(--transition-fast);
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

.form-input,
.acf-fields .acf-field input[type="text"],
.acf-fields .acf-field input[type="email"] {
    border: 1px solid var(--purple);
    border-radius: var(--radius-sm);
    padding: 10px 15px;
    background-color: var(--white);
    color: var(--purple);
    font-size: var(--font-size-normal);
    outline: none;
    transition: var(--transition-fast);
    width: 100%;
}

.form-input:focus,
.acf-fields .acf-field input[type="text"]:focus,
.acf-fields .acf-field input[type="email"]:focus {
    border-color: var(--purple);
    background-color: #f9f8ff;
    box-shadow: 0 0 0 3px rgba(var(--color2), 0.2);
}

/* Message de confirmation */
#message.updated {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 15px 20px;
    border-radius: 10px;
    margin: var(--spacing-xl) 0 var(--spacing-lg);
    font-size: var(--font-size-normal);
    font-weight: 500;
    animation: fadeInSlide 0.6s ease-out both;
}

#message.updated p {
    font-weight: 700;
    font-size: var(--font-size-large);
}

/* Champs */
.acf-label label {
    color: var(--purple);
    font-size: var(--font-size-large);
    font-weight: 600;
}

.acf-fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md) ;
}

.acf-fields > .acf-field:not(.acf-field-true-false, .acf-field-repeater) {
    width: calc(50% - var(--spacing-md)/2);
    padding: 0;
    border: none;
}

.acf-fields > .acf-field:is(.acf-field-true-false, .acf-field-repeater) {
    width: 100%;
    padding: 0;
    border: none;
}

/* Titre musique */
.acf-fields > .acf-field:not(.acf-field-true-false, .acf-field-repeater).acf-field-680b586225efe {
    width: 100%;
}

.acf-field-680b586225efe .acf-label label::after {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-left: var(--spacing-sm);
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgNjQgNjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGQ9Ik0xMy41NCAyNi4wN2EzLjk0NCAzLjk0NCAwIDAgMC0uMDktMy40OEw5LjAxIDE0LjNjNC43NS0xLjM5IDYuODQgMi4wOCA2LjkzIDIuMjRhMS4wMDkgMS4wMDkgMCAwIDAgMS44Ny0uNDJjLjAxLS4yLjMyLTQuODktMi44Ni03LjI3LTIuMjYtMS42OC01LjU5LTEuNzEtOS44OC0uMDhhLjk5OS45OTkgMCAwIDAtLjUzIDEuNDFsNS41NyAxMC40MWE1Ljk4MSA1Ljk4MSAwIDAgMC01Ljc1IDMuNDQgMy44MjMgMy44MjMgMCAwIDAgMi45NiA1LjQzIDUuOTc5IDUuOTc5IDAgMCAwIDYuMjItMy4zOXpNNTkuMjIgMzUuMjVjLTEuNi0zLjM5LTUuNTMtNS41LTExLjY4LTYuMjlhLjk2OS45NjkgMCAwIDAtLjc5LjI0Ljk5Ni45OTYgMCAwIDAtLjM0Ljc1Yy0uMDA0LjEwMy4wNCAxNy4wNS4wNCAxNy4wNWE3LjQ2MiA3LjQ2MiAwIDAgMC00LjY3LTEuNTdjLTUuNjQ4LS4xMjUtOS4yMDUgNS45NjctNC42MyA5LjUxIDMuNjMgMy4wNDYgMTEuMjU0IDEuMjE3IDExLjMxLTQuMDUuMDA3LjAwMy0uMDQ1LTEzLjkwMi0uMDQtMTMuOTFhOS4yMDIgOS4yMDIgMCAwIDEgNy43NSA4LjE0IDEuMDEzIDEuMDEzIDAgMCAwIC43NS45MS45OTcuOTk3IDAgMCAwIDEuMS0uNDRjLjE0LS4yMiAzLjQ1LTUuNTcgMS4yLTEwLjM0ek00MC4zNSAzNC4zOWE0LjIxOSA0LjIxOSAwIDAgMC0uMDItLjk1TDM5LjA4IDkuMjJhLjk5OC45OTggMCAwIDAtMS4zOC0uODdsLTE3LjMzIDcuMDNhLjk3OC45NzggMCAwIDAtLjYyLjk4Yy4wMDMuMDQ0LjM5MiA3LjkxLjM5IDcuOTVsLjY5IDEzLjg2YTcuMzI2IDcuMzI2IDAgMCAwLTQuMzYtMS4zN2MtOC42ODQuMjYtOC42OTEgMTAuNDg2IDAgMTAuNzUgMy44Ny0uMDE3IDYuOTY3LTIuNzA3IDYuNTItNi4wNWwtLjgyLTE2LjU4IDE1LjM3LTYuNjQuNjEgMTEuNzVjLTMuNzQ5LTIuOTU3LTEwLjkzNi0uODAyLTEwLjkxIDQuMDIuMjYgNi45MzIgMTIuMzcgNy4xNzkgMTMuMTEuMzR6IiBmaWxsPSIjN2YzNmZmIiBvcGFjaXR5PSIxIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIi8+PC9nPjwvc3ZnPg==");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

/* Checkbox */
.acf-fields > .acf-field.acf-field-true-false {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.acf-fields > .acf-field.acf-field-true-false .acf-label,
.acf-fields > .acf-field.acf-field-true-false .acf-label label {
    margin: 0;
    cursor: pointer;
}

.acf-true-false label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--white);
    border: 2px solid var(--purple);
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    font-weight: 600;
    color: var(--purple);
    transition: var(--transition-normal);
    position: relative;
}

.acf-true-false label::before {
    content: "+";
    line-height: 1;
    height: 28px;
    pointer-events: all;
}

.acf-true-false label:has(input:checked) {
    background-color: var(--purple);
    color: var(--white);
    transform: rotate(45deg);
    border-color: var(--white);
}

.acf-true-false label input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    cursor: pointer;
}

.acf-field-true-false .acf-label {
    order: -1;
    font-size: var(--font-size-large);
    color: var(--white);
}

/* Repeater */
.acf-field-repeater .acf-label {
    display: none;
}

.acf-field-repeater .acf-table {
    border-radius: var(--radius-sm);
    padding: var(--spacing-xs);
}

/* Table styles */
.acf-table > tbody > tr > th,
.acf-table > tbody > tr > td,
.acf-table > thead > tr > th,
.acf-table > thead > tr > td,
.acf-repeater > table,
.acf-repeater .acf-row-handle.order {
    background: var(--purple) !important;
    color: var(--white) !important;
    border-color: var(--purple) !important;
}

.acf-repeater > .acf-actions .acf-button {
    color: var(--white);
    background-color: var(--purple);
    border-radius: var(--radius-sm);
    border: none;
    padding: 10px 20px;
    font-size: var(--font-size-normal);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
}

.acf-repeater > .acf-actions .acf-button:hover {
    opacity: 0.8;
}

.acf-repeater > .acf-actions .acf-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--color2), 0.3);
}

/* Submit button */
.acf-form-submit {
    text-align: center;
    margin-top: 20px;
}

input[type="submit"] {
    color: var(--white);
    background-color: var(--purple);
    border: none;
    border-radius: var(--radius-sm);
    padding: 12px 25px;
    font-size: 21px;
    font-weight: 600;
    box-shadow: var(--shadow-md);
}

input[type="submit"]:hover {
    opacity: 0.8;
}

input[type="submit"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--color2), 0.3);
}

/* ============= RESPONSIVE ============= */
@media screen and (max-width: 767px) {

    :root {
        --font-size-h1: 2.8rem;
        --font-size-h2: 24px;
        --font-size-h3: 18px;
        --spacing-lg: 20px;
    }
    .container {
        max-width: 100%;
    }

    h1 {
        max-width: 100%;
        font-size: 44px;
        margin-bottom: 10px;
    }
  
    h2, h3 {
        text-align: center;
    }
  
    .infos {
        flex-direction: column;
        gap: var(--spacing-md);
    }
  
    .calendar-menu {
        min-width: 100%;
        left: 0;
        transform: none;
    }
  
    main .infos p {
        align-items: center;
        gap: var(--spacing-xs);
    }
  
    main .infos p svg {
        width: 28px;
        height: 28px;
    }
  
    main .infos p span {
        font-size: var(--font-size-large);
        text-align: center;
    }
  
    form {
        padding: 20px;
        margin-top: 40px;
    }
  
    .acf-fields > .acf-field:not(.acf-field-true-false, .acf-field-repeater) {
        width: 100%;
    }
  
    .acf-label label {
        font-size: var(--font-size-normal);
    }
    input[type="submit"] {
        font-size: 18px;
        padding: 10px 20px;
    }
  
    header {
        margin: 60px auto;
        gap: 10px;
    }
    #old svg {
        width: 85px;
    }
    #old {
        width: 250px;
    }
    #old p {
        font-size: 8px;
    }
    #new {
        width: 230px;
    }
  
    #party-hat {
        width: 40px;
        height: 40px;
    }
  
    .acf-true-false label {
        width: 35px;
        height: 35px;
        font-size: 20px;
    }
  
    .acf-field-true-false .acf-label {
        font-size: var(--font-size-normal);
    }
    .acf-true-false label::before {
        height: 24px;
    }
  
    .acf-repeater > .acf-actions .acf-button {
        font-size: var(--font-size-small);
        padding: 8px 16px;
    }
    
    /* Table responsive */
    .acf-table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }
}