/* ===== STYLES SPÉCIFIQUES AUX PAGES INTERNES ===== */

/* Header pour les pages internes */
.hero--small {
    min-height: 40vh;
    padding-top: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, #e0c3fc, #8ec5fc);
    position: relative;
    overflow: hidden;
}
.hero--small::before {
    content: '';
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
                      radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px);
    background-size: 550px 550px, 350px 350px;
    animation: twinkle-pages 10s linear infinite;
    opacity: 0.5;
}
@keyframes twinkle-pages { from { background-position: 0 0, 40px 60px; } to { background-position: -550px 0, -310px 60px; } }

.hero--small .hero__title { color: var(--gray-900); font-size: 2.5rem; z-index: 1; }
.hero--small .hero__subtitle { color: var(--gray-700); z-index: 1; max-width: 600px; padding: 0 1rem; }

/* Styles pour about.html */
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-2xl); }
.about-item { text-align: center; }
.about-item__verb {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-lg);
}
.about-item h3 { font-size: 1.25rem; color: var(--gray-900); margin-bottom: var(--spacing-sm); }
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-xl); }
.value-card { background: var(--white); padding: var(--spacing-xl); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); text-align: center; border-top: 4px solid transparent; transition: all var(--transition-normal); }
.value-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-top-color: var(--primary-color); }
.value-icon { font-size: 2.5rem; margin-bottom: var(--spacing-md); color: var(--primary-color); }
.value-card h4 { color: var(--gray-900); font-size: 1.125rem; font-weight: 600; margin-bottom: var(--spacing-sm); }

/* Styles pour histoire.html */
.timeline { position: relative; max-width: 800px; margin: var(--spacing-2xl) auto; }
.timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--primary-color), var(--accent-color)); transform: translateX(-50%); border-radius: 2px; }
.timeline__item { position: relative; margin-bottom: var(--spacing-3xl); display: flex; align-items: center; }
.timeline__item:nth-child(odd) { flex-direction: row; }
.timeline__item:nth-child(even) { flex-direction: row-reverse; }
.timeline__marker { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); width: 24px; height: 24px; background: var(--white); border: 4px solid var(--primary-color); border-radius: 50%; z-index: 2; box-shadow: var(--shadow-md); }
.timeline__content { width: 45%; padding: var(--spacing-xl); background: var(--white); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); transition: all var(--transition-normal); border: 1px solid var(--gray-200); position: relative; }
.timeline__content:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: var(--primary-color); }
.timeline__title { font-size: 1.25rem; font-weight: 600; color: var(--primary-color); margin-bottom: var(--spacing-md); }

/* Styles pour evenements.html */
.events-list { display: flex; flex-direction: column; gap: var(--spacing-2xl); max-width: 800px; margin: 0 auto; }
.event-card { display: flex; gap: var(--spacing-xl); background: var(--white); padding: var(--spacing-xl); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); border-left: 5px solid var(--primary-color); }
.event-card__date { text-align: center; color: var(--primary-color); flex-shrink: 0; }
.event-card__day { font-size: 2.5rem; font-weight: 700; display: block; line-height: 1; }
.event-card__month { font-size: 1rem; font-weight: 600; display: block; }
.event-card__title { font-size: 1.5rem; font-weight: 600; color: var(--gray-900); margin-bottom: 0.5rem; }
.event-card__location { font-style: italic; color: var(--gray-600); margin-bottom: var(--spacing-md); }

/* Styles pour therapies.html */
.therapy-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-2xl); max-width: 800px; margin: 0 auto; }
.therapy-card { background: var(--white); padding: var(--spacing-2xl); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); transition: var(--transition-normal); border-left: 5px solid var(--accent-color); }
.therapy-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.therapy-card__title { font-size: 1.5rem; color: var(--primary-color); margin-bottom: var(--spacing-md); }

/* Responsive pour pages internes */
@media (max-width: 768px) {
    .timeline::before { left: 12px; }
    .timeline__item { flex-direction: row !important; }
    .timeline__marker { left: 12px; }
    .timeline__content { width: calc(100% - 60px); margin-left: 48px; }
    .event-card { flex-direction: column; align-items: flex-start; }
}