/**
 * JCM Restauration — Frontend Stylesheet
 * v1.4.2 — refonte complète design Claude AI : chaleureux, premium, responsive.
 *
 * Palette inspirée de l'identité Anthropic Claude :
 *   - Fond carte    : #faf7f2 (cream warm, doux pour les yeux)
 *   - Bordure       : #e8dfd5 (beige-rosé discret)
 *   - Accent        : #d56a4a (terracotta chaud — v1.4.12)
 *   - Accent foncé  : #b85638 (hover/active — v1.4.12)
 *   - Texte         : #1a1a1a (presque noir)
 *   - Texte muted   : #6b5d52 (taupe lisible)
 *   - Succès subtle : #6b7a4a (vert olive doux)
 *
 * Toutes les classes sont préfixées `.jcmr-` pour éviter les collisions.
 * Variables CSS pour faciliter la personnalisation thème-side.
 */

/* ═══════════════════════════════════════════════════════════════════════
   Variables CSS — Design system Claude
   ═══════════════════════════════════════════════════════════════════════ */

.jcmr-restaurant-card {
	/* Couleurs principales */
	--jcmr-bg:           #faf7f2;
	--jcmr-bg-soft:      #f5efe6;
	--jcmr-bg-deeper:    #ede4d6;
	--jcmr-border:       #e8dfd5;
	--jcmr-border-strong:#d4c5b3;

	/* Accent terracotta chaud Claude v1.4.12 */
	--jcmr-accent:       #d56a4a;
	--jcmr-accent-dark:  #b85638;
	--jcmr-accent-soft:  #fae3d8;

	/* Vert olive (succès subtle) */
	--jcmr-success:      #6b7a4a;
	--jcmr-success-soft: #eef0e3;

	/* Texte */
	--jcmr-text:         #1a1a1a;
	--jcmr-text-muted:   #6b5d52;
	--jcmr-text-subtle:  #8a7d70;

	/* Élévation */
	--jcmr-radius-sm:    8px;
	--jcmr-radius:       14px;
	--jcmr-radius-lg:    20px;
	--jcmr-shadow-sm:    0 1px 2px rgba(28, 25, 23, 0.04);
	--jcmr-shadow:       0 2px 8px rgba(28, 25, 23, 0.06), 0 1px 2px rgba(28, 25, 23, 0.04);
	--jcmr-shadow-lg:    0 8px 24px rgba(28, 25, 23, 0.08), 0 2px 4px rgba(28, 25, 23, 0.04);

	/* Espacement */
	--jcmr-space-xs:     6px;
	--jcmr-space-sm:     10px;
	--jcmr-space-md:     16px;
	--jcmr-space-lg:     24px;
	--jcmr-space-xl:     32px;

	/* Conteneur racine */
	margin: var(--jcmr-space-xl) 0;
	color: var(--jcmr-text);
	line-height: 1.65;
	font-size: 1rem;
	background: var(--jcmr-bg);
	border: 1px solid var(--jcmr-border);
	border-radius: var(--jcmr-radius-lg);
	padding: var(--jcmr-space-xl);
	box-shadow: var(--jcmr-shadow);
}

/* ═══════════════════════════════════════════════════════════════════════
   Section : Description
   ═══════════════════════════════════════════════════════════════════════ */

.jcmr-restaurant-card .jcmr-description {
	margin: 0 0 var(--jcmr-space-lg);
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--jcmr-text);
	letter-spacing: -0.005em;
}

/* ═══════════════════════════════════════════════════════════════════════
   Section : Grille d'informations (prix + cabines famille)
   ═══════════════════════════════════════════════════════════════════════ */

.jcmr-restaurant-card .jcmr-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--jcmr-space-md);
	margin: 0 0 var(--jcmr-space-xl);
}

