/* ==========================================================================
   Pages pergolas v2 (proposition 2026-10-01) : hub + Classique.
   Composants : visualiseur 3D avec ombres, bassin sous la pluie, planche des
   dessins au trait, trajet de l'eau, liste typographique « en commun »,
   nuancier pleine largeur, index des projets commerciaux.
   Jetons et motifs : css/styles.css (row__head, h, lede, frame, text-link).
   ========================================================================== */

/* ---------- Scène WebGL (3D et bassin) ---------- */
.pv2-stage { position: relative; height: clamp(420px, 52vw, 760px); background: #ebe8e3; margin-top: clamp(32px, 4vw, 56px); }
.pv2-stage canvas { display: block; width: 100% !important; height: 100% !important; }
.pv2-stage__note { position: absolute; right: 16px; bottom: 14px; z-index: 2; margin: 0; padding: 4px 8px; background: rgba(243, 241, 236, 0.88); border-radius: 2px; font-family: var(--sl-font-mono); font-size: 10.5px; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-color-ink); pointer-events: none; }
.pv2-stage__hint { position: absolute; left: 20px; bottom: 16px; font-family: var(--sl-font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-color-ink-55); pointer-events: none; }
.pv2-controls { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sl-gap); row-gap: 22px; align-items: center; margin-top: 24px; }
.pv2-open { grid-column: 1 / 7; display: flex; align-items: center; gap: 16px; }
.pv2-lab { font-family: var(--sl-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-color-ink-55); white-space: nowrap; }
.pv2-open input { flex: 1; accent-color: var(--sl-color-secondary); height: 28px; }
.pv2-play { grid-column: 7 / 9; justify-self: start; background: none; border: 0; padding: 0; cursor: pointer; }
.pv2-swatches { grid-column: 9 / 13; display: flex; gap: 12px; justify-content: flex-end; align-items: center; }
.pv2-sw { width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px var(--sl-color-ink-12); transition: transform 200ms var(--sl-ease); }
.pv2-sw:hover { transform: scale(1.08); }
.pv2-sw[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--sl-color-ink-12), 0 0 0 2px var(--sl-color-cream), 0 0 0 3px var(--sl-color-secondary); }
.pv2-colorname { font-family: var(--sl-font-serif); font-style: italic; font-size: 22px; margin-left: 8px; min-width: 3.4em; }
.pv2-models { display: flex; gap: 26px; margin-top: clamp(24px, 3vw, 36px); }
.pv2-models button { background: none; border: 0; padding: 0 0 6px; cursor: pointer; font-family: var(--sl-font-sans); font-size: clamp(20px, 1.8vw, 26px); color: var(--sl-color-ink-55); border-bottom: 1px solid transparent; transition: color 200ms var(--sl-ease), border-color 200ms var(--sl-ease); }
.pv2-models button[aria-pressed="true"] { color: var(--sl-color-primary); border-bottom-color: var(--sl-color-secondary); }

/* ---------- Planche des dessins au trait ---------- */
.pv2-tabs { display: inline-flex; gap: 0; border: 1px solid var(--sl-color-ink-20); margin-top: clamp(28px, 3vw, 40px); }
.pv2-tabs button { background: none; border: 0; border-right: 1px solid var(--sl-color-ink-20); padding: 10px 18px; cursor: pointer; font-family: var(--sl-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-color-ink-70); }
.pv2-tabs button:last-child { border-right: 0; }
.pv2-tabs button[aria-pressed="true"] { background: var(--sl-color-primary); color: var(--sl-color-white); }
.pv2-planche__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sl-gap); row-gap: 28px; margin-top: 24px; align-items: end; }
.pv2-planche__coupe { grid-column: 1 / 8; margin: 0; }
.pv2-planche__iso { grid-column: 8 / 13; margin: 0; }
.pv2-fig img { display: block; width: 100%; height: auto; background: var(--sl-color-cream); }
.pv2-fig figcaption, .pv2-cap { margin-top: 12px; font-family: var(--sl-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-color-ink-55); }

/* ---------- Trajet de l'eau ---------- */
.pv2-eau__fig { margin: clamp(32px, 4vw, 48px) 0 0; }
.pv2-eau__box { position: relative; background: var(--sl-color-cream); }
.pv2-eau__box img { display: block; width: 100%; height: auto; }
.pv2-eau__box svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }

/* ---------- En commun : liste typographique (variante C) ---------- */
.pv2-commun { align-items: start; }
.pv2-commun__head { grid-column: 1 / 5; position: sticky; top: 140px; }
.pv2-commun__list { grid-column: 6 / 13; list-style: none; margin: 0; padding: 0; }
.pv2-commun__list li { padding: clamp(20px, 2vw, 30px) 0; border-top: 1px solid var(--sl-color-ink-12); }
.pv2-commun__list li:last-child { border-bottom: 1px solid var(--sl-color-ink-12); }
.pv2-commun__s { font-family: var(--sl-font-sans); font-weight: 400; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.2; }
.pv2-commun__s strong { font-weight: 700; }
.pv2-commun__d { margin-top: 8px; max-width: 52ch; font-size: 17px; font-weight: 300; line-height: 1.7; color: var(--sl-color-ink-70); }

