/* ==========================================================================
   Hub ville
   ========================================================================== */

.single-ir_commune #page.grid-container { max-width: none; padding: 0; margin: 0; }
.single-ir_commune #content.site-content { padding: 0; display: block; }
.single-ir_commune .site-main { margin: 0; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.ir-commune__hero {
	position: relative;
	color: #fff;
	background: linear-gradient(150deg, #0B2C3C 0%, #10425A 52%, #0C5E6C 100%);
	padding-block: clamp(44px, 7vw, 88px);
	overflow: hidden;
}

.ir-commune__hero--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--ir-hero-image);
	background-size: cover;
	background-position: center;
}

.ir-commune__hero--image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(95deg, rgba(11, 44, 60, .92) 0%, rgba(11, 44, 60, .74) 46%, rgba(11, 44, 60, .3) 100%);
}

.ir-commune__hero-corps { position: relative; z-index: 1; }

.ir-puce {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .28);
	color: #fff;
	font-family: var(--titre);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 6px 13px;
	border-radius: 100px;
	text-decoration: none;
	margin-bottom: 18px;
}

.ir-puce:hover { background: rgba(255, 255, 255, .26); color: #fff; }

.ir-commune__h1 {
	color: #fff;
	font-size: clamp(2.4rem, 6.4vw, 4.2rem);
	font-weight: 800;
	margin: 0;
	line-height: 1;
}

.ir-commune__accroche {
	font-size: clamp(1.25rem, 2.6vw, 1.8rem);
	color: #FFB271;
	margin: 10px 0 0;
	line-height: 1.25;
}

.ir-commune__intro {
	font-size: clamp(1rem, 1.5vw, 1.12rem);
	color: rgba(255, 255, 255, .88);
	max-width: 58ch;
	margin: 18px 0 0;
}

/* --------------------------------------------------------------------------
   Onglets collants
   -------------------------------------------------------------------------- */

.ir-onglets {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--blanc);
	border-bottom: 1px solid var(--trait);
	box-shadow: 0 1px 0 rgba(14, 52, 70, .04);
}

.ir-onglets ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.ir-onglets a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	padding: 15px 16px;
	font-family: var(--titre);
	font-size: 14.5px;
	font-weight: 500;
	color: var(--encre-2);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	transition: color .15s, border-color .15s;
}

.ir-onglets svg { color: var(--encre-3); }

.ir-onglets a:hover,
.ir-onglets a:focus-visible {
	color: var(--nuit);
	border-bottom-color: var(--lagon);
}

.ir-onglets a:hover svg { color: var(--lagon-fonce); }

/* Les ancres ne doivent pas passer sous la barre collante. */
.ir-commune [id] { scroll-margin-top: 68px; }

/* --------------------------------------------------------------------------
   Présentation et fiche d'identité
   -------------------------------------------------------------------------- */

.ir-presentation__grille { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }

@media (min-width: 940px) {
	.ir-presentation__grille { grid-template-columns: minmax(0, 1fr) 380px; }
}

.ir-presentation__texte { font-size: 17px; line-height: 1.7; color: var(--encre-2); }
.ir-presentation__texte > * + * { margin-top: 1.1em; }
.ir-presentation__texte p { max-width: 66ch; }
.ir-presentation__attente { color: var(--encre-3); font-style: italic; }

.ir-identite {
	background: var(--sable-2);
	border: 1px solid var(--trait);
	border-radius: var(--rayon);
	padding: 24px 26px;
}

.ir-identite dl { margin: 0; display: grid; gap: 16px; }
.ir-identite__ligne { display: grid; gap: 2px; }

.ir-identite dt {
	font-family: var(--titre);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--encre-3);
}

.ir-identite dd { margin: 0; font-size: 15.5px; color: var(--nuit); }

.ir-identite__carte {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--trait);
	width: 100%;
	font-family: var(--titre);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--lagon-fonce);
	text-decoration: none;
}

.ir-identite__carte:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Sections agrégées et alentours
   -------------------------------------------------------------------------- */

.ir-commune__section .ir-cartes,
.ir-alentours .ir-cartes { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.ir-voisines {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.ir-voisines a {
	display: grid;
	gap: 2px;
	padding: 16px 18px;
	background: var(--blanc);
	border: 1px solid var(--trait);
	border-radius: var(--rayon);
	text-decoration: none;
	transition: border-color .18s ease, transform .18s ease;
}

.ir-voisines a:hover { border-color: var(--lagon); transform: translateY(-2px); }

.ir-voisine__nom { font-family: var(--titre); font-size: 16px; font-weight: 600; color: var(--nuit); }
.ir-voisine__secteur { font-size: 13px; color: var(--encre-3); }

.ir-voisine__distance {
	margin-top: 6px;
	font-family: var(--titre);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--brasier);
	font-variant-numeric: tabular-nums;
}

.ir-alentours__note {
	margin: 20px 0 0;
	font-size: 14px;
	color: var(--encre-3);
	max-width: 64ch;
}

/* --------------------------------------------------------------------------
   Carte de situation
   Contours officiels des 24 communes, simplifiés. La commune de la page est
   remplie en orange ; les autres restent en aplat clair pour donner le
   contexte sans distraire.
   -------------------------------------------------------------------------- */

.ir-identite__situation {
	margin: 0 0 22px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--trait);
	display: grid;
	justify-items: center;
	gap: 10px;
}

.ir-carte-ile {
	width: 100%;
	max-width: 300px;
	height: auto;
	display: block;
}

.ir-carte-ile path {
	fill: var(--blanc);
	stroke: var(--rule-strong, #B4C7C7);
	stroke: #C6D6D6;
	stroke-width: 1.6;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.ir-carte-ile path.est-active {
	fill: var(--brasier);
	stroke: var(--brasier-fonce);
	stroke-width: 2;
}

.ir-identite__situation figcaption {
	font-family: var(--titre);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--encre-3);
}