* {margin:0;padding:0;box-sizing:border-box;}
body {font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;color:#ffffff;background-color:rgb(16,16,16);overflow-x:hidden;cursor:none;}
.container {max-width:1200px;margin:0 auto;padding:0 24px;}
.header {background:rgba(16,16,16,0.95);backdrop-filter:blur(20px);padding:20px 0;position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(255,255,255,0.1);}
.header .container {display:flex;justify-content:space-between;align-items:center;}
.logo {display:flex;align-items:center;gap:12px;font-weight:600;font-size:18px;}
.logo-icon {margin-top:9px;font-size:24px;}
.btn-header,.btn-primary,.btn-secondary,.btn-cta {display:inline-flex;align-items:center;gap:8px;border:none;border-radius:12px;cursor:none;font-weight:500;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);text-decoration:none;position:relative;overflow:hidden;}
.btn-header {background:rgba(255,255,255,0.1);color:white;padding:12px 20px;border:1px solid rgba(255,255,255,0.2);}
.btn-primary {background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:white;padding:16px 32px;font-size:16px;box-shadow:0 4px 20px rgba(59,130,246,0.3);}
.btn-secondary {background:rgba(255,255,255,0.05);color:white;padding:14px 28px;border:1px solid rgba(255,255,255,0.2);}
.btn-cta {background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:white;padding:18px 36px;font-size:18px;font-weight:600;box-shadow:0 8px 32px rgba(59,130,246,0.4);}
.arrow {transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);font-size:16px;}
.btn-header:hover .arrow,.btn-primary:hover .arrow,.btn-secondary:hover .arrow,.btn-cta:hover .arrow {transform:translateX(4px);}
.btn-header:hover {background:rgba(255,255,255,0.15);transform:translateY(-1px);}
.btn-primary:hover {transform:translateY(-2px);box-shadow:0 8px 32px rgba(59,130,246,0.4);}
.btn-secondary:hover {background:rgba(255,255,255,0.1);transform:translateY(-1px);}
.btn-cta:hover {transform:translateY(-2px);box-shadow:0 12px 40px rgba(59,130,246,0.5);}
.hero {padding:120px 0;background:linear-gradient(135deg,rgb(16,16,16) 0%,rgb(24,24,24) 100%);}
.hero .container {display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.hero-title {font-size:4rem;font-weight:700;color:#3b82f6;margin-bottom:24px;letter-spacing:-0.02em;}
.hero-subtitle {font-size:1.25rem;color:rgba(255,255,255,0.8);margin-bottom:40px;line-height:1.6;}
.hero-buttons {display:flex;align-items:center;gap:32px;margin-bottom:40px;flex-wrap:wrap;}
.hero-link {color:#3b82f6;transition:color 0.3s ease;font-weight:500;}
.hero-link:hover {color:#1d4ed8;}
.hero-image {border-radius:20px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.3);}
.hero-image img {width:100%;height:auto;display:block;}
.accident-section,.inscription-section,.ai-section,.video-section,.testimonials,.formation-content,.faq-section {padding:100px 0;}
.accident-section {background:rgb(16,16,16);text-align:center;}
.inscription-section {background:rgb(20,20,20);text-align:center;}
.ai-section {background:rgb(16,16,16);}
.video-section {background:rgb(20,20,20);text-align:center;}
.testimonials {background:rgb(16,16,16);text-align:center;}
.formation-content {background:rgb(20,20,20);}
.formation-button {display:flex;justify-content:center;align-items:center;text-align:center;}
.faq-section {background:rgb(16,16,16);}
.section-title {font-size:2.5rem;color:#ffffff;margin-bottom:24px;font-weight:700;text-align:center;letter-spacing:-0.01em;}
.section-subtitle {font-size:1.125rem;color:rgba(255,255,255,0.7);margin-bottom:60px;max-width:700px;margin-left:auto;margin-right:auto;text-align:center;}
/* Ancien video-container, désormais utilisé pour les façades YouTube */
.video-container {max-width:800px;margin:0 auto 60px;position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.3);}
/* Le iframe à l'intérieur de video-container n'est plus directement dans l'HTML mais ajouté par JS */
.video-container iframe {position:absolute;top:0;left:0;width:100%;height:100%;}
.video-title {font-size:2rem;color:#ffffff;margin-bottom:60px;font-weight:600;max-width:800px;margin-left:auto;margin-right:auto;text-align:center;}
.features-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px;margin:60px 0;}
.feature-item {background:rgba(255,255,255,0.03);padding:32px;border-radius:16px;border:1px solid rgba(255,255,255,0.1);text-align:center;}
.feature-item h3 {color:#3b82f6;font-size:1.25rem;margin-bottom:12px;font-weight:600;}
.feature-item p {color:rgba(255,255,255,0.7);}
.ai-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:32px;margin-top:60px;}
.ai-card {background:rgba(255,255,255,0.03);padding:32px;border-radius:20px;border:1px solid rgba(255,255,255,0.1);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);}
.ai-card:hover {transform:translateY(-4px);border-color:rgba(59,130,246,0.3);box-shadow:0 20px 60px rgba(59,130,246,0.1);}
.ai-header {display:flex;align-items:center;gap:16px;margin-bottom:16px;}
.ai-icon {font-size:2.5rem;}
.ai-card h3 {color:#3b82f6;font-size:1.5rem;font-weight:600;}
.ai-card h4 {color:rgba(255,255,255,0.9);font-size:1.125rem;margin-bottom:16px;font-weight:500;}
.ai-description {color:rgba(255,255,255,0.7);margin-bottom:24px;line-height:1.6;}
.ai-features {list-style:none;}
.ai-features li {color:rgba(255,255,255,0.8);margin-bottom:8px;padding-left:0;}
.testimonial-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:32px;margin:60px 0;}
.testimonial-card {background:rgba(255,255,255,0.03);padding:32px;border-radius:20px;border:1px solid rgba(255,255,255,0.1);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);}
.testimonial-card:hover {transform:translateY(-4px);}
.testimonial-avatar {font-size:3rem;margin-bottom:16px;}
.testimonial-rating {font-size:1.25rem;margin-bottom:16px;}
.testimonial-text {color:rgba(255,255,255,0.8);font-style:italic;margin-bottom:20px;line-height:1.6;}
.testimonial-author {color:#3b82f6;font-weight:600;}
.content-list {max-width:800px;margin:60px auto;}
.content-item {display:flex;align-items:flex-start;gap:24px;padding:32px;margin-bottom:20px;background:rgba(255,255,255,0.03);border-radius:16px;border:1px solid rgba(255,255,255,0.1);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);}
.content-item:hover {transform:translateX(8px);border-color:rgba(59,130,246,0.3);}
.content-number {background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:white;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0;font-size:18px;}
.content-text h4 {color:#ffffff;font-size:1.125rem;margin-bottom:8px;font-weight:600;}
.content-text p {color:rgba(255,255,255,0.7);}
.faq-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:32px;margin-top:60px;}
.faq-item {background:rgba(255,255,255,0.03);padding:32px;border-radius:16px;border:1px solid rgba(255,255,255,0.1);}
.faq-item h4 {color:#ffffff;font-size:1.125rem;margin-bottom:16px;font-weight:600;}
.faq-item p {color:rgba(255,255,255,0.7);line-height:1.6;}
.cta-section {background:linear-gradient(135deg,#3b82f6 0%,#1d4ed8 100%);padding:120px 0;text-align:center;}
.cta-title {font-size:3rem;color:white;margin-bottom:24px;font-weight:700;}
.cta-subtitle {font-size:1.25rem;color:rgba(255,255,255,0.9);margin-bottom:48px;max-width:600px;margin-left:auto;margin-right:auto;}
.footer {background:rgb(16,16,16);padding:60px 0;text-align:center;border-top:1px solid rgba(255,255,255,0.1);}
.footer-logo {display:flex;align-items:center;justify-content:center;gap:12px;font-weight:600;font-size:18px;color:#3b82f6;}
.copyright {max-width:1200px;margin:auto;padding:1rem;color:#fff;font-size:0.8rem;text-align:center;}
.ressources {max-width:1200px;margin:auto;padding:0.2rem;color:#3f3f3f;font-size:0.8rem;text-align:center;}
.ripple {position: absolute;border-radius: 50%;transform: scale(0);animation: ripple-animation 0.6s linear;background-color: rgba(255, 255, 255, 0.7); /* Couleur de l'onde */z-index: 1; /* S'assure que l'onde est au-dessus du contenu du bouton mais en dessous du texte */}
@keyframes ripple-animation {to {transform: scale(2.5); /* Agrandit l'onde */opacity: 0;}}
@media (max-width:600px) {.ressources {max-width:355px;width:90%;}}
@media (max-width:1024px) {.hero .container {grid-template-columns:1fr;gap:60px;text-align:center;} .hero-title {font-size:3rem;}}
@media (max-width:768px) {.container {padding:0 16px;} .hero-title {font-size:2.5rem;} .section-title {font-size:2rem;} .video-title {font-size:1.5rem;} .cta-title {font-size:2rem;} .hero-buttons {flex-direction:column;gap:20px;} .ai-grid,.testimonial-grid,.features-grid,.faq-grid {grid-template-columns:1fr;} .content-item {flex-direction:column;text-align:center;} .hero {padding:80px 0;} .accident-section,.inscription-section,.ai-section,.video-section,.testimonials,.formation-content,.faq-section {padding:80px 0;}}
@keyframes fadeInUp {from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
.hero-title,.section-title {animation:fadeInUp 0.8s ease-out;}
html {scroll-behavior:smooth;}
/* CSS pour les façades YouTube */
/* ... (Votre CSS existant avant les règles des façades YouTube) ... */

/* Ajustements pour les façades YouTube */
.youtube-facade {
    position: relative;
    overflow: hidden;
    border-radius: 16px; /* Assurez-vous que cela correspond à votre .video-container */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); /* Assurez-vous que cela correspond à votre .video-container */
    display: block; /* Pour s'assurer que le conteneur a la bonne taille */
    width: 100%; /* S'assure qu'il prend toute la largeur */
    height: 0;
    padding-bottom: 56.25%; /* Ratio 16:9 pour les vidéos */
}

.youtube-facade .youtube-thumbnail {
    position: absolute; /* Position absolue pour remplir le conteneur */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recadre l'image pour couvrir le conteneur */
    transition: filter 0.3s ease; /* Effet de flou/assombrissement au survol */
}

.youtube-facade:hover .youtube-thumbnail {
    filter: brightness(0.7); /* Assombrir un peu l'image au survol */
}

.youtube-facade .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px; /* Taille du cercle YouTube */
    height: 48px;
    background-color: rgba(30, 30, 30, 0.7); /* Gris foncé semi-transparent */
    border-radius: 10px; /* Bords légèrement arrondis comme YouTube */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    z-index: 10;
}

.youtube-facade .play-button::before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #fff;
    /* Supprimez ou commentez la ligne 'left: 4px;' */
    /* Alternativement, vous pouvez utiliser transform: translateX(2px); si vous voulez un micro-ajustement plus précis, mais souvent le laisser tel quel est suffisant. */
}

.youtube-facade:hover .play-button {
    background-color: rgba(255, 0, 0, 0.9); /* Rouge vif de YouTube au survol */
    transform: translate(-50%, -50%) scale(1.1); /* Légère augmentation de taille au survol */
}

/* Assurez-vous que les iframes dynamiquement ajoutées prennent la même taille */
.youtube-facade iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
/* Le curseur personnalisé est réactivé ici. */
.custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.2s ease, background-color 0.2s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.section-visible {animation:sectionFadeIn 0.8s ease-out;}
@keyframes sectionFadeIn {from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
button {position:relative;overflow:hidden;}
button::before {content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);transition:left 0.5s;}
button:hover::before {left:100%;}