/* ================================
   PALETTE TELLORE
   ================================ */
:root {
    --accent-primary: #7C9A8E;
    --accent-primary-light: #9DB5A9;
    --accent-primary-dark: #5C7A6E;
    --accent-secondary: #8BA4B4;
    --blob-1: #E8D5C4;
    --blob-2: #D4E5D7;
    --blob-3: #F5E6D3;
    --blob-4: #C9DBE5;
    --blob-1-opacity: 0.7;
    --blob-2-opacity: 0.6;
    --blob-3-opacity: 0.5;
    --blob-4-opacity: 0.5;
    --bg-color: #FDFBF7;
    /* Note : Le chemin remonte d'un niveau (../) car le fichier est dans /css/ */
    --bg-pattern: url('../patterns/pattern.png');
    --bg-pattern-opacity: 0.15;
    --text-dark: #2D3436;
    --text-body: #4A5568;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body { 
    font-family: 'Inter', sans-serif; 
    background-color: var(--bg-color);
    position: relative;
    color: var(--text-body);
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--bg-pattern);
    background-repeat: repeat;
    opacity: var(--bg-pattern-opacity);
    pointer-events: none;
    z-index: 0;
}

.font-script { font-family: 'Clicker Script', cursive; }
h1, h2, h3 { font-family: 'Merriweather', serif; }

.hero-gradient {
    background: linear-gradient(135deg, var(--bg-color) 0%, #F0EBE3 100%);
}

/* --- BOUTONS & UTILITAIRES --- */
.btn-primary {
    background-color: var(--accent-primary);
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.btn-primary:hover {
    background-color: var(--accent-primary-dark);
}
.text-accent { color: var(--accent-primary); }
.bg-accent-light { background-color: var(--accent-primary-light); }

/* --- BLOBS ANIMÉS --- */
@keyframes float1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -30px) scale(1.05); }
}
@keyframes float2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-25px, 20px) scale(1.03); }
}
@keyframes float3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(15px, 25px) scale(1.07); }
}
@keyframes float4 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-20px, -15px) scale(1.04); }
}

.blob {
    position: absolute;
    border-radius: 50%;
    z-index: 0;
}
.blob-1 {
    width: clamp(250px, 30vw, 400px);
    height: clamp(250px, 30vw, 400px);
    background: var(--blob-1);
    opacity: var(--blob-1-opacity);
    top: -100px;
    right: -50px;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: float1 8s ease-in-out infinite;
}
.blob-2 {
    width: clamp(200px, 25vw, 300px);
    height: clamp(200px, 25vw, 300px);
    background: var(--blob-2);
    opacity: var(--blob-2-opacity);
    bottom: -50px;
    left: -80px;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: float2 10s ease-in-out infinite;
}
.blob-3 {
    width: clamp(150px, 18vw, 200px);
    height: clamp(150px, 18vw, 200px);
    background: var(--blob-3);
    opacity: var(--blob-3-opacity);
    top: 50%;
    left: 10%;
    border-radius: 70% 30% 50% 50% / 30% 50% 50% 70%;
    animation: float3 7s ease-in-out infinite;
}
.blob-4 {
    width: clamp(100px, 12vw, 150px);
    height: clamp(100px, 12vw, 150px);
    background: var(--blob-4);
    opacity: var(--blob-4-opacity);
    bottom: 20%;
    right: 15%;
    border-radius: 50% 50% 30% 70% / 50% 70% 30% 50%;
    animation: float4 9s ease-in-out infinite;
}

/* --- ONDE SONORE (MARC) --- */
.soundwave-blob {
    position: relative;
    width: clamp(200px, 40vw, 300px);
    height: clamp(200px, 40vw, 300px);
}
.soundwave-blob .blob-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--blob-2);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: blobMorph 8s ease-in-out infinite;
}
@keyframes blobMorph {
    0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50% { border-radius: 40% 60% 70% 30% / 40% 70% 30% 60%; }
}
.wave-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 35%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1px, 0.5vw, 3px);
}
.bar {
    width: clamp(2px, 0.6vw, 4px);
    background: var(--text-dark);
    opacity: 0.7;
    border-radius: 2px;
}
/* Animation délais barres */
.bar:nth-child(1) { animation: speak1 6s ease-in-out infinite; }
.bar:nth-child(2) { animation: speak2 6s ease-in-out infinite 0.08s; }
.bar:nth-child(3) { animation: speak3 6s ease-in-out infinite 0.16s; }
.bar:nth-child(4) { animation: speak4 6s ease-in-out infinite 0.24s; }
.bar:nth-child(5) { animation: speak5 6s ease-in-out infinite 0.32s; }
.bar:nth-child(6) { animation: speak6 6s ease-in-out infinite 0.4s; }
.bar:nth-child(7) { animation: speak7 6s ease-in-out infinite 0.48s; }
.bar:nth-child(8) { animation: speak8 6s ease-in-out infinite 0.56s; }
.bar:nth-child(9) { animation: speak9 6s ease-in-out infinite 0.64s; }
.bar:nth-child(10) { animation: speak10 6s ease-in-out infinite 0.72s; }
.bar:nth-child(11) { animation: speak9 6s ease-in-out infinite 0.64s; }
.bar:nth-child(12) { animation: speak8 6s ease-in-out infinite 0.56s; }
.bar:nth-child(13) { animation: speak7 6s ease-in-out infinite 0.48s; }
.bar:nth-child(14) { animation: speak6 6s ease-in-out infinite 0.4s; }
.bar:nth-child(15) { animation: speak5 6s ease-in-out infinite 0.32s; }
.bar:nth-child(16) { animation: speak4 6s ease-in-out infinite 0.24s; }
.bar:nth-child(17) { animation: speak3 6s ease-in-out infinite 0.16s; }
.bar:nth-child(18) { animation: speak2 6s ease-in-out infinite 0.08s; }
.bar:nth-child(19) { animation: speak1 6s ease-in-out infinite; }
.bar:nth-child(20) { animation: speak2 6s ease-in-out infinite 0.08s; }

