/* Variables globales */
:root {
    --primary-color: #000000;
    --secondary-color: #000000;
    --dark-color: #333;
    --light-color: #ffffff;
    --text-color: #444;
    --border-color: #ddd;
    --success-color: #222222;
    --font-primary: 'SupremeLL-Black', sans-serif;
    --font-secondary: 'Montserrat', sans-serif;
    --transition: all 0.3s ease;
}

/* Reset et styles de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ================================================== */
/* AMÉLIORATIONS DE LA NAVIGATION                     */
/* ================================================== */

html {
    /* 1. Active le scrolling dynamique sur toute la page */
    scroll-behavior: smooth;

    /* 2. Crée un décalage global pour les ancres, de la hauteur du header */
    /* Ajustez cette valeur si la hauteur de votre header change */
    scroll-padding-top: 80px; 
}


body {
    font-family: var(--font-secondary);
    color: var(--text-color);
    line-height: 1.6;
    background-color: #fff;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 20px;
    color: var(--primary-color);
    font-family: var(--font-primary);	
	
}

p {
    margin-bottom: 20px;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--secondary-color);
}

img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

section {
    padding: 80px 0;
}

/* Boutons */
.btn-primary {
    display: inline-block;
    background-color: var(--dark-color);
    color: var(--light-color);
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition);
    border: none;
    cursor: pointer;
	font-family: var(--font-primary);	
}

.btn-primary:hover {
    background-color: var(--secondary-color);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}


.btn-secondary {
    display: inline-block;
    background-color: #387bf3;
    color: var(--light-color);
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition);
    border: none;
    cursor: pointer;
	font-family: var(--font-primary);		
}


.btn-secondary:hover {
    background-color: #2c5dd2;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);	
}

