/* ============================================================
   CD — Tableau (comparatifs, tarifs, caractéristiques…)
   ------------------------------------------------------------
   <table> sémantique rendue serveur, zéro JS. Tous les réglages
   Elementor passent par des variables --ck-tb-* posées sur
   .ck-table ({{WRAPPER}} .ck-table), avec repli var(--x, défaut)
   ici — jamais de défaut redéclaré sur les enfants.
   ============================================================ */

/* Conteneur de défilement : les tableaux larges défilent au doigt. */
.ck-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* `height` sur une ligne de tableau agit comme une hauteur MINIMALE : c'est
   la propriété juste pour « hauteur des lignes », `min-height` n'a aucun effet
   sur un `tr`. Repli `auto` = le comportement d'avant, au pixel. */
.ck-table tbody tr { height: var(--ck-tb-row-h, auto); }

.ck-table {
	width: 100%;
	min-width: var(--ck-tb-minw, 0);
	border-collapse: separate;
	border-spacing: 0;
	background: var(--ck-tb-bg, transparent);
	border-radius: var(--ck-tb-radius, 0);
	overflow: hidden;
}

.ck-table th,
.ck-table td {
	padding: 14px 16px;
	min-width: var(--ck-tb-col-minw, 0);
	vertical-align: middle;
	text-align: left;
}

/* ------------------- Le style natif des <table> du site -------------------
   ⚠️ CE QUE KÉVIN VOYAIT : « un style de tableau natif, avec du hover ».
   Mesuré sur scierie.cercledesign.fr, `reset.css` du site habille TOUS les
   tableaux de la page :

     table td                              { border: 1px solid … }
     table tbody > tr:nth-child(2n+1) > td { background: rgba(128,128,128,.07) }
     table tbody tr:hover > td             { background: rgba(128,128,128,.1) }

   Son tableau ne porte que `ck-table--b-lines` : il n'a demandé NI zébrage NI
   survol, et il avait les deux. Les interrupteurs du widget ne commandaient
   rien tant que ces règles-là passaient dessous.

   Spécificité : les règles natives montent à 0,1,3 (`nth-child` et `:hover`
   comptent comme des classes). Il faut donc 0,2,1 au minimum — d'où la classe
   racine DOUBLÉE, sans `!important`, comme dans `ck-horaires.css`.
   ⚠️ Conséquence : deux règles du composant passaient sous cette barre et ont
   été remontées de la même façon (`thead th` et `.ck-table__section`). Les
   autres — bordures, zébrage, survol, mise en avant — sont déjà à 0,3,3 ou
   0,2,2 et gagnent d'elles-mêmes. Le CSS écrit par Elementor pour les
   réglages du widget est à 0,3,1 : il reste au-dessus de tout. */
/* ⚠️⚠️ `!important` SUR LA BORDURE, ET C'EST MESURÉ — 4 septembre 2026.
   Kévin : « j'ai une ligne au-dessus du tableau, j'arrive pas à l'enlever ».
   Mesuré sur SON site, `dj-toulouse.fr/nos-services/location-de-borne-photos-
   a-toulouse/` : les `<th>` d'en-tête sortent à
   `border-top: 1px solid rgba(128,128,128,.5)` — la valeur exacte du
   `reset.css` du thème (`table td, table th`, spécificité 0,0,2).

   CETTE RÈGLE-CI EST À 0,2,1 : elle DEVRAIT gagner, et elle ne gagne pas.
   Vérifié un par un : pas de `@layer` sur la page, `reset.css` chargé AVANT
   (position 3 contre 32), le sélecteur matche bien (`th.matches()` = vrai),
   la règle est bien dans la feuille servie. Une neutralisation en classe
   doublée ne change rien non plus — testé dans la page, le trait reste.
   SEUL `!important` le retire (mesuré : `0px`).
   On ne sait pas POURQUOI la cascade se comporte ainsi sur ce site, et on ne
   devine pas : on prend la seule chose qui a été MESURÉE comme efficace.
   Kévin, 2026-09-02 : « pour le !important j'ai jamais interdit ».

   ⚠️ CONSÉQUENCE OBLIGATOIRE : toutes les bordures que le widget POSE
   ensuite doivent être `!important` elles aussi, sinon cette neutralisation
   les effacerait. Elles sont marquées « ⟵ important, voir le bloc du haut ». */
