/**
 * CercleCompare - Front Styles
 *
 * Architecture :
 *   - Variables CSS pilotées par la couleur d'accent (inline sur .cc-table)
 *   - 3 presets : moderne, classique, minimal
 *   - Responsive : desktop = grille, mobile < 680px = empilement en cartes
 */

/* ============================================================
   VARIABLES DE BASE
   ============================================================ */

.cc-table {
	--cc-accent: #534AB7;
	--cc-text:          #1a1a2e;
	--cc-text-muted:    #666;
	--cc-bg:            #ffffff;
	--cc-bg-alt:        #fafafa;
	--cc-bg-highlight:  #f5ebd8;
	--cc-border:        #e8e8e8;
	--cc-border-strong: #1a1a2e;
	--cc-radius:        8px;
	--cc-spacing:       8px;
	--cc-font:          inherit;
	--cc-font-head:     inherit;
	/* Décalage du thead sticky par rapport au haut du viewport.
	   Si un header fixe du thème est en haut de la page, surcharge cette variable
	   dans ton CSS custom : .cc-table { --cc-sticky-top: 80px; } */
	--cc-sticky-top:    0px;

	position: relative;            /* Ancre le badge .cc-scroll-hint en absolute */
	font-family: var(--cc-font);
	color: var(--cc-text);
	width: 100%;
	max-width: 100%;
	margin: 0;
	box-sizing: border-box;
}

.cc-table *,
.cc-table *::before,
.cc-table *::after {
	box-sizing: border-box;
}

/* ============================================================
   SECTIONS
   ============================================================ */

/* ============================================================
   GRILLE TABLE
   ============================================================ */

/* ============================================================
   TABLE CORE — vraie <table> HTML pour sticky fiable
   ============================================================ */

.cc-section__table {
	/* Wrapper scrollable horizontal. */
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius);
	background: var(--cc-bg);
	max-width: 100%;
	position: relative;
}

/* Fix border-radius coupé par le thead : les 1ers/derniers th prennent le radius */
.cc-tbl thead tr:first-child th:first-child {
	border-top-left-radius: calc(var(--cc-radius) - 1px);
}
.cc-tbl thead tr:first-child th:last-child {
	border-top-right-radius: calc(var(--cc-radius) - 1px);
}
/* Dernière ligne : coins bas arrondis */
.cc-tbl tbody tr:last-child td:first-child,
.cc-tbl tbody tr:last-child th:first-child {
	border-bottom-left-radius: calc(var(--cc-radius) - 1px);
}
.cc-tbl tbody tr:last-child td:last-child,
.cc-tbl tbody tr:last-child th:last-child {
	border-bottom-right-radius: calc(var(--cc-radius) - 1px);
}

/* ============================================================
   INDICATEUR SCROLL HORIZONTAL
   ============================================================
   Overlay flèche blanche collé au bord droit VISIBLE du tableau,
   uniquement sur la hauteur du thead (barre noire).
   Posé sur .cc-table qui n'a pas d'overflow, donc l'overlay reste
   au bord du viewport même quand on scrolle horizontalement dans
   le wrapper scrollable. */

.cc-scroll-arrow {
	position: absolute;
	top: 0;
	right: 0;
	width: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 15;
	background: linear-gradient(to right, transparent 0%, rgba(26, 26, 46, 0.9) 60%);
	opacity: 1;
	transition: opacity 0.25s ease-out;
}

.cc-scroll-arrow.is-at-end {
	opacity: 0;
}

/* Variante overlay sur le clone sticky : posé sur .cc-sticky-head
   qui est déjà en position:fixed. Hauteur = thead clone seulement,
   calculée dynamiquement en JS. */
.cc-scroll-arrow--clone {
	position: absolute;
	top: 0;
	right: 0;
	width: 36px;
	bottom: auto;
}

.cc-scroll-arrow svg {
	width: 20px;
	height: 20px;
	stroke: #fff;
	fill: none;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	animation: cc-arrow-nudge 1s ease-in-out infinite;
}

@keyframes cc-arrow-nudge {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(4px); }
}

.cc-tbl {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	min-width: max-content;
}

.cc-tbl th,
.cc-tbl td {
	padding: var(--cc-spacing) calc(var(--cc-spacing) * 1.25);
	background: var(--cc-bg);
	font-size: 0.9rem;
	line-height: 1.4;
	text-align: center;
	vertical-align: middle;
	box-sizing: border-box;
	min-width: 160px;
	border: 0;
	transition: none !important;
}