/* Header */
header {
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.logo h1 {
    font-size: 24px;
    margin: 0;
    color: var(--primary-color);
}

.tagline {
    font-size: 14px;
    color: var(--secondary-color);
    margin: 0;
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li {
    margin-left: 30px;
}

nav ul li a {
    color: var(--dark-color);
    font-weight: 500;
    font-family: var(--font-primary);
	
}

nav ul li a:hover {
    color: var(--primary-color);
}

/* Hero Section */
.hero {
    padding: 240px 0;
	height:676px;
	background: linear-gradient(135deg, #000000 0%, #3f4143 100%);
/* 	background: #000000; */
}

.hero .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hero-content {
    flex: 1;
    /* padding-right: 40px; */
	z-index: 999;
	text-align:center;
}

.hero-content h1 {
	font-family: var(--font-primary);
    font-size: 42px;
    margin-bottom: 20px;
    color: var(--light-color);
}

.hero-content p {
    font-size: 18px;
    margin-bottom: 30px;
	color:#FFFFFF;
}

.hero-image {
    flex: 1;
	display:none;
}

.hero-image img {
    border-radius: 10px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Stats Section */
.stats {
    background-color: var(--success-color);
    color: white;
    padding: 40px 0;
	position:relative;
}

.stats .container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.stat-item {
    flex: 1;
    text-align: center;
    padding: 20px;
    min-width: 200px;
}

.stat-number {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 10px;
    font-family: var(--font-primary);	

}

.stat-label {
    font-size: 16px;
    opacity: 0.9;
}

/* Why Section */
.why-section {
    background-color: var(--light-color);
}

.content-columns {
    display: flex;
    align-items: center;
    gap: 40px;
}

.text-column, .image-column {
    flex: 1;
}

.highlight {
    font-size: 34px;
    color: var(--primary-color);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 20px;
    font-family: var(--font-primary);	
}

/* Clients Section */
.clients-section {
        background: linear-gradient(135deg, #000000 0%, #3f4143 100%);
}

.client-types {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 40px;
}

.client-type {
    flex: 1;
    background-color: var(--light-color);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    transition: var(--transition);
}

.client-type:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.icon {
    font-size: 40px;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.client-type h3 {
    margin-bottom: 15px;
}

.client-note {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
	font-family: var(--font-primary);
	font-size:1.1rem;
}

/* Benefits Section */
.benefits-section {
    background-color: var(--light-color);
}

.benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

.benefit {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
}

.benefit:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.benefit-icon {
    font-size: 30px;
    color: var(--secondary-color);
    margin-bottom: 20px;
}

.benefit h3 {
    margin-bottom: 15px;
}

/* Solution Section */
.solution-section {
        background: linear-gradient(135deg, #000000 0%, #3f4143 100%);
}

.solution-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.solution-feature {
    padding: 30px;
    border-radius: 10px;
    background-color: var(--light-color);
}

.solution-feature h3 {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.solution-feature h3 i {
    margin-right: 10px;
    color: var(--primary-color);
	font-size:2.0rem;
}


.solution-feature ul {
    list-style: none;
}

.solution-feature ul li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px;
}

.solution-feature ul li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--success-color);
    font-weight: bold;
}

/* Comparison Section */
.comparison-section {
    background-color: var(--light-color);
}

.table-responsive {
    overflow-x: overlay;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
    background-color: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    overflow: hidden;
}

.comparison-table th, .comparison-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.comparison-table th {
    background-color: var(--primary-color);
    color: white;
}

.comparison-table tr:last-child td {
    border-bottom: none;
}

.comparison-table tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Testimonials Section */
.testimonials-section {
/*     background-color: #ebf1f5;*/
	    background: linear-gradient(135deg, #000000 0%, #3f4143 100%);
    text-align: center;
}

.testimonials-section h2 {
    color: var(--light-color);
    text-align: center;
}

.testimonials-section {
/*     background-color: #ebf1f5;
 */        background: linear-gradient(135deg, #000000 0%, #3f4143 100%);
    text-align: center;
}

.testimonial-intro {
    max-width: 800px;
    margin: 0 auto 30px;
    font-size: 18px;
    color: var(--light-color);
}

.testimonial-highlight {
    background-color: var(--light-color);
    padding: 30px;
    border-radius: 10px;
    max-width: 800px;
    margin: 0 auto 40px;
    font-size: 18px;
    font-weight: 500;
	font-family: var(--font-primary);	
}

.partners-logos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 40px;
}

.partner-logo {
    max-width: 150px;
/*     filter: grayscale(100%);*/
	filter: invert(100%);	
    opacity: 1;
    transition: var(--transition);
	margin: 0 0 -60px 0;
}

.partner-logo:hover {
    /* filter: grayscale(0); */
	
    opacity: 0.7;
}

/* Contact Section */
.contact-section {
    /* background: linear-gradient(135deg, #000000 0%, #3f4143 100%); */
    color: #000000;
    text-align: center;
}

.contact-section h2 {
    color: #000000	;
}

.contact-intro {
    max-width: 800px;
    margin: 0 auto 40px;
    font-size: 18px;
}

.contact-form-container {
    max-width: 600px;
    margin: 0 auto;
    background-color: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.contact-form {
    text-align: left;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--dark-color);
}

.form-group input, .form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-family: var(--font-primary);
    font-size: 16px;
}

.form-group textarea {
    resize: vertical;
}

/* Footer */
footer {
    /* background-color: var(--dark-color); */
	background: linear-gradient(135deg, #000000 0%, #3f4143 100%);	
    color: white;
    padding: 60px 0 20px;
}

.footer-section {
	background-color: #000000;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-info, .footer-contact, .footer-social {
    flex: 1;
    min-width: 250px;
}

.footer-info h3, .footer-contact h3, .footer-social h3 {
    color: white;
    margin-bottom: 20px;
    font-size: 18px;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: white;
    transition: var(--transition);
}

.social-links a:hover {
    background-color: var(--primary-color);
    transform: translateY(-3px);
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.success-message {
    color: #000 !important;
}

/* Media Queries */
@media (max-width: 992px) {
    .hero .container {
        flex-direction: column;
    }
    
    .hero-content {
        padding-right: 0;
        margin-top: 0;
        text-align: center;
    }
	
	.logo h1 {
		border-bottom: 1px solid #000;
		padding: 6px 0px 6px;
	}
	
	.tagline {
        margin: 10px 70px;
		font-size: 11px;
		text-transform: uppercase;	
    }
    
    .content-columns {
        flex-direction: column;
    }
    
    .client-types {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    header .container {
        flex-direction: column;
    }
	
.logo {
    text-align:center;
}	
    
    nav ul {
        margin-top: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    nav ul li {
        margin: 0 10px 10px;
    }
	
    nav ul li:last-child {
        width:220px;
    }
	
    .stats .container {
        flex-direction: column;
    }
    
    .stat-item {
        margin-bottom: 20px;
    }
    
    .hero-content h1 {
        font-size: 32px;
    }
    
    section {
        padding: 60px 0;
    }
}

@media (max-width: 576px) {
    .hero-content h1 {
        font-size: 28px;
    }
    
    .highlight {
        font-size: 20px;
    }
    
    .contact-form-container {
        padding: 20px;
    }
}

.background-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
}

.page-hero {
    position: relative;
    overflow: hidden;
}

.background-video-content {
    position: relative;
    z-index: 1;
}

video[poster] {
    object-fit: cover;
    width: 100%;
    height: 100%;
}





/* Styles pour la section Outil Magique RoomForDay */
/* Adapté au style existant du site partners-roomforday.com */

.magic-tool-section {
    background: linear-gradient(135deg, #000000 0%, #3f4143 100%);
    color: white;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.magic-tool-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.03)"/><circle cx="20" cy="80" r="0.5" fill="rgba(255,255,255,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
    pointer-events: none;
}

.magic-tool-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2 {
    font-size: 42px;
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.2;
	color: var(--primary-color);
}

.section-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
	color: var(--primary-color);
    font-family: var(--font-primary);
}

.section-intro {
    font-size: 1.2rem;
    opacity: 0.9;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

.magic-steps {
    margin-bottom: 60px;
}

.step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 50px;
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 30px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}

.step:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.step-number {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #1f2937;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin-right: 30px;
    flex-shrink: 0;
    box-shadow: 0 5px 15px rgba(251, 191, 36, 0.3);
    border: 2px solid rgba(255,255,255,0.3);
}

.step-content {
    flex: 1;
}

.step-content h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.step-highlight {
    font-size: 1.2rem;
    font-weight: 600;
    color: #fbbf24;
    margin-bottom: 20px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

.feature-item {
    background: rgba(255,255,255,0.1);
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 0.95rem;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.2s ease;
}

.feature-item:hover {
    background: rgba(255,255,255,0.2);
    transform: translateX(5px);
}

.feature-note {
    font-style: italic;
    opacity: 0.8;
    margin-top: 15px;
    font-size: 0.9rem;
    padding: 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    border-left: 3px solid #fbbf24;
}

.magic-benefits {
    margin-bottom: 60px;
}

.magic-benefits h3 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 40px;
    color: #fbbf24;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.benefit-card {
    background: rgba(255,255,255,0.1);
    padding: 30px 25px;
    border-radius: 15px;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.benefit-card::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 ease;
}

.benefit-card:hover::before {
    left: 100%;
}

.benefit-card:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.benefit-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
}

.benefit-card h4 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    font-weight: 600;
    color: #fbbf24;
}

.benefit-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefit-card li {
    margin-bottom: 10px;
    font-size: 0.95rem;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.benefit-card li:last-child {
    border-bottom: none;
}

.testimonials-magic {
    margin-bottom: 60px;
}

.testimonials-magic h3 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 40px;
    color: #fbbf24;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
}

.testimonial-card {
    background: rgba(255,255,255,0.15);
    padding: 30px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.3s ease;
    position: relative;
}

.testimonial-card::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 20px;
    font-size: 4rem;
    color: #fbbf24;
    opacity: 0.3;
    font-family: serif;
}

.testimonial-card:hover {
    background: rgba(255,255,255,0.2);
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.testimonial-content {
    font-style: italic;
    font-size: 1.1rem;
    margin-bottom: 25px;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.testimonial-author {
    text-align: right;
    opacity: 0.9;
    font-size: 0.95rem;
}

.testimonial-author strong {
    color: #fbbf24;
    font-size: 1.05rem;
}

.magic-cta {
    background: rgba(255,255,255,0.15);
    border-radius: 20px;
    padding: 50px 40px;
    text-align: center;
    margin: 60px 0;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.2);
    position: relative;
    overflow: hidden;
}

.magic-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(251,191,36,0.1) 0%, transparent 70%);
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.3; }
    50% { transform: scale(1.1) rotate(180deg); opacity: 0.1; }
}

.cta-content {
    position: relative;
    z-index: 1;
}

.cta-content h3 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.cta-subtitle {
    font-size: 1.3rem;
    color: #fbbf24;
    margin-bottom: 30px;
    font-weight: 600;
}

.cta-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
}

.cta-steps span {
    background: rgba(255,255,255,0.2);
    padding: 10px 18px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,0.3);
    transition: all 0.2s ease;
}

.cta-steps span:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-2px);
}

