/**
 * En-tête et pied de page.
 *
 * « Chrome » du site : ce qui entoure le contenu et reste identique partout.
 *
 * Choix assumé sur la navigation mobile : pas de menu hamburger. Avec cinq
 * entrées, un menu repliable ajoute un état, du JavaScript et un piège de
 * focus à maintenir, pour cacher ce qui tient à l'écran. On fait défiler
 * horizontalement — toujours visible, toujours accessible, aucun script.
 */

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

.ccc-header {
	position: sticky;
	top: 0;
	z-index: var(--ccc-z-header, 200);
	background: var(--ccc-surface, #fff);
	border-bottom: 1px solid var(--ccc-border, #d8dce0);
}

/* La barre d'administration de WordPress occupe déjà le haut de l'écran. */
.admin-bar .ccc-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .ccc-header {
		top: 46px;
	}
}

.ccc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ccc-space-6);
	min-height: 72px;
}

/* --- Marque --------------------------------------------------------------- */

.ccc-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--ccc-space-3);
	color: var(--ccc-text, #14181c);
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	margin: 0;
}

/* Le sceau : deux initiales dans un carré au coin coupé, en texte et non en
   image. Aucune commune ne fournira de logo pour cette plateforme, et une
   marque qui tient en CSS se transpose telle quelle à la commune suivante. */
