/* ========================================================================== Moroccan Guide — Chrome partagé "Édition 2026" Header + Footer + palette alignés sur le site Next.js. Dark mode "Nuit au riad" piloté par . Appliqué aux outils legacy : générateur, budget, devises, etc. ========================================================================== */ /* ---------- Tokens ---------- */ :root { --mg-ivory: #FBF7EF; --mg-parchment: #FCFAF5; --mg-linen: #F3EBDB; --mg-stone: #E7DDC9; --mg-sand: #EFE6D0; --mg-espresso: #1F150E; --mg-espresso-soft: #2F2118; --mg-espresso-mid: #433427; --mg-espresso-muted: #5A4B3D; --mg-terracotta: #9E4E30; --mg-terracotta-deep: #7A3B23; --mg-olive: #5A6548; --mg-olive-deep: #3E4A32; --mg-bronze: #7A5A30; --mg-bronze-dark: #5F4520; --mg-bronze-light: #C9A878; --mg-border: rgba(31, 21, 14, 0.1); --mg-border-strong: rgba(31, 21, 14, 0.2); --mg-shadow-soft: 0 1px 2px rgba(31, 21, 14, 0.03), 0 4px 14px rgba(31, 21, 14, 0.04); --mg-shadow-lift: 0 4px 12px rgba(31, 21, 14, 0.06), 0 26px 56px rgba(31, 21, 14, 0.08); /* Alias rétro-compat pour le CSS des outils legacy */ --flag-red: var(--mg-terracotta); --flag-red-deep: var(--mg-terracotta-deep); --flag-green: var(--mg-olive); --sahara: var(--mg-terracotta); --sahara-deep: var(--mg-terracotta-deep); --gold: var(--mg-bronze); --gold-light: var(--mg-linen); --sand: var(--mg-sand); --cream: var(--mg-ivory); --ink: var(--mg-espresso); --ink-soft: var(--mg-espresso-soft); --muted: var(--mg-espresso-muted); --border: var(--mg-border); --mg-red: var(--mg-terracotta); --mg-red-deep: var(--mg-terracotta-deep); --mg-green: var(--mg-olive); --mg-cream: var(--mg-ivory); } html.dark { --mg-ivory: #14100B; --mg-parchment: #1C1712; --mg-linen: #241D15; --mg-stone: #2B2219; --mg-sand: #241D15; /* Texte boosté pour atteindre WCAG AAA en dark mode */ --mg-espresso: #F5EBD4; --mg-espresso-soft: #ECDFC2; --mg-espresso-mid: #D4C49C; --mg-espresso-muted: #B8A77F; --mg-terracotta: #E8906C; --mg-terracotta-deep: #C06C48; --mg-olive: #AEB993; --mg-olive-deep: #BCC89E; --mg-bronze: #D4A878; --mg-bronze-dark: #C9A878; --mg-bronze-light: #E8C498; --mg-border: rgba(240, 230, 210, 0.1); --mg-border-strong: rgba(240, 230, 210, 0.22); --mg-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.4); --mg-shadow-lift: 0 4px 12px rgba(0, 0, 0, 0.45), 0 26px 56px rgba(232, 144, 108, 0.08); /* Mise à jour des alias legacy */ --flag-red: var(--mg-terracotta); --flag-red-deep: var(--mg-terracotta-deep); --flag-green: var(--mg-olive); --sahara: var(--mg-terracotta); --sahara-deep: var(--mg-terracotta-deep); --gold: var(--mg-bronze-light); --gold-light: var(--mg-linen); --sand: var(--mg-sand); --cream: var(--mg-ivory); --ink: var(--mg-espresso); --ink-soft: var(--mg-espresso-soft); --muted: var(--mg-espresso-muted); --border: var(--mg-border); --mg-red: var(--mg-terracotta); --mg-red-deep: var(--mg-terracotta-deep); --mg-green: var(--mg-olive); --mg-cream: var(--mg-ivory); } html, body { background: var(--mg-ivory); color: var(--mg-espresso); transition: background-color 400ms cubic-bezier(0.22, 1, 0.36, 1), color 400ms cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- Header ---------- */ .mgc-header { position: fixed; inset: 0 0 auto 0; top: 0; z-index: 40; background: color-mix(in srgb, var(--mg-ivory) 92%, transparent); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--mg-border); box-shadow: var(--mg-shadow-soft); transition: background-color 300ms, border-color 300ms; } .mgc-header-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } @media (min-width: 768px) { .mgc-header-inner { height: 84px; } } .mgc-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--mg-espresso); } .mgc-logo-mark { width: 30px; height: 30px; color: var(--mg-terracotta); } .mgc-logo-text { display: flex; flex-direction: column; line-height: 1; } .mgc-logo-name { font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--mg-espresso); } .mgc-logo-tagline { margin-top: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mg-espresso-muted); } .mgc-nav { display: none; align-items: center; gap: 2px; } @media (min-width: 900px) { .mgc-nav { display: flex; } } .mgc-nav a { padding: 10px 14px; border-radius: 12px; font-family: 'Inter', -apple-system, sans-serif; font-size: 14px; font-weight: 500; text-decoration: none; color: color-mix(in srgb, var(--mg-espresso) 75%, transparent); transition: color 200ms, background-color 200ms; } .mgc-nav a:hover { color: var(--mg-terracotta-deep); } .mgc-actions { display: flex; align-items: center; gap: 12px; } .mgc-lang { display: none; align-items: center; gap: 2px; padding: 4px 10px; border: 1px solid var(--mg-border-strong); border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mg-espresso-muted); } @media (min-width: 900px) { .mgc-lang { display: inline-flex; } } .mgc-lang a { padding: 2px 6px; border-radius: 999px; text-decoration: none; color: inherit; opacity: 0.6; transition: opacity 200ms, color 200ms; } .mgc-lang a:hover { opacity: 0.9; } .mgc-lang a.is-active { opacity: 1; color: var(--mg-espresso); } .mgc-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 12px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; text-decoration: none; background: var(--mg-espresso); color: var(--mg-ivory); box-shadow: var(--mg-shadow-soft); transition: background-color 300ms, box-shadow 300ms, transform 300ms cubic-bezier(0.22, 1, 0.36, 1); } .mgc-cta:hover { background: var(--mg-terracotta-deep); box-shadow: var(--mg-shadow-lift); } html.dark .mgc-cta { background: #3B2A1A; } html.dark .mgc-cta:hover { background: var(--mg-terracotta-deep); color: var(--mg-ivory); } /* Burger mobile */ .mgc-burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: 12px; background: transparent; color: var(--mg-espresso); cursor: pointer; } @media (min-width: 900px) { .mgc-burger { display: none; } } .mgc-mobile-panel { position: fixed; inset: 72px 0 auto 0; z-index: 39; background: var(--mg-ivory); border-top: 1px solid var(--mg-border); max-height: 0; overflow: hidden; transition: max-height 500ms cubic-bezier(0.22, 1, 0.36, 1); } .mgc-mobile-panel.is-open { max-height: calc(100vh - 72px); } .mgc-mobile-panel-inner { padding: 32px 24px; } .mgc-mobile-panel a { display: block; padding: 14px 4px; font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; color: var(--mg-espresso); text-decoration: none; transition: color 200ms; } .mgc-mobile-panel a:hover { color: var(--mg-terracotta-deep); } .mgc-mobile-foot { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--mg-border); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } /* Google Translate — widget natif caché + dropdown personnalisé */ #mg-google-translate-widget, #google_translate_element, .goog-te-gadget, .goog-te-gadget-simple, .goog-te-banner-frame.skiptranslate, iframe.goog-te-banner-frame { display: none !important; visibility: hidden !important; } body { top: 0 !important; } .goog-tooltip, .goog-tooltip:hover, .goog-text-highlight { background: transparent !important; border: none !important; box-shadow: none !important; } font[style*="vertical-align"] { background: transparent !important; } .mgc-translate { position: relative; display: inline-flex; } .mgc-translate-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--mg-border-strong); border-radius: 999px; background: transparent; color: var(--mg-espresso-muted); font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: border-color 200ms, color 200ms; } .mgc-translate-trigger:hover { border-color: color-mix(in srgb, var(--mg-terracotta-deep) 40%, transparent); color: var(--mg-espresso); } .mgc-translate-trigger svg { color: currentColor; } .mgc-translate-panel { position: absolute; right: 0; top: calc(100% + 8px); width: 220px; max-height: 60vh; overflow-y: auto; z-index: 60; background: var(--mg-parchment); border: 1px solid var(--mg-border); border-radius: 16px; box-shadow: var(--mg-shadow-lift); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 250ms cubic-bezier(0.22, 1, 0.36, 1), transform 250ms cubic-bezier(0.22, 1, 0.36, 1); } .mgc-translate.is-open .mgc-translate-panel { opacity: 1; transform: translateY(0); pointer-events: auto; } .mgc-translate-head, .mgc-translate-foot { padding: 10px 16px; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mg-espresso-muted); } .mgc-translate-head { border-bottom: 1px solid var(--mg-border); } .mgc-translate-foot { border-top: 1px solid var(--mg-border); font-size: 10px; letter-spacing: normal; text-transform: none; } .mgc-translate-list { list-style: none; margin: 0; padding: 4px 0; } .mgc-translate-list button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; border: none; background: transparent; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--mg-espresso); text-align: left; cursor: pointer; transition: background-color 200ms; } .mgc-translate-list button:hover { background: var(--mg-ivory); } .mgc-translate-list button.is-active { color: var(--mg-terracotta-deep); font-weight: 500; background: var(--mg-ivory); } .mgc-translate-flag { font-size: 18px; line-height: 1; } .mgc-translate-label { flex: 1; } /* Toggle thème */ .mgc-theme { position: relative; display: inline-flex; width: 58px; height: 32px; flex: none; padding: 0; border: 1px solid var(--mg-border-strong); border-radius: 999px; background: var(--mg-parchment); cursor: pointer; transition: border-color 400ms, background-color 400ms; } .mgc-theme:hover { border-color: color-mix(in srgb, var(--mg-terracotta-deep) 40%, transparent); } .mgc-theme-sun, .mgc-theme-moon { position: absolute; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; pointer-events: none; transition: opacity 300ms; } .mgc-theme-sun { left: 7px; color: var(--mg-bronze-dark); opacity: 1; } .mgc-theme-moon { right: 7px; color: var(--mg-espresso); opacity: 0.35; } html.dark .mgc-theme-sun { opacity: 0.35; color: color-mix(in srgb, var(--mg-ivory) 60%, transparent); } html.dark .mgc-theme-moon { opacity: 1; color: var(--mg-ivory); } .mgc-theme-thumb { position: absolute; top: 50%; left: 3px; width: 24px; height: 24px; transform: translateY(-50%); border-radius: 50%; background: linear-gradient(135deg, #FBF7EF, #E7DDC9); box-shadow: var(--mg-shadow-soft); transition: left 500ms cubic-bezier(0.22, 1, 0.36, 1), background 500ms; pointer-events: none; } html.dark .mgc-theme-thumb { left: calc(100% - 27px); background: linear-gradient(135deg, #E8C498, #C9A878); } /* Spacer pour éviter que le header ne couvre le contenu */ .mgc-spacer { height: 72px; } @media (min-width: 768px) { .mgc-spacer { height: 84px; } } /* ---------- Footer ---------- */ .mgc-footer { background: #0D0907; color: rgba(240, 230, 210, 0.75); padding: 72px 24px 40px; margin-top: 100px; font-family: 'Inter', sans-serif; position: relative; } html.dark .mgc-footer { background: #0A0705; } .mgc-footer-inner { max-width: 1200px; margin: 0 auto; } .mgc-footer-ornament { display: flex; justify-content: center; align-items: center; gap: 16px; margin-bottom: 56px; color: rgba(201, 168, 120, 0.8); } .mgc-footer-ornament span { display: inline-block; height: 1px; width: 64px; background: rgba(201, 168, 120, 0.45); } @media (min-width: 768px) { .mgc-footer-ornament span { width: 96px; } } .mgc-footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 56px; margin-bottom: 56px; } @media (max-width: 960px) { .mgc-footer-top { grid-template-columns: 1fr 1fr; gap: 40px; } } @media (max-width: 560px) { .mgc-footer-top { grid-template-columns: 1fr; gap: 32px; } } .mgc-footer-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--mg-ivory); text-decoration: none; } .mgc-footer-brand svg { color: #E8C498; } .mgc-footer-brand-text { display: flex; flex-direction: column; line-height: 1; } .mgc-footer-brand-name { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: #F0E6D2; } .mgc-footer-brand-tagline { margin-top: 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(240, 230, 210, 0.5); } .mgc-footer-desc { margin-top: 18px; max-width: 320px; font-size: 14.5px; line-height: 1.65; color: rgba(240, 230, 210, 0.65); } .mgc-footer-col-title { margin-bottom: 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(232, 196, 152, 0.85); } .mgc-footer-col ul { list-style: none; margin: 0; padding: 0; } .mgc-footer-col li { margin-bottom: 10px; } .mgc-footer-col a { font-size: 14px; color: rgba(240, 230, 210, 0.7); text-decoration: none; transition: color 200ms; } .mgc-footer-col a:hover { color: #F0E6D2; } .mgc-footer-bottom { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 32px; border-top: 1px solid rgba(240, 230, 210, 0.1); font-size: 12px; color: rgba(240, 230, 210, 0.45); } @media (min-width: 768px) { .mgc-footer-bottom { flex-direction: row; justify-content: space-between; } } .mgc-footer-bottom .mgc-footer-sig { letter-spacing: 0.22em; text-transform: uppercase; } /* ---------- Wrapper contenu outil ---------- */ .mgc-content { position: relative; z-index: 1; background: var(--mg-ivory); transition: background-color 400ms; } /* ---------- Overrides pour outils legacy (.pmm-* / .q-* / .pmm-bud-* / .pmm-cv-*) ---------- */ /* On réécrit uniquement ce qui était hardcodé avec les anciennes couleurs. Les variables `var(--ink)` etc. sont déjà prises en charge via les alias. */ /* Background général des outils */ .pmm-it, .pmm-bud, .pmm-cv, .pmm-it *, .pmm-bud *, .pmm-cv * { color: inherit; } /* --- Générateur d'itinéraire --- */ .pmm-it { color: var(--mg-espresso); } .pmm-it-hero h1 { color: var(--mg-espresso) !important; font-family: 'Fraunces', serif; font-weight: 500; letter-spacing: -0.02em; } .pmm-it-hero p { color: var(--mg-espresso-soft) !important; } .pmm-it-badge { background: var(--mg-linen) !important; color: var(--mg-bronze-dark) !important; border: 1px solid var(--mg-border); border-radius: 999px; padding: 6px 18px; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; } .pmm-it-form { background: var(--mg-parchment) !important; border: 1px solid var(--mg-border) !important; border-radius: 16px !important; box-shadow: var(--mg-shadow-soft); } .pmm-it-label { color: var(--mg-espresso) !important; font-family: 'Fraunces', serif; font-weight: 500; } .pmm-it-label-hint { color: var(--mg-espresso-muted) !important; font-family: 'Inter', sans-serif; } .pmm-it-select { background: var(--mg-ivory) !important; border: 1px solid var(--mg-border-strong) !important; color: var(--mg-espresso) !important; border-radius: 12px !important; } .pmm-it-select:focus { border-color: var(--mg-terracotta-deep) !important; box-shadow: 0 0 0 3px rgba(158, 78, 48, 0.15) !important; } .pmm-it-chip { background: var(--mg-ivory) !important; border: 1px solid var(--mg-border-strong) !important; color: var(--mg-espresso) !important; border-radius: 12px !important; } .pmm-it-chip small { color: var(--mg-espresso-muted) !important; } .pmm-it-chip:hover { border-color: var(--mg-terracotta-deep) !important; background: color-mix(in srgb, var(--mg-terracotta) 8%, var(--mg-ivory)) !important; } .pmm-it-chip.active { border-color: var(--mg-terracotta-deep) !important; background: color-mix(in srgb, var(--mg-terracotta) 14%, var(--mg-ivory)) !important; color: var(--mg-espresso) !important; } .pmm-it-style-card { background: var(--mg-ivory) !important; border: 2px solid var(--mg-border-strong) !important; border-radius: 14px !important; } .pmm-it-style-card:hover, .pmm-it-style-card.active { border-color: var(--mg-terracotta-deep) !important; background: color-mix(in srgb, var(--mg-terracotta) 10%, var(--mg-ivory)) !important; } .pmm-it-style-name { color: var(--mg-espresso) !important; } .pmm-it-style-desc { color: var(--mg-espresso-muted) !important; } .pmm-it-toggle-row { background: var(--mg-ivory) !important; border: 1px solid var(--mg-border-strong) !important; border-radius: 12px !important; } .pmm-it-toggle-text { color: var(--mg-espresso) !important; } .pmm-it-toggle-text small { color: var(--mg-espresso-muted) !important; } .pmm-it-toggle-slider { background: color-mix(in srgb, var(--mg-espresso) 18%, transparent) !important; } .pmm-it-toggle input:checked + .pmm-it-toggle-slider { background: var(--mg-terracotta-deep) !important; } .pmm-it-btn { background: var(--mg-espresso) !important; color: var(--mg-ivory) !important; border-radius: 14px !important; font-family: 'Inter', sans-serif; font-weight: 500 !important; font-size: 15px !important; letter-spacing: 0.01em; transition: background 300ms, box-shadow 300ms, transform 300ms cubic-bezier(0.22, 1, 0.36, 1) !important; } html.dark .pmm-it-btn { background: #3B2A1A !important; } .pmm-it-btn:hover { background: var(--mg-terracotta-deep) !important; box-shadow: var(--mg-shadow-lift) !important; transform: translateY(-1px); } .pmm-it-res-header { background: linear-gradient(135deg, var(--mg-espresso), #3B2A1A) !important; border-radius: 16px !important; } .pmm-it-res-title { color: var(--mg-bronze-light) !important; font-family: 'Fraunces', serif; font-weight: 500; } .pmm-it-res-sub { color: rgba(240, 230, 210, 0.75) !important; } .pmm-it-res-tag { background: rgba(232, 196, 152, 0.2) !important; color: var(--mg-bronze-light) !important; } .pmm-it-day { background: var(--mg-parchment) !important; border: 1px solid var(--mg-border) !important; border-radius: 16px !important; } .pmm-it-day-header { background: var(--mg-ivory) !important; border-bottom: 1px solid var(--mg-border) !important; } .pmm-it-day-num { color: var(--mg-terracotta-deep) !important; font-family: 'Fraunces', serif; } .pmm-it-day-city { color: var(--mg-espresso) !important; font-family: 'Fraunces', serif; font-weight: 500; } .pmm-it-day-act { color: var(--mg-espresso-soft) !important; } .pmm-it-day-act strong { color: var(--mg-espresso) !important; } .pmm-it-day-hotel { color: var(--mg-espresso-muted) !important; border-top: 1px solid var(--mg-border) !important; } .pmm-it-day-hotel-link { background: var(--mg-terracotta-deep) !important; color: var(--mg-ivory) !important; border-radius: 10px !important; } .pmm-it-day-hotel-link:hover { background: var(--mg-espresso) !important; } .pmm-it-budget { background: var(--mg-parchment) !important; border: 1px solid var(--mg-border) !important; border-radius: 16px !important; } .pmm-it-budget-title { color: var(--mg-espresso) !important; font-family: 'Fraunces', serif; font-weight: 500; } .pmm-it-budget-row { border-bottom: 1px solid var(--mg-border) !important; } .pmm-it-budget-row .cat { color: var(--mg-espresso-soft) !important; } .pmm-it-budget-row .amt { color: var(--mg-espresso) !important; } .pmm-it-budget-total { color: var(--mg-terracotta-deep) !important; font-family: 'Fraunces', serif; } .pmm-it-budget-savings { color: var(--mg-olive-deep) !important; } .pmm-it-budget-agency .cat, .pmm-it-budget-agency { color: var(--mg-espresso-muted) !important; } .pmm-it-cta-booking { background: var(--mg-terracotta-deep) !important; } .pmm-it-cta-gyg { background: var(--mg-terracotta) !important; } .pmm-it-cta-rc { background: var(--mg-bronze) !important; } .pmm-it-action-btn { border: 2px solid var(--mg-terracotta-deep) !important; color: var(--mg-terracotta-deep) !important; background: transparent !important; border-radius: 14px !important; } .pmm-it-action-btn:hover { background: color-mix(in srgb, var(--mg-terracotta) 10%, transparent) !important; } .pmm-it-action-btn.primary { background: var(--mg-terracotta-deep) !important; color: var(--mg-ivory) !important; border-color: var(--mg-terracotta-deep) !important; } .pmm-it-action-btn.primary:hover { background: var(--mg-espresso) !important; border-color: var(--mg-espresso) !important; } .pmm-it-int-card { background: var(--mg-parchment) !important; border: 1px solid var(--mg-border) !important; border-radius: 14px !important; } .pmm-it-int-card:hover { border-color: var(--mg-terracotta-deep) !important; background: var(--mg-ivory) !important; } .pmm-it-int-card-title { color: var(--mg-espresso) !important; font-family: 'Fraunces', serif; } .pmm-it-int-card-desc { color: var(--mg-espresso-muted) !important; } .pmm-it-newsletter { background: linear-gradient(135deg, var(--mg-espresso), #3B2A1A) !important; border-radius: 16px !important; } .pmm-it-newsletter h4 { color: var(--mg-ivory) !important; font-family: 'Fraunces', serif; font-weight: 500; } .pmm-it-newsletter p { color: rgba(240, 230, 210, 0.75) !important; } .pmm-it-nl-input { background: rgba(240, 230, 210, 0.08) !important; border: 1px solid rgba(240, 230, 210, 0.22) !important; color: var(--mg-ivory) !important; border-radius: 10px !important; } .pmm-it-nl-input::placeholder { color: rgba(240, 230, 210, 0.5) !important; } .pmm-it-nl-btn { background: var(--mg-terracotta) !important; color: var(--mg-ivory) !important; border-radius: 10px !important; } .pmm-it-nl-btn:hover { background: var(--mg-bronze-light) !important; color: var(--mg-espresso) !important; } .pmm-it-social { color: var(--mg-espresso-muted) !important; } .pmm-it-social-num { color: var(--mg-terracotta-deep) !important; font-family: 'Fraunces', serif; } .pmm-it-modal { background: var(--mg-ivory) !important; } .pmm-it-modal h3 { color: var(--mg-espresso) !important; font-family: 'Fraunces', serif; font-weight: 500; } .pmm-it-modal p { color: var(--mg-espresso-soft) !important; } .pmm-it-modal-input { background: var(--mg-parchment) !important; border: 1px solid var(--mg-border-strong) !important; color: var(--mg-espresso) !important; border-radius: 12px !important; } .pmm-it-modal-input:focus { border-color: var(--mg-terracotta-deep) !important; box-shadow: 0 0 0 3px rgba(158, 78, 48, 0.15) !important; } .pmm-it-modal-btn { background: var(--mg-espresso) !important; color: var(--mg-ivory) !important; border-radius: 12px !important; font-family: 'Inter', sans-serif; font-weight: 500 !important; } .pmm-it-modal-btn:hover { background: var(--mg-terracotta-deep) !important; } /* --- Calculateur budget / quiz q-* --- */ .quiz-card { background: var(--mg-parchment) !important; border: 1px solid var(--mg-border) !important; box-shadow: var(--mg-shadow-lift) !important; } .q-label { color: var(--mg-terracotta-deep) !important; } .q-title { color: var(--mg-espresso) !important; font-family: 'Fraunces', serif; } .q-sub { color: var(--mg-espresso-muted) !important; } .q-option { background: var(--mg-ivory) !important; border: 2px solid var(--mg-border-strong) !important; } .q-option:hover { border-color: var(--mg-terracotta-deep) !important; background: color-mix(in srgb, var(--mg-terracotta) 8%, var(--mg-ivory)) !important; } .q-option.selected { border-color: var(--mg-terracotta-deep) !important; background: color-mix(in srgb, var(--mg-terracotta) 14%, var(--mg-ivory)) !important; } .q-option .lbl { color: var(--mg-espresso) !important; } .q-option .hint { color: var(--mg-espresso-muted) !important; } .q-multi .q-option.selected::after { color: var(--mg-terracotta-deep) !important; } .q-number button { background: var(--mg-ivory) !important; border: 2px solid var(--mg-border-strong) !important; color: var(--mg-espresso) !important; } .q-number button:hover { border-color: var(--mg-terracotta-deep) !important; color: var(--mg-terracotta-deep) !important; } .q-number-val { color: var(--mg-terracotta-deep) !important; font-family: 'Fraunces', serif; } .q-back { color: var(--mg-espresso-muted) !important; border: 1px solid var(--mg-border) !important; background: transparent !important; } .q-back:hover { background: var(--mg-linen) !important; color: var(--mg-espresso) !important; } .q-next { background: var(--mg-espresso) !important; color: var(--mg-ivory) !important; box-shadow: var(--mg-shadow-soft) !important; } .q-next:hover { background: var(--mg-terracotta-deep) !important; } .q-next:disabled { background: var(--mg-border-strong) !important; color: var(--mg-espresso-muted) !important; } .step-dot { background: var(--mg-border-strong) !important; } .step-dot.active { background: var(--mg-terracotta-deep) !important; } .step-dot.done { background: var(--mg-olive-deep) !important; } .res-total { background: linear-gradient(135deg, var(--mg-espresso), #3B2A1A) !important; color: var(--mg-ivory) !important; } .res-total .lbl { color: rgba(240, 230, 210, 0.7) !important; } .res-total .big { color: var(--mg-bronze-light) !important; font-family: 'Fraunces', serif; } .res-total .per { color: rgba(240, 230, 210, 0.75) !important; } .res-breakdown { background: var(--mg-parchment) !important; border: 1px solid var(--mg-border) !important; } .breakdown-row { border-bottom: 1px solid var(--mg-border) !important; } .breakdown-name { color: var(--mg-espresso) !important; } .breakdown-name small { color: var(--mg-espresso-muted) !important; } .breakdown-amt { color: var(--mg-terracotta-deep) !important; font-family: 'Fraunces', serif; } .res-comparison { background: linear-gradient(135deg, var(--mg-linen), var(--mg-parchment)) !important; border: 1px solid var(--mg-bronze-light) !important; } .res-comparison .tag { background: var(--mg-bronze-light) !important; color: var(--mg-espresso) !important; } .res-comparison p { color: var(--mg-espresso-soft) !important; } .res-comparison .save { color: var(--mg-terracotta-deep) !important; font-family: 'Fraunces', serif; } .res-tips { background: var(--mg-parchment) !important; border: 1px solid var(--mg-border) !important; } .tip { color: var(--mg-espresso) !important; border-bottom: 1px solid var(--mg-border) !important; } .paywall { background: linear-gradient(135deg, var(--mg-terracotta-deep), var(--mg-espresso)) !important; color: var(--mg-ivory) !important; } .paywall h3 { color: var(--mg-ivory) !important; font-family: 'Fraunces', serif; } .paywall h3 em { color: var(--mg-bronze-light) !important; } /* --- Convertisseur devises --- */ .pmm-cv { color: var(--mg-espresso); } .pmm-cv-box, .pmm-cv-card { background: var(--mg-parchment) !important; border: 1px solid var(--mg-border) !important; box-shadow: var(--mg-shadow-soft) !important; border-radius: 16px !important; } .pmm-cv-label { color: var(--mg-espresso) !important; font-family: 'Fraunces', serif; } .pmm-cv-input, .pmm-cv-amount, .pmm-cv-select, .pmm-cv-from, .pmm-cv-to { background: var(--mg-ivory) !important; border: 1px solid var(--mg-border-strong) !important; color: var(--mg-espresso) !important; border-radius: 12px !important; } .pmm-cv-input:focus, .pmm-cv-amount:focus, .pmm-cv-select:focus { border-color: var(--mg-terracotta-deep) !important; box-shadow: 0 0 0 3px rgba(158, 78, 48, 0.15) !important; outline: none; } .pmm-cv-btn, .pmm-cv-swap { background: var(--mg-espresso) !important; color: var(--mg-ivory) !important; border: none !important; border-radius: 12px !important; transition: background 300ms, transform 300ms cubic-bezier(0.22, 1, 0.36, 1); } html.dark .pmm-cv-btn, html.dark .pmm-cv-swap { background: #3B2A1A !important; } .pmm-cv-btn:hover, .pmm-cv-swap:hover { background: var(--mg-terracotta-deep) !important; transform: translateY(-1px); } .pmm-cv-result { color: var(--mg-terracotta-deep) !important; font-family: 'Fraunces', serif; font-weight: 500; } .pmm-cv-result-amount { color: var(--mg-terracotta-deep) !important; font-family: 'Fraunces', serif; } .pmm-cv-result-rate, .pmm-cv-result-date { color: var(--mg-espresso-muted) !important; } .pmm-cv-table { background: var(--mg-parchment) !important; border: 1px solid var(--mg-border) !important; border-radius: 14px !important; } .pmm-cv-table-title { color: var(--mg-espresso) !important; font-family: 'Fraunces', serif; } .pmm-cv-th-from, .pmm-cv-th-to { color: var(--mg-espresso-muted) !important; border-bottom: 1px solid var(--mg-border) !important; } .pmm-cv-table-body tr { border-bottom: 1px solid var(--mg-border) !important; } .pmm-cv-table-body td { color: var(--mg-espresso) !important; } .pmm-cv-cta-card { background: var(--mg-parchment) !important; border: 1px solid var(--mg-border) !important; border-radius: 14px !important; } .pmm-cv-cta-card:hover { border-color: var(--mg-terracotta-deep) !important; background: var(--mg-ivory) !important; } .pmm-cv-cta-card-title { color: var(--mg-espresso) !important; font-family: 'Fraunces', serif; } .pmm-cv-cta-card-desc { color: var(--mg-espresso-muted) !important; } .pmm-cv-cta-btn, .pmm-cv-cta-main { background: var(--mg-espresso) !important; color: var(--mg-ivory) !important; border-radius: 12px !important; } .pmm-cv-cta-btn:hover, .pmm-cv-cta-main:hover { background: var(--mg-terracotta-deep) !important; } .pmm-cv-faq-item { border-bottom: 1px solid var(--mg-border) !important; } .pmm-cv-faq-q { color: var(--mg-espresso) !important; font-family: 'Fraunces', serif; } .pmm-cv-faq-a { color: var(--mg-espresso-soft) !important; } .pmm-cv-newsletter { background: linear-gradient(135deg, var(--mg-espresso), #3B2A1A) !important; border-radius: 16px !important; } .pmm-cv-newsletter-input { background: rgba(240, 230, 210, 0.08) !important; border: 1px solid rgba(240, 230, 210, 0.22) !important; color: var(--mg-ivory) !important; border-radius: 10px !important; } .pmm-cv-newsletter-input::placeholder { color: rgba(240, 230, 210, 0.5) !important; } .pmm-cv-newsletter-btn { background: var(--mg-terracotta) !important; color: var(--mg-ivory) !important; border-radius: 10px !important; } .pmm-cv-newsletter-btn:hover { background: var(--mg-bronze-light) !important; color: var(--mg-espresso) !important; } .pmm-cv-badge { background: var(--mg-linen) !important; color: var(--mg-bronze-dark) !important; border-radius: 999px; } /* --- Assistant diag-* classes --- */ .diag-card { background: var(--mg-parchment) !important; border: 1px solid var(--mg-border) !important; box-shadow: var(--mg-shadow-lift) !important; border-radius: 16px !important; } .diag-q-label { color: var(--mg-terracotta-deep) !important; } .diag-q { color: var(--mg-espresso) !important; font-family: 'Fraunces', serif; } .diag-sub { color: var(--mg-espresso-muted) !important; } .diag-options .q-option, .diag-option { background: var(--mg-ivory) !important; border: 2px solid var(--mg-border-strong) !important; } .diag-option:hover { border-color: var(--mg-terracotta-deep) !important; background: color-mix(in srgb, var(--mg-terracotta) 8%, var(--mg-ivory)) !important; } .diag-option.selected { border-color: var(--mg-terracotta-deep) !important; background: color-mix(in srgb, var(--mg-terracotta) 14%, var(--mg-ivory)) !important; } .diag-next, .diag-back { font-family: 'Inter', sans-serif; } .diag-next { background: var(--mg-espresso) !important; color: var(--mg-ivory) !important; border-radius: 999px !important; } .diag-next:hover { background: var(--mg-terracotta-deep) !important; } /* Tag / badge legacy — réaligne */ .tag, .page-hero .tag { background: var(--mg-linen) !important; color: var(--mg-bronze-dark) !important; border: 1px solid var(--mg-border) !important; border-radius: 999px !important; padding: 6px 18px !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; } /* Utilities */ .mgc-hidden { display: none !important; } @media (min-width: 768px) { .mgc-md-inline { display: inline-flex !important; } } /* Anti flash au boot */ html { color-scheme: light; } html.dark { color-scheme: dark; }