/* La 1ère colonne (labels) reste alignée à gauche */
.cc-tbl th.cc-cell--label,
.cc-tbl td.cc-cell--label {
	text-align: left;
}

/* --- Styles de bordures conditionnelles --- */
.cc-table--borders-none .cc-tbl th,
.cc-table--borders-none .cc-tbl td {
	border: 0;
}

.cc-table--borders-rows .cc-tbl th,
.cc-table--borders-rows .cc-tbl td {
	border-bottom: var(--cc-border-width, 1px) solid var(--cc-border);
}
.cc-table--borders-rows .cc-tbl tr:last-child th,
.cc-table--borders-rows .cc-tbl tr:last-child td {
	border-bottom: 0;
}

.cc-table--borders-cols .cc-tbl th,
.cc-table--borders-cols .cc-tbl td {
	border-right: var(--cc-border-width, 1px) solid var(--cc-border);
}
.cc-table--borders-cols .cc-tbl th:last-child,
.cc-table--borders-cols .cc-tbl td:last-child {
	border-right: 0;
}

.cc-table--borders-full .cc-tbl th,
.cc-table--borders-full .cc-tbl td {
	border-right: var(--cc-border-width, 1px) solid var(--cc-border);
	border-bottom: var(--cc-border-width, 1px) solid var(--cc-border);
}
.cc-table--borders-full .cc-tbl th:last-child,
.cc-table--borders-full .cc-tbl td:last-child {
	border-right: 0;
}
.cc-table--borders-full .cc-tbl tr:last-child th,
.cc-table--borders-full .cc-tbl tr:last-child td {
	border-bottom: 0;
}

.cc-table--borders-outline .cc-tbl th,
.cc-table--borders-outline .cc-tbl td {
	border: 0;
}

/* Le contour extérieur est géré par le wrapper */
.cc-table--borders-outline .cc-section__table {
	border: var(--cc-border-width, 1px) solid var(--cc-border);
}
.cc-table--borders-none .cc-section__table,
.cc-table--borders-rows .cc-section__table,
.cc-table--borders-cols .cc-section__table,
.cc-table--borders-full .cc-section__table {
	border: 0;
}

/* ============================================================
   HOVER NEUTRALISATION — approche simple et correcte
   ============================================================
   Le thème Epic Chalets applique background: #fff sur tr:hover.
   Solution : chaque cellule a un background-color défini en permanence
   (même au hover), PAS via inherit. Les règles ci-dessous définissent
   ce background pour chaque type de cellule, et utilisent une
   spécificité suffisante pour battre les règles du thème. */

/* Par défaut : toutes les cellules ont le fond du tableau */
.cc-table .cc-tbl tbody td,
.cc-table .cc-tbl tbody th {
	background-color: var(--cc-bg);
}

/* Colonne labels a son fond alt */
.cc-table .cc-tbl tbody th.cc-cell--label {
	background-color: var(--cc-bg-alt);
}

/* Zébra : lignes paires */
.cc-table--zebra .cc-tbl tbody tr:nth-child(even) td {
	background-color: var(--cc-zebra-color);
}
.cc-table--zebra .cc-tbl tbody tr:nth-child(even) th.cc-cell--label {
	background-color: var(--cc-bg-alt);
}

/* Highlight colonne — prioritaire sur tout le reste */
.cc-table .cc-tbl tbody td.is-highlighted,
.cc-table .cc-tbl tbody th.is-highlighted,
.cc-table--zebra .cc-tbl tbody tr:nth-child(even) td.is-highlighted,
.cc-table--zebra .cc-tbl tbody tr:nth-child(even) th.is-highlighted {
	background-color: var(--cc-bg-highlight);
}

/* Thead — fond sombre permanent */
.cc-table .cc-tbl thead th {
	background-color: var(--cc-border-strong);
}
.cc-table .cc-tbl thead th.is-highlighted {
	background-color: var(--cc-accent);
}

/* Section — état NORMAL (flux naturel). Default = transparent. */
.cc-table .cc-tbl tr.cc-row--section td {
	background-color: var(--cc-section-normal-bg, transparent);
}

/* Blocage transitions/animations pour éviter les effets visuels résiduels */
.cc-table .cc-tbl th,
.cc-table .cc-tbl td {
	transition: none !important;
	animation: none !important;
}

/* Cellule vide = hauteur raisonnable */
.cc-tbl td {
	min-height: 48px;
}

