.panel-type {
	display: flex; /* Afficher les elements en ligne */
	flex-direction: row;
    align-items: center; /* Aligner verticalement les elements sur la ligne */
    justify-content: space-between; /* Répartir l'espace disponible entre les elements */
    padding: 10px;
	background-color: var(--black_base_color);
	width: 100%;
}

.panel-type_name {
	font-size: 1.8rem;
	font-weight: bold;
	color: white;
}

.panel-type_action {
	display: flex;
	flex-direction: row;
	justify-content:center;
	align-items: center;
	background-color: transparent;
	gap: 5px;
}

.panel-view {
	display: flex;
	flex-direction: column;
}

.panel-view--aside {
	background-color: transparent;
	padding: 10px;
}

.panel-view--section {
	background-color: var(--secondary_light_color);
}

.panel-view--footer {
	background-color: var(--primary_base_color);
}

.panel-view--section + .panel-view--section, .panel-view--footer + .panel-view--footer {
	margin-top: 10px;
}

.panel-view__header {
	display: flex;
	align-items: center; /* centre verticalement si besoin */
	justify-content: space-between; /* espace entre titre et bouton */
	width: 100%;
	margin: 0;
}

.panel-view--aside .panel-view__header {
	background-color: var(--tertiary_light_color);
	border: 1px solid var(--tertiary_dark_color);
	border-radius: 5px;
	padding: 5px;
}

.panel-view--section .panel-view__header {
	background-color: var(--secondary_base_color);
	padding: 10px;
}

.panel-view--footer .panel-view__header {
	background-color: transparent;
	padding: 10px;
}

.panel-view__title {
	flex: 1; /* prend toute la largeur restante */
  	margin: 0; /* supprime marges par défaut de <p> */
  	overflow: hidden; /* évite débordement si trop long */
  	text-overflow: ellipsis; /* affiche "..." si le texte dépasse */
  	white-space: nowrap; /* garde le titre sur une ligne */
  	text-align: center;
}

.panel-view--aside .panel-view__title {
	color: var(--tertiary_dark_color);
  	font-size: 1.6rem;
}

.panel-view--section .panel-view__title {
	color: var(--white_color);
  	font-size: 1.8rem;
}

.panel-view--footer .panel-view__title {
	display: flex;
	align-items: center;
	white-space: nowrap;
	color: var(--white_color);
	font-size: 1.1rem;
	font-weight: bold;
}

.panel-view--footer .panel-view__title::before, .panel-view--footer .panel-view__title::after {
    content: "";
    flex-grow: 1;
    height: 1px;
	margin: 0;
    background-color: var(--primary_light_color); /* Couleur du trait */
}

.panel-view__title--unlocked {
	cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease; /* transition douce */
}

.panel-view__title--unlocked:hover {
	/*background-color: rgba(0,0,0,0.4);*/
	color: rgb(21, 70, 102);
}

.panel-view__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	row-gap: 10px;
}

.panel-view--aside .panel-view__body {
	background-color: var(--white_color);
	color: var(--tertiary_dark_color);
	font-size: 1rem;
	border: 1px solid var(--tertiary_dark_color);
	border-radius: 5px;
	margin-top: 5px;
	padding: 10px;
}

.panel-view--section .panel-view__body {
	color: var(--secondary_dark_color);
	padding: 10px;
}

.panel-view--footer .panel-view__body {
	color: var(--primary_dark_color);
	padding: 5px 10px;
}

.link-element {
	display: flex;
	align-items: center;
	transition: all 0.3s ease;
	text-decoration: none;
	font-size: 1rem;
	cursor: pointer;
	width: 100%;
	padding: 10px;
	color: var(--tertiary_dark_color);
	background-color: var(--white_color);
	border: 1px solid var(--grey_light_color);
	border-radius: 5px;
}

.link-element:hover {
	text-decoration: none;
    background-color: var(--tertiary_light_color);
	color: var(--tertiary_dark_color);
}

.link-element__icon {
    display: block;
	width: auto;
    max-height: 120px;
	margin-right: 10px;
}

.link-element__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.link-element__title {
    font-weight: bold;
}

.link-element__description {
    margin: 0;
	text-align: justify; /* Ajout de la justification du texte */
}

.paragraph-element {
	width: 100%;
	margin: 0;
}

.paragraph-element--section {
	font-size: 1.2rem;
	font-weight: normal;
	text-align: justify;
}

.paragraph-element--footer {
	font-size: 1rem;;
	font-weight: normal;
	text-align: center;
}

.map-element {
	width: 100%;
	margin: 0;
}

.map-element__frame {
	display: block;
	margin: 0;
    padding: 0;
    width: 100%;
    height: 350px;
    border: 1px solid var(--grey_light_color);
}

.map-element__frame--unlocked {
	pointer-events: none;
}

.link-element--unlocked, .paragraph-element--unlocked, .map-element--unlocked {
  position: relative;
  cursor: pointer;
  border-radius: 0px;
  transition: background-color 0.25s ease, outline-color 0.25s ease, outline-offset 0.25s ease, box-shadow 0.25s ease;
}

.link-element--unlocked:hover, .paragraph-element--unlocked:hover, .map-element--unlocked:hover {
  outline: 2px solid rgba(52, 152, 219, 0.6);
  outline-offset: 4px;
  background: rgba(52, 152, 219, 0.3); /* halo bleu doux */
  box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.2); /* halo doux simulant le fond externe */
}