/* ---------- Couleurs : nuancier pleine largeur (variante A) ---------- */
.pv2-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sl-gap); }
.pv2-chip { display: block; width: 100%; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.pv2-chip__c { display: block; aspect-ratio: 3 / 4; transition: transform 320ms var(--sl-ease); }
.pv2-chip:hover .pv2-chip__c { transform: translateY(-6px); }
.pv2-chip__c--light { box-shadow: inset 0 0 0 1px var(--sl-color-ink-12); }
.pv2-chip__n { display: block; margin-top: 14px; font-family: var(--sl-font-serif); font-style: italic; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; color: var(--sl-color-primary); }
.pv2-chips__note { margin-top: clamp(28px, 3vw, 40px); font-family: var(--sl-font-mono); font-size: 11.5px; letter-spacing: 0.08em; color: var(--sl-color-ink-55); }

/* ---------- Projets commerciaux : index + aperçu (variante A) ---------- */
.pv2-vindex { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sl-gap); align-items: center; }
.pv2-vindex__list { grid-column: 1 / 8; list-style: none; margin: 0; padding: 0; }
.pv2-vindex__row { display: flex; align-items: baseline; gap: 18px; padding: clamp(14px, 1.6vw, 22px) 0; border-top: 1px solid var(--sl-color-ink-12); }
.pv2-vindex__list li:last-child .pv2-vindex__row { border-bottom: 1px solid var(--sl-color-ink-12); }
.pv2-vindex__pre { font-family: var(--sl-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-color-ink-55); min-width: 11ch; }
.pv2-vindex__name { font-family: var(--sl-font-serif); font-style: italic; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.15; transition: color 220ms var(--sl-ease), transform 320ms var(--sl-ease); }
.pv2-vindex__arrow { margin-left: auto; font-family: var(--sl-font-mono); font-size: 15px; color: var(--sl-color-secondary); opacity: 0; transform: translateX(-8px); transition: opacity 220ms var(--sl-ease), transform 320ms var(--sl-ease); }
.pv2-vindex__row.is-active .pv2-vindex__name { color: var(--sl-color-secondary); transform: translateX(8px); }
.pv2-vindex__row.is-active .pv2-vindex__arrow { opacity: 1; transform: none; }
.pv2-vindex__preview { grid-column: 9 / 13; }
.pv2-vindex__preview img { opacity: 0; transform: scale(1.06); transition: opacity 560ms var(--sl-ease), transform 900ms var(--sl-ease); }
.pv2-vindex__preview img.is-active { opacity: 1; transform: scale(1); }
.pv2-vindex__cap { margin-top: 12px; font-family: var(--sl-font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--sl-color-ink-55); }

/* ---------- Galerie : lien vers les projets commerciaux ---------- */
.pv2-more { margin-top: clamp(28px, 3vw, 40px); }

