/* --- Reset box-sizing --- */
*, *::before, *::after {
    box-sizing: border-box;
}

input {
  color: #e9f1fadc;
}

/* --- Inputs hover / focus --- */
input:hover {
    border-bottom: solid 3px #333;
}

input:focus {
    outline: none;
}

/* --- Body / Background / Halos --- */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #e9f1fadc;
    margin: 0;
    min-height: 100vh;          /* remplacer height:100vh */
    background: linear-gradient(135deg, #0a0a0a 0%, #1c1c2a 50%, #0d0d0d 100%);
    position: relative;
    overflow-x: hidden;          /* éviter scroll horizontal */
}

/* Halos animés */
body::before,
body::after {
    content: "";
    position: fixed;  
    width: 80%;
    height: 80%;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

body::before {
    background: radial-gradient(circle, rgba(183,223,250,0.4) 0%, rgba(183,223,250,0.25) 40%, rgba(0,0,0,0) 70%);
    top: 0;
    left: -40%;
    animation: moveBlue 30s ease-in-out infinite;
}

body::after {
    background: radial-gradient(circle, rgba(255,140,0,0.4) 0%, rgba(255,255,0,0.25) 40%, rgba(0,0,0,0) 70%);
    top: 30%;
    left: 50%;
    animation: moveOrange 35s ease-in-out infinite;
}

/* Animations halos */
@keyframes moveBlue {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(150%, 80%) rotate(90deg); }
  50%  { transform: translate(-100%, 150%) rotate(180deg); }
  75%  { transform: translate(70%, -120%) rotate(270deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}

@keyframes moveOrange {
  0%   { transform: translate(0, 0) rotate(0deg); }
  20%  { transform: translate(-120%, 100%) rotate(90deg); }
  40%  { transform: translate(80%, 140%) rotate(180deg); }
  60%  { transform: translate(180%, -70%) rotate(270deg); }
  80%  { transform: translate(-50%, -100%) rotate(360deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* --- Conteneur global scrollable --- */
.global{
    position: relative;
    z-index: 1;
    max-width: 1200px;
    min-height: 100vh;      /* s’adapte au contenu */
    margin: auto;
    overflow-y: auto;        /* scroll vertical pour le contenu */
    padding: 20px;
}

/* --- Boxes / Contenu --- */
.box-u-background {
    background: linear-gradient(135deg, #1c222e 0%, #1b1b1b 70%, #292828 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.box-u-background:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.7);
}

/* --- Inputs date/time --- */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) sepia(1) saturate(5) hue-rotate(200deg);
    color: #fff;
    cursor: pointer;
}


 .zeag-submit {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background: linear-gradient(90deg, #0070ba, #00c6ff);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 112, 186, 0.3);
}

 .zeag-submit:hover {
    background: linear-gradient(90deg, #00c6ff, #0070ba);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 112, 186, 0.4);
}

  .zeag-submit:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(0, 112, 186, 0.3);
}

/* --- Alerts --- */
.alert {
    position: fixed;
    top: 20px; 
    left: 50%;
    transform: translateX(-50%); 
    z-index: 9999; 
    display: inline-block;
    min-width: 250px;
    max-width: 500px;
    padding: 15px 20px;
    border-radius: 10px;
    background: rgb(241, 235, 224);
    opacity: 1;
    transition: opacity 0.8s ease, transform 0.8s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.alert.hide {
    opacity: 0;
    transform: translate(-50%, -20px); 
    pointer-events: none; 
}

.alert-error {
    color: rgb(231, 68, 68);
    border-left: solid 5px rgb(231, 68, 68);
}

.alert-success {
    color: rgb(4, 158, 12);
    border-left: solid 5px rgb(4, 158, 12);
}

.close-alert {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -8px;  
    right: -8px;
    height: 22px;
    width: 22px;
    background: rgb(231, 68, 68);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
    line-height: 1;
    text-align: center;
}

.close-alert:hover {
    background: rgb(200, 50, 50);
}

/* --- Loader page --- */
#onpageload {
    position: fixed; 
    inset: 0;
    display: flex; 
    justify-content: center; 
    align-items: center;
    background: rgba(0,0,0,0.85);
    z-index: 9999;
}

#onpageload img { max-width: 120px; }

/* --- Buttons --- */
.del-btn {
    background: rgb(218, 63, 63);
}

.del-btn:hover {
    background: rgb(243, 88, 88);
}

a {
    text-decoration: none;
    color: orange;
    cursor: pointer;
}

a:hover {
    text-decoration: underline;
}

.title-c {
    font-weight: bold;
    background: linear-gradient(90deg, #b7dffa, #0070ba, #00ffc8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

hr {
    border: none;
    height: 1px;
    background: #333;
}

/* --- Radio fixed --- */
.btn-radio-container {
    position: fixed;
    bottom: 15px;
    right: 20px;
    display: flex;
    flex-direction: column; 
    gap: 10px;
    z-index: 9999;
}

.circle-btn-radio {
    width: 65px;
    height: 65px;
    background-color: #333;
    color: white;
    border-radius: 50%;
    border: solid 2.5px #1f1e1e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.circle-btn-radio:hover {
    background-color: #555;
}

.rbtn-i {
    font-size: 24px;
    color: orange;
}

/* --- Audio hidden --- */
#myqckAudio {
    display: none;
}