/* ==========================================================================
   Guides pratiques
   Reprend la mise en page des articles, avec les composants propres aux
   fiches de terrain : barème de difficulté, listes de contrôle, urgences.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Numéros d'urgence
   -------------------------------------------------------------------------- */

.ir-urgences {
	background: var(--blanc);
	border: 1px solid var(--trait);
	border-top: 3px solid #C0392B;
	border-radius: var(--rayon);
	padding: 22px 24px;
}

.ir-urgences__titre {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 1rem;
	margin: 0 0 16px;
	color: var(--nuit);
}

.ir-urgences__titre svg { color: #C0392B; }

.ir-urgences ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.ir-urgences li {
	display: grid;
	gap: 1px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--trait);
}

.ir-urgences li:last-child { border-bottom: 0; padding-bottom: 0; }

.ir-urgences__numero {
	font-family: var(--titre);
	font-size: 20px;
	font-weight: 700;
	color: var(--nuit);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
}

.ir-urgences__numero:hover { color: #C0392B; }

.ir-urgences__service {
	font-family: var(--titre);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #C0392B;
}

.ir-urgences__detail { font-size: 13.5px; color: var(--encre-2); line-height: 1.45; margin-top: 3px; }

.ir-urgences__note {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--trait);
	font-size: 13.5px;
	color: var(--encre-3);
}

/* --------------------------------------------------------------------------
   Barème de difficulté
   -------------------------------------------------------------------------- */

.ir-niveaux {
	list-style: none;
	margin: 1.4em 0;
	padding: 0;
	display: grid;
	gap: 1px;
	background: var(--trait);
	border: 1px solid var(--trait);
	border-radius: var(--rayon);
	overflow: hidden;
	max-width: none;
}

.ir-niveaux li {
	background: var(--blanc);
	display: grid;
	grid-template-columns: 6px 1fr;
	gap: 0;
	max-width: none;
}

.ir-niveaux li::before { content: ""; display: block; }
.ir-niveau--facile::before   { background: #4C8B3E; }
.ir-niveau--modere::before   { background: #1E9BB0; }
.ir-niveau--difficile::before{ background: #F0761F; }
.ir-niveau--extreme::before  { background: #B03A2E; }

.ir-niveaux .ir-niveau__corps { padding: 16px 20px; display: grid; gap: 4px; }

.ir-niveau__nom {
	font-family: var(--titre);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.ir-niveau--facile   .ir-niveau__nom { color: #3F7333; }
.ir-niveau--modere   .ir-niveau__nom { color: var(--lagon-fonce); }
.ir-niveau--difficile .ir-niveau__nom { color: var(--brasier-fonce); }
.ir-niveau--extreme  .ir-niveau__nom { color: #B03A2E; }

.ir-niveau__mesure {
	font-family: var(--titre);
	font-size: 15px;
	font-weight: 600;
	color: var(--nuit);
	font-variant-numeric: tabular-nums;
}

.ir-niveaux p { margin: 0; font-size: 15px; color: var(--encre-2); max-width: none; }

/* --------------------------------------------------------------------------
   Listes de contrôle
   -------------------------------------------------------------------------- */

.ir-controle {
	list-style: none;
	margin: 1.4em 0;
	padding: 22px 24px;
	background: var(--sable-2);
	border: 1px solid var(--trait);
	border-radius: var(--rayon);
	display: grid;
	gap: 11px;
	max-width: none;
}

@media (min-width: 640px) {
	.ir-controle { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; }
}

/* Ni grid ni flex sur l'élément de liste : dans les deux cas, le <strong> et
   le texte qui le suit deviennent deux éléments distincts et se retrouvent
   côte à côte au lieu de s'écouler ensemble. La case à cocher est donc sortie
   du flux en position absolue, et le texte reste un simple paragraphe. */
.ir-controle li {
	display: block;
	position: relative;
	padding-left: 27px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--encre-2);
	max-width: none;
}

.ir-controle li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 15px;
	height: 15px;
	border: 2px solid var(--lagon);
	border-radius: 3px;
}

.ir-controle strong::after { content: " "; }

.ir-controle strong { color: var(--nuit); font-family: var(--titre); font-weight: 600; }

/* --------------------------------------------------------------------------
   Avertissement
   -------------------------------------------------------------------------- */

.ir-alerte {
	margin: 1.4em 0;
	padding: 18px 22px;
	background: #FDF2EE;
	border: 1px solid #F0C6B6;
	border-left: 3px solid #C0392B;
	border-radius: 0 var(--rayon-s) var(--rayon-s) 0;
	max-width: none;
}

.ir-alerte p { margin: 0; color: #7A2E22; font-size: 15.5px; max-width: none; }
.ir-alerte p + p { margin-top: .7em; }
.ir-alerte strong { color: #5E241B; }