/* ============================================================
   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. */
.ck-table.ck-table th,
.ck-table.ck-table td {
	background: none;
	border: 0;
}

/* 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);
	border-bottom: var(--ck-tb-head-lw, 2px) solid var(--ck-tb-head-line, var(--ck-tb-border, #e4e4e7));
}
.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 {
	border-bottom: var(--ck-tb-bw, 1px) solid var(--ck-tb-border, #e4e4e7);
}
/* 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 {
	border-bottom: var(--ck-tb-bw, 1px) solid var(--ck-tb-border, #e4e4e7);
}
.ck-table--b-grid th:not(:last-child),
.ck-table--b-grid td:not(:last-child) {
	border-right: var(--ck-tb-bw, 1px) solid var(--ck-tb-border, #e4e4e7);
}
/* Bordure extérieure (sur le tableau, compatible avec l'arrondi). */
.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. */
.ck-table.ck-table .ck-row--hl > td,
.ck-table.ck-table .ck-row--hl > th,
.ck-table.ck-table .ck-cell--hl {
	background: var(--ck-tb-hl-bg, rgba(83, 74, 183, 0.08));
	color: var(--ck-tb-hl-color, inherit);
}

/* ---------------------------- 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);
}

/* ---------------------- 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;
		border-bottom: var(--ck-tb-head-lw, 2px) solid var(--ck-tb-head-line, var(--ck-tb-border, #e4e4e7));
		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;
		border-bottom: var(--ck-tb-bw, 1px) solid var(--ck-tb-border, #e4e4e7);
	}
	.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; }

	.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;
		border-bottom: var(--ck-tb-head-lw, 2px) solid var(--ck-tb-head-line, var(--ck-tb-border, #e4e4e7));
		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;
		border-bottom: var(--ck-tb-bw, 1px) solid var(--ck-tb-border, #e4e4e7);
	}
	.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; }

	.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; }
}