/* ========================================================================= * v16-corrections.css — Suzie review corrections (26 June 2026) * Sealed sheet, enqueued LAST (priority 116, after v15-polish) so these * targeted fixes win the cascade without editing any prior sheet. * * Brand tokens (existing): display serif Fraunces, body Inter, eyebrow * JetBrains Mono. Pink #e84a8c / #d11a7e. Cream #faf7f2. Ink #1a1a1a. * No em dashes anywhere (client hard rule). * ========================================================================= */ /* ------------------------------------------------------------------------- * #1 "Bon a savoir" FAQ — the questions and answers rendered as one * undifferentiated wall of Inter 16px. Rebuild as a legible editorial * two-column Q/A list with hairline dividers. Applies to every page that * uses the block (.latoxica-bat-faq) and the storefront variant * (.latoxica-store-faq), per "le changer dans toutes les pages". * ------------------------------------------------------------------------- */ .latoxica-bat-faq__list, .latoxica-store-faq__list { display: grid; gap: 0; max-width: 960px; margin-top: 2.5rem; list-style: none; padding: 0; } .latoxica-bat-faq__item, .latoxica-store-faq__item { display: grid; grid-template-columns: minmax(220px, 0.9fr) 1.55fr; gap: 1.4rem 3rem; align-items: start; padding: 1.75rem 0; border-top: 1px solid rgba(26, 26, 26, 0.14); } .latoxica-bat-faq__item:last-child, .latoxica-store-faq__item:last-child { border-bottom: 1px solid rgba(26, 26, 26, 0.14); } .latoxica-bat-faq__q, .latoxica-store-faq__q { margin: 0; font-family: "Fraunces", Georgia, "Times New Roman", serif; font-size: clamp(1.15rem, 1.5vw, 1.4rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: #1a1a1a; } .latoxica-bat-faq__a, .latoxica-store-faq__a { margin: 0; font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: 1.0625rem; line-height: 1.7; color: #4a4744; max-width: 64ch; } .latoxica-bat-faq__a a, .latoxica-store-faq__a a { color: #c01f76; text-decoration: underline; } @media (max-width: 768px) { .latoxica-bat-faq__item, .latoxica-store-faq__item { grid-template-columns: 1fr; gap: 0.55rem; padding: 1.4rem 0; } .latoxica-bat-faq__a, .latoxica-store-faq__a { font-size: 1rem; } } /* ------------------------------------------------------------------------- * #3 + #9 Hero D subhead alignment. The manifesto heroes (Commander en * ligne, Le blogue) pass no CTA, so the lone subhead sat flush-left under a * centered title. Center it whenever the row carries no CTA. Heroes that DO * pass a CTA (rosa, sitemap, a-propos) keep their intentional split row. * ------------------------------------------------------------------------- */ .latoxica-hero-d__row:not(:has(.latoxica-hero-d__cta)) { justify-content: center; text-align: center; } .latoxica-hero-d__row:not(:has(.latoxica-hero-d__cta)) .latoxica-hero-d__sub { margin-left: auto; margin-right: auto; text-align: center; max-width: 62ch; } /* ------------------------------------------------------------------------- * #4 Google reviews marquee. v11-reviews.css forced the track + cards to * width:100% and hid the aggregate, collapsing 16 cards into one stacked, * clipped column ("trop sur le cote"). Restore the horizontal ribbon: one * row of fixed cards, the seamless translateX(-50%) loop, and the rating. * Mobile becomes a swipeable carousel. Applies on every page with the block. * ------------------------------------------------------------------------- */ .latoxica-testimonials-marquee .latoxica-testimonials-marquee__aggregate { display: inline-flex !important; } /* The real cause of "only one review": v11-reviews.css hid every card except the first via .latoxica-testimonial-card:not(:first-child){display:none}. Re-show them all so the ribbon has cards to scroll, on every viewport. */ .latoxica-testimonials-marquee .latoxica-testimonials-marquee__track > .latoxica-testimonial-card { display: flex !important; } @media (min-width: 769px) { .latoxica-testimonials-marquee .latoxica-testimonials-marquee__viewport { overflow: hidden !important; } .latoxica-testimonials-marquee .latoxica-testimonials-marquee__track { display: flex !important; flex-wrap: nowrap !important; width: max-content !important; max-width: none !important; gap: 24px !important; } .latoxica-testimonials-marquee .latoxica-testimonials-marquee__track > .latoxica-testimonial-card { flex: 0 0 340px !important; width: 340px !important; max-width: 340px !important; min-width: 340px !important; } } @media (max-width: 768px) { .latoxica-testimonials-marquee .latoxica-testimonials-marquee__viewport { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } .latoxica-testimonials-marquee .latoxica-testimonials-marquee__track { display: flex !important; flex-wrap: nowrap !important; width: max-content !important; animation: none !important; gap: 14px !important; padding-inline: 16px; } .latoxica-testimonials-marquee .latoxica-testimonials-marquee__track > .latoxica-testimonial-card { flex: 0 0 80vw !important; width: 80vw !important; max-width: 320px !important; min-width: 0 !important; scroll-snap-align: center; } } /* Reduced motion: stop the auto-scroll, let the user swipe instead of being stuck on one frozen frame. */ @media (prefers-reduced-motion: reduce) and (min-width: 769px) { .latoxica-testimonials-marquee .latoxica-testimonials-marquee__track { animation: none !important; } .latoxica-testimonials-marquee .latoxica-testimonials-marquee__viewport { overflow-x: auto !important; } } /* ------------------------------------------------------------------------- * #11 Menu page "Et cote bar" CTA band rendered cream text on a cream * background (illegible). Restore the intended noir azabache dark band so * the cream type reads, matching the site's other dark CTA bands. * ------------------------------------------------------------------------- */ .latoxica-menu-bar-cta { background-color: #1a1614 !important; } .latoxica-menu-bar-cta .latoxica-eyebrow { color: #e84a8c !important; } .latoxica-menu-bar-cta h2 { color: #faf7f2 !important; } .latoxica-menu-bar-cta h2 em { color: #e84a8c !important; font-style: italic; } .latoxica-menu-bar-cta p { color: rgba(250, 247, 242, 0.82) !important; } .latoxica-menu-bar-cta .latoxica-button--ghost { color: #faf7f2 !important; border-color: rgba(250, 247, 242, 0.5) !important; } /* ------------------------------------------------------------------------- * #7 A propos photos. The portrait + two location placeholders were swapped * for real in page-a-propos.php. Neutralise any leftover placeholder * box styling so the photos sit clean and rounded like the rest of the site. * ------------------------------------------------------------------------- */ .latoxica-apropos-section__media, .latoxica-restos-asymmetric__media { background: none !important; border: 0 !important; min-height: 0 !important; overflow: hidden; border-radius: 16px; } .latoxica-apropos-section__media img, .latoxica-restos-asymmetric__media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }