/* ========================================================= MNE PREMIUM SINGLE TOUR STYLE.CSS Version 4.0.0 IMPORTANT: Le fichier est chargé directement par le plugin PHP. Les titres WordPress utilisent volontairement : body.single-post .entry-content h2.wp-block-heading h3.wp-block-heading h4.wp-block-heading C'est le même chemin qui fonctionne dans Apparence > CSS additionnel. ========================================================= */ /* ========================================================= 01 — GLOBAL BOX SIZING ========================================================= */ .mne-premium-tour-page *, .mne-premium-tour-page *::before, .mne-premium-tour-page *::after, .mne-tour-layout *, .mne-tour-layout *::before, .mne-tour-layout *::after { box-sizing: border-box; } /* ========================================================= 02 — SINGLE TOUR WRAPPER ========================================================= */ .mne-premium-tour-page { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: #ffffff; color: #68645e; } /* ========================================================= 03 — BLOCKSY ENTRY CONTENT ========================================================= */ body.single-post .entry-content { width: 100%; } /* ========================================================= 04 — HERO ========================================================= */ .mne-tour-hero { position: relative !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; margin-top: 0 !important; margin-bottom: 0 !important; min-height: 680px; display: flex; align-items: flex-end; overflow: hidden; background-position: center center; background-size: cover; background-repeat: no-repeat; } /* ========================================================= 05 — HERO OVERLAY ========================================================= */ .mne-tour-hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( to bottom, rgba(10,15,13,.02) 0%, rgba(10,15,13,.08) 30%, rgba(10,15,13,.35) 55%, rgba(10,15,13,.92) 100% ); } /* ========================================================= 06 — HERO INNER ========================================================= */ .mne-tour-hero-inner { position: relative; z-index: 3; width: 100%; max-width: 1400px; margin: 0 auto; padding: 150px 35px 38px; } /* ========================================================= 07 — HERO BADGE ========================================================= */ .mne-tour-hero-badge { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 8px 15px; border: 1px solid rgba(255,255,255,.30); border-radius: 50px; background: rgba(255,255,255,.10); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #ffffff; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; } .mne-tour-hero-badge i { color: #d5a15c; font-size: 13px; } /* ========================================================= 08 — HERO TITLE ========================================================= */ .mne-tour-hero-title { max-width: 1050px; margin: 0 0 18px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: #ffffff !important; font-size: clamp(40px, 5vw, 66px) !important; line-height: 1.06 !important; font-weight: 800 !important; letter-spacing: -1.8px !important; } /* ========================================================= 09 — HERO ROUTE ========================================================= */ .mne-tour-hero-route { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin-bottom: 32px; color: #ffffff; font-size: 14px; font-weight: 650; } .mne-tour-hero-route span { display: inline-flex; align-items: center; gap: 7px; } .mne-tour-hero-route span i { color: #d5a15c; } .mne-tour-hero-route > i { color: #d5a15c; font-size: 13px; } /* ========================================================= 10 — HERO INFO BAR ========================================================= */ .mne-tour-hero-info { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; overflow: hidden; border: 1px solid rgba(255,255,255,.20); border-radius: 16px; background: rgba(255,255,255,.09); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* ========================================================= 11 — HERO INFO ITEM ========================================================= */ .mne-tour-info-item { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 18px 20px; border-right: 1px solid rgba(255,255,255,.13); } .mne-tour-info-item:last-child { border-right: none; } /* ========================================================= 12 — INFO ICON ========================================================= */ .mne-tour-info-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 39px; width: 39px; height: 39px; border-radius: 10px; background: rgba(213,161,92,.18); color: #d5a15c; } .mne-tour-info-icon i { font-size: 14px; } /* ========================================================= 13 — INFO TEXT ========================================================= */ .mne-tour-info-item span { display: block; margin-bottom: 3px; color: rgba(255,255,255,.60); font-size: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; } .mne-tour-info-item strong { display: block; overflow: hidden; color: #ffffff; font-size: 12px; font-weight: 750; white-space: nowrap; text-overflow: ellipsis; } /* ========================================================= 14 — MAIN LAYOUT ========================================================= */ .mne-tour-layout { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 58px; width: 100%; max-width: 1400px; margin: 0 auto; padding: 70px 35px 100px; align-items: start; } /* ========================================================= 15 — CONTENT ========================================================= */ .mne-tour-content { min-width: 0; width: 100%; color: #68645e; font-size: 16px; line-height: 1.85; } .mne-tour-content p { margin: 0 0 21px; } .mne-tour-content strong { color: #292929; font-weight: 700; } .mne-tour-content a { color: #a86f35; text-decoration: underline; text-underline-offset: 3px; } /* ========================================================= 16 — H2 WORDPRESS ========================================================= IMPORTANT : Le H2 WordPress est :

On utilise le chemin exact qui fonctionne dans Apparence > CSS additionnel. ========================================================= */ body.single-post .entry-content h2.wp-block-heading { display: flex !important; align-items: center !important; gap: 14px !important; width: 100% !important; margin: 50px 0 24px !important; padding: 16px 20px !important; border: 1px solid #e8e3dc !important; border-left: 4px solid #c49a5a !important; border-radius: 10px !important; background: #faf9f6 !important; color: #292929 !important; font-size: 26px !important; line-height: 1.3 !important; font-weight: 800 !important; box-shadow: 0 7px 25px rgba(30,35,30,.035) !important; } /* H2 ICON */ body.single-post .entry-content h2.wp-block-heading::before { content: "\f4d7"; display: flex; align-items: center; justify-content: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 9px; background: #f2e9da; color: #b88645; font-family: "Font Awesome 6 Free"; font-size: 15px; font-weight: 900; } /* ========================================================= 17 — H3 WORDPRESS ========================================================= */ body.single-post .entry-content h3.wp-block-heading { display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important; margin: 35px 0 18px !important; padding: 12px 17px !important; border: 1px solid #e8e3dc !important; border-radius: 9px !important; background: #ffffff !important; color: #292929 !important; font-size: 21px !important; line-height: 1.4 !important; font-weight: 750 !important; } /* H3 ICON */ body.single-post .entry-content h3.wp-block-heading::before { content: "\f3c5"; display: flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px; background: #eef4f0; color: #285943; font-family: "Font Awesome 6 Free"; font-size: 13px; font-weight: 900; } /* ========================================================= 18 — H4 WORDPRESS ========================================================= */ body.single-post .entry-content h4.wp-block-heading { display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; margin: 35px 0 13px !important; padding: 11px 15px !important; border: 1px solid #e8e3dc !important; border-radius: 8px !important; background: #faf9f6 !important; color: #292929 !important; font-size: 17px !important; line-height: 1.4 !important; font-weight: 800 !important; } /* H4 ICON */ body.single-post .entry-content h4.wp-block-heading::before { content: "\f00c"; display: flex; align-items: center; justify-content: center; flex: 0 0 27px; width: 27px; height: 27px; border-radius: 50%; background: #eef6f0; color: #3f8f5b; font-family: "Font Awesome 6 Free"; font-size: 10px; font-weight: 900; } /* ========================================================= 19 — GENERAL LISTS ========================================================= */ body.single-post .entry-content ul.wp-block-list { width: 100%; margin: 8px 0 30px !important; padding: 0 !important; list-style: none !important; } body.single-post .entry-content ul.wp-block-list li { position: relative; margin: 0 !important; padding: 8px 12px 8px 30px !important; color: #68645e !important; font-size: 15px; line-height: 1.7; } body.single-post .entry-content ul.wp-block-list li::before { content: ""; position: absolute; left: 8px; top: 17px; width: 7px; height: 7px; border-radius: 50%; background: #b88645; } /* ========================================================= 20 — INCLUDED TITLE ========================================================= */ body.single-post .entry-content h4.mne-included-title { background: linear-gradient( 90deg, #f1f8f3, #ffffff ) !important; border-color: #d9ebdd !important; color: #285943 !important; } body.single-post .entry-content h4.mne-included-title::before { content: "\f00c" !important; background: #e6f3e9 !important; color: #3f8f5b !important; } /* ========================================================= 21 — INCLUDED LIST ========================================================= */ body.single-post .entry-content ul.mne-included-list { margin: -5px 0 35px !important; padding: 11px 18px 15px !important; border-left: 3px solid #5fa873 !important; border-radius: 0 0 8px 8px; background: #fbfdfb !important; } body.single-post .entry-content ul.mne-included-list li::before { background: #3f8f5b !important; } /* ========================================================= 22 — EXCLUDED TITLE ========================================================= */ body.single-post .entry-content h4.mne-excluded-title { background: linear-gradient( 90deg, #fff5f5, #ffffff ) !important; border-color: #f0dada !important; color: #a63f3f !important; } body.single-post .entry-content h4.mne-excluded-title::before { content: "\f00d" !important; background: #fbe9e9 !important; color: #c84c4c !important; } /* ========================================================= 23 — EXCLUDED LIST ========================================================= */ body.single-post .entry-content ul.mne-excluded-list { margin: -5px 0 40px !important; padding: 11px 18px 15px !important; border-left: 3px solid #d96a6a !important; border-radius: 0 0 8px 8px; background: #fffcfc !important; } body.single-post .entry-content ul.mne-excluded-list li::before { background: #c84c4c !important; } /* ========================================================= 24 — FAQ ========================================================= */ .mne-tour-content .wp-block-accordion { margin: 50px 0 35px; } .mne-tour-content .wp-block-accordion-item { margin-bottom: 12px; border: 1px solid #e8e3dc; border-radius: 12px; background: #ffffff; overflow: hidden; box-shadow: 0 8px 25px rgba(30,35,30,.04); } .mne-tour-content .wp-block-accordion-heading { margin: 0 !important; } .mne-tour-content .wp-block-accordion-heading__toggle { display: flex; align-items: center; width: 100%; min-height: 60px; padding: 11px 17px !important; border: 0 !important; background: #faf9f6 !important; color: #292929 !important; text-align: left; cursor: pointer; } .mne-tour-content .wp-block-accordion-heading__toggle::before { content: "\f128"; display: flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px; margin-right: 12px; border-radius: 9px; background: #f2e9da; color: #b88645; font-family: "Font Awesome 6 Free"; font-size: 13px; font-weight: 900; } .mne-tour-content .wp-block-accordion-heading__toggle-title { font-size: 16px; font-weight: 800; } .mne-tour-content .wp-block-accordion-heading__toggle-icon { margin-left: auto; color: #b88645; } .mne-tour-content .wp-block-accordion-panel { padding: 8px 25px 22px; background: #ffffff; } .mne-tour-content .wp-block-accordion-panel h6 { margin: 20px 0 8px !important; color: #292929 !important; font-size: 15px !important; line-height: 1.5 !important; font-weight: 750 !important; } .mne-tour-content .wp-block-accordion-panel p { margin: 0 0 14px; color: #68645e; font-size: 14px; line-height: 1.75; } /* ========================================================= 25 — SIDEBAR ========================================================= */ .mne-tour-contact-sidebar { position: sticky; top: 30px; align-self: start; width: 100%; } /* ========================================================= 26 — CONTACT CARD ========================================================= */ .mne-tour-contact-card { width: 100%; padding: 28px; border: 1px solid #e5e1d9; border-radius: 18px; background: #ffffff; box-shadow: 0 18px 50px rgba(25,40,30,.08); } /* ========================================================= 27 — CONTACT HEADER ========================================================= */ .mne-contact-header { display: flex; align-items: center; gap: 13px; margin-bottom: 17px; } .mne-contact-header-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; background: #eef4f0; color: #285943; } .mne-contact-header span { display: block; margin-bottom: 4px; color: #b88645; font-size: 8px; font-weight: 850; letter-spacing: 1px; text-transform: uppercase; } /* * Contact H2 n'est PAS un wp-block-heading. * On lui garde donc son propre style. */ .mne-contact-header h2 { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-left: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #292929 !important; font-size: 21px !important; line-height: 1.25 !important; } /* ========================================================= 28 — CONTACT TEXT ========================================================= */ .mne-contact-text { margin: 0 0 20px !important; color: #68645e; font-size: 12px !important; line-height: 1.7 !important; } /* ========================================================= 29 — CONTACT FORM ========================================================= */ .mne-contact-form { padding: 18px; border: 1px solid #e8e3dc; border-radius: 12px; background: #faf9f6; } .mne-contact-form input:not([type="submit"]), .mne-contact-form textarea, .mne-contact-form select { width: 100% !important; min-height: 44px; margin: 0 0 10px !important; padding: 10px 12px !important; border: 1px solid #dcd8d0 !important; border-radius: 8px !important; background: #ffffff !important; color: #292929 !important; font-size: 12px !important; box-shadow: none !important; } .mne-contact-form textarea { min-height: 110px; resize: vertical; } /* ========================================================= 30 — SUBMIT ========================================================= */ .mne-contact-form input[type="submit"] { width: 100% !important; min-height: 48px; margin-top: 4px; padding: 10px 15px !important; border: 0 !important; border-radius: 8px !important; background: #285943 !important; color: #ffffff !important; font-size: 10px !important; font-weight: 850 !important; text-transform: uppercase; cursor: pointer; transition: all .25s ease; } .mne-contact-form input[type="submit"]:hover { background: #1f4635 !important; color: #ffffff !important; transform: translateY(-1px); } /* ========================================================= 31 — TRUST ========================================================= */ .mne-contact-trust { display: grid; gap: 9px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #e8e3dc; } .mne-contact-trust div { display: flex; align-items: center; gap: 8px; color: #68645e; font-size: 10px; } .mne-contact-trust i { color: #3f8f5b; } /* ========================================================= 32 — TABLET ========================================================= */ @media (max-width: 1100px) { .mne-tour-layout { grid-template-columns: minmax(0,1fr) 330px; gap: 35px; padding-left: 25px; padding-right: 25px; } .mne-tour-hero-inner { padding-left: 25px; padding-right: 25px; } .mne-tour-content { font-size: 15px; } body.single-post .entry-content h2.wp-block-heading { font-size: 24px !important; } body.single-post .entry-content h3.wp-block-heading { font-size: 19px !important; } } /* ========================================================= 33 — MOBILE ========================================================= */ @media (max-width: 768px) { .mne-tour-hero { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; min-height: 610px; } .mne-tour-hero-inner { padding: 90px 18px 20px; } .mne-tour-hero-title { font-size: 35px !important; letter-spacing: -1px !important; } .mne-tour-hero-route { margin-bottom: 22px; font-size: 13px; } .mne-tour-hero-info { grid-template-columns: repeat(2,1fr); } .mne-tour-info-item { min-height: 76px; padding: 14px; border-right: 1px solid rgba(255,255,255,.13); border-bottom: 1px solid rgba(255,255,255,.13); } .mne-tour-info-item:nth-child(2n) { border-right: none; } .mne-tour-info-item:nth-last-child(-n+2) { border-bottom: none; } .mne-tour-layout { display: flex; flex-direction: column; width: 100%; max-width: 100%; margin: 0; padding: 45px 18px 65px; gap: 45px; } .mne-tour-content { order: 1; width: 100%; font-size: 15px; line-height: 1.8; } .mne-tour-contact-sidebar { position: static !important; order: 2; width: 100%; } .mne-tour-contact-card { width: 100%; } body.single-post .entry-content h2.wp-block-heading { font-size: 22px !important; } body.single-post .entry-content h3.wp-block-heading { font-size: 19px !important; } } /* ========================================================= 34 — SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .mne-tour-hero { min-height: 650px; } .mne-tour-hero-inner { padding: 70px 15px 15px; } .mne-tour-hero-title { font-size: 30px !important; } .mne-tour-hero-info { grid-template-columns: 1fr; } .mne-tour-info-item { min-height: 67px; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.13); } .mne-tour-info-item:last-child { border-bottom: none; } .mne-tour-layout { padding-left: 12px; padding-right: 12px; } body.single-post .entry-content h2.wp-block-heading { font-size: 20px !important; padding: 12px 14px !important; } body.single-post .entry-content h3.wp-block-heading { font-size: 18px !important; } body.single-post .entry-content h4.wp-block-heading { font-size: 16px !important; } .mne-tour-contact-card { padding: 18px; } .mne-contact-form { padding: 14px; } .mne-tour-content .wp-block-accordion-heading__toggle-title { font-size: 14px; } .mne-tour-content .wp-block-accordion-panel { padding: 7px 16px 18px; } }