/* ==========================================================================
   BOUYGUES TELECOM — page bodies. ONE sheet for this whitelabel.
   ==========================================================================

   Hoisted from the design exports' inline styles; declarations are the export's
   own, and only the `:hover` rules are added, because the export's `style-hover`
   attribute has no inline equivalent.

   THIS WAS TWO FILES. `faq.css` and `landing.css` each carried the whole design
   base AND its own copy of the header, the page-title band and the footer under
   separate generated names, so this partner declared its chrome four times. The
   chrome is now `brand.css` and the global element rules are `base.css`; what is
   left here is only the page BODY.

   GONE WITH THE CHROME: `-2` … `-23` on both exports (the bar, its two logos,
   the nav, the plan dropdown and the language menu), `faq-25` … `-27` (the
   page-title band), and the two footers. `faq-24`'s Delivery item goes with
   them — this whitelabel sells eSIMs, and the owner had the same item and the
   "Brought to you by" endorsement removed on Orange.

   The two prefixes are the two page templates and never collide, which is why
   one sheet serves both surfaces.
   ========================================================================== */

/* The dark band, shared with the page-title band in `brand.css` — the token is
   declared once there. These are the two landing sections that also draw it,
   and they used to carry it as a duplicated inline `style` object. */
.byg-band {
  background: var(--brand-band);
  background-size: var(--brand-band-size);
  background-position: var(--brand-band-position);
}

