/* Le Miracle, French-only layout corrections.
   Loaded ONLY on /fr/ pages by tools/i18n.py. The English site is untouched.

   Why this file exists: French runs roughly 15 to 25% longer than English for the
   same copy ("Book Now" is 8 characters, "Prendre rendez-vous" is 19). Three places
   in the shared layout overflow once the copy is translated. Each fix below was
   found by measuring the rendered French page, not guessed.
*/

/* 1. Header CTA. "Prendre rendez-vous" pushes the nav row past the viewport on
      small phones, which produces a horizontal scrollbar on every French page. */
@media (max-width: 520px) {
  .nav-right { gap: 8px; }
  .nav-right .btn { padding: 10px 14px; font-size: 10px; letter-spacing: .03em; }
}
@media (max-width: 400px) {
  .nav-right .btn { padding: 9px 11px; font-size: 9.5px; }
}

/* 2. Mega menu. French category labels are wider, so the dropdown ran off the
      right edge between roughly 1000px and 1200px. Pin it inside the viewport
      and let long labels wrap instead of forcing the column wider. */
@media (max-width: 1240px) {
  .mega { left: auto; right: 0; max-width: min(96vw, 1100px); }
  .mega-cols { flex-wrap: wrap; }
  .mega-cat, .mega-cat h5, .mega-cat a { min-width: 0; overflow-wrap: break-word; }
}

/* 3. Grid children. CSS grid items default to min-width:auto, so a long
      unbreakable French string (for example "Événements réservés aux membres")
      can push a card wider than its track. Cap them. */
.mb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c-qzgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mb-card, .c-fc, .c-qzbtn, .c-why-item, .c-step { min-width: 0; overflow-wrap: break-word; }
@media (max-width: 980px) { .c-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .mb-grid { grid-template-columns: minmax(0, 1fr); }
  .c-qzgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) { .c-cards { grid-template-columns: minmax(0, 1fr); } }

/* 4. Buttons carrying translated labels: allow two lines rather than overflowing. */
.c-fc .btn, .mb-card .btn { white-space: normal; line-height: 1.25; }

/* 5. French typography. Guard against a line breaking right before a colon or
      before the dollar sign, both of which read as errors in French. */
.c-fc .price, .mb-price, .c-pricechip b { white-space: nowrap; }

/* 6. The sticky mobile book bar holds a longer French label. */
@media (max-width: 400px) {
  .book-bar-txt { font-size: 10px; }
  .book-bar-btn { padding: 11px 14px; font-size: 10px; }
}

/* 7. Desktop nav. French labels ("Problèmes de peau", "Prendre rendez-vous",
      "À propos") are far longer than their English counterparts, so at the shared
      34px gap they wrap onto a second line and visually collide with the phone
      number. Keep every top-level item on one line and tighten the gap instead. */
@media (min-width: 981px) {
  #hdr nav > ul { gap: 20px; }
  #hdr nav > ul > li > a,
  #hdr .nav-ph,
  #hdr .nav-right .btn { white-space: nowrap; }
  #hdr nav > ul > li > a { font-size: 11.5px; letter-spacing: .06em; }
  #hdr .nav-right { flex-wrap: nowrap; }
}
@media (min-width: 981px) and (max-width: 1365px) {
  #hdr .nav-ph { display: none; }   /* phone hides earlier in French; the sticky
                                        CTA and footer still carry the number */
  #hdr nav > ul { gap: 15px; }
  #hdr nav > ul > li > a { font-size: 11px; }
}

/* 8. Long French CTA labels. "Réservez votre consultation gratuite" is 36
      characters against "Book your free consultation" at 27, and it burst the
      hero button on the free-consultation page at 390px. Let CTAs wrap and
      stay inside the viewport rather than forcing a horizontal scrollbar. */
.btn {
  white-space: normal;
  max-width: 100%;
  overflow-wrap: break-word;
  text-align: center;
}
@media (max-width: 520px) {
  .hero-actions .btn,
  .wrap > .btn { width: 100%; box-sizing: border-box; }
}

/* 9. Home hero headline. The English headline is "Own your glow", three short
      words, so the shared fluid size is tuned for a 4-letter longest word. The
      French is "Révélez votre éclat", and at 220px the first line ran up under
      the fixed header. Scale the French headline to the longest word instead. */
.hero-title { font-size: clamp(38px, 9.2vw, 132px); }
@media (min-width: 1200px) { .hero-title { font-size: 132px; } }
@media (max-width: 900px)  { .hero-title { font-size: clamp(36px, 10.5vw, 92px); } }
@media (max-width: 520px)  { .hero-title { font-size: clamp(32px, 12vw, 58px); } }
/* the hero block is vertically centred, so the taller French headline also needs
   clearance from the fixed header */
.hero-sticky { padding-top: 118px; box-sizing: border-box; }
@media (max-width: 980px) { .hero-sticky { padding-top: 140px; } }