/* ============================================================
   STICKY : colonne labels (première cellule de chaque row)
   ============================================================
   Pattern éprouvé : position sticky + left: 0 sur les th/td de la première colonne.
   Fonctionne bien avec <table>/<tbody>/<tr>/<td> en border-collapse: separate.
*/

/* Colonne labels normale (tbody) — sticky à gauche */
.cc-tbl tbody th.cc-cell--label,
.cc-tbl tbody td.cc-cell--label {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--cc-bg-alt);
	font-weight: 500;
	color: var(--cc-text);
	min-width: 180px;
	max-width: 180px;
	box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   CLONE STICKY HEAD (injecté par JS)
   ============================================================
   Le clone contient le thead + une ligne section qui affiche
   la section courante selon le scroll. */

/* Animation d'apparition/disparition */
.cc-sticky-head {
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.22s ease-out, transform 0.22s ease-out;
	will-change: opacity, transform;
}

.cc-sticky-head.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.cc-sticky-head thead th {
	padding-top: 10px;
	padding-bottom: 10px;
	border: 0 !important;
	vertical-align: middle;
}

/* Le tbody du clone ne doit PAS avoir d'espace au-dessus */
.cc-sticky-head tbody {
	vertical-align: top;
}

/* Ligne section dans le clone : aération matchée au thead */
.cc-sticky-head tbody tr.cc-sticky-section td {
	background: var(--cc-section-bg, var(--cc-accent)) !important;
	background-color: var(--cc-section-bg, var(--cc-accent)) !important;
	padding: 0;
	border: 0;
	/* Ombre portée collée au bas du bandeau section (pas du wrapper) */
	box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.2);
}

.cc-sticky-head .cc-sticky-section .cc-cell--section-title-inner {
	display: block;
	color: var(--cc-section-text, #fff);
	font-family: var(--cc-font-head);
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 12px 16px;
}

/* ============================================================
   EN-TÊTE (thead)
   ============================================================
   Note : pas de position:sticky sur le thead ici parce que le wrapper
   avec overflow-x:auto capture le sticky. Le thead "sticky page" est
   géré via JS (cf. cerclecompare.js : clone du thead en position:fixed
   qui suit le scroll vertical de la page). */

.cc-tbl thead th {
	background: var(--cc-border-strong);
	color: #fff;
	font-family: var(--cc-font-head);
	font-weight: 600;
	padding-top: 14px;
	padding-bottom: 14px;
}

/* Coin en haut-gauche : sticky horizontal (colonne labels) */
.cc-tbl thead th.cc-cell--label {
	position: sticky;
	left: 0;
	z-index: 3;
	min-width: 180px;
	max-width: 180px;
	background: var(--cc-border-strong);
}

/* En-tête d'une colonne produit (contient image + nom) */
.cc-tbl thead th:not(.cc-cell--label) {
	text-align: center;
}

.cc-col-name {
	display: block;
	text-align: center;
	line-height: 1.3;
}

/* ============================================================
   BANDEAU DE SECTION (tr avec colspan)
   ============================================================ */

/* État NORMAL — fond + texte du bandeau dans le flux naturel */
.cc-tbl .cc-row--section td {
	background: var(--cc-section-normal-bg, transparent);
	padding: 0; /* Le padding est sur l'inner */
	border-right: none;
	/* Le td avec colspan s'étend sur toute la largeur du tableau */
}

.cc-cell--section-title-inner {
	display: block;
	color: var(--cc-section-normal-text, #1a1a1a);
	font-family: var(--cc-font-head);
	font-weight: 700;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 10px 16px;
	/* Sticky à gauche : le texte reste visible quand on scrolle à droite */
	position: sticky;
	left: 0;
	/* Largeur limitée à la portion visible */
	width: max-content;
	max-width: 100vw;
}

/* ============================================================
   COLONNES MISES EN AVANT
   ============================================================ */

.cc-tbl th.is-highlighted,
.cc-tbl td.is-highlighted {
	background: var(--cc-bg-highlight);
}

.cc-tbl thead th.is-highlighted {
	background: var(--cc-accent);
	color: #fff;
}

/* ============================================================
   NOTES (par cellule)
   ============================================================ */

.cc-tbl td.has-note {
	padding-top: 8px;
	padding-bottom: 8px;
}

.cc-cell__value {
	display: block;
	width: 100%;
}

.cc-cell__note {
	display: block;
	width: 100%;
	margin-top: 6px;
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--cc-text-muted);
	background: rgba(0, 0, 0, 0.03);
	padding: 3px 6px;
	border-radius: 3px;
	line-height: 1.35;
	font-style: italic;
}

.cc-col-name {
	display: block;
	text-align: center;
	line-height: 1.3;
}

/* Colonne mise en avant. */
.cc-cell.is-highlighted {
	background: var(--cc-bg-highlight);
}

.cc-cell--head.is-highlighted {
	background: var(--cc-accent);
	color: #fff;
	position: relative;
}

/* ============================================================
   TYPES DE CELLULES
   ============================================================ */

.cc-bool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	font-weight: 600;
	font-size: 1.1rem;
}
.cc-bool--yes { color: var(--cc-accent); }
.cc-bool--no  { color: var(--cc-text-muted); }

