/* COPIE EXACTE DU STYLE FOURNI */
.azraia-wrapper * {margin:0;padding:0;box-sizing:border-box}

.azraia-wrapper {
    display:block;
    width:100%;
    font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
    background:radial-gradient(circle at top,#020617 0%,#020617 35%,#020617 60%,#020617 100%);
    color:#e5e7eb;
    overflow:hidden;
    position: relative;
    border-radius: 12px; /* Petit ajout pour l'intégration propre */
}

.main-content{
    flex:1 0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:24px 12px 40px;
    background:radial-gradient(circle at top,#020617 0%,#020617 40%,#020617 75%,#020617 100%);
}

.protocol-zone{
    position:relative;
    width:100%;
    max-width:1100px;
    min-height:560px;
    margin-top:0;
    background:
        radial-gradient(circle at top,rgba(79,70,229,.32),transparent 55%),
        radial-gradient(circle at bottom,rgba(8,47,73,.55),rgba(15,23,42,.98) 60%);
    border-radius:24px;
    border:1px solid rgba(129,140,248,.45);
    box-shadow:
        0 16px 40px rgba(15,23,42,.9),
        0 0 40px rgba(59,130,246,.18);
    padding:40px 32px 40px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    backdrop-filter:blur(14px);
    overflow:hidden;
    animation:azraia_frame_float 26s ease-in-out infinite alternate;
}

@keyframes azraia_frame_float{
    0%{transform:translateY(0) scale(1)}
    100%{transform:translateY(-3px) scale(1.005)}
}

.phase-indicator{
    position:absolute;
    top:14px;
    left:50%;
    transform:translateX(-50%);
    font-size:.72rem;
    color:#a5b4fc;
    text-transform:uppercase;
    letter-spacing:.2em;
    opacity:.9;
}

.visual-zone{
    width:100%;
    max-width:820px;
    min-height:330px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.intro-halo{
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(96,165,250,.40),transparent 68%);
    filter:blur(2px);
    opacity:1;
    transform:scale(.95);
    pointer-events:none;
    animation:azraia_intro_breath 7s ease-in-out infinite;
}

@keyframes azraia_intro_breath{
    0%{transform:scale(.95);opacity:.75}
    50%{transform:scale(1.08);opacity:1}
    100%{transform:scale(.95);opacity:.75}
}

.intro-tunnel{
    position:absolute;
    width:900px;
    height:900px;
    border-radius:50%;
    background:
        radial-gradient(circle at center,
            transparent 0%,
            rgba(30,64,175,0.55) 12%,
            transparent 40%,
            rgba(37,99,235,0.45) 58%,
            transparent 70%,
            rgba(56,189,248,0.40) 78%,
            transparent 100%);
    opacity:1;
    pointer-events:none;
    animation:azraia_tunnel_pulse 18s linear infinite;
}

@keyframes azraia_tunnel_pulse{
    0%{transform:scale(0.95) rotate(0deg);opacity:0.55;}
    25%{transform:scale(1.05) rotate(120deg);opacity:0.9;}
    50%{transform:scale(1.12) rotate(240deg);opacity:0.75;}
    75%{transform:scale(1.18) rotate(360deg);opacity:0.9;}
    100%{transform:scale(1.22) rotate(480deg);opacity:0.3;}
}

.emdr-point{
    width:22px;height:22px;border-radius:50%;
    background:radial-gradient(circle at 30% 30%,#fff7c2,#facc15 55%,#f97316 100%);
    box-shadow:0 0 20px rgba(250,204,21,.9),0 0 40px rgba(250,204,21,.45);
    position:absolute;
    opacity:0;
    transition:opacity .5s ease;
}
.emdr-point.active{opacity:1}

.breath-halo{
    width:180px;height:180px;border-radius:50%;
    border:2px solid rgba(191,219,254,.6);
    position:absolute;
    opacity:0;
    transition:opacity .5s ease;
}
.breath-halo.active{opacity:1}

.main-text{
    font-size:2.2rem;
    color:#fef9c3;
    text-align:center;
    font-weight:500;
    line-height:1.4;
    opacity:0;
    transition:all .5s ease;
    max-width:88%;
    text-shadow:0 0 18px rgba(15,23,42,.8);
}
.main-text.active{opacity:1}

.intro-text{
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    max-width:80%;
    text-align:center;
    font-size:1rem;
    color:#e5e7eb;
    opacity:0;
    transition:opacity .6s ease;
}
.intro-text.active{opacity:1}

.finger-instruction{
    position:absolute;
    bottom:22px;
    left:50%;
    transform:translateX(-50%);
    font-size:.98rem;
    color:#cbd5f5;
    text-align:center;
    opacity:0;
    transition:opacity .5s ease;
    max-width:80%;
}
.finger-instruction.active{opacity:1}

.progress-container{
    width:100%;max-width:700px;margin-top:24px;
}
.progress-bar{
    width:100%;height:5px;border-radius:999px;
    background:rgba(248,250,252,.12);overflow:hidden;
}
.progress-fill{
    height:100%;width:0%;border-radius:999px;
    background:linear-gradient(90deg,#22c55e,#eab308,#f97316);
    box-shadow:0 0 10px rgba(250,204,21,.5);
    transition:width .3s ease;
}
.timer{
    text-align:center;margin-top:6px;font-size:.86rem;color:#cbd5f5;
}

.audio-section{
    margin-top:18px;
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    justify-content:center;
}
.audio-group{display:flex;flex-direction:column;gap:4px}
.audio-label{font-size:.78rem;color:#cbd5f5}
.volume-slider{
    width:150px;height:6px;border-radius:5px;
    background:rgba(248,250,252,.2);
    outline:none;-webkit-appearance:none;
}
.volume-slider::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:12px;height:12px;border-radius:50%;
    background:linear-gradient(135deg,#6366f1,#0ea5e9);
}

.controls {
    margin-top: 18px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

button {
    background: rgba(255, 255, 255, 0.03); /* Fond transparent */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Bordure fine */
    backdrop-filter: blur(4px); /* Effet verre */
    cursor: pointer;
    border-radius: 8px; /* Plus carré/tech */
    font-size: .75rem;
    font-weight: 600;
    padding: 10px 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    color: #94a3b8;
}

button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: transparent;
    box-shadow: none;
}

/* Démarrer : Vert Néon subtil */
.btn-start {
    border-color: rgba(34, 197, 94, 0.4);
    color: #86efac;
}
.btn-start:hover:not(:disabled) {
    background: rgba(34, 197, 94, 0.1);
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.2);
    color: #fff;
    transform: translateY(-1px);
}

/* Pause : Bleu Néon subtil */
.btn-pause {
    border-color: rgba(59, 130, 246, 0.4);
    color: #93c5fd;
}
.btn-pause:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.1);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
    color: #fff;
}

/* Reset : Gris discret */
.btn-reset {
    border-color: rgba(148, 163, 184, 0.3);
}
.btn-reset:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

/* Urgence : Rouge Néon subtil */
.btn-emergency {
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}
.btn-emergency:hover {
    background: rgba(239, 68, 68, 0.1);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
    color: #fff;
}

.footer{
    padding:10px 10px 12px;
    background:linear-gradient(135deg,#111827 0%,#020617 100%);
    color:#e5e7eb;
    text-align:center;
    border-top:1px solid rgba(148,163,184,.4);
    box-shadow:0 -6px 22px rgba(15,23,42,.85);
    font-size:.8rem;
    margin-top:0;
}
.footer a{
    display:inline-block;
    margin-top:4px;
    padding:5px 14px;
    border-radius:999px;
    background:rgba(15,23,42,.9);
    color:#e5e7eb;
    text-decoration:none;
    font-size:.74rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    border:1px solid rgba(148,163,184,.5);
}

@media(max-width:600px){
    .protocol-zone{padding:20px 16px 24px;min-height:440px}
    .main-text{font-size:1.6rem}
    .intro-text,.finger-instruction{font-size:.9rem}
}