.btn-magic-primary {
    display: inline-block;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #1f2937;
    padding: 20px 40px;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 25px;
    border: 2px solid rgba(255,255,255,0.3);
    box-shadow: 0 10px 25px rgba(251, 191, 36, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-magic-primary:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(251, 191, 36, 0.4);
    color: #1f2937;
    text-decoration: none;
}

.cta-contact {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.2);
}

.cta-contact p {
    margin: 8px 0;
    font-size: 1.1rem;
    opacity: 0.9;
}

.cta-contact strong {
    color: #fbbf24;
}

.magic-faq {
    margin-bottom: 60px;
}

.magic-faq h3 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 40px;
    color: #fbbf24;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
}

.faq-item {
    background: rgba(255,255,255,0.1);
    padding: 25px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}

.faq-item:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.faq-item h4 {
    color: #fbbf24;
    margin-bottom: 15px;
    font-size: 1.1rem;
    font-weight: 600;
}

.faq-item p {
    line-height: 1.6;
    font-size: 0.95rem;
}

.faq-item strong {
    color: #fbbf24;
}

.magic-footer {
    text-align: center;
    margin-top: 60px;
    padding-top: 40px;
    border-top: 2px solid rgba(255,255,255,0.2);
}

.magic-tagline {
    font-size: 1.3rem;
    line-height: 1.6;
    font-weight: 500;
}