/* ---------- Responsive ---------- */
@media (max-width: 1050px) {
  .pv2-open, .pv2-play, .pv2-swatches { grid-column: 1 / -1; justify-self: start; }
  .pv2-swatches { justify-content: flex-start; flex-wrap: wrap; }
  .pv2-stage { height: clamp(360px, 100vw, 600px); }
  .pv2-planche__coupe, .pv2-planche__iso { grid-column: 1 / -1; }
  .pv2-commun__head, .pv2-commun__list, .pv2-vindex__list { grid-column: 1 / -1; }
  .pv2-commun__head { position: static; margin-bottom: 28px; }
  .pv2-vindex__preview { display: none; }
  .pv2-vindex__arrow { opacity: 1; transform: none; }
  .pv2-vindex__go { display: none; }
  .pv2-vindex__row.is-active .pv2-vindex__name { transform: none; }
}
@media (max-width: 720px) {
  .pv2-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
  .pv2-vindex__pre { display: none; }
  .pv2-tabs button { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pv2-chip__c, .pv2-vindex__name, .pv2-vindex__preview img { transition: none; }
}

/* ==========================================================================
   Alignement typographique sur /refonte-soumission/ (mesuré 2026-10-01) :
   - texte courant : futura 17 / 300 / 1,7, encre 70 %       (= .lede)
   - texte secondaire : futura 15,5 / 400 / 1,65, encre 70 %  (= réponses FAQ)
   - libellé de liste : futura 17 / 400, encre               (= « Ce qui vous attend »)
   Pas de gras dans le texte courant (le gras est réservé à la 1re proposition des titres).
   ========================================================================== */
.pg-apps__t,
.crosssection__name,
.pg-features__t { font-family: var(--sl-font-sans); font-size: 17px; font-weight: 400; line-height: 1.5; color: var(--sl-color-primary); }
.pg-apps__d,
.crosssection__caption,
.pg-fit__list li,
.pg-compareslot__legend li { font-size: 15.5px; font-weight: 400; line-height: 1.65; color: var(--sl-color-ink-70); }
/* Tableau comparatif : base reprise de pergolas.css (v1), que les pages v2 ne chargent pas.
   Sans elle, le tableau s'affichait brut (centré, sans filets, colonnes collées). 2026-10-07 */
.pg-comparetable { width: 100%; border-collapse: collapse; margin-top: clamp(32px, 4vw, 56px); }
.pg-comparetable th, .pg-comparetable td { text-align: left; vertical-align: top; padding: 16px 24px 16px 0; border-bottom: 1px solid var(--sl-color-ink-12); }
.pg-comparetable thead th { font-family: var(--sl-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sl-color-ink-55); padding-bottom: 14px; border-bottom: 1px solid var(--sl-color-ink-20); }
.pg-comparetable tbody th { width: 22%; }
.pg-comparetable td { width: 39%; }
.pg-comparetable td { font-size: 15.5px; font-weight: 400; line-height: 1.65; color: var(--sl-color-ink-70); padding-block: 16px; }
.pg-comparetable tbody th { font-family: var(--sl-font-sans); font-size: 17px; font-weight: 400; color: var(--sl-color-primary); padding-block: 16px; }

/* ==========================================================================
   Vue + commandes toujours visibles ensemble (proprio 2026-10-01).
   Ordinateur : commandes dans une colonne à droite de la vue.
   Tablette / téléphone : la vue se dimensionne pour que vue + commandes
   tiennent dans l'écran sous l'en-tête.
   ========================================================================== */
.pv2-viz { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 22vw, 300px); column-gap: var(--sl-gap); margin-top: clamp(32px, 4vw, 56px); align-items: stretch; }
.pv2-viz .pv2-stage { margin-top: 0; height: min(calc(100svh - var(--sl-header-h, 88px) - 48px), clamp(420px, 46vw, 720px)); }
.pv2-panel { display: flex; flex-direction: column; justify-content: center; gap: 14px; margin-top: 0; padding: 28px 0 28px 8px; border-top: 1px solid var(--sl-color-ink-12); border-bottom: 1px solid var(--sl-color-ink-12); }
.pv2-panel__t { font-family: var(--sl-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-color-ink-55); }
.pv2-panel__t + .pv2-open, .pv2-panel__t + .pv2-swatches { margin-top: -4px; }
.pv2-panel .pv2-open { gap: 10px; }
.pv2-panel .pv2-play { margin: 4px 0 18px; }
.pv2-panel .pv2-swatches { justify-content: flex-start; flex-wrap: wrap; gap: 10px; }
.pv2-panel .pv2-colorname { flex-basis: 100%; margin: 6px 0 0; }
@media (max-width: 1050px) {
  .pv2-viz { grid-template-columns: 1fr; }
  .pv2-viz .pv2-stage { height: calc(100svh - var(--sl-header-h, 88px) - 200px); min-height: 300px; }
  .pv2-panel { padding: 16px 0 0; border: 0; gap: 10px; }
  .pv2-panel__t { display: none; }
  .pv2-panel .pv2-play { margin: 0; }
  .pv2-panel .pv2-colorname { flex-basis: auto; margin: 0 0 0 6px; }
}
.pv2-panel { text-align: left; align-items: stretch; }
.pv2-panel .pv2-play { align-self: flex-start; justify-self: auto; }
@media (max-width: 1050px) {
  /* en-tête 88 + panneau ~140 + barre fixe du bas ~76 + marges */
  .pv2-viz .pv2-stage { height: calc(100svh - var(--sl-header-h, 88px) - 290px); min-height: 280px; }
}

/* ==========================================================================
   Compositions asymétriques (proprio 2026-10-01 : « same beaten path »)
   Vocabulaire de l'accueil : colonne collante (.intro__text), quinconce
   (.projets__col--offset), titre/texte posés sur la ligne du bas (.row--classique).
   ========================================================================== */
/* Colonne collante + scène */
.pv2-split { align-items: start; row-gap: 32px; }
.pv2-split__side { grid-column: 1 / 5; position: sticky; top: calc(var(--sl-header-h, 88px) + 32px); padding-right: clamp(0px, 2vw, 24px); }
.pv2-split__main { grid-column: 5 / 13; }
.pv2-split--right .pv2-split__side { grid-column: 9 / 13; grid-row: 1; padding-right: 0; padding-left: clamp(0px, 2vw, 24px); }
.pv2-split--right .pv2-split__main { grid-column: 1 / 9; grid-row: 1; }
.pv2-split__side .lede { margin-top: 20px; }
.pv2-split__side .pv2-panel { margin-top: 36px; padding: 24px 0 0; border: 0; border-top: 1px solid var(--sl-color-ink-12); justify-content: flex-start; }
.pv2-stage--tall { margin-top: 0; height: calc(100svh - var(--sl-header-h, 88px) - 64px); min-height: 480px; max-height: 860px; }
.pv2-split__side .pv2-tabs { margin-top: 32px; }

