/* Ma sélection, à la même échelle (inc/selection-echelle.php, maquette 4C validée le 02/10). /ma-selection/ only. */
@media (min-width: 1100px) { .selection .selection__cartes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.4rem 1.4rem; } }
.sech { margin: 2.8rem calc(-1 * var(--gutter)) 2.4rem; padding: 2.6rem var(--gutter) 2.2rem; background: var(--platre); }
.sech__tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: 0.8rem 3rem; align-items: end; margin-bottom: 1.4rem; }
.sech__sur { margin: 0; font: 600 var(--t-xs)/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bleu); }
.sech h2 { margin: 0.3rem 0 0; font: 400 clamp(2rem, 1.4rem + 2.6vw, 3.6rem)/0.98 var(--serif); letter-spacing: -0.02em; }
.sech__tete p:last-child { margin: 0; font-size: var(--t-sm); color: var(--feutre); }
.sech__regle { position: sticky; top: 64px; z-index: 5; padding-block: 0.35rem; background: var(--platre); border-bottom: 1px solid var(--platre-2); }
.sech__regle svg { display: block; height: 28px; overflow: visible; }
.sech__regle line { stroke: var(--anthracite); stroke-width: 1; }
.sech__regle text { font: 600 10px var(--sans); fill: var(--feutre); }
.sech__groupe { padding-top: 1.5rem; }
.sech__groupe[hidden] { display: none; }
.sech__gt { margin: 0 0 0.6rem; font: 600 var(--t-xs)/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--feutre); }
.sech__gt span { margin-left: 0.35rem; color: var(--bleu); }
.sech__rangee { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.8rem 2.2rem; }
.sech__sil { all: unset; position: relative; display: grid; justify-items: center; gap: 0.25rem; width: calc(var(--w) * var(--k) * 1px); cursor: pointer; }
.sech__sil svg { display: block; box-sizing: content-box; width: calc(var(--w) * var(--k) * 1px); height: calc((var(--h) + 4) * var(--k) * 1px); overflow: visible; padding-inline: 6px; margin-inline: -6px; border-bottom: 2px solid var(--anthracite); }
.sech__sil .d, .sech__sil .a { fill: #cbc7bd; stroke: var(--anthracite); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.sech__sil .s { fill: #ddd9cf; stroke: var(--anthracite); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.sech__sil .p { fill: var(--anthracite); }
.sech__sil .j { stroke: var(--anthracite); stroke-width: 0.8; vector-effect: non-scaling-stroke; opacity: 0.45; }
.sech__sil .r { fill: var(--moutarde); }
.sech__sil:hover .d, .sech__sil:hover .a { fill: #bdb8ac; }
.sech__sil[aria-pressed="true"] .d, .sech__sil[aria-pressed="true"] .a { fill: var(--moutarde); }
.sech__sil[aria-pressed="true"] .s { fill: #ecd28e; }
.sech__sil:focus-visible { outline: 3px solid var(--moutarde); outline-offset: 4px; }
.sech__cote { display: flex; align-items: center; gap: 0.25rem; width: 100%; margin-top: 0.45rem; font: 600 0.74rem var(--sans); color: var(--bleu); font-variant-numeric: tabular-nums; }
.sech__cote i { position: relative; flex: 1; height: 1px; background: var(--bleu); }
.sech__cote i:first-child::before, .sech__cote i:last-child::after { content: ""; position: absolute; top: -4px; width: 1px; height: 9px; background: var(--bleu); }
.sech__cote i:first-child::before { left: 0; } .sech__cote i:last-child::after { right: 0; }
.sech__nom { width: max(100%, 5.5rem); overflow: hidden; font: 500 0.86rem/1.15 var(--serif); text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.sech__legende { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin: 1.5rem 0 0; font-size: var(--t-xs); color: var(--feutre); }
.sech__legende i { display: inline-block; width: 0.9rem; height: 0.7rem; margin-right: 0.35rem; vertical-align: -1px; border: 1px solid var(--anthracite); border-radius: 2px; }
@media (max-width: 860px) {
  .sech__tete { grid-template-columns: minmax(0, 1fr); }
  .sech__regle { top: 56px; }
  .sech__rangee { flex-wrap: nowrap; overflow-x: auto; gap: 1.4rem; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 0.8rem; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .sech__sil { flex: none; scroll-snap-align: start; }
  .sech__nom { font-size: 0.74rem; }
}
@media print { .sech { display: none; } }