/*
 * Volets (D161) — accordéon / onglets en haut / onglets à gauche. Feuille front du
 * module, chargée sur toutes les pages et dans le canvas de l'éditeur (mêmes règles).
 *
 * Mode par vue : attributs `data-kwk-volets-mode[-tablette|-mobile]` sur la racine, lus
 * ici avec les seuils de D50 (tablette ≤ 768px, mobile ≤ 576px). Chaque mode ne pose
 * que des variables privées `--_m-*` (bloc répété à l'identique pour chaque vue) ; les
 * règles de rendu, écrites une seule fois, les consomment. `--kwk-volets-mode` expose
 * le mode courant aux scripts (front, éditeur).
 *
 * Onglets : la racine devient une grille, les éléments s'effacent (`display: contents`)
 * et titres / contenus sont placés directement — la barre d'onglets n'existe pas dans
 * le HTML. Tous les contenus occupent la même case (hauteur = le plus haut) ; seul
 * l'actif est visible.
 *
 * État ouvert : classe `kwk-volets-ouvert` quand un script pilote la racine
 * (`kwk-volets-pret`) ; sinon (sans JS) l'attribut `data-kwk-ouvert` — en onglets, le
 * premier élément marqué, ou le premier tout court si aucun ne l'est.
 *
 * Style : variables `--kwk-volets-*` posées par le panneau sur la racine
 * (`_dev/src/ui/voletsProps.ts`), communes aux deux modes autant que possible.
 */

/* ── Mode par vue ────────────────────────────────────────────────────────── */

.kwk-volets {
  --kwk-volets-mode: accordeon;
  --_m-acc: 1;
  --_m-haut: 0;
  --_m-gauche: 0;
  --_m-disp: flex;
  --_m-item: block;
  --_m-cols: none;
  --_m-rows: none;
  --_m-t-ligne: auto;
  --_m-t-col: auto;
  --_m-c-ligne: auto;
  --_m-c-col: auto;
  --_m-avant: none;
  --_m-ferme: none;
  --_m-suiv-vis: visible;
  --_m-prem-vis: hidden;
  --_n: 1;
  --_al-a: 0px;
  --_al-t: auto;
  --_al-b: 1fr;
}

.kwk-volets[data-kwk-volets-mode="haut"] {
  --kwk-volets-mode: haut;
  --_m-acc: 0;
  --_m-haut: 1;
  --_m-gauche: 0;
  --_m-disp: grid;
  --_m-item: contents;
  --_m-cols: var(--_al-a) repeat(var(--_n), var(--_al-t)) var(--_al-b);
  --_m-rows: auto auto;
  --_m-t-ligne: 1;
  --_m-t-col: auto;
  --_m-c-ligne: 2;
  --_m-c-col: 1 / -1;
  --_m-avant: block;
  --_m-ferme: block;
  --_m-suiv-vis: hidden;
  --_m-prem-vis: visible;
}
.kwk-volets[data-kwk-volets-mode="gauche"] {
  --kwk-volets-mode: gauche;
  --_m-acc: 0;
  --_m-haut: 0;
  --_m-gauche: 1;
  --_m-disp: grid;
  --_m-item: contents;
  --_m-cols: var(--kwk-volets-colonne-largeur, 30%) minmax(0, 1fr);
  --_m-rows: repeat(var(--_n), auto) 1fr;
  --_m-t-ligne: auto;
  --_m-t-col: 1;
  --_m-c-ligne: 1 / -1;
  --_m-c-col: 2;
  --_m-avant: none;
  --_m-ferme: block;
  --_m-suiv-vis: hidden;
  --_m-prem-vis: visible;
}
.kwk-volets[data-kwk-volets-alignement="centre"] { --_al-a: 1fr; --_al-t: auto; --_al-b: 1fr; }
.kwk-volets[data-kwk-volets-alignement="fin"] { --_al-a: 1fr; --_al-t: auto; --_al-b: 0px; }
.kwk-volets[data-kwk-volets-alignement="justifie"] { --_al-a: 0px; --_al-t: minmax(0, 1fr); --_al-b: 0px; }
.kwk-volets[data-kwk-volets-alignement="etire"] { --_al-a: 0px; --_al-t: auto; --_al-b: 0px; }