/* Définition compacte des Keyframes speak1 à speak10 */
@keyframes speak1 { 0%, 8%, 15%, 20%, 30%, 55%, 70%, 100% { height: 4px; } 10% { height: 25px; } 12% { height: 8px; } 22% { height: 45px; } 25% { height: 15px; } 28% { height: 35px; } 58% { height: 20px; } 62% { height: 50px; } 66% { height: 12px; } }
@keyframes speak2 { 0%, 6%, 15%, 19%, 31%, 56%, 71%, 100% { height: 4px; } 9% { height: 35px; } 12% { height: 10px; } 22% { height: 55px; } 26% { height: 20px; } 29% { height: 40px; } 59% { height: 30px; } 63% { height: 60px; } 67% { height: 15px; } }
@keyframes speak3 { 0%, 5%, 14%, 18%, 30%, 55%, 70%, 100% { height: 4px; } 8% { height: 40px; } 11% { height: 12px; } 21% { height: 65px; } 25% { height: 25px; } 28% { height: 48px; } 58% { height: 35px; } 62% { height: 70px; } 66% { height: 18px; } }
@keyframes speak4 { 0%, 5%, 14%, 18%, 30%, 55%, 70%, 100% { height: 4px; } 8% { height: 50px; } 11% { height: 15px; } 21% { height: 72px; } 25% { height: 28px; } 28% { height: 55px; } 58% { height: 42px; } 62% { height: 78px; } 66% { height: 22px; } }
@keyframes speak5 { 0%, 5%, 14%, 18%, 30%, 55%, 70%, 100% { height: 4px; } 8% { height: 58px; } 11% { height: 18px; } 21% { height: 80px; } 25% { height: 32px; } 28% { height: 62px; } 58% { height: 48px; } 62% { height: 85px; } 66% { height: 25px; } }
@keyframes speak6 { 0%, 5%, 14%, 18%, 30%, 55%, 70%, 100% { height: 4px; } 8% { height: 52px; } 11% { height: 16px; } 21% { height: 75px; } 25% { height: 30px; } 28% { height: 58px; } 58% { height: 45px; } 62% { height: 80px; } 66% { height: 23px; } }
@keyframes speak7 { 0%, 5%, 14%, 18%, 30%, 55%, 70%, 100% { height: 4px; } 8% { height: 45px; } 11% { height: 14px; } 21% { height: 68px; } 25% { height: 27px; } 28% { height: 52px; } 58% { height: 40px; } 62% { height: 72px; } 66% { height: 20px; } }
@keyframes speak8 { 0%, 5%, 14%, 18%, 30%, 55%, 70%, 100% { height: 4px; } 8% { height: 38px; } 11% { height: 12px; } 21% { height: 60px; } 25% { height: 24px; } 28% { height: 45px; } 58% { height: 35px; } 62% { height: 65px; } 66% { height: 17px; } }
@keyframes speak9 { 0%, 5%, 14%, 18%, 30%, 55%, 70%, 100% { height: 4px; } 8% { height: 30px; } 11% { height: 10px; } 21% { height: 52px; } 25% { height: 20px; } 28% { height: 38px; } 58% { height: 28px; } 62% { height: 55px; } 66% { height: 14px; } }
@keyframes speak10 { 0%, 5%, 14%, 18%, 30%, 55%, 70%, 100% { height: 4px; } 8% { height: 22px; } 11% { height: 8px; } 21% { height: 42px; } 25% { height: 16px; } 28% { height: 30px; } 58% { height: 22px; } 62% { height: 45px; } 66% { height: 12px; } }

