/* Essai de nouveau design (page /fr/frontwings-test/) : chargé après site.css, seulement sur cette page (body.v2).
   Fond doux, cartes blanches arrondies et ombrées, couleur d'accent « eau », typographie plus grande, onglets en pilules. */
body.v2 {
  --v2-bg: #f4f6f9;
  --v2-card: #ffffff;
  --v2-ink: #0f172a;
  --v2-muted: #64748b;
  --v2-line: #e6eaf0;
  --v2-accent: #0b7fab;
  --v2-accent-soft: color-mix(in srgb, var(--v2-accent) 10%, #fff);
  --v2-radius: 18px;
  --v2-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 28px rgba(15, 23, 42, .07);
  --v2-a: #2f7de1; --v2-b: #d1501c; --v2-c: #2e9d5b;
  background: var(--v2-bg);
  color: var(--v2-ink);
  font-feature-settings: "ss01", "cv11";
}
body.v2 a { color: var(--v2-accent); }

/* ---------- en-tête : verre dépoli, sections et onglets en pilules ; logo, nom et langue restent visibles en haut ---------- */
body.v2 .site-header { position: sticky; top: 0; z-index: 51; background: rgba(244, 246, 249, .94); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); }
body.v2 .top-nav { top: 64px; }
html:has(body.v2) { scroll-padding-top: 11rem; }
body.v2 .site-header { border: 0; }
body.v2 .header-inner { min-height: 64px; }
body.v2 .brand { font-weight: 800; letter-spacing: -.02em; font-size: 1.05rem; }
body.v2 .brand-mark { color: var(--v2-accent); }
body.v2 .lang-switch { border: 1px solid var(--v2-line); border-radius: 999px; background: var(--v2-card); padding: .35rem .9rem; }
body.v2 .top-nav { background: rgba(244, 246, 249, .94); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid rgba(15, 23, 42, .06); padding: .5rem 0; }
body.v2 .sections-bar, body.v2 .tabs-bar { background: transparent; border: 0; }
body.v2 .sections { display: flex; gap: .35rem; padding: 0; flex-wrap: wrap; }
body.v2 .sections a.section { color: var(--v2-muted); background: transparent; border-radius: 999px; padding: .4rem .9rem; font-size: .78rem; letter-spacing: .06em; border: 0; }
body.v2 .sections a.section:hover { background: rgba(15, 23, 42, .05); text-decoration: none; }
body.v2 .sections a.section.is-active { background: var(--v2-ink); color: #fff; box-shadow: none; } /* sans le soulignement blanc de l'ancien design : pilule centrée */
body.v2 .tabs { display: flex; gap: .25rem; margin-top: .35rem; padding: 0; flex-wrap: wrap; }
body.v2 .tabs a.tab { border-radius: 999px; padding: .45rem 1rem; color: var(--v2-ink); font-weight: 600; font-size: .92rem; border: 0; margin: 0; }
body.v2 .tabs a.tab:hover { background: rgba(15, 23, 42, .05); text-decoration: none; }
body.v2 .tabs a.tab.is-active { background: var(--v2-accent-soft); color: var(--v2-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v2-accent) 18%, transparent); }
body.v2 .tabs a.tab.is-active::after, body.v2 .sections a.section.is-active::after { display: none; }

/* ---------- titre ---------- */
body.v2 .section-tight { padding: clamp(2rem, 5vw, 3.5rem) 0 1.5rem; }
body.v2 .eyebrow { display: inline-block; background: var(--v2-accent-soft); color: var(--v2-accent); border-radius: 999px; padding: .3rem .8rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; margin-bottom: 1rem; }
body.v2 h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; color: var(--v2-ink); margin-bottom: .6rem;
  background: linear-gradient(100deg, var(--v2-ink) 40%, var(--v2-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding-bottom: .12em; /* sans cette marge, le dégradé coupe le bas des lettres à jambage (le g de FrontWings) */ }
body.v2 .lead { font-size: 1.12rem; color: var(--v2-muted); max-width: 60ch; line-height: 1.6; }

/* ---------- cartes ---------- */
body.v2 .panel, body.v2 .table-scroll, body.v2 .chart, body.v2 .legend-box {
  background: var(--v2-card); border: 1px solid rgba(15, 23, 42, .05); border-radius: var(--v2-radius); box-shadow: var(--v2-shadow);
}

/* filtres Année / Budget : barre d'outils */
body.v2 .pick-filters { background: var(--v2-card); border-radius: 999px; box-shadow: var(--v2-shadow); padding: .55rem 1.25rem; margin-bottom: 1.25rem; align-items: center; gap: 1.5rem; }
body.v2 .year-filter { font-weight: 600; font-size: .88rem; color: var(--v2-muted); }

/* sélecteurs */
body.v2 select { appearance: none; -webkit-appearance: none; border: 1px solid var(--v2-line); border-radius: 12px; background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .9rem center;
  padding: .6rem 2.2rem .6rem .85rem; font-weight: 600; color: var(--v2-ink); min-height: 44px; transition: border-color .15s, box-shadow .15s; }
body.v2 select:hover { border-color: #cfd8e3; }
body.v2 select:focus { outline: none; border-color: var(--v2-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--v2-accent) 14%, transparent); }
body.v2 .panel select { background-color: #f8fafc; }

/* cartes des ailes A / B / C : pastille de couleur (celle du graphique) */
body.v2 .wing-pick { position: relative; padding: 1.4rem 1.25rem 1.25rem; gap: .8rem; }
body.v2 .wing-pick::before { content: attr(data-wing); position: absolute; top: -12px; left: 1.25rem; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: .78rem; font-weight: 800; text-transform: uppercase; color: #fff; background: var(--v2-a); box-shadow: 0 0 0 4px var(--v2-bg); }
body.v2 .wing-pick[data-wing="b"]::before { background: var(--v2-b); }
body.v2 .wing-pick[data-wing="c"]::before { background: var(--v2-c); }
body.v2 .wing-pick label { font-size: .78rem; font-weight: 600; color: var(--v2-muted); text-transform: none; letter-spacing: 0; }
body.v2 .product-photo { border: 0; border-radius: 14px; background: radial-gradient(120% 90% at 50% 30%, #ffffff, #eef2f7); overflow: hidden; }
body.v2 .product-photo img { mix-blend-mode: multiply; transition: transform .35s ease; }
body.v2 .product-photo:hover img { transform: scale(1.04); }
body.v2 .year-badge { background: rgba(15, 23, 42, .85); backdrop-filter: blur(6px); border-radius: 999px; font-weight: 700; }
body.v2 .source { font-size: .78rem; color: var(--v2-muted); }
body.v2 .setup-link { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; font-size: .88rem; border-radius: 999px; padding: .45rem .9rem; background: var(--v2-accent-soft); justify-self: start; }
body.v2 .setup-link:hover { text-decoration: none; background: color-mix(in srgb, var(--v2-accent) 18%, #fff); }

/* ---------- tableau ---------- */
body.v2 .comparator .table-scroll { margin-top: 1.75rem; overflow-x: auto; }
body.v2 .lift-table { font-variant-numeric: tabular-nums; width: 100%; }
body.v2 .lift-table th, body.v2 .lift-table td { border-bottom: 1px solid #f0f3f7; padding: .8rem 1.1rem; }
body.v2 .lift-table thead th, body.v2 .compare-table th[scope="col"] { background: var(--v2-card); font-size: .95rem; font-weight: 800; letter-spacing: -.01em; border-bottom: 1px solid var(--v2-line); }
body.v2 #head-a { box-shadow: inset 0 -3px 0 var(--v2-a); }
body.v2 #head-b { box-shadow: inset 0 -3px 0 var(--v2-b); }
body.v2 #head-c { box-shadow: inset 0 -3px 0 var(--v2-c); }
body.v2 .lift-table tbody th { font-weight: 500; color: #334155; background: transparent; }
body.v2 .lift-table td.num { font-family: inherit; font-weight: 600; }
body.v2 .lift-table tbody tr:hover { background: #f8fafc; }
body.v2 .compare-table tr.is-key { background: linear-gradient(90deg, var(--v2-accent-soft), color-mix(in srgb, var(--v2-accent) 3%, #fff)); }
body.v2 .compare-table tr.is-key th { color: var(--v2-ink); font-weight: 700; }
body.v2 .compare-table tr.is-key td.num { color: var(--v2-ink); font-weight: 800; }
body.v2 .lift-table .sub { color: var(--v2-muted); font-weight: 500; }
body.v2 .rows-row th { background: #fafbfd; font-weight: 600; }
body.v2 .price-link { font-weight: 800; }

/* ---------- curseur du poids ---------- */
body.v2 .sliders-row { padding: .9rem 1.4rem; margin-top: 1.25rem; }
body.v2 .slider output { font-family: inherit; font-weight: 800; font-size: 1.05rem; color: var(--v2-accent); }
body.v2 .slider input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--v2-accent) var(--fill), var(--v2-line) var(--fill)); }
body.v2 .slider input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -8px; background: #fff; border: 0; box-shadow: 0 0 0 2px var(--v2-accent), 0 4px 10px color-mix(in srgb, var(--v2-accent) 35%, transparent); }
body.v2 .slider input[type="range"]::-moz-range-progress { background: var(--v2-accent); height: 6px; }
body.v2 .slider input[type="range"]::-moz-range-thumb { background: #fff; border: 0; box-shadow: 0 0 0 2px var(--v2-accent); }
body.v2 .dual-range::before { background: linear-gradient(to right, var(--v2-line) var(--lo), var(--v2-accent) var(--lo), var(--v2-accent) var(--hi), var(--v2-line) var(--hi)); }
body.v2 .dual-range input[type="range"]::-webkit-slider-thumb { background: #fff; border: 0; box-shadow: 0 0 0 2px var(--v2-accent), 0 3px 8px color-mix(in srgb, var(--v2-accent) 30%, transparent); }

/* ---------- graphique ---------- */
body.v2 .chart { padding: 1.5rem; margin-top: 1.25rem; }
body.v2 .chart figcaption strong { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
body.v2 .chart-wrap { border: 0; border-radius: 14px; background: linear-gradient(180deg, #fbfcfe, #fff); box-shadow: inset 0 0 0 1px var(--v2-line); }
body.v2 .chart-grid { stroke: #e8edf3; }
body.v2 .chart-line { stroke-width: 2.6; stroke-linecap: round; }
body.v2 .segmented { border: 0; background: #eef2f7; padding: 3px; border-radius: 999px; }
body.v2 .seg { border-radius: 999px; padding: .4rem .95rem; color: var(--v2-muted); }
body.v2 .seg.is-on { background: var(--v2-card); color: var(--v2-ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
body.v2 #chart-wings .seg.is-on[data-wing="a"] { color: var(--v2-a); }
body.v2 #chart-wings .seg.is-on[data-wing="b"] { color: var(--v2-b); }
body.v2 #chart-wings .seg.is-on[data-wing="c"] { color: var(--v2-c); }
body.v2 .chart-tip { border-radius: 12px; border: 0; box-shadow: 0 10px 30px rgba(15, 23, 42, .16); }

/* ---------- accordéons et pied de page ---------- */
body.v2 .legend-box { padding: 1rem 1.4rem; }
body.v2 .legend-box summary { font-weight: 700; }
body.v2 .list-link, body.v2 main > p:last-child a { font-weight: 700; }
body.v2 .site-footer { background: transparent; border-top: 1px solid var(--v2-line); }

@media (max-width: 640px) {
  body.v2 .pick-filters { border-radius: var(--v2-radius); }
  body.v2 .lift-table th, body.v2 .lift-table td { padding: .65rem .6rem; }
  body.v2 .lift-table thead th { font-size: .85rem; }
  /* sans la colonne C, la mise en page fixe garde une colonne vide (en-tête « Sélection » sur 4 colonnes) */
  body.v2 .compare-table { table-layout: auto; }
  body.v2 h1 { font-size: 2rem; }
}

/* éléments masqués par le script : le style d'affichage ci-dessus ne doit pas les faire réapparaître */
body.v2 .setup-link[hidden], body.v2 .product-photo[hidden] { display: none; }
body.v2 .budget-head output { font-family: inherit; font-weight: 700; color: var(--v2-accent); }
body.v2 .chart-weight { stroke: var(--v2-ink); stroke-width: 1.5; }

/* ---------- tableaux des fiches et des listes (spec-table) : même style que le comparateur ---------- */
body.v2 .spec-table { background: var(--v2-card); font-variant-numeric: tabular-nums; }
body.v2 .spec-table th, body.v2 .spec-table td { border-bottom: 1px solid #f0f3f7; padding: .7rem 1rem; }
body.v2 .spec-table td.num { font-family: inherit; font-weight: 600; font-size: .93rem; }
body.v2 .spec-table thead th { background: var(--v2-card); font-weight: 800; color: var(--v2-ink); border-bottom: 1px solid var(--v2-line); }
body.v2 .spec-table tbody tr:hover { background: #f8fafc; }
body.v2 .spec-table th[scope="row"] { color: #334155; }
body.v2 :not(.table-scroll) > .spec-table { border-radius: var(--v2-radius); box-shadow: var(--v2-shadow); overflow: hidden; }
body.v2 .table-scroll:has(> .spec-table) { overflow-x: auto; }
body.v2 .list-table th button::after { color: #94a3b8; }

/* ---------- Setup : boutons des pièces ---------- */
body.v2 .part-btn { border: 1px solid var(--v2-line); border-radius: 12px; background: #f8fafc; padding: .5rem .75rem; transition: border-color .15s, box-shadow .15s, background .15s; }
body.v2 .part-btn:hover { border-color: #cfd8e3; background: #fff; }
body.v2 .part-btn.is-current { background: #fff; border-color: var(--v2-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v2-accent) 14%, transparent); }
body.v2 .part-btn .part-name { color: var(--v2-accent); }
body.v2 .setup-diagram .part.is-current, body.v2 .setup-diagram .part:hover { fill: var(--v2-accent); }

/* fil d'Ariane et liens de bas de page */
body.v2 .breadcrumb, body.v2 nav.crumbs { font-size: .85rem; }

/* téléphone : en-tête sur une ligne (logo, nom, pastilles, langue), sections et onglets entiers sans défilement */
@media (max-width: 640px) {
  body.v2 .header-inner { min-height: 52px; flex-wrap: nowrap; gap: .5rem; }
  body.v2 .brand { font-size: .9rem; gap: .35rem; white-space: nowrap; flex-shrink: 0; }
  body.v2 .brand-mark { width: 24px; height: 24px; flex-shrink: 0; }
  body.v2 .nav { flex-wrap: nowrap; gap: .45rem; flex-shrink: 0; }
  body.v2 .lang-switch { padding: .3rem .65rem; font-size: .8rem; }
  body.v2 .top-nav { top: 52px; padding: .35rem 0 .45rem; }
  body.v2 .sections, body.v2 .tabs { flex-wrap: wrap; justify-content: space-between; gap: 0; overflow: visible; }
  body.v2 .sections a.section { padding: .38rem .42rem; font-size: .64rem; letter-spacing: 0; flex: 0 0 auto; }
  body.v2 .tabs a.tab { padding: .4rem .55rem; font-size: .85rem; flex: 0 0 auto; text-align: center; }
}
@media (max-width: 380px) {
  body.v2 .brand span { font-size: .88rem; }
  body.v2 .sections a.section { padding: .34rem .3rem; font-size: .6rem; }
  body.v2 .tabs a.tab { padding: .38rem .42rem; font-size: .8rem; }
}

/* ---------- couleur du site au choix (pastilles à gauche de la langue ; accent.js, html[data-accent]) ---------- */
html[data-accent="lagon"] body.v2 { --v2-accent: #0f8b7f; }
html[data-accent="corail"] body.v2 { --v2-accent: #e0532a; }
html[data-accent="violet"] body.v2 { --v2-accent: #6d4ed8; }
html[data-accent="framboise"] body.v2 { --v2-accent: #c8305e; }
body.v2 .nav { gap: .9rem; }
body.v2 .accent-picker { display: flex; gap: .65rem; align-items: center; }
body.v2 .accent-dot { width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 0; cursor: pointer; background: var(--dot);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(15, 23, 42, .12); transition: transform .15s; }
body.v2 .accent-dot:hover { transform: scale(1.15); }
body.v2 .accent-dot[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--dot); }
body.v2 .accent-dot:focus-visible { outline: 2px solid var(--v2-ink); outline-offset: 3px; }
@media (max-width: 640px) { body.v2 .accent-dot { width: 18px; height: 18px; } body.v2 .accent-picker { gap: .45rem; padding: 4px 4px; } }
@media (max-width: 380px) { body.v2 .accent-dot { width: 15px; height: 15px; } body.v2 .accent-picker { gap: .35rem; } }