/* Feuille de style dédiée à la page Contact (app contact) */

/* ==========================================
   CSS CUSTOM PROPERTIES
   ========================================== */
:root {
	--primary-charcoal: #2D3748;
	--secondary-grey: #4A5568;
	--accent-red: #E53E3E;
	--success-green: #38A169;
	--warning-orange: #DD6B20;
	--light-grey: #A0AEC0;
	--very-light-grey: #F7FAFC;
	--glass-grey: #E2E8F0;
	--pure-white: #FFFFFF;
	--font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
	--font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;
	--space-3xl: 4rem;
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-2xl: 24px;
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	--ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
}

* { box-sizing: border-box; }

/* LAYOUT */
.contact-page { min-height: 100vh; position: relative; font-family: var(--font-text); color: var(--primary-charcoal); overflow-x: hidden; width: 100%; max-width: none; margin: 0; padding: 0; }
.hero-content, .contact-info-grid, .contact-form-section, .reviews-section { max-width: 100vw; width: 100%; margin-left: 0; margin-right: 0; padding-left: max(2vw, var(--space-3xl)); padding-right: max(2vw, var(--space-3xl)); }
.contact-info-grid { max-width: 100vw; width: 100%; margin-left: 0; margin-right: 0; padding-left: max(2vw, var(--space-3xl)); padding-right: max(2vw, var(--space-3xl)); }
.contact-form-section, .reviews-section { max-width: 100vw; width: 100%; margin-left: 0; margin-right: 0; padding-left: max(2vw, var(--space-3xl)); padding-right: max(2vw, var(--space-3xl)); }
.contact-info-card, .form-container, .reviews-card { max-width: 520px; margin-left: auto; margin-right: auto; }

@media (max-width: 1200px) { .hero-content, .contact-info-grid, .contact-form-section, .reviews-section { padding-left: var(--space-lg); padding-right: var(--space-lg); } }
@media (max-width: 768px) { .hero-content, .contact-info-grid, .contact-form-section, .reviews-section { padding-left: var(--space-md); padding-right: var(--space-md); } }
@media (max-width: 480px) { .hero-content, .contact-info-grid, .contact-form-section, .reviews-section { padding-left: var(--space-xs); padding-right: var(--space-xs); } }

/* BACKGROUND */
.premium-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: linear-gradient(135deg, rgba(247, 250, 252, 0.9) 0%, rgba(237, 242, 247, 0.9) 25%, rgba(226, 232, 240, 0.9) 50%, rgba(237, 242, 247, 0.9) 75%, rgba(247, 250, 252, 0.9) 100%); }
.floating-shapes { position: absolute; width: 100%; height: 100%; overflow: hidden; }
.shape { position: absolute; border-radius: 50%; background: linear-gradient(45deg, rgba(229, 62, 62, 0.1), rgba(56, 161, 105, 0.1)); animation: float 20s infinite linear; }
.shape-1 { width: 80px; height: 80px; top: 20%; left: 10%; animation-delay: 0s; }
.shape-2 { width: 120px; height: 120px; top: 60%; right: 15%; animation-delay: -5s; }
.shape-3 { width: 60px; height: 60px; top: 80%; left: 30%; animation-delay: -10s; }
.shape-4 { width: 100px; height: 100px; top: 30%; right: 30%; animation-delay: -15s; }
.shape-5 { width: 140px; height: 140px; top: 10%; left: 60%; animation-delay: -7s; }
@keyframes float { 0%,100%{ transform: translateY(0) rotate(0); opacity: .5;} 25%{ transform: translateY(-20px) rotate(90deg); opacity:.8;} 50%{ transform: translateY(-40px) rotate(180deg); opacity:.3;} 75%{ transform: translateY(-20px) rotate(270deg); opacity:.8;} }
.mesh-gradient { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 30%, rgba(229,62,62,.03) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(56,161,105,.03) 0%, transparent 50%), radial-gradient(circle at 60% 20%, rgba(74,85,104,.02) 0%, transparent 50%); animation: meshMove 25s ease-in-out infinite; }
@keyframes meshMove { 0%,100%{ transform: scale(1) rotate(0);} 50%{ transform: scale(1.1) rotate(5deg);} }