.magic-tagline strong {
    color: #fbbf24;
    font-size: 1.4rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .step {
        flex-direction: column;
        text-align: center;
        padding: 25px 20px;
    }
    
    .step-number {
        margin-right: 0;
        margin-bottom: 20px;
    }
    
    .feature-grid {
        grid-template-columns: 1fr;
    }
    
    .section-header h2 {
        font-size: 2.2rem;
    }
    
    .cta-content h3 {
        font-size: 2rem;
    }
    
    .cta-steps {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-steps span {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }
    
    .btn-magic-primary {
        padding: 18px 30px;
        font-size: 1.1rem;
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .faq-grid {
        grid-template-columns: 1fr;
    }
    
    .magic-tool-section {
        padding: 60px 0;
    }
    
    .magic-cta {
        padding: 40px 20px;
        margin: 40px 0;
    }
}

@media (max-width: 480px) {
    .section-header h2 {
        font-size: 1.8rem;
    }
    
    .step-content h3 {
        font-size: 1.5rem;
    }
    
    .step-highlight {
        font-size: 1.1rem;
    }
    
    .magic-benefits h3,
    .testimonials-magic h3,
    .magic-faq h3 {
        font-size: 1.8rem;
    }
    
    .cta-content h3 {
        font-size: 1.7rem;
    }
    
    .benefit-icon {
        font-size: 2.5rem;
    }
    
    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }
}

/* ========================================================= */
/* CSS pour la section "L'Outil Magique" et les boutons */
/* ========================================================= */

/* 1. Grille principale pour le contenu et la vidéo */
.magic-tool-grid {
    display: grid;
    grid-template-columns: 1fr; /* Une seule colonne sur mobile */
    gap: 2rem;
    align-items: center;
    margin-top: 2rem;
}

/* 2. Conteneur des boutons d'action */
.magic-tool-buttons {
    /* Active Flexbox */
    display: flex;
    
    /* Centre les boutons horizontalement */
    justify-content: center; 
    
    /* Permet aux boutons de passer à la ligne si l'espace manque */
    flex-wrap: wrap; 
    
    /* Crée un espace propre entre les boutons */
    gap: 1rem; 
    
    /* Ajoute un espace au-dessus des boutons */
    margin-top: 1.5rem;
}

/* 3. Style des boutons eux-mêmes */
.magic-tool-buttons .btn-primary,
.magic-tool-buttons .btn-secondary {
    /* Supprime les marges par défaut qui pourraient gêner le centrage */
    margin: 0; 
}

/* 4. Conteneur et iFrame de la vidéo */
.magic-tool-video .video-wrapper {
    position: relative;
    padding-bottom: 50.25%; /* Ratio 16:9 */
    height: 0;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.magic-tool-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* 5. Mise en page pour les écrans larges (ordinateurs) */
@media (min-width: 992px) {
    /* La grille passe à deux colonnes */
    .magic-tool-grid {
        grid-template-columns: 1fr 1fr; /* Deux colonnes égales */
        gap: 3rem;
    }

    /* Sur grand écran, on aligne les boutons à gauche du bloc de texte */
    .magic-tool-buttons {
        align-items: center;
    }
}

/* ... autres styles ... */

/* --- Navigation principale (Desktop) --- */
/* ON LAISSE UNIQUEMENT LES STYLES COMMUNS ICI */
.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ... autres styles ... */

/* --- RESPONSIVE : Styles pour mobiles (< 992px) --- */
@media (max-width: 991px) {
    .main-nav {
        display: none; /* Cache la nav sur mobile */
    }
    .nav-toggle {
        display: block; /* Affiche le burger sur mobile */
    }
    /* ... reste des styles pour le menu ouvert ... */
}

/* --- RESPONSIVE : Styles pour desktop (> 992px) --- */
@media (min-width: 992px) {
    .site-header .tagline {
        display: block;
		text-transform: uppercase;
        font-size: 11px;
    }
    
    /* ▼▼▼ ON MET LA RÈGLE FLEX ICI ▼▼▼ */
    .main-nav ul {
        display: flex; /* Active Flexbox UNIQUEMENT sur desktop */
        align-items: center;
        gap: 20px;
    }
}


/* ================================================== */
/* CSS HEADER - VERSION FINALE AVEC HTML CORRECT      */
/* ================================================== */

/* --- Styles de base (Desktop First) --- */
.site-header {
    background: white;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-header .logo img {
    height: 40px;
    display: block;
	text-align: center;
    width: 100%;
}

/* Nav Desktop */
.main-nav ul {
    display: flex;
    align-items: center;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-nav a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
}
.main-nav .btn-primary {
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #000;
    color: white;
    font-weight: bold;
}

/* Burger (caché sur desktop) */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
    padding: 10px;
}
.nav-toggle .hamburger {
    width: 24px;
    height: 2px;
    background: #333;
    position: relative;
    transition: background-color 0.3s ease;
	display:block;
}
.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #333;
    left: 0;
    transition: transform 0.3s ease;
}
.nav-toggle .hamburger::before { top: -8px; }
.nav-toggle .hamburger::after { bottom: -8px; }


/* --- Media Query pour Mobile (< 992px) --- */
@media (max-width: 991px) {
    /* On cache la nav desktop */
    .main-nav {
        display: none;
    }
    /* On affiche le burger */
    .nav-toggle {
        display: block;
    }

    /* Styles du menu ouvert */
    body.nav-open .main-nav {
        display: flex; /* Utiliser flex pour centrer le contenu */
        flex-direction: column;
        align-items: center;
        position: fixed;
        top: 0;
        right: 0;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: white;
        padding-top: 80px;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }
    body.nav-open .main-nav ul {
        flex-direction: column;
        gap: 30px;
    }

    /* Animation de la croix */
    body.nav-open .nav-toggle .hamburger {
        background-color: transparent;
    }
    body.nav-open .nav-toggle .hamburger::before {
        transform: translateY(8px) rotate(45deg);
    }
    body.nav-open .nav-toggle .hamburger::after {
        transform: translateY(-8px) rotate(-45deg);
    }
}


/* =============================================== */
/* === STYLES POUR LE NOUVEAU FOOTER RESPONSIVE ==== */
/* =============================================== */

.site-footer {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100% );
    color: #a0a0a0; /* Couleur de texte plus douce que le blanc pur */
    padding: 60px 0 30px;
    font-size: 15px;
}

.footer-grid {
    display: grid;
    /* Une seule colonne par défaut pour les mobiles */
    grid-template-columns: 1fr; 
    gap: 40px; /* Espace entre les colonnes sur mobile */
    margin-bottom: 40px;
}

.footer-column h3.footer-title {
    font-family: var(--font-primary);
    color: #ffffff;
    font-size: 1.2rem;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

/* Petite ligne décorative sous les titres */
.footer-column h3.footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--secondary-color); /* Utilise votre couleur secondaire */
}

.footer-about p {
    margin-bottom: 20px;
    line-height: 1.7;
}

.footer-logo img {
    max-width: 150px;
    filter: invert(1) grayscale(1) brightness(1.5); /* Adapte le logo pour un fond sombre */
    opacity: 0.8;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #a0a0a0;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: #ffffff;
    padding-left: 5px; /* Petit effet de décalage au survol */
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid #333;
    font-size: 14px;
}

.footer-bottom p {
    margin: 0;
    opacity: 0.7;
}

.footer-bottom .footer-tagline {
    margin-top: 5px;
    font-style: italic;
}

/* --- RESPONSIVE : Mise en page pour les écrans larges --- */
@media (min-width: 768px) {
    .footer-grid {
        /* Passe à 3 colonnes sur les tablettes et ordinateurs */
        grid-template-columns: repeat(4, 1fr);
        gap: 30px; /* Espace entre les colonnes */
    }
}

