* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Arial', sans-serif;} /* Par défaut : mode clair sur */ html { line-height: 1.6; color: #1f2a44; background-color: #f9fafb; transition: background-color 0.3s ease, color 0.3s ease; } /* Mode sombre sur */ html.dark-mode { background-color: #1f2a44; color: #f9fafb; } /* Body hérite des styles de html */ body { background-color: inherit; color: inherit; overflow-x: hidden; } a {color: #1f2a44;text-decoration: none;} a:hover {color: #00c4cc;text-decoration: underline;} nav {position: fixed;top: 0;width: 100%;background: #e6f0fa;padding: 1rem 2rem;z-index: 1000;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);transition: padding 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;animation: slideInDown 0.5s ease-out forwards;} @keyframes slideInDown { from {opacity: 0;transform: translateY(-20px);} to {opacity: 1;transform: translateY(0);} } @keyframes fadeInUp { from {opacity: 0;transform: translateY(20px);} to {opacity: 1;transform: translateY(0);} } @keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} } nav.scrolled {padding: 0.5rem 2rem;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);} .nav-container {max-width: 1000px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;} .logo {transition: transform 0.3s;} .logo img {height: 70px;transition: transform 0.3s;} .logo:hover {transform: scale(1.05);} nav.scrolled .logo img {height: 45px;} /* Logo */ .logo .logo-light {display: block;} .logo .logo-dark {display: none;} .nav-menu {list-style: none;display: flex;gap: 2rem;align-items: center;} .nav-menu a {color: #1f2a44;text-decoration: none;font-weight: bold;transition: color 0.3s, transform 0.3s;} .nav-menu a:hover {color: #00c4cc;text-decoration: none;transform: scale(1.05);} .burger {display: none;font-size: 1.8rem;color: #1f2a44;background: none;border: none;cursor: pointer;transition: transform 0.3s;} .burger:hover {transform: rotate(90deg);} .mode-toggle {background: none;border: none;font-size: 1.5rem;cursor: pointer;color: #1f2a44;transition: color 0.3s, transform 0.3s;} .mode-toggle:hover {color: #00c4cc;transform: rotate(15deg);} header {position: relative;background: #3a4a66;color: #f9fafb;text-align: center;padding: 5rem 1rem 4rem;margin-top: 82px;transition: background 0.3s ease;overflow: hidden;} header::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(135deg, #e6f0fa, #00c4cc);z-index: -1;transform: translateY(0);transition: transform 0.3s ease;} header.parallax::before {transform: translateY(calc(var(--scroll) * 0.2));} header h1 {font-size: 1.3rem;color: #f9fafb;max-width: 800px;margin: 0 auto;animation: fadeInUp 0.6s ease-out 0.2s forwards;} header p {font-size: 1.3rem;max-width: 800px;margin: 0 auto;animation: fadeInUp 0.6s ease-out 0.2s forwards;} header h1.page-title {font-size: 2.4rem;color: #f9fafb;animation: fadeInUp 0.6s ease-out forwards;} section {padding: 4rem 2rem;max-width: 1000px;margin: 0 auto;} h2 {font-size: 2.2rem;margin-bottom: 2rem;color: #000000;text-align: center;animation: fadeIn 0.8s ease-out forwards;} .align-right {text-align: right;} .services {display: flex;flex-direction: column;gap: 2rem;position: relative;} .service-card {background: #e6f0fa;padding: 2rem;border-radius: 8px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);display: flex;align-items: center;gap: 2rem;opacity: 0;transition: opacity 0.8s ease, transform 0.8s ease, box-shadow 0.3s ease;} .service-card:nth-child(1) {transform: scale(0.7) translateX(-100px) translateY(100px);} .service-card:nth-child(2) {transform: scale(0.7) translateX(100px) translateY(100px);} .service-card:nth-child(3) {transform: scale(0.7) translateY(150px);} .service-card.visible {opacity: 1;transform: scale(1) translateX(0) translateY(0);} .service-card:hover {box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);} .service-content {flex: 1;} .service-card h3 {color: #000000;margin-bottom: 1.5rem;font-size: 1.5rem;} .service-card p {margin-bottom: 1rem;} .service-card ul {list-style: none;text-align: left;margin-top: 1rem;} .service-card li {margin-bottom: 0.8rem;position: relative;padding-left: 1.5rem;} .service-card li::before {content: '✓';color: #00c4cc;position: absolute;left: 0;} .service-visual {width: 300px;height: 300px;background: #d9e8f5;border-radius: 8px;display: flex;align-items: center;justify-content: center;font-size: 1rem;color: #1f2a44;text-align: center;flex-shrink: 0;} #contact {padding: 2rem 2rem 4rem 2rem;} #contact .contact {background: #3a4a66;color: #f9fafb;text-align: center;border-radius: 8px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);transition: background-color 0.3s ease;padding: 2rem;} #contact h2 {animation-delay: 0.2s;color: #f9fafb;} #contact p {max-width: 600px;margin: 0 auto 2rem;animation: fadeInUp 0.6s ease-out 0.4s forwards;} #contact form {display: flex;flex-direction: column;gap: 1.2rem;max-width: 600px;margin: 2rem auto;animation: fadeInUp 0.6s ease-out 0.6s forwards;} #contact .notification {display: none;padding: 10px;margin: 0 2rem;border-radius: 4px;text-align: center;} #contact .success {background-color: #d4edda; color: #155724;} #contact .error {background-color: #f8d7da; color: #721c24;} #contact input, #contact textarea {padding: 1rem;border: none;border-radius: 4px;font-size: 1rem;background: #ffffff;color: #1f2a44;transition: box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;} #contact input:hover, #contact textarea:hover {box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);} #contact textarea {resize: vertical;} #contact button {padding: 1rem;background: #00c4cc;color: #ffffff;border: none;border-radius: 4px;cursor: pointer;font-size: 1.1rem;transition: background 0.3s ease;} #contact button:hover {background: #00b3ba;} #page {} #page .page {background: #f5f5f5;color: #1f2a44;border-radius: 8px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);transition: background-color 0.3s ease;padding: 2rem;} #page h3 {margin: 1.2rem auto 1.2rem auto;animation-delay: 0.2s;} #page p {margin: 0 auto 1rem;animation: fadeInUp 0.6s ease-out 0.4s forwards;} #page ul {margin: 0 0 1rem 3rem;animation: fadeInUp 0.6s ease-out 0.4s forwards;} footer {margin-top: 1rem;background: #e6f0fa;color: #1f2a44;padding: 3rem 2rem;text-align: left;transition: background-color 0.3s ease;} .footer-parallax-wrapper {position: relative;overflow: hidden;} .footer-parallax-wrapper::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #e6f0fa;z-index: -1;transform: translateY(0);transition: transform 0.3s ease;} .footer-parallax-wrapper.parallax::before {transform: translateY(calc(var(--scroll) * 0.05));} .footer-container {max-width: 1000px;margin: 0 auto;display: flex;flex-wrap: wrap;gap: 3rem;justify-content: space-between;} .footer-logo {margin-left: -9px;} .footer-logo img {height: 50px;} /* Gestion des logos selon le mode */ .footer-logo .logo-light {display: block;} .footer-logo .logo-dark {display: none;} .footer-column {flex: 1;min-width: 200px;animation: fadeInUp 0.6s ease-out forwards;} .footer-column:nth-child(1) {animation-delay: 0.2s;} .footer-column:nth-child(2) {animation-delay: 0.4s;} .footer-column:nth-child(3) {animation-delay: 0.6s;} .footer-column h3 {font-size: 1.2rem;margin-bottom: 1rem;color: #000000;} .footer-column p, .footer-column ul {font-size: 0.9rem;opacity: 0.9;} .footer-column ul {list-style: none;} .footer-column ul li {margin-bottom: 0.8rem;} .footer-column a {color: #1f2a44;text-decoration: none;transition: color 0.3s, transform 0.3s;} .footer-column a:hover {color: #00c4cc;transform: translateX(5px);} .linkedin-icon {display: inline-block;margin-top: 1rem;font-size: 1.5rem;color: #1f2a44;transition: color 0.3s;} .linkedin-icon:hover {color: #00c4cc;} .footer-bottom {text-align: center;margin-top: 2rem;font-size: 0.8rem;animation: fadeIn 0.6s ease-out 0.8s forwards;} .footer-bottom a {color: #1f2a44;text-decoration: none;} .footer-bottom a:hover {color: #00c4cc;text-decoration: underline;} /* Tarte au citron */ #tarteaucitronAlertBig #tarteaucitronPersonalize, #tarteaucitronAlertBig #tarteaucitronPersonalize2, .tarteaucitronCTAButton {background: #3a4a66 !important;} #tarteaucitronRoot .tarteaucitronDeny {background: #666666 !important;} #tarteaucitronAlertBig #tarteaucitronCloseAlert {background: #666666 !important;color: #FFFFFF !important;} #tarteaucitronIcon #tarteaucitronManager img {width: 40px !important;height: 40px !important;} /* Mode sombre */ html.dark-mode {background-color: #1f2a44;color: #f9fafb;} html.dark-mode a {color: #f9fafb;text-decoration: none;} html.dark-mode a:hover {color: #00c4cc;text-decoration: underline;} html.dark-mode .logo .logo-light {display: none;} html.dark-mode .logo .logo-dark {display: block;} html.dark-mode nav {background: #2d3b55;} html.dark-mode .nav-menu a,html.dark-mode .burger,html.dark-mode .mode-toggle {color: #f9fafb;} html.dark-mode .nav-menu a:hover {color: #00c4cc;text-decoration: none;} html.dark-mode .mode-toggle:hover {color: #00c4cc;} html.dark-mode header {background: #415a8a;color: #f9fafb;} html.dark-mode header::before {background: linear-gradient(135deg, #2d3b55, #00c4cc);} html.dark-mode header h1,html.dark-mode h2,html.dark-mode .service-card h3,html.dark-mode .footer-column h3 {color: #ffffff;} html.dark-mode .service-card {background: #2d3b55;} html.dark-mode .service-visual {background: #3a4a66;color: #f9fafb;} html.dark-mode .service-card li::before {color: #00c4cc;} html.dark-mode #contact {color: #f9fafb;} html.dark-mode #contact .contact {background: #415a8a;} html.dark-mode #contact p {color: #f9fafb;} html.dark-mode #contact input,html.dark-mode #contact textarea {background: #1f2a44;color: #f9fafb;} html.dark-mode #contact input:hover,html.dark-mode #contact textarea:hover {box-shadow: 0 2px 6px rgba(255, 255, 255, 0.15);} html.dark-mode #page {color: #f9fafb;} html.dark-mode #page .page {background: #2d3b55;color: #f9fafb;} html.dark-mode footer {background: #2d3b55;color: #f9fafb;} html.dark-mode .footer-parallax-wrapper::before {background: #2d3b55;} html.dark-mode .footer-column a {color: #f9fafb;} html.dark-mode .footer-column a:hover {color: #00c4cc;} html.dark-mode .linkedin-icon {color: #f9fafb;} html.dark-mode .linkedin-icon:hover {color: #00c4cc;} html.dark-mode .footer-logo .logo-light {display: none;} html.dark-mode .footer-logo .logo-dark {display: block;} html.dark-mode .footer-bottom a {color: #f9fafb;text-decoration: none;} html.dark-mode .footer-bottom a:hover {color: #00c4cc;text-decoration: underline;} @media (max-width: 768px) { .logo img {height: 50px;} .burger {display: block;} .nav-menu {display: none;flex-direction: column;position: absolute;top: 100%;left: 0;width: 100%;background: #e6f0fa;padding: 1rem;gap: 0;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);transition: background-color 0.3s ease;} nav.scrolled .logo img {height: 45px;} html.dark-mode .nav-menu {background: #2d3b55;} .nav-menu.active {display: flex;} .nav-menu li {margin: 0.5rem 0;} h2 {font-size: 2rem;} header h1 {font-size: 2rem;} header p {font-size: 1.2rem;} .service-card {padding: 0;flex-direction: column;align-items: flex-start;} .service-content {margin: 0 2rem 2rem 2rem;} .service-visual {order: -1;width: 100%;height: 200px;margin: 0;border-radius: 8px 8px 0 0;} #contact .contact {padding: 2rem 1rem;} .footer-container {flex-direction: column;} }