/* Landing Cookchemy. Reprend la palette et les fontes du jeu (voir cookchemy-app/src/index.css) pour une continuite visuelle exacte. */ :root { --paper: #f4ecd8; --paper-stained: #e8dcc0; --paper-deep: #ede2c9; --ink: #2b1810; --ink-soft: #5c4638; --ink-line: rgba(43, 24, 16, 0.12); --gochujang: #c23616; --gold: #b8924f; --gold-soft: #d4b27a; --shadow-card: 0 1px 0 rgba(43, 24, 16, 0.08), 0 8px 24px -12px rgba(43, 24, 16, 0.25); --max: 1080px; } /* Thème sombre. Deux voies : - automatique : la préférence système, tant que le visiteur n'a pas choisi manuellement (:root:not([data-theme])) ; - manuel : le bouton jour/nuit pose data-theme sur , qui a la priorité. Le thème clair est la base :root ; data-theme="light" force donc le clair. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --paper: #1b1410; --paper-stained: #221913; --paper-deep: #261c16; --ink: #efe3cc; --ink-soft: #b8a488; --ink-line: rgba(239, 227, 204, 0.12); --gochujang: #e55438; --gold: #e0b871; --gold-soft: #c99e5c; --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.6); } } :root[data-theme='dark'] { --paper: #1b1410; --paper-stained: #221913; --paper-deep: #261c16; --ink: #efe3cc; --ink-soft: #b8a488; --ink-line: rgba(239, 227, 204, 0.12); --gochujang: #e55438; --gold: #e0b871; --gold-soft: #c99e5c; --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.6); } /* Transitions entre pages (View Transitions API, cross-document) : clin d'oeil a la FUSION du jeu. En passant de l'accueil aux pages legales, deux pastilles fusionnent en une : - "Essayer" (nav-a) morphe en "Accueil" (nav-a) -> le navigateur relie les deux ; - "Les plats" (nav-b) n'existe pas sur la nouvelle page -> on l'anime pour qu'elle glisse et se fonde dans la premiere (mergeOut). Au retour, elle ressort (mergeIn). Sans support (Firefox/Safari), la navigation reste normale. prefers-reduced-motion est respecte par l'API elle-meme. */ @view-transition { navigation: auto; } .trail a.vt-a { view-transition-name: nav-a; } .trail a.vt-b { view-transition-name: nav-b; } ::view-transition-old(nav-b) { animation: mergeOut 0.42s cubic-bezier(0.4, 0, 0.2, 1) forwards; } ::view-transition-new(nav-b) { animation: mergeIn 0.45s cubic-bezier(0.34, 1.5, 0.64, 1); } @keyframes mergeOut { to { opacity: 0; transform: translateX(-58px) scale(0.35); } } @keyframes mergeIn { from { opacity: 0; transform: translateX(-58px) scale(0.35); } } /* Contenu long bilingue (pages legales) : on ecrit les deux versions et on affiche celle qui correspond a la langue. Plus lisible que data-en pour du texte juridique. */ .i18n-en { display: none; } [lang='en'] .i18n-fr { display: none; } [lang='en'] .i18n-en { display: block; } * { box-sizing: border-box; } body { margin: 0; position: relative; /* ancre le selecteur de langue flottant */ background: var(--paper); color: var(--ink); font-family: 'Fraunces', ui-serif, Georgia, serif; line-height: 1.65; -webkit-font-smoothing: antialiased; /* Halo chaud discret, comme le plan de travail du jeu. */ background-image: radial-gradient(60% 50% at 50% 0%, rgba(184, 146, 79, 0.1), transparent 70%), radial-gradient(40% 40% at 90% 20%, rgba(194, 54, 22, 0.06), transparent 70%); background-repeat: no-repeat; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; } /* ⬦ ── Typographie ── ⬦ */ h1, h2, h3 { font-weight: 600; line-height: 1.15; margin: 0 0 0.4em; } h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-style: italic; } h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-style: italic; text-align: center; } h3 { font-size: 1.15rem; } p { margin: 0 0 1em; } a { color: var(--gold); } .label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); } .lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 46ch; } /* ⬦ ── En-tete ── ⬦ */ header { border-bottom: 1px solid var(--ink-line); position: sticky; top: 0; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(8px); z-index: 10; } /* Ruban dore pointille en haut, repris du lien de fusion du jeu : signe distinctif. */ header::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background-image: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 15px); opacity: 0.6; } header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 13px; padding-bottom: 13px; } header .wrap > a { display: inline-flex; } header img { height: 40px; width: auto; transition: transform 0.3s cubic-bezier(0.34, 1.5, 0.64, 1); } header .wrap > a:hover img { transform: rotate(-3deg) scale(1.05); } .header-actions { display: flex; align-items: center; gap: 22px; } /* Selecteur de langue flottant, en haut a droite (sous le header), segmente FR/EN. Meme famille visuelle que le reste : or, papier, JetBrains Mono. Il defile avec la page (positionne par rapport au body). */ .lang-switch { position: absolute; top: 78px; right: 24px; z-index: 6; display: inline-flex; padding: 3px; border-radius: 20px; border: 1.5px solid var(--gold); background: color-mix(in srgb, var(--paper-stained) 90%, transparent); backdrop-filter: blur(6px); box-shadow: var(--shadow-card); } .lang-switch button { border: none; background: transparent; color: var(--gold); font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; padding: 5px 12px; border-radius: 16px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .lang-switch button:hover { color: var(--ink); } .lang-switch button.is-active { background: var(--gold); color: var(--paper); cursor: default; } /* Bouton jour/nuit, dans l'esprit des pastilles du fil de navigation. */ .theme-toggle { display: grid; place-items: center; height: 38px; width: 38px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--gold); background: var(--paper-stained); color: var(--gold); cursor: pointer; padding: 0; transition: background 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.5, 0.64, 1); } .theme-toggle:hover { background: var(--gold); transform: rotate(12deg) scale(1.06); } .theme-toggle svg { height: 19px; width: 19px; fill: var(--gold); transition: fill 0.25s ease; } .theme-toggle:hover svg { fill: var(--paper); } /* L'icone suit le theme EFFECTIF : lune en clair (clic = passer en sombre), soleil en sombre. On calque la resolution du theme sur celle des couleurs. */ .theme-toggle .ic-sun { display: none; } :root[data-theme='dark'] .theme-toggle .ic-sun { display: block; } :root[data-theme='dark'] .theme-toggle .ic-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-toggle .ic-sun { display: block; } :root:not([data-theme]) .theme-toggle .ic-moon { display: none; } } /* ⬦ ── Fil de navigation (Boxicons) ── ⬦ Des etapes reliees par un trait pointille dore, repris du lien de fusion affiche dans le jeu quand deux elements vont s'associer. */ .sprite { display: none; } .trail { display: flex; align-items: center; } .trail a { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink-soft); font-size: 0.94rem; } .trail .pastille { display: grid; place-items: center; height: 36px; width: 36px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--gold); background: var(--paper-stained); transition: background 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.5, 0.64, 1); } .trail svg { height: 19px; width: 19px; fill: var(--gold); transition: fill 0.25s ease; } .trail a:hover .pastille, .trail a:focus-visible .pastille { background: var(--gold); transform: translateY(-2px) scale(1.06); } .trail a:hover svg, .trail a:focus-visible svg { fill: var(--paper); } .trail a:hover { color: var(--ink); } /* Etape courante : pastille pleine, non cliquable. */ .trail [aria-current='page'] .pastille { background: var(--gold); } .trail [aria-current='page'] svg { fill: var(--paper); } .trail [aria-current='page'] { color: var(--ink); } /* Le trait pointille entre deux etapes. */ .trail a + a::before { content: ''; width: 34px; height: 2px; margin: 0 12px 0 2px; flex-shrink: 0; background-image: repeating-linear-gradient(90deg, var(--gold) 0 3px, transparent 3px 9px); background-size: 9px 100%; /* un motif = une periode, pour un defilement continu */ opacity: 0.75; /* Les tirets s'ecoulent d'une pastille a l'autre : clin d'oeil au lien de fusion du jeu (le trait dore pointille anime entre deux elements qui vont s'associer). */ animation: dashFlow 0.85s linear infinite; } @keyframes dashFlow { to { background-position-x: 9px; } } /* Pastilles : petite arrivee en "pop", en cascade, comme une fusion qui se pose. `backwards` => elles restent visibles meme si l'animation ne se joue pas. */ .trail a .pastille { animation: pastilleIn 0.5s cubic-bezier(0.34, 1.5, 0.64, 1) backwards; } .trail a:nth-child(1) .pastille { animation-delay: 0.04s; } .trail a:nth-child(2) .pastille { animation-delay: 0.12s; } .trail a:nth-child(3) .pastille { animation-delay: 0.2s; } .trail a:nth-child(4) .pastille { animation-delay: 0.28s; } @keyframes pastilleIn { from { opacity: 0; transform: scale(0.4); } } @media (prefers-reduced-motion: reduce) { .trail a + a::before, .trail a .pastille { animation: none; } } /* ⬦ ── Hero ── ⬦ */ .hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; padding: 72px 0 56px; } /* Parallaxe posee par le JS ; le flottement reste sur l'image. */ .hero-bami-wrap { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .hero-bami { width: 100%; max-width: 340px; margin: 0 auto; display: block; filter: drop-shadow(0 14px 22px rgba(43, 24, 16, 0.25)); animation: float 4s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* ⬦ ── Apparition au defilement ── ⬦ Le masquage est conditionne a la classe `js-reveal`, posee sur par le script AVANT toute autre chose. Sans JS (ou si le script echoue), rien n'est masque et la page reste entierement lisible : pas de page blanche possible. */ .js-reveal .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .js-reveal .reveal.is-visible { opacity: 1; transform: none; } /* En-tete : ombre discrete une fois la page defilee. */ header.is-scrolled { box-shadow: 0 6px 18px -12px rgba(43, 24, 16, 0.5); } /* ⬦ ── Titre principal, compose mot a mot ── ⬦ Les sont crees par le JS : sans lui, le titre s'affiche normalement, en un seul bloc. */ /* `backwards` (et non `forwards`) : l'etat masque vient des keyframes `from`, et l'animation se termine sur l'etat NATUREL du mot. Si l'animation ne se joue pas (navigateur ancien, moteur de rendu, extension), le titre reste simplement visible. Jamais de texte invisible. */ h1 .word { display: inline-block; animation: wordIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) backwards; } @keyframes wordIn { from { opacity: 0; transform: translateY(16px); } } /* ⬦ ── Trait dore trace sous les titres de section ── ⬦ Visible par defaut ; seul le mode anime (js-reveal) le fait apparaitre. */ section h2 { position: relative; padding-bottom: 14px; } section h2::after { content: ''; position: absolute; left: 50%; bottom: 0; height: 2px; width: 64px; margin-left: -32px; background: var(--gold); border-radius: 2px; } .js-reveal section h2::after { width: 0; margin-left: 0; transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s, margin-left 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s; } .js-reveal section h2.is-visible::after { width: 64px; margin-left: -32px; } /* Le compteur ne doit pas faire sauter la mise en page pendant qu'il defile. */ .count { display: inline-block; font-variant-numeric: tabular-nums; min-width: 1.7em; text-align: right; } .badge { transition: transform 0.25s cubic-bezier(0.34, 1.5, 0.64, 1), background 0.25s ease; } .badge.is-hovered { transform: translateY(-3px); background: var(--paper-deep); } /* Accessibilite : on neutralise tout mouvement si l'utilisateur le demande. Le JS lit la meme preference et desactive la parallaxe. */ @media (prefers-reduced-motion: reduce) { .hero-bami, .card.is-hovered img, /* le petit saut au survol est aussi du mouvement : on le neutralise */ .duo-bami img:hover, .bami-mot > img:hover, .bami-fin img:hover, .hero-bami:hover, .askbami > img:hover { animation: none; } .reveal, .reveal.is-visible, .hero-bami-wrap, .dish img, .card, .badge { transition: none; transform: none; opacity: 1; } } .badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--gold); border-radius: 10px; padding: 10px 18px; background: var(--paper-stained); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-card); font-size: 0.95rem; } .badge span { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); } /* ⬦ ── Sections ── ⬦ */ section { padding: 56px 0; border-top: 1px solid var(--ink-line); } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; margin-top: 34px; } /* Planche a decouper, reprise du plan de travail du jeu (.workbench-surface) : bois clair, deux noeuds, joints de lattes, veinage irregulier et brillance. */ .card { border: none; border-radius: 16px; padding: 26px; background-color: #e3c79a; background-image: radial-gradient(14px 7px at 22% 24%, rgba(110, 74, 40, 0.16), transparent 72%), radial-gradient(11px 6px at 78% 70%, rgba(110, 74, 40, 0.13), transparent 72%), repeating-linear-gradient(180deg, transparent 0 74px, rgba(96, 62, 32, 0.16) 74px 76px), repeating-linear-gradient(179deg, rgba(120, 82, 45, 0.05) 0 1px, transparent 1px 7px), repeating-linear-gradient(181deg, rgba(150, 110, 66, 0.04) 0 1px, transparent 1px 13px), repeating-linear-gradient(180deg, rgba(120, 82, 45, 0.03) 0 1px, transparent 1px 23px), linear-gradient(180deg, rgba(255, 248, 232, 0.4), rgba(168, 128, 82, 0.1)); box-shadow: 0 8px 22px -6px rgba(43, 24, 16, 0.28), inset 0 1px 0 rgba(255, 250, 238, 0.55), inset 0 0 0 1.5px rgba(110, 76, 42, 0.22); } .card h3 { color: #2b1810; /* fige : le bois reste clair meme en theme sombre */ } .card p { color: #5c4638; } .card { transition: transform 0.32s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.32s ease, border-color 0.32s ease; } /* Au survol, la planche s'illumine d'un lisere dore, comme dans le jeu. */ .card.is-hovered { transform: translateY(-8px); box-shadow: 0 18px 32px -12px rgba(43, 24, 16, 0.4), inset 0 1px 0 rgba(255, 250, 238, 0.55), inset 0 0 0 2px color-mix(in srgb, var(--gold) 65%, transparent), inset 0 0 44px -8px color-mix(in srgb, var(--gold) 40%, transparent); } .card img { height: 58px; width: 58px; object-fit: contain; margin-bottom: 12px; transition: transform 0.3s ease; } /* Bami frétille quand on survole sa carte. */ .card.is-hovered img { animation: wiggle 0.6s ease-in-out; } @keyframes wiggle { 0%, 100% { transform: rotate(0) scale(1.12); } 25% { transform: rotate(-9deg) scale(1.12); } 75% { transform: rotate(9deg) scale(1.12); } } .card p { color: var(--ink-soft); font-size: 0.96rem; margin: 0; } /* ⬦ ── Mini-demo jouable ── ⬦ */ .demo-plateau { position: relative; height: 340px; max-width: 620px; margin: 30px auto 0; border-radius: 22px; overflow: hidden; touch-action: none; /* le glisse ne doit pas faire defiler la page */ background-color: #e3c79a; background-image: radial-gradient(16px 8px at 20% 26%, rgba(110, 74, 40, 0.16), transparent 72%), radial-gradient(12px 7px at 79% 72%, rgba(110, 74, 40, 0.13), transparent 72%), repeating-linear-gradient(180deg, transparent 0 86px, rgba(96, 62, 32, 0.16) 86px 88px), repeating-linear-gradient(179deg, rgba(120, 82, 45, 0.05) 0 1px, transparent 1px 7px), repeating-linear-gradient(181deg, rgba(150, 110, 66, 0.04) 0 1px, transparent 1px 13px), linear-gradient(180deg, rgba(255, 248, 232, 0.4), rgba(168, 128, 82, 0.1)); box-shadow: 0 10px 26px -8px rgba(43, 24, 16, 0.32), inset 0 1px 0 rgba(255, 250, 238, 0.55), inset 0 0 0 1.5px rgba(110, 76, 42, 0.22); } .jeton { position: absolute; width: 96px; margin-left: -48px; margin-top: -52px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: grab; user-select: none; -webkit-user-select: none; transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.3s ease; } .jeton.grabbed { cursor: grabbing; transition: none; /* suit le doigt sans latence */ z-index: 3; } .jeton img { width: 62px; height: 62px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 5px 8px rgba(43, 24, 16, 0.32)); } .jeton span { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: #4a2f1c; background: rgba(255, 248, 232, 0.75); padding: 2px 7px; border-radius: 20px; white-space: nowrap; pointer-events: none; } /* Jeton survole par celui qu'on traine : il palpite pour signaler la cible. */ .jeton.cible img { animation: pulseCible 0.7s ease-in-out infinite; } @keyframes pulseCible { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } } /* Apparition du resultat. */ .jeton.resultat { opacity: 0; pointer-events: none; z-index: 2; } .jeton.resultat.montre { opacity: 1; animation: popResultat 0.6s cubic-bezier(0.34, 1.6, 0.64, 1); } @keyframes popResultat { 0% { transform: scale(0.3); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } } .jeton.disparait { opacity: 0; transform: scale(0.35); } .demo-astuce { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: #6b4a2c; background: rgba(255, 248, 232, 0.8); border: 1px solid rgba(110, 76, 42, 0.25); padding: 5px 12px; border-radius: 20px; transition: opacity 0.4s ease; } .demo-astuce.cache { opacity: 0; } .demo-compteur { margin-top: 16px; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); } @media (max-width: 560px) { .demo-plateau { height: 300px; } .jeton { width: 84px; margin-left: -42px; } .jeton img { width: 54px; height: 54px; } } /* Bandeau de plats */ .dishes { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; margin-top: 30px; } .dish { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; } .dish img { height: 92px; width: 92px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(43, 24, 16, 0.2)); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease; } .dish figcaption { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); opacity: 0; transform: translateY(-4px); transition: opacity 0.28s ease, transform 0.28s ease; } /* .is-hovered est pose par le JS (mouseenter/mouseleave). */ .dish.is-hovered img { transform: scale(1.16) rotate(-5deg); filter: drop-shadow(0 12px 18px rgba(43, 24, 16, 0.3)); } .dish.is-hovered figcaption { opacity: 1; transform: translateY(0); } .center { text-align: center; } .muted { color: var(--ink-soft); } /* ⬦ ── Bami et sa bulle ── ⬦ Reprise exacte du style du jeu : fond papier, grosse bordure encre de 2,5 px et petite pointe en losange dirigee vers Bami (voir BamiAmbient.tsx). */ .askbami { display: flex; align-items: center; gap: 30px; justify-content: center; } .askbami > img { height: 132px; width: 132px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 8px 14px rgba(43, 24, 16, 0.28)); animation: float 4s ease-in-out infinite; } .bulle { position: relative; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 18px; padding: 22px 26px; max-width: 40rem; box-shadow: var(--shadow-card); } /* La pointe : un carre pivote a 45 degres dont on ne garde que deux bords, pour qu'il se fonde dans le bord gauche de la bulle. */ .bulle::before { content: ''; position: absolute; left: -9px; top: 50%; margin-top: -7px; height: 14px; width: 14px; transform: rotate(45deg); background: var(--paper); border-left: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); border-bottom-left-radius: 3px; } .bulle h3 { font-style: italic; margin-bottom: 0.3em; } .bulle p { margin: 0; font-style: italic; color: var(--ink-soft); } section { position: relative; } /* ⬦ ── Sections en duo : contenu d'un cote, Bami de l'autre ── ⬦ Bami devient une vraie colonne de la mise en page (il prend de l'espace, il ne flotte plus dans un coin). Le cote alterne d'une section a l'autre via `.inverse`. Dans ces sections, les titres passent a gauche. */ /* Le cote de Bami est pilote par une classe (.gauche / .droite) via l'ordre flex, pour alterner d'une section a l'autre. Regle : Bami regarde toujours le contenu, donc quand il passe a droite on retourne son image (elle "pointe" vers la gauche). */ .duo { display: flex; align-items: center; gap: 44px; } .duo-main { flex: 1; min-width: 0; /* le contenu peut retrecir sans deborder */ order: 1; } .duo-bami.gauche { order: 0; } .duo-bami.droite { order: 2; } .duo-bami.droite img { transform: scaleX(-1); /* Bami a droite regarde vers le contenu (a sa gauche) */ } /* Exception : garder l'orientation naturelle d'un Bami (ex. bami-shows, dont la pose se lit mieux non retournee) meme quand il est place a droite. */ .duo-bami img.no-flip { transform: none; } .duo-main h2, .duo-main .muted { text-align: left; } .duo-main h2::after { left: 0; margin-left: 0; } .js-reveal .duo-main h2.is-visible::after { margin-left: 0; } .duo-main .demo-plateau, .duo-main .dishes { margin-left: 0; margin-right: 0; justify-content: flex-start; } .duo-bami { flex: 0 0 300px; display: flex; justify-content: center; } .duo-bami img { width: 100%; max-width: 320px; filter: drop-shadow(0 16px 22px rgba(43, 24, 16, 0.28)); } /* Bami arrive en glissant depuis son cote. Par defaut (Bami a gauche = place en premier) il vient de la gauche ; quand il suit le contenu (Bami a droite), le selecteur de voisinage `.duo-main + .duo-bami` le fait venir de la droite. */ .js-reveal .duo-bami { opacity: 0; transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .js-reveal .duo-bami.gauche { transform: translateX(-48px); } .js-reveal .duo-bami.droite { transform: translateX(48px); } /* Le glissé porte sur le conteneur ; le retournement eventuel est sur l'image, donc l'etat final `none` ici ne defait pas le scaleX(-1) de .droite img. */ .js-reveal .duo-bami.is-visible { opacity: 1; transform: none; } /* Sous 900 px : on empile, Bami au-dessus et plus petit, contenu recentre. */ @media (max-width: 900px) { .duo, .duo.inverse { flex-direction: column; } .duo-bami { flex: none; order: -1; } .duo-bami img { max-width: 170px; } .duo-main h2, .duo-main .muted { text-align: center; } .duo-main h2::after { left: 50%; margin-left: -32px; } .duo-main .demo-plateau { margin-left: auto; margin-right: auto; } .duo-main .dishes { justify-content: center; } } /* ⬦ ── Bami reagit au survol ── ⬦ Petit saut avec bascule. On anime `translate` et `rotate` (proprietes individuelles) et non `transform` : sinon on ecraserait le scaleX(-1) des Bami retournes et le translateY du flottement. Les deux se composent. */ @keyframes bamiHop { 0%, 100% { translate: 0 0; rotate: 0deg; } 25% { translate: 0 -9px; rotate: -3.5deg; } 55% { translate: 0 1px; rotate: 2.5deg; } 80% { translate: 0 -3px; rotate: -1deg; } } .duo-bami img:hover, .bami-mot > img:hover, .bami-fin img:hover { animation: bamiHop 0.75s cubic-bezier(0.34, 1.4, 0.64, 1); } /* Ceux qui flottent deja : on garde le flottement ET on ajoute le saut. */ .hero-bami:hover, .askbami > img:hover { animation: float 4s ease-in-out infinite, bamiHop 0.75s cubic-bezier(0.34, 1.4, 0.64, 1); } /* ⬦ ── Bami sur les pages de texte ── ⬦ Un resume en langage clair avant le juridique, et un mot de fin. */ .bami-mot { display: flex; align-items: center; gap: 20px; margin: 26px 0 34px; } .bami-mot > img { height: 96px; width: 96px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 8px 14px rgba(43, 24, 16, 0.24)); } .bami-mot .bulle p { margin: 0; } .bami-fin { display: flex; align-items: center; gap: 16px; margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--ink-line); color: var(--ink-soft); font-style: italic; } .bami-fin img { height: 62px; width: 62px; object-fit: contain; flex-shrink: 0; } .bami-fin p { margin: 0; } @media (max-width: 620px) { .bami-mot { flex-direction: column; text-align: center; } .bami-mot .bulle::before { left: 50%; top: -9px; margin-top: 0; margin-left: -7px; border-bottom: none; border-top: 2.5px solid var(--ink); } } /* ⬦ ── Pied de page ── ⬦ */ footer { border-top: 1px solid var(--ink-line); padding: 34px 0 48px; font-size: 0.9rem; color: var(--ink-soft); } footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: space-between; align-items: center; } footer a { color: var(--ink-soft); } footer a:hover { color: var(--gold); } /* ⬦ ── Pages de contenu (politique, mentions) ── ⬦ */ .doc { max-width: 760px; padding-top: 48px; padding-bottom: 64px; } .doc h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); } .doc h2 { text-align: left; font-size: 1.4rem; margin-top: 2em; } .doc ul { padding-left: 1.2em; color: var(--ink-soft); } .doc li { margin-bottom: 0.5em; } .doc table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 0.94rem; } .doc th, .doc td { border: 1px solid var(--ink-line); padding: 10px 12px; text-align: left; vertical-align: top; } .doc th { background: var(--paper-stained); font-weight: 600; } .doc .todo { background: color-mix(in srgb, var(--gochujang) 12%, transparent); border-left: 3px solid var(--gochujang); padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 1em 0; font-size: 0.94rem; } /* ⬦ ── Mobile ── ⬦ */ @media (max-width: 760px) { .hero { grid-template-columns: 1fr; text-align: center; padding: 48px 0 40px; } .hero .lede { margin-left: auto; margin-right: auto; } .badges { justify-content: center; } .hero-bami { max-width: 220px; order: -1; } /* Sur mobile Bami passe au-dessus : la pointe de la bulle bascule vers le haut. */ .askbami { flex-direction: column; text-align: center; gap: 14px; } .askbami > img { height: 104px; width: 104px; } .bulle::before { left: 50%; top: -9px; margin-top: 0; margin-left: -7px; border-left: 2.5px solid var(--ink); border-bottom: none; border-top: 2.5px solid var(--ink); border-bottom-left-radius: 0; border-top-left-radius: 3px; } /* Sur mobile on ne garde que les pastilles : les libelles prendraient toute la largeur et le fil deborderait. */ .trail a span { display: none; } .trail a + a::before { width: 18px; margin: 0 7px 0 0; } .trail a { gap: 0; } } /* Petit ecran : header dense (logo + 4 pastilles + bouton). On reduit tout et on masque les connecteurs (remplaces par un simple espacement) pour ne jamais deborder. */ @media (max-width: 430px) { header img { height: 32px; } .header-actions { gap: 10px; } .trail { gap: 7px; } .trail a + a::before { display: none; } /* Selecteur de langue : plus compact et rapproche du bord sur petit ecran. */ .lang-switch { top: 70px; right: 12px; } .lang-switch button { padding: 4px 10px; font-size: 0.68rem; } .trail .pastille { height: 32px; width: 32px; } .trail svg { height: 16px; width: 16px; } .theme-toggle { height: 32px; width: 32px; } .theme-toggle svg { height: 16px; width: 16px; } }