/* ================================
   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;
    }
}