/* Planche animée : coupe large, vue d'ensemble plus étroite, en retrait et décalée */
.pv2-planche2__coupe { margin: 0; }
.pv2-planche2__iso { margin: clamp(32px, 4vw, 56px) 0 0 auto; width: 72%; }

/* Points forts en quinconce */
.pv2-pts { list-style: none; margin: 0; padding: 0; row-gap: clamp(40px, 5vw, 72px); align-items: start; }
.pv2-pts__i { grid-column: span 5; border-top: 1px solid var(--sl-color-ink-12); padding-top: 22px; }
.pv2-pts__i:nth-child(odd) { grid-column: 1 / 6; }
.pv2-pts__i:nth-child(even) { grid-column: 7 / 12; margin-top: clamp(64px, 8vw, 120px); }
.pv2-pts__n { display: block; font-family: var(--sl-font-serif); font-style: italic; font-size: clamp(40px, 4vw, 56px); line-height: 1; color: var(--sl-color-secondary); margin-bottom: 14px; }
.pv2-pts__t { font-family: var(--sl-font-sans); font-size: clamp(21px, 1.8vw, 26px); font-weight: 400; line-height: 1.25; color: var(--sl-color-primary); }
.pv2-pts__d { margin-top: 10px; font-size: 17px; font-weight: 300; line-height: 1.7; color: var(--sl-color-ink-70); max-width: 44ch; }

/* Vent : grand chiffre à gauche, texte posé sur la ligne du bas à droite */
.pv2-wind { align-items: end; }
.pv2-wind__fig { grid-column: 1 / 8; font-family: var(--sl-font-sans); font-weight: 700; font-size: clamp(56px, 6vw, 96px); line-height: 0.9; letter-spacing: -0.01em; color: var(--sl-color-primary); }
.pv2-wind__fig em { display: block; font-family: var(--sl-font-serif); font-style: italic; font-weight: 400; font-size: clamp(160px, 20vw, 320px); line-height: 0.8; letter-spacing: -0.02em; color: var(--sl-color-secondary); }
.pv2-wind__text { grid-column: 8 / 13; padding-bottom: 8px; }
.pv2-wind__text .lede { margin-top: 16px; }
.pv2-wind__more { margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--sl-color-ink-12); }

/* Trajet de l'eau : intro à gauche, coupe à droite, élévation décalée dessous */
.pv2-eau2 { margin-top: clamp(80px, 9vw, 140px); align-items: end; row-gap: clamp(32px, 4vw, 56px); }
.pv2-eau2__intro { grid-column: 1 / 5; grid-row: 1; }
.pv2-eau2__intro .lede { margin-top: 16px; }
.pv2-eau2__coupe { grid-column: 5 / 13; grid-row: 1; margin: 0; }
.pv2-eau2__elev { grid-column: 1 / 10; grid-row: 2; margin: 0; }

