/**
 * Fiche d'un commerce.
 *
 * Conception mobile d'abord : l'ordre du DOM est celui qu'on lit dans la rue —
 * statut, actions, adresse, horaires, puis le reste. Au-delà de 1024 px, la
 * colonne pratique passe à droite par placement de grille, sans qu'aucun
 * élément ne change de place dans le document ni dans le parcours clavier.
 *
 * Chargée uniquement sur les fiches rendues par le plugin (voir Assets).
 */

.ccc-fiche {
	display: block;
	max-width: var(--ccc-width-wide, 1200px);
	margin: 0 auto;
	/* La barre collante mesure 73 px une fois rendue — mesuré, pas déduit du
	   CSS. L'espace lui est réservé avec une marge, sinon elle recouvre la fin
	   du contenu (§18). Au-delà de 768 px elle disparaît, et la réserve avec
	   elle. */
	padding: var(--ccc-space-8) var(--ccc-space-6) calc(var(--ccc-space-16) + 76px);
}

@media (min-width: 768px) {
	.ccc-fiche {
		padding-bottom: var(--ccc-space-16);
	}
}

@media (max-width: 640px) {
	.ccc-fiche {
		padding-left: var(--ccc-space-4);
		padding-right: var(--ccc-space-4);
	}
}

/* ==========================================================================
   En-tête
   ========================================================================== */

.ccc-fiche__head {
	display: grid;
	gap: var(--ccc-space-6);
	margin-bottom: var(--ccc-space-8);
}

@media (min-width: 768px) {
	.ccc-fiche__head {
		grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
		align-items: center;
	}
}

.ccc-fiche__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--ccc-radius-md);
	background: var(--ccc-primary-subtle, #e8ecf1);
}

.ccc-fiche__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ccc-fiche__identity {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ccc-space-3);
}

/* Commande isolée, donc soumise à la cible de 44 px — contrairement aux liens
   posés dans une phrase, que la règle exempte explicitement. */
.ccc-fiche__back {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--ccc-text-sm);
	font-weight: 600;
	color: var(--ccc-text-muted, #6b757e);
	text-decoration: none;
}

.ccc-fiche__back::before {
	content: '\2190';
	margin-right: 6px;
}