@media (max-width: 768px) {
  .kwk-volets[data-kwk-volets-mode-tablette="accordeon"] {
    --kwk-volets-mode: accordeon;
    --_m-acc: 1;
    --_m-haut: 0;
    --_m-gauche: 0;
    --_m-disp: flex;
    --_m-item: block;
    --_m-cols: none;
    --_m-rows: none;
    --_m-t-ligne: auto;
    --_m-t-col: auto;
    --_m-c-ligne: auto;
    --_m-c-col: auto;
    --_m-avant: none;
    --_m-ferme: none;
    --_m-suiv-vis: visible;
    --_m-prem-vis: hidden;
  }
  .kwk-volets[data-kwk-volets-mode-tablette="haut"] {
    --kwk-volets-mode: haut;
    --_m-acc: 0;
    --_m-haut: 1;
    --_m-gauche: 0;
    --_m-disp: grid;
    --_m-item: contents;
    --_m-cols: var(--_al-a) repeat(var(--_n), var(--_al-t)) var(--_al-b);
    --_m-rows: auto auto;
    --_m-t-ligne: 1;
    --_m-t-col: auto;
    --_m-c-ligne: 2;
    --_m-c-col: 1 / -1;
    --_m-avant: block;
    --_m-ferme: block;
    --_m-suiv-vis: hidden;
    --_m-prem-vis: visible;
  }
  .kwk-volets[data-kwk-volets-mode-tablette="gauche"] {
    --kwk-volets-mode: gauche;
    --_m-acc: 0;
    --_m-haut: 0;
    --_m-gauche: 1;
    --_m-disp: grid;
    --_m-item: contents;
    --_m-cols: var(--kwk-volets-colonne-largeur, 30%) minmax(0, 1fr);
    --_m-rows: repeat(var(--_n), auto) 1fr;
    --_m-t-ligne: auto;
    --_m-t-col: 1;
    --_m-c-ligne: 1 / -1;
    --_m-c-col: 2;
    --_m-avant: none;
    --_m-ferme: block;
    --_m-suiv-vis: hidden;
    --_m-prem-vis: visible;
  }
  .kwk-volets[data-kwk-volets-alignement-tablette="debut"] { --_al-a: 0px; --_al-t: auto; --_al-b: 1fr; }
  .kwk-volets[data-kwk-volets-alignement-tablette="centre"] { --_al-a: 1fr; --_al-t: auto; --_al-b: 1fr; }
  .kwk-volets[data-kwk-volets-alignement-tablette="fin"] { --_al-a: 1fr; --_al-t: auto; --_al-b: 0px; }
  .kwk-volets[data-kwk-volets-alignement-tablette="justifie"] { --_al-a: 0px; --_al-t: minmax(0, 1fr); --_al-b: 0px; }
  .kwk-volets[data-kwk-volets-alignement-tablette="etire"] { --_al-a: 0px; --_al-t: auto; --_al-b: 0px; }
}