.cc-number { font-variant-numeric: tabular-nums; }

.cc-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 12px;
	background: var(--cc-accent);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1.2;
}

.cc-icon {
	font-size: 20px;
	font-weight: 600;
	color: var(--cc-accent);
}

.cc-icon--check { color: var(--cc-icon-check, #1D9E75); }
.cc-icon--cross { color: var(--cc-icon-cross, #B0B0B0); }

.cc-link {
	color: var(--cc-accent);
	text-decoration: underline;
	font-weight: 500;
}
.cc-link:hover { text-decoration: none; }

.cc-image {
	max-width: 100%;
	max-height: 60px;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
}

/* ============================================================
   PRESET : MODERNE (par défaut, déjà appliqué ci-dessus)
   ============================================================ */

.cc-table--preset-moderne {
	/* Hérite des valeurs par défaut. */
}

/* ============================================================
   PRESET : CLASSIQUE (style traditionnel, bordures marquées)
   ============================================================ */

.cc-table--preset-classique {
	--cc-radius: 2px;
	--cc-border: #d0d0d0;
	--cc-border-strong: #333;
	--cc-bg-alt: #f5f5f5;
	--cc-font-head: Georgia, "Times New Roman", serif;
}

.cc-table--preset-classique .cc-tbl thead th {
	background: #2a2a2a;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.85rem;
}

/* ============================================================
   PRESET : MINIMAL (épuré, sans bordures, fines lignes)
   ============================================================ */

.cc-table--preset-minimal {
	--cc-radius: 0;
	--cc-border: #efefef;
	--cc-bg-alt: #ffffff;
}

.cc-table--preset-minimal .cc-section__table {
	border: none;
	border-radius: 0;
	border-top: 1px solid var(--cc-text);
}

.cc-table--preset-minimal .cc-tbl th,
.cc-table--preset-minimal .cc-tbl td {
	border-right: none;
	border-bottom: 1px solid var(--cc-border);
	padding: 14px 8px;
	background: var(--cc-bg);
}

.cc-table--preset-minimal .cc-tbl thead th {
	background: var(--cc-bg);
	color: var(--cc-text);
	font-weight: 600;
	border-bottom: 2px solid var(--cc-text);
	text-transform: none;
}

.cc-table--preset-minimal .cc-tbl tbody th.cc-cell--label {
	background: var(--cc-bg);
	color: var(--cc-text-muted);
	font-weight: 400;
}

.cc-table--preset-minimal .cc-tbl thead th.cc-cell--label {
	background: var(--cc-bg);
	color: var(--cc-text);
	border-bottom: 2px solid var(--cc-text);
}

.cc-table--preset-minimal .cc-tbl td.is-highlighted {
	background: var(--cc-bg-highlight);
	font-weight: 600;
}

.cc-table--preset-minimal .cc-tbl thead th.is-highlighted {
	background: var(--cc-bg);
	color: var(--cc-accent);
	border-bottom-color: var(--cc-accent);
}

/* ============================================================
   RESPONSIVE
   ============================================================
   Le tableau utilise un scroll horizontal avec première colonne sticky
   (cf. règles .cc-section__table et .cc-cell--label plus haut).
   Sur mobile, on réduit juste quelques tailles pour rester lisible.
   */

@media (max-width: 680px) {

	.cc-tbl th,
	.cc-tbl td {
		font-size: 0.9rem;
		padding: 10px 12px;
		min-width: 140px;
	}

	.cc-tbl tbody th.cc-cell--label,
	.cc-tbl tbody td.cc-cell--label,
	.cc-tbl thead th.cc-cell--label {
		min-width: 140px;
		max-width: 140px;
	}

	.cc-cell--section-title-inner {
		padding: 8px 12px;
		font-size: 0.8rem;
	}
}

/* ============================================================
   IMPRESSION
   ============================================================ */

@media print {
	.cc-table {
		break-inside: avoid;
	}
}