/* --- landing ------------------------------------------------------------- */
.byg-landing-1 { background:#f9f9f9; }
.byg-landing-24 { background:transparent; }
.byg-landing-25 { background:url('/assets/sites/bouygues-telecom/img/tri-color.bg.png') 0% 0% / 30px repeat; position:relative; }
.byg-landing-26 { max-width:1140px; margin:0 auto; padding:3rem 15px; color:#fff; }
.byg-landing-27 { display:flex; flex-wrap:wrap; align-items:center; margin-left:clamp(.5em,4vw,5em); margin-right:clamp(.5em,4vw,5em); padding:.5em 1em 1.5em; border-radius:15px; box-shadow:0 .2rem .4rem 0 rgba(0,0,0,.1); background-color:#fff; color:#25465f; }
.byg-landing-28 { flex:1 1 300px; max-width:100%; padding:0 15px; text-align:center; }
.byg-landing-29 { width:350px; max-width:100%; margin:0 auto; display:block; }
.byg-landing-30 { flex:1 1 420px; padding:1.5rem 15px .5rem; text-align:center; color:#25465F; }
.byg-landing-31 { font-family:var(--font-display); font-size:2.5rem; margin-bottom:.5rem; }
.byg-landing-32 { font-family:var(--font-body); font-weight:normal; font-size:1.5rem; margin-bottom:.5rem; }
/* The chip row WRAPS. Each chip is `white-space: nowrap`, so three of them set a
   min-content width the row could not go below — 414px once the 60GB plan's
   chip carried its struck WAS price, which is wider than the viewport of the
   phone it has to fit. Not one element overflowing: the LAYOUT VIEWPORT itself
   became 414, so every measurement on the page looked fine while the whole page
   was too wide. This is the foundation's `.cluster` behaviour, which this ported
   row reimplements without the wrap. */
.byg-landing-33 { display:flex; flex-wrap:wrap; padding:.5rem 0; }
/* The spec chips sit on one line each. The discounted plan's chip carries a
   struck-through WAS price, which wrapped it onto a second line and pushed the
   row out of line with its neighbours — live keeps both prices inline and sets
   the old one smaller. */
.byg-landing-34 { flex:1; white-space:nowrap; }
/* Measured on live: the chip is 20px/700 and the struck price 14px — 0.7em —
   in the SAME face, weight and colour, which it gets by inheriting. The gap is
   the space in the markup, as live has it. */
.byg-landing-34 s { font-size:.7em; }
.byg-landing-35 { display:flex; flex-wrap:wrap; margin:1rem -15px 0; }
.byg-landing-36 { flex:1 1 200px; padding:0 15px; margin-bottom:.5rem; }
.byg-landing-37 { display:block; text-align:center; font-size:1.8em; font-family:var(--font-heading); font-weight:var(--weight-bold); padding:.25rem .75rem; border-radius:5px; border:3px solid #fff; outline:1px solid #ea5b0f; background-color:#fff; color:#ea5b0f; }
.byg-landing-37:hover { color:#ea5b0f; background-color:#fff; }
.byg-landing-38 { font-family:var(--font-body); font-size:.9em; }
.byg-landing-39 { display:block; text-align:center; font-size:1.8em; font-family:var(--font-heading); font-weight:var(--weight-bold); padding:.25rem .75rem; border-radius:5px; border:3px solid #fff; background-color:#EA5B0F; color:#fff; }
.byg-landing-39:hover { background:#f16c25; color:#fff; }
.byg-landing-40 { max-width:1140px; margin:1rem auto; padding:1rem 15px; border-radius:.6rem; box-shadow:0 .2rem .4rem 0 rgba(0,0,0,.1); background-color:#fff; color:#25465f; }
.byg-landing-41 { font-family:var(--font-display); font-size:1.85em; text-align:center; }
.byg-landing-42 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(140px, 100%),1fr)); text-align:center; }
.byg-landing-43 { padding:0 15px; }
.byg-landing-44 { font-size:1.2em; }
/* The USP tile's icon. It was an inline `backgroundImage` on a `role="img"` div,
   built in the view from a hardcoded filename list; the row's artwork is part of
   the `usps` setting now, so this only has to size it. */
.byg-landing-90 { width:60px; height:60px; margin:1.5rem auto; display:block; object-fit:contain; }
.byg-landing-45 { max-width:1140px; margin:1.5rem auto; padding:1.5rem 15px; background-image:url(/assets/sites/bouygues-telecom/img/bouygues.e-sim-banner.overlayed.jpg); background-size:cover; background-position:center; }
.byg-landing-46 { display:flex; flex-wrap:wrap; }
.byg-landing-47 { flex:0 0 16.666667%; max-width:16.666667%; }
.byg-landing-48 { flex:1 1 320px; max-width:100%; padding:3rem 15px; color:#fff; }
.byg-landing-49 { font-family:var(--font-body); font-size:2rem; text-align:left; margin-bottom:.5rem; }
.byg-landing-50 { font-family:var(--font-body); font-size:1.1em; line-height:1.5; }
.byg-landing-51 { display:inline-block; padding:.375rem 1rem; border-radius:5px; border:1px solid #fff; background:#fff; color:#EA5B0F; font-family:var(--font-heading); font-weight:var(--weight-bold); text-align:center; }
.byg-landing-51:hover { background:#f9f9f9; color:#EA5B0F; }
.byg-landing-52 { max-width:1140px; margin:1rem auto; padding:1rem 15px; }
.byg-landing-53 { font-family:var(--font-display); font-size:1.85em; padding:.5rem 0; text-align:center; }
.byg-landing-54 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr)); gap:1rem; }
.byg-landing-55 { padding:1.5rem; border-radius:.6rem; box-shadow:0 .2rem .4rem 0 rgba(0,0,0,.1); background-color:#fff; color:#25465f; }
.byg-landing-56 { position:relative; width:100%; padding-top:56.25%; overflow:hidden; background:#000; }
.byg-landing-57 { position:absolute; top:0; left:0; width:100%; height:100%; }
.byg-landing-58 { font-size:1.75rem; margin-top:.5rem; text-align:center; }
.byg-landing-59 { text-align:justify; margin:0; }
.byg-landing-60 { width:100%; display:block; }
.byg-landing-61 { max-width:1140px; margin:0 auto; padding:3rem 15px; color:#fff; text-align:center; display:flex; flex-wrap:wrap; align-items:center; }
.byg-landing-62 { flex:1 1 320px; padding:0 15px; }
.byg-landing-63 { font-weight:bold; color:#fff; font-size:2rem; }
.byg-landing-64 { font-weight:bold; color:#fff; font-size:1.75rem; }
.byg-landing-65 { flex:1 1 320px; padding:0 15px; display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.byg-landing-66 { display:inline-block; padding:.375rem 1rem; border:3px solid #fff; border-radius:5px; background:#fff; color:#EA5B0F; font-family:var(--font-heading); font-weight:var(--weight-bold); font-size:1.4em; text-align:center; }
.byg-landing-66:hover { background:#f9f9f9; color:#EA5B0F; }
.byg-landing-67 { padding:0 3rem; font-weight:bold; }
.byg-landing-68 { padding:0 1rem; font-weight:bold; }
/* `#widget-container` is the eKomi widget's MOUNT POINT, which is what live
   uses it as — it has no border there. The port dressed it as a dashed
   placeholder box, so with no widget script and no label it shipped an empty
   dashed rectangle above the reviews. It is invisible until something mounts. */
.byg-landing-69 { text-align:center; color:#7f8f99; font-size:.9em; letter-spacing:.02em; }
.byg-landing-69:empty { display:none; }
.byg-landing-70 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px, 100%),1fr)); margin-top:.5rem; }
.byg-landing-71 { margin-bottom:1.5rem; padding:0 15px; }
.byg-landing-72 { margin:.5rem; padding:1.5rem; height:100%; border-radius:1em; border:1px solid #dee2e6; }
.byg-landing-73 { display:flex; align-items:center; justify-content:space-between; opacity:.7; }
.byg-landing-74 { color:#ffc107; letter-spacing:1px; }
.byg-landing-75 { margin:1.5rem 0; text-align:justify; }
.byg-landing-76 { opacity:.7; }
.byg-landing-77 { max-width:1140px; margin:0 auto; padding:3rem 15px; color:#fff; display:flex; flex-wrap:wrap; align-items:center; }
.byg-landing-78 { flex:1 1 320px; padding:0 15px; text-align:center; }
.byg-landing-79 { margin:0; }
.byg-landing-80 { padding-left:10%; margin:1rem 3rem; }
.byg-landing-81 { border:1px solid #dee2e6; padding:.5rem 1.5rem; }
.byg-landing-82 { display:inline-block; margin-bottom:.25rem; color:#fff; }
.byg-landing-83 { color:#fff; }

/* White copy keeps its colour on hover — these sit on the dark band. */
.byg-landing-26:hover { color: #fff; }
.byg-landing-39:hover { color: #fff; }
.byg-landing-48:hover { color: #fff; }
.byg-landing-61:hover { color: #fff; }
.byg-landing-63:hover { color: #fff; }
.byg-landing-64:hover { color: #fff; }
.byg-landing-77:hover { color: #fff; }
.byg-landing-82:hover { color: #fff; }
.byg-landing-83:hover { color: #fff; }

/* --- FAQ -----------------------------------------------------------------
   `-31` onwards are ANSWER wrappers: the stored answer HTML carries its own
   class names, so they appear in the database rather than in the component. */
.byg-faq-1 { background:#fff; }
/* The body's block padding. The design's own container (`.byg-faq-28`) carried
   it and is gone with the chrome — the page uses the foundation's `.container`,
   which sets none, so without this the first group heading sits hard against
   the page-title band. */
.byg-faq-28 { padding-block:1.5rem; }
.byg-faq-29 { font-size:2rem; text-align:center; margin-bottom:.5rem; }
.byg-faq-30 { margin-bottom:3rem; border-top-left-radius:4px; border-top-right-radius:4px; }
.byg-faq-31 { display:block; padding:1rem; color:#25465F; }
.byg-faq-31:hover { color:#109DB9; }
/* The open/closed glyphs come from `ico-simops`, declared with every other face
   in public/assets/css/fonts.css. */
.byg-faq-32 { float:right; font-family:'ico-simops'; font-style:normal; }
.byg-faq-33 { font-size:1.1em; }
/* The ANSWER's inset. This class was the group's bottom spacing in the export;
   the answer body needs the same inset orange (`-33`) and zen (`-25`) already
   have, or the copy runs flush to the panel edge. */
.byg-faq-34 { padding:0 1.5rem 1rem; }
.byg-faq-35 { text-align:center; display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.byg-faq-36 { display:inline-block; font-size:1em; padding:.375rem 3rem; border:3px solid #343a40; border-radius:0; background-color:#343a40; color:#fff; }
.byg-faq-36:hover { background-color:#23272b; border-color:#1d2124; color:#fff; }
.byg-faq-37 { padding:0 .5rem; }
.byg-faq-38 { display:inline-block; font-size:1em; padding:.375rem 3rem; border:3px solid #ea5b0f; border-radius:0; background-color:#ea5b0f; color:#fff; }
.byg-faq-38:hover { background-color:#ea5b0fe3; border-color:#ea5b0fe3; color:#fff; }

/* ==========================================================================
   RESPONSIVE

   The landing's bands already wrap (`flex-wrap` and `auto-fit` grids), so only
   the fixed-width blocks need a rule. Breakpoints are the foundation's five.
   ========================================================================== */

@media (max-width: 1024px) {
  .byg-landing-26,
  .byg-landing-40,
  .byg-landing-45,
  .byg-landing-52,
  .byg-landing-61,
  .byg-landing-77 { padding-inline: var(--space-4); }
  /* The hero card's clamped side margins collapse to the page gutter. */
  .byg-landing-27 { margin-inline: 0; }
}

@media (max-width: 767px) {
  /* The banner's spacer column is a desktop device; it eats a phone column. */
  .byg-landing-47 { display: none; }
  /* The contact block's decorative indent does the same. */
  .byg-landing-80 { padding-left: 0; margin-inline: 0; }
}