/*========================================================== RESPONSIVE.CSS MODULE 1 ULTRA WIDE SCREENS ≥ 1600px 2K / 4K OPTIMIZATION ==========================================================*/ @media (min-width:1600px){ /*========================================================== GLOBAL CONTAINER ==========================================================*/ .container{ max-width:1600px; } .container-fluid{ max-width:1920px; margin:auto; } /*========================================================== BODY ==========================================================*/ body{ font-size:18px; line-height:1.9; } /*========================================================== TYPOGRAPHY ==========================================================*/ h1{ font-size:5rem; } h2{ font-size:3.6rem; } h3{ font-size:2.8rem; } h4{ font-size:2.2rem; } h5{ font-size:1.8rem; } h6{ font-size:1.5rem; } p{ font-size:1.15rem; } /*========================================================== SECTION SPACING ==========================================================*/ section{ padding:140px 0; } /*========================================================== HERO ==========================================================*/ .hero{ min-height:100vh; } .hero-content{ max-width:900px; } .hero-title{ font-size:5.5rem; line-height:1.15; } .hero-subtitle{ font-size:1.45rem; } .hero-description{ max-width:760px; font-size:1.2rem; } .hero-buttons{ gap:25px; } .hero-scroll{ bottom:50px; } /*========================================================== NAVBAR ==========================================================*/ .navbar{ padding:18px 0; } .navbar-brand img{ max-height:85px; } .navbar-nav .nav-link{ font-size:17px; padding:16px 22px; } /*========================================================== TOP BAR ==========================================================*/ .topbar{ font-size:15px; } /*========================================================== DROPDOWN ==========================================================*/ .dropdown-menu{ min-width:320px; } /*========================================================== MEGA MENU ==========================================================*/ .mega-menu{ width:1400px; } /*========================================================== CARDS ==========================================================*/ .card, .about-card, .formation-card, .teacher-card, .news-card, .research-card{ border-radius:32px; } /*========================================================== IMAGES ==========================================================*/ img{ max-width:100%; height:auto; } /*========================================================== GRID ==========================================================*/ .formations-grid, .teachers-grid, .news-grid, .research-grid, .gallery-grid{ gap:40px; } /*========================================================== BUTTONS ==========================================================*/ .btn{ padding:18px 42px; font-size:17px; } /*========================================================== ICONS ==========================================================*/ .fa, .fas, .far, .fab{ font-size:1.2em; } /*========================================================== FOOTER ==========================================================*/ .footer{ padding-top:100px; } .footer-title{ font-size:1.8rem; } .footer-links a{ font-size:16px; } /*========================================================== GOOGLE MAP ==========================================================*/ .map iframe{ height:550px; } /*========================================================== GALLERY ==========================================================*/ .gallery-item{ border-radius:25px; } /*========================================================== SWIPER ==========================================================*/ .swiper{ border-radius:30px; } /*========================================================== MODALS ==========================================================*/ .modal-dialog{ max-width:1300px; } /*========================================================== TABLES ==========================================================*/ .table{ font-size:17px; } /*========================================================== FORM CONTROLS ==========================================================*/ .form-control, .form-select{ padding:16px 22px; font-size:17px; } /*========================================================== SHADOWS ==========================================================*/ .card, .hero, .section{ box-shadow: 0 25px 70px rgba(0,0,0,.08); } /*========================================================== ANIMATIONS ==========================================================*/ .hero-title, .hero-subtitle, .hero-description{ animation-duration:1.2s; } /*========================================================== GPU ==========================================================*/ .hero, .card, .gallery-item, .news-card, .teacher-card{ transform:translateZ(0); will-change: transform, opacity; } /*========================================================== LARGE SPACING ==========================================================*/ .mb-lg{ margin-bottom:80px; } .mt-lg{ margin-top:80px; } .py-lg{ padding-top:120px; padding-bottom:120px; } /*========================================================== ULTRA HD (4K) ==========================================================*/ @media (min-width:2200px){ .container{ max-width:1800px; } .hero-title{ font-size:6.2rem; } .hero-subtitle{ font-size:1.7rem; } .hero-description{ font-size:1.35rem; } body{ font-size:19px; } .navbar-brand img{ max-height:95px; } .btn{ padding:20px 48px; } } } /*========================================================== END MODULE 1 ==========================================================*/ /*========================================================== RESPONSIVE.CSS MODULE 2 DESKTOP LARGE 1400px → 1599px ==========================================================*/ @media (min-width:1400px) and (max-width:1599.98px){ /*========================================================== CONTAINERS ==========================================================*/ .container{ max-width:1320px; } .container-fluid{ padding-left:40px; padding-right:40px; } /*========================================================== GLOBAL SPACING ==========================================================*/ section{ padding:110px 0; } .section-header{ margin-bottom:70px; } .mb-section{ margin-bottom:70px; } .mt-section{ margin-top:70px; } /*========================================================== HERO ==========================================================*/ .hero{ min-height:95vh; } .hero-content{ max-width:760px; } .hero-title{ font-size:4.6rem; line-height:1.15; } .hero-subtitle{ font-size:1.30rem; } .hero-description{ max-width:680px; font-size:1.08rem; line-height:1.9; } .hero-buttons{ gap:20px; margin-top:35px; } .hero-scroll{ bottom:35px; } /*========================================================== HERO IMAGE ==========================================================*/ .hero-image{ max-width:620px; margin-left:auto; } /*========================================================== NAVBAR ==========================================================*/ .navbar{ padding:14px 0; } .navbar-brand img{ max-height:75px; } .navbar-nav .nav-link{ padding:14px 18px; font-size:16px; } /*========================================================== MEGA MENU ==========================================================*/ .mega-menu{ width:1180px; } /*========================================================== CARDS ==========================================================*/ .about-card, .formation-card, .teacher-card, .news-card, .research-card, .gallery-card{ border-radius:28px; } .about-card{ padding:35px; } .formation-card{ min-height:100%; } .teacher-card{ overflow:hidden; } .news-card{ overflow:hidden; } /*========================================================== CARD IMAGES ==========================================================*/ .teacher-image{ height:340px; } .news-image{ height:250px; } .gallery-image{ height:300px; } /*========================================================== GRID ==========================================================*/ .formations-grid, .teachers-grid, .news-grid, .research-grid, .gallery-grid{ gap:30px; } /*========================================================== BUTTONS ==========================================================*/ .btn{ padding:16px 36px; font-size:16px; } /*========================================================== TYPOGRAPHY ==========================================================*/ h1{ font-size:4.3rem; } h2{ font-size:3rem; } h3{ font-size:2.3rem; } p{ font-size:1rem; } /*========================================================== FOOTER ==========================================================*/ .footer{ padding-top:90px; } .footer-title{ margin-bottom:25px; } /*========================================================== MAP ==========================================================*/ .map iframe{ height:480px; } /*========================================================== SWIPER ==========================================================*/ .swiper{ border-radius:24px; } /*========================================================== SHADOWS ==========================================================*/ .card, .about-card, .formation-card, .teacher-card, .news-card, .research-card{ box-shadow: 0 20px 55px rgba(0,0,0,.08); } /*========================================================== GPU OPTIMIZATION ==========================================================*/ .hero, .hero-image, .about-card, .formation-card, .teacher-card, .news-card, .research-card{ transform:translateZ(0); will-change: transform, opacity; } /*========================================================== LARGE DESKTOP UTILITIES ==========================================================*/ .py-desktop{ padding-top:110px; padding-bottom:110px; } .my-desktop{ margin-top:70px; margin-bottom:70px; } } /*========================================================== END MODULE 2 ==========================================================*/ /*========================================================== RESPONSIVE.CSS MODULE 3 DESKTOP STANDARD 1200px → 1399px ==========================================================*/ @media (min-width:1200px) and (max-width:1399.98px){ /*========================================================== CONTAINER ==========================================================*/ .container{ max-width:1140px; } .container-fluid{ padding-left:30px; padding-right:30px; } /*========================================================== GLOBAL SPACING ==========================================================*/ section{ padding:100px 0; } .section-header{ margin-bottom:60px; } .section-title{ font-size:2.8rem; } .section-subtitle{ font-size:1.15rem; } /*========================================================== NAVBAR ==========================================================*/ .navbar{ padding:12px 0; } .navbar-brand img{ max-height:68px; } .navbar-nav{ gap:6px; } .navbar-nav .nav-link{ padding:12px 15px; font-size:15px; } .navbar-actions{ gap:12px; } .mega-menu{ width:1080px; } /*========================================================== HERO ==========================================================*/ .hero{ min-height:92vh; } .hero-content{ max-width:650px; } .hero-title{ font-size:4rem; line-height:1.15; } .hero-subtitle{ font-size:1.20rem; } .hero-description{ max-width:650px; font-size:1rem; line-height:1.8; } .hero-buttons{ gap:18px; } .hero-image{ max-width:540px; } .hero-scroll{ bottom:25px; } /* ... toutes les autres règles du Module 3 ... */ } /* Fin du @media 1200px–1399.98px */ /*========================================================== RESPONSIVE.CSS MODULE 4 LAPTOP 992px → 1199px ==========================================================*/ /*========================================================== CONTAINER ==========================================================*/ .container-fluid{ padding-left:24px; padding-right:24px; } /*========================================================== GLOBAL SECTIONS ==========================================================*/ section{ padding:90px 0; } .section-header{ margin-bottom:55px; } .section-title{ font-size:2.5rem; } .section-description{ font-size:1rem; max-width:700px; } /*========================================================== NAVBAR ==========================================================*/ .navbar{ padding:12px 0; } .navbar-brand img{ max-height:62px; } .navbar-nav{ gap:4px; } .navbar-nav .nav-link{ padding:10px 12px; font-size:14px; } .navbar-actions{ gap:10px; } .navbar .btn{ padding:10px 18px; font-size:14px; } /*========================================================== MEGA MENU ==========================================================*/ .mega-menu{ width:940px; padding:30px; } .mega-menu h5{ font-size:1rem; } .mega-menu a{ font-size:14px; } /*========================================================== HERO ==========================================================*/ .hero{ min-height:88vh; } .hero-content{ max-width:560px; } .hero-title{ font-size:3.4rem; line-height:1.15; } .hero-subtitle{ font-size:1.1rem; } .hero-description{ font-size:1rem; max-width:560px; } .hero-buttons{ gap:15px; } .hero-image{ max-width:480px; } .hero-scroll{ bottom:22px; } /*========================================================== ABOUT ==========================================================*/ .about-grid{ gap:40px; } .about-image{ max-width:420px; } .about-card{ padding:28px; } .about-title{ font-size:2rem; } /*========================================================== FORMATIONS ==========================================================*/ .formations-grid{ grid-template-columns: repeat(2,1fr); gap:25px; } .formation-card{ border-radius:24px; } .formation-card-header, .formation-card-body, .formation-card-footer{ padding:24px; } .formation-title{ font-size:22px; } .formation-icon{ width:72px; height:72px; font-size:28px; } /*========================================================== TEACHERS ==========================================================*/ .teachers-grid{ grid-template-columns: repeat(2,1fr); gap:25px; } .teacher-image{ height:300px; } .teacher-content{ padding:24px; } .teacher-name{ font-size:22px; } .teacher-grade{ font-size:16px; } /*========================================================== RESEARCH ==========================================================*/ .research-grid{ grid-template-columns: repeat(2,1fr); gap:25px; } .research-card{ padding:28px; } .research-card-title{ font-size:22px; } .research-icon{ width:72px; height:72px; font-size:30px; } /*========================================================== NEWS ==========================================================*/ .news-grid{ grid-template-columns: repeat(2,1fr); gap:25px; } .news-image{ height:220px; } .news-content{ padding:24px; } .news-card-title{ font-size:22px; } /*========================================================== GALLERY ==========================================================*/ .gallery-grid{ grid-template-columns: repeat(3,1fr); gap:20px; } .gallery-item{ border-radius:20px; } .gallery-image{ height:240px; } /*========================================================== PARTNERS ==========================================================*/ .partners-grid{ grid-template-columns: repeat(4,1fr); gap:20px; } .partner-card{ padding:22px; } .partner-card img{ max-height:70px; } /*========================================================== BUTTONS ==========================================================*/ .btn{ padding:13px 28px; font-size:15px; } /*========================================================== FOOTER ==========================================================*/ .footer{ padding-top:70px; } .footer-title{ font-size:1.2rem; } .footer-links a{ font-size:14px; } /*========================================================== MAP ==========================================================*/ .map iframe{ height:420px; } /*========================================================== UTILITIES ==========================================================*/ .mb-laptop{ margin-bottom:50px; } .mt-laptop{ margin-top:50px; } .py-laptop{ padding-top:90px; padding-bottom:90px; } /*========================================================== GPU OPTIMIZATION ==========================================================*/ .hero, .about-card, .formation-card, .teacher-card, .research-card, .news-card, .gallery-item, .partner-card{ transform:translateZ(0); will-change: transform, opacity; } /*========================================================== END MODULE 4 ==========================================================*/