/* HERO */
.contact-hero { padding: var(--space-3xl) var(--space-lg); text-align: center; position: relative; background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(247,250,252,.8) 100%); backdrop-filter: blur(10px); border-bottom: 1px solid var(--glass-grey); }
.hero-content { max-width: 1400px; margin: 0 auto; }
.hero-icon { margin-bottom: var(--space-lg); }
.hero-icon i { font-size: 4rem; color: var(--accent-red); animation: automotive-shine 3s ease-in-out infinite; }
@keyframes automotive-shine { 0%,100%{ text-shadow: 0 0 20px rgba(229,62,62,.3); transform: rotateY(0) scale(1);} 50%{ text-shadow: 0 0 40px rgba(229,62,62,.6); transform: rotateY(180deg) scale(1.1);} }
.hero-title { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; color: var(--primary-charcoal); margin-bottom: var(--space-md); line-height: 1.1; background: linear-gradient(135deg, var(--primary-charcoal), var(--secondary-grey)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-subtitle { font-size: 1.25rem; color: var(--secondary-grey); margin-bottom: var(--space-2xl); font-weight: 400; max-width: 600px; margin-left: auto; margin-right: auto; }

/* INFO CARDS */
.contact-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-xl); margin: var(--space-2xl) 0; max-width: 1400px; margin-left: auto; margin-right: auto; padding: 0 var(--space-lg); }
.contact-info-card { background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(247,250,252,.8)); backdrop-filter: blur(10px); border: 2px solid var(--glass-grey); border-radius: var(--radius-xl); padding: var(--space-2xl); text-align: center; transition: all .4s var(--ease-out-quart); position: relative; overflow: hidden; }
.contact-info-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(229,62,62,.1), transparent); transition: left .6s ease-in-out; }
.contact-info-card:hover::before { left: 100%; }
.contact-info-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-color: var(--accent-red); }
.contact-icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: linear-gradient(135deg, var(--accent-red), #C53030); color: #fff; border-radius: 50%; font-size: 2rem; margin-bottom: var(--space-lg); box-shadow: var(--shadow-lg); transition: all .3s var(--ease-out-quart); }
.contact-info-card:hover .contact-icon { transform: scale(1.1) rotateY(180deg); }
.contact-info-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: var(--primary-charcoal); margin-bottom: var(--space-md); }
.contact-info-card p { color: var(--secondary-grey); line-height: 1.6; margin-bottom: var(--space-lg); }
.contact-info-card a { color: var(--accent-red); text-decoration: none; font-weight: 600; font-family: var(--font-display); transition: all .3s var(--ease-out-quart); }
.contact-info-card a:hover { color: #C53030; text-shadow: 0 0 8px rgba(229, 62, 62, 0.3); }
.coming-soon { color: var(--light-grey); font-style: italic; font-size: .9rem; }

/* FORM */
.contact-form-section { max-width: 1000px; margin: var(--space-3xl) auto; padding: 0 var(--space-lg); }
.form-container { background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(247,250,252,.9)); backdrop-filter: blur(15px); border: 2px solid var(--glass-grey); border-radius: var(--radius-2xl); padding: var(--space-3xl); box-shadow: var(--shadow-xl); transition: all .3s var(--ease-out-quart); }
.form-container:hover { border-color: rgba(229,62,62,.3); box-shadow: var(--shadow-2xl); }
.form-header { text-align: center; margin-bottom: var(--space-2xl); }
.form-header h2 { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--primary-charcoal); margin-bottom: var(--space-sm); display: flex; align-items: center; justify-content: center; gap: var(--space-md); }
.form-header h2::before, .form-header h2::after { content: ''; width: 60px; height: 2px; background: linear-gradient(135deg, var(--accent-red), #C53030); border-radius: 1px; }
.form-header p { color: var(--secondary-grey); font-size: 1.1rem; margin: 0; }
.contact-form { display: grid; gap: var(--space-lg); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-lg); }
.form-group { display: flex; flex-direction: column; gap: var(--space-xs); }
.form-group label { font-family: var(--font-display); font-weight: 500; color: var(--primary-charcoal); font-size: .95rem; display: flex; align-items: center; gap: var(--space-xs); }
.form-group label i { color: var(--accent-red); font-size: .9rem; }
.form-group input, .form-group textarea { padding: var(--space-lg); border: 2px solid var(--glass-grey); border-radius: var(--radius-lg); font-family: var(--font-text); font-size: 1rem; background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(247,250,252,.8)); backdrop-filter: blur(5px); transition: all .3s var(--ease-out-quart); }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--accent-red); box-shadow: 0 0 0 3px rgba(229,62,62,.1); transform: translateY(-2px); }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--light-grey); }
.form-group textarea { min-height: 150px; resize: vertical; }

/* BUTTONS */
.btn-premium { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-lg) var(--space-2xl); font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; border: none; border-radius: var(--radius-lg); cursor: pointer; transition: all .3s var(--ease-out-quart); text-decoration: none; overflow: hidden; min-width: 200px; background: linear-gradient(135deg, var(--accent-red), #C53030); color: #fff; box-shadow: var(--shadow-lg); margin: var(--space-lg) auto 0; }
.btn-premium:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); background: linear-gradient(135deg, #C53030, var(--accent-red)); }
.btn-shine { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); transition: left .6s ease-in-out; }
.btn-premium:hover .btn-shine { left: 100%; }

