<div class="tabs">
      <div class="tab-list">
        <input type="radio" name="lab-tabs" id="tab-markup" checked="">
        <label for="tab-markup">Markup</label>
        <input type="radio" name="lab-tabs" id="tab-css">
        <label for="tab-css">CSS</label>
        <input type="radio" name="lab-tabs" id="tab-fallback">
        <label for="tab-fallback">Fallback</label>
      </div>
      <div class="panel panel-markup">
        <p>Radios in a group, labels beside them, panels as siblings. The URL does not change. If you need a shareable tab, use <code>:target</code> and one heading per fragment instead.</p>
      </div>
      <div class="panel panel-css">
        <p>The rule is one line of intent: when this id is checked, show that panel. Everything else is border paint so the selected label reads as a tab.</p>
      </div>
      <div class="panel panel-fallback">
        <p>Without <code>:has()</code> every panel would show. That engine is gone from the current Baseline set. If you must support a crawler without CSS, keep the same words in the document order so they still read top to bottom.</p>
      </div>
    </div>

// CSS
.tabs:has(#tab-css:checked) .panel-css {
  display: block;
}

# Requiert une rêgle css par tab...