/* ========================================== DEVLOPSTUDIO - RESPONSIVE DESIGN CUSTOM ========================================== */ /* ========== VIEWPORT META TAG ========== */ /* Assurez-vous d'avoir ceci dans le : */ /* ========== GLOBAL RESET & TYPOGRAPHY ========== */ * { box-sizing: border-box; } body { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } img { max-width: 100%; height: auto; } /* ========== HEADER & NAVIGATION ========== */ @media only screen and (max-width: 991px) { .site-header .main-logo img { max-width: 150px; height: auto; } .header-personal .mestc-box { padding: 40px 20px; } .header-personal .title { font-size: 36px !important; line-height: 1.2 !important; } .header-personal .description-box { font-size: 14px !important; } .nav__info { margin-top: 20px; } } @media only screen and (max-width: 767px) { .site-header .main-logo img { max-width: 120px; height: auto; } .header-personal .title { font-size: 28px !important; line-height: 1.3 !important; } .header-personal .description-box { font-size: 12px !important; } .header-personal .subtitle-box { font-size: 14px !important; } } @media only screen and (max-width: 480px) { .header-personal .title { font-size: 24px !important; } } /* ========== TYPOGRAPHY ========== */ @media only screen and (max-width: 991px) { h1, .title-head { font-size: 48px !important; line-height: 1.2 !important; } h2.title-h2 { font-size: 32px !important; line-height: 1.3 !important; } h3 { font-size: 28px !important; line-height: 1.3 !important; } h4 { font-size: 24px !important; } h5 { font-size: 20px !important; } h6 { font-size: 18px !important; } .section-title h2, .title-h2 { font-size: 32px !important; letter-spacing: 1px !important; } .sub-heading, .subtitle, .sm-title-block { font-size: 14px !important; letter-spacing: 1px !important; } .title-block { font-size: 18px !important; } .sm-p { font-size: 13px !important; } p, .description-box { font-size: 15px !important; line-height: 1.6 !important; } .dsn-number h2.dsn-animate-number { font-size: 48px !important; } } @media only screen and (max-width: 767px) { h1, .title-head { font-size: 36px !important; line-height: 1.3 !important; } h2.title-h2 { font-size: 28px !important; line-height: 1.3 !important; } h3 { font-size: 24px !important; } h4 { font-size: 20px !important; } h5 { font-size: 18px !important; } h6 { font-size: 16px !important; } .section-title h2, .title-h2 { font-size: 28px !important; letter-spacing: 0.5px !important; } .sub-heading, .subtitle, .sm-title-block { font-size: 13px !important; letter-spacing: 0.5px !important; } .title-block { font-size: 16px !important; } p, .description-box { font-size: 14px !important; line-height: 1.6 !important; } .dsn-number h2.dsn-animate-number { font-size: 40px !important; } .dsn-number span { font-size: 14px !important; } } @media only screen and (max-width: 480px) { h1, .title-head { font-size: 28px !important; line-height: 1.3 !important; } h2.title-h2 { font-size: 24px !important; } h3 { font-size: 20px !important; } .section-title h2, .title-h2 { font-size: 24px !important; } p, .description-box { font-size: 13px !important; line-height: 1.5 !important; } .dsn-number h2.dsn-animate-number { font-size: 32px !important; } } /* ========== GRIDS & LAYOUT ========== */ @media only screen and (max-width: 991px) { .container { padding-left: 15px; padding-right: 15px; } .dsn-container { padding-left: 15px; padding-right: 15px; } .grid-half-1, .grid-1-half { grid-template-columns: 1fr !important; gap: 30px !important; } .d-grid[data-dsn-gap] { gap: 20px !important; } .box-content { padding: 40px 20px !important; } .pt-80, .pb-80 { padding-top: 40px !important; padding-bottom: 40px !important; } } @media only screen and (max-width: 767px) { .container { padding-left: 10px; padding-right: 10px; } .dsn-container { padding-left: 10px; padding-right: 10px; } .d-grid:not(.dsn-isotope) { grid-template-columns: 1fr !important; } .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr !important; } .box-content { padding: 30px 15px !important; } .pt-80, .pb-80 { padding-top: 30px !important; padding-bottom: 30px !important; } .mt-20, .mt-30 { margin-top: 15px !important; } .mb-20, .mb-30 { margin-bottom: 15px !important; } } @media only screen and (max-width: 480px) { .container { padding-left: 5px; padding-right: 5px; } .dsn-container { padding-left: 5px; padding-right: 5px; } .box-content { padding: 20px 10px !important; } .section-margin { margin-top: 50px !important; margin-bottom: 50px !important; } } /* ========== SECTIONS & COMPONENTS ========== */ @media only screen and (max-width: 991px) { .section-padding { padding-top: 60px; padding-bottom: 60px; } .section-margin { margin-top: 80px; margin-bottom: 80px; } .section-title { margin-bottom: 40px; } .section-title.mb-70 { margin-bottom: 40px !important; } .mt-50 { margin-top: 30px !important; } .mb-50 { margin-bottom: 30px !important; } } @media only screen and (max-width: 767px) { .section-padding { padding-top: 40px; padding-bottom: 40px; } .section-margin { margin-top: 60px; margin-bottom: 60px; } .section-title { margin-bottom: 30px; } .mt-50, .mt-70, .mt-80 { margin-top: 25px !important; } .mb-50, .mb-70, .mb-80 { margin-bottom: 25px !important; } } /* ========== BRAND SCROLL ========== */ @media only screen and (max-width: 767px) { .brand-scroll .grid-item p { font-size: 12px !important; } .brand-scroll .pt-40, .brand-scroll .pb-40 { padding-top: 20px !important; padding-bottom: 20px !important; } } /* ========== POST CARDS ========== */ @media only screen and (max-width: 991px) { .dsn-posts[data-dsn-gap] { gap: 30px !important; } .dsn-item-post { min-width: auto !important; } .dsn-item-post .post-title { font-size: 24px !important; } .dsn-item-post p { font-size: 14px !important; } } @media only screen and (max-width: 767px) { .dsn-posts { grid-template-columns: 1fr !important; gap: 20px !important; } .dsn-item-post .box-content { flex-direction: column !important; } .dsn-item-post .container-img { width: 100% !important; min-height: 200px !important; } .dsn-item-post .post-content { width: 100% !important; padding: 20px !important; } .dsn-item-post .post-title { font-size: 20px !important; line-height: 1.3 !important; } .dsn-item-post .post-meta span { font-size: 12px !important; } .dsn-item-post p { font-size: 13px !important; } } /* ========== CONTACT FORM ========== */ @media only screen and (max-width: 991px) { .contact-form .box-form h2 { font-size: 28px !important; line-height: 1.3 !important; } .contact-form .dsn-service .service-item { padding: 15px !important; } .contact-form .service_title { font-size: 14px !important; } .contact-form .service_description p { font-size: 14px !important; } } @media only screen and (max-width: 767px) { .contact-form .dsn-mask { display: none; } .contact-form .box-info { padding: 20px !important; } .contact-form .dsn-service { grid-template-columns: 1fr !important; gap: 15px !important; } .contact-form .service-item { flex-direction: row !important; align-items: flex-start !important; } .contact-form .service-item .dsn-icon { margin-right: 15px !important; margin-bottom: 0 !important; } } /* ========== FOOTER ========== */ @media only screen and (max-width: 991px) { .dsn-footer .title-h6 { font-size: 18px !important; padding: 0 20px !important; } .dsn-footer .mt-100, .dsn-footer .mb-100 { margin-top: 50px !important; margin-bottom: 50px !important; } .dsn-footer .d-flex.align-items-center.justify-content-between { flex-direction: column; gap: 20px; } } @media only screen and (max-width: 767px) { .dsn-footer .title-h6 { font-size: 16px !important; padding: 0 10px !important; } .dsn-footer .title-h6 a { display: inline-block; line-height: 1.4 !important; } .dsn-footer .dsn-btn { width: 100%; } .dsn-footer .title-btn { font-size: 14px !important; } } /* ========== BUTTONS ========== */ @media only screen and (max-width: 767px) { .dsn-btn { padding: 12px 24px !important; } .dsn-btn .title-btn { font-size: 14px !important; } .dsn-btn .dsn-icon { width: 36px !important; height: 36px !important; } } /* ========== SOCIAL ICONS ========== */ @media only screen and (max-width: 767px) { .dsn-socials li a { font-size: 14px !important; padding: 8px 16px !important; } .dsn-socials span { display: none; } } /* ========== UTILITIES ========== */ @media only screen and (max-width: 767px) { .max-w570, .max-w750 { max-width: 100%; } .d-flex.align-items-center.justify-content-between { flex-direction: column; align-items: flex-start !important; gap: 15px; } .border-top, .border-bottom { padding-top: 15px; padding-bottom: 15px; } /* Cachez les éléments décoratifs sur mobile */ .circle-before, .circle-after, .line-shape { display: none; } /* Ajustez les marges pour mobile */ .mt-section { margin-top: 40px !important; } .mb-section { margin-bottom: 40px !important; } } /* ========== HAMBURGER MENU ========== */ @media only screen and (max-width: 991px) { .site-header.dsn-hamburger { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; } .main-navigation { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: var(--bg-color); z-index: 999; padding: 80px 20px 20px; overflow-y: auto; } .navbar-toggle { z-index: 1001; } .primary-nav li { margin-bottom: 10px; } .primary-nav a { font-size: 24px; } .nav__info h5 { font-size: 14px; } .nav-social ul li { margin-bottom: 8px; } .nav-social a { font-size: 14px; } } /* ========== ACCESSIBILITY ========== */ /* Assurez-vous que tout le texte est lisible */ @media only screen and (max-width: 767px) { /* Taille de police minimale pour la lisibilité */ body, p, span, li, a, input, textarea, button { font-size: 14px !important; min-height: 44px; /* Touch target size */ } /* Exception pour les liens et boutons inline */ a, .dsn-btn, .dsn-btn span { min-height: auto; } /* Amélioration de la lisibilité */ .description-box, .post-description, .service_description { line-height: 1.6 !important; word-wrap: break-word; } /* Éviter le texte trop étroit */ .max-w570, .max-w750 { min-width: 280px; } } /* ========== ORIENTATION ========== */ @media only screen and (max-height: 500px) and (orientation: landscape) { .header-personal .mestc-box { padding: 20px; } .header-personal .title { font-size: 20px !important; } .header-personal .description-box { font-size: 12px !important; } } /* ========== PRINT STYLES ========== */ @media print { .site-header, .dsn-footer, .dsn-socials, .navbar-toggle { display: none; } body { font-size: 12pt; line-height: 1.5; } h1 { font-size: 18pt; } h2 { font-size: 16pt; } h3 { font-size: 14pt; } }