.ccc-seal {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	font-family: var(--ccc-font-heading, sans-serif);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.01em;
	color: var(--ccc-primary-contrast, #fff);
	background: var(--ccc-primary, #173F73);
	clip-path: polygon(0 0, 100% 0, 100% 74%, 74% 100%, 0 100%);
}

.ccc-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
	min-width: 0;
}

.ccc-brand__name {
	font-family: var(--ccc-font-heading, sans-serif);
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.022em;
	color: var(--ccc-primary-deep, #0B1F3A);
}

.ccc-brand__city {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ccc-text-muted, #6b757e);
}

/* Sur les écrans étroits, le sceau suffit à identifier le site : le nom
   complet mangerait la place de la navigation. */
@media (max-width: 640px) {
	.ccc-brand__text {
		display: none;
	}
}

/* --- Navigation ----------------------------------------------------------- */

.ccc-nav {
	display: flex;
	align-items: center;
	gap: var(--ccc-space-1);
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.ccc-nav::-webkit-scrollbar {
	display: none;
}

.ccc-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--ccc-space-3);
	border-radius: var(--ccc-radius-sm);
	font-family: var(--ccc-font-body, sans-serif);
	font-size: var(--ccc-text-sm);
	font-weight: 600;
	white-space: nowrap;
	color: var(--ccc-text, #14181c);
	text-decoration: none;
	transition: background-color var(--ccc-transition-fast) ease;
}

.ccc-nav a:hover,
.ccc-nav a:focus-visible {
	background: var(--ccc-bg-subtle, #f7f8f9);
	color: var(--ccc-primary, #173F73);
}

/* --- Indicateur d'ouverture ------------------------------------------------ */

/* Le compteur était masqué sous 900 px, faute de place. C'était la seule
   information vivante de la barre, et celle que le site promet : on la garde
   partout, et c'est le libellé qui raccourcit. */
.ccc-livecount {
	display: inline-flex;
	align-items: center;
	gap: var(--ccc-space-2);
	padding: 6px 14px;
	border-radius: var(--ccc-radius-full);
	background: var(--ccc-secondary-subtle, #fef9ed);
	border: 1px solid rgba(242, 193, 78, 0.55);
	color: var(--ccc-text, #14181c);
	font-family: var(--ccc-font-body, sans-serif);
	font-size: var(--ccc-text-sm);
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	flex-shrink: 0;
	margin: 0;
}

.ccc-livecount:hover,
.ccc-livecount:focus-visible {
	background: #fdf3dd;
}

/* Le point bat lentement : sans mouvement, « en direct » n'est qu'une
   affirmation. L'animation est purement décorative et disparaît sous
   `prefers-reduced-motion`. */
.ccc-dot {
	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;
}

@keyframes ccc-pulse {
	70% { box-shadow: 0 0 0 8px rgba(26, 127, 75, 0); }
	100% { box-shadow: 0 0 0 0 rgba(26, 127, 75, 0); }
}

.ccc-livecount__short { display: none; }

@media (max-width: 900px) {
	.ccc-livecount__long { display: none; }
	.ccc-livecount__short { display: inline; }
}

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

/* ==========================================================================
   Pied de page
   ========================================================================== */

/* Bleu profond plutôt que gris anthracite : le pied de page ferme la page sur
   la couleur de la commune, pas sur un neutre interchangeable. */
/* Pied de page clair, séparé par un filet : sur un site entièrement lumineux,
   un grand bloc sombre en bas coupe la page au lieu de la fermer. */
.ccc-footer {
	color: var(--ccc-text-muted, #6b757e);
	background: var(--ccc-bg-subtle, #f7f8f9);
	border-top: 1px solid var(--ccc-border, #d8dce0);
}

.ccc-footer .ccc-seal {
	color: var(--ccc-primary-contrast, #fff);
	background: var(--ccc-primary, #173F73);
}

.ccc-footer .ccc-brand__name { color: var(--ccc-primary-deep, #0B1F3A); }
.ccc-footer .ccc-brand__city { color: var(--ccc-text-muted, #6b757e); }

.ccc-footer .brxe-heading {
	color: var(--ccc-primary-deep, #0B1F3A);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	font-family: var(--ccc-font-body, sans-serif);
	margin: 0 0 var(--ccc-space-3);
}

.ccc-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr repeat(3, 1fr);
	gap: var(--ccc-space-8);
}

@media (max-width: 900px) {
	.ccc-footer__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--ccc-space-6);
	}
}

@media (max-width: 480px) {
	.ccc-footer__grid {
		grid-template-columns: 1fr;
	}
}

.ccc-footer__brand {
	font-family: var(--ccc-font-heading, Georgia, serif);
	font-size: var(--ccc-text-2xl);
	font-weight: 700;
	color: #fff;
	margin: 0 0 var(--ccc-space-2);
	letter-spacing: -0.02em;
}

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

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

.ccc-footer__list a,
.ccc-footer__list .brxe-text-basic {
	font-family: var(--ccc-font-body, sans-serif);
	font-size: var(--ccc-text-sm);
	line-height: 1.5;
	color: var(--ccc-text, #14181c);
	text-decoration: none;
	margin: 0;
	transition: color var(--ccc-transition-fast) ease;
}

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

/* --- Barre légale ---------------------------------------------------------- */

.ccc-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ccc-space-4);
	flex-wrap: wrap;
	padding-top: var(--ccc-space-6);
	margin-top: var(--ccc-space-8);
	border-top: 1px solid var(--ccc-border, #d8dce0);
}

.ccc-footer__bottom .brxe-text-basic,
.ccc-footer__bottom a {
	font-size: var(--ccc-text-xs);
	color: var(--ccc-text-muted, #6b757e);
	margin: 0;
	text-decoration: none;
}

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

.ccc-footer__legal {
	display: flex;
	gap: var(--ccc-space-4);
	flex-wrap: wrap;
}

/* Attribution des sources de données : discrète mais jamais absente, la
   licence l'exige. */
.ccc-footer__credit {
	margin: 0;
	font-size: var(--ccc-text-xs);
	color: var(--ccc-text-muted, #6b757e);
}

/* ==========================================================================
   Lien d'évitement
   Premier élément focalisable de la page : il permet d'atteindre le contenu
   sans traverser la navigation au clavier (§18).
   ========================================================================== */

.ccc-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--ccc-z-modal, 400);
	padding: var(--ccc-space-3) var(--ccc-space-4);
	background: var(--ccc-surface, #fff);
	color: var(--ccc-text, #14181c);
	font-weight: 600;
	border: 2px solid var(--ccc-primary, #173F73);
	border-radius: var(--ccc-radius-sm);
	text-decoration: none;
}

.ccc-skip:focus {
	left: var(--ccc-space-3);
	top: var(--ccc-space-3);
}

@media (prefers-reduced-motion: reduce) {
	.ccc-nav a,
	.ccc-footer__list a {
		transition: none;
	}
}

/* Conteneurs internes : mêmes largeurs que les containers Bricks. */
.ccc-header__inner,
.ccc-footer__inner {
	width: 100%;
	max-width: var(--ccc-width-wide, 1200px);
	margin-inline: auto;
	padding-inline: var(--ccc-space-6);
}

.ccc-footer__inner {
	padding-block: var(--ccc-space-16) var(--ccc-space-10);
}

/* Ancre du lien d'évitement : présente dans le flux sans rien occuper. */
#ccc-main {
	display: block;
	height: 0;
	overflow: hidden;
}