/* ===========================================================================
   Tempehine — Page d'accueil
   Repris fidèlement de la maquette Claude Design « Accueil v2 ».
   Les styles en ligne restent dans le HTML ; ici : base, keyframes,
   classes utilitaires et points de rupture.
   ========================================================================== */

html { scroll-behavior: smooth; }

.tmp-home {
  position: relative;
  /* « clip » et non « hidden » : hidden ferait de .tmp-home un conteneur de
     défilement, ce qui annule le position:sticky de l'en-tête (il se collerait
     à ce conteneur au lieu de la fenêtre). clip rogne le débordement horizontal
     sans créer de conteneur de défilement. */
  overflow-x: clip;
  color: #141210;
  -webkit-font-smoothing: antialiased;
  font-family: 'Hanken Grotesk', sans-serif;
}
.tmp-home *, .tmp-home *::before, .tmp-home *::after { box-sizing: border-box; }
.tmp-home a { color: inherit; }
/* Liens de navigation : uniquement le soulignement bas au survol, jamais de cadre */
.tmp-nav a, .tmp-nav a:focus, .tmp-nav a:focus-visible { border-top-width: 0; border-left-width: 0; border-right-width: 0; outline: none; }
.tmp-home img { max-width: 100%; }

/* Fond global de la page (crème) */
body { background: #F8F3EA; }

/* ----- Keyframes ----- */
@keyframes tmpRise   { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes tmpMarquee{ from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes tmpSpin   { to { transform: rotate(360deg); } }
@keyframes tmpFloat  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes tmpStamp  { 0% { opacity: 0; transform: scale(1.5) rotate(-22deg); } 55% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(-9deg); } }

/* ----- Cartes inclinées (occasions, témoignages) ----- */
.tmp-tilt { transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s; }
.tmp-tilt:nth-child(odd)  { transform: rotate(-1.7deg); }
.tmp-tilt:nth-child(even) { transform: rotate(1.5deg); }
.tmp-tilt:hover { transform: rotate(0deg) translateY(-8px) !important; box-shadow: 0 26px 46px -24px rgba(40,20,10,.5) !important; z-index: 4; }

/* ----- Cartes produit ----- */
.tmp-pack { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; }
.tmp-pack:hover { transform: translateY(-8px) rotate(-1.2deg); box-shadow: 0 26px 44px -24px rgba(40,20,10,.45); }

/* ----- Placeholder pour les emplacements photo non encore remplis ----- */
.tmp-slot-ph {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 0 18px;
  font: 700 14px 'Newsreader', serif; color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}

/* Neutralise la règle WP « html :where([style*=border-color]){border-style:solid} »
   qui encadrait les liens dont la transition mentionne border-color. */
.tmp-nav a { border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; white-space: nowrap; }
/* État actif du menu : la page courante est soulignée doré (posé par home.js). */
.tmp-nav a.is-active { border-bottom-color: #E66600 !important; }

/* Menu principal : 6 entrées — bascule en tiroir sous 1200px pour éviter le tassement. */
@media (max-width: 1200px) {
  .tmp-nav    { display: none !important; }
  .tmp-burger { display: flex !important; }
}

/* Hero d'accueil : la photo du plat déborde vers la DROITE plutôt que de manger la
   colonne de texte (sinon le grand titre se casse en trop de lignes). Le débordement
   est rogné proprement par .tmp-home { overflow-x: clip }.
   Réservé au hero de l'accueil : la fiche produit partage la classe .tmp-herofig mais
   pose son visuel dans une colonne bornée — l'y faire déborder le glisse sous le titre. */
@media (min-width: 861px) {
  .tmp-herofig--deborde { justify-self: start; width: calc(100% + clamp(24px, 6vw, 90px)); }
}

/* ----- Points de rupture ----- */
@media (max-width: 860px) {
  .tmp-nav       { display: none !important; }
  .tmp-burger    { display: flex !important; }
  .tmp-2col      { grid-template-columns: 1fr !important; }
  .tmp-storymedia{ order: -1 !important; }
  /* Largeur DÉFINIE (pas seulement max-width) : avec margin:auto en grille, une
     figure sans largeur définie se réduit à son contenu → le blob (sans largeur
     intrinsèque) tombe à 0 et aspect-ratio donne une hauteur nulle. */
  .tmp-herofig   { margin: 0 auto !important; width: min(620px, 100%); }
}
@media (max-width: 560px) {
  .tmp-hide-sm { display: none !important; }
  .tmp-loc     { grid-template-columns: 1fr !important; }
  /* Hero mobile : figure un peu plus petite (largeur définie) pour que le sceau
     et le badge tiennent dans les marges (au lieu d'être rognés). */
  .tmp-herofig { width: 100% !important; }
}
@media (prefers-reduced-motion: reduce) {
  .tmp-home * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ===========================================================================
   HERO — version en blocs éditables (démo)
   Reproduit le hero de la maquette avec des blocs WordPress natifs
   (titre, texte, boutons, image) que le client modifie visuellement.
   ========================================================================== */
.tmp-hero { position: relative; overflow: hidden; background: #F8F3EA; }
.tmp-hero__inner {
  position: relative; z-index: 2; max-width: 1200px; margin: 0 auto;
  padding: clamp(36px,5.5vw,68px) clamp(18px,5vw,48px) clamp(48px,6vw,76px);
  display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(28px,5vw,58px);
  align-items: center;
}
@media (max-width: 860px) {
  .tmp-hero__inner { grid-template-columns: 1fr !important; }
  .tmp-hero-figwrap { margin: 0 auto !important; max-width: 420px; }
}
.tmp-hero__eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 8px;
  font: 700 12px 'Hanken Grotesk', sans-serif; letter-spacing: .22em;
  text-transform: uppercase; color: #141210;
}
.tmp-hero__eyebrow::before { content: ""; height: 2px; width: 44px; background: #141210; display: inline-block; flex: none; }
.tmp-hero__script { font: 400 clamp(34px,5vw,58px) 'Mr Dafoe', cursive; color: #C25200; line-height: .95; margin: 0 0 2px; }
.tmp-hero__title { font: 800 clamp(48px,7.6vw,94px)/0.94 'Newsreader', serif; color: #141210; letter-spacing: -.02em; margin: 0 0 20px; }
.tmp-hero__title em { font-style: italic; color: #E66600; }
.tmp-hero__lede { font: 400 clamp(17px,2.1vw,20px)/1.55 'Hanken Grotesk', sans-serif; color: #5C554E; max-width: 440px; margin: 0 0 30px; }
.tmp-hero .wp-block-buttons { display: flex; gap: 14px; flex-wrap: wrap; }
.tmp-hero__btn-primary .wp-block-button__link {
  background: #141210; color: #FFFFFF; font: 700 16px 'Hanken Grotesk', sans-serif;
  padding: 16px 30px; border-radius: 999px; box-shadow: 0 14px 28px -12px rgba(20,18,16,.85);
  transition: transform .2s, box-shadow .2s;
}
.tmp-hero__btn-primary .wp-block-button__link:hover { transform: translateY(-3px); box-shadow: 0 22px 36px -14px rgba(20,18,16,.95); }
.tmp-hero__btn-ghost .wp-block-button__link {
  background: transparent; color: #141210; border: 2px solid #141210;
  font: 700 16px 'Hanken Grotesk', sans-serif; padding: 14px 28px; border-radius: 999px;
  transition: background .2s, color .2s;
}
.tmp-hero__btn-ghost .wp-block-button__link:hover { background: #141210; color: #F8F3EA; }
.tmp-hero-figwrap { position: relative; margin: 0; }
.tmp-hero-photo { margin: 0; }
.tmp-hero-photo img {
  display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: 28% 18%;
  border-radius: 62% 38% 55% 45% / 57% 53% 47% 43%; transform: rotate(-2deg);
  box-shadow: 0 34px 64px -30px rgba(40,20,10,.55); border: 7px solid #FFFFFF;
}
.tmp-hero-deco .seal { position: absolute; left: -20px; bottom: 5%; z-index: 3; transform: rotate(-9deg); filter: drop-shadow(0 8px 16px rgba(0,0,0,.3)); }
.tmp-hero-deco .badge {
  position: absolute; right: -12px; top: 7%; z-index: 3; transform: rotate(7deg);
  background: #E66600; color: #FFFFFF; padding: 12px 17px 12px 24px; border-radius: 9px;
  box-shadow: 0 14px 26px -12px rgba(0,0,0,.55);
}
.tmp-hero-deco .badge::before { content: ""; position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: #F8F3EA; }
.tmp-hero-deco .badge b { display: block; font: 800 24px 'Newsreader', serif; line-height: .95; }
.tmp-hero-deco .badge span { display: block; font: 700 9px 'Hanken Grotesk', sans-serif; text-transform: uppercase; letter-spacing: .1em; color: #FFD9B8; }

/* ===========================================================================
   SECTIONS ÉDITABLES — classes utilitaires partagées
   ========================================================================== */
.tmp-container { max-width: 1200px; margin: 0 auto; padding: clamp(54px,7vw,90px) clamp(18px,5vw,48px); }
.tmp-sec-head { margin: 0 0 42px; }
.tmp-eyebrow { font: 400 clamp(26px,3.4vw,38px) 'Mr Dafoe', cursive; color: #C25200; line-height: 1; margin: 0 0 2px; }
.tmp-h2 { font: 800 clamp(30px,4.4vw,48px)/1.04 'Newsreader', serif; letter-spacing: -.01em; margin: 0; }
.tmp-lead { font: 400 17px/1.55 'Hanken Grotesk', sans-serif; color: #5C554E; margin: 0; }
.tmp-produits { background: #FFF3E8; }
.tmp-pcard { transition: transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s, border-color .26s; }
.tmp-pcard:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -26px rgba(40,20,10,.5); border-color: #E66600; }
.tmp-pcard:hover .tmp-pimg { transform: scale(1.04); }
.tmp-pimg { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.tmp-faqq:hover { color: #141210; }
.tmp-cook { transition: transform .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s; }
.tmp-cook:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -24px rgba(40,20,10,.45); }
[id="nouveau"], [id="histoire"] { scroll-margin-top: 80px; }

/* Apparition au défilement : la transition reste ici (inoffensive dans l'éditeur),
   mais l'état initial « invisible » est dans home-front.css, chargé UNIQUEMENT
   sur le site public — sinon le texte serait masqué dans l'éditeur. */
.tmp-reveal { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }

/* Survols des boutons convertis */
.tmp-vedette__btn .wp-block-button__link, .tmp-nouveau__btn .wp-block-button__link, .tmp-histoire__btn .wp-block-button__link { transition: transform .2s, box-shadow .2s, background .2s, color .2s; }
.tmp-vedette__btn .wp-block-button__link:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -14px rgba(0,0,0,.5); }
.tmp-nouveau__btn .wp-block-button__link:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -14px rgba(0,0,0,.4); }
.tmp-histoire__btn .wp-block-button__link:hover { background: #E66600; color: #F8F3EA; }

/* ----- POURQUOI (3 atouts) ----- */
.tmp-feature-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(252px,1fr)); gap: 26px; }
.tmp-feature { position: relative; background: #FFFFFF; border: 1.5px solid #EDE7DE; border-radius: 7px; padding: 34px 28px 30px; box-shadow: 0 16px 34px -24px rgba(40,20,10,.4); }
.tmp-feature:nth-child(3n+1) { transform: rotate(-1.3deg); }
.tmp-feature:nth-child(3n+2) { transform: rotate(1deg); }
.tmp-feature:nth-child(3n+3) { transform: rotate(-0.8deg); }
.tmp-feature::before { content: ""; position: absolute; top: -11px; left: 50%; transform: translateX(-50%) rotate(-3deg); width: 78px; height: 22px; background: rgba(217,152,44,.45); border: 1px dashed rgba(190,126,20,.5); }
.tmp-feature:nth-child(2)::before { transform: translateX(-50%) rotate(2deg); background: rgba(28,82,54,.32); border-color: rgba(18,58,36,.45); }
.tmp-feature:nth-child(3)::before { transform: translateX(-50%) rotate(-2deg); background: rgba(20,18,16,.3); border-color: rgba(20,18,16,.5); }
.tmp-feature__icon { position: absolute; top: 30px; right: 24px; color: #E66600; line-height: 0; }
.tmp-feature__num { font: 800 italic 42px 'Newsreader', serif; color: #E66600; line-height: 1; margin: 0 0 8px; }
.tmp-feature__title { font: 700 24px 'Newsreader', serif; margin: 0 0 8px; }
.tmp-feature__text { font: 400 16px/1.55 'Hanken Grotesk', sans-serif; color: #5C554E; margin: 0; }

/* ----- RECETTE VEDETTE (bandeau vert) ----- */
.tmp-vedette { background: #E66600; color: #FFFFFF; position: relative; overflow: hidden; }
.tmp-vedette__inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: clamp(50px,7vw,86px) clamp(18px,5vw,48px); display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(28px,5vw,58px); align-items: center; }
@media (max-width: 860px) { .tmp-vedette__inner { grid-template-columns: 1fr; } }
.tmp-vedette-figwrap { position: relative; margin: 0; }
.tmp-vedette-photo { margin: 0; }
.tmp-vedette-photo img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 58% 42% 48% 52% / 52% 48% 52% 48%; transform: rotate(2deg); border: 7px solid #FFFFFF; box-shadow: 0 30px 60px -28px rgba(0,0,0,.6); }
.tmp-vedette-tag { position: absolute; right: -6px; top: -6px; z-index: 3; background: #E66600; color: #141210; font: 800 13px 'Hanken Grotesk', sans-serif; letter-spacing: .05em; text-transform: uppercase; padding: 9px 15px; border-radius: 8px; transform: rotate(8deg); box-shadow: 0 10px 20px -10px rgba(0,0,0,.5); }
.tmp-vedette__script { font: 400 clamp(24px,3vw,34px) 'Mr Dafoe', cursive; color: #FFB068; line-height: 1; margin: 0 0 4px; }
.tmp-vedette__h2 { font: 800 clamp(34px,5vw,58px)/1.0 'Newsreader', serif; letter-spacing: -.015em; margin: 0 0 16px; }
.tmp-vedette__lead { font: 400 clamp(16px,2vw,19px)/1.55 'Hanken Grotesk', sans-serif; color: #D7E5DC; margin: 0 0 26px; max-width: 440px; }
.tmp-vedette__meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.tmp-vedette__meta span { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 8px; padding: 9px 15px; font: 600 13.5px 'Hanken Grotesk', sans-serif; }
.tmp-vedette__meta .hl { background: #FFB068; color: #141210; border: 0; font-weight: 800; }
.tmp-vedette__btn .wp-block-button__link { background: #FFFFFF; color: #E66600; font: 700 16px 'Hanken Grotesk', sans-serif; padding: 15px 30px; border-radius: 999px; }

/* ----- NOUVEAU AU TEMPEH (bandeau rouge) ----- */
.tmp-nouveau { background: #141210; color: #FFFFFF; position: relative; overflow: hidden; }
.tmp-nouveau__inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: clamp(54px,7vw,84px) clamp(18px,5vw,48px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.tmp-nouveau__script { font: 400 clamp(28px,3.6vw,40px) 'Mr Dafoe', cursive; color: #FFC48A; line-height: 1; margin: 0 0 8px; }
.tmp-nouveau__h2 { font: 800 clamp(32px,4.6vw,52px)/1.02 'Newsreader', serif; letter-spacing: -.01em; margin: 0 0 14px; max-width: 660px; }
.tmp-nouveau__p { font: 400 clamp(16px,2vw,19px)/1.55 'Hanken Grotesk', sans-serif; color: #FFD9B8; margin: 0; max-width: 520px; }
.tmp-nouveau .wp-block-buttons { justify-content: center; margin-top: 12px; }
.tmp-nouveau__btn .wp-block-button__link { background: #FFFFFF; color: #141210; font: 700 16px 'Hanken Grotesk', sans-serif; padding: 16px 32px; border-radius: 999px; }

/* ----- NOTRE HISTOIRE ----- */
.tmp-histoire__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,60px); align-items: center; }
@media (max-width: 860px) { .tmp-histoire__grid { grid-template-columns: 1fr; } .tmp-histoire__media { order: -1; } }
.tmp-histoire__label { font: 700 12px 'Hanken Grotesk', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #141210; margin: 0 0 10px; }
.tmp-histoire__h2 { font: 800 clamp(32px,4.6vw,52px)/1.0 'Newsreader', serif; letter-spacing: -.01em; margin: 0 0 6px; }
.tmp-histoire__h2 em { font-style: italic; color: #E66600; }
.tmp-histoire__p { font: 400 clamp(16px,1.9vw,18px)/1.65 'Hanken Grotesk', sans-serif; color: #5C554E; margin: 18px 0 24px; max-width: 500px; }
.tmp-histoire__btn .wp-block-button__link { background: transparent; color: #E66600; border: 2px solid #E66600; font: 700 16px 'Hanken Grotesk', sans-serif; padding: 14px 28px; border-radius: 999px; }

/* ----- PREUVE SOCIALE (fond sombre) ----- */
.tmp-preuve { background: #141210; color: #FFFFFF; }
.tmp-preuve__label { font: 700 11.5px 'Hanken Grotesk', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #B79B86; margin: 0 0 18px; text-align: center; }
.tmp-testi-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 24px; max-width: 900px; margin: 34px auto 0; }
.tmp-testi { background: #FFFFFF; color: #141210; border-radius: 6px; padding: 30px 30px 26px; box-shadow: 0 20px 40px -22px rgba(0,0,0,.5); transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s; }
.tmp-testi:nth-child(odd) { transform: rotate(-1.7deg); }
.tmp-testi:nth-child(even) { transform: rotate(1.5deg); }
.tmp-testi:hover { transform: rotate(0deg) translateY(-8px); box-shadow: 0 26px 46px -24px rgba(0,0,0,.55); }
.tmp-testi__stars { font: 600 14px 'Hanken Grotesk', sans-serif; color: #E66600; letter-spacing: .1em; margin: 0 0 14px; }
.tmp-testi__quote { font: 500 italic 23px/1.4 'Newsreader', serif; margin: 0 0 18px; }
.tmp-testi__name { font: 400 26px 'Mr Dafoe', cursive; color: #141210; line-height: 1; margin: 0; }
.tmp-testi__role { font: 600 12.5px 'Hanken Grotesk', sans-serif; color: #8A8178; margin: 0; }

/* ----- INFOLETTRE (bandeau or) ----- */
.tmp-infolettre { background: #E66600; color: #141210; position: relative; overflow: hidden; }
.tmp-infolettre__inner { position: relative; z-index: 2; max-width: 920px; margin: 0 auto; padding: clamp(52px,7vw,82px) clamp(18px,5vw,48px); text-align: center; }
.tmp-infolettre__script { font: 400 clamp(26px,3.4vw,36px) 'Mr Dafoe', cursive; color: #C25200; line-height: 1; margin: 0 0 4px; }
.tmp-infolettre__h2 { font: 800 clamp(28px,4vw,44px)/1.06 'Newsreader', serif; letter-spacing: -.01em; margin: 0 0 12px; }
.tmp-infolettre__p { font: 400 clamp(16px,2vw,19px)/1.5 'Hanken Grotesk', sans-serif; color: #5C554E; margin: 0 0 26px; }

/* ===========================================================================
   PAGES DE CONTENU (Notre histoire, etc.) — classes réutilisables
   ========================================================================== */
.tmp-band { position: relative; overflow: hidden; }
.tmp-band-cream { background: #F8F3EA; border-top: 1.5px solid #EDE7DE; }
.tmp-band-green { background: #E66600; color: #FFFFFF; }
.tmp-band-wine  { background: #141210; color: #FFFFFF; }
.tmp-band-dark  { background: #141210; color: #F8F3EA; }
.tmp-wrap { max-width: 1200px; margin: 0 auto; padding: clamp(48px,6vw,88px) clamp(18px,5vw,48px); }
.tmp-wrap-center { max-width: 900px; margin: 0 auto; padding: clamp(46px,6vw,88px) clamp(18px,5vw,48px); text-align: center; }
.tmp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,60px); align-items: center; }
@media (max-width: 920px) { .tmp-grid2 { grid-template-columns: 1fr; } .tmp-grid2 .tmp-storymedia { order: -1; } }
.tmp-page-script { font: 400 clamp(24px,3vw,34px) 'Mr Dafoe', cursive; color: #C25200; line-height: 1; margin: 0 0 2px; }
.tmp-page-h1 { font: 800 clamp(42px,6.4vw,84px)/0.95 'Newsreader', serif; color: #141210; letter-spacing: -.015em; margin: 0 0 22px; }
.tmp-page-h1 em { font-style: italic; color: #E66600; }
.tmp-page-intro { font: 500 italic clamp(19px,2.4vw,26px)/1.4 'Newsreader', serif; color: #5C554E; max-width: 600px; margin: 0 auto; }
.tmp-label { font: 700 12px 'Hanken Grotesk', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #141210; margin: 0 0 14px; }
.tmp-prose { font: 400 clamp(16px,1.9vw,18px)/1.7 'Hanken Grotesk', sans-serif; color: #5C554E; margin: 0 0 16px; max-width: 560px; }
.tmp-prose:last-child { margin-bottom: 0; }
.tmp-prose b { font-weight: 700; }
.tmp-prose-light { color: #C9BEA8; }
.tmp-band-dark .tmp-prose, .tmp-band-green .tmp-prose { color: #FFD9B8; }
.tmp-band-wine .tmp-prose { color: #FFD9B8; }
.tmp-val { transition: transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s, border-color .26s; }
.tmp-val:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -26px rgba(40,20,10,.5); border-color: #E66600; }

/* ----- Localisateur (Où acheter) ----- */
@keyframes tmpPing { 0% { transform: rotate(-45deg) scale(.6); opacity: .9; } 70% { transform: rotate(-45deg) scale(1.5); opacity: 0; } 100% { opacity: 0; } }
.tmp-store { transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.tmp-store:hover { background: #F8F3EA; border-color: #E66600; transform: translateX(3px); }
.tmp-online { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; }
.tmp-online:hover { transform: translateY(-6px); box-shadow: 0 24px 42px -24px rgba(40,20,10,.5); }
.tmp-chip { transition: background .18s ease, color .18s ease, border-color .18s ease; }
.tmp-chip:hover { border-color: #E66600; }
.tmp-chip.is-active { background: #E66600 !important; color: #FFFFFF !important; border-color: #E66600 !important; }
/* La carte crée son propre contexte d'empilement : les couches Leaflet (z-index
   interne jusqu'à 1000) ne débordent plus au-dessus de l'en-tête ni du menu mobile. */
.tmp-map { isolation: isolate; }
@media (max-width: 920px) {
  .tmp-find { grid-template-columns: 1fr !important; }
  .tmp-map { position: static !important; top: auto !important; order: -1; }
  /* Carte moins haute en mobile pour ne pas occuper tout l'écran. */
  #tmp-map { height: 44vh !important; min-height: 280px; }
}

/* ----- Nouveau au tempeh (parcours) ----- */
@keyframes tmpBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
.tmp-rcard { transition: transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s, border-color .26s; }
.tmp-rcard:hover { transform: translateY(-7px); box-shadow: 0 26px 46px -26px rgba(40,20,10,.5); border-color: #E66600; }
.tmp-rcard:hover .tmp-rcimg { transform: scale(1.05); }
.tmp-rcimg { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.tmp-play:hover .tmp-playc { transform: scale(1.08); }
.tmp-envie { transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
@media (max-width: 920px) {
  .tmp-stepmedia { order: 2 !important; }
  /* « Nouveau au tempeh » : sa maquette effondre ces 2 sections en 1 colonne dès
     920px. L'accueil (maquette Accueil v2) garde 860px — on cible donc UNIQUEMENT
     l'étape 1 (split-vidéo, #etape-1) et le panneau produit de l'étape 2 ([data-rec]),
     sans déplacer le breakpoint global de .tmp-2col. */
  #etape-1 .tmp-2col,
  [data-rec] .tmp-2col { grid-template-columns: 1fr !important; }
}