/* =============================================== */
/* === STYLES POUR LA POPUP (MODALE ) LÉGALE ==== */
/* =============================================== */

/* Le fond semi-transparent qui couvre toute la page */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fond noir semi-transparent */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Doit être supérieur au header */
    padding: 20px;
}

/* Le conteneur blanc de la popup */
.popup-container {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 900px; /* Largeur maximale de la popup */
    height: 90%; /* Hauteur maximale */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Empêche le contenu de déborder */
}

/* L'en-tête de la popup */
.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.popup-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #333;
}

.popup-close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: #888;
    cursor: pointer;
    transition: color 0.3s ease;
}

.popup-close-btn:hover {
    color: #000;
}

/* Le conteneur du contenu (l'iframe) */
.popup-content {
    flex-grow: 1; /* Fait en sorte que le contenu prenne toute la place restante */
    -webkit-overflow-scrolling: touch; /* Améliore le scroll sur iOS */
}

#popup-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* =============================================== */
/* === STYLES POUR LE DIAPORAMA DE LA SECTION HERO === */
/* =============================================== */

.hero-slideshow {
    flex: 1;
    position: relative;
    border-radius: 10px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden; /* Important pour que les coins arrondis s'appliquent */
    min-height: 400px; /* Hauteur minimale pour le diaporama */
}

.hero-slideshow .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* L'image couvre toute la zone */
    background-position: center; /* L'image est centrée */
    
    /* Effet de fondu */
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    
    /* Ajoute un léger assombrissement pour que le texte ressorte mieux si besoin */
    /* &::after {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.1);
    } */
}

/* La classe 'active' rend l'image visible */
.hero-slideshow .slide.active {
    opacity: 1;
}

/* On s'assure que la div .hero-image originale n'interfère pas */
.hero-image {
    display: none;
}

/* Sur mobile, on cache le diaporama pour ne pas surcharger */
@media (max-width: 991px) {
    .hero-slideshow {
        display: none;
    }
}


/* ================================================== */
/* === AMÉLIORATION DE LA SECTION "SOLUTION" v2   ==== */
/* ================================================== */

/* 1. On prépare la section pour le positionnement */
#solution.solution-section {
    position: relative; /* Indispensable pour positionner l'image à l'intérieur */
    overflow: hidden; /* Empêche l'image de déborder */
}

/* 2. On stylise l'image de fond */
.solution-background-image {
    position: absolute; /* Se positionne par rapport à la section */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Équivalent de background-size: cover, l'image remplit l'espace sans se déformer */
    
    /* ▼▼▼ L'OPACITÉ DEMANDÉE ▼▼▼ */
    opacity: 0.5;
    
    /* On place l'image derrière le contenu */
    z-index: 1;
}

