/* Author: Nicdark Author URI: http://www.nicdarkthemes.com/ */ @import "nicdark_shortcodes.css"; @import "nicdark_menu.css"; @import "fontello.css"; @import "animate.css"; @import "magnific-popup.css"; /**************************************************************************** Table of Content *************************************************************************** SOME BASIC CLASSES 1- body 2-container 3-site 4-section 5-grid 6-width section 7-headings tag 8-form elements 9-parallax section /* 1- START NICDARK FRAMEWORK*/ body{ margin:0px; padding:0px; overflow-x:hidden; background-color: #ccc; } body.nicdark_boxed_img{ background-image: url(../img/img4.jpg) !important; background-size: cover; background-attachment: fixed; } body.nicdark_boxed_pattern{ background-image: url(../img/patterns/img1.jpg) !important; background-attachment: fixed; } /* 2 - CONTAINER */ .nicdark_container{ width:1200px; margin:auto; padding: 0px; } .nicdark_clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } /* 3- START NICDARK_SITE*/ .nicdark_site{ float: left; width: 100%; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -ms-transition: all 0.8s ease; transition: all 0.8s ease; } .nicdark_site > .nicdark_site_fullwidth{ float: left; width: 100%; background-color: #fff; } .nicdark_site > .nicdark_site_boxed{ width:1220px; margin:auto; padding: 0px; background-color: #fff; } /*START NICDARK_SITE*/ /* 4 - START NICDARKSECTION*/ .nicdark_section{ width: 100%; float: left; } /*.nicdark_section.nicdark_imgparallax{ background: url(../img/img3.jpg) 50% 0 fixed; background-size: cover;}*/ /*END NICDARKSECTION*/ /* 5 - START NICDARKGRID*/ .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12{ margin:10px; float:left; display:inline; } .grid.nomargin{ margin: 0px; padding: 10px; } .grid.percentage{ margin: 0px; padding: 0px; } .grid_12.percentage {width:100%;} .grid_6.percentage {width:50%;} .grid_4.percentage {width:33.33%;} .grid_3.percentage {width:25%;} .grid_8.percentage {width:66.66%;} .grid_9.percentage {width:75%;} /*size*/ .grid_1 {width:80px;} .grid_2 {width:180px;} .grid_3 {width:280px;} .grid_4 {width:380px;} .grid_5 {width:480px;} .grid_6 {width:580px;} .grid_7 {width:680px;} .grid_8 {width:780px;} .grid_9 {width:880px;} .grid_10 {width:980px;} .grid_11 {width:1080px;} .grid_12 {width:1180px;} /*END NICDARKGRID*/ /* 6 - START NIKDARKWIDTHPERCENTAGE*/ .nicdark_width_percentage1{ width: 1% !important; } .nicdark_width_percentage10{ width: 10% !important; } .nicdark_width_percentage20{ width: 20% !important; } .nicdark_width_percentage25{ width: 25% !important; } .nicdark_width_percentage30{ width: 30% !important; } .nicdark_width_percentage40{ width: 40% !important; } .nicdark_width_percentage50{ width: 50% !important; } .nicdark_width_percentage60{ width: 60% !important; } .nicdark_width_percentage70{ width: 70% !important; } .nicdark_width_percentage80{ width: 80% !important; } .nicdark_width_percentage90{ width: 90% !important; } .nicdark_width_percentage100{ width: 100% !important; } /*END NIKDARKWIDTHPERCENTAGE*/ /* 7 - START NICDARKTEXT*/ p,h1,h2,h3,h4,h5,h6{ margin:0px; padding:0px; font-weight: normal; } /*font*/ h1,h2,h3,h4,h5,h6,input[type="text"],textarea,select{ font-family: 'Montserrat', sans-serif; color: #868585; } h1.subtitle,h2.subtitle,h3.subtitle,h4.subtitle,h5.subtitle,h6.subtitle,input[type="text"].subtitle,textarea.subtitle,select.subtitle, span.subtitle{ font-family: 'Raleway', sans-serif; color:#a4a4a4; } h1.signature,h2.signature,h3.signature,h4.signature,h5.signature,h6.signature, span.signature{ font-family: 'Montez', cursive; } /*color*/ p.white,h1.white,h2.white,h3.white,h4.white,h5.white,h6.white,a.white,i.white,span.white, input[type="text"].white, textarea.white, input[type="submit"].white, select.white{ color:#ffffff; } p.grey,h1.grey,h2.grey,h3.grey,h4.grey,h5.grey,h6.grey,a.grey,i.grey,span.grey, input[type="text"].grey, textarea.grey, input[type="submit"].grey, select.grey, pre.grey{ color:#a4a4a4; } p.greydark,h1.greydark,h2.greydark,h3.greydark,h4.greydark,h5.greydark,h6.greydark,a.greydark,i.greydark,span.greydark, input[type="text"].greydark, textarea.greydark, input[type="submit"].greydark, select.greydark{ color:#868585; } p.greydark2,h1.greydark2,h2.greydark2,h3.greydark2,h4.greydark2,h5.greydark2,h6.greydark2,a.greydark2,i.greydark2,span.greydark2, input[type="text"].greydark2, textarea.greydark2, input[type="submit"].greydark2, select.greydark2{ color:#353b3d; } p.green,h1.green,h2.green,h3.green,h4.green,h5.green,h6.green,a.green,i.green,span.green, input[type="text"].green, textarea.green, input[type="submit"].green, select.green{ color:#6fc191; } p.blue,h1.blue,h2.blue,h3.blue,h4.blue,h5.blue,h6.blue,a.blue,i.blue,span.blue, input[type="text"].blue, textarea.blue, input[type="submit"].blue, select.blue{ color:#74cee4; } p.violet,h1.violet,h2.violet,h3.violet,h4.violet,h5.violet,h6.violet,a.violet,i.violet,span.violet, input[type="text"].violet, textarea.violet, input[type="submit"].violet, select.violet{ color:#c389ce; } p.yellow,h1.yellow,h2.yellow,h3.yellow,h4.yellow,h5.yellow,h6.yellow,a.yellow,i.yellow,span.yellow, input[type="text"].yellow, textarea.yellow, input[type="submit"].yellow, select.yellow{ color:#edbf47; } p.orange,h1.orange,h2.orange,h3.orange,h4.orange,h5.orange,h6.orange,a.orange,i.orange,span.orange, input[type="text"].orange, textarea.orange, input[type="submit"].orange, select.orange{ color:#ec774b; } p.red,h1.red,h2.red,h3.red,h4.red,h5.red,h6.red,a.red,i.red,span.red, input[type="text"].red, textarea.red, input[type="submit"].red, select.red{ color:#e16c6c; } /*align*/ p.center,h1.center,h2.center,h3.center,h4.center,h5.center,h6.center{ text-align: center; } p.right,h1.right,h2.right,h3.right,h4.right,h5.right,h6.right, span.right{ float: right; } /*size*/ p{ font-size:15px; line-height: 22px; color:#141414; font-family: 'Raleway', sans-serif; } h1{ font-size: 30px; line-height: 30px; } h1.extrasize{ font-size: 45px; line-height: 45px; } h2{ font-size: 25px; line-height: 25px; } h3{ font-size: 20px; line-height: 20px; } h4{ font-size: 17px; line-height: 17px; } h5{ font-size: 15px; line-height: 15px; } h6{ font-size: 14px; line-height: 14px; } a{ text-decoration: none; color: #868585; } /*pre*/ pre{ overflow: auto; float: left; width: 100%; margin:0px; padding: 0px; } pre p{ font-family: monospace; font-size: 13px; line-height: 22px; } /*END NICDARKTEXT*/ /* 8 - START NICDARKFORMELEMENTS input[type="text"]{ float: left; border: 0; outline: 0; } textarea{ float: left; border: 0; outline: 0; } select{ float: left; border: 0; outline: 0; width: 100%; -webkit-appearance: none; cursor: pointer; } input[type="submit"]{ cursor: pointer; outline: 0; border: 0; } /*size input[type="text"].small, textarea.small { font-size: 15px; width: 90%; padding: 10px 5%; } input[type="text"].medium, textarea.medium { font-size: 17px; width: 90%; padding: 10px 5%; } input[type="text"].big, textarea.big { font-size: 17px; width: 80%; padding: 15px 10%; } /*size select select.small { font-size: 15px; padding: 10px 5%; } select.medium { font-size: 17px; padding: 10px 5%; } select.big { font-size: 17px; padding: 15px 10%; } /*END NICDARKFORMELEMENTS*/ /*********************************************CUSTOM FOR BABY KIDS*************************************************************/ /* 9 - START CLASS FOR PARALLAX SECTION*/ .nicdark_parallax_img3 { background:url(../img/parallax/img-single-teacher-3.jpg) 50% 0 fixed; background-size:cover; } .nicdark_parallax_img2 { background:url(../img/parallax/fresque.jpg) 50% 0 fixed; background-size:cover; } .nicdark_parallax_img1 { background:url(../img/parallax/img1.jpg) 50% 0 fixed; background-size:cover; } .nicdark_parallaxx_img1 { background: url(../img/parallax/img1.jpg) 50% 0 fixed; background-size:cover; } .nicdark_parallaxx_img2 { background: url(../img/parallax/img2.jpg) 50% 0 fixed; background-size:cover; } .nicdark_parallaxx_img3 { background: url(../img/parallax/img3.jpg) 50% 0 fixed; background-size:cover; } .nicdark_parallaxx_img5 { background: url(../img/parallax/img5.jpg) 50% 0 fixed; background-size:cover; } .nicdark_parallaxx_img6 { background: url(../img/parallax/img6.jpg) 50% 0 fixed; background-size:cover; } .nicdark_parallaxx_img7 { background: url(../img/parallax/img7.jpg) 50% 0 fixed; background-size:cover; } .nicdark_parallaxx_img8 { background: url(../img/parallax/img8.jpg) 50% 0 fixed; background-size:cover; } .nicdark_parallaxx_img-teachers-1 { background: url(../img/parallax/img-teachers-1.jpg) 50% 0 fixed; background-size:cover; } .nicdark_parallaxx_img-single-teacher-1 { background: url(../img/parallax/img-single-teacher-1.jpg) 50% 0 fixed; background-size:cover; } .nicdark_parallaxx_img-single-teacher-2 { background: url(../img/parallax/img-single-teacher-2.jpg) 50% 0 fixed; background-size:cover; } .nicdark_parallaxx_img-excursions { background: url(../img/parallax/img-excursions.jpg) 50% 0 fixed; background-size:cover; } .nicdark_parallaxx_img-single-excursion { background: url(../img/parallax/img-single-excursion.jpg) 50% 0 fixed; background-size:cover; } .nicdark_parallaxx_img-courses { background: url(../img/parallax/img-courses.jpg) 50% 0 fixed; background-size:cover; } .nicdark_parallaxx_img-events { background: url(../img/parallax/img-events.jpg) 50% 0 fixed; background-size:cover; } .nicdark_parallaxx_img-single-event { background: url(../img/parallax/img-single-event.jpg) 50% 0 fixed; background-size:cover; } /*END CLASS FOR PARALLAX SECTION*/ /*START CUSTOM CLASS TO AVOID INLINE CSS*/ .nicdark_width60 { width: 60px; } .nicdark_width50 { width: 50px; } .nicdark_copyrightlogo { background-image:url(../img/footer/copyright.jpg); background-size:95px; background-repeat:no-repeat; background-position:left; } .nicdark_facebook { background-color:#5977b8; box-shadow:0px 4px 0px 0px #4c67a1; } /*END CUSTOM CLASS TO AVOID INLINE CSS*/ .nicdark_toogle_content p, .nicdark_toogle_content { color: #a4a4a4; } /*ipad land*/ @media only screen and (min-width: 960px) and (max-width: 1199px) { .nicdark_container{width:960px;} .grid_1 {width:60px;}.grid_2 {width:140px;}.grid_3 {width:220px;}.grid_4 {width:300px;}.grid_5 {width:380px;}.grid_6 {width:460px;}.grid_7 {width:540px;}.grid_8 {width:620px;}.grid_9 {width:700px;}.grid_10 {width:780px;}.grid_11 {width:860px;}.grid_12 {width:940px;} /*some class*/ .nicdark_disable_marginleft_ipadland, .nicdark_disable_marginleft_responsive{ margin-left: 0px !important; } .nicdark_aligncenter_ipadland, .nicdark_aligncenter_responsive { text-align: center !important; } .nicdark_width100_ipadland, .nicdark_width100_responsive { width: 100% !important; } /*disable float*/ .nicdark_disable_floatleft_ipadland { float: initial !important; } .nicdark_disable_floatright_ipadland { float: initial !important; } /*boxed*/ .nicdark_site_boxed, .nicdark_menu_boxed{ width: 980px !important; } /*display*/ .nicdark_displaynone_ipadland, .nicdark_displaynone_responsive{ display: none; } .nicdark_displaynone_desktop { display: block !important; } /*navigation*/ .slowup{ -webkit-animation: none; animation: none; margin-top: 0px !important; } .slowdown{ -webkit-animation: none; animation: none; margin-top: 0px !important; } .tinynav{ display:none; } /*megamenu*/ .nicdark_megamenu .mm_grid_3{ width: 235px !important; } .nicdark_megamenu .mm_grid_4{ width: 313px !important; } .nicdark_megamenu .mm_grid_6{ width: 470px !important; } .nicdark_megamenu > ul{ width: 940px !important; margin-left: -470px !important; } /*megamenu*/ } /*ipad potr*/ @media only screen and (min-width: 768px) and (max-width: 959px) { .nicdark_container {width:744px;} .grid_1 {width:42px;}.grid_2 {width:104px;}.grid_3 {width:166px;}.grid_4 {width:228px;}.grid_5 {width:290px;}.grid_6 {width:352px;}.grid_7 {width:414px;}.grid_8 {width:476px;}.grid_9 {width:538px;}.grid_10 {width:600px;}.grid_11 {width:662px;}.grid_12 {width:724px;} /*some class*/ .nicdark_disable_marginleft_ipadpotr, .nicdark_disable_marginleft_responsive{ margin-left: 0px !important; } .nicdark_aligncenter_ipadpotr, .nicdark_aligncenter_responsive { text-align: center !important; } .nicdark_width100_ipadpotr, .nicdark_width100_responsive { width: 100% !important; } /*disable float*/ .nicdark_disable_floatleft_ipadpotr { float: initial !important; } .nicdark_disable_floatright_ipadpotr { float: initial !important; } /*boxed*/ .nicdark_site_boxed, .nicdark_menu_boxed{ width: 788px !important; } /*display*/ .nicdark_displaynone_ipadpotr, .nicdark_displaynone_responsive{ display: none !important; } .nicdark_displaynone_desktop { display: block !important; } /*navigation*/ .slowup{ -webkit-animation: none; animation: none; margin-top: 0px !important; } .slowdown{ -webkit-animation: none; animation: none; margin-top: 0px !important; } .tinynav{ display:block; } .nicdark_menu{ display:none; } } /*iphone land*/ @media only screen and (min-width: 480px) and (max-width: 767px) { body{ -webkit-text-size-adjust:none; } .nicdark_container {width:460px;} .grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{ width: 440px; } .grid.percentage{ width: 100%; } .nicdark_width_percentage10,.nicdark_width_percentage20,.nicdark_width_percentage25,.nicdark_width_percentage30,.nicdark_width_percentage40,.nicdark_width_percentage50,.nicdark_width_percentage60,.nicdark_width_percentage70,.nicdark_width_percentage80,.nicdark_width_percentage90,.nicdark_width_percentage100 { width: 100% !important; } /*some class*/ .nicdark_disable_marginleft_iphoneland, .nicdark_disable_marginleft_responsive{ margin-left: 0px !important; } .nicdark_marginleft20_iphoneland { margin-left: 20px !important; } .nicdark_aligncenter_iphoneland, .nicdark_aligncenter_responsive { text-align: center !important; } .nicdark_width100_iphoneland, .nicdark_width100_responsive { width: 100% !important; } /*disable float*/ .nicdark_disable_floatleft_iphoneland { float: initial !important; } .nicdark_disable_floatright_iphoneland { float: initial !important; } /*boxed*/ .nicdark_site_boxed, .nicdark_menu_boxed{ width: 500px !important; } /*display*/ .nicdark_displaynone_iphoneland, .nicdark_displaynone_responsive{ display: none; } .nicdark_displaynone_desktop { display: block !important; } /*navigation*/ .slowup{ -webkit-animation: none; animation: none; margin-top: 0px !important; } .slowdown{ -webkit-animation: none; animation: none; margin-top: 0px !important; } .tinynav{ display:block; } .nicdark_menu{ display:none; } } /*iphone potr*/ @media only screen and (min-width: 320px) and (max-width: 479px){ body{ -webkit-text-size-adjust:none; } .nicdark_container{ width:300px;} .grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{ width: 280px; } .grid.percentage{ width: 100%; } .nicdark_width_percentage10,.nicdark_width_percentage20,.nicdark_width_percentage25,.nicdark_width_percentage30,.nicdark_width_percentage40,.nicdark_width_percentage50,.nicdark_width_percentage60,.nicdark_width_percentage70,.nicdark_width_percentage80,.nicdark_width_percentage90,.nicdark_width_percentage100 { width: 100% !important; } /*some class*/ .nicdark_disable_marginleft_iphonepotr, .nicdark_disable_marginleft_responsive { margin-left: 0px !important; } .nicdark_marginleft20_iphonepotr { margin-left: 20px !important; } .nicdark_aligncenter_iphonepotr, .nicdark_aligncenter_responsive { text-align: center !important; } .nicdark_width100_iphonepotr, .nicdark_width100_responsive { width: 100% !important; } /*disable float*/ .nicdark_disable_floatleft_iphonepotr { float: initial !important; } .nicdark_disable_floatright_iphonepotr { float: initial !important; } /*boxed*/ .nicdark_site_boxed, .nicdark_menu_boxed{ width: 340px !important; } /*display*/ .nicdark_displaynone_iphonepotr, .nicdark_displaynone_responsive{ display: none; } .nicdark_displaynone_desktop { display: block !important; } /*navigation*/ .slowup{ -webkit-animation: none; animation: none; margin-top: 0px !important; } .slowdown{ -webkit-animation: none; animation: none; margin-top: 0px !important; } .tinynav{ display:block; } .nicdark_menu{ display:none; } } /* Forcer le conteneur à ne jamais déborder */ @media (max-width: 1024px) { .nicdark_container { width: 100% !important; max-width: 100% !important; padding-left: 15px; padding-right: 15px; box-sizing: border-box; } } /* Sur tablettes portrait + mobiles : grille nicdark en colonne unique */ @media (max-width: 768px) { .grid, [class*="grid_"] { width: 100% !important; margin: 0 0 15px 0 !important; float: none !important; clear: both; } /* Le "right" flottant du header ne doit pas casser la mise en page */ .right { float: none !important; text-align: left !important; } /* Les divs absolus qui sortent du flux en desktop */ .nicdark_absolute { position: static !important; } } /* ===================================================================== * mobile.css — Optimisations mobiles pour le site (framework nicdark + Bootstrap) * À charger APRÈS nicdark_style.css, nicdark_responsive.css, bootstrap.min.css et app.css * Breakpoints utilisés : * - max-width: 768px → tablettes portrait & smartphones * - max-width: 480px → smartphones * ===================================================================== */ /* ---------- 1. BASE : empêcher tout débordement horizontal ----------- */ html, body { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; /* évite le zoom auto iOS */ } *, *::before, *::after { box-sizing: border-box; } img, video, iframe, embed, object { max-width: 100%; height: auto; } /* ---------- 2. MOBILE : <= 768px ------------------------------------- */ @media (max-width: 768px) { /* --- Conteneurs & grille nicdark ---------------------------------- */ .nicdark_site, .nicdark_site_fullwidth, .nicdark_container, .nicdark_section { width: 100% !important; max-width: 100% !important; padding-left: 10px; padding-right: 10px; } /* Toute la grille nicdark passe en colonne unique */ .grid, .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; float: none !important; display: block; } /* Annule les marges calculées en desktop */ .nicdark_marginleft10, .nicdark_marginleft20, .nicdark_marginleft30, .nicdark_marginleft50, .nicdark_marginleft70, .nicdark_marginleft100 { margin-left: 0 !important; } /* Les icônes "absolute" des cartes nicdark_archive1 passent en flux normal */ .nicdark_archive1 .nicdark_absolute, .nicdark_btn_iconbg.nicdark_absolute { position: relative !important; top: auto !important; left: auto !important; right: auto !important; margin: 0 0 10px 0 !important; display: inline-block; } /* Espaceurs verticaux : on les réduit pour éviter les pages trop longues */ .nicdark_space100 { height: 40px !important; } .nicdark_space50 { height: 25px !important; } .nicdark_space40 { height: 20px !important; } .nicdark_space30 { height: 15px !important; } .nicdark_space20 { height: 10px !important; } /* --- Header / logo / menu ---------------------------------------- */ .nicdark_logo { margin-left: 0 !important; text-align: center; width: 100%; } .nicdark_logo img { max-width: 180px; height: auto; } /* Menu nicdark principal : on le cache et on affiche tinynav à la place. tinynav crée automatiquement un est toujours généré si le plugin est chargé, mais on * ne l'utilise plus : le drawer JS prend le relais. * ------------------------------------------------------------------ */ select.tinynav, select.tinynav-ready { display: none !important; } /* ------------------------------------------------------------------ * 2) Bouton hamburger (inséré par mobile-menu.js) * ------------------------------------------------------------------ */ .mobile-menu-toggle { display: none; /* caché par défaut, affiché via media query mobile */ position: fixed; top: 10px; right: 10px; z-index: 10000; width: 48px; height: 48px; padding: 0; border: none; border-radius: 8px; background: #065EC1; /* bleu du site (couleur des liens du menu) */ color: #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); transition: background 0.2s ease; } .mobile-menu-toggle:focus, .mobile-menu-toggle:hover { background: #0549a0; outline: none; } .mobile-menu-toggle:focus-visible { outline: 2px solid #ffbf47; outline-offset: 2px; } .mobile-menu-toggle .bar { display: block; width: 22px; height: 2px; margin: 5px auto; background: #fff; border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; } /* État "ouvert" : les barres forment une croix */ .mobile-menu-toggle.is-open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mobile-menu-toggle.is-open .bar:nth-child(2) { opacity: 0; } .mobile-menu-toggle.is-open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ------------------------------------------------------------------ * 3) Overlay semi-transparent derrière le drawer * ------------------------------------------------------------------ */ .mobile-menu-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s; z-index: 9998; } .mobile-menu-overlay.is-visible { opacity: 1; visibility: visible; transition: opacity 0.25s ease, visibility 0s linear 0s; } /* ------------------------------------------------------------------ * 4) Drawer latéral (le menu lui-même) * ------------------------------------------------------------------ */ .mobile-menu-drawer { position: fixed; top: 0; right: 0; width: min(85vw, 340px); height: 100vh; height: 100dvh; /* évite les barres mobiles qui masquent le bas */ background: #ffffff; z-index: 9999; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15); overflow: hidden; /* le scroll est géré par .mmd-body */ } .mobile-menu-drawer.is-open { transform: translateX(0); } /* --- En-tête du drawer (titre + croix) --- */ .mobile-menu-drawer .mmd-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: #065EC1; color: #fff; flex-shrink: 0; } .mobile-menu-drawer .mmd-title { font-family: 'Raleway', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 0.5px; } .mobile-menu-drawer .mmd-close { background: transparent; border: none; color: #fff; font-size: 32px; line-height: 1; padding: 0 6px; cursor: pointer; border-radius: 6px; min-width: 40px; min-height: 40px; } .mobile-menu-drawer .mmd-close:focus, .mobile-menu-drawer .mmd-close:hover { background: rgba(255, 255, 255, 0.15); outline: none; } /* --- Corps scrollable du drawer --- */ .mobile-menu-drawer .mmd-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0; } /* --- Sections (recherche / nav principale / nav utilisateur) --- */ .mobile-menu-drawer .mmd-section { padding: 8px 0; border-bottom: 1px solid #eef1f4; } .mobile-menu-drawer .mmd-section:last-child { border-bottom: none; } /* --- Recherche --- */ .mobile-menu-drawer .mmd-search { padding: 12px 14px; background: #f7f9fc; } .mobile-menu-drawer .mmd-search-form { display: flex; gap: 6px; align-items: stretch; width: 100%; } .mobile-menu-drawer .mmd-search-form .form-control, .mobile-menu-drawer .mmd-search-form input[type="text"], .mobile-menu-drawer .mmd-search-form input[type="search"] { flex: 1 1 auto; min-width: 0; font-size: 16px; /* empêche le zoom iOS au focus */ padding: 8px 10px; border: 1px solid #d1d7de; border-radius: 6px; background: #fff; } .mobile-menu-drawer .mmd-search-form .btn { flex: 0 0 auto; padding: 8px 12px; border-radius: 6px; } /* --- Liste des entrées (nav principale + nav utilisateur) --- */ .mobile-menu-drawer .mmd-list { list-style: none; margin: 0; padding: 0; } .mobile-menu-drawer .mmd-item { display: block; margin: 0; padding: 0; border-bottom: 1px solid #f0f2f5; } .mobile-menu-drawer .mmd-item:last-child { border-bottom: none; } /* --- Ligne principale d'une entrée --- */ .mobile-menu-drawer .mmd-row { display: flex; align-items: stretch; min-height: 48px; /* cible tactile confortable */ } .mobile-menu-drawer .mmd-link { flex: 1 1 auto; display: flex; align-items: center; padding: 12px 18px; color: #065EC1; font-family: 'Raleway', sans-serif; font-size: 16px; font-weight: 600; text-decoration: none; line-height: 1.3; } .mobile-menu-drawer .mmd-link:hover, .mobile-menu-drawer .mmd-link:focus { background: #f4f8fd; color: #0549a0; outline: none; } .mobile-menu-drawer .mmd-link--static { color: #2c3e50; cursor: default; } /* Icônes Open Iconic dans les liens : alignement propre */ .mobile-menu-drawer .mmd-link .oi, .mobile-menu-drawer .mmd-sublink .oi { margin-right: 10px; flex-shrink: 0; vertical-align: middle; } /* --- Bouton d'accordéon pour sous-menu --- */ .mobile-menu-drawer .mmd-sub-toggle { flex: 0 0 auto; width: 48px; min-height: 48px; background: transparent; border: none; border-left: 1px solid #f0f2f5; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .mobile-menu-drawer .mmd-sub-toggle:hover, .mobile-menu-drawer .mmd-sub-toggle:focus { background: #f4f8fd; outline: none; } .mobile-menu-drawer .mmd-chevron { width: 10px; height: 10px; border-right: 2px solid #065EC1; border-bottom: 2px solid #065EC1; transform: rotate(45deg); transition: transform 0.25s ease; margin-top: -3px; } .mobile-menu-drawer .mmd-sub-toggle[aria-expanded="true"] .mmd-chevron { transform: rotate(-135deg); margin-top: 3px; } /* --- Sous-liste (niveau 2) --- */ .mobile-menu-drawer .mmd-sublist { list-style: none; margin: 0; padding: 0; background: #f7f9fc; } .mobile-menu-drawer .mmd-sublist[hidden] { display: none; } .mobile-menu-drawer .mmd-subitem { border-top: 1px solid #eef1f4; } .mobile-menu-drawer .mmd-sublink { display: flex; align-items: center; padding: 11px 18px 11px 36px; color: #3a4a5c; font-size: 15px; font-weight: 500; text-decoration: none; line-height: 1.3; min-height: 44px; } .mobile-menu-drawer .mmd-sublink:hover, .mobile-menu-drawer .mmd-sublink:focus { background: #e9f0fa; color: #065EC1; outline: none; } /* --- Bloc utilisateur : variante visuelle --- */ .mobile-menu-drawer .mmd-user { background: #fafbfc; } .mobile-menu-drawer .mmd-user .mmd-link { color: #2c3e50; font-weight: 500; font-size: 15px; } /* ------------------------------------------------------------------ * 5) Media query : activation du menu mobile (<= 767px) * ------------------------------------------------------------------ */ @media (max-width: 767px) { .mobile-menu-toggle { display: block; } /* --- On masque complètement l'ancien menu desktop --- */ ul.nicdark_menu, nav > ul.nicdark_menu { display: none !important; visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* --- On masque aussi la barre du haut (search + navbar-nav) --- Elle est désormais intégrée au drawer ; la garder visible ferait doublon et casserait le header sur petits écrans. */ .nicdark_displaynone_responsive { display: none !important; } /* La