/* MESSAGES */
.messages-section { max-width: 800px; margin: var(--space-lg) auto; padding: 0 var(--space-lg); }
.alert { padding: var(--space-lg); border-radius: var(--radius-lg); display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); font-family: var(--font-text); backdrop-filter: blur(10px); }
.alert-success { background: linear-gradient(145deg, rgba(56,161,105,.1), rgba(104,211,145,.05)); border: 1px solid rgba(56,161,105,.3); color: var(--success-green); }
.alert-error { background: linear-gradient(145deg, rgba(229,62,62,.1), rgba(197,48,48,.05)); border: 1px solid rgba(229,62,62,.3); color: var(--accent-red); }
.alert i { font-size: 1.2rem; flex-shrink: 0; }

/* REVIEWS SECTION */
.reviews-section { max-width: 1000px; margin: var(--space-3xl) auto; padding: 0 var(--space-lg); }
.reviews-card { background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(247,250,252,.9)); backdrop-filter: blur(15px); border: 2px solid var(--glass-grey); border-radius: var(--radius-2xl); padding: var(--space-3xl); box-shadow: var(--shadow-xl); text-align: center; transition: all .3s var(--ease-out-quart); }
.reviews-card:hover { border-color: rgba(56,161,105,.3); box-shadow: var(--shadow-2xl); }
.reviews-card h2 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; color: var(--primary-charcoal); margin-bottom: var(--space-md); display: flex; align-items: center; justify-content: center; gap: var(--space-sm); }
.reviews-card h2 i { color: var(--success-green); font-size: 1.5rem; }
.reviews-card p { color: var(--secondary-grey); font-size: 1.1rem; margin-bottom: var(--space-xl); line-height: 1.6; }
.btn-secondary { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-lg) var(--space-2xl); font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; border: none; border-radius: var(--radius-lg); cursor: pointer; transition: all .3s var(--ease-out-quart); text-decoration: none; overflow: hidden; min-width: 200px; background: linear-gradient(135deg, var(--success-green), #2F855A); color: #fff; box-shadow: var(--shadow-lg); }
.btn-secondary:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); background: linear-gradient(135deg, #2F855A, var(--success-green)); }

/* RESPONSIVE */
@media (max-width: 768px) {
	.hero-content { padding: 0 var(--space-md); }
	.contact-info-grid { grid-template-columns: 1fr; gap: var(--space-md); padding: 0 var(--space-md); }
	.form-row { grid-template-columns: 1fr; }
	.form-container, .reviews-card { padding: var(--space-xl); margin: var(--space-lg) var(--space-md); }
	.contact-form-section, .reviews-section { padding: 0 var(--space-md); }
}
@media (max-width: 480px) {
	.hero-title { font-size: 2rem; }
	.hero-subtitle { font-size: 1rem; }
	.contact-info-card { padding: var(--space-lg); }
	.contact-icon { width: 60px; height: 60px; font-size: 1.5rem; }
	.btn-premium, .btn-secondary { padding: var(--space-md) var(--space-lg); font-size: 1rem; min-width: 180px; }
}

/* LOADING */
@keyframes shimmer { 0%{ transform: translateX(-100%);} 100%{ transform: translateX(100%);} }
.loading-shimmer { background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); background-size: 200px 100%; animation: shimmer 1.5s infinite; }

/* EXTRA BOTTOM STYLES migrated from template */
.reviews-section h2 { margin-bottom: 1rem; font-size: 1.5rem; color: #2563eb; }
.review-form { display: flex; flex-direction: column; gap: 1.2rem; margin-bottom: 2rem; }
.reviews-display ul { list-style: none; padding: 0; }
.reviews-display li { margin-bottom: 1.5rem; padding: 1rem; border: 1px solid #e2e8f0; border-radius: 5px; background: #fff; }
.reviews-display li p { margin: 0.5rem 0; }
.contact-form-container { background: #f9f9f9; border-radius: 10px; padding: 2rem; box-shadow: 0 2px 10px rgba(0,0,0,.1); margin-top: 2rem; }
.contact-form { display: flex; flex-direction: column; gap: 1.2rem; }
.form-group label { font-weight: 500; }
.submit-btn { background: linear-gradient(90deg, #2563eb 0%, #38bdf8 100%); color: #fff; border: none; padding: 0.8rem 1.5rem; border-radius: 4px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; align-self: flex-start; }
.submit-btn:hover { background: linear-gradient(90deg, #1d4ed8 0%, #0ea5e9 100%); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37,99,235,.2); }
.alert { padding: 1rem; border-radius: 4px; margin-top: 1rem; }
.alert-success { background-color: #dcfce7; color: #166534; border: 1px solid #6ee7b7; }
.alert-error { background-color: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* Legacy redirect container */
.contact-legacy-redirect { display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: center; min-height: 40vh; }