/* Cadre et libellés du plan coté (ceux de la planche gamme V de l'accueil) */
.pane{background:#fff;border:1px solid var(--line);padding:clamp(20px,3vw,34px)}
.pv-lab{font-family:var(--ui);font-weight:700;font-size:.72rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--blue-d)}
.pv-lab span{display:block;margin-top:5px;font-size:.83rem;letter-spacing:0;
  text-transform:none;font-weight:500;font-family:var(--tx);color:var(--mute)}
.pv-o{fill:var(--wash);stroke:var(--blue);stroke-width:1.6}
.pv-i{stroke:#8AB6D0;stroke-width:1}
.pv-ax{stroke:#A9C7DA;stroke-width:1;stroke-dasharray:7 5}
.pv-d{stroke:var(--navy);stroke-width:1}
.pv-u{fill:none;stroke:var(--sky);stroke-width:1.2;stroke-dasharray:6 4}
.pv-sol{stroke:var(--navy);stroke-width:2.4}
.pv-h{fill:var(--navy)}
.pv-s{fill:var(--navy);font-family:var(--tx);font-size:13px;font-weight:600}
.pv-nom{fill:var(--navy);font-family:var(--ui);font-weight:800;font-size:22px;letter-spacing:-.02em}
.pv-sub{fill:var(--mute);font-family:var(--tx);font-size:14px}
.pv-c{fill:var(--navy);font-family:var(--tx);font-size:14px;font-weight:500}

/* dimensions */
.dm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,3vw,44px);align-items:end}
.dm__f{display:grid;gap:14px;min-width:0}
.dm__f + .dm__f{border-left:1px solid var(--line-s);padding-left:clamp(22px,3vw,44px)}
.dm svg{width:100%;height:auto;display:block}
.pv-t{fill:var(--mute);font-family:var(--tx);font-size:13px}
.sp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);
  grid-auto-flow:column;column-gap:clamp(24px,4vw,64px);margin-top:30px;
  border-top:2px solid var(--navy)}
.sp div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:14px 0;border-bottom:1px solid var(--line)}
.sp dt{font-size:.95rem;color:var(--body)}
.sp dd{font-family:var(--ui);font-weight:800;color:var(--navy);font-size:1.02rem;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* Une seule vue, ou un plan fourni en image */
.dm--1{grid-template-columns:minmax(0,1fr)}
.dm--1 svg{max-width:640px}
.dm__i img{display:block;max-width:100%;height:auto;margin-inline:auto}
/* La liste se range en deux colonnes égales, quel que soit le nombre de lignes (la maquette en compte huit) */
.sp--1{grid-template-rows:repeat(1,auto)} .sp--2{grid-template-rows:repeat(2,auto)} .sp--3{grid-template-rows:repeat(3,auto)}
.sp--5{grid-template-rows:repeat(5,auto)} .sp--6{grid-template-rows:repeat(6,auto)} .sp--7{grid-template-rows:repeat(7,auto)}
.sp--8{grid-template-rows:repeat(8,auto)} .sp--9{grid-template-rows:repeat(9,auto)} .sp--10{grid-template-rows:repeat(10,auto)}
.sp--seul{margin-top:0}
.sp dd{white-space:normal;text-align:right}
.sp dt small{display:block;font-size:.83rem;color:var(--mute)}

/* la gamme, du plus court au plus long */
.rg{margin-top:clamp(34px,4vw,52px)}
.rg__h{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;
  margin-bottom:16px}
.rg__h h3{font-size:1.16rem}
.rg__l{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);list-style:none}
.rg__l li{display:grid}
.rg__l a,.rg__l span.rg__c{display:flex;flex-direction:column;gap:4px;height:100%;
  padding:20px 20px 22px;background:#fff;transition:background .16s}
.rg__l a:hover{background:var(--wash);text-decoration:none}
.rg__n{font-family:var(--ui);font-weight:800;font-size:1.5rem;letter-spacing:-.03em;
  color:var(--navy);line-height:1}
.rg__s{font-family:var(--ui);font-weight:700;font-size:.95rem;color:var(--blue-d);
  font-variant-numeric:tabular-nums;margin-top:6px}
.rg__d{font-size:.83rem;color:var(--mute);font-variant-numeric:tabular-nums}
.rg__b{display:block;height:8px;background:var(--steel2);margin-top:auto}
.rg__d{margin-bottom:16px}
.rg__b i{display:block;height:100%;background:var(--sky)}
.rg__l span.rg__c{background:var(--blue)}
.rg__c .rg__n,.rg__c .rg__s{color:#fff}
.rg__c .rg__d{color:#CFE6F4}
.rg__c .rg__b{background:rgba(255,255,255,.22)}
.rg__c .rg__b i{background:#fff}
.rg__k{font-family:var(--ui);font-weight:800;font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:#CFE6F4;margin-bottom:6px}

/* Barre proportionnelle : un SVG dont la largeur est un attribut (la CSP interdit l'attribut style) */
.rg__b svg{display:block}
.rg__b rect{fill:var(--sky)}
.rg__c .rg__b rect{fill:#fff}
.rg__l--2{grid-template-columns:repeat(2,minmax(0,1fr))} .rg__l--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rg__l--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){
  .dm{grid-template-columns:minmax(0,1fr)}
  .dm__f + .dm__f{border-left:0;padding-left:0;padding-top:26px;border-top:1px solid var(--line-s)}
  .dm__f svg{max-width:520px}
  .dm .pv-c{font-size:17px} .dm .pv-s{font-size:16px} .dm .pv-t{font-size:16px}
  .dm .pv-sub{font-size:17px} .dm .pv-nom{font-size:26px}
}
@media (max-width:860px){
  .rg__l{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rg__l li:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:700px){
  .sp{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
}
@media (max-width:560px){
  .dm .pv-c{font-size:22px} .dm .pv-s{font-size:20px} .dm .pv-t{font-size:19px}
  .dm .pv-sub{font-size:21px} .dm .pv-nom{font-size:32px}
}