.ccc-fiche__back:hover,
.ccc-fiche__back:focus-visible {
	color: var(--ccc-primary, #173F73);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ccc-fiche__title {
	margin: 0;
	font-family: var(--ccc-font-heading, sans-serif);
	font-size: var(--ccc-text-4xl);
	font-weight: 700;
	line-height: var(--ccc-leading-tight, 1.2);
	letter-spacing: -0.02em;
	text-wrap: balance;
	color: var(--ccc-text, #14181c);
}

.ccc-fiche__context {
	margin: 0;
	font-size: var(--ccc-text-base);
	color: var(--ccc-text-muted, #6b757e);
}

.ccc-fiche__context a {
	color: inherit;
	text-underline-offset: 3px;
}

.ccc-fiche__context a:hover,
.ccc-fiche__context a:focus-visible {
	color: var(--ccc-primary, #173F73);
}

.ccc-fiche__next {
	margin: 0;
	font-size: var(--ccc-text-sm);
	color: var(--ccc-text-muted, #6b757e);
}

/* ==========================================================================
   Corps
   ========================================================================== */

.ccc-fiche__body {
	display: grid;
	gap: var(--ccc-space-8);
	align-items: start;
}

@media (min-width: 1024px) {
	.ccc-fiche__body {
		grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
		gap: var(--ccc-space-10);
	}

	/* Le placement explicite inverse la position sans toucher au DOM : le
	   mobile garde l'ordre imposé par l'usage, le bureau gagne sa colonne. */
	.ccc-fiche__content {
		grid-column: 1;
		grid-row: 1;
	}

	.ccc-fiche__practical {
		grid-column: 2;
		grid-row: 1;
		position: sticky;
		top: var(--ccc-space-6);
	}
}

.ccc-fiche__practical {
	display: flex;
	flex-direction: column;
	gap: var(--ccc-space-4);
}

.ccc-fiche__content {
	display: flex;
	flex-direction: column;
	gap: var(--ccc-space-8);
	min-width: 0;
}

.ccc-fiche__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ccc-space-2);
}

.ccc-fiche__actions .ccc-btn {
	flex: 1 1 auto;
	min-height: 48px;
	justify-content: center;
}

/* ==========================================================================
   Panneaux pratiques
   ========================================================================== */

.ccc-panel {
	padding: var(--ccc-space-5);
	background: var(--ccc-bg-subtle, #f7f8f9);
	border: 1px solid var(--ccc-border, #d8dce0);
	border-radius: var(--ccc-radius-md);
}

.ccc-panel h2 {
	margin: 0 0 var(--ccc-space-3);
	font-family: var(--ccc-font-heading, sans-serif);
	font-size: var(--ccc-text-lg);
	font-weight: 700;
	color: var(--ccc-text, #14181c);
}

.ccc-panel__address {
	margin: 0 0 var(--ccc-space-2);
	font-size: var(--ccc-text-base);
	font-weight: 600;
	color: var(--ccc-text, #14181c);
}

/*
 * Pas `--ccc-text-muted` ici, et ce n'est pas un détail : mesuré sur le rendu,
 * ce gris donne 4,7:1 sur blanc mais 4,42:1 sur le fond teinté du panneau —
 * sous le minimum de 4,5. Le même token change de conformité selon la surface
 * qui est derrière. Sur un aplat, on descend d'un cran dans l'échelle.
 */
.ccc-panel__note {
	margin: 0 0 var(--ccc-space-2);
	font-size: var(--ccc-text-sm);
	color: var(--ccc-neutral-700, #3c454d);
}

.ccc-panel .ccc-hours__day,
.ccc-panel .ccc-hours__slots--closed {
	color: var(--ccc-neutral-700, #3c454d);
}

.ccc-panel__alert {
	margin: var(--ccc-space-3) 0 0;
	padding: var(--ccc-space-3);
	font-size: var(--ccc-text-sm);
	font-weight: 600;
	color: var(--ccc-amber-ink, #8a5606);
	background: var(--ccc-surface, #fff);
	border-radius: var(--ccc-radius-sm);
}

.ccc-panel .ccc-routes {
	margin: var(--ccc-space-3) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--ccc-space-2);
}

.ccc-panel .ccc-hours {
	width: 100%;
	margin: 0;
}

/* ==========================================================================
   Sections de contenu
   ========================================================================== */

.ccc-fiche__section h2 {
	margin: 0 0 var(--ccc-space-4);
	font-family: var(--ccc-font-heading, sans-serif);
	font-size: var(--ccc-text-2xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ccc-text, #14181c);
}

.ccc-prose {
	max-width: 66ch;
	font-size: var(--ccc-text-base);
	line-height: var(--ccc-leading-relaxed, 1.7);
	color: var(--ccc-text, #14181c);
}

.ccc-prose p {
	margin: 0 0 var(--ccc-space-4);
}

.ccc-prose p:last-child {
	margin-bottom: 0;
}

.ccc-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ccc-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ccc-tags a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px var(--ccc-space-3);
	font-size: var(--ccc-text-sm);
	font-weight: 600;
	color: var(--ccc-text, #14181c);
	text-decoration: none;
	background: var(--ccc-surface, #fff);
	border: 1px solid var(--ccc-border, #d8dce0);
	border-radius: var(--ccc-radius-full);
}

.ccc-tags a:hover,
.ccc-tags a:focus-visible {
	border-color: var(--ccc-primary, #173F73);
	color: var(--ccc-primary, #173F73);
}

.ccc-deflist {
	display: grid;
	gap: var(--ccc-space-2) var(--ccc-space-6);
	margin: 0;
}

@media (min-width: 560px) {
	.ccc-deflist {
		grid-template-columns: minmax(140px, auto) minmax(0, 1fr);
	}
}

.ccc-deflist dt {
	font-size: var(--ccc-text-sm);
	font-weight: 700;
	color: var(--ccc-text-muted, #6b757e);
}

.ccc-deflist dd {
	margin: 0 0 var(--ccc-space-2);
	font-size: var(--ccc-text-base);
	color: var(--ccc-text, #14181c);
}

.ccc-linklist {
	display: flex;
	flex-direction: column;
	gap: var(--ccc-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ccc-linklist li {
	display: flex;
	align-items: center;
	gap: var(--ccc-space-3);
	min-height: 44px;
	padding: var(--ccc-space-2) 0;
	border-bottom: 1px solid var(--ccc-border, #d8dce0);
}

.ccc-linklist a {
	font-weight: 600;
	color: var(--ccc-text, #14181c);
	text-underline-offset: 3px;
}

.ccc-linklist span {
	font-size: var(--ccc-text-sm);
	color: var(--ccc-text-muted, #6b757e);
}

/* Les voisins sont un rappel, pas une seconde liste : cartes plus étroites. */
.ccc-grid-cards--compact {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--ccc-space-4);
}

/* ==========================================================================
   Pied de fiche
   ========================================================================== */

.ccc-fiche__foot {
	margin-top: var(--ccc-space-10);
	padding-top: var(--ccc-space-6);
	border-top: 1px solid var(--ccc-border, #d8dce0);
	font-size: var(--ccc-text-sm);
	color: var(--ccc-text-muted, #6b757e);
}

.ccc-fiche__foot p {
	margin: 0 0 var(--ccc-space-2);
}

.ccc-fiche__foot-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ccc-space-3);
	margin-top: var(--ccc-space-4);
}

/* ==========================================================================
   Barre collante
   ========================================================================== */

.ccc-stickybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--ccc-z-sticky, 100);
	display: flex;
	gap: var(--ccc-space-2);
	padding: var(--ccc-space-3) var(--ccc-space-4);
	padding-bottom: calc(var(--ccc-space-3) + env(safe-area-inset-bottom, 0px));
	background: var(--ccc-surface, #fff);
	border-top: 1px solid var(--ccc-border, #d8dce0);
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}

.ccc-stickybar .ccc-btn {
	flex: 1;
	min-height: 48px;
	justify-content: center;
}

@media (min-width: 768px) {
	.ccc-stickybar {
		display: none;
	}
}

/* ==========================================================================
   Focus
   ========================================================================== */

:where(
	.ccc-fiche__back,
	.ccc-tags a,
	.ccc-linklist a,
	.ccc-fiche__context a
):focus-visible {
	outline: 2px solid var(--ccc-primary, #173F73);
	outline-offset: 2px;
}

/* Une fiche de parking n'a pas de vignette : l'en-tête retombe sur une seule
   colonne au lieu de laisser un vide de 320 px à sa gauche. */
.ccc-fiche__head--plain {
	grid-template-columns: minmax(0, 1fr);
}