/* ================================
   CONTENEUR PAGE FIXE
   Cohérent avec index.html (max-w-7xl = 1280px)
   ================================ */
.page-content-container {
    width: 100% !important;
    max-width: 1280px !important; /* max-w-7xl de Tailwind */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
}

/* Responsive padding - cohérent avec index.html */
@media (min-width: 640px) {
    .page-content-container {
        padding-left: 1.5rem !important; /* sm:px-6 */
        padding-right: 1.5rem !important;
    }
}

@media (min-width: 1024px) {
    .page-content-container {
        padding-left: 2rem !important; /* lg:px-8 */
        padding-right: 2rem !important;
    }
}

/* ========================================================================
   AUDIO HELPER COMPONENT - VERSION 3 (FIX DESKTOP)
   À AJOUTER À style.css (ou dans la balise <style> de inscription.html)
   ======================================================================== */

/* --- WRAPPER POUR H3 + AUDIO HELPER --- */
.step-header {
    display: block !important;
    width: 100% !important;
    margin-bottom: 5px !important;
}

.step-header h3 {
    display: block !important;  /* Force le h3 en block pour que l'audio passe en dessous */
    width: fit-content !important;
}

/* --- AUDIO HELPER (Lecteur contextuel) --- */
.audio-helper {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: linear-gradient(135deg, rgba(212, 229, 215, 0.4) 0%, rgba(212, 229, 215, 0.25) 100%) !important;
    border: 1px solid rgba(124, 154, 142, 0.2) !important;
    border-radius: 50px !important;
    padding: 10px 18px 10px 14px !important;
    margin-top: 12px !important;
    margin-bottom: 20px !important;
    width: fit-content !important;
    max-width: 450px !important; /* Largeur max pour desktop */
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    clear: both !important; /* Force le passage à la ligne après le h3 inline-block */
    float: none !important;
}

.audio-helper:hover {
    background: linear-gradient(135deg, rgba(212, 229, 215, 0.55) 0%, rgba(212, 229, 215, 0.35) 100%) !important;
    border-color: rgba(124, 154, 142, 0.35) !important;
    box-shadow: 0 2px 12px rgba(124, 154, 142, 0.15) !important;
}

/* Bouton Play/Pause - SPÉCIFICITÉ MAXIMALE pour éviter les conflits */
.audio-helper .audio-helper-btn,
.audio-helper button.audio-helper-btn,
button.audio-helper-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: #7C9A8E !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(124, 154, 142, 0.3) !important;
    flex: 0 0 36px !important;
    box-sizing: border-box !important;
    font-size: 0 !important;
    line-height: 1 !important;
}

.audio-helper .audio-helper-btn:hover,
.audio-helper button.audio-helper-btn:hover,
button.audio-helper-btn:hover {
    background: #5C7A6E !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(124, 154, 142, 0.4) !important;
}

.audio-helper .audio-helper-btn:active,
button.audio-helper-btn:active {
    transform: scale(0.98) !important;
}

.audio-helper-btn svg {
    width: 14px !important;
    height: 14px !important;
    fill: white !important;
    flex-shrink: 0 !important;
}

.audio-helper-btn .icon-pause {
    display: none !important;
}

.audio-helper-btn.playing .icon-play {
    display: none !important;
}

.audio-helper-btn.playing .icon-pause {
    display: block !important;
}

/* Contenu central (texte + barre) */
.audio-helper-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.audio-helper-text {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #2D3436 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Barre de progression */
.audio-helper-progress-container {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.audio-helper-progress {
    flex: 1 !important;
    height: 4px !important;
    background: rgba(124, 154, 142, 0.2) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    position: relative !important;
    min-width: 80px !important;
}

.audio-helper-progress-bar {
    height: 100% !important;
    background: #7C9A8E !important;
    border-radius: 2px !important;
    width: 0% !important;
    transition: width 0.1s linear !important;
}

.audio-helper-progress:hover .audio-helper-progress-bar {
    background: #5C7A6E !important;
}

.audio-helper-time {
    font-size: 11px !important;
    color: #5C7A6E !important;
    font-weight: 500 !important;
    min-width: 32px !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* --- VARIANTE CENTRÉE (pour index.html) --- */
.audio-helper-centered {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 24px !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}
/* Responsive Mobile */
@media (max-width: 500px) {
    .audio-helper {
        border-radius: 16px !important;
        padding: 10px 14px !important;
        max-width: 100% !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .audio-helper-text {
        font-size: 12px !important;
        white-space: normal !important;
        line-height: 1.4 !important;
    }

    .audio-helper .audio-helper-btn,
    .audio-helper button.audio-helper-btn,
    button.audio-helper-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        flex: 0 0 34px !important;
    }

    .audio-helper-btn svg {
        width: 12px !important;
        height: 12px !important;
    }

    .audio-helper-progress {
        min-width: 60px !important;
    }
}