/**
 * Motifs de composition.
 *
 * Direction assumée : la gazette civique. Une affiche typographique plutôt
 * qu'un tableau de bord — le site se consulte debout dans la rue, sur un
 * téléphone, pour une question précise. Trois principes tiennent l'ensemble :
 *
 *  — Le bleu profond porte les grands aplats, le jaune reste un accent. Un
 *    jaune de marque étalé en fond vire au prospectus de supermarché, et posé
 *    en texte sur blanc il plafonne à 2,2:1 — sous le minimum AA.
 *
 *  — Aucune information ne repose sur la seule couleur : le mot accentué du
 *    titre est souligné, les statuts changent de forme, les rubriques sont
 *    numérotées.
 *
 *  — Rien qui suppose de belles photos. La plupart des commerçants n'en
 *    fourniront aucune : le repli en monogramme est le cas normal, traité
 *    comme tel et non comme un pis-aller.
 */

/* ==========================================================================
   Hero
   ========================================================================== */

/* Une seule déclaration de fond, en quatre couches.
   Les trois premières sont les dégradés de marque ; la dernière est la photo du
   centre-ville, quand la commune en fournit une. Elle est fortement assombrie :
   le titre doit rester du texte blanc sur un fond maîtrisé, jamais sur un ciel
   clair imprévisible. Sans photo renseignée la variable vaut `none` et les
   dégradés suffisent.

   Deux blocs `.ccc-hero` séparés ne fonctionnaient pas : le `background-image`
   du second effaçait les dégradés posés par le raccourci du premier. */
.ccc-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(40px, 5vw, 72px) 0;
	color: var(--ccc-text, #14181c);
	background: var(--ccc-bg, #fff);
}

/* Deux colonnes : le texte à gauche, la photo à droite qui file jusqu'au bord
   de l'écran. Sur un fond clair, le titre n'a plus besoin d'un voile pour être
   lisible — et la photo n'a plus besoin d'être sacrifiée pour le titre. */
.ccc-hero > .brxe-container {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ccc-space-8);
	align-items: center;
}

@media (min-width: 900px) {
	.ccc-hero > .brxe-container {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		gap: var(--ccc-space-12);
	}
}

.ccc-hero__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

/* La photo dépasse la largeur du conteneur pour toucher le bord droit : c'est
   ce débord qui donne l'impression d'ouverture, plutôt qu'une image sagement
   rangée dans sa colonne. */
