/* =========================================================
   LOGMIS — Tableau comparatif (Basic vs Smart)
   Ciblage RÉUTILISABLE via la classe stable .tbl-comparatif
   (posée sur le container du tableau, champ Avancé → CSS Classes ;
   injectée en base pour PMS Résidence, vérifiée au rendu).
   → un seul CSS pour TOUS les tableaux comparatifs du site
     (PMS Résidence, PMS Hôtel, POS…) : il suffit d'ajouter
     la classe .tbl-comparatif au container de chaque tableau.

   Structure attendue (enfants directs du container .tbl-comparatif) :
     .tbl-comparatif > .e-con            = lignes (27)
     .tbl-comparatif > .e-con > .e-con   = cellules (3 par ligne : feat / basic / smart)
   Habillage par classes opt-in fiables au rendu : .tbl-cell (cellules)
   et .tbl-sep (lignes avec séparateur, hors en-tête).
   ========================================================= */

/* =========================================================
   Dépliant « Voir toutes les fonctionnalités et options disponibles »
   (PMS Hôtel post 36, POS Restaurant post 38).
   Le tableau n'affiche que sa 1re section ; les lignes de la 2e section
   (« Options, Liaisons et API » / « Module complémentaire » + « Option »)
   sont masquées, révélées quand le bouton .tbl-toggle ajoute .tbl-open sur
   la table (via tableau-scroll-hint.js).

   ⚠️ Ciblage ANCRÉ (robuste, sans nombre magique) : la 2e section commence à
   la ligne dont l'en-tête porte la classe repère `.tbl-more-start` (posée sur
   le HEADING de « Options, Liaisons et API » / « Module complémentaire » — une
   classe de WIDGET, qui SURVIT au rendu, contrairement aux classes de conteneur
   que Elementor filtre : tbl-inner/tbl-extra injectées via WP-CLI sont
   supprimées du HTML ; cf. mémoire elementor-classes-conteneur-filtrees & STATE
   §9). On masque la ligne-ancre ET toutes ses sœurs suivantes via :has() + ~.
   ⚠️ La ligne-ancre (en-tête de section) perd `tbl-sep` au rendu (Elementor
   strippe même tbl-sep sur certaines lignes) → on NE peut PAS cibler
   `.tbl-sep:has(.tbl-more-start)`. On l'ancre via `.tbl-cell` (qui survit) :
   `.e-con:has(> .tbl-cell > .tbl-more-start)` = la LIGNE (son enfant direct
   .tbl-cell contient le marqueur ; exclut la table et la cellule elle-même).
   → le client peut ajouter/supprimer/réordonner des lignes de la 1re section
   SANS rien casser (le pli suit l'en-tête, pas un compteur). Générique : marche
   pour tout tableau portant .tbl-more-start (aucun ID de table en dur).
   `:has()` = tous navigateurs récents (2023+) ; sinon dégradation = tout visible.

   Ouverture/fermeture ANIMÉE (comme un accordéon) : lignes repliées par défaut
   (max-height:0 + opacity:0, fallback sans JS), une transition les déploie. Le
   JS (tableau-scroll-hint.js) mesure la vraie hauteur auto à l'ouverture (timing
   fluide) et finit à 'none' (état cohérent). overflow:hidden clippe l'animation.

   ⚠️ Scopé `body:not(.elementor-editor-active)` = repli UNIQUEMENT en front.
   Dans l'ÉDITEUR Elementor (body.elementor-editor-active), les lignes de la
   2e section restent VISIBLES → éditables à la main (sinon max-height:0 les
   cache aussi en édition et on ne peut plus toucher leur contenu).
   ========================================================= */
body:not(.elementor-editor-active) .e-con:has(> .tbl-cell > .tbl-more-start),
body:not(.elementor-editor-active) .e-con:has(> .tbl-cell > .tbl-more-start) ~ .e-con {
	max-height: 0;
	opacity: 0;
	/* !important : bat la règle mobile `.tbl-comparatif > .e-con { overflow:
	   visible !important }` (posée pour le sticky 1re colonne) qui, sinon,
	   dé-clippe les lignes repliées → leur contenu max-height:0 déborde et
	   crée un scroll vertical parasite entre le tableau et le bouton sur
	   mobile. Contrepartie mineure : pas de sticky 1re colonne pour la 2e
	   section sur mobile (la 1re section le garde). */
	overflow: hidden !important;
	transition: max-height 0.4s ease, opacity 0.4s ease;
}

/* Base (toutes tailles)
   Scopé sous .tbl-comparatif (spécificité 0,2,0) pour battre la règle
   Elementor .e-con-full (0,1,0) qui force padding-block à 0 via le kit
   (--container-default-padding:0). Sans ce scope, le padding desktop ne
   s'appliquait pas (égalité de spécificité → Elementor gagnait à l'ordre
   de source). Les cellules portent à la fois .tbl-cell et .e-con-full. */
.tbl-comparatif .tbl-cell { padding: 15px 30px; }
.tbl-comparatif .tbl-sep  { border-bottom: 1px solid rgba(128, 124, 140, 0.5); }

/* Tablette : padding resserré (colonnes conservées, quel qu'en soit le nombre) */
@media (min-width: 768px) and (max-width: 1024px) {
	.tbl-comparatif .tbl-cell { padding: 15px 16px; }
}

/* Mobile : scroll horizontal + colonne 1 figée + padding resserré + hint */
@media (max-width: 767px) {
	/* le tableau = fenêtre de scroll */
	.tbl-comparatif { overflow-x: auto !important; min-width: 0 !important; max-width: 100% !important; }

	/* lignes : en ligne, largeur = somme des colonnes (auto → marche pour 3, 4, N
	   colonnes, plus de valeur en dur) ; overflow visible sinon le sticky casse */
	.tbl-comparatif > .e-con {
		width: max-content !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow: visible !important;
	}

	/* padding resserré sur toutes les cellules */
	.tbl-comparatif > .e-con > .e-con { padding: 12px !important; }

	/* Colonne 1 (Fonctionnalités) — ancrée à gauche */
	.tbl-comparatif > .e-con > .e-con:first-child {
		width: 240px !important; flex: 0 0 240px !important; max-width: none !important;
		position: sticky !important; left: 0 !important; z-index: 2 !important;
		background: #fff !important;
		box-shadow: 1px 0 0 rgba(128, 124, 140, 0.5) !important;
	}

	/* Colonnes de valeurs (Basic / Smart / Plus / …) — défilent, largeur fixe */
	.tbl-comparatif > .e-con > .e-con:not(:first-child) {
		width: 160px !important; flex: 0 0 160px !important; max-width: none !important;
	}

	/* Pas de badge : l'incitation au scroll est gérée par l'auto-scroll JS
	   (cf. assets/js/tableau-scroll-hint.js). */
}