/* Mise en page de la gamme Baie coulissante — extrait du gabarit /fenetre */

  /* ── Breadcrumb ── */
  .breadcrumb { background: var(--surface); border-bottom: 1px solid var(--line); }
  .breadcrumb .wrap { display: flex; align-items: center; gap: .5rem; padding-block: .8rem; font-size: .85rem; color: var(--muted); flex-wrap: wrap; }
  .breadcrumb a { color: var(--muted); font-weight: 600; }
  .breadcrumb a:hover { color: var(--accent); }
  .breadcrumb .sep { color: var(--muted-2); }
  .breadcrumb .cur { color: var(--text); font-weight: 700; }

  /* ── Tab nav ── */
  .tab-nav { position: sticky; top: 77px; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
  .tab-nav .wrap { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
  .tab-nav .wrap::-webkit-scrollbar { display: none; }
  .tab-btn { font-family: var(--font-head); font-weight: 700; font-size: .92rem; padding: 1rem 1.2rem; border-bottom: 3px solid transparent; color: var(--muted); white-space: nowrap; transition: color .15s, border-color .15s; flex: none; }
  .tab-btn:hover { color: var(--text); }
  .tab-btn.t-fa { color: var(--teal); border-bottom-color: var(--teal); }
  .tab-btn.t-fp { color: var(--blue); border-bottom-color: var(--blue); }
  .tab-btn.t-pfa { color: var(--brand); border-bottom-color: var(--brand); }
  .tab-btn.t-pfp { color: #1f7a52; border-bottom-color: #1f7a52; }
  .tab-sep { width: 1px; background: var(--line); margin: .6rem 0; }

  /* ── Hero cards ── */
  .hero-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 2.8rem; }
  @media (max-width: 760px) { .hero-compare { grid-template-columns: 1fr; } }
  .hc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 1.4rem 1.6rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .5rem; transition: transform .2s, box-shadow .2s; }
  .hc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
  .hc-type { font-family: var(--font-head); font-weight: 800; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
  .hc-card h3 { font-size: 1.2rem; margin: 0; }
  .hc-card p { font-size: .88rem; color: var(--muted); line-height: 1.5; margin: 0; }
  .hc-dims { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: .3rem 0; }
  .hc-dim .d { font-family: var(--font-head); font-weight: 900; font-size: 1.5rem; line-height: .95; letter-spacing: -.02em; }
  .hc-dim .dl { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: .2rem; }
  .hc-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
  .hc-tag { font-family: var(--font-head); font-weight: 700; font-size: .74rem; padding: .28em .7em; border-radius: 999px; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }

  /* ── Prod anchor ── */
  .prod-anchor { display: flex; align-items: center; gap: 1rem; padding-block: clamp(1.6rem,3vw,2.4rem) .4rem; }
  .prod-anchor::before, .prod-anchor::after { content: ""; flex: 1; height: 2px; background: var(--c,var(--teal)); border-radius: 2px; }
  .prod-anchor span { font-family: var(--font-head); font-weight: 900; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c,var(--teal)); white-space: nowrap; }

  /* ── AEV cards ── */
  .aev-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; margin-top: 2.6rem; }
  @media (min-width: 760px) { .aev-grid { grid-template-columns: repeat(3, 1fr); } }
  .aev-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem 1.5rem 1.4rem; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
  .aev-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
  .aev-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
  .aev-card .ico { width: 36px; height: 36px; color: var(--c); }
  .aev-card .lbl { font-family: var(--font-head); font-weight: 800; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .9rem; }
  .aev-card .cls { font-family: var(--font-head); font-weight: 900; font-size: 3.2rem; line-height: .95; color: var(--c); margin: .1rem 0 .2rem; letter-spacing: -.02em; }
  .aev-card .cls small { font-size: 1.2rem; font-weight: 800; }
  .cls-row { display: flex; align-items: flex-end; gap: .5rem; margin: .1rem 0 .2rem; }
  .cls-item { display: flex; flex-direction: column; align-items: center; }
  .cls-item .num { font-family: var(--font-head); font-weight: 900; font-size: 2.6rem; line-height: .95; color: var(--c); letter-spacing: -.02em; }
  .cls-item .gc { font-family: var(--font-head); font-weight: 800; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
  .cls-sep { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: var(--line-2); line-height: 1; padding-bottom: .2rem; }
  .cls-sub { font-family: var(--font-head); font-weight: 700; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
  .aev-card .scale { display: flex; gap: 4px; margin: .5rem 0 .9rem; }
  .aev-card .scale i { flex: 1; height: 7px; border-radius: 3px; background: var(--line); }
  .aev-card .scale i.on { background: var(--c); }
  .aev-card .desc { font-size: .9rem; line-height: 1.55; color: var(--muted); }
  .aev-card .norm { font-size: .74rem; color: var(--muted-2); margin-top: .8rem; font-weight: 700; letter-spacing: .04em; }
  .aev-note { font-size: .88rem; color: var(--muted); margin-top: 1.4rem; line-height: 1.55; padding-left: 1.7rem; position: relative; max-width: 80ch; }
  .aev-note::before { content: "!"; position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 50%; background: var(--brand); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: .72rem; display: grid; place-items: center; }

  /* ── Gamme cards ── */
  .gamme-grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; margin-top: 2.6rem; }
  @media (min-width: 680px) { .gamme-grid { grid-template-columns: repeat(3, 1fr); } }
  .gamme-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
  .gamme-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
  .gamme-card.invizio { border-color: var(--accent); }
  .gamme-img { width: 100%; height: 320px; object-fit: cover; object-position: center 30%; display: block; background: #dde2e6; }
  .gamme-body { padding: 1.2rem 1.3rem 1.4rem; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
  .gamme-name { font-family: var(--font-head); font-weight: 900; font-size: 1.1rem; color: var(--teal); }
  .gamme-desc { font-size: .88rem; color: var(--muted); }
  .uw-badge { display: inline-flex; align-items: center; font-family: var(--font-head); font-weight: 800; font-size: .82rem; background: var(--teal); color: #fff; border-radius: 6px; padding: .4em .8em; margin-top: .2rem; }
  .uw-badge.gold { background: #b07a35; }
  .uw-badge.blue { background: var(--blue); }
  .uw-badge.green { background: #1f7a52; }
  .gamme-pills { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; }
  .gp { font-family: var(--font-head); font-weight: 700; font-size: .74rem; padding: .25em .65em; border-radius: 4px; background: #eef2f5; color: var(--teal); }

  /* ── KV / tech-split ── */
  .tech { background: var(--surface); }
  .tech-split { display: grid; grid-template-columns: 1fr; gap: 2.4rem; margin-top: 2.6rem; align-items: start; }
  @media (min-width: 920px) { .tech-split { grid-template-columns: 1.05fr 1fr; } }
  .kv { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .6rem 1.3rem; }
  .kv .cap { font-family: var(--font-head); font-weight: 800; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-700); margin: .8rem 0 .4rem; }
  .kv .row { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
  .kv .row:last-child { border-bottom: none; }
  .kv .k { color: var(--muted); font-weight: 600; font-size: .92rem; }
  .kv .v { font-family: var(--font-head); font-weight: 700; font-size: .92rem; text-align: right; }
  .kv .v.good { color: #1f8a4c; }
  .featcol .feat-h { font-family: var(--font-head); font-weight: 800; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-700); margin: 0 0 .8rem; }
  .featcol .feat-h:not(:first-child) { margin-top: 1.5rem; }
  .featlist { display: grid; gap: .6rem; list-style: none; padding: 0; }
  .featlist li { padding-left: 1.7rem; position: relative; font-size: .92rem; color: var(--text); line-height: 1.5; }
  .featlist li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 999px; background: var(--accent-050); }
  .featlist li::after { content: "✓"; position: absolute; left: 4px; top: 1px; color: var(--accent-700); font-weight: 800; font-size: .78rem; }

  /* ── Coupes ── */
  .coupe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 2rem; }
  @media (max-width: 640px) { .coupe-grid { grid-template-columns: 1fr; } }
  .coupe-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
  .coupe-img { width: 100%; height: 260px; object-fit: contain; display: block; padding: 1rem; background: #fff; }
  .coupe-body { padding: 1rem 1.2rem 1.2rem; border-top: 1px solid var(--line); }
  .coupe-name { font-family: var(--font-head); font-weight: 800; font-size: 1rem; margin: 0 0 .5rem; }
  .coupe-dims { display: flex; gap: .4rem; flex-wrap: wrap; }
  .dim-chip { font-family: var(--font-head); font-weight: 700; font-size: .74rem; padding: .25em .7em; border-radius: 4px; background: #eef2f5; color: var(--teal); }
  .dim-chip.gold { background: #fdf3e0; color: #7c5c1a; }

  /* ── PMR banner ── */
  .pmr-banner { background: oklch(97% 0.025 155); border: 1.5px solid oklch(75% 0.09 155); border-radius: var(--r-lg); padding: 1.2rem 1.5rem; display: flex; align-items: center; gap: 1.2rem; margin-top: 2rem; }
  .pmr-icon { width: 36px; height: 36px; flex: none; color: #1f7a52; }
  .pmr-text strong { font-family: var(--font-head); font-size: 1rem; font-weight: 900; color: #1f7a52; display: block; margin-bottom: .3rem; }
  .pmr-text span { font-size: .9rem; color: #2a4a38; line-height: 1.5; }

  /* ── Vitrages ── */
  .vit-grid { display: grid; grid-template-columns: 1fr; gap: 1.3rem; margin-top: 2.6rem; }
  @media (min-width: 680px) { .vit-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) { .vit-grid { grid-template-columns: repeat(4, 1fr); } }
  .vit { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s, border-color .2s; }
  .vit:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
  .vit.feat { border-color: var(--accent); }
  .vit-flag { position: absolute; top: .9rem; right: .9rem; z-index: 3; font-family: var(--font-head); font-weight: 800; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; background: var(--brand); color: #fff; padding: .4em .6em; border-radius: 6px; }
  .vit-cap { height: 110px; display: grid; place-items: center; background: var(--teal); }
  .vit-cap .panes { display: flex; gap: 5px; align-items: stretch; height: 56px; }
  .vit-cap .pane { width: 13px; border-radius: 2px; background: linear-gradient(160deg, rgba(120,190,210,.55), rgba(190,230,240,.18)); border: 1.5px solid rgba(180,225,235,.6); }
  .vit-cap .gap { width: 9px; border-radius: 2px; background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.25); }
  .vit-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
  .vit-body h3 { font-size: 1.05rem; }
  .vit-ug { font-family: var(--font-head); font-weight: 800; font-size: .8rem; color: var(--accent-700); }
  .vit-desc { font-size: .88rem; color: var(--muted); line-height: 1.5; }
  .vit-foot { margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
  .vit-foot .uw { font-family: var(--font-head); font-weight: 900; font-size: 1.5rem; color: var(--text); letter-spacing: -.02em; line-height: 1; }
  .vit-foot .uw small { display: block; font-size: .66rem; font-weight: 600; color: var(--muted); margin-top: .2rem; }
  .vit-foot .uwlab { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); }

  /* ── Tables ── */
  .tbl-wrap { margin-top: 2.4rem; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
  table.tt { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--surface); }
  table.tt th, table.tt td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
  table.tt thead th { font-family: var(--font-head); font-weight: 800; font-size: .82rem; background: var(--teal); color: #fff; border-bottom: none; }
  table.tt thead th.col-fp { background: var(--blue); }
  table.tt thead th.col-pfa { background: var(--brand); }
  table.tt thead th.col-pfp { background: #1f7a52; }
  table.tt thead th.col-txt { background: transparent; color: var(--text); font-size: .82rem; border-bottom: 1px solid var(--line); }
  table.tt tbody td { font-weight: 600; color: var(--muted); }
  table.tt tbody td.good { color: #1f8a4c; font-weight: 700; }
  table.tt tbody td.na { color: var(--muted-2); font-style: italic; }
  table.tt tbody th { font-weight: 600; color: var(--text); width: 28%; }
  table.tt tbody tr:nth-child(even) td, table.tt tbody tr:nth-child(even) th { background: var(--surface-2); }
  table.tt tbody tr:last-child td, table.tt tbody tr:last-child th { border-bottom: none; }
  .tnote { font-size: .8rem; color: var(--muted); margin-top: 1rem; line-height: 1.55; max-width: 90ch; }
  @media (max-width: 600px) { .tbl-wrap { overflow-x: auto; } table.tt { min-width: 560px; } }

  /* ── Certs ── */
  .certs { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.8rem; }
  .cbadge { font-family: var(--font-head); font-weight: 800; font-size: .82rem; letter-spacing: .03em; border: 1.5px solid var(--teal); color: var(--teal); border-radius: 8px; padding: .6em 1em; background: var(--surface); }
  .conform-grid { display: grid; grid-template-columns: 1fr; gap: .7rem 2rem; margin-top: 2.2rem; }
  @media (min-width: 720px) { .conform-grid { grid-template-columns: 1fr 1fr; } }
  .conform-grid p { padding-left: 1.7rem; position: relative; font-size: .92rem; color: var(--text); line-height: 1.5; }
  .conform-grid p::before { content: "✓"; position: absolute; left: 0; top: 0; color: #1f8a4c; font-weight: 800; }

  /* ── Uw table ── */
  table.tt.uwtable tbody td:not(:first-child)::after { content: " Uw"; font-size: .6em; font-weight: 700; color: var(--muted-2); vertical-align: .35em; margin-left: 2px; }
  table.tt.uwtable tbody td.best { color: #1f8a4c; }
  table.tt thead th.spanhead { background: var(--teal-700); font-size: .8rem; border-bottom: 1px solid rgba(255,255,255,.18); text-align: center; }
  table.tt tbody td { text-align: center; }
  table.tt tbody th, table.tt tbody td:first-child { text-align: left; }
  table.tt .grp th { background: #eef3f4; color: var(--teal-700); font-family: var(--font-head); font-weight: 800; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }

  /* ── FAQ ── */
  .faq-list { display: grid; gap: .5rem; margin-top: 2rem; max-width: 860px; margin-inline: auto; }
  .faq-item { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
  .faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem; font-weight: 700; cursor: pointer; font-size: 1rem; list-style: none; }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item .pm { width: 22px; height: 22px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; flex: none; font-size: 1.1rem; }
  .faq-item[open] .pm { background: var(--accent-050); color: var(--accent-700); }
  .faq-a { padding: 0 1.4rem 1.2rem; font-size: .95rem; color: var(--muted); line-height: 1.65; }
  .faq-tag { font-family: var(--font-head); font-weight: 800; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; padding: .25em .6em; border-radius: 4px; margin-right: .4rem; vertical-align: middle; }
  .faq-tag.fa { background: #e3f0f2; color: var(--teal); }
  .faq-tag.fp { background: #e3ecfb; color: var(--blue); }
  .faq-tag.pfa { background: #fce8e3; color: var(--brand-700); }
  .faq-tag.pfp { background: #e4f3ea; color: #1f7a52; }
  .faq-tag.alu { background: #e3f0f2; color: var(--teal); }
  .faq-tag.both { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }