/* ========================================================================== Mise — La Cuisine · design tokens + components Source of truth: Novamira design system "mise-la-cuisine". Dark is the default theme; [data-theme="light"] on flips every token. ========================================================================== */ :root { --mise-bg: #171310; --mise-surface: #201915; --mise-elevated: #2A211B; --mise-sunken: #100D0A; --mise-accent: #C2410C; --mise-accent-hover: #D9531A; --mise-accent-text: #F08A4B; --mise-accent-tint: #351E10; --mise-on-accent: #FFF6EC; --mise-secondary: #65A30D; --mise-secondary-tx: #8FBE3F; --mise-ink: #F2E9DA; --mise-ink-2: #C8BAA7; --mise-ink-3: #998A79; --mise-ink-4: #675B4E; --mise-line: #342B22; --mise-line-2: #52453A; --mise-danger: #E05252; --mise-shadow: 0 16px 40px rgba(0,0,0,.45); --mise-scrim: rgba(16,13,10,.72); --mise-r-sm: 8px; --mise-r-md: 12px; --mise-r-pill: 999px; --mise-font-display: "Newsreader", Georgia, serif; --mise-font-editorial: "Source Serif 4", Georgia, serif; --mise-font-ui: "Inter", system-ui, -apple-system, sans-serif; --mise-font-data: "JetBrains Mono", ui-monospace, monospace; color-scheme: dark; } html[data-theme="light"] { --mise-bg: #FFFBF5; --mise-surface: #FFFFFF; --mise-elevated: #FFFFFF; --mise-sunken: #F5F5F4; --mise-accent: #65A30D; --mise-accent-hover: #4D7C0F; --mise-accent-text: #4D7C0F; --mise-accent-tint: #F7FEE7; --mise-on-accent: #FFFFFF; --mise-secondary: #C2410C; --mise-secondary-tx: #9A3412; --mise-ink: #1C1917; --mise-ink-2: #57534E; --mise-ink-3: #A8A29E; --mise-ink-4: #C0BBB6; --mise-line: #E7E5E4; --mise-line-2: #D6D3D1; --mise-danger: #B91C1C; --mise-shadow: 0 16px 40px rgba(28,25,23,.10); --mise-scrim: rgba(255,255,255,.82); color-scheme: light; } /* -------------------------------------------------------------------------- Bridge: Elementor global colors resolve to Mise tokens, so every widget styled with a Global colour follows the theme switch with no extra work. Specificity (0,1,2) deliberately beats Elementor's own .elementor-kit-N. -------------------------------------------------------------------------- */ html body[class*="elementor-kit-"], html body { --e-global-color-primary: var(--mise-accent); --e-global-color-secondary: var(--mise-secondary); --e-global-color-text: var(--mise-ink); --e-global-color-accent: var(--mise-accent-text); --e-global-color-bgbase: var(--mise-bg); --e-global-color-surface: var(--mise-surface); --e-global-color-elevated: var(--mise-elevated); --e-global-color-sunken: var(--mise-sunken); --e-global-color-prkhov: var(--mise-accent-hover); --e-global-color-prktnt: var(--mise-accent-tint); --e-global-color-olvtxt: var(--mise-secondary-tx); --e-global-color-txt2: var(--mise-ink-2); --e-global-color-txt3: var(--mise-ink-3); --e-global-color-txt4: var(--mise-ink-4); --e-global-color-line1: var(--mise-line); --e-global-color-line2: var(--mise-line-2); --e-global-color-danger: var(--mise-danger); --e-global-color-oncta: var(--mise-on-accent); } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ html body { background: var(--mise-bg); color: var(--mise-ink); font-family: var(--mise-font-ui); font-feature-settings: "tnum" 0; -webkit-font-smoothing: antialiased; transition: background-color .28s ease, color .28s ease; } body a { color: var(--mise-accent-text); } body a:hover { color: var(--mise-accent-hover); } ::selection { background: var(--mise-accent-tint); color: var(--mise-ink); } .mise-mono, .mise-card__meta, .mise-meta { font-family: var(--mise-font-data); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } /* sleek scrollbars, warm not grey */ * { scrollbar-color: var(--mise-line-2) transparent; scrollbar-width: thin; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--mise-line-2); border-radius: var(--mise-r-pill); border: 3px solid transparent; background-clip: content-box; } /* -------------------------------------------------------------------------- Header chrome — layout enforced here, independent of builder-generated CSS -------------------------------------------------------------------------- */ .mise-header { display: block !important; background: var(--mise-surface); border-bottom: 1px solid var(--mise-line); position: relative; z-index: 100; } .mise-header > .e-con-boxed > .e-con-inner, .mise-header-row > .e-con-inner { display: flex !important; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; width: 100%; } .mise-header .e-con-inner > .e-con { width: auto; max-width: none; flex: 0 0 auto; } .mise-header .e-con-inner > .mise-header__nav { flex: 1 1 auto; min-width: 0; } .mise-nav { display: flex; align-items: center; justify-content: center; } .mise-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 32px; } .mise-nav__list li { margin: 0; padding: 0; } .mise-nav__list a { font: 500 14px/1 var(--mise-font-ui); letter-spacing: .02em; color: var(--mise-ink-2); text-decoration: none; padding: 12px 0; display: inline-block; position: relative; white-space: nowrap; transition: color .24s; } .mise-nav__list a:hover, .mise-nav__list .current-menu-item > a, .mise-nav__list .current_page_item > a { color: var(--mise-ink); } .mise-nav__list .current-menu-item > a::after, .mise-nav__list .current_page_item > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--mise-accent); } /* pas de burger : la nav reste visible et passe à la ligne sur petit écran */ .mise-burger { display: none !important; } @media (max-width: 1024px) { .mise-nav__list { flex-wrap: wrap; justify-content: center; gap: 6px 20px; } .mise-nav__list a { padding: 8px 0; font-size: 13px; } } @media (max-width: 767px) { .mise-header-row > .e-con-inner { flex-wrap: wrap; justify-content: center; gap: 8px 16px; } .mise-nav__list { gap: 4px 16px; } } .mise-brand__name { font: 500 24px/1 var(--mise-font-display); letter-spacing: -.02em; color: var(--mise-ink); } .mise-brand__by { font: 500 10px/1 var(--mise-font-data); letter-spacing: .18em; color: var(--mise-ink-3); } /* theme + language controls NB: !important requis — les styles "Buttons" du kit Elementor ciblent `.elementor-kit-7055 button` (0,1,1) et repeignaient ces contrôles en paprika. */ html body .mise-ctl { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-height: 36px; padding: 0 !important; border: 1px solid var(--mise-line) !important; border-radius: var(--mise-r-pill) !important; background: transparent !important; cursor: pointer; font-size: 16px; line-height: 1; color: var(--mise-ink-2) !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; transition: border-color .24s, background .24s; } html body .mise-ctl:hover { border-color: var(--mise-line-2) !important; background: var(--mise-elevated) !important; } /* l'emoji reflète le thème actif : lune en sombre, soleil en clair */ .mise-ctl__moon { display: block; } .mise-ctl__sun { display: none; } html[data-theme="light"] .mise-ctl__moon { display: none; } html[data-theme="light"] .mise-ctl__sun { display: block; } .mise-lang { display: inline-flex; align-items: center; gap: 2px; } .mise-lang a, .mise-lang span { font: 600 11px/1 var(--mise-font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--mise-ink-3); text-decoration: none; padding: 6px 7px; border-radius: var(--mise-r-sm); transition: color .2s, background .2s; } .mise-lang a:hover { color: var(--mise-ink); } .mise-lang .is-current { color: var(--mise-ink); } .mise-lang .mise-lang__sep { color: var(--mise-line-2); padding: 0; } /* -------------------------------------------------------------------------- Overlines, headings, editorial voice -------------------------------------------------------------------------- */ .mise-overline { font: 600 12px/1.3 var(--mise-font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--mise-accent-text); } .mise-editorial { font: italic 400 19px/1.68 var(--mise-font-editorial); color: var(--mise-ink-2); max-width: 62ch; } /* -------------------------------------------------------------------------- Recipe card — built once, used on every surface -------------------------------------------------------------------------- */ /* `hidden` doit gagner : une règle auteur `display:flex` bat le style UA du navigateur, donc sans ça le filtre par catégorie ne masque rien. */ .mise-archive [hidden], .mise-card[hidden] { display: none !important; } .mise-card { display: flex; flex-direction: column; background: var(--mise-surface); border: 1px solid var(--mise-line); border-radius: var(--mise-r-md); overflow: hidden; text-decoration: none; transition: transform .28s cubic-bezier(.4,0,.2,1), border-color .28s, box-shadow .28s, background .28s; } .mise-card:hover { transform: translateY(-4px); border-color: var(--mise-line-2); box-shadow: var(--mise-shadow); } .mise-card__media { position: relative; overflow: hidden; background: var(--mise-elevated); } .mise-card__media img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .4s cubic-bezier(.4,0,.2,1); } .mise-card:hover .mise-card__media img { transform: scale(1.03); } .mise-card__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 20px; } .mise-card__cat { font: 600 10px/1.2 var(--mise-font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--mise-accent-text); } .mise-card__title { font: 500 18px/1.25 var(--mise-font-display); letter-spacing: -.01em; color: var(--mise-ink); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .24s; } .mise-card:hover .mise-card__title { color: var(--mise-accent-text); } .mise-card__meta { font: 500 11px/1.3 var(--mise-font-data); letter-spacing: .06em; text-transform: uppercase; color: var(--mise-ink-3); display: flex; align-items: center; gap: 8px; margin-top: 2px; } .mise-card__body { padding: 14px 14px 16px; gap: 6px; } .mise-card__meta .dot { color: var(--mise-accent); } .mise-card__time { position: absolute; left: 12px; bottom: 12px; background: var(--mise-scrim); color: var(--mise-ink); font: 500 11px/1 var(--mise-font-data); letter-spacing: .06em; padding: 7px 10px; border-radius: var(--mise-r-pill); } /* -------------------------------------------------------------------------- Grids and rails -------------------------------------------------------------------------- */ .mise-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px 24px; } .mise-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px 24px; } @media (max-width: 1280px) and (min-width: 1025px) { .mise-grid--4 { grid-template-columns: repeat(3, minmax(0,1fr)); } } /* flex, pas de calc() : le minifieur CSS de LiteSpeed casse `calc(100% - 72px)` */ .mise-rail { display: flex; gap: 24px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; } .mise-rail::-webkit-scrollbar { display: none; } /* même largeur de carte que la grille 3 colonnes (→ même échelle de photo), moins un filet pour laisser dépasser la carte suivante : le rail se voit scrollable */ .mise-rail > * { flex: 0 0 calc((100% - 72px) / 3); min-width: 300px; } @media (max-width: 1024px) { .mise-grid, .mise-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .mise-rail > * { flex-basis: calc((100% - 60px) / 2); min-width: 260px; } } @media (max-width: 767px) { .mise-grid, .mise-grid--4 { grid-template-columns: minmax(0,1fr); gap: 24px; } .mise-rail > * { flex-basis: 82%; min-width: 240px; } } /* -------------------------------------------------------------------------- Rail carousel — variante de .mise-rail avec exactement N cartes pleinement visibles (4 desktop / 2 tablette / 1 mobile) et navigation par page, utilisée par [afcm_recipes layout="carousel"]. Sélecteur composé (.mise-rail.mise-rail--carousel) pour battre .mise-rail > * quel que soit l'ordre des règles. -------------------------------------------------------------------------- */ /* Pas de scroll-snap : avec des images qui se chargent en asynchrone, le navigateur peut reévaluer les points d'ancrage pendant le layout et atterrir sur la dernière position au premier rendu (constaté sur le rail « Recettes populaires », qui démarrait déjà scrollé à la fin). Le JS pagine déjà par largeur de conteneur, le snap n'apporte rien d'essentiel. */ .mise-rail.mise-rail--carousel > * { flex-basis: calc((100% - 72px) / 4); min-width: 220px; } @media (max-width: 1024px) { .mise-rail.mise-rail--carousel > * { flex-basis: calc((100% - 24px) / 2); min-width: 220px; } } @media (max-width: 767px) { .mise-rail.mise-rail--carousel > * { flex-basis: 100%; min-width: 0; } } .mise-carousel-nav { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 14px; } .mise-carousel-page { font: 500 12px/1 var(--mise-font-data); letter-spacing: .08em; color: var(--mise-ink-3); margin-right: 2px; } /* Le kit Elementor style tous les