/* Les deux faux écrans du comparateur avant/après : une boulangerie INVENTÉE, dans la page (pas d'iframe : la CSP
   du Worker n'encadre que Turnstile). Préfixes fo- (ancien site) et fn- (nouveau site) ; pixels assumés pour l'ancien. */

.fake-old {
  padding: 14px 0;
  overflow: hidden;
  font: 13px / 1.35 "Times New Roman", Times, serif;
  color: #000;
  background: #b9b5ab repeating-linear-gradient(45deg, #c4c0b6 0 6px, #b9b5ab 6px 12px);
}
.fake-old p { margin: 0 0 8px; }
.fake-old u { color: #0000c8; }

.fo-page { width: 760px; margin: 0 auto; background: #f4f1e8; border: 2px outset #ddd; }

.fo-banner { height: 96px; padding-top: 18px; text-align: center; background: linear-gradient(#3b5cb0, #1c3a8c); border-bottom: 3px ridge #999; }
.fake-old .fo-name {
  margin: 0;
  font: italic 700 34px / 1 "Comic Sans MS", "Comic Neue", cursive;
  color: #ffe600;
  text-shadow: 2px 2px 0 #b30000, 4px 4px 0 #000;
}
.fake-old .fo-sub { margin: 6px 0 0; font: 12px Arial, sans-serif; color: #fff; }

.fake-old .fo-nav { margin: 0; padding: 5px; text-align: center; background: #ddd8c8; border-bottom: 1px solid #999; }

.fo-cols { display: grid; grid-template-columns: 170px 1fr; }
.fo-side { padding: 10px; background: #e6e0cc; border-right: 1px dashed #999; }
.fo-main { padding: 10px 14px; }

.fake-old .fo-welcome { font-size: 20px; font-weight: 700; color: #8a0000; text-align: center; }
.fake-old .fo-photo {
  float: right;
  width: 180px;
  height: 120px;
  margin: 0 0 8px 10px;
  padding-top: 48px;
  font: 700 11px Arial, sans-serif;
  color: #333;
  text-align: center;
  background: #fff;
  border: 1px solid #777;
}
.fake-old .fo-works {
  clear: both;
  width: 260px;
  margin: 10px auto;
  padding: 4px;
  font: 700 12px Arial, sans-serif;
  text-align: center;
  background: repeating-linear-gradient(-45deg, #ffe600 0 12px, #1a1a1a 12px 24px);
}
.fo-works span { display: block; padding: 3px; background: #ffe600; }
.fake-old .fo-counter { font-size: 11px; text-align: center; }
.fo-counter b { padding: 1px 4px; font: 700 12px "Courier New", monospace; color: #0f0; background: #000; }
.fake-old .fo-foot { margin: 0; padding: 6px; font-size: 11px; text-align: center; background: #ddd8c8; border-top: 1px solid #999; }

/* Le même commerce, refait : lisible, adapté au mobile, l'essentiel en haut. */
.fake-new {
  --fn-night: #1b2a5c;
  --fn-cream: #fff8e6;
  --fn-crust: #ffd166;
  overflow: hidden;
  font: 400 1rem / 1.5 var(--text);
  color: #14203f;
  background: var(--fn-cream);
}
.fake-new p { margin: 0; }

.fn-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 5%;
  color: var(--fn-cream);
  background: var(--fn-night);
}
.fn-brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; }
.fn-brand i {
  width: 2.2rem;
  height: 1.3rem;
  background:
    radial-gradient(circle at 30% 70%, var(--fn-cream) 0 0.55rem, transparent 0.58rem),
    radial-gradient(circle at 62% 45%, var(--fn-cream) 0 0.7rem, transparent 0.73rem),
    radial-gradient(circle at 85% 75%, var(--fn-cream) 0 0.45rem, transparent 0.48rem);
}
.fn-menu { display: flex; gap: 1.4rem; font-weight: 600; }

.fn-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  padding: 2.5rem 5% 3rem;
  color: var(--fn-cream);
  background:
    radial-gradient(circle at 6% 14%, var(--fn-cream) 0 1.6rem, transparent 1.65rem),
    radial-gradient(ellipse at 20% 110%, #2c4285 0 40%, transparent 41%),
    var(--fn-night);
}
.fn-kicker { margin-bottom: 0.8rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; color: var(--fn-crust); }
.fn-title { max-width: 14ch; font-size: clamp(1.8rem, 1rem + 3vw, 3.2rem); font-weight: 800; line-height: 1.02; }
.fn-sub { max-width: 34ch; margin-top: 1rem; font-size: 1.05rem; }
.fn-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.4rem; }
.fn-ctas span { padding: 0.7rem 1.2rem; font-weight: 700; border-radius: 999px; }
.fn-ctas .fn-main { color: var(--fn-night); background: var(--fn-crust); }
.fn-ctas .fn-ghost { color: var(--fn-cream); box-shadow: inset 0 0 0 2px var(--fn-cream); }

.fn-loaf {
  justify-self: center;
  width: min(100%, 17rem);
  aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(115deg, transparent 0 22%, #8a4b12 22% 24%, transparent 24% 34%) 50% 50% / 70% 40% no-repeat,
    radial-gradient(ellipse at 50% 35%, #f0b25a, #c77a24 70%);
  border-radius: 50% / 60%;
  box-shadow: 0 1.2rem 0 -0.6rem rgb(0 0 0 / 0.25);
  rotate: -8deg;
}

.fn-today { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: baseline; padding: 1rem 5%; background: var(--fn-crust); }
.fn-today strong { font-size: 1.1rem; }

.fn-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 1.5rem 5% 2rem; }
.fn-card { padding: 1.1rem; background: #fff; border-radius: 1rem; box-shadow: 0 0.5rem 1.5rem rgb(20 32 63 / 0.1); }
.fn-card b { display: block; margin-bottom: 0.3rem; font-size: 1.1rem; }

@container (max-width: 40rem) {
  .fn-menu { display: none; }
  .fn-hero { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; padding-top: 1.5rem; }
  .fn-loaf { width: 9rem; }
  .fn-cards { grid-template-columns: minmax(0, 1fr); }
}