@media (max-width: 576px) {
  .kwk-volets[data-kwk-volets-mode-mobile="accordeon"] {
    --kwk-volets-mode: accordeon;
    --_m-acc: 1;
    --_m-haut: 0;
    --_m-gauche: 0;
    --_m-disp: flex;
    --_m-item: block;
    --_m-cols: none;
    --_m-rows: none;
    --_m-t-ligne: auto;
    --_m-t-col: auto;
    --_m-c-ligne: auto;
    --_m-c-col: auto;
    --_m-avant: none;
    --_m-ferme: none;
    --_m-suiv-vis: visible;
    --_m-prem-vis: hidden;
  }
  .kwk-volets[data-kwk-volets-mode-mobile="haut"] {
    --kwk-volets-mode: haut;
    --_m-acc: 0;
    --_m-haut: 1;
    --_m-gauche: 0;
    --_m-disp: grid;
    --_m-item: contents;
    --_m-cols: var(--_al-a) repeat(var(--_n), var(--_al-t)) var(--_al-b);
    --_m-rows: auto auto;
    --_m-t-ligne: 1;
    --_m-t-col: auto;
    --_m-c-ligne: 2;
    --_m-c-col: 1 / -1;
    --_m-avant: block;
    --_m-ferme: block;
    --_m-suiv-vis: hidden;
    --_m-prem-vis: visible;
  }
  .kwk-volets[data-kwk-volets-mode-mobile="gauche"] {
    --kwk-volets-mode: gauche;
    --_m-acc: 0;
    --_m-haut: 0;
    --_m-gauche: 1;
    --_m-disp: grid;
    --_m-item: contents;
    --_m-cols: var(--kwk-volets-colonne-largeur, 30%) minmax(0, 1fr);
    --_m-rows: repeat(var(--_n), auto) 1fr;
    --_m-t-ligne: auto;
    --_m-t-col: 1;
    --_m-c-ligne: 1 / -1;
    --_m-c-col: 2;
    --_m-avant: none;
    --_m-ferme: block;
    --_m-suiv-vis: hidden;
    --_m-prem-vis: visible;
  }
  .kwk-volets[data-kwk-volets-alignement-mobile="debut"] { --_al-a: 0px; --_al-t: auto; --_al-b: 1fr; }
  .kwk-volets[data-kwk-volets-alignement-mobile="centre"] { --_al-a: 1fr; --_al-t: auto; --_al-b: 1fr; }
  .kwk-volets[data-kwk-volets-alignement-mobile="fin"] { --_al-a: 1fr; --_al-t: auto; --_al-b: 0px; }
  .kwk-volets[data-kwk-volets-alignement-mobile="justifie"] { --_al-a: 0px; --_al-t: minmax(0, 1fr); --_al-b: 0px; }
  .kwk-volets[data-kwk-volets-alignement-mobile="etire"] { --_al-a: 0px; --_al-t: auto; --_al-b: 0px; }
}

/* Transition entre onglets (le dépliage de l'accordéon est animé par le script). */
.kwk-volets[data-kwk-volets-transition="fondu"] { --_tr-d: .3s; --_tr-x: 0px; }
.kwk-volets[data-kwk-volets-transition="glissement"] { --_tr-d: .35s; --_tr-x: 1.5rem; }

/* Nombre d'éléments : pistes de la grille des onglets. */
.kwk-volets:has(> .kwk-volets-item:nth-child(2)) { --_n: 2; }
.kwk-volets:has(> .kwk-volets-item:nth-child(3)) { --_n: 3; }
.kwk-volets:has(> .kwk-volets-item:nth-child(4)) { --_n: 4; }
.kwk-volets:has(> .kwk-volets-item:nth-child(5)) { --_n: 5; }
.kwk-volets:has(> .kwk-volets-item:nth-child(6)) { --_n: 6; }
.kwk-volets:has(> .kwk-volets-item:nth-child(7)) { --_n: 7; }
.kwk-volets:has(> .kwk-volets-item:nth-child(8)) { --_n: 8; }
.kwk-volets:has(> .kwk-volets-item:nth-child(9)) { --_n: 9; }
.kwk-volets:has(> .kwk-volets-item:nth-child(10)) { --_n: 10; }
.kwk-volets:has(> .kwk-volets-item:nth-child(11)) { --_n: 11; }
.kwk-volets:has(> .kwk-volets-item:nth-child(12)) { --_n: 12; }
.kwk-volets:has(> .kwk-volets-item:nth-child(13)) { --_n: 13; }
.kwk-volets:has(> .kwk-volets-item:nth-child(14)) { --_n: 14; }
.kwk-volets:has(> .kwk-volets-item:nth-child(15)) { --_n: 15; }
.kwk-volets:has(> .kwk-volets-item:nth-child(16)) { --_n: 16; }
.kwk-volets:has(> .kwk-volets-item:nth-child(17)) { --_n: 17; }
.kwk-volets:has(> .kwk-volets-item:nth-child(18)) { --_n: 18; }
.kwk-volets:has(> .kwk-volets-item:nth-child(19)) { --_n: 19; }
.kwk-volets:has(> .kwk-volets-item:nth-child(20)) { --_n: 20; }
.kwk-volets:has(> .kwk-volets-item:nth-child(21)) { --_n: 21; }
.kwk-volets:has(> .kwk-volets-item:nth-child(22)) { --_n: 22; }
.kwk-volets:has(> .kwk-volets-item:nth-child(23)) { --_n: 23; }
.kwk-volets:has(> .kwk-volets-item:nth-child(24)) { --_n: 24; }
.kwk-volets:has(> .kwk-volets-item:nth-child(25)) { --_n: 25; }
.kwk-volets:has(> .kwk-volets-item:nth-child(26)) { --_n: 26; }
.kwk-volets:has(> .kwk-volets-item:nth-child(27)) { --_n: 27; }
.kwk-volets:has(> .kwk-volets-item:nth-child(28)) { --_n: 28; }
.kwk-volets:has(> .kwk-volets-item:nth-child(29)) { --_n: 29; }
.kwk-volets:has(> .kwk-volets-item:nth-child(30)) { --_n: 30; }