.jcmr-restaurant-card .jcmr-info-item {
	display: flex;
	flex-direction: column;
	gap: var(--jcmr-space-xs);
	padding: var(--jcmr-space-md) var(--jcmr-space-lg);
	background: #ffffff;
	border: 1px solid var(--jcmr-border);
	border-radius: var(--jcmr-radius);
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.jcmr-restaurant-card .jcmr-info-item:hover {
	border-color: var(--jcmr-border-strong);
	transform: translateY(-1px);
}

.jcmr-restaurant-card .jcmr-info-item.jcmr-price {
	border-left: 3px solid var(--jcmr-accent);
}

.jcmr-restaurant-card .jcmr-info-item.jcmr-family {
	border-left: 3px solid var(--jcmr-success);
}

.jcmr-restaurant-card .jcmr-info-label {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--jcmr-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* v1.4.2 : icône emoji dans le label — pas de transform, taille correcte */
/* v1.4.3 : support SVG inline (silhouettes famille musulmane) en plus des emojis */
.jcmr-restaurant-card .jcmr-info-icon {
	font-size: 1rem;
	line-height: 1;
	flex-shrink: 0;
	filter: none;
	opacity: 1;
	display: inline-flex;
	align-items: center;
}

.jcmr-restaurant-card .jcmr-info-icon svg {
	display: block;
	width: 1em;
	height: 1em;
	color: currentColor;
}

.jcmr-restaurant-card .jcmr-info-value {
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--jcmr-text);
	line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════════════
   Section : Spécialités du menu
   ═══════════════════════════════════════════════════════════════════════ */

.jcmr-restaurant-card .jcmr-section-title {
	margin: var(--jcmr-space-xl) 0 var(--jcmr-space-md);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--jcmr-text);
	letter-spacing: -0.01em;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 0 var(--jcmr-space-sm);
	border: none;
	border-bottom: 1px solid var(--jcmr-border);
}

/* v1.4.2 : icône de section (📋) — taille appropriée, pas grisée */
.jcmr-restaurant-card .jcmr-section-icon {
	font-size: 1.1rem;
	line-height: 1;
	flex-shrink: 0;
	filter: none;
	opacity: 1;
}

.jcmr-restaurant-card .jcmr-menu-highlights {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--jcmr-space-sm);
}

.jcmr-restaurant-card .jcmr-menu-highlights li {
	margin: 0;
	padding: var(--jcmr-space-sm) var(--jcmr-space-md);
	background: #ffffff;
	border: 1px solid var(--jcmr-border);
	border-radius: var(--jcmr-radius-sm);
	font-size: 0.95rem;
	color: var(--jcmr-text);
	font-weight: 500;
	line-height: 1.4;
	transition: all 0.15s ease;
	position: relative;
	padding-left: 2.4em;
}

.jcmr-restaurant-card .jcmr-menu-highlights li::before {
	content: '';
	position: absolute;
	left: var(--jcmr-space-md);
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--jcmr-accent);
	opacity: 0.7;
}

.jcmr-restaurant-card .jcmr-menu-highlights li:hover {
	border-color: var(--jcmr-accent);
	background: var(--jcmr-accent-soft);
	transform: translateX(2px);
}

.jcmr-restaurant-card .jcmr-menu-highlights li:hover::before {
	opacity: 1;
	background: var(--jcmr-accent-dark);
}