/* 3. On s'assure que le contenu (le container) est bien par-dessus */
#solution.solution-section .container {
    position: relative; /* Nécessaire pour que z-index fonctionne */
    z-index: 2; /* Doit être supérieur au z-index de l'image */
}


/* =============================================== */
/* === ANIMATIONS AU DÉFILEMENT (SCROLL)         === */
/* =============================================== */

/* 
  1. Classe de préparation :
  Tous les éléments à animer auront cette classe.
  Ils sont invisibles et légèrement décalés vers le bas par défaut.
*/
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 
  2. Classe d'activation :
  Quand l'élément devient visible, cette classe est ajoutée par JavaScript.
  L'élément devient opaque et remonte à sa position d'origine.
*/
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 
  3. Animation spécifique pour les compteurs de la section #stats
  Nous allons les faire apparaître les uns après les autres.
*/
.stats .stat-item {
    transition-delay: 0s; /* Délai de base */
}
.stats .stat-item:nth-child(2) { transition-delay: 0.2s; }
.stats .stat-item:nth-child(3) { transition-delay: 0.4s; }
.stats .stat-item:nth-child(4) { transition-delay: 0.6s; }

/* 
  4. Animation spécifique pour les cartes des sections #clients et #avantages
*/
.client-types .client-type,
.benefits .benefit {
    transition-delay: 0s;
}
.client-types .client-type:nth-child(2),
.benefits .benefit:nth-child(2) {
    transition-delay: 0.2s;
}
.client-types .client-type:nth-child(3),
.benefits .benefit:nth-child(3) {
    transition-delay: 0.4s;
}
.client-types .client-type:nth-child(4),
.benefits .benefit:nth-child(4) {
    transition-delay: 0.6s;
}

/* =============================================== */
/* === ANIMATIONS AU DÉFILEMENT (SCROLL)         === */
/* =============================================== */

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animation en cascade pour les stats */
.stats .stat-item { transition-delay: 0s; }
.stats .stat-item:nth-child(2) { transition-delay: 0.2s; }
.stats .stat-item:nth-child(3) { transition-delay: 0.4s; }
.stats .stat-item:nth-child(4) { transition-delay: 0.6s; }

/* ... (les autres styles d'animation) ... */


/* ================================================== */
/* === EFFET PARALLAX POUR LA SECTION "SOLUTION"  ==== */
/* ================================================== */

/* 1. On s'assure que la section est prête */
#solution.solution-section {
    position: relative;
    overflow: hidden;
}

/* 2. On modifie l'image de fond pour l'effet parallax */
.solution-background-image {
    position: absolute;
    left: 0;
    top: 0; /* On ancre l'image en haut */
    width: 100%;
    
    /* ▼▼▼ MODIFICATION IMPORTANTE ▼▼▼ */
    /* On rend l'image plus haute que la section (ex: 140%) */
    /* pour avoir de la marge pour le déplacement vertical. */
    height: 140%; 
    
    object-fit: cover;
    opacity: 0.5;
    z-index: 1;

    /* On ajoute une transition pour un mouvement plus doux */
    transition: transform 0.2s ease-out;
}

/* 3. Le contenu reste au-dessus (inchangé) */
#solution.solution-section .container {
    position: relative;
    z-index: 2;
}

/* ================================================== */
/* === ANIMATIONS AU SURVOL (HOVER)               ==== */
/* ================================================== */

/* --- 1. Préparation des cartes pour l'animation --- */