.ck-table.ck-table th,
.ck-table.ck-table td {
	background: none;
	border: 0 !important;
}

/* Alignement par cellule/colonne (classes posées au rendu). */
.ck-table .ck-al-left   { text-align: left; }
.ck-table .ck-al-center { text-align: center; }
.ck-table .ck-al-right  { text-align: right; }

/* ---------------------------- En-tête ---------------------------- */
/* Classe doublée : sinon la neutralisation du style natif (0,2,1) passerait
   devant cette règle-ci et l'en-tête perdrait son fond et son filet. */
.ck-table.ck-table thead th {
	font-weight: 700;
	background: var(--ck-tb-head-bg, transparent);
	/* ⟵ important, voir le bloc du haut. */
	border-bottom: var(--ck-tb-head-lw, 2px) solid var(--ck-tb-head-line, var(--ck-tb-border, #e4e4e7)) !important;
}
.ck-table__hicon {
	display: inline-block;
	vertical-align: middle;
	margin-right: var(--ck-tb-hicon-gap, 8px);
	line-height: 0;
}
.ck-table__hicon i,
.ck-table__hicon svg {
	font-size: var(--ck-tb-hicon-size, 18px);
	width: var(--ck-tb-hicon-size, 18px);
	height: var(--ck-tb-hicon-size, 18px);
}

/* -------------------------- Étiquettes (th de ligne) -------------------------- */
.ck-table tbody th {
	font-weight: 600;
}

/* ---------------------------- Bordures ---------------------------- */
/* Lignes horizontales : un trait sous chaque ligne sauf la dernière. */
.ck-table--b-lines tbody tr:not(:last-child) > th,
.ck-table--b-lines tbody tr:not(:last-child) > td {
	/* ⟵ important, voir le bloc du haut. */
	border-bottom: var(--ck-tb-bw, 1px) solid var(--ck-tb-border, #e4e4e7) !important;
}
/* Grille complète : traits horizontaux + verticaux entre colonnes. */
.ck-table--b-grid tbody tr:not(:last-child) > th,
.ck-table--b-grid tbody tr:not(:last-child) > td {
	/* ⟵ important, voir le bloc du haut. */
	border-bottom: var(--ck-tb-bw, 1px) solid var(--ck-tb-border, #e4e4e7) !important;
}
.ck-table--b-grid th:not(:last-child),
.ck-table--b-grid td:not(:last-child) {
	/* ⟵ important, voir le bloc du haut. */
	border-right: var(--ck-tb-bw, 1px) solid var(--ck-tb-border, #e4e4e7) !important;
}
/* Bordure extérieure : elle est sur le TABLEAU, pas sur les cellules — la
   neutralisation du haut ne la touche pas, elle n'a pas besoin d'important. */
.ck-table--b-outer {
	border: var(--ck-tb-bw, 1px) solid var(--ck-tb-border, #e4e4e7);
}

/* ------------------------- Zébrage & survol ------------------------- */
.ck-table--striped tbody tr:nth-child(even):not(.ck-table__section-row) > td,
.ck-table--striped tbody tr:nth-child(even):not(.ck-table__section-row) > th {
	background: var(--ck-tb-stripe, rgba(0, 0, 0, 0.03));
}
.ck-table--hover tbody tr:not(.ck-table__section-row):hover > td,
.ck-table--hover tbody tr:not(.ck-table__section-row):hover > th {
	background: var(--ck-tb-hover, rgba(0, 0, 0, 0.045));
}

/* --------------------------- Mise en avant --------------------------- */
/* `.ck-cell--hl` était à 0,2,1 — EXACTEMENT la spécificité de la neutralisation
   du style natif. Il ne gagnait que parce qu'il est écrit plus bas dans le
   fichier : un simple réordonnancement aurait effacé la mise en avant, sans
   que rien ne le signale. La classe doublée enlève cette dépendance à l'ordre. */
/* ⚠️⚠️ `color` EN `!important` — MESURÉ LE 4 SEPTEMBRE 2026.
   Kévin : « les textes rien ne fonctionne de ce que je t'ai demandé ».
   La cause se CALCULE : les contrôles « Couleur du texte » du widget écrivent
   `{{WRAPPER}} .ck-table tbody td`, et Elementor remplace `{{WRAPPER}}` par
   `.elementor-<page> .elementor-element.elementor-element-<id>` — TROIS
   classes. La règle finale pèse donc (0,4,2), quand celle-ci pèse (0,3,0).
   **La couleur générale écrasait toujours celle de la mise en avant.**
   Aucune montée de spécificité raisonnable ne bat un `{{WRAPPER}}` : sa
   valeur dépend de la page. On prend `!important`, comme pour les bordures.
   ⚠️ C'EST VOULU : une cellule mise en avant DOIT gagner sur la couleur
   générale — c'est tout son objet.
   Le `background`, lui, n'a pas ce problème : les contrôles de fond posent
   des VARIABLES (`--ck-tb-*`), ils ne peignent pas les cellules. */
.ck-table.ck-table .ck-row--hl > td,
.ck-table.ck-table .ck-row--hl > th,
.ck-table.ck-table .ck-cell--hl,
.ck-table.ck-table .ck-col--hl {
	background: var(--ck-tb-hl-bg, rgba(83, 74, 183, 0.08));
	color: var(--ck-tb-hl-color, inherit) !important;
}

/* ⚠️⚠️ LE TEXTE EST DANS UN `<p>`, ET L'HÉRITAGE NE SUFFIT PAS — MESURÉ LE
   4 SEPTEMBRE 2026 SUR LE SITE DE KÉVIN. Il disait : « c'est que le texte qui
   réagit pas ». Mesuré cellule par cellule :

     le <td>  → rgb(255,255,255)   ← notre blanc, il PASSE
     le <p>   → rgb(156,161,174)   ← gris, il ne suit pas

   La cause n'est PAS le widget : c'est le thème du site
   (`text-lightmode.css`) qui pose `p, body { color: … }`. Cette règle colore
   le `<p>` LUI-MÊME. **Une couleur posée sur l'élément bat toujours une
   couleur héritée du parent, quelle que soit la spécificité** — c'est du CSS
   de base, et c'est le piège.

   Il faut donc COLORER LES DESCENDANTS, pas seulement la cellule. La liste
   est celle que le contrôle « Typographie » du widget vise déjà (`td`, `td p`,
   `td li`), élargie à ce qu'un éditeur riche produit. */
.ck-table.ck-table .ck-row--hl > td :where(p, li, span, a, strong, em, b, i, small),
.ck-table.ck-table .ck-row--hl > th :where(p, li, span, a, strong, em, b, i, small),
.ck-table.ck-table .ck-cell--hl :where(p, li, span, a, strong, em, b, i, small),
.ck-table.ck-table .ck-col--hl :where(p, li, span, a, strong, em, b, i, small) {
	color: var(--ck-tb-hl-color, inherit) !important;
}

/* ⚠️ ET LA COCHE DISPARAISSAIT SUR LE FOND. Mesuré au même endroit : la coche
   sortait à `rgb(231,33,127)` sur un fond `rgb(231,33,127)` — invisible. Elle
   porte sa propre couleur (`--ck-tb-check`), qui ne connaît pas la mise en
   avant. Dans une cellule mise en avant, elle prend donc la couleur du texte
   de mise en avant. `--ck-tb-hl-mark` permet d'en décider autrement. */
.ck-table.ck-table .ck-row--hl > td .ck-table__mark,
.ck-table.ck-table .ck-row--hl > th .ck-table__mark,
.ck-table.ck-table .ck-cell--hl .ck-table__mark,
.ck-table.ck-table .ck-col--hl .ck-table__mark {
	color: var(--ck-tb-hl-mark, var(--ck-tb-hl-color, inherit)) !important;
}

/* ══ LA COLONNE MISE EN AVANT ══════════════════════════════════════════════
   ⚠️ AJOUTÉ LE 4 SEPTEMBRE 2026. Kévin, sur un tableau de tarifs : « je peux
   pas mettre en avant l'intitulé de la colonne que je veux mettre en avant,
   je peux pas custom ma mise en avant, ni son zebra ».
   La classe `.ck-col--hl` est posée par le rendu sur l'EN-TÊTE de la colonne
   cochée ET sur toutes ses cellules. Elle partage le fond de la mise en avant
   ci-dessus ; ce qui suit ne fait qu'ajouter ce qui lui est propre. */

/* L'intitulé de la colonne. Il peut avoir son PROPRE fond — c'est lui qu'on
   regarde en premier — et retombe sur celui de la colonne si on n'en met pas.
   Classe doublée + `thead th` : il faut passer devant `--ck-tb-head-bg`. */
.ck-table.ck-table thead th.ck-col--hl {
	background: var(--ck-tb-hl-head-bg, var(--ck-tb-hl-bg, rgba(83, 74, 183, 0.08)));
	/* ⟵ important, même raison : `{{WRAPPER}} .ck-table thead th` pose la
	   couleur générale de l'en-tête et pèse plus lourd. */
	color: var(--ck-tb-hl-head-color, var(--ck-tb-hl-color, inherit)) !important;
}
/* Même raison que pour le corps : le thème colore les enfants directement. */
.ck-table.ck-table thead th.ck-col--hl :where(p, li, span, a, strong, em, b, i, small) {
	color: var(--ck-tb-hl-head-color, var(--ck-tb-hl-color, inherit)) !important;
}

/* ⚠️ SON ZÉBRA À ELLE. Sans cette règle, le zébrage général repeignait une
   ligne sur deux DANS la colonne mise en avant, et la colonne perdait sa
   couleur une ligne sur deux — c'est ce que Kévin appelle « ni son zebra ».
   Spécificité : 0,4,1 contre 0,2,2 pour le zébrage général, elle gagne. */
.ck-table--striped tbody tr:nth-child(even):not(.ck-table__section-row) > .ck-col--hl {
	background: var(--ck-tb-hl-stripe, rgba(83, 74, 183, 0.14));
}

/* Le survol ne doit pas effacer la colonne non plus. */
.ck-table--hover tbody tr:not(.ck-table__section-row):hover > .ck-col--hl {
	background: var(--ck-tb-hl-hover, var(--ck-tb-hl-stripe, rgba(83, 74, 183, 0.14)));
}

/* ---------------------------- Sections ---------------------------- */
/* Classe doublée, même raison que `thead th` : sans ça, la ligne de section
   perdait son fond au profit de la neutralisation. */
.ck-table.ck-table .ck-table__section {
	font-weight: 700;
	background: var(--ck-tb-section-bg, rgba(0, 0, 0, 0.04));
}

/* ---------------------------- Texte riche ----------------------------
   ⚠️ LE RÉGLAGE « TYPOGRAPHIE » ÉTAIT MUET DÈS QU'UNE CELLULE AVAIT UN <p>.
   Mesuré sur scierie.cercledesign.fr, page « Le Magasin », dans le MÊME
   tableau à la même seconde :

     « 16 route de Vologne… »  texte nu  → 12,96 px   le réglage passe
     « Une carte de crédit… »  dans un <p> →  16 px   le réglage est ignoré

   La cause n'est pas le widget : le module Polices (réglages du site) pose
   `p{font-family:…;font-size:1rem;font-weight:400;line-height:1.6}` — et une
   règle qui vise l'élément `p` bat TOUJOURS l'héritage venant du `<td>`, quelle
   que soit la spécificité de l'ancêtre. Or l'éditeur riche du champ « Contenu »
   sort en <p> dès qu'on tape autre chose qu'une ligne brute.
   Seules la couleur et l'alignement s'en sortaient : `p{}` ne les repose pas.

   `font: inherit` (0,1,1 contre 0,0,1) rend la cellule transparente à la typo,
   sans `!important` et sans dépendre de l'ordre de chargement.
   ⚠️ NI `color` ICI : elle cascade toute seule, et la forcer a déjà cassé le
   mode sombre du site une fois (régression 4.2.843).
   ⚠️ `font` est un RACCOURCI : il ne contient pas les marges — la règle
   `margin` ci-dessous reste nécessaire, et doit rester après. */
.ck-table__rich p,
.ck-table__rich li {
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

.ck-table__rich > :first-child { margin-top: 0; }
.ck-table__rich > :last-child  { margin-bottom: 0; }
.ck-table__rich p { margin: 0 0 var(--ck-tb-rich-gap, 0.5em); }

/* ---------------------------- Coches ---------------------------- */
.ck-table__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	vertical-align: middle;
}
.ck-table__mark svg {
	width: var(--ck-tb-mark-size, 20px);
	height: var(--ck-tb-mark-size, 20px);
}
.ck-table__mark--check { color: var(--ck-tb-check, #16a34a); }
.ck-table__mark--cross { color: var(--ck-tb-cross, #dc2626); }
.ck-table__mark--minus { color: var(--ck-tb-minus, #a1a1aa); }

/* Pastille de fond : ronde, teintée de la couleur de la marque. */
.ck-table--badges .ck-table__mark {
	width: calc(var(--ck-tb-mark-size, 20px) * 1.7);
	height: calc(var(--ck-tb-mark-size, 20px) * 1.7);
	border-radius: 50%;
	background: color-mix(in srgb, currentColor 12%, transparent);
}
.ck-table--badges .ck-table__mark svg {
	width: calc(var(--ck-tb-mark-size, 20px) * 0.85);
	height: calc(var(--ck-tb-mark-size, 20px) * 0.85);
}

/* ---------------------------- Cellules icône ---------------------------- */
.ck-table__icell {
	display: inline-flex;
	align-items: center;
	gap: var(--ck-tb-icon-gap, 8px);
	vertical-align: middle;
}
.ck-table__icell .ck-table__ic { line-height: 0; }
.ck-table__icell i,
.ck-table__icell svg {
	font-size: var(--ck-tb-icon-size, 20px);
	width: var(--ck-tb-icon-size, 20px);
	height: var(--ck-tb-icon-size, 20px);
}

/* ---------------------------- Cellules image ---------------------------- */
/* ⚠️ CLASSE RACINE DOUBLÉE, ET C'EST LA SEULE RAISON POUR LAQUELLE ÇA TIENT.
   Elementor pose `.elementor img { height:auto; max-width:100% }` — 0,1,1,
   exactement la spécificité de `.ck-table__img img`. À égalité, c'est l'ordre
   de chargement qui tranche, et rien ne garantit que notre feuille passe après
   la sienne : la HAUTEUR réglée dans le widget serait perdue une fois sur deux,
   selon la page. `.ck-table .ck-table__img img` monte à 0,2,1 et gagne partout,
   sans `!important`. Même raisonnement que la neutralisation du style natif des
   tableaux, plus haut dans ce fichier. */
.ck-table__imgcell {
	display: inline-flex;
	align-items: center;
	gap: var(--ck-tb-img-gap, 10px);
	vertical-align: middle;
	max-width: 100%;
}
/* Le lien reprend la mise en ligne de la cellule : sans ça, l'ancre redevient
   un bloc en ligne et le texte retombe sous l'image. */
.ck-table__imglink {
	display: inline-flex;
	align-items: center;
	gap: var(--ck-tb-img-gap, 10px);
	color: inherit;
	text-decoration: none;
}
.ck-table__img {
	display: block;
	line-height: 0;
	flex: none;
}
/* ⚠️ LE PLAFOND DE HAUTEUR EST LE GARDE-FOU DU DÉFAUT — mesuré, pas supposé.
   Une largeur imposée à une image PORTRAIT donne une hauteur proportionnelle :
   au banc, un visuel de 60×300 posé sans rien régler sortait à 96×480 et faisait
   éclater la ligne du tableau. Tant que personne n'a rien demandé, l'image reste
   donc CONTENUE (120px de haut au plus), proportions gardées.
   Dès que la largeur ou la hauteur est réglée, l'utilisateur a pris la main :
   les deux contrôles posent `--ck-tb-img-max: none` en même temps que leur
   valeur, et le plafond s'efface. Sans ça, le réglage de largeur mentirait —
   le plafond l'aurait écrasé en silence. */
.ck-table .ck-table__img img {
	display: block;
	width: var(--ck-tb-img-w, auto);
	height: var(--ck-tb-img-h, auto);
	max-width: 100%;
	max-height: var(--ck-tb-img-max, 120px);
	object-fit: var(--ck-tb-img-fit, contain);
	border-radius: var(--ck-tb-img-radius, 0);
}

/* ---------------------- Première colonne figée ---------------------- */
/* Fond opaque obligatoire, sinon le contenu défile « sous » la colonne. */
.ck-table--sticky-first th:first-child,
.ck-table--sticky-first td:first-child {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--ck-tb-bg, #fff);
}
.ck-table--sticky-first thead th:first-child { z-index: 3; }

/* ======================================================================
   Mode empilé : chaque ligne devient une carte ; l'en-tête de colonne
   est rappelé devant chaque valeur via data-label. Les th de ligne
   deviennent le titre de la carte, les sections des intertitres.
   ====================================================================== */
@media (max-width: 767px) {
	.ck-table--stack-sm { display: block; }
	.ck-table--stack-sm thead { display: none; }
	.ck-table--stack-sm tbody,
	.ck-table--stack-sm tr,
	.ck-table--stack-sm th,
	.ck-table--stack-sm td { display: block; width: auto !important; }

	/* UNE CARTE N'A PAS DE LARGEUR MINI. Empilée, la table devient un bloc :
	   `--ck-tb-minw` et `--ck-tb-col-minw`, réglés pour le desktop, la
	   feraient déborder de l'écran. Constaté au banc avec 1400px / 240px. */
	.ck-table--stack-sm,
	.ck-table--stack-sm th,
	.ck-table--stack-sm td { min-width: 0; }

	.ck-table--stack-sm tbody tr:not(.ck-table__section-row) {
		border: var(--ck-tb-bw, 1px) solid var(--ck-tb-border, #e4e4e7);
		/* `height` sur un `tr` est une hauteur MINIMALE… tant que le `tr` est
		   une ligne de tableau. Empilé, il est en `display:block` : la même
		   propriété devient une hauteur FIXE et le contenu déborde de la
		   carte. Constaté au banc à 90px. On repasse par `min-height`. */
		height: auto;
		min-height: var(--ck-tb-row-h, 0);
		border-radius: var(--ck-tb-radius, 8px);
		margin-bottom: var(--ck-tb-stack-gap, 14px);
		background: var(--ck-tb-stack-bg, transparent);
		overflow: hidden;
	}
	/* :not(.ck-table__section-row) sert aussi la spécificité : il faut battre
	   la règle desktop « tr:not(:last-child) > th » qui imposait son trait. */
	.ck-table--stack-sm tbody tr:not(.ck-table__section-row) > th {
		border-right: 0 !important;
		border-bottom: var(--ck-tb-head-lw, 2px) solid var(--ck-tb-head-line, var(--ck-tb-border, #e4e4e7)) !important;
		background: var(--ck-tb-head-bg, transparent);
	}
	.ck-table--stack-sm tbody td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--ck-tb-stack-lgap, 16px);
		text-align: right;
	}
	.ck-table--stack-sm tbody td[data-label]::before {
		content: attr(data-label);
		font-weight: var(--ck-tb-stack-lweight, 600);
		color: var(--ck-tb-stack-lcolor, inherit);
		text-align: left;
	}
	/* Bordures internes de carte + neutralisation des règles desktop. */
	.ck-table--stack-sm.ck-table--b-lines tbody tr > td,
	.ck-table--stack-sm.ck-table--b-grid tbody tr > td {
		border-right: 0 !important;
		border-bottom: var(--ck-tb-bw, 1px) solid var(--ck-tb-border, #e4e4e7) !important;
	}
	.ck-table--stack-sm.ck-table--b-lines tbody tr > td:last-child,
	.ck-table--stack-sm.ck-table--b-grid tbody tr > td:last-child { border-bottom: 0 !important; }

	.ck-table--stack-sm .ck-table__section { border-radius: var(--ck-tb-radius, 8px); }
	.ck-table--stack-sm.ck-table--sticky-first th:first-child,
	.ck-table--stack-sm.ck-table--sticky-first td:first-child { position: static; }
}

@media (max-width: 1024px) {
	.ck-table--stack-md { display: block; }
	.ck-table--stack-md thead { display: none; }
	.ck-table--stack-md tbody,
	.ck-table--stack-md tr,
	.ck-table--stack-md th,
	.ck-table--stack-md td { display: block; width: auto !important; }

	/* UNE CARTE N'A PAS DE LARGEUR MINI. Empilée, la table devient un bloc :
	   `--ck-tb-minw` et `--ck-tb-col-minw`, réglés pour le desktop, la
	   feraient déborder de l'écran. Constaté au banc avec 1400px / 240px. */
	.ck-table--stack-md,
	.ck-table--stack-md th,
	.ck-table--stack-md td { min-width: 0; }

	.ck-table--stack-md tbody tr:not(.ck-table__section-row) {
		border: var(--ck-tb-bw, 1px) solid var(--ck-tb-border, #e4e4e7);
		/* `height` sur un `tr` est une hauteur MINIMALE… tant que le `tr` est
		   une ligne de tableau. Empilé, il est en `display:block` : la même
		   propriété devient une hauteur FIXE et le contenu déborde de la
		   carte. Constaté au banc à 90px. On repasse par `min-height`. */
		height: auto;
		min-height: var(--ck-tb-row-h, 0);
		border-radius: var(--ck-tb-radius, 8px);
		margin-bottom: var(--ck-tb-stack-gap, 14px);
		background: var(--ck-tb-stack-bg, transparent);
		overflow: hidden;
	}
	/* :not(.ck-table__section-row) sert aussi la spécificité : il faut battre
	   la règle desktop « tr:not(:last-child) > th » qui imposait son trait. */
	.ck-table--stack-md tbody tr:not(.ck-table__section-row) > th {
		border-right: 0 !important;
		border-bottom: var(--ck-tb-head-lw, 2px) solid var(--ck-tb-head-line, var(--ck-tb-border, #e4e4e7)) !important;
		background: var(--ck-tb-head-bg, transparent);
	}
	.ck-table--stack-md tbody td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--ck-tb-stack-lgap, 16px);
		text-align: right;
	}
	.ck-table--stack-md tbody td[data-label]::before {
		content: attr(data-label);
		font-weight: var(--ck-tb-stack-lweight, 600);
		color: var(--ck-tb-stack-lcolor, inherit);
		text-align: left;
	}
	.ck-table--stack-md.ck-table--b-lines tbody tr > td,
	.ck-table--stack-md.ck-table--b-grid tbody tr > td {
		border-right: 0 !important;
		border-bottom: var(--ck-tb-bw, 1px) solid var(--ck-tb-border, #e4e4e7) !important;
	}
	.ck-table--stack-md.ck-table--b-lines tbody tr > td:last-child,
	.ck-table--stack-md.ck-table--b-grid tbody tr > td:last-child { border-bottom: 0 !important; }

	.ck-table--stack-md .ck-table__section { border-radius: var(--ck-tb-radius, 8px); }
	.ck-table--stack-md.ck-table--sticky-first th:first-child,
	.ck-table--stack-md.ck-table--sticky-first td:first-child { position: static; }
}