/* ═══════════════════════════════════════════════════════════════════════
   Responsive : tablette (≤768px)
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
	.jcmr-restaurant-card {
		padding: var(--jcmr-space-lg) var(--jcmr-space-md);
		margin: var(--jcmr-space-lg) 0;
		border-radius: var(--jcmr-radius);
	}

	.jcmr-restaurant-card .jcmr-description {
		font-size: 1rem;
	}

	.jcmr-restaurant-card .jcmr-info-grid {
		grid-template-columns: 1fr;
		gap: var(--jcmr-space-sm);
	}

	.jcmr-restaurant-card .jcmr-info-item {
		padding: var(--jcmr-space-md);
	}

	.jcmr-restaurant-card .jcmr-section-title {
		font-size: 1.1rem;
		margin-top: var(--jcmr-space-lg);
	}

	.jcmr-restaurant-card .jcmr-menu-highlights {
		grid-template-columns: 1fr;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   Responsive : mobile (≤480px)
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
	.jcmr-restaurant-card {
		padding: var(--jcmr-space-md);
		margin: var(--jcmr-space-md) 0;
		border-radius: var(--jcmr-radius-sm);
	}

	.jcmr-restaurant-card .jcmr-description {
		font-size: 0.95rem;
		margin-bottom: var(--jcmr-space-md);
	}

	.jcmr-restaurant-card .jcmr-info-value {
		font-size: 1rem;
	}

	.jcmr-restaurant-card .jcmr-info-label {
		font-size: 0.72rem;
	}

	.jcmr-restaurant-card .jcmr-menu-highlights li {
		font-size: 0.9rem;
		padding: var(--jcmr-space-xs) var(--jcmr-space-sm);
		padding-left: 2em;
	}

	.jcmr-restaurant-card .jcmr-menu-highlights li::before {
		left: 11px;
		width: 5px;
		height: 5px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   Responsive : très petit écran (≤360px iPhone SE etc.)
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 360px) {
	.jcmr-restaurant-card {
		padding: var(--jcmr-space-sm) var(--jcmr-space-md);
	}

	.jcmr-restaurant-card .jcmr-info-item {
		padding: var(--jcmr-space-sm) var(--jcmr-space-md);
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   Accessibilité : focus clavier visible (WCAG 2.1 AA)
   ═══════════════════════════════════════════════════════════════════════ */

.jcmr-restaurant-card a:focus-visible,
.jcmr-restaurant-card button:focus-visible {
	outline: 2px solid var(--jcmr-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Print : version imprimable épurée
   ═══════════════════════════════════════════════════════════════════════ */

@media print {
	.jcmr-restaurant-card {
		border: 1px solid #000;
		box-shadow: none;
		background: #fff;
		page-break-inside: avoid;
	}

	.jcmr-restaurant-card .jcmr-info-item,
	.jcmr-restaurant-card .jcmr-menu-highlights li {
		background: #fff;
		border: 1px solid #ccc;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   v1.4.0+ : Widget filtre par cabines famille (shortcode jcmr_family_filter)
   Refondu v1.4.2 dans la même esthétique Claude.
   ═══════════════════════════════════════════════════════════════════════ */

.jcmr-family-filter {
	margin: 24px 0;
	padding: 16px 24px;
	background: #faf7f2;
	border: 1px solid #e8dfd5;
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
}

.jcmr-family-filter-label {
	display: block;
	font-weight: 600;
	color: #1a1a1a;
	margin-bottom: 12px;
	font-size: 0.95rem;
	letter-spacing: -0.005em;
}

.jcmr-family-filter-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.jcmr-family-filter-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	background: #ffffff;
	border: 1px solid #e8dfd5;
	border-radius: 999px;
	color: #1a1a1a;
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 500;
	transition: all 0.15s ease;
	line-height: 1.3;
}

.jcmr-family-filter-btn:hover {
	background: #f5efe6;
	border-color: #cc785c;
	color: #1a1a1a;
	transform: translateY(-1px);
	text-decoration: none;
}

/* FIX v1.4.1 (A11Y-140-1) : focus distinct pour navigation clavier (WCAG 2.1 AA). */
.jcmr-family-filter-btn:focus {
	outline: 2px solid #cc785c;
	outline-offset: 2px;
}
.jcmr-family-filter-btn:focus:not(:focus-visible) {
	outline: none;
}
.jcmr-family-filter-btn:focus-visible {
	outline: 2px solid #cc785c;
	outline-offset: 2px;
}

.jcmr-family-filter-btn.is-active {
	background: #cc785c;
	border-color: #cc785c;
	color: #ffffff;
	box-shadow: 0 2px 6px rgba(204, 120, 92, 0.25);
}

.jcmr-family-filter-btn.is-active:hover {
	background: #b8654b;
	border-color: #b8654b;
	color: #ffffff;
}

@media (max-width: 480px) {
	.jcmr-family-filter {
		padding: 12px 14px;
	}
	.jcmr-family-filter-options {
		gap: 6px;
	}
	.jcmr-family-filter-btn {
		padding: 7px 12px;
		font-size: 0.85rem;
	}
}