/* On cible les cartes des deux sections */
.client-type,
.benefit {
    /* On s'assure que la transition est appliquée sur toutes les propriétés */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* On prépare les icônes pour la transition de couleur */
.client-type .icon,
.benefit .benefit-icon {
    transition: color 0.4s ease;
}


/* --- 2. Définition des animations au survol (:hover) --- */

.client-type:hover,
.benefit:hover {
    /* La carte se soulève et grossit légèrement */
    transform: translateY(-10px) scale(1.03);
    
    /* L'ombre devient plus douce et plus étendue */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* Animation de l'icône pour la section #clients */
.client-type:hover .icon {
    /* L'icône prend la couleur d'accent bleue */
    color: #718096; 
}

/* Animation de l'icône pour la section #avantages */
.benefit:hover .benefit-icon {
    /* L'icône prend la couleur d'accent noire/secondaire */
    color: var(--secondary-color);
}

/* --- 3. (Optionnel) Amélioration : Rendre les icônes grises par défaut --- */

/* Pour que l'effet de couleur soit plus visible, 
   on peut mettre les icônes en gris par défaut. */

.client-type .icon {
    color: #718096; /* Un gris neutre */
}

.benefit .benefit-icon {
    color: #718096; /* Un gris neutre */
}


.floating-cta {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    background-color: #387bf3;
    color: white !important;
    padding: 15px 30px;
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    font-family: var(--font-primary);
    font-weight: bold;
    transition: all 0.4s ease;
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
}

.floating-cta:hover {
    background-color: var(--primary-color);
    transform: translateX(-50%) translateY(20px);
}
.floating-cta.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}



/* ================================================== */
/* CORRECTION DU PROBLÈME DE VIDÉO HERO              */
/* ================================================== */

/* Section hero avec positionnement relatif pour contenir la vidéo */
.hero {
    position: relative; /* AJOUT IMPORTANT */
    padding: 240px 0;
    height: 676px;
    background: linear-gradient(135deg, #000000 0%, #3f4143 100%);
    overflow: hidden; /* AJOUT IMPORTANT - empêche la vidéo de déborder */
}

/* Vidéo de fond correctement positionnée */
.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Prend exactement la hauteur de la section hero */
    object-fit: cover; /* AJOUT IMPORTANT - maintient les proportions */
    opacity: 0.5;
    z-index: 1; /* AJOUT IMPORTANT - place la vidéo derrière le contenu */
}

/* Contenu hero au-dessus de la vidéo */
.hero .container {
    position: relative; /* AJOUT IMPORTANT */
    z-index: 2; /* AJOUT IMPORTANT - place le contenu au-dessus de la vidéo */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hero-content {
    flex: 1;
    z-index: 3; /* AJOUT IMPORTANT - s'assure que le contenu est au premier plan */
    text-align: center;
    position: relative; /* AJOUT IMPORTANT */
}

/* Section stats - s'assurer qu'elle commence après la hero */
.stats {
    background-color: var(--success-color);
    color: white;
    padding: 40px 0;
    position: relative;
    z-index: 4; /* AJOUT IMPORTANT - s'assure que stats est au-dessus */
    margin-top: 0; /* AJOUT IMPORTANT - pas d'espace supplémentaire */
}

/* Media queries pour responsive */
@media (max-width: 992px) {
    .hero {
        height: auto; /* Hauteur automatique sur mobile */
        min-height: 500px; /* Hauteur minimale */
        padding: 120px 0;
    }
    
    .background-video {
        height: 100%; /* S'adapte à la nouvelle hauteur */
    }
}

@media (max-width: 768px) {
    .hero {
        min-height: 400px;
        padding: 80px 0;
    }
}

/* Correction pour les anciens styles qui pourraient interférer */
.page-hero {
    position: relative;
    overflow: hidden;
}

.background-video-content {
    position: relative;
    z-index: 1;
}

/* S'assurer que la vidéo ne déborde jamais */
video {
    max-width: 100%;
    max-height: 100%;
}





.video-wrapper {
  position: relative;
  max-width: 600px;
  aspect-ratio: 2 / 1; /* 600x300 = ratio 2:1 */
  margin: auto;
  overflow: hidden;
}

/* Poster */
.video-poster {
  position: absolute;
  inset: 0;
  cursor: pointer;
  transition: opacity 0.5s ease;
  z-index: 2;
}

.video-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* garde le ratio mais remplit */
  border-radius: 8px;
  display: block;
  border-right: 8px solid #4b71ef;
  border-bottom: 8px solid #4b71ef;
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: white;
  background: rgba(56,123,243,0.7);
  border: none;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  cursor: pointer;
}

/* Vidéo */
#loomVideo {
  width: 100%;
  height: 100%;
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  border-radius: 8px;
}