@media (max-width: 1050px) {
  .pv2-split { grid-template-columns: 1fr; }
  .pv2-split__side { display: contents; }
  .pv2-split__side > * { order: 1; }
  .pv2-split__main { order: 2; grid-column: 1 / -1; }
  .pv2-split--right .pv2-split__main { grid-row: auto; }
  .pv2-split__side > .pv2-panel, .pv2-split__side > .pv2-tabs { order: 3; margin-top: 0; }
  .pv2-split__side > .pv2-panel { border-top: 0; padding-top: 0; }
  .pv2-stage--tall { height: calc(100svh - var(--sl-header-h, 88px) - 290px); min-height: 280px; }
  .pv2-planche2__iso { width: 100%; }
  .pv2-pts__i:nth-child(odd), .pv2-pts__i:nth-child(even) { grid-column: 1 / -1; margin-top: 0; }
  .pv2-wind__fig, .pv2-wind__text { grid-column: 1 / -1; }
  .pv2-wind__text { margin-top: 32px; }
  .pv2-eau2__intro, .pv2-eau2__coupe, .pv2-eau2__elev { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 1050px) {
  .pv2-split > *, .pv2-split__side > *,
  .pv2-split .pv2-split__main, .pv2-split--right .pv2-split__main { grid-column: 1 / -1; grid-row: auto; min-width: 0; }
}

/* ==========================================================================
   Retours 2026-10-01 (après-midi) : couleurs dans la 3D, vent animé,
   applications en index, galerie mixte décalée, l'autre modèle en photo.
   ========================================================================== */
.pv2-panel__note { font-size: 15.5px; font-weight: 400; line-height: 1.65; color: var(--sl-color-ink-70); margin-top: -6px; }

/* Points forts sans numéros : un filet taupe court au-dessus de chaque titre */
.pv2-pts__i { border-top: 0; padding-top: 0; }
.pv2-pts__i::before { content: ""; display: block; width: 48px; height: 1px; background: var(--sl-color-secondary); margin-bottom: 20px; }

/* Vent : dessin au trait immobile, filets de vent qui le contournent, chiffre qui monte */
.pv2-wind__stage { grid-column: 1 / 8; position: relative; }
.pv2-wind__drawing { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.pv2-wind__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pv2-wind__stage .pv2-wind__fig { position: absolute; left: 0; bottom: 0; margin: 0; }
.pv2-wind__fig em { font-variant-numeric: tabular-nums; }

/* Applications : nom + description visible sur mobile seulement (l'aperçu y est masqué) */
.pv2-vindex--apps .pv2-vindex__row { cursor: default; display: block; }
.pv2-vindex__desc { display: none; }
.pv2-vindex--apps .pv2-vindex__cap { font-family: var(--sl-font-sans); font-size: 15.5px; letter-spacing: 0; line-height: 1.65; color: var(--sl-color-ink-70); max-width: 40ch; }

/* Galerie décalée : grande + haute, puis haute + grande, puis deux moyennes */
.pv2-gal { row-gap: clamp(48px, 6vw, 88px); align-items: start; }
.pv2-gal__i { margin: 0; }
.pv2-gal__i figcaption { margin-top: 12px; font-family: var(--sl-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sl-color-ink-55); }
.pv2-gal__i--a { grid-column: 1 / 9; }
.pv2-gal__i--b { grid-column: 9 / 13; margin-top: clamp(80px, 10vw, 160px); }
.pv2-gal__i--c { grid-column: 1 / 5; }
.pv2-gal__i--d { grid-column: 6 / 13; margin-top: clamp(96px, 12vw, 200px); }
.pv2-gal__i--e { grid-column: 2 / 7; }
.pv2-gal__i--f { grid-column: 8 / 12; margin-top: clamp(48px, 6vw, 96px); }
.pv2-more { margin-top: clamp(40px, 5vw, 64px); }

/* L'autre modèle : texte posé sur la ligne du bas à gauche, photo à droite */
.pv2-other { align-items: end; }
.pv2-other__text { grid-column: 1 / 5; padding-bottom: 8px; }
.pv2-other__q { font-family: var(--sl-font-serif); font-style: italic; font-size: clamp(22px, 2vw, 28px); line-height: 1.3; color: var(--sl-color-ink-70); margin-bottom: 20px; }
.pv2-other__media { grid-column: 6 / 13; display: block; }

@media (max-width: 1050px) {
  .pv2-wind__stage { grid-column: 1 / -1; }
  .pv2-vindex__desc { display: block; margin-top: 6px; font-family: var(--sl-font-sans); font-size: 15.5px; line-height: 1.65; color: var(--sl-color-ink-70); }
  .pv2-gal__i--a, .pv2-gal__i--b, .pv2-gal__i--c, .pv2-gal__i--d, .pv2-gal__i--e, .pv2-gal__i--f { grid-column: 1 / -1; margin-top: 0; }
  .pv2-other__text, .pv2-other__media { grid-column: 1 / -1; }
  .pv2-other__media { order: -1; margin-bottom: 28px; }
}

/* Vent, v2 : dessin détouré à droite, chiffre en bas à gauche, filets qui contournent */
.pv2-wind__stage { min-height: clamp(380px, 38vw, 560px); }
.pv2-wind__drawing { position: absolute; right: 0; top: 4%; width: 68%; mix-blend-mode: normal; }
.pv2-wind__stage .pv2-wind__fig { z-index: 2; }
@media (max-width: 1050px) { .pv2-wind__drawing { width: 80%; } .pv2-wind__stage { min-height: 360px; } }
.pv2-wind__drawing { width: 60%; top: 2%; } @media (max-width: 1050px) { .pv2-wind__drawing { width: 72%; } }
.pv2-planche2__iso { width: 86%; margin-top: clamp(40px, 5vw, 72px); } @media (max-width: 1050px) { .pv2-planche2__iso { width: 100%; } }

/* Ce qui la distingue : grande phrase, mots révélés au défilement (ReactBits Scroll Reveal) */
.pv2-reveal { padding-block: clamp(24px, 4vw, 64px); }
.pv2-reveal__k { grid-column: 1 / 4; padding-top: 0.5em; }
.pv2-reveal__p { grid-column: 4 / 13; font-family: var(--sl-font-sans); font-weight: 400; font-size: clamp(30px, 3.4vw, 54px); line-height: 1.22; letter-spacing: -0.01em; color: var(--sl-color-primary); }
.pv2-reveal__p strong { font-weight: 700; }
.pv2-reveal__p .w { opacity: 0.14; filter: blur(3px); transition: opacity 260ms linear, filter 260ms linear; }
.pv2-reveal__p .w.is-on { opacity: 1; filter: none; }
@media (max-width: 1050px) { .pv2-reveal__k, .pv2-reveal__p { grid-column: 1 / -1; } .pv2-reveal__k { margin-bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .pv2-reveal__p .w { opacity: 1; filter: none; transition: none; } }

/* Lames intégrées : gouttière -> colonne -> gargouille. Coin de la pergola à gauche,
   gros plan de la gargouille décalé à droite, aligné en bas (composition asymétrique). */
.pv2-garg { margin-top: clamp(64px, 7vw, 112px); align-items: end; row-gap: clamp(32px, 4vw, 56px); }
.pv2-garg__corner { grid-column: 1 / 6; margin: 0; }
.pv2-garg__zoom { grid-column: 7 / 13; margin: 0 0 clamp(24px, 4vw, 72px); }
@media (max-width: 1050px) {
  .pv2-garg__corner, .pv2-garg__zoom { grid-column: 1 / -1; margin: 0; }
}

/* Hub v2 : onglets de modèle dans la colonne de commandes */
.pv2-panel .pv2-models { margin: 10px 0 22px; justify-content: flex-start; }

/* Hub v2 : les deux modèles en dessin au trait, toit fermé, décalés (asymétrique) */
.pv2-duo { margin-top: clamp(40px, 5vw, 72px); align-items: start; row-gap: 32px; }
.pv2-duo figure { margin: 0; }
.pv2-duo img { display: block; width: 100%; height: auto; }
.pv2-duo__a { grid-column: 1 / 7; }
.pv2-duo__b { grid-column: 7 / 13; margin-top: clamp(48px, 8vw, 120px) !important; }
.pv2-duo + .pg-comparetable { margin-top: clamp(48px, 6vw, 88px); }
@media (max-width: 720px) {
  .pv2-duo__a, .pv2-duo__b { grid-column: 1 / -1; margin-top: 0 !important; }
}

/* Hub v2 : deux liens empilés sous l'étanchéité */
.pv2-links { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 28px; }

/* Index des applications : modèle concerné, discret, à côté du nom */
.pv2-vindex__tag { font-family: var(--sl-font-mono, "IBM Plex Mono", monospace); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sl-color-taupe, #946955); margin-left: 12px; align-self: center; }

/* Tableau comparatif : jamais plus large que l'écran sur mobile (il était rogné de quelques px) */
@media (max-width: 720px) {
  .pg-comparetable { table-layout: fixed; width: 100%; }
  .pg-comparetable th, .pg-comparetable td { overflow-wrap: break-word; hyphens: manual; padding-left: 0; padding-right: 12px; }
  .pg-comparetable tbody th { width: 28%; }
  .pg-comparetable td { width: auto; }
}

/* Hub v2 « choix » : deux modèles côte à côte (structure de la page live), le second
   décalé vers le bas. Image = dessin au trait (lames ouvertes à 67°, même caméra pour les
   deux modèles). Survol : travelling avant vers le coin du toit, là où se lit la différence
   (zone dans data-zone, transform calculé par pergolas-v2.js). Écran tactile : le même
   travelling suit le défilement (classe --scrub). Décision du proprio, 2026-10-07. */
.pv2-choice { align-items: start; row-gap: clamp(56px, 7vw, 96px); }
.pv2-choice__i { grid-column: span 6; }
.pv2-choice__i--b { margin-top: clamp(64px, 9vw, 140px); }
.pv2-choice__media { position: relative; display: block; overflow: hidden; margin-bottom: clamp(24px, 2.6vw, 36px); background: var(--sl-color-cream); }
/* .pv2-choice__media en tête : plus fort que .frame img (scale 1.28 du site) ; frame--still sort la carte de la parallaxe d'app.js */
.pv2-choice__media .pv2-choice__trait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: none; transform-origin: 0 0; will-change: transform; transition: transform 1100ms cubic-bezier(.22, .61, .36, 1); }
@media (hover: hover) and (pointer: fine) {
  .pv2-choice__i:hover .pv2-choice__media .pv2-choice__trait, .pv2-choice__i:focus-within .pv2-choice__media .pv2-choice__trait { transform: var(--zoom, none); }
}
.pv2-choice--scrub .pv2-choice__media .pv2-choice__trait { transition: none; }
@media (prefers-reduced-motion: reduce) { .pv2-choice__media .pv2-choice__trait { transition: none; } }
.pv2-choice__i .h { margin-top: 10px; }
.pv2-choice__i .lede { margin-top: 16px; max-width: 46ch; }
.pv2-choice__i .links { margin-top: 22px; }
@media (max-width: 1050px) {
  .pv2-choice__i { grid-column: 1 / -1; }
  .pv2-choice__i--b { margin-top: 0; }
}

/* Hub v2 : fin de page, titre à gauche, texte et bouton à droite */
.pv2-hubend { align-items: end; row-gap: 24px; }
.pv2-hubend .h { grid-column: 1 / 7; }
.pv2-hubend__t { grid-column: 8 / 13; }
.pv2-hubend__t .links { margin-top: 24px; }
@media (max-width: 1050px) { .pv2-hubend .h, .pv2-hubend__t { grid-column: 1 / -1; } }
/* le dessin ne suit pas l'agrandissement de parallaxe des photos : il reste entier */
.frame .pv2-choice__drawing { transform: none !important; object-fit: contain; }

/* ==========================================================================
   En coupe : défilement piloté (scroll scrub) + inclinaison en direct
   La section est haute ; le bloc .pv2-scrub__pin colle sous l'en-tête et
   occupe un écran ; le défilement fait pivoter les lames (pergolas-v2.js).
   ========================================================================== */
.pv2-scrub { height: 300svh; padding-block: 0; }
.pv2-scrub__pin { position: sticky; top: var(--sl-header-h, 88px); height: calc(100svh - var(--sl-header-h, 88px)); display: flex; align-items: center; overflow: hidden; }
.pv2-scrub__pin > .wrap { width: 100%; }
.pv2-split--scrub { align-items: center; }
.pv2-split--scrub .pv2-split__side { position: static; }
.pv2-split--scrub .pv2-planche2 { display: flex; flex-direction: column; }
.pv2-split--scrub .pv2-planche2 figure { margin: 0; }
.pv2-split--scrub .pv2-planche2 img { display: block; width: auto; max-width: 100%; height: auto; }
.pv2-split--scrub .pv2-planche2__coupe img { max-height: 32svh; }
.pv2-split--scrub .pv2-planche2__iso { width: auto; align-self: flex-end; margin: clamp(12px, 2.4svh, 32px) 0 0; }
.pv2-split--scrub .pv2-planche2__iso img { max-height: calc(100svh - var(--sl-header-h, 88px) - 32svh - 150px); }

.pv2-angle { margin-top: clamp(28px, 4svh, 48px); }
.pv2-angle__k { font-family: var(--sl-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sl-color-ink-55); }
.pv2-angle__v { margin-top: 6px; font-family: var(--sl-font-serif); font-size: clamp(56px, 6.4vw, 104px); line-height: 1; color: var(--sl-color-taupe, #946955); font-variant-numeric: tabular-nums; }
.pv2-angle__v em { font-style: italic; }
.pv2-angle__scale { position: relative; height: 28px; margin-top: 18px; max-width: 320px; }
.pv2-angle__bar { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--sl-color-ink-20); }
.pv2-angle__bar i { position: absolute; inset: 0; background: var(--sl-color-taupe, #946955); transform-origin: left center; transform: scaleX(0); height: 2px; top: -0.5px; }
.pv2-angle__t { position: absolute; top: 10px; transform: translateX(-50%); font-family: var(--sl-font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sl-color-ink-55); white-space: nowrap; }
.pv2-angle__t--start { transform: none; }
.pv2-angle__deg { font-family: var(--sl-font-sans); font-style: normal; font-weight: 300; font-size: .42em; vertical-align: .95em; margin-left: .04em; }
.pv2-angle__t--end { transform: translateX(-100%); }
.pv2-angle__hint { margin-top: 14px; font-size: 13.5px; color: var(--sl-color-ink-55); transition: opacity 400ms var(--sl-ease); }
.pv2-scrub.is-open .pv2-angle__hint { opacity: 0; }

@media (max-width: 1050px) {
  .pv2-scrub { height: 260svh; }
  .pv2-split--scrub { grid-template-columns: 1fr; row-gap: 14px; align-content: center; }
  .pv2-split--scrub .pv2-split__side { display: block; grid-column: 1 / -1; }
  .pv2-split--scrub .pv2-split__side .lede { display: none; }
  .pv2-split--scrub .pv2-planche2 { grid-column: 1 / -1; order: 2; }
  .pv2-split--scrub .h { font-size: clamp(26px, 7vw, 34px); }
  .pv2-angle { margin-top: 12px; display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: end; }
  .pv2-angle__k { grid-column: 1 / -1; }
  .pv2-angle__v { font-size: 52px; }
  .pv2-angle__scale { margin-top: 0; margin-bottom: 8px; }
  .pv2-angle__hint { display: none; }
  .pv2-split--scrub .pv2-planche2__coupe img { max-height: 15svh; }
  .pv2-split--scrub .pv2-planche2__iso { margin-top: 10px; }
  .pv2-split--scrub .pv2-planche2__iso img { max-height: 34svh; }
  .pv2-split--scrub figcaption { display: none; }
}

/* Planche technique (2026-10-02) : cadre fin, deux cases A / B, dessins centrés.
   Remplace la disposition libre jugée « random » pour un contenu technique. */
.pv2-split--scrub .pv2-planche2 { display: grid; grid-template-rows: auto auto; border: 1px solid var(--sl-color-ink-20); background: transparent; }
.pv2-split--scrub .pv2-planche2 figure { display: flex; flex-direction: column; align-items: center; width: auto; margin: 0; padding: clamp(14px, 2svh, 22px) clamp(16px, 2vw, 28px); align-self: stretch; }
.pv2-split--scrub .pv2-planche2__coupe { border-bottom: 1px solid var(--sl-color-ink-20); }
.pv2-split--scrub .pv2-planche2 figcaption { order: -1; align-self: flex-start; margin: 0 0 clamp(8px, 1.4svh, 14px); font-family: var(--sl-font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sl-color-ink-55); display: block !important; }
.pv2-split--scrub .pv2-planche2 figcaption b { font-weight: 400; color: var(--sl-color-taupe, #946955); margin-right: .8em; }
.pv2-split--scrub .pv2-planche2 img { margin: 0 auto; }
.pv2-split--scrub .pv2-planche2__coupe img { width: 100%; max-height: 24svh; object-fit: contain; }
.pv2-split--scrub .pv2-planche2__iso img { max-height: calc(100svh - var(--sl-header-h, 88px) - 24svh - 190px); }

@media (max-width: 1050px) {
  .pv2-split--scrub { justify-items: center; text-align: center; }
  .pv2-split--scrub .pv2-split__side { text-align: center; padding: 0; }
  .pv2-split--scrub .pv2-angle { display: block; margin: 10px auto 0; max-width: 320px; }
  .pv2-split--scrub .pv2-angle__v { font-size: 48px; }
  .pv2-split--scrub .pv2-angle__scale { margin: 12px auto 4px; width: 100%; }
  .pv2-split--scrub .pv2-planche2 { width: 100%; }
  .pv2-split--scrub .pv2-planche2 figure { padding: 10px 12px; }
  .pv2-split--scrub .pv2-planche2 figcaption { font-size: 9.5px; margin-bottom: 6px; }
  .pv2-split--scrub .pv2-planche2__coupe img { max-height: 13svh; }
  .pv2-split--scrub .pv2-planche2__iso img { max-height: 27svh; }
}
/* ° à hauteur du chiffre (pas en exposant flottant) */
.pv2-angle__deg { vertical-align: .55em; }
/* Mobile : la barre d'appel fixe (.mobile-cta, 65 px) ne doit pas couvrir la planche */
@media (max-width: 1050px) {
  .pv2-scrub__pin { align-items: flex-start; padding: 14px 0 calc(65px + 14px); }
  .pv2-split--scrub .pv2-planche2__iso img { max-height: 23svh; }
}

/* Ordinateur : la planche occupe toute la hauteur de l'écran épinglé, quelle que
   soit la hauteur de la fenêtre ; chaque dessin s'ajuste dans sa case (jamais rogné). */
@media (min-width: 1051px) {
  .pv2-scrub__pin > .wrap { height: 100%; padding-block: clamp(16px, 3svh, 36px); box-sizing: border-box; }
  .pv2-split--scrub { height: 100%; align-items: center; }
  .pv2-split--scrub .pv2-planche2 { height: 100%; align-self: stretch; grid-template-rows: minmax(0, 3fr) minmax(0, 7fr); }
  .pv2-split--scrub .pv2-planche2 figure { min-height: 0; }
  .pv2-split--scrub .pv2-planche2 img,
  .pv2-split--scrub .pv2-planche2__coupe img,
  .pv2-split--scrub .pv2-planche2__iso img { flex: 1 1 0; min-height: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; }
}

/* ==========================================================================
   Chargement des scènes 3D (src/loading.ts) : image fixe de la même vue qui
   respire, libellé + barre qui suivent le téléchargement, fondu vers la 3D.
   ========================================================================== */
.pv2-3d__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: opacity 700ms var(--sl-ease); }
.pv2-3d.is-loading .pv2-3d__poster { animation: pv2-respire 1.6s ease-in-out infinite alternate; }
@keyframes pv2-respire { from { opacity: .42; } to { opacity: .72; } }
.pv2-3d__canvas { opacity: 0; transition: opacity 700ms var(--sl-ease); }
.pv2-3d.is-ready .pv2-3d__canvas { opacity: 1; }
.pv2-3d.is-ready .pv2-3d__poster { opacity: 0; animation: none; }
.pv2-3d__load { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; grid-template-columns: auto auto; column-gap: 14px; row-gap: 10px; align-items: center; padding: 16px 20px; background: rgba(243, 241, 238, .86); font-family: var(--sl-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sl-color-ink-70); transition: opacity 500ms var(--sl-ease); pointer-events: none; }
.pv2-3d__label { grid-column: 1 / -1; }
.pv2-3d__bar { position: relative; width: clamp(120px, 14vw, 180px); height: 1px; background: var(--sl-color-ink-20); }
.pv2-3d__bar i { position: absolute; left: 0; right: 0; top: -0.5px; height: 2px; background: var(--sl-color-taupe, #946955); transform-origin: left center; transform: scaleX(0); transition: transform 220ms linear; }
.pv2-3d__pct { font-variant-numeric: tabular-nums; min-width: 4.5ch; text-align: right; }
.pv2-3d.is-ready .pv2-3d__load { opacity: 0; }
.pv2-3d.is-loading .pv2-stage__hint { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .pv2-3d.is-loading .pv2-3d__poster { animation: none; opacity: .6; } }
/* image d'attente servie dans le HTML (chargée avec la page) */
.pv2-stage > picture.pv2-3d__poster { position: absolute; inset: 0; display: block; }
picture.pv2-3d__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv2-stage:not(.pv2-3d) > picture.pv2-3d__poster { opacity: .55; }
.pv2-3d__load { white-space: nowrap; }
@media (max-width: 720px) { .pv2-3d__load { padding: 12px 14px; font-size: 10px; column-gap: 10px; } .pv2-3d__bar { width: 110px; } }