.ccc-hero__media {
	position: relative;
	min-width: 0;
	border-radius: var(--ccc-radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background-color: var(--ccc-primary-subtle, #e8ecf1);
	background-image: var(--ccc-hero-image, none);
	background-size: cover;
	background-position: center 58%;
	background-repeat: no-repeat;
}

@media (min-width: 900px) {
	.ccc-hero__media {
		aspect-ratio: 16 / 11;
		margin-right: calc(50% - 50vw);
		border-radius: var(--ccc-radius-lg) 0 0 var(--ccc-radius-lg);
	}
}

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

.ccc-hero__media > *,
.ccc-hero__media .brxe-text-basic {
	position: absolute;
	inset: 0;
	margin: 0;
}

/* Conservé pour les thèmes qui préfèrent un élément dédié plutôt qu'un fond
   sur le cadre. */
.ccc-hero__photo {
	position: absolute;
	inset: 0;
	background-image: var(--ccc-hero-image, none);
	background-size: cover;
	background-position: center 58%;
	background-repeat: no-repeat;
}

.ccc-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 var(--ccc-space-4);
	padding: 6px 14px 6px 9px;
	font-family: var(--ccc-font-body, sans-serif);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ccc-primary, #173F73);
	background: var(--ccc-primary-subtle, #e8ecf1);
	border-radius: var(--ccc-radius-full);
}

.ccc-hero__eyebrow::before {
	content: '';
	width: 8px;
	height: 8px;
	flex-shrink: 0;
	border-radius: var(--ccc-radius-full);
	background: var(--ccc-open, #1a7f4b);
	box-shadow: 0 0 0 0 rgba(26, 127, 75, 0.6);
	animation: ccc-pulse 2.4s infinite;
}

.ccc-hero__title {
	max-width: 22ch;
	margin: 0;
	font-family: var(--ccc-font-heading, sans-serif);
	font-size: clamp(32px, 20px + 2.1vw, 54px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.032em;
	color: var(--ccc-primary-deep, #0B1F3A);
	text-wrap: balance;
}

/* Le mot accentué reste souligné : sur fond clair le jaune ne porterait plus
   rien du tout, donc il passe en couleur de texte du bleu et c'est le trait
   jaune, épais, qui marque. */
.ccc-mark {
	position: relative;
	color: inherit;
	white-space: nowrap;
}

.ccc-mark::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.02em;
	height: 0.22em;
	z-index: -1;
	opacity: 1;
	background: var(--ccc-secondary, #F2C14E);
}

.ccc-hero__lead {
	max-width: 46ch;
	margin: var(--ccc-space-4) 0 var(--ccc-space-6);
	font-size: clamp(17px, 15px + 0.5vw, 20px);
	line-height: 1.6;
	color: var(--ccc-text-muted, #6b757e);
}

/* ==========================================================================
   Bandeau défilant
   ========================================================================== */

/* La promesse du site, en mouvement : qui ferme, et à quelle heure. Le contenu
   est écrit deux fois côté serveur — c'est ce qui rend la boucle continue sans
   une ligne de JavaScript. */
.ccc-ticker {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	z-index: 2;
	margin-top: clamp(32px, 4vw, 56px);
	padding-block: var(--ccc-space-3);
	border-block: 1px solid var(--ccc-border, #d8dce0);
	background: var(--ccc-bg-subtle, #f7f8f9);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ccc-ticker__track {
	display: flex;
	gap: var(--ccc-space-8);
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: ccc-slide 48s linear infinite;
}

/* Au survol, on s'arrête : un nom qui défile est illisible dès qu'on veut le
   lire vraiment. */
.ccc-ticker:hover .ccc-ticker__track,
.ccc-ticker:focus-within .ccc-ticker__track {
	animation-play-state: paused;
}

@keyframes ccc-slide {
	to { transform: translateX(-50%); }
}

.ccc-ticker__item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: var(--ccc-text-sm);
	color: var(--ccc-text-muted, #6b757e);
	white-space: nowrap;
}

.ccc-ticker__item a {
	color: var(--ccc-primary, #173F73);
	font-weight: 700;
	text-decoration: none;
}

.ccc-ticker__item a:hover,
.ccc-ticker__item a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ccc-ticker__item::after {
	content: '/';
	margin-left: var(--ccc-space-8);
	color: var(--ccc-border-strong, #b9c0c6);
}

/* ==========================================================================
   Barre de recherche dans le hero
   ========================================================================== */

/* Bricks enveloppe chaque tag dans un élément qui ne s'étire pas de lui-même :
   la barre de recherche se retrouvait large de 240 px au lieu de 640, avec le
   texte d'invite coupé au milieu. Les enveloppes de nos tags HTML doivent donc
   toutes réclamer la largeur. */
.ccc-hero__search,
.ccc-mapwrap,
.ccc-shop__body > .brxe-text-basic,
.ccc-property__body > .brxe-text-basic {
	width: 100%;
	min-width: 0;
}

/* Le formulaire vient du tag `{ccc_searchbar}` : sa structure est fixée côté
   PHP, on ne fait que l'habiller ici. */
.ccc-hero__search .ccc-search {
	max-width: 620px;
	margin-inline: 0;
	padding: 6px 6px 6px 20px;
	background: #fff;
	border: 1px solid var(--ccc-border-strong, #b9c0c6);
	border-radius: var(--ccc-radius-full);
	box-shadow: var(--ccc-shadow-sm);
}

.ccc-hero__search .ccc-search:focus-within {
	border-color: var(--ccc-primary, #173F73);
	box-shadow: 0 0 0 3px var(--ccc-secondary, #F2C14E);
}

.ccc-hero__search .ccc-search input[type='search'] {
	padding: 14px 4px;
	font-size: var(--ccc-text-lg);
	border: 0;
	background: transparent;
}

.ccc-hero__search .ccc-search input[type='search']:focus {
	outline: none;
	box-shadow: none;
}

.ccc-hero__search .ccc-search__submit {
	min-height: 44px;
	padding: 12px 24px;
	font-size: var(--ccc-text-sm);
	font-weight: 700;
	color: var(--ccc-primary-contrast, #fff);
	background: var(--ccc-primary, #173F73);
	border: 0;
	border-radius: var(--ccc-radius-full);
}

.ccc-hero__search .ccc-search__submit:hover {
	background: var(--ccc-primary-hover, #335684);
}

/* ==========================================================================
   Pastilles de raccourci
   ========================================================================== */

.ccc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ccc-space-2);
	margin-top: var(--ccc-space-6);
}

.ccc-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 18px;
	font-family: var(--ccc-font-body, sans-serif);
	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-strong, #b9c0c6);
	border-radius: var(--ccc-radius-full);
	transition: border-color var(--ccc-transition-fast) ease,
	            color var(--ccc-transition-fast) ease;
}

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

.ccc-chip--accent {
	color: var(--ccc-primary-contrast, #fff);
	background: var(--ccc-primary, #173F73);
	border-color: var(--ccc-primary, #173F73);
}

.ccc-chip--accent:hover,
.ccc-chip--accent:focus-visible {
	background: var(--ccc-primary-hover, #335684);
	color: var(--ccc-primary-contrast, #fff);
}

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

.ccc-sectionhead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ccc-space-6);
	flex-wrap: wrap;
	padding-bottom: var(--ccc-space-4);
	border-bottom: 1px solid var(--ccc-border, #d8dce0);
}

.ccc-sectionhead__label {
	display: flex;
	align-items: center;
	gap: var(--ccc-space-4);
}

/* Le numéro de rubrique ordonne la page sans ajouter un seul mot. Il est en
   ambre lisible, jamais dans le jaune de marque : celui-ci n'atteint que
   2,2:1 sur blanc. */
.ccc-sectionhead__num {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	font-family: var(--ccc-font-body, sans-serif);
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ccc-primary-contrast, #fff);
	background: var(--ccc-primary, #173F73);
	border-radius: 50%;
}

.ccc-sectionhead .brxe-heading,
.ccc-sectionhead h2 {
	margin: 0;
	font-family: var(--ccc-font-heading, sans-serif);
	font-size: var(--ccc-text-4xl);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.028em;
	color: var(--ccc-primary-deep, #0B1F3A);
}

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

.ccc-sectionlead {
	max-width: 62ch;
	margin: 0;
	font-size: var(--ccc-text-lg);
	line-height: 1.55;
	color: var(--ccc-text-muted, #6b757e);
}

.ccc-seeall,
.ccc-sectionhead > .brxe-text-basic {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-bottom: 2px;
	font-family: var(--ccc-font-body, sans-serif);
	font-size: var(--ccc-text-sm);
	font-weight: 700;
	color: var(--ccc-primary, #173F73);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color var(--ccc-transition-fast) ease, gap var(--ccc-transition-fast) ease;
}

.ccc-seeall:hover,
.ccc-seeall:focus-visible {
	border-bottom-color: var(--ccc-secondary, #F2C14E);
	gap: 11px;
}

/* Sur fond sombre, l'en-tête inverse ses valeurs. Le titre en fait partie :
   sans cette règle il restait noir sur bleu nuit, donc illisible — et c'est le
   seul élément de la section qu'on ne pouvait pas manquer. */
.ccc-onink { color: var(--ccc-text-inverse, #fff); }
.ccc-onink .brxe-heading,
.ccc-onink h2,
.ccc-onink h3 { color: var(--ccc-text-inverse, #fff); }
.ccc-onink .ccc-sectionhead { border-bottom-color: rgba(255, 255, 255, 0.30); }
.ccc-onink .ccc-sectionhead__sub { color: rgba(255, 255, 255, 0.65); }
.ccc-onink .ccc-sectionhead__num { color: var(--ccc-secondary, #F2C14E); }
.ccc-onink .ccc-seeall { color: var(--ccc-secondary, #F2C14E); }

/* La fiche flottante de la carte est posée sur du blanc : elle ne doit pas
   hériter du texte clair de la section. */
.ccc-onink .ccc-mapcard,
.ccc-onink .ccc-mapcard .ccc-mapcard__title a { color: var(--ccc-text, #14181c); }

/* ==========================================================================
   Tuiles de catégorie
   ========================================================================== */

.ccc-grid-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: var(--ccc-space-4);
}

.ccc-tile {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 4px;
	min-height: 112px;
	padding: var(--ccc-space-4);
	text-decoration: none;
	color: var(--ccc-text, #14181c);
	background: var(--ccc-surface, #fff);
	border: 1px solid var(--ccc-border, #d8dce0);
	border-radius: var(--ccc-radius-md);
	transition: transform var(--ccc-transition-base) ease,
	            box-shadow var(--ccc-transition-base) ease,
	            border-color var(--ccc-transition-base) ease;
}

/* Le chiffre fantôme : le nombre de commerces, très grand, coupé par le bord.
   C'est lui qui remplit la tuile. Sans lui il ne reste qu'un rectangle vide
   avec un mot dedans, et un rectangle vide ne donne envie de rien. */
/* Le chiffre reste, mais lisible et petit : une pastille en haut à droite. */
.ccc-tile__ghost {
	position: absolute;
	top: var(--ccc-space-3);
	right: var(--ccc-space-3);
	display: grid;
	place-items: center;
	min-width: 26px;
	height: 26px;
	padding: 0 8px;
	font-family: var(--ccc-font-body, sans-serif);
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ccc-primary, #173F73);
	background: var(--ccc-primary-subtle, #e8ecf1);
	border-radius: var(--ccc-radius-full);
	pointer-events: none;
}

.ccc-tile__name {
	position: relative;
	font-family: var(--ccc-font-heading, sans-serif);
	font-size: var(--ccc-text-base);
	font-weight: 700;
	line-height: 1.25;
}

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

.ccc-tile:hover,
.ccc-tile:focus-visible {
	transform: translateY(-3px);
	border-color: var(--ccc-primary, #173F73);
	box-shadow: var(--ccc-shadow-lg);
}

.ccc-tile:hover .ccc-tile__ghost,
.ccc-tile:focus-visible .ccc-tile__ghost {
	color: var(--ccc-primary-contrast, #fff);
	background: var(--ccc-primary, #173F73);
}

/* ==========================================================================
   Cartes de commerce
   ========================================================================== */

.ccc-grid-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--ccc-space-6);
}

.ccc-shop {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--ccc-surface, #fff);
	border: 1px solid var(--ccc-border, #d8dce0);
	border-radius: var(--ccc-radius-md);
	transition: transform var(--ccc-transition-base) ease,
	            box-shadow var(--ccc-transition-base) ease;
}

.ccc-shop:hover,
.ccc-shop:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--ccc-shadow-lg);
}

/* `width: 100%` et `align-self: stretch` ne sont pas décoratifs : Bricks rend
   la carte en conteneur flex, et sans eux la vignette se dimensionne sur son
   contenu — 38 px de large, une carte écrasée. */
.ccc-shop__media {
	position: relative;
	width: 100%;
	align-self: stretch;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ccc-primary-subtle, #e8ecf1);
}

/* Bricks enveloppe chaque élément dans un `div` à lui : la vignette et la
   pastille ne sont donc jamais des enfants directs. On vise l'enveloppe. */
.ccc-shop__media > * {
	margin: 0;
}

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

/* Sans image à la une, Bricks rend tout de même son cadre de remplacement.
   Il se superposerait au monogramme : on ne garde que ce qui a une source. */
.ccc-shop__media .brxe-image:not(:has(img)),
.ccc-property__media .brxe-image:not(:has(img)) {
	display: none;
}

/* Repli sans photo. La vignette prend la couleur de la catégorie et porte les
   initiales : reconnaissable, jamais vide, et surtout traité comme le cas
   normal — c'est celui de la grande majorité des fiches. */
/* Posé en absolu et non en flux : il occupe la vignette entière quelle que
   soit l'enveloppe que Bricks intercale au-dessus de lui. */
.ccc-mono {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--ccc-font-heading, sans-serif);
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
	background:
		radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.20), transparent 60%),
		var(--tone, var(--ccc-primary, #173F73));
}

/* Pastille de statut. Elle vit à deux endroits : posée sur une vignette, et
   seule dans un texte. Le placement appartient donc au modificateur — en
   `position:absolute` par défaut, elle disparaissait hors d'un conteneur
   positionné. */
.ccc-shop__status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 5px 11px;
	font-size: var(--ccc-text-xs);
	font-weight: 700;
	white-space: nowrap;
	background: rgba(255, 255, 255, 0.95);
	border-radius: var(--ccc-radius-full);
	box-shadow: var(--ccc-shadow-sm);
}

.ccc-shop__media .ccc-shop__status {
	position: absolute;
	top: var(--ccc-space-3);
	left: var(--ccc-space-3);
}

/* Couleur ET forme : rond plein = ouvert, demi-lune = ferme bientôt, losange =
   fermé, anneau creux = horaire inconnu. Lisible sans distinguer les couleurs,
   lisible imprimé en noir et blanc. */
.ccc-shop__status::before {
	content: '';
	width: 9px;
	height: 9px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--ccc-unknown, #6b757e);
}

.ccc-shop__status.is-open { color: #10603a; }
.ccc-shop__status.is-open::before { background: var(--ccc-open, #1a7f4b); }

.ccc-shop__status.is-closing-soon { color: #7d4e07; }
.ccc-shop__status.is-closing-soon::before {
	background: var(--ccc-closing, #a8690a);
	border-radius: 50% 50% 0 0;
}

.ccc-shop__status.is-closed,
.ccc-shop__status.is-temporarily-closed { color: #8e1e18; }
.ccc-shop__status.is-closed::before,
.ccc-shop__status.is-temporarily-closed::before {
	background: var(--ccc-closed, #b3261e);
	border-radius: 1px;
	transform: rotate(45deg);
}

.ccc-shop__status.is-unknown { color: var(--ccc-text-muted, #6b757e); }
.ccc-shop__status.is-unknown::before {
	background: transparent;
	border: 2px solid var(--ccc-unknown, #6b757e);
}

/* Fanion d'angle : promotion, mise en avant, type d'offre. */
.ccc-flag {
	position: absolute;
	top: var(--ccc-space-3);
	right: 0;
	margin: 0;
	padding: 5px 11px 5px 13px;
	font-size: var(--ccc-text-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ccc-secondary-contrast, #14181c);
	background: var(--ccc-secondary, #F2C14E);
	border-radius: var(--ccc-radius-sm) 0 0 var(--ccc-radius-sm);
}

.ccc-shop__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	padding: var(--ccc-space-4);
}

.ccc-shop__title {
	margin: 0;
	font-family: var(--ccc-font-heading, sans-serif);
	font-size: var(--ccc-text-lg);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.012em;
}

.ccc-shop__title a {
	color: inherit;
	text-decoration: none;
}

.ccc-shop__title a:hover,
.ccc-shop__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

.ccc-shop__actions {
	display: flex;
	gap: var(--ccc-space-2);
	margin-top: auto;
	padding-top: var(--ccc-space-4);
}

/* 44 px : la cible tactile minimale du projet (§18). Le défaut existait déjà
   sur l'accueil à 40 px ; il n'était pas visible tant que ces boutons ne
   figuraient que sur six cartes. */
.ccc-cardaction {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 1;
	min-height: 44px;
	padding: 8px 12px;
	font-size: var(--ccc-text-sm);
	font-weight: 600;
	text-decoration: none;
	color: var(--ccc-primary, #173F73);
	background: var(--ccc-primary-subtle, #e8ecf1);
	border-radius: var(--ccc-radius-sm);
	transition: background-color var(--ccc-transition-fast) ease;
}

.ccc-cardaction:hover,
.ccc-cardaction:focus-visible {
	background: #d7dfe9;
}

/* ==========================================================================
   Filtres rapides
   ========================================================================== */

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

.ccc-quickfilter {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 19px;
	font-family: var(--ccc-font-body, sans-serif);
	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-strong, #b9c0c6);
	border-radius: var(--ccc-radius-full);
	transition: border-color var(--ccc-transition-fast) ease,
	            color var(--ccc-transition-fast) ease,
	            background-color var(--ccc-transition-fast) ease;
}

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

.ccc-quickfilter[aria-pressed='true'],
.ccc-quickfilter.is-active {
	color: var(--ccc-primary-contrast, #fff);
	background: var(--ccc-primary, #173F73);
	border-color: var(--ccc-primary, #173F73);
}

/* ==========================================================================
   Double appel à l'action
   ========================================================================== */

.ccc-grid-duo {
	display: grid;
	gap: var(--ccc-space-6);
}

@media (min-width: 820px) {
	.ccc-grid-duo { grid-template-columns: 1fr 1fr; }
}

.ccc-promo {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ccc-space-4);
	padding: clamp(28px, 3vw, 48px);
	border-radius: var(--ccc-radius-lg);
}

.ccc-promo .brxe-heading {
	max-width: 20ch;
	margin: 0;
	font-family: var(--ccc-font-heading, sans-serif);
	font-size: var(--ccc-text-3xl);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.028em;
}

.ccc-promo p {
	max-width: 46ch;
	margin: 0;
}

.ccc-promo--dark {
	color: #fff;
	background:
		radial-gradient(90% 90% at 100% 0%, rgba(242, 193, 78, 0.22), transparent 55%),
		linear-gradient(150deg, var(--ccc-primary-deep, #0B1F3A), var(--ccc-primary, #173F73));
}

.ccc-promo--dark p { color: rgba(255, 255, 255, 0.82); }

.ccc-promo--light {
	background: var(--ccc-bg-subtle, #f7f8f9);
	border: 1px solid var(--ccc-border, #d8dce0);
}

.ccc-promo--light p { color: var(--ccc-text-muted, #6b757e); }

/* Chiffre en filigrane, coupé par le bord du bloc. */
.ccc-promo__figure {
	display: none;
}

.ccc-promo--light .ccc-promo__figure {
	color: var(--ccc-amber-ink, #8a5606);
	opacity: 0.22;
}

/* ==========================================================================
   États
   ========================================================================== */

/* Une section sans contenu affichait une grille vide : ni explication, ni
   sortie. Le vide doit dire pourquoi, et proposer où aller. */
.ccc-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ccc-space-3);
	padding: var(--ccc-space-6);
	background: var(--ccc-bg-subtle, #f7f8f9);
	border-radius: var(--ccc-radius-md);
}

.ccc-empty__mark {
	font-family: var(--ccc-font-heading, sans-serif);
	font-size: var(--ccc-text-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ccc-accent, #B13C2E);
}

/* Le bloc a un fond teinté : `--ccc-text-muted` y tombe à 4,42:1, contre 4,7
   sur blanc. Mesuré sur le rendu, pas déduit de la déclaration. */
.ccc-empty p {
	margin: 0;
	font-size: var(--ccc-text-sm);
	color: var(--ccc-neutral-700, #3c454d);
}

/* ==========================================================================
   Réduction des animations
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.ccc-hero__eyebrow::before { animation: none; }
	.ccc-ticker__track { animation: none; }

	.ccc-tile,
	.ccc-shop,
	.ccc-chip,
	.ccc-quickfilter,
	.ccc-cardaction {
		transition: none;
	}

	.ccc-tile:hover,
	.ccc-shop:hover {
		transform: none;
	}
}

/* ==========================================================================
   Bandeau de titre de page
   ========================================================================== */

/* Les pages qui ne sont pas l'accueil ouvrent sur un bandeau court : de quoi
   situer la page et dire ce qu'on y trouve, sans occuper un écran entier. */
.ccc-pagehead {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--ccc-border, #d8dce0);
	background: var(--ccc-bg-subtle, #f7f8f9);
}

.ccc-pagehead > .brxe-container {
	position: relative;
	z-index: 2;
}

.ccc-pagehead__eyebrow {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding-bottom: 6px;
	font-family: var(--ccc-font-body, sans-serif);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ccc-primary, #173F73);
	border-bottom: 3px solid var(--ccc-secondary, #F2C14E);
}

.ccc-pagehead__title {
	max-width: 26ch;
	margin: 0;
	font-family: var(--ccc-font-heading, sans-serif);
	font-size: var(--ccc-text-5xl);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.032em;
	color: var(--ccc-primary-deep, #0B1F3A);
	text-wrap: balance;
}

.ccc-pagehead__lead {
	max-width: 64ch;
	margin: 0;
	font-size: var(--ccc-text-lg);
	line-height: 1.6;
	color: var(--ccc-text-muted, #6b757e);
}

/* ==========================================================================
   Étapes numérotées
   ========================================================================== */

/* Un parcours en trois temps. Le chiffre est un repère de lecture, pas une
   décoration : il dit qu'il y a un ordre, et lequel. */
.ccc-step {
	display: flex;
	flex-direction: column;
	gap: var(--ccc-space-3);
	padding: var(--ccc-space-6);
	background: var(--ccc-surface, #fff);
	border: 1px solid var(--ccc-border, #d8dce0);
	border-radius: var(--ccc-radius-md);
}

.ccc-step__num {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	font-family: var(--ccc-font-body, sans-serif);
	font-size: var(--ccc-text-sm);
	font-weight: 700;
	color: var(--ccc-primary-contrast, #fff);
	background: var(--ccc-primary, #173F73);
	border-radius: 50%;
}

.ccc-step__title {
	margin: 0;
	font-size: var(--ccc-text-xl);
	line-height: 1.2;
}

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

/* ==========================================================================
   Carte d'information
   ========================================================================== */

.ccc-infocard {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ccc-space-3);
	padding: var(--ccc-space-6);
	background: var(--ccc-surface, #fff);
	border: 1px solid var(--ccc-border, #d8dce0);
	border-radius: var(--ccc-radius-md);
	transition: border-color var(--ccc-transition-base) ease,
	            box-shadow var(--ccc-transition-base) ease;
}

.ccc-infocard:hover,
.ccc-infocard:focus-within {
	border-color: var(--ccc-primary, #173F73);
	box-shadow: var(--ccc-shadow-md);
}

.ccc-infocard__title {
	margin: 0;
	font-size: var(--ccc-text-xl);
	line-height: 1.2;
}

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

.ccc-infocard .ccc-seeall {
	margin-top: auto;
}

/* ==========================================================================
   Parkings et cellules commerciales
   ========================================================================== */

.ccc-parking {
	display: flex;
	flex-direction: column;
	gap: var(--ccc-space-2);
	padding: var(--ccc-space-4) var(--ccc-space-6);
	background: var(--ccc-surface, #fff);
	border: 1px solid var(--ccc-border, #d8dce0);
	border-radius: var(--ccc-radius-md);
	border-left: 4px solid var(--ccc-primary, #173F73);
}

.ccc-parking__title {
	margin: 0;
	font-size: var(--ccc-text-lg);
	line-height: 1.2;
}

.ccc-parking__title a {
	color: inherit;
	text-decoration: none;
}

.ccc-parking__title a:hover,
.ccc-parking__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

.ccc-space {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--ccc-surface, #fff);
	border: 1px solid var(--ccc-border, #d8dce0);
	border-radius: var(--ccc-radius-md);
	transition: transform var(--ccc-transition-base) ease,
	            box-shadow var(--ccc-transition-base) ease;
}

.ccc-space:hover,
.ccc-space:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--ccc-shadow-lg);
}

.ccc-space__media {
	position: relative;
	width: 100%;
	align-self: stretch;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--ccc-primary-subtle, #e8ecf1);
}

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

.ccc-space__media .brxe-image:not(:has(img)) {
	display: none;
}

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

.ccc-space__title {
	margin: 0;
	font-size: var(--ccc-text-lg);
	line-height: 1.2;
}

.ccc-space__title a {
	color: inherit;
	text-decoration: none;
}


/* Bricks rend la légende de l'image (son texte alternatif) en surimpression :
   sur une vignette de carte, elle recouvre la photo d'une bande grise. */
.ccc-shop__media figcaption,
.ccc-property__media figcaption,
.ccc-space__media figcaption,
.ccc-hero__media figcaption {
	display: none;
}

/* --------------------------------------------------------------------------
   Hero plein cadre

   Les variables `--ccc-home-*` sont un point de réglage local : une commune
   qui veut décaler l'accueil sans toucher au reste du site n'a qu'elles à
   redéfinir. Elles pointent toutes sur des jetons, jamais sur une valeur.
   -------------------------------------------------------------------------- */

.ccc-home {
	--ccc-home-ink: var(--ccc-primary-deep, #0B1F3A);
	--ccc-home-forest: var(--ccc-primary, #173F73);
	--ccc-home-moss: var(--ccc-bg-subtle, #f7f8f9);
	--ccc-home-paper: var(--ccc-bg-subtle, #f7f8f9);
	--ccc-home-coral: var(--ccc-accent, #B13C2E);
	--ccc-home-gold: var(--ccc-secondary-hover, #d5aa45);
	--ccc-home-blue: var(--ccc-primary, #173F73);
	--ccc-home-ink-92: color-mix(in srgb, var(--ccc-home-ink) 92%, transparent);
	--ccc-home-ink-82: color-mix(in srgb, var(--ccc-home-ink) 82%, transparent);
	--ccc-home-ink-62: color-mix(in srgb, var(--ccc-home-ink) 62%, transparent);
	--ccc-home-ink-38: color-mix(in srgb, var(--ccc-home-ink) 38%, transparent);
	--ccc-home-ink-34: color-mix(in srgb, var(--ccc-home-ink) 34%, transparent);
	--ccc-home-ink-18: color-mix(in srgb, var(--ccc-home-ink) 18%, transparent);
	--ccc-home-ink-14: color-mix(in srgb, var(--ccc-home-ink) 14%, transparent);
	--ccc-home-ink-10: color-mix(in srgb, var(--ccc-home-ink) 10%, transparent);
	--ccc-home-paper-94: color-mix(in srgb, var(--ccc-bg) 94%, transparent);
	--ccc-home-paper-78: color-mix(in srgb, var(--ccc-bg) 78%, transparent);
	--ccc-home-paper-68: color-mix(in srgb, var(--ccc-bg) 68%, transparent);
	--ccc-home-paper-54: color-mix(in srgb, var(--ccc-bg) 54%, transparent);
	--ccc-home-paper-48: color-mix(in srgb, var(--ccc-bg) 48%, transparent);
	--ccc-home-paper-28: color-mix(in srgb, var(--ccc-bg) 28%, transparent);
	--ccc-home-paper-20: color-mix(in srgb, var(--ccc-bg) 20%, transparent);
	--ccc-home-paper-12: color-mix(in srgb, var(--ccc-bg) 12%, transparent);
	--ccc-home-text-92: color-mix(in srgb, var(--ccc-text-inverse) 92%, transparent);
	--ccc-home-text-78: color-mix(in srgb, var(--ccc-text-inverse) 78%, transparent);
	--ccc-home-shadow-35: color-mix(in srgb, var(--ccc-neutral-900) 35%, transparent);
	--ccc-home-shadow-34: color-mix(in srgb, var(--ccc-neutral-900) 34%, transparent);
	--ccc-home-shadow-32: color-mix(in srgb, var(--ccc-neutral-900) 32%, transparent);
	--ccc-home-shadow-30: color-mix(in srgb, var(--ccc-neutral-900) 30%, transparent);
	--ccc-home-shadow-28: color-mix(in srgb, var(--ccc-neutral-900) 28%, transparent);
	--ccc-home-shadow-16: color-mix(in srgb, var(--ccc-neutral-900) 16%, transparent);
	--ccc-home-primary-66: color-mix(in srgb, var(--ccc-primary) 66%, transparent);
	--ccc-home-primary-54: color-mix(in srgb, var(--ccc-primary) 54%, transparent);
	--ccc-home-open-16: color-mix(in srgb, var(--ccc-open) 16%, transparent);
	--ccc-home-coral-28: color-mix(in srgb, var(--ccc-home-coral) 28%, transparent);
	--ccc-home-gold-94: color-mix(in srgb, var(--ccc-secondary) 94%, transparent);
	--ccc-home-gold-34: color-mix(in srgb, var(--ccc-secondary) 34%, transparent);
	--ccc-home-gold-22: color-mix(in srgb, var(--ccc-secondary) 22%, transparent);
	background: var(--ccc-home-paper);
}

.ccc-home .ccc-hero {
	min-height: clamp(620px, 82vh, 820px);
	padding-block: clamp(42px, 7vw, 96px) clamp(54px, 7vw, 104px);
	color: var(--ccc-text-inverse);
	background:
		linear-gradient(90deg, var(--ccc-home-ink-92) 0%, var(--ccc-home-ink-82) 36%, var(--ccc-home-ink-34) 66%, var(--ccc-home-ink-10) 100%),
		linear-gradient(180deg, var(--ccc-home-ink-18), var(--ccc-home-ink-38)),
		var(--ccc-hero-image, none) center center / cover no-repeat,
		var(--ccc-home-forest);
}

.ccc-home .ccc-hero::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 120px;
	background: linear-gradient(180deg, transparent, var(--ccc-home-paper));
	pointer-events: none;
}

.ccc-home .ccc-hero > .brxe-container {
	min-height: auto;
	grid-template-columns: minmax(0, 760px);
	justify-content: start;
	gap: 0;
}

.ccc-home .ccc-hero__media {
	display: none;
}

.ccc-home .ccc-hero__text {
	max-width: 760px;
	padding-block: clamp(34px, 6vw, 86px);
}

.ccc-home .ccc-hero__eyebrow {
	gap: 12px;
	margin-bottom: 18px;
	font-size: 15px;
	color: var(--ccc-primary-subtle, #e8ecf1);
	text-shadow: 0 1px 18px var(--ccc-home-shadow-28);
}

.ccc-home .ccc-hero__eyebrow::before {
	background: var(--ccc-open, #1a7f4b);
	box-shadow: 0 0 0 6px var(--ccc-home-open-16);
	animation: none;
}

.ccc-home .ccc-hero__title {
	max-width: 10.8ch;
	font-family: var(--ccc-font-heading, sans-serif);
	font-size: clamp(52px, 34px + 5.4vw, 108px);
	font-weight: 900;
	line-height: 0.93;
	letter-spacing: -0.018em;
	color: var(--ccc-text-inverse);
	text-shadow: 0 22px 64px var(--ccc-home-shadow-32);
}

.ccc-home .ccc-mark {
	color: var(--ccc-secondary, #F2C14E);
}

.ccc-home .ccc-mark::after {
	bottom: -0.02em;
	height: 0.08em;
	background: var(--ccc-secondary, #F2C14E);
}

.ccc-home .ccc-hero__lead {
	max-width: 58ch;
	margin-top: 24px;
	margin-bottom: 26px;
	font-size: clamp(18px, 16px + 0.55vw, 22px);
	line-height: 1.58;
	color: var(--ccc-home-text-92);
	text-shadow: 0 10px 34px var(--ccc-home-shadow-32);
}

.ccc-home .ccc-hero__search {
	width: min(100%, 720px);
}

.ccc-home .ccc-hero__search .ccc-search {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	width: 100%;
	max-width: none;
	min-height: 72px;
	margin: 0;
	padding: 10px;
	background: var(--ccc-home-paper-94);
	border: 1px solid var(--ccc-home-paper-68);
	border-radius: 14px;
	box-shadow:
		0 28px 80px var(--ccc-home-shadow-30),
		inset 0 0 0 1px var(--ccc-home-paper-48);
	backdrop-filter: blur(14px);
}

.ccc-home .ccc-hero__search .ccc-search::before {
	content: '';
	position: absolute;
	left: 25px;
	top: 50%;
	width: 16px;
	height: 16px;
	border: 2px solid var(--ccc-home-primary-66);
	border-radius: 50%;
	transform: translateY(-58%);
	pointer-events: none;
}

.ccc-home .ccc-hero__search .ccc-search::after {
	content: '';
	position: absolute;
	left: 39px;
	top: 50%;
	width: 8px;
	height: 2px;
	background: var(--ccc-home-primary-66);
	border-radius: 2px;
	transform: translateY(7px) rotate(45deg);
	pointer-events: none;
}

.ccc-home .ccc-hero__search .ccc-search input[type='search'] {
	min-height: 52px;
	padding: 0 8px 0 42px;
	font-size: 17px;
	color: var(--ccc-home-ink);
}

.ccc-home .ccc-hero__search .ccc-search input[type='search']::placeholder {
	color: var(--ccc-home-primary-54);
}

.ccc-home .ccc-hero__search .ccc-search__submit {
	min-width: 132px;
	min-height: 52px;
	padding-inline: 20px;
	border-radius: 10px;
	background: var(--ccc-home-coral);
	color: var(--ccc-text-inverse);
	box-shadow: 0 12px 28px var(--ccc-home-coral-28);
}

.ccc-home .ccc-hero__search .ccc-search__submit:hover,
.ccc-home .ccc-hero__search .ccc-search__submit:focus-visible {
	background: var(--ccc-accent-hover, #8f3025);
}

.ccc-home .ccc-hero__search .ccc-search:focus-within {
	border-color: var(--ccc-home-gold-94);
	box-shadow:
		0 30px 86px var(--ccc-home-shadow-34),
		0 0 0 4px var(--ccc-home-gold-34);
}

.ccc-home .ccc-hero__search .ccc-search + p,
.ccc-home .ccc-hero__search .ccc-search__hint,
.ccc-home .ccc-search__hint {
	color: var(--ccc-home-text-78);
	text-shadow: 0 7px 22px var(--ccc-home-shadow-35);
}

.ccc-home .ccc-chip {
	color: var(--ccc-text-inverse);
	background: var(--ccc-home-paper-12);
	border-color: var(--ccc-home-paper-28);
	box-shadow: 0 10px 28px var(--ccc-home-shadow-16);
	backdrop-filter: blur(12px);
}

.ccc-home .ccc-chip:hover,
.ccc-home .ccc-chip:focus-visible {
	color: var(--ccc-text-inverse);
	background: var(--ccc-home-paper-20);
	border-color: var(--ccc-home-paper-54);
}

.ccc-home .ccc-chip--accent {
	background: var(--ccc-home-gold);
	border-color: var(--ccc-home-gold);
	color: var(--ccc-home-ink);
}

.ccc-home .ccc-ticker {
	background: var(--ccc-home-ink);
}

.ccc-home .ccc-section--plain {
	background: var(--ccc-bg);
}

.ccc-home .ccc-section--tint,
.ccc-home .ccc-section--accent {
	background: linear-gradient(180deg, var(--ccc-bg-subtle), var(--ccc-bg));
}

.ccc-home .ccc-sectionhead__num {
	background: var(--ccc-home-coral);
}

.ccc-home .ccc-sectionhead h2,
.ccc-home .ccc-sectionhead .brxe-heading,
.ccc-home .ccc-tile__name {
	color: var(--ccc-home-ink);
}

.ccc-home .ccc-seeall {
	color: var(--ccc-home-forest);
}

.ccc-home .ccc-tile,
.ccc-home .ccc-shop,
.ccc-home .ccc-event,
.ccc-home .ccc-property {
	border-color: var(--ccc-home-ink-10);
	box-shadow: 0 18px 44px color-mix(in srgb, var(--ccc-home-ink) 8%, transparent);
}

.ccc-home .ccc-tile__ghost {
	color: var(--ccc-home-forest);
	background: var(--ccc-home-moss);
}

.ccc-home .ccc-promo--dark {
	background:
		linear-gradient(135deg, var(--ccc-home-gold-22), transparent 38%),
		var(--ccc-home-ink);
}

@media (max-width: 760px) {
	.ccc-home .ccc-hero {
		min-height: auto;
		padding-block: 30px 34px;
		background:
			linear-gradient(180deg, var(--ccc-home-ink-92), var(--ccc-home-ink-62) 54%, var(--ccc-home-ink-14)),
			var(--ccc-hero-image, none) center top / cover no-repeat,
			var(--ccc-home-forest);
	}

	.ccc-home .ccc-hero > .brxe-container {
		grid-template-columns: 1fr;
	}

	.ccc-home .ccc-hero__text {
		padding-block: 18px 0;
	}

	.ccc-home .ccc-hero__title {
		max-width: 9.8ch;
		font-size: clamp(46px, 20px + 10vw, 64px);
	}

	.ccc-home .ccc-hero__lead {
		margin-top: 20px;
		font-size: 17px;
	}

	.ccc-home .ccc-hero__search .ccc-search {
		grid-template-columns: 1fr 48px;
		min-height: 60px;
		padding: 7px;
		border-radius: 12px;
	}

	.ccc-home .ccc-hero__search .ccc-search input[type='search'] {
		min-height: 48px;
		padding-left: 38px;
		font-size: 15px;
	}

	.ccc-home .ccc-hero__search .ccc-search__submit {
		min-width: 48px;
		width: 48px;
		min-height: 48px;
		border-radius: 9px;
	}

	.ccc-home .ccc-chip {
		width: calc(50% - 5px);
	}
}