Symfony Profiler

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyAudio x SurdiFrance - Partenariat pour l'inclusion auditive</title>
<link rel="stylesheet" href="/assets/lib/bootstrap-5.0.2-dist/css/bootstrap.css">
<link rel="stylesheet" href="/assets/css/footer.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-green: #03866A;
--primary-dark: #025745;
--primary-light: #04a882;
--secondary-blue: #0066CC;
--accent-orange: #FF6B35;
--text-dark: #2C3E50;
--text-light: #5A6C7D;
--bg-light: #F8FAFB;
--bg-gray: #F5F7FA;
--white: #FFFFFF;
--card-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
--hover-shadow: 0 8px 20px rgba(3, 134, 106, 0.15);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: var(--text-dark);
background: var(--white);
}
/* Header Navigation */
.header-nav {
background: var(--white);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo-area {
height: 40px;
}
.logo-area img {
width: 80px;
}
.nav-links {
display: flex;
gap: 30px;
align-items: center;
}
.nav-links a {
color: var(--text-dark);
text-decoration: none;
transition: color 0.3s ease;
font-weight: 500;
}
.nav-links a:hover {
color: var(--primary-green);
}
.btn-nav {
background: var(--primary-green);
color: white !important;
padding: 10px 25px;
border-radius: 25px;
text-decoration: none;
transition: all 0.3s ease;
}
.btn-nav:hover {
background: var(--primary-dark);
transform: translateY(-2px);
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, #03866A 0%, #04a882 100%);
padding: 150px 0 100px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 500px;
height: 500px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.hero-content {
text-align: center;
color: white;
position: relative;
z-index: 1;
}
.partnership-badge {
display: inline-flex;
align-items: center;
gap: 15px;
background: rgba(255, 255, 255, 0.15);
padding: 15px 30px;
border-radius: 30px;
margin-bottom: 20px;
backdrop-filter: blur(15px);
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.partnership-logo {
height: 55px;
width: auto;
transition: transform 0.3s ease;
}
.partnership-badge:hover .partnership-logo {
transform: scale(1.05);
}
.partnership-connector {
color: white;
font-size: 1.4em;
font-weight: 300;
opacity: 0.9;
}
.hero h1 {
font-size: 3em;
margin-bottom: 20px;
font-weight: 700;
}
.hero-subtitle {
font-size: 1.2em;
margin-bottom: 40px;
opacity: 0.95;
max-width: 700px;
margin-left: auto;
margin-right: auto;
line-height: 1.8;
}
.cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.btn {
padding: 15px 35px;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
display: inline-block;
}
.btn-primary {
background: white;
color: var(--primary-green);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border: none;
}
.btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
}
.btn-secondary {
background: transparent;
color: white;
border: 2px solid white;
}
.btn-secondary:hover {
background: white;
color: var(--primary-green);
}
/* Stats Section */
.stats-section {
background: var(--bg-gray);
padding: 60px 0;
margin-top: -50px;
position: relative;
z-index: 10;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
max-width: 900px;
margin: 0 auto;
}
.stat-card {
background: white;
padding: 30px;
text-align: center;
border-radius: 15px;
box-shadow: var(--card-shadow);
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: var(--hover-shadow);
}
.stat-number {
font-size: 2.5em;
font-weight: 700;
color: var(--primary-green);
margin-bottom: 10px;
}
.stat-label {
color: var(--text-light);
font-size: 0.95em;
}
/* Magazine Section */
.magazine-section {
background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-dark) 100%);
padding: 80px 0;
color: white;
position: relative;
overflow: hidden;
}
.magazine-section::before {
content: '';
position: absolute;
top: -20%;
right: -10%;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.05);
border-radius: 50%;
z-index: 1;
}
.magazine-content {
display: grid;
grid-template-columns: 1fr 400px;
gap: 60px;
align-items: center;
position: relative;
z-index: 2;
}
.magazine-text h2 {
font-size: 2.5em;
margin-bottom: 20px;
font-weight: 700;
}
.magazine-text h3 {
font-size: 1.3em;
margin-bottom: 30px;
opacity: 0.9;
color: #E8F5F0;
}
.magazine-text p {
font-size: 1.1em;
line-height: 1.7;
margin-bottom: 20px;
opacity: 0.95;
}
.magazine-features {
list-style: none;
margin: 30px 0;
}
.magazine-features li {
display: flex;
align-items: center;
margin-bottom: 15px;
font-size: 1.05em;
}
.magazine-features li::before {
content: '✓';
background: white;
color: var(--primary-green);
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
font-weight: 700;
font-size: 0.9em;
}
.magazine-cta {
background: white;
color: var(--primary-green);
padding: 15px 40px;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
font-size: 1.1em;
display: inline-block;
transition: all 0.3s ease;
margin-top: 20px;
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}
.magazine-cta:hover {
background: var(--bg-light);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
color: var(--primary-dark);
text-decoration: none;
}
.magazine-visual {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.magazine-stats {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(15px);
border-radius: 20px;
padding: 40px 30px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 350px;
}
.magazine-big-number {
font-size: 4em;
font-weight: 900;
color: white;
line-height: 1;
margin-bottom: 10px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.magazine-big-label {
font-size: 1.2em;
color: white;
margin-bottom: 30px;
opacity: 0.95;
}
.magazine-mini-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 25px;
}
.mini-stat {
text-align: center;
}
.mini-stat-number {
font-size: 1.8em;
font-weight: 700;
color: white;
line-height: 1;
}
.mini-stat-label {
font-size: 0.9em;
color: rgba(255, 255, 255, 0.8);
margin-top: 5px;
}
.magazine-topics {
margin-top: 25px;
padding-top: 25px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.topics-title {
font-size: 1em;
color: white;
margin-bottom: 15px;
opacity: 0.9;
}
.topics-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.topic-tag {
background: rgba(255, 255, 255, 0.2);
color: white;
padding: 6px 12px;
border-radius: 15px;
font-size: 0.85em;
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Responsive pour la section magazine */
@media (max-width: 992px) {
.magazine-content {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.magazine-text h2 {
font-size: 2em;
}
.magazine-stats {
max-width: 300px;
}
.magazine-big-number {
font-size: 3.5em;
}
}
@media (max-width: 768px) {
.magazine-section {
padding: 50px 0;
}
.magazine-content {
gap: 30px;
}
.magazine-text {
text-align: left;
}
.magazine-text h2 {
font-size: 1.8em;
text-align: center;
margin-bottom: 15px;
}
.magazine-text h3 {
font-size: 1.1em;
text-align: center;
margin-bottom: 20px;
}
.magazine-text p {
font-size: 1em;
line-height: 1.6;
margin-bottom: 15px;
}
.magazine-features {
margin: 20px 0;
}
.magazine-features li {
font-size: 0.95em;
margin-bottom: 12px;
}
.magazine-features li::before {
width: 20px;
height: 20px;
margin-right: 12px;
font-size: 0.8em;
}
.magazine-cta {
font-size: 1em;
padding: 12px 30px;
display: block;
text-align: center;
max-width: 250px;
margin: 20px auto 0;
}
.magazine-stats {
padding: 25px 20px;
max-width: 280px;
margin: 0 auto;
}
.magazine-big-number {
font-size: 2.8em;
}
.magazine-big-label {
font-size: 1em;
margin-bottom: 20px;
}
.magazine-mini-stats {
gap: 15px;
margin-top: 20px;
}
.mini-stat-number {
font-size: 1.4em;
}
.mini-stat-label {
font-size: 0.85em;
}
.magazine-topics {
margin-top: 20px;
padding-top: 20px;
}
.topics-title {
font-size: 0.9em;
margin-bottom: 12px;
}
.topic-tag {
font-size: 0.8em;
padding: 5px 10px;
}
}
@media (max-width: 480px) {
.magazine-section {
padding: 40px 0;
}
.container {
padding: 0 15px;
}
.magazine-content {
gap: 25px;
}
.magazine-text h2 {
font-size: 1.6em;
margin-bottom: 12px;
}
.magazine-text h3 {
font-size: 1em;
margin-bottom: 18px;
}
.magazine-text p {
font-size: 0.95em;
line-height: 1.5;
margin-bottom: 12px;
}
.magazine-features {
margin: 18px 0;
}
.magazine-features li {
font-size: 0.9em;
margin-bottom: 10px;
align-items: flex-start;
}
.magazine-features li::before {
width: 18px;
height: 18px;
margin-right: 10px;
margin-top: 2px;
font-size: 0.7em;
flex-shrink: 0;
}
.magazine-cta {
font-size: 0.95em;
padding: 12px 25px;
max-width: 220px;
margin: 18px auto 0;
}
.magazine-stats {
padding: 20px 15px;
max-width: 260px;
}
.magazine-big-number {
font-size: 2.2em;
}
.magazine-big-label {
font-size: 0.9em;
margin-bottom: 18px;
}
.magazine-mini-stats {
gap: 12px;
margin-top: 18px;
}
.mini-stat-number {
font-size: 1.2em;
}
.mini-stat-label {
font-size: 0.8em;
}
.magazine-topics {
margin-top: 18px;
padding-top: 18px;
}
.topics-title {
font-size: 0.85em;
margin-bottom: 10px;
}
.topics-tags {
gap: 6px;
}
.topic-tag {
font-size: 0.75em;
padding: 4px 8px;
}
}
/* Introduction Section */
.intro {
padding: 80px 0;
background: white;
}
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-header h2 {
font-size: 2.5em;
margin-bottom: 20px;
color: var(--text-dark);
position: relative;
display: inline-block;
}
.section-header h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: var(--primary-green);
border-radius: 2px;
}
.section-header p {
color: var(--text-light);
font-size: 1.1em;
max-width: 600px;
margin: 0 auto;
}
.intro-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.intro-text {
font-size: 1.05em;
line-height: 1.8;
color: var(--text-dark);
}
.intro-text p {
margin-bottom: 20px;
}
.intro-features {
display: grid;
gap: 20px;
}
.feature-item {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 20px;
background: var(--bg-gray);
border-radius: 12px;
transition: all 0.3s ease;
}
.feature-item:hover {
background: white;
box-shadow: var(--card-shadow);
transform: translateX(5px);
}
.feature-icon {
width: 50px;
height: 50px;
background: var(--primary-green);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
flex-shrink: 0;
}
.feature-content h4 {
margin-bottom: 5px;
color: var(--text-dark);
}
.feature-content p {
color: var(--text-light);
font-size: 0.95em;
margin: 0;
}
/* Values Grid */
.values {
padding: 80px 0;
background: var(--bg-light);
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 50px;
}
.value-card {
background: white;
padding: 35px 25px;
border-radius: 15px;
text-align: center;
box-shadow: var(--card-shadow);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.value-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--primary-green);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.value-card:hover::before {
transform: scaleX(1);
}
.value-card:hover {
transform: translateY(-5px);
box-shadow: var(--hover-shadow);
}
.value-icon {
width: 70px;
height: 70px;
margin: 0 auto 20px;
background: linear-gradient(135deg, var(--primary-green), var(--primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
color: white;
}
.value-card h3 {
margin-bottom: 15px;
color: var(--text-dark);
}
.value-card p {
color: var(--text-light);
line-height: 1.6;
}
/* Map Section */
.map-section {
padding: 80px 0;
background: white;
}
.map-container {
background: var(--bg-gray);
border-radius: 20px;
padding: 40px;
margin-top: 50px;
display: grid;
grid-template-columns: 400px 1fr;
gap: 40px;
align-items: start;
}
.map-wrapper {
width: 100%;
}
.associations-sidebar {
background: white;
border-radius: 15px;
padding: 25px;
box-shadow: var(--card-shadow);
max-height: 500px;
overflow-y: auto;
scroll-behavior: smooth;
}
/* Style de la scrollbar pour webkit browsers */
.associations-sidebar::-webkit-scrollbar {
width: 6px;
}
.associations-sidebar::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.associations-sidebar::-webkit-scrollbar-thumb {
background: var(--primary-green);
border-radius: 3px;
}
.associations-sidebar::-webkit-scrollbar-thumb:hover {
background: var(--primary-dark);
}
.associations-sidebar h3 {
color: var(--text-dark);
font-size: 1.3em;
margin-bottom: 10px;
border-bottom: 2px solid var(--primary-green);
padding-bottom: 10px;
}
.sidebar-subtitle {
color: var(--text-light);
font-size: 0.9em;
margin-bottom: 20px;
font-style: italic;
}
/* Responsive pour écrans plus petits */
@media (max-width: 992px) {
.map-container {
grid-template-columns: 1fr;
gap: 20px;
padding: 20px;
}
.associations-sidebar {
max-height: 350px;
order: 1;
padding: 20px;
}
.map-wrapper {
order: 2;
}
.map-wrapper #interactive-map {
height: 300px;
}
.associations-sidebar h3 {
font-size: 1.1em;
margin-bottom: 8px;
}
.sidebar-subtitle {
font-size: 0.8em;
margin-bottom: 15px;
}
}
@media (max-width: 768px) {
.map-container {
padding: 15px;
gap: 15px;
}
.associations-sidebar {
max-height: 300px;
padding: 15px;
}
.association-card {
padding: 10px;
}
.association-name {
font-size: 0.95em;
}
.department-badge {
font-size: 0.75em;
padding: 2px 6px;
}
.contact-item {
font-size: 0.85em;
}
.accessibility-badge {
font-size: 0.7em;
padding: 2px 6px;
}
.map-wrapper #interactive-map {
height: 250px;
}
}
@media (max-width: 480px) {
.map-container {
padding: 10px;
gap: 10px;
}
.associations-sidebar {
max-height: 300px;
padding: 12px;
}
.associations-sidebar h3 {
font-size: 1em;
}
.sidebar-subtitle {
font-size: 0.75em;
margin-bottom: 10px;
}
.association-card {
padding: 8px;
margin-bottom: 8px;
}
.association-header {
margin-bottom: 6px;
}
.association-name {
font-size: 0.9em;
}
.association-description {
display: none; /* Masquer la description sur très petits écrans */
}
.map-wrapper #interactive-map {
height: 200px;
}
}
.map-placeholder {
height: 500px;
background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.map-content {
text-align: center;
z-index: 1;
}
.map-content h3 {
color: var(--text-dark);
margin-bottom: 20px;
font-size: 1.5em;
}
.map-content p {
color: var(--text-light);
margin-bottom: 30px;
}
/* Audio Test Section */
.audio-test-section {
padding: 80px 0;
background: var(--bg-light);
position: relative;
overflow: hidden;
}
.audio-test-section::before {
content: '';
position: absolute;
top: -30%;
left: -20%;
width: 500px;
height: 500px;
background: linear-gradient(135deg, rgba(3, 134, 106, 0.05) 0%, rgba(4, 168, 130, 0.08) 100%);
border-radius: 50%;
z-index: 1;
}
.audio-test-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 2;
}
.test-text h2 {
font-size: 2.5em;
color: var(--text-dark);
margin-bottom: 20px;
font-weight: 700;
}
.test-text h3 {
font-size: 1.3em;
color: var(--primary-green);
margin-bottom: 25px;
font-weight: 600;
}
.test-text p {
font-size: 1.1em;
line-height: 1.7;
color: var(--text-light);
margin-bottom: 20px;
}
.test-features {
list-style: none;
margin: 30px 0;
}
.test-features li {
display: flex;
align-items: center;
margin-bottom: 15px;
font-size: 1.05em;
color: var(--text-dark);
}
.test-features li::before {
content: '🎧';
margin-right: 15px;
font-size: 1.2em;
}
.test-cta {
background: var(--primary-green);
color: white;
padding: 18px 45px;
border-radius: 35px;
text-decoration: none;
font-weight: 600;
font-size: 1.2em;
display: inline-block;
transition: all 0.3s ease;
margin-top: 25px;
box-shadow: 0 6px 20px rgba(3, 134, 106, 0.3);
}
.test-cta:hover {
background: var(--primary-dark);
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(3, 134, 106, 0.4);
color: white;
text-decoration: none;
}
.test-visual {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.test-mockup {
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
position: relative;
}
.test-mockup::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
background: var(--primary-green);
border-radius: 20px 20px 0 0;
}
.test-header {
color: white;
text-align: center;
font-size: 1.4em;
font-weight: 600;
position: absolute;
top: 15px;
left: 30px;
right: 30px;
z-index: 3;
}
.test-content {
margin-top: 40px;
text-align: center;
}
.frequency-bars {
display: flex;
justify-content: space-between;
align-items: end;
height: 120px;
margin: 30px 0;
padding: 0 20px;
}
.frequency-bar {
background: linear-gradient(to top, var(--primary-green), var(--primary-light));
border-radius: 4px 4px 0 0;
width: 25px;
animation: pulse 2s ease-in-out infinite alternate;
}
.frequency-bar:nth-child(1) { height: 60%; animation-delay: 0s; }
.frequency-bar:nth-child(2) { height: 80%; animation-delay: 0.2s; }
.frequency-bar:nth-child(3) { height: 100%; animation-delay: 0.4s; }
.frequency-bar:nth-child(4) { height: 70%; animation-delay: 0.6s; }
.frequency-bar:nth-child(5) { height: 90%; animation-delay: 0.8s; }
.frequency-bar:nth-child(6) { height: 65%; animation-delay: 1s; }
.frequency-bar:nth-child(7) { height: 85%; animation-delay: 1.2s; }
@keyframes pulse {
0% { opacity: 0.6; transform: scaleY(0.8); }
100% { opacity: 1; transform: scaleY(1); }
}
.test-info {
color: var(--text-light);
font-size: 0.9em;
margin-top: 20px;
}
/* Responsive pour la section test auditif */
@media (max-width: 992px) {
.audio-test-content {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.test-text h2 {
font-size: 2em;
}
.test-mockup {
max-width: 350px;
}
}
@media (max-width: 768px) {
.audio-test-section {
padding: 60px 0;
}
.test-text h2 {
font-size: 1.8em;
}
.test-text h3 {
font-size: 1.1em;
}
.test-text p {
font-size: 1em;
}
.test-cta {
padding: 15px 35px;
font-size: 1.1em;
}
.test-mockup {
padding: 25px;
max-width: 320px;
}
.frequency-bars {
height: 100px;
}
}
@media (max-width: 480px) {
.test-text h2 {
font-size: 1.6em;
}
.test-cta {
padding: 14px 30px;
font-size: 1em;
}
.test-mockup {
padding: 20px;
max-width: 280px;
}
.test-header {
font-size: 1.2em;
}
}
/* Appointment Section */
.appointment-section {
padding: 80px 0;
background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-dark) 100%);
color: white;
position: relative;
overflow: hidden;
}
.appointment-section::before {
content: '';
position: absolute;
top: -20%;
right: -15%;
width: 400px;
height: 400px;
background: rgba(255, 255, 255, 0.03);
border-radius: 50%;
z-index: 1;
}
.appointment-content {
text-align: center;
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto;
}
.appointment-content h2 {
font-size: 2.5em;
margin-bottom: 20px;
font-weight: 700;
}
.appointment-content h3 {
font-size: 1.3em;
margin-bottom: 30px;
opacity: 0.9;
color: #E8F5F0;
}
.appointment-content p {
font-size: 1.1em;
line-height: 1.7;
margin-bottom: 25px;
opacity: 0.95;
}
.appointment-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin: 40px 0;
}
.appointment-step {
text-align: center;
padding: 20px;
}
.step-icon {
background: rgba(255, 255, 255, 0.15);
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
font-size: 2em;
border: 2px solid rgba(255, 255, 255, 0.2);
}
.step-title {
font-size: 1.1em;
font-weight: 600;
margin-bottom: 10px;
}
.step-description {
font-size: 0.9em;
opacity: 0.9;
line-height: 1.5;
}
.appointment-cta {
background: white;
color: var(--primary-green);
padding: 20px 50px;
border-radius: 35px;
text-decoration: none;
font-weight: 700;
font-size: 1.3em;
display: inline-block;
transition: all 0.3s ease;
margin-top: 30px;
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
cursor: pointer;
border: none;
}
.appointment-cta:hover {
background: var(--bg-light);
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(255, 255, 255, 0.3);
color: var(--primary-dark);
text-decoration: none;
}
.appointment-cta:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.location-info {
margin-top: 20px;
font-size: 0.9em;
opacity: 0.8;
}
.fallback-link {
color: #E8F5F0;
text-decoration: underline;
margin-left: 10px;
}
.fallback-link:hover {
color: white;
text-decoration: none;
}
/* Responsive pour la section RDV */
@media (max-width: 992px) {
.appointment-content h2 {
font-size: 2em;
}
.appointment-steps {
grid-template-columns: 1fr;
gap: 25px;
}
.step-icon {
width: 70px;
height: 70px;
font-size: 1.8em;
}
}
@media (max-width: 768px) {
.appointment-section {
padding: 60px 0;
}
.appointment-content h2 {
font-size: 1.8em;
}
.appointment-content h3 {
font-size: 1.1em;
}
.appointment-content p {
font-size: 1em;
}
.appointment-cta {
padding: 16px 40px;
font-size: 1.1em;
}
.step-icon {
width: 60px;
height: 60px;
font-size: 1.5em;
}
.step-title {
font-size: 1em;
}
.step-description {
font-size: 0.85em;
}
}
@media (max-width: 480px) {
.appointment-content h2 {
font-size: 1.6em;
}
.appointment-cta {
padding: 15px 35px;
font-size: 1em;
}
.appointment-steps {
gap: 20px;
}
}
/* Resources Section */
.resources {
padding: 80px 0;
background: var(--bg-light);
}
.resources-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-top: 50px;
}
.resource-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: var(--card-shadow);
transition: all 0.3s ease;
cursor: pointer;
}
.resource-card:hover {
transform: translateY(-5px);
box-shadow: var(--hover-shadow);
}
.resource-header {
background: var(--primary-green);
padding: 20px 25px;
color: white;
}
.resource-header h3 {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.1em;
}
.resource-content {
padding: 25px;
}
.resource-content p {
color: var(--text-light);
margin-bottom: 15px;
line-height: 1.6;
}
.resource-link {
color: var(--primary-green);
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 5px;
transition: gap 0.3s ease;
}
.resource-link:hover {
gap: 10px;
}
/* CTA Section */
.cta-section {
padding: 100px 0;
background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-light) 100%);
position: relative;
overflow: hidden;
}
.cta-content {
text-align: center;
color: white;
position: relative;
z-index: 1;
}
.cta-content h2 {
font-size: 2.5em;
margin-bottom: 20px;
}
.cta-content p {
font-size: 1.1em;
margin-bottom: 50px;
opacity: 0.95;
}
.cta-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
max-width: 1000px;
margin: 0 auto;
}
.cta-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 35px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 280px;
}
.cta-card:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-5px);
}
.cta-card h3 {
font-size: 1.5em;
margin-bottom: 15px;
}
.cta-card .price {
font-size: 2em;
font-weight: 700;
margin: 20px 0;
}
.cta-card .subtitle {
font-size: 0.9em;
opacity: 0.9;
margin-bottom: 25px;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
.btn-white {
background: white;
color: var(--primary-green);
padding: 12px 30px;
border-radius: 25px;
text-decoration: none;
display: inline-block;
font-weight: 600;
transition: all 0.3s ease;
margin-top: auto;
text-align: center;
}
.btn-white:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
color: var(--primary-green);
}
/* Advantages Section */
.advantages {
padding: 80px 0;
background: white;
}
.advantages-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
margin-top: 50px;
}
.advantage-card {
display: flex;
gap: 25px;
align-items: flex-start;
height: 100%;
}
.advantage-icon {
width: 80px;
height: 80px;
background: var(--bg-gray);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.3s ease;
font-size: 2.5em;
}
.advantage-card:hover .advantage-icon {
background: var(--primary-green);
color: white;
}
.advantage-icon img {
width: 35px;
height: 35px;
}
.advantage-content {
display: flex;
flex-direction: column;
height: 100%;
}
.advantage-content h3 {
margin-bottom: 10px;
color: var(--text-dark);
font-size: 1.2em;
}
.advantage-content p {
color: var(--text-light);
line-height: 1.6;
margin-bottom: 15px;
flex-grow: 1;
}
.advantage-btn {
display: inline-block;
padding: 8px 20px;
background: var(--primary-green);
color: white;
text-decoration: none;
border-radius: 20px;
font-size: 0.9em;
font-weight: 500;
transition: all 0.3s ease;
margin-top: auto;
align-self: flex-start;
}
.advantage-btn:hover {
background: var(--primary-dark);
transform: translateY(-1px);
color: white;
text-decoration: none;
}
.advantage-btn.btn-secondary {
background: var(--secondary-blue);
}
.advantage-btn.btn-secondary:hover {
background: #0052a3;
}
/* Map and associations styles */
.associations-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 20px;
margin-top: 20px;
}
/* Styles spécifiques pour la sidebar */
.associations-sidebar .associations-grid {
grid-template-columns: 1fr;
gap: 15px;
margin-top: 0;
}
/* Cartes plus compactes dans la sidebar */
.associations-sidebar .association-card {
padding: 15px;
border-radius: 8px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}
.association-description {
font-size: 0.9em;
line-height: 1.4;
margin-bottom: 10px;
color: var(--text-light);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.association-card {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: var(--card-shadow);
border-left: 4px solid var(--primary-green);
transition: all 0.3s ease;
}
/* Cartes plus compactes dans la sidebar */
.associations-sidebar .association-card {
padding: 15px;
border-radius: 8px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}
.association-card:hover {
transform: translateY(-2px);
box-shadow: var(--hover-shadow);
}
.association-card.active {
border-left-color: var(--accent-orange);
background: linear-gradient(135deg, #fff9f6 0%, #ffffff 100%);
box-shadow: 0 4px 20px rgba(255, 107, 53, 0.15);
transform: translateY(-1px);
border: 1px solid rgba(255, 107, 53, 0.2);
}
.association-card.active .association-name {
color: var(--accent-orange);
}
.association-card {
cursor: pointer;
transition: all 0.3s ease;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.association-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
}
.association-name {
font-weight: 700;
color: var(--text-dark);
font-size: 1.1em;
margin: 0;
}
.department-badge {
background: var(--primary-green);
color: white;
padding: 4px 8px;
border-radius: 12px;
font-size: 0.8em;
font-weight: 600;
}
.association-description {
color: var(--text-light);
font-size: 0.95em;
line-height: 1.5;
margin: 10px 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.association-contacts {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 15px 0;
}
.contact-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.9em;
color: var(--text-light);
}
.contact-item a {
color: var(--primary-green);
text-decoration: none;
}
.contact-item a:hover {
text-decoration: underline;
}
.accessibility-types {
margin-top: 10px;
}
.accessibility-badge {
display: inline-block;
background: var(--bg-gray);
color: var(--text-dark);
padding: 3px 8px;
border-radius: 8px;
font-size: 0.8em;
margin: 2px 4px 2px 0;
}
.map-controls {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 20px;
}
.filter-btn {
padding: 8px 16px;
border: 2px solid var(--primary-green);
background: transparent;
color: var(--primary-green);
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.9em;
}
.filter-btn.active,
.filter-btn:hover {
background: var(--primary-green);
color: white;
}
/* Footer */
footer {
background: var(--text-dark);
color: white;
padding: 60px 0 30px;
font-family: 'Helvetica Neue', Arial, sans-serif;
}
.home_footer a {
font-family: 'Helvetica Neue', Arial, sans-serif;
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 40px;
}
.footer-section h3 {
margin-bottom: 20px;
color: white;
}
.footer-section p {
line-height: 1.8;
opacity: 0.9;
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 10px;
}
.footer-links a {
color: white;
text-decoration: none;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.footer-links a:hover {
opacity: 1;
}
.footer-bottom {
text-align: center;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
opacity: 0.8;
}
.market-btn .market-button-title {
display: block;
color: #222;
font-size: 1rem;
font-weight: 400;
}
.li_button .btn {
cursor: pointer;
background: white;
font-family: sans-serif;
}
/* Responsive */
@media(max-width: 768px) {
.nav-links {
display: none;
}
.hero h1 {
font-size: 2em;
}
.intro-content,
.footer-content {
grid-template-columns: 1fr;
}
.resources-grid,
.advantages-grid {
grid-template-columns: 1fr;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.btn {
width: 100%;
max-width: 300px;
}
}
</style>
</head>
<body>

<header class="header-nav">
<div class="nav-container">
<div class="logo-area">
<a href="/"><img class="logo" src="/assets/img/header/logo.png" alt="My Audio"></a>
</div>
<nav class="nav-links">
<a href="#intro">Le partenariat</a>
<a href="#map">Associations</a>
<a href="#resources">Ressources</a>
<a href="#support">Soutenir</a>
<a href="https://www.surdifrance.org/" target="_blank" class="btn-nav">Site SurdiFrance</a>
</nav>
</div>
</header>

<section class="hero">
<div class="container">
<div class="hero-content">
<div class="partnership-badge">
<img src="/assets/img/header/logo.png" alt="MyAudio" class="partnership-logo">
<span class="partnership-connector">×</span>
<img src="/assets/img/surdifrance-logo.png" alt="SurdiFrance" class="partnership-logo">
</div>
<h1>MyAudio s'engage avec SurdiFrance</h1>
<p class="hero-subtitle">
Ensemble pour améliorer l'orientation, l'information et l'accompagnement
des personnes devenues sourdes et malentendantes partout en France
</p>
<div class="cta-buttons">
<a href="#map" class="btn btn-primary">Trouver une association</a>
<a href="https://www.surdifrance.org/" target="_blank" class="btn btn-secondary">Découvrir SurdiFrance</a>
</div>
</div>
</div>
</section>

<section class="stats-section">
<div class="container">
<div class="stats-grid">
<div class="stat-card">
<div class="stat-number">6M</div>
<div class="stat-label">Personnes malentendantes en France</div>
</div>
<div class="stat-card">
<div class="stat-number">40+</div>
<div class="stat-label">Associations membres</div>
</div>
<div class="stat-card">
<div class="stat-number">25</div>
<div class="stat-label">Années d'expertise</div>
</div>
<div class="stat-card">
<div class="stat-number">100%</div>
<div class="stat-label">Indépendant</div>
</div>
</div>
</div>
</section>

<section class="magazine-section">
<div class="container">
<div class="magazine-content">
<div class="magazine-text">
<h2>📚 Découvrez le magazine</h2>
<h3>6 millions de malentendants</h3>
<p>
La revue de référence écrite par les malentendants pour les malentendants.
Depuis 25 ans, elle accompagne les personnes concernées par la surdité acquise
avec des témoignages, des conseils pratiques et l'actualité du secteur.
</p>
<ul class="magazine-features">
<li>4 numéros par an, 48 pages chacun</li>
<li>Témoignages et retours d'expérience</li>
<li>Actualités scientifiques et techniques</li>
<li>Conseils pratiques du quotidien</li>
<li>Dossiers thématiques approfondis</li>
</ul>
<p>
<strong>20 000 exemplaires</strong> distribués à travers toute la France,
cette publication est devenue la référence incontournable de la communauté
des personnes malentendantes.
</p>
<a href="http://boutique.surdifrance.org/" target="_blank" class="magazine-cta">
S'abonner au magazine
</a>
</div>
<div class="magazine-visual">
<div class="magazine-stats">
<div class="magazine-big-number">25</div>
<div class="magazine-big-label">années d'expertise</div>
<div class="magazine-mini-stats">
<div class="mini-stat">
<div class="mini-stat-number">20k</div>
<div class="mini-stat-label">lecteurs</div>
</div>
<div class="mini-stat">
<div class="mini-stat-number">4</div>
<div class="mini-stat-label">numéros/an</div>
</div>
</div>
<div class="magazine-topics">
<div class="topics-title">Sujets traités :</div>
<div class="topics-tags">
<span class="topic-tag">Témoignages</span>
<span class="topic-tag">Innovation</span>
<span class="topic-tag">Conseils</span>
<span class="topic-tag">Actualités</span>
<span class="topic-tag">Droits</span>
<span class="topic-tag">Prévention</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

<section class="intro" id="intro">
<div class="container">
<div class="section-header">
<h2>Un partenariat au service de l'inclusion</h2>
<p>MyAudio et SurdiFrance unissent leurs forces pour une société plus inclusive</p>
</div>
<div class="intro-content">
<div class="intro-text">
<p>
<strong>MyAudio et SurdiFrance</strong>
s'associent pour faciliter l'accès aux solutions
auditives et promouvoir une meilleure connaissance du parcours de soins. Cette
collaboration repose sur une vision partagée : valoriser les ressources à disposition
des personnes concernées et renforcer la prévention.
</p>
<p>
En conjuguant l'expertise numérique et le réseau national d'audioprothésistes de MyAudio
à l'ancrage associatif et militant de SurdiFrance, ce partenariat ouvre la voie à des
actions concrètes et complémentaires, au bénéfice direct des usagers.
</p>
<p>
<strong>SurdiFrance</strong>
est la fédération nationale des associations de devenus sourds
et malentendants. Elle rassemble plus de 40 associations membres réparties dans toute la
France et constitue un réseau engagé, structuré et solidaire.
</p>
</div>
<div class="intro-features">
<div class="feature-item">
<div class="feature-icon">🎯</div>
<div class="feature-content">
<h4>Représentation nationale</h4>
<p>Défense des droits auprès des pouvoirs publics et institutions</p>
</div>
</div>
<div class="feature-item">
<div class="feature-icon">🤝</div>
<div class="feature-content">
<h4>Accompagnement local</h4>
<p>Plus de 40 associations pour un soutien de proximité</p>
</div>
</div>
<div class="feature-item">
<div class="feature-icon">📚</div>
<div class="feature-content">
<h4>Information et formation</h4>
<p>Guides, documentation et sensibilisation du grand public</p>
</div>
</div>
<div class="feature-item">
<div class="feature-icon">🌍</div>
<div class="feature-content">
<h4>Reconnaissance internationale</h4>
<p>Représentation auprès de l'ONU, l'OMS et l'UNESCO</p>
</div>
</div>
</div>
</div>
</div>
</section>

<section class="values">
<div class="container">
<div class="section-header">
<h2>Les valeurs qui nous unissent</h2>
<p>Un engagement commun pour une société plus inclusive</p>
</div>
<div class="values-grid">
<div class="value-card">
<div class="value-icon">👂</div>
<h3>Accessibilité universelle</h3>
<p>Chaque personne malentendante doit pouvoir participer pleinement à la vie sociale, culturelle et professionnelle</p>
</div>
<div class="value-card">
<div class="value-icon">💪</div>
<h3>Autonomie et dignité</h3>
<p>La surdité ne doit jamais être un facteur d'exclusion ou de dépendance</p>
</div>
<div class="value-card">
<div class="value-icon">🤲</div>
<h3>Solidarité et entraide</h3>
<p>L'expérience collective et le partage sont au cœur du mouvement associatif</p>
</div>
<div class="value-card">
<div class="value-icon">🎯</div>
<h3>Neutralité et indépendance</h3>
<p>Action dans l'intérêt exclusif des personnes, sans lien commercial</p>
</div>
</div>
</div>
</section>

<section class="advantages">
<div class="container">
<div class="section-header">
<h2>Les avantages du partenariat</h2>
<p>Des solutions concrètes pour améliorer votre parcours auditif</p>
</div>
<div class="advantages-grid">
<div class="advantage-card">
<div class="advantage-icon">📍</div>
<div class="advantage-content">
<h3>Un réseau national</h3>
<p>Accédez à plus de 40 associations locales et au 1er réseau national d'audioprothésistes certifiés MyAudio pour un accompagnement de proximité.</p>
<a href="https://www.surdifrance.org" target="_blank" class="advantage-btn">En savoir plus</a>
</div>
</div>
<div class="advantage-card">
<div class="advantage-icon">📚</div>
<div class="advantage-content">
<h3>Des ressources complètes</h3>
<p>Guides pratiques, documentation spécialisée et magazine trimestriel pour vous informer sur tous les aspects de la surdité acquise.</p>
<a href="https://www.surdifrance.org/qui-sommes-nous/nos-actions/documentation/" target="_blank" class="advantage-btn">En savoir plus</a>
</div>
</div>
<div class="advantage-card">
<div class="advantage-icon">🎧</div>
<div class="advantage-content">
<h3>Un parcours facilité</h3>
<p>Prise de rendez-vous en ligne 24/7, test auditif gratuit et suivi complet de votre dossier de santé auditive.</p>
<a href="https://www.myaudio.fr/search" target="_blank" class="advantage-btn">Prendre un RDV</a>
</div>
</div>
<div class="advantage-card">
<div class="advantage-icon">💡</div>
<div class="advantage-content">
<h3>Innovation et expertise</h3>
<p>Bénéficiez de l'expertise digitale de MyAudio combinée à l'expérience terrain de SurdiFrance.</p>
<a href="https://www.myaudio.fr" target="_blank" class="advantage-btn">En savoir plus</a>
</div>
</div>
<div class="advantage-card">
<div class="advantage-icon">🤝</div>
<div class="advantage-content">
<h3>Accompagnement personnalisé</h3>
<p>Des professionnels formés et des bénévoles engagés pour répondre à vos besoins spécifiques.</p>
<a href="https://www.myaudio.fr/centre/" target="_blank" class="advantage-btn">En savoir plus</a>
</div>
</div>
<div class="advantage-card">
<div class="advantage-icon">🔒</div>
<div class="advantage-content">
<h3>Neutralité garantie</h3>
<p>Une fédération indépendante qui agit dans votre intérêt exclusif, sans lien commercial.</p>
<a href="https://www.surdifrance.org" target="_blank" class="advantage-btn">En savoir plus</a>
</div>
</div>
</div>
</div>
</section>

<section class="map-section" id="map">
<div class="container">
<div class="section-header">
<h2>Trouvez une association près de chez vous</h2>
<p>Plus de 40 associations réparties sur tout le territoire français</p>
</div>
<div class="map-container">

<div class="associations-sidebar">
<h3>📍 Nos associations locales</h3>
<p class="sidebar-subtitle">Cliquez sur une association ou sur un marqueur pour naviguer entre la liste et la carte</p>
<div id="associations-grid" class="associations-grid"></div>
</div>

<div class="map-wrapper">
<div id="interactive-map" style="height: 500px; border-radius: 15px;"></div>
</div>
</div>
</div>
</section>

<section class="audio-test-section">
<div class="container">
<div class="audio-test-content">
<div class="test-text">
<h2>🎧 Testez votre audition</h2>
<h3>Évaluation gratuite en ligne</h3>
<p>
Découvrez en quelques minutes l'état de votre audition avec notre test auditif
en ligne gratuit. Développé par des audioprothésistes experts, il vous donne
une première évaluation fiable de votre capacité auditive.
</p>
<ul class="test-features">
<li>Test gratuit et sans engagement</li>
<li>Résultats immédiats et confidentiels</li>
<li>Recommandations personnalisées</li>
<li>Développé par des professionnels</li>
</ul>
<p>
<strong>Important :</strong> Ce test ne remplace pas un diagnostic médical complet.
En cas de doute, consultez un audioprothésiste ou un ORL.
</p>
<a href="/test-auditif-en-ligne/test" target="_blank" class="test-cta">
Commencer le test
</a>
</div>
<div class="test-visual">
<div class="test-mockup">
<div class="test-header">Test Auditif MyAudio</div>
<div class="test-content">
<div class="frequency-bars">
<div class="frequency-bar"></div>
<div class="frequency-bar"></div>
<div class="frequency-bar"></div>
<div class="frequency-bar"></div>
<div class="frequency-bar"></div>
<div class="frequency-bar"></div>
<div class="frequency-bar"></div>
</div>
<div class="test-info">
Évaluation des fréquences<br>
125 Hz - 8000 Hz
</div>
</div>
</div>
</div>
</div>
</div>
</section>

<section class="appointment-section">
<div class="container">
<div class="appointment-content">
<h2>Prendre RDV avec un audioprothésiste</h2>
<h3>Trouvez un professionnel près de chez vous</h3>
<p>
Notre réseau de partenaires MyAudio vous accompagne dans votre démarche auditive.
Grâce à notre système de géolocalisation, trouvez rapidement un audioprothésiste qualifié
dans votre secteur et prenez rendez-vous en ligne.
</p>
<div class="appointment-steps">
<div class="appointment-step">
<div class="step-icon">🔍</div>
<div class="step-title">Recherche</div>
<div class="step-description">Trouvez les audioprothésistes les plus proches</div>
</div>
<div class="appointment-step">
<div class="step-icon">📅</div>
<div class="step-title">Rendez-vous</div>
<div class="step-description">Prenez RDV directement en ligne</div>
</div>
</div>
<button id="findProButton" class="appointment-cta">
Trouver un audioprothésiste
</button>
<div class="location-info">
<small>
En cliquant, vous acceptez de partager votre localisation.
<a href="https://www.myaudio.fr/search" class="fallback-link" target="_blank">
Rechercher sans géolocalisation
</a>
</small>
</div>
</div>
</div>
</section>

<section class="resources" id="resources">
<div class="container">
<div class="section-header">
<h2>Ressources et documentation</h2>
<p>Des guides pratiques et des outils pour vous accompagner</p>
</div>
<div class="resources-grid">
<div class="resource-card">
<div class="resource-header">
<h3>📘 J'entends mal, quelles solutions ?</h3>
</div>
<div class="resource-content">
<p>Le petit guide du mieux-entendre : 20 pages pour comprendre les étapes du parcours de soins face à une perte auditive.</p>
<a href="https://www.surdifrance.org/qui-sommes-nous/nos-actions/documentation/" target="_blank" class="resource-link">
Télécharger le guide →
</a>
</div>
</div>
<div class="resource-card">
<div class="resource-header">
<h3>🎧 Bien s'équiper en appareils auditifs</h3>
</div>
<div class="resource-content">
<p>Conseils pratiques et retours d'expérience d'usagers. Un guide plébiscité par les audioprothésistes - Version 2024.</p>
<a href="https://www.surdifrance.org/qui-sommes-nous/nos-actions/documentation/" target="_blank" class="resource-link">
Consulter le guide →
</a>
</div>
</div>
<div class="resource-card">
<div class="resource-header">
<h3>💬 Parler à une personne malentendante</h3>
</div>
<div class="resource-content">
<p>4 règles d'or illustrées pour bien communiquer. Un mode d'emploi simple et pratique pour tous.</p>
<a href="https://www.surdifrance.org/qui-sommes-nous/nos-actions/documentation/" target="_blank" class="resource-link">
Découvrir les conseils →
</a>
</div>
</div>
<div class="resource-card">
<div class="resource-header">
<h3>📚 6 millions de malentendants</h3>
</div>
<div class="resource-content">
<p>La revue de référence écrite par les malentendants pour les malentendants. 4 numéros par an, 25 ans d'expertise.</p>
<a href="https://www.surdifrance.org/category/actu/6-millions-de-malentendants/" target="_blank" class="resource-link">
Parcourir les numéros →
</a>
</div>
</div>
<div class="resource-card">
<div class="resource-header">
<h3>🎓 Formation accessible</h3>
</div>
<div class="resource-content">
<p>20 conseils pour rendre une formation accessible aux personnes malentendantes. Co-construit avec des experts.</p>
<a href="https://www.surdifrance.org/qui-sommes-nous/nos-actions/documentation/" target="_blank" class="resource-link">
Accéder au document →
</a>
</div>
</div>
<div class="resource-card">
<div class="resource-header">
<h3>🔊 La BIM en questions</h3>
</div>
<div class="resource-content">
<p>Pour tout comprendre sur les boucles à induction magnétique et leur utilisation au quotidien.</p>
<a href="https://www.surdifrance.org/qui-sommes-nous/nos-actions/documentation/" target="_blank" class="resource-link">
En savoir plus →
</a>
</div>
</div>
</div>
</div>
</section>

<section class="cta-section" id="support">
<div class="container">
<div class="cta-content">
<h2>Soutenez l'action de SurdiFrance</h2>
<p>Contribuez activement à la défense des droits et à l'inclusion des personnes devenues sourdes et malentendantes</p>
<div class="cta-cards">
<div class="cta-card">
<h3>💝 Faire un don</h3>
<p>Soutenez les actions de la fédération pour développer l'accessibilité</p>
<div class="price">Dès 5€/mois</div>
<div class="subtitle">66% de réduction fiscale</div>
<a href="https://www.surdifrance.org/donner-ou-leguer-a-surdifrance/" target="_blank" class="btn-white">
Je fais un don
</a>
</div>
<div class="cta-card">
<h3>📖 S'abonner à la revue</h3>
<p>Recevez 4 fois par an le magazine de référence sur la surdité acquise</p>
<div class="price">30€/an</div>
<a href="http://boutique.surdifrance.org/" target="_blank" class="btn-white">
Je m'abonne
</a>
</div>
<div class="cta-card">
<h3>🌟 Devenir partenaire</h3>
<p>Rejoignez le réseau d'acteurs engagés pour l'inclusion auditive</p>
<div class="price">Contact direct</div>
<div class="subtitle">president@surdifrance.org</div>
<a href="mailto:president-e@surdifrance.org" class="btn-white">
Nous contacter
</a>
</div>
</div>
</div>
</div>
</section>
<footer class="home_footer">
{% include "/footer.html.twig" %}
</footer>
<script>
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
const headerOffset = 80;
const elementPosition = target.offsetTop;
const offsetPosition = elementPosition - headerOffset;
window.scrollTo({top: offsetPosition, behavior: 'smooth'});
}
});
});
// Header shadow on scroll
window.addEventListener('scroll', () => {
const header = document.querySelector('.header-nav');
if (window.scrollY > 10) {
header.style.boxShadow = '0 2px 20px rgba(0,0,0,0.1)';
} else {
header.style.boxShadow = '0 2px 10px rgba(0,0,0,0.05)';
}
});
// Animate elements on scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// Add fade-in animation to elements
document.querySelectorAll('.stat-card, .value-card, .resource-card, .advantage-card').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'all 0.6s ease';
observer.observe(el);
});
// Counter animation for statistics
function animateCounter(element, target, suffix = '') {
let current = 0;
const increment = target / 50;
const timer = setInterval(() => {
current += increment;
if (current >= target) {
current = target;
clearInterval(timer);
}
element.textContent = Math.floor(current) + suffix;
}, 30);
}
// Trigger counter animation when visible
const statObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting && !entry.target.classList.contains('animated')) {
entry.target.classList.add('animated');
const statNumber = entry.target.querySelector('.stat-number');
if (statNumber) {
const text = statNumber.textContent;
if (text.includes('M')) {
animateCounter(statNumber, 6, 'M');
} else if (text.includes('+')) {
animateCounter(statNumber, parseInt(text), '+');
} else if (text.includes('%')) {
animateCounter(statNumber, 100, '%');
} else {
animateCounter(statNumber, parseInt(text), '');
}
}
}
});
}, {threshold: 0.5});
document.querySelectorAll('.stat-card').forEach(card => {
statObserver.observe(card);
});
// Données des associations
// Données des associations
const associations = [
{
department: "02",
name: "ASMA - Association des Sourds et Malentendants de l'Aisne",
description: "",
phone: "07 68 77 88 82",
sms: "",
email: "asma.aisne@gmail.com",
website: "",
address: "11 bis rue de Fère\n2400 CHATEAU THIERRY",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 49.0447,
lng: 3.4036
},
{
department: "12",
name: "ARDDS 12",
description: "Propose de cours de lecture labiale, présents dans les commissions d'accessibilité municipales, sensibilisations dans les entreprises, sorties conviviales, ateliers et visites de musées, atelier numérique.",
phone: "06.14.82.02.87",
sms: "",
email: "section.aveyron.ardds@gmail.com",
website: "https://www.facebook.com/ardds12/",
address: "MDA Claude Dangles\n15 avenue Tarayre\n12000 RODEZ",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 44.3498,
lng: 2.5751
},
{
department: "13",
name: "Surdi 13",
description: "Permanences régulières à Aix-en-Provence, Marseille et Arles. Assurances pour appareils auditifs. Ateliers de lecture labiale. Ateliers thématiques pour implantés cochléaires. Sorties culturelles adaptées.",
phone: "07.49.10.22.00",
sms: "",
email: "contact@surdi13.fr",
website: "surdi13.fr",
address: "33 rue Emile Tavan\n13100 Aix-en-Provence",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 43.5297,
lng: 5.4474
},
{
department: "14",
name: "Oreille et Son (section de l'ADSM Surdi 50)",
description: "Accompagnement, défense et représentation des devenus sourds et malentendants. Information, prévention et formation. Animation de la vie associative conviviale. Permanence au CHU 2ème mercredi du mois de 16h à 18h.",
phone: "07.69.40.28.14",
sms: "",
email: "oreille.et.son14@gmail.com",
website: "",
address: "Le 1901\nMaison des Associations 8 rue Germaine Tillon\n14000 Caen",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 49.1829,
lng: -0.3707
}, {
department: "15",
name: "Surdi 15",
description: "Améliorer l'accessibilité des déficients auditifs dans les locaux publics. Informer sur les équipements complémentaires. Créer du lien social. Membre de la Commission Départementale d'Accessibilité. 70 adhérents sur tout le département.",
phone: "06 12 24 74 94",
sms: "",
email: "surdi15@hotmail.com",
website: "surdi15.wordpress.com",
address: "Maison des Associations\n8 Place de la Paix\n15000 AURILLAC",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM", "LSF"
],
lat: 44.9255,
lng: 2.4436
}, {
department: "22",
name: "La bande son",
description: "Défense des malentendants et devenus sourds. Maintien du lien social. Groupes de parole, ateliers de lecture labiale, atelier chant. Partenariats avec IFPS et IFAS. Permanence à l'hôpital de St Brieuc. Collectif breton.",
phone: "07 67 96 02 82",
sms: "",
email: "associationlabandeson@gmail.com",
website: "https://www.facebook.com/groups/291272754679038/",
address: "15 bis rue des Capucins\n22000 SAINT BRIEUC",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 48.5148,
lng: -2.7653
}, {
department: "24",
name: "Visible à l'oreille",
description: "Atelier de lecture labiale pour malentendants et devenus sourds. Information du jeune public sur la surdité. Formation personnel EHPAD. Mission d'accessibilité des ERP, cinémas, salles de spectacle.",
phone: "06 70 57 72 45",
sms: "",
email: "visiblealoreille24@gmail.com",
website: "https://www.facebook.com/visiblealoreille",
address: "136 Imp. de la Haute Roquette\nEyliac\n24330 Basillac",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 45.1715,
lng: 0.9055
}, {
department: "25",
name: "ARDDS Franche Comte",
description: "Cours gratuits de lecture labiale tous les mois à Besançon et à Belfort avec des orthophonistes. Interventions de sensibilisation et prévention des risques auditifs.",
phone: "06.83.29.64.17",
sms: "",
email: "ardds.franchecomte@gmail.com",
website: "https://www.facebook.com/aucreuxdeloreillearddsfranchecomte/",
address: "9, rue des pommiers\n25400 EXINCOURT",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 47.4968,
lng: 6.8357
}, {
department: "29",
name: "Sourdine-Sud 29",
description: "",
phone: "07.86.80.30.00",
sms: "",
email: "sourdineasso@gmail.com",
website: "https://association-sourdine-29.blogspot.com/",
address: "52 rue de Kerourgué\n29170 FOUESNANT",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 47.8959,
lng: -4.0136
}, {
department: "29",
name: "Surd'iroise",
description: "Accueil personnes malentendantes: permanences, réunions, forums. Actions pour l'accessibilité. Prévention et sensibilisation JNA 2024. Travail en réseau avec associations bretonnes. Communication médias et réseaux sociaux.",
phone: "06.99.95.57.90",
sms: "",
email: "contact.surdiroise@gmail.com",
website: "surdiroise.fr",
address: "Mairie de Plabennec\n1, rue Pierre Jestin\n29860 PLABENNEC",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 48.5035,
lng: -4.1789
}, {
department: "30",
name: "Surdi 30",
description: "Solutions pour améliorer quotidien et communication des malentendants. Espace d'accueil, conseil, orientation. Rencontres à thèmes. Modules de prévention. Perfectionnement nouvelles technologies et découverte LSF.",
phone: "06.16.83.80.51",
sms: "",
email: "gaverous@wanadoo.fr",
website: "www.surdi30.org",
address: "70 A route de Beaucaire\n30000 NIMES",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 43.8367,
lng: 4.3601
}, {
department: "31",
name: "AMDS Midi-Pyrénées",
description: "",
phone: "06 74 48 53 54",
sms: "06 10 36 77 39",
email: "contact.amds.mp@gmail.com",
website: "https://amds-mp.com/",
address: "Maison des associations\n3 Place Guy Hersant, boite 54 BP 74184\n31031 Toulouse",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 43.6047,
lng: 1.4442
}, {
department: "33",
name: "Audition et écoute 33",
description: "Association créée en 2004 pour personnes atteintes de troubles de l'audition qui communiquent oralement (malentendants, devenus sourds ou sourds de naissance oralistes) demeurant en Gironde.",
phone: "06.64.93.48.09",
sms: "",
email: "secretariat.ae33@gmail.com",
website: "ae-33.blogspot.com",
address: "38 boulevard Saint Martin\n33600 PESSAC",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 44.8048,
lng: -0.6142
}, {
department: "34",
name: "Surdi 34",
description: "Association dynamique à Montpellier et Béziers. 330 membres. Journées récréatives mensuelles. Permanences CHU, ISP, MDPH. Accompagnement dossiers MDPH. Sensibilisations et conférences. Présence JNA, JMS, JMA. Apéro Labial mensuel.",
phone: "07.87.63.49.69",
sms: "",
email: "contact@surdi34.fr",
website: "surdi34.fr",
address: "Résidence La Pompignane - Bât.17\n424 rue Louise Michel\n34000 Montpellier",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 43.6110,
lng: 3.8767
}, {
department: "35",
name: "Keditu",
description: "Accueil personnes malentendantes et devenues sourdes. Maintien vie sociale. Information sur déficience auditive et compensation. Alerte organismes recevant public. Promotion réadaptation sociale et professionnelle.",
phone: "06.65.62.94.59",
sms: "",
email: "contact@keditu.org",
website: "www.keditu.org",
address: "Maison des Associations\n6 cours des Alliées\n35000 RENNES",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 48.1173,
lng: -1.6778
}, {
department: "38",
name: "ARDDS 38",
description: "Activités locales, rencontres conviviales, visites guidées Musées de Grenoble. Représentation dans commissions d'accessibilité. Tarifs privilégiés assurances implants et prothèses. Sensibilisations milieu scolaire/hospitalier. Signataire Charte Romain Jacob.",
phone: "04.76.49.79.20",
sms: "",
email: "malentendant38@orange.fr",
website: "www.malentendant38.org",
address: "29, rue des Mûriers\n38180 SEYSSINS",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 45.1667,
lng: 5.6833
}, {
department: "44",
name: "ARDDS 44",
description: "Organisation séances apprentissage lecture labiale avec 3 orthophonistes diplômés. Rencontres amicales mensuelles et 2 repas annuels. Participation forums santé sensorielle seniors. Consultations handicap auditif.",
phone: "06.50.31.31.29",
sms: "",
email: "section44@ardds.org",
website: "",
address: "11 rue des Aigrettes\n44860 SAINT AIGNAN GRAND LIEU",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 47.1378,
lng: -1.6556
}, {
department: "49",
name: "Surdi 49",
description: "Ateliers Lecture Labiale et Sophrologie. Accueil, information, orientation CERTA. Participation JNA. Sensibilisation personnels d'accueil. Tests équipements boucles magnétiques. Partenariats CHU Angers/Nantes, Faculté Médecine. Membre Maison Autonomie.",
phone: "06.77.61.23.08",
sms: "",
email: "surdi49angers@gmail.com",
website: "surdi49.fr",
address: "Espace Frédéric Mistral\n4, Allées des Baladins\n49000 ANGERS",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 47.4784,
lng: -0.5632
}, {
department: "50",
name: "ADSM Surdi 50",
description: "Accompagnement, défense et représentation devenus sourds et malentendants. Information, prévention, sensibilisation formation public, malentendants, professionnels, institutions. Animation vie associative. Permanences 1er jeudi du mois 14h30-16h30.",
phone: "06.81.90.60.63",
sms: "",
email: "adsm.surdi50@gmail.com",
website: "www.adsmmanche.fr",
address: "Les Unelles, Boîte 4\n11 rue St Maur\n50200 COUTANCES",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 49.0473,
lng: -1.4455
}, {
department: "50",
name: "ADSM Surdi 50 - Antenne Cherbourg",
description: "Accompagnement, défense et représentation devenus sourds et malentendants. Information, prévention, sensibilisation formation public, malentendants, professionnels, institutions. Animation vie associative. Permanence CHU 2ème mercredi du mois 16h-18h.",
phone: "",
sms: "",
email: "",
website: "",
address: "Maison Sport Santé 37, rue de l'Ermitage\n50100 Cherbourg-en-Cotentin",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 49.6337,
lng: -1.6222
}, {
department: "53",
name: "ARDDS 53",
description: "Ateliers lecture labiale hebdomadaires par orthophonistes, gratuits adhérents. Temps conviviaux, sorties, accueil personnalisé. Partage ressources accessoires, astuces, contacts, lieux accessibles. Partenariats audioprothésistes, mairie Laval, établissements publics.",
phone: "07.69.27.72.46",
sms: "",
email: "section53@ardds.org",
website: "",
address: "Maison de Quartier d'Avesnières\n2, rue du Ponceau\n53000 LAVAL",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 48.0698,
lng: -0.7712
}, {
department: "54",
name: "Surdi Lorraine",
description: "Département 54 (Meurthe & Moselle) avec développement dans le 88 (Vosges). Découverte des 2 départements, ateliers langue de signes, après-midi/journées convivialité. Sensibilisation grand-public: journées découverte, sensibilisation, ateliers LSF, inclusion.",
phone: "07 81 09 75 25",
sms: "",
email: "surdilorraine@gmail.com",
website: "www.surdi-lorraine.fr",
address: "2 rue Joseph Piroux\n54140 JARVILLE LA MALGRANGE",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM", "LSF"
],
lat: 48.6639,
lng: 6.2056
}, {
department: "56",
name: "Oreille et vie",
description: "Accueil personnes déficientes auditives devenues à l'adolescence/âge adulte et familles. Information déficience auditive et compensation. Alerte administrations et organismes publics. Défense intérêts et assistance demandes avec moyens techniques.",
phone: "02.97.64.11.30",
sms: "",
email: "oreille-et-vie@wanadoo.fr",
website: "https://www.oreilleetvie.org/",
address: "Boîte 62 Maison des Associations\n5 place louis bonneaud\n56100 LORIENT",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 47.7482,
lng: -3.3706
}, {
department: "57",
name: "ARDDS 57",
description: "Ateliers de Lecture Labiale. Représentation personnes Devenues Sourdes et Malentendantes dans instances départementales. Défense DSME auprès structures départementales. Organisation JNA et prévention Établissements Scolaires et Entreprises.",
phone: "06 33 06 44 50",
sms: "",
email: "ardds57@yahoo.fr",
website: "",
address: "4 avenue de la gare, BP 25\n57320 Bouzonville",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 49.2889,
lng: 6.5278
}, {
department: "59",
name: "Surdi 59",
description: "Association basée à Lille. Valeurs d'inclusion, entraide, accessibilité. Permanences d'écoute et accompagnement. Sensibilisation et ateliers services publics, entreprises, écoles. Activités culturelles conviviales. Soutien seniors presbyacousie avec sous-titrage et transcription temps réel.",
phone: "06.74.77.93.06",
sms: "",
email: "contact@surdi59.org",
website: "https://www.surdi59.org/",
address: "Maison des Genêts\n2 rue des genêts\n59650 VILLENEUVE D'ASCQ",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 50.6167,
lng: 3.1333
}, {
department: "61",
name: "Surdi 61",
description: "Information, Prévention, Sensibilisation et Formation du public, malentendants et devenus sourds oralistes, professionnels, écoles, institutions. Animation Activités Vie Associative adhérents. Sensibilisation Collectivités BIM d'Accueil. Participation Forum Associations d'Argentan.",
phone: "06.08.60.81.71",
sms: "",
email: "amds.orne@gmail.com",
website: "https://www.facebook.com/surdi61",
address: "2, impasse des Safrières\n61210 Putanges-le-Lac",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 48.7667,
lng: -0.2500
}, {
department: "63",
name: "ARDDS 63",
description: "Accueillir, informer sur solutions et droits. Développer lecture labiale et formations en groupes. Représentation et Défense malentendants et devenus sourds: CDCA 63, Commissions d'accessibilité, Collectif Personnes en situation de Handicap.",
phone: "06 71 92 08 92",
sms: "",
email: "malentendants63@gmail.com",
website: "https://www.facebook.com/groups/163945410911229/",
address: "16 rue Jean Mermoz\n63190 LEZOUX",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 45.8278,
lng: 3.3778
}, {
department: "64",
name: "ARDDS 64",
description: "Rencontres amicales, lecture labiale, revue locale.",
phone: "05 59 05 50 46",
sms: "",
email: "section64@ardds.org",
website: "",
address: "66, rue Montpensier\n64000 Pau",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 43.2951,
lng: -0.3708
}, {
department: "68",
name: "AMDS Alsace",
description: "",
phone: "03 89 43 07 55",
sms: "",
email: "christiane.ahr@orange.fr",
website: "",
address: "63a, rue d'Illzach\n68200 MULHOUSE",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 47.7508,
lng: 7.3358
}, {
department: "69",
name: "ALDSM",
description: "",
phone: "",
sms: "",
email: "contact@aldsm.fr",
website: "www.aldsm.fr",
address: "c/o Locaux Motiv\n10bis rue Jangot\n69007 LYON",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 45.7578,
lng: 4.8320
}, {
department: "72",
name: "Surdi 72",
description: "Informations techniques, médicales, administratives malentendants et devenus sourds. Vérification application loi handicap 11/05/2005 accessibilité. Sorties cinéma mensuelles boucle magnétique. Visites expositions Musée avec guide. Sorties journée, repas annuels.",
phone: "",
sms: "",
email: "surdi72@gmail.com",
website: "",
address: "4 rue d'Arcole\nMDA Boîte aux lettres 76\n72000 Le Mans",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 48.0061,
lng: 0.1996
}, {
department: "75",
name: "ANIC",
description: "Aide, renseignements personnes sourdes implant cochléaire et accompagnement implantés. Permanences hôpitaux. Réunions mensuelles. Assurance groupe GAN implants cochléaires. Sorties culturelles, concerts, conférences. Site internet, bulletin semestriel.",
phone: "",
sms: "",
email: "anic.association@orange.fr",
website: "www.association-anic.fr",
address: "Hôpital Rotschild\n5 rue Santerre\n75012 PARIS",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 48.8499,
lng: 2.3763
}, {
department: "75",
name: "ARDDS 75 Ile de France",
description: "Adaptation devenu sourd ou malentendant à handicap invisible, empêcher isolement privation communication orale. Cours lecture labiale (4 niveaux). Sorties culturelles adaptées. Groupe paroles psychothérapeute. Permanences informations. Club lecture/écriture. Balades découvertes.",
phone: "06 87 61 39 51",
sms: "",
email: "arddsidf@ardds.org",
website: "http://www.ardds.org/content/ardds-idf",
address: "14 rue Georgette Agutte\n75018 PARIS",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 48.8944,
lng: 2.3400
}, {
department: "75",
name: "ARDDS National",
description: "Association nationale, 11 sections départementales/régionales. Apprentissage lecture labiale stages d'été et sections. Cogestion revue 6 millions malentendants. Représentation et défense malentendants/devenus sourds localement et nationalement.",
phone: "06 30 16 19 51",
sms: "",
email: "contact@ardds.org",
website: "ardds.org",
address: "MVAC 20\nBoite 82\n18-20 Rue Ramus\n75020 PARIS",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 48.8738,
lng: 2.4088
}, {
department: "78",
name: "Durd'Oreille",
description: "Conférences informations professionnels audition. Rencontres amicales, témoignages, partages expériences, sorties culturelles lieux accessibles DSME. Cours lecture labiale sur demande. Actions promotion accessibilité BIM lieux publics et culturels.",
phone: "06 37 88 59 45",
sms: "",
email: "durdoreille7892@gmail.com",
website: "https://durdoreille.fr/",
address: "62 Allée la Fontaine\n78170 La Celle Saint Cloud",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 48.8433,
lng: 2.1378
}, {
department: "84",
name: "Surdi 84",
description: "Association devenus sourds et malentendants oralistes. Séances lecture labiale avec orthophoniste professionnelle. Interventions collèges et écoles journées handicap. Prochainement EHPAD. Participation stands et forums.",
phone: "06.04.40.76.73",
sms: "",
email: "surdi84@gmail.com",
website: "https://surdi-84.webnode.fr/",
address: "309 rue Pierre Bonnard\n84000 Avignon",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 43.9493,
lng: 4.8059
}, {
department: "85",
name: "ARDDS 85",
description: "Promotion lecture labiale. 4 demi-journées annuelles découverte, initiation, entraînement lecture labiale. Sensibilisation, information, prévention troubles audition (écoles, lycées, bibliothèques). Soutien moral malentendants/entourage. Actions accessibilité lieux publics Vendée (tests BIM).",
phone: "06 08 97 44 33",
sms: "",
email: "ardds85@orange.fr",
website: "",
address: "Maison des Associations de Vendée\n184, boulevard Aristide Briand\n85000 La Roche-sur-Yon",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 46.6704,
lng: -1.4281
}, {
department: "87",
name: "ARDDS 87",
description: "Informer les adhérents et leur transférer les informations.",
phone: "06.78.32.23.33",
sms: "",
email: "section87@ardds.org",
website: "https://www.facebook.com/p/Devenus-Sourds-Limousin-100064922112575/?locale=zh_CN",
address: "16, rue Alfred de Vigny\n87100 LIMOGES",
accessibility: [
"Sous-titrage", "lecture labiale", "BIM"
],
lat: 45.8336,
lng: 1.2611
}
];
let map;
let markers = {}; // Stocker les marqueurs par ID d'association
// Initialisation de la carte
function initMap() { // Utiliser Leaflet (gratuit) au lieu de Google Maps
map = L.map('interactive-map').setView([
46.603354, 1.888334
], 6); // Centre de la France
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '© OpenStreetMap contributors'}).addTo(map);
// Ajouter les marqueurs
associations.forEach((association, index) => {
if (association.lat && association.lng) {
const marker = L.marker([association.lat, association.lng]);
// Ajouter l'événement de clic sur le marqueur
marker.on('click', function() {
const associationId = `association-${index}`;
const associationCard = document.querySelector(`[data-association-id="${associationId}"]`);
if (associationCard) {
// Retirer l'état actif de toutes les cartes
document.querySelectorAll('.association-card').forEach(c => c.classList.remove('active'));
// Activer la carte correspondante
associationCard.classList.add('active');
// Scroller vers la carte dans la sidebar
const sidebar = document.querySelector('.associations-sidebar');
const cardOffsetTop = associationCard.offsetTop - sidebar.offsetTop;
sidebar.scrollTo({
top: cardOffsetTop - 20, // 20px de marge
behavior: 'smooth'
});
// Sur mobile, scroller vers la sidebar si elle n'est pas visible
if (window.innerWidth <= 992) {
setTimeout(() => {
const sidebarTop = sidebar.getBoundingClientRect().top + window.pageYOffset;
window.scrollTo({
top: sidebarTop - 20,
behavior: 'smooth'
});
}, 150);
}
}
});
marker.addTo(map);
// Stocker le marqueur avec l'index comme clé
markers[`association-${index}`] = marker;
}
});
}
// Affichage en liste
function displayAssociationsList() {
const grid = document.getElementById('associations-grid');
grid.innerHTML = '';
associations.forEach((association, index) => {
const card = document.createElement('div');
card.className = 'association-card';
card.dataset.associationId = `association-${index}`;
card.innerHTML = `
<div class="association-header">
<h3 class="association-name">${association.name}</h3>
<span class="department-badge">${association.department}</span>
</div>
${association.description ? `<p class="association-description">${association.description}</p>` : ''}
<div class="association-contacts">
${association.phone ? `<div class="contact-item">📞 <a href="tel:${association.phone}">${association.phone}</a></div>` : ''}
${association.email ? `<div class="contact-item">✉️ <a href="mailto:${association.email}">${association.email}</a></div>` : ''}
${association.website ? `<div class="contact-item">🌐 <a href="${association.website}" target="_blank">Site web</a></div>` : ''}
</div>
${association.address ? `<div class="contact-item">📍 ${association.address}</div>` : ''}
<div class="accessibility-types">
${association.accessibility.map(type => `<span class="accessibility-badge">${type}</span>`).join('')}
</div>
`;
// Ajouter l'événement de clic pour interagir avec la carte
card.addEventListener('click', function() {
const associationId = this.dataset.associationId;
const marker = markers[associationId];
if (marker && association.lat && association.lng) {
// Centrer la carte sur le marqueur
map.setView([association.lat, association.lng], 12);
// Effet visuel sur la carte sélectionnée
document.querySelectorAll('.association-card').forEach(c => c.classList.remove('active'));
this.classList.add('active');
// Sur mobile, faire un scroll vers la carte si elle n'est pas visible
if (window.innerWidth <= 992) {
setTimeout(() => {
document.getElementById('interactive-map').scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'nearest'
});
}, 200);
}
}
});
grid.appendChild(card);
});
}
// Initialisation de la carte et de la liste
document.addEventListener('DOMContentLoaded', function () {
// Charger Leaflet
const leafletCSS = document.createElement('link');
leafletCSS.rel = 'stylesheet';
leafletCSS.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
document.head.appendChild(leafletCSS);
const leafletJS = document.createElement('script');
leafletJS.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
leafletJS.onload = function() {
initMap();
displayAssociationsList(); // Afficher la liste directement
};
document.head.appendChild(leafletJS);
// Géolocalisation pour RDV audioprothésiste
const findProButton = document.getElementById('findProButton');
if (findProButton) {
findProButton.addEventListener('click', function() {
this.disabled = true;
this.textContent = 'Localisation en cours...';
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
// Récupérer la ville via geocoding inverse (optionnel)
fetch(`https://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=YOUR_API_KEY&language=fr&pretty=1`)
.then(response => response.json())
.then(data => {
let cityName = '';
let postalCode = '';
if (data.results && data.results.length > 0) {
const components = data.results[0].components;
cityName = components.city || components.town || components.village || '';
postalCode = components.postcode || '';
}
// Construire l'URL MyAudio avec géolocalisation
let myaudioUrl = `https://www.myaudio.fr/search?latitude=${latitude}&longitude=${longitude}`;
if (postalCode) {
myaudioUrl += `&ville=${postalCode}`;
}
// Rediriger vers MyAudio
window.open(myaudioUrl, '_blank');
// Remettre le bouton en état normal
findProButton.disabled = false;
findProButton.textContent = 'Trouver un audioprothésiste';
})
.catch(error => {
// Si le geocoding échoue, utiliser juste les coordonnées
const myaudioUrl = `https://www.myaudio.fr/search?latitude=${latitude}&longitude=${longitude}`;
window.open(myaudioUrl, '_blank');
findProButton.disabled = false;
findProButton.textContent = 'Trouver un audioprothésiste';
});
},
function(error) {
// Géolocalisation refusée ou échouée
let errorMessage = 'Impossible d\'accéder à votre localisation. ';
switch(error.code) {
case error.PERMISSION_DENIED:
errorMessage += 'Vous avez refusé la géolocalisation.';
break;
case error.POSITION_UNAVAILABLE:
errorMessage += 'Position indisponible.';
break;
case error.TIMEOUT:
errorMessage += 'Délai d\'attente dépassé.';
break;
}
alert(errorMessage + ' Vous allez être redirigé vers la recherche générale.');
// Rediriger vers la page de recherche générale
window.open('https://www.myaudio.fr/search', '_blank');
// Remettre le bouton en état normal
findProButton.disabled = false;
findProButton.textContent = 'Trouver un audioprothésiste';
},
{
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 300000 // 5 minutes
}
);
} else {
// Navigateur ne supporte pas la géolocalisation
alert('Votre navigateur ne supporte pas la géolocalisation. Vous allez être redirigé vers la recherche générale.');
window.open('https://www.myaudio.fr/search', '_blank');
findProButton.disabled = false;
findProButton.textContent = 'Trouver un audioprothésiste';
}
});
}
});
</script>
</body>
</html>

templates/partner/myaudio-surdifrance.html.twig line 1