/* ── Racine ──────────────────────────────────────────────────────────────── */

.kwk-volets {
  display: var(--_m-disp);
  flex-direction: column;
  grid-template-columns: var(--_m-cols);
  grid-template-rows: var(--_m-rows);
  row-gap: calc(var(--_m-acc) * var(--kwk-volets-espace, 0px) + var(--_m-haut) * var(--kwk-volets-barre-ecart, 0px));
  column-gap: calc(var(--_m-gauche) * var(--kwk-volets-barre-ecart, 0px));
}

/* Onglets en haut : piste d'alignement avant les onglets (0 ou 1fr). */
.kwk-volets::before {
  content: "";
  display: var(--_m-avant);
  grid-row: 1;
}

/* ── Élément (accordéon ; s'efface en onglets) ───────────────────────────── */

.kwk-volets > .kwk-volets-item {
  display: var(--_m-item);
  margin: 0;
  border: var(--kwk-volets-bordure-largeur, 1px) solid var(--kwk-volets-bordure-couleur, var(--bs-border-color, #dee2e6));
  border-radius: var(--kwk-volets-arrondi, 0px);
  overflow: hidden;
}

/* Éléments collés (aucun espace) : bordures confondues. */
.kwk-volets > .kwk-volets-item + .kwk-volets-item {
  margin-top: min(0px, calc(var(--kwk-volets-espace, 0px) - var(--kwk-volets-bordure-largeur, 1px)));
}

/* ── Titre ───────────────────────────────────────────────────────────────── */

.kwk-volets > .kwk-volets-item > .kwk-volets-titre {
  /* Icône d'ouverture (accordéon seulement) : glyphe, pastille, place réservée. */
  --_vis: calc(var(--kwk-volets-icone-visible, 1) * var(--_m-acc));
  --_g: var(--kwk-volets-icone-g, 0);
  --_px: var(--kwk-volets-entete-padding-x, 1.25rem);
  --_py: var(--kwk-volets-entete-padding-y, 1rem);
  --_ic: calc(var(--kwk-volets-icone-taille, 1rem) * var(--_vis));
  --_pm: calc(var(--kwk-volets-pastille-marge, 0px) * var(--_vis));
  --_pb: calc(var(--kwk-volets-pastille-bordure-largeur, 0px) * var(--_vis));
  --_pt: calc(var(--_ic) + 2 * var(--_pm) + 2 * var(--_pb));
  --_zone: calc(var(--_pt) + var(--kwk-volets-icone-espace, .75rem) * var(--_vis));
  /* Bord gauche de la pastille : à gauche ou à droite du titre selon --_g. */
  --_x: calc(var(--_px) + (1 - var(--_g)) * (100% - 2 * var(--_px) - var(--_pt)));
  /* Icône de titre : image propre à l'élément, avant le texte (les deux modes). */
  --_ti: calc(var(--kwk-volets-titre-icone-on, 0) * var(--kwk-volets-titre-icone-taille, 1.25em));
  --_tz: calc(var(--_ti) + var(--kwk-volets-titre-icone-on, 0) * var(--kwk-volets-titre-icone-espace, .5em));
  /* Indicateur de l'onglet actif (dessous en haut, à droite à gauche). */
  --_ie: calc((1 - var(--_m-acc)) * var(--kwk-volets-indicateur-epaisseur, 3px));

  grid-row: var(--_m-t-ligne);
  grid-column: var(--_m-t-col);
  position: relative;
  display: block;
  min-width: 0;
  min-height: calc(var(--_ti) + 2 * var(--_py));
  margin: 0 calc(var(--_m-haut) * var(--kwk-volets-onglets-espace, 0px)) calc(var(--_m-gauche) * var(--kwk-volets-onglets-espace, 0px)) 0;
  padding: var(--_py) calc(var(--_px) + (1 - var(--_g)) * var(--_zone)) var(--_py) calc(var(--_px) + var(--_g) * var(--_zone) + var(--_tz));
  background-color: var(--kwk-volets-entete-fond, transparent);
  background-image: var(--kwk-volets-titre-icone, none);
  background-repeat: no-repeat;
  background-size: auto var(--_ti);
  background-position: calc(var(--_px) + var(--_g) * var(--_zone)) center;
  color: var(--kwk-volets-entete-couleur, inherit);
  font-size: var(--kwk-volets-entete-taille, 1rem);
  font-weight: var(--kwk-volets-entete-graisse, 500);
  text-transform: var(--kwk-volets-entete-casse, none);
  line-height: 1.4;
  text-align: start;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.kwk-volets > .kwk-volets-item:last-child > .kwk-volets-titre {
  margin: 0;
}

.kwk-volets > .kwk-volets-item > .kwk-volets-titre:hover {
  background-color: var(--kwk-volets-entete-fond-survol, var(--kwk-volets-entete-fond, transparent));
  color: var(--kwk-volets-entete-couleur-survol, var(--kwk-volets-entete-couleur, inherit));
}

:is(.kwk-volets.kwk-volets-pret > .kwk-volets-ouvert, .kwk-volets:not(.kwk-volets-pret) > [data-kwk-ouvert]) > .kwk-volets-titre {
  background-color: var(--kwk-volets-entete-fond-ouvert, var(--kwk-volets-entete-fond, transparent));
  color: var(--kwk-volets-entete-couleur-ouvert, var(--kwk-volets-entete-couleur, inherit));
  box-shadow: inset calc(-1 * var(--_m-gauche) * var(--_ie)) calc(-1 * var(--_m-haut) * var(--_ie)) 0 0 var(--kwk-volets-indicateur-couleur, currentColor);
}

/* Pastille de l'icône d'ouverture. */
.kwk-volets > .kwk-volets-item > .kwk-volets-titre::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--_x);
  box-sizing: border-box;
  width: var(--_pt);
  height: var(--_pt);
  border: var(--_pb) solid var(--kwk-volets-pastille-bordure-couleur, currentColor);
  border-radius: var(--kwk-volets-pastille-arrondi, 50%);
  background: var(--kwk-volets-pastille-fond, transparent);
  transform: translateY(-50%);
  transition: background-color .2s ease;
  pointer-events: none;
}

:is(.kwk-volets.kwk-volets-pret > .kwk-volets-ouvert, .kwk-volets:not(.kwk-volets-pret) > [data-kwk-ouvert]) > .kwk-volets-titre::before {
  background: var(--kwk-volets-pastille-fond-ouvert, var(--kwk-volets-pastille-fond, transparent));
}

/* Glyphe : masque recolorable (jeux d'icônes) ou image perso (teinte transparente). */
.kwk-volets > .kwk-volets-item > .kwk-volets-titre::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--_x) + var(--_pm) + var(--_pb));
  width: var(--_ic);
  height: var(--_ic);
  background: var(--kwk-volets-icone-image, none) center / contain no-repeat;
  background-color: var(--kwk-volets-icone-teinte, var(--kwk-volets-icone-couleur, currentColor));
  -webkit-mask: var(--kwk-volets-icone-forme, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.5v11M2.5 8h11'/%3E%3C/svg%3E")) center / contain no-repeat;
  mask: var(--kwk-volets-icone-forme, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.5v11M2.5 8h11'/%3E%3C/svg%3E")) center / contain no-repeat;
  transform: translateY(-50%) rotate(0deg);
  transition: transform .25s ease, background-color .2s ease;
  pointer-events: none;
}

:is(.kwk-volets.kwk-volets-pret > .kwk-volets-ouvert, .kwk-volets:not(.kwk-volets-pret) > [data-kwk-ouvert]) > .kwk-volets-titre::after {
  background-image: var(--kwk-volets-icone-image-ouvert, var(--kwk-volets-icone-image, none));
  background-color: var(--kwk-volets-icone-teinte, var(--kwk-volets-icone-couleur-ouvert, var(--kwk-volets-icone-couleur, currentColor)));
  -webkit-mask-image: var(--kwk-volets-icone-forme-ouvert, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11'/%3E%3C/svg%3E"));
  mask-image: var(--kwk-volets-icone-forme-ouvert, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11'/%3E%3C/svg%3E"));
  transform: translateY(-50%) rotate(var(--kwk-volets-icone-rotation, 0deg));
}

/*
 * Bouton posé par le script front autour du texte du titre : remis à zéro, puis
 * étiré sur tout le titre pour que la ligne entière — icône comprise — soit cliquable.
 */
.kwk-volets .kwk-volets-titre > .kwk-volets-bouton {
  display: inline;
  position: static;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.kwk-volets .kwk-volets-titre > .kwk-volets-bouton::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.kwk-volets .kwk-volets-titre > .kwk-volets-bouton:focus {
  outline: 0;
}

.kwk-volets .kwk-volets-titre > .kwk-volets-bouton:focus-visible::after {
  outline: 2px solid currentColor;
  outline-offset: -3px;
}

/* ── Contenu ─────────────────────────────────────────────────────────────── */

.kwk-volets > .kwk-volets-item > .kwk-volets-corps {
  grid-row: var(--_m-c-ligne);
  grid-column: var(--_m-c-col);
  min-width: 0;
  padding: var(--kwk-volets-corps-padding-y, 1rem) var(--kwk-volets-corps-padding-x, 1.25rem);
  background: var(--kwk-volets-corps-fond, transparent);
  /* Séparateur titre / contenu : au-dessus (accordéon, onglets en haut) ou à gauche. */
  border-top: calc((1 - var(--_m-gauche)) * var(--kwk-volets-corps-separateur-largeur, 0px)) solid var(--kwk-volets-corps-separateur-couleur, var(--bs-border-color, #dee2e6));
  border-left: calc(var(--_m-gauche) * var(--kwk-volets-corps-separateur-largeur, 0px)) solid var(--kwk-volets-corps-separateur-couleur, var(--bs-border-color, #dee2e6));
  transition: opacity var(--_tr-d, 0s) ease, transform var(--_tr-d, 0s) ease, visibility var(--_tr-d, 0s);
}

/* Fermé : retiré en accordéon ; en onglets, gardé dans la case (hauteur) mais invisible. */
:is(.kwk-volets.kwk-volets-pret > .kwk-volets-item:not(.kwk-volets-ouvert):not(.kwk-volets-fermeture),
    .kwk-volets:not(.kwk-volets-pret) > .kwk-volets-item:not([data-kwk-ouvert])) > .kwk-volets-corps {
  display: var(--_m-ferme);
  visibility: hidden;
  opacity: 0;
  transform: translate(calc(var(--_m-haut) * var(--_tr-x, 0px)), calc(var(--_m-gauche) * var(--_tr-x, 0px)));
}

/* Sans JS, en onglets : seul le premier élément marqué ouvert est l'onglet actif… */
.kwk-volets:not(.kwk-volets-pret) > [data-kwk-ouvert] ~ [data-kwk-ouvert] > .kwk-volets-corps {
  visibility: var(--_m-suiv-vis);
  opacity: var(--_m-acc);
}

/* … et le premier élément l'est si aucun n'est marqué. */
.kwk-volets:not(.kwk-volets-pret):not(:has(> [data-kwk-ouvert])) > .kwk-volets-item:first-child > .kwk-volets-corps {
  visibility: var(--_m-prem-vis);
  opacity: calc(1 - var(--_m-acc));
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .kwk-volets > .kwk-volets-item > .kwk-volets-titre,
  .kwk-volets > .kwk-volets-item > .kwk-volets-titre::before,
  .kwk-volets > .kwk-volets-item > .kwk-volets-titre::after,
  .kwk-volets > .kwk-volets-item > .kwk-volets-corps {
    transition: none;
  }
}