libreavous/squelettes/scss/styles/_perso.scss

// perso
// les différences

.btn {
    padding: 0.5em 1em;
    font-weight: 500;
	border-radius:0;
	&:hover {
		background: $couleurPrincipaleOn;
		color: $couleurPrincipale !important;
	}
}
span.btn {
	cursor: text;
}
.flex {
	width: 100%;
	clear: both;
}

.page_wrapper {
	background:$couleurPrincipale url('../images/egalizer.png') repeat-x center -300px;
/* 	background-attachment:fixed; */
	@media ($bp-small) {
		background:$couleurPrincipale url('../images/egalizer-480.png') repeat-x center -300px;
	}
}
.page_header {
	padding:0;
	> .page_container {
		background-color:$couleurSecondaire;
		@include flex();
		align-items: stretch;

	}
	.header_title {
		width: 150px;
		padding: 0.5rem 0.5em 0.2rem;
		background: $couleurSecondaire;
		@media (max-width:400px) {
			margin-left: -1.2em;
		}
	}
	.header_menu {
		flex-grow: 2;
		padding:0;
		.nav {
			padding-top:0;
			.nav-list {
				@include flex();
				justify-content: end;
				align-items: stretch;
				background: $couleurPrincipale;
			}
			li {
				margin:0;
			}
			a {
				padding:1.1rem 1rem 1rem;
				margin:0;
				background:$couleurPrincipale !important;
				border:0;
				&:hover, &:active, &:focus, &.on {
					color: $couleurPrincipale !important;
					background: $couleurPrincipaleOn !important;
					border:0;
				}
			}
		}
		.liens {
			margin: 3rem 0 0.7em 0;
			@include flex();
			flex-direction: row-reverse;
			align-items: end;
			.btn {
				padding: 0.7em 1em;
			}
			.sociaux_podcast {
				margin: 0 0 0;
				@include flex();
				align-items: center;
				@include media($bp-small-up) {
					> .btn {
						width: 217px;
					}
				}
			}
			.sociaux {
				display: inline-block;
				font-size: 1.1rem;
				margin: 0 1rem 0 0;
				.socicon {
					background: none !important;
					color: $blancTransparent;
					&:hover, &:focus {
						color: $couleurPrincipaleOn;
					}
				}
			}
			.formulaire_spip.formulaire_abomailman_mini_une_liste {
				width: 217px;
				min-height: 2.5rem;
				position: relative;
				margin: 0 0 0 1rem;
				text-align: left;
				.reponse_formulaire {
					position: absolute;
					top: 0;
					right: 0;
					margin: 0;
					width: 300px;
					z-index: 999;
					transition: transform 0.15s ease-in-out;
					&.masquer {
						transform: scale(0);
					}
				}
			}
			.abonnement {
				position: relative;
				label {
					position: relative;
					font-size: 0.9rem;
					padding-right: 2rem;
					font-weight: 400;
					width: 100%;
					&:after {
						@include triangle(right, white, 8px);
						position: absolute;
						right: 0.6rem;
						top: 50%;
						margin-top: -8px;
					}
					&:hover:after {
						@include triangle(right, $couleurPrincipale, 8px);
					}
				}
				#email {
					position: absolute;
					top: 110%;
					width: 260px;
					right: 0;
					z-index: 1;
					.js & {
						transform: scale(0);
					}
					border: 2px solid $grayLighter;
					transition: transform 0.15s ease-in-out;
					padding: 0.3em 0.8em;
					&:focus-visible { // styles firefox indesirables
						outline: 0;
					}
					&.vu {
						transform: scale(100%);
						box-shadow: 0 0 5px #d0e2f3;
					}
				}
			}
			.formulaire_spip .abonnement button {
				bottom: auto;
				top: 132%;
				height: 2rem;
				transition: transform 0.15s ease-in-out;
				.js & {
					transform: scale(0);
				}
				&.vu {
					transform: scale(100%);
				}
			}
			.btn {
				font-size: 0.9rem;
				.fas:before {
					font-size: 1rem;
				}
				&:hover, &:focus {
					background: $couleurPrincipaleOn;
					color: $couleurPrincipale !important;
					.fas:before {
						color: $couleurPrincipale !important;
					}
				}
			}

		}
	}
	> .page_container .nav > ul .loupe a {
		padding:0;
		i.fa-search {
			padding: 0.5rem;
			background-color: $couleurSecondaire;
/* 			font-size: 1.2rem; */
			border-radius: 50%;
			margin: 0.8em 0.8em 0.5em;
		}
		&:focus, &:active, &:hover {
			background: none !important;
			i.fa-search {
				background-color: $couleurPrincipaleOn;
				color: $couleurPrincipale;
			}
		}
	}
}

.page_header_container {
    align-items: flex-start;
}
.arbo {
	@include visuallyhidden;
}
.postmeta {
	margin: 0 1rem;
}
.encart {
	float: right;
	text-align: right;
	font-size:1.1rem;
	margin-left:2rem;
	span {
		font-size: 115%;
		&.btn {
			background:$couleurSecondaire;
			color: white !important;
			font-weight: 900;
			margin: 0.6rem 0 0.3rem;
			padding: 1.3rem 2rem;
			&:first-letter {
				text-transform: uppercase;
			}
		}
	}
	@include media($bp-xxsmall) {
		float: none;
	}
}
.bientot {
	display: inline-block;
	color: $couleurSecondaire;
	font-weight: 900;
}

//----------------------------------------
//  Boutons
//----------------------------------------

.button,
.formulaire_spip:not(.formulaire_recherche):not(.formulaire_abomailman_mini_une_liste) button,
.formulaire_spip input[type=submit]
{
    @include bouton($couleur-boutons, #fff, $couleurPrincipaleOn);

}
.formulaire_spip.formulaire_recherche form, .button, .formulaire_spip:not(.formulaire_recherche):not(.formulaire_abomailman_mini_une_liste) button, .formulaire_spip input[type="submit"],
html .formulaire_spip input[type="text"] {
	border-radius:0;
}

.sansbordure a.spip_out, a.sansbordure {
    border: 0 !important;
}


.texte_accueil {
	.page_content > article&:not(.annonce) {
		margin-bottom:0;
		margin-top: 4rem;
		padding-right:2rem;
	}
	background-color: white;
	.main {
		padding-bottom: 1rem;
	}
	@include media($bp-medium-up) {
		.flex2 > .main {
			max-width: 60%;
		}
		.flex2 > .aside {
			max-width: 40%;
			padding-left: 4rem;
			@include media($bp-medium) {
				padding-left:2rem;
			}
		}
	}

}
.body__sommaire .page_main .annonce {
		h1 {
			margin-top:0;
		}
	}


.article-resume {
	background-color: white;
	padding: 1rem;
}
.article__texte {
	margin-bottom: 3rem;
}
.article__interactivite {
	> div {
		@include media($bp-small-up){
			@include flex;
		}
		> a {
			margin-left:1rem;
		}
	}
	p {
		margin:0;
	}
}

.page_main {
	overflow: hidden;
}
.page_main_content {
	align-items: start;
	@include media($bp-medium-up) {
		.page_article:not(.article_chronique) & {
			background: white;
			.page_aside {
				margin-left: 0;
			}
		}
	}
}
.composition_emissions, .composition_emission, .composition_chroniques {

	.page_main_content {
		flex-direction: column;
	}
	.page_content, .page_aside {

	}
	.page_content {

	}
}

.page_content, .page_aside, .page_extra {
	> * {
		margin:0 0 2rem;
		padding:1rem 4rem;
		@include clearfix();
		@include media($bp-medium) {
			padding:1rem 2rem;
		}
		&.page_extra {
			padding:0;
		}
		&.btn {
				background: $couleurSecondaire;
				color: white !important;
			&:hover {
				background: $couleurPrincipaleOn;
				color: white !important;
			}
		}
	}
	> article {
		padding:2rem 4rem;
		@include media($bp-medium) {
			padding:2rem 2rem 1rem;
		}
		background-color: white;
		h1 {
			margin:0;
		}
	}
	/*.page_article & > article, .composition_emission & > article, > .texte, > .ps, .rubrique_blog & > section, > .periode,
	.prochaine_emission, .derniere_emission, .page_recherche & {
		background-color:white;
	}*/
	> .ajaxbloc {
		padding-top: 0;
		margin-top: 6rem;
		position: relative;
		.emissions > h2, .emissions > a {
			position: absolute;
			margin-top: -2.6rem;
		}
		.article_blog & {
			margin-top:0;
			padding:1rem 2rem;
			background-color: white;
			.pagination .pagination-items a, .pagination .lien_pagination a {
				color: $couleurPrincipale;
			}
		}
	}
	.composition_blog & > .content {
		margin:0;
	}
}

.page_content {
	.page_rubrique & {
/* 		background-color:#fff; */
	}
	.rubrique_chroniques & .liste.articles {
		margin-top: 3rem;
	}
	@include media($bp-medium-up) {
		> * {
/* 			padding-right:2rem; */
		}

	}
	@include media($bp-large-up) {
	}
}
.page_aside {
	background: white;
	> ul .article-resume {
		padding:0;
	}
	> * {
		@include media($bp-medium-up) {
			padding-left:0;
		}
	}
}
.page_extra {
	background: white;
}

h2 {
	font-weight:900;
}

.fl {
	border-top: 2em solid $couleurPrincipale;
	border-bottom: 2em solid $couleurPrincipale;
	margin: 0 -1000px;
	padding: 2em 1000px;
	background: white;
}
.fb {
	padding:2em 0;
	> h2 {
		margin-top:2em;
	}
}

.photoapril {
	margin-bottom:1em;
}
.galeriephotos {
	float: right;
	font-size:1.2rem;
	line-height: 1.8;
}
.galerie_photoapril figure {
	@include media($bp-large-up) {
		&:first-child {
			text-align: left;
		}
		&:last-child {
			text-align: right;
		}
	}
}

.licence {
	padding:1em;
	line-height:1.2;
	margin-top:2em;
	background:$couleurBackgroundTexteBleu;
}

.detail_emission ul, ul.spip, li ul.spip, .sujets > ul {
	@include liste-triangle;
	margin-left:0;
}
ul.spip {
	ul.spip {
		margin-left:1rem;
	}
}


.btn.blanc {
	color: $couleurPrincipale !important;
	background: white;
	border:1px solid rgba($couleurPrincipale,0.2);
	border-radius:0;
	&:hover {
		background:$couleurPrincipaleOn;
	}
	&.bold {
		border-color:$couleurPrincipale;
	}
}


.article__infos {
	position: relative;
	height: auto;
	width: auto;
	white-space: inherit;
	clip: unset;
	clip-path: unset;
	font-size:1em;
	margin: -2rem 0 1rem -4rem;
	display: flex;
	align-items: center;
	@include media($bp-medium) {
		margin: -2rem -200px 0 -2rem;
		line-height:1.2;
		.emission_heroine & {
			@include flex();
		}
		.article__date {
/* 			flex-grow:1; */
		}
		.prochaine_emission.emission_heroine & {
			margin-right:0;
		}
	}
	@include media($bp-small) {
		margin: -2rem 0 0 -2rem;
	}
	@include media($bp-xxsmall) {
		flex-wrap: wrap;
		.article__date, .btn {
			margin: 0.3rem 0 0 1rem;
		}
	}
	overflow: visible;
	.composition_blog & {
		margin:0;
	}
	.page_chapitre & {
		margin-top: 0;
	}
}
.num_emission {
	display: inline-block;
	width:150px;
	padding:0.5rem;
	margin-right:1.5rem;
	@include media($bp-small) {
		margin-right:0.5rem;
	}
	font-weight:700;
	font-size:2.8rem;
	text-align: center;
	color:$couleurSecondaire;
	background:$couleurBackgroundTexte;
	font-family:$typo-titre;

}
.article__date {
	display: none; /* provisoire, par simplicite */
}

.composition_landing {
	.page_wrapper {
		border: 0;
	}
}
.composition_emissions, .composition_emission, .emissions, .derniere_emission, .prochaine_emission {
	.article__date {
		display: inline;
		font-size:1.5rem;
		color:$couleurSecondaire;
		font-weight:700;
		font-family:$typo-titre;
		@include media($bp-small) {
			font-size:1.2rem;
		}
	}
}
.composition_blog {
	.article__date {
		display:inline-block;
	}
	.page_content, .page_aside, .page_extra {
		> aside, > footer {
			margin:0;
			padding:0;
		}
	}
}
.liste.articles.blog {
	background-color: white;
	margin: -2rem 0;
	.liste-items {
		list-style:none;
		margin:0 0 2rem;
		.item {
			border-top:1px solid $couleurPrincipale;
			&:first-child {
				border:0;
			}
			.article-resume {
				padding-left:0;
				padding-right:0;
			}
		}
	}
}
.lecteur {
	@include flex;
	align-items: center;
	 margin-bottom:3rem;
	> .podlove_wrapper {
		width:76%;
	}
	@include media($bp-medium) {
		flex-direction: column;
		text-align: center;
		margin:0 -4rem;
		@include media($bp-medium) {
			margin:0;
		}
		.telecharger {
			padding:0;
			margin-top:1rem;
		}
		 > .podlove_wrapper {
			 width:100%;
		}
	}
}
.texte_aside {
	width:200px;
	padding:0 0 1rem 2rem;
	text-align: center;
	@include media($bp-small) {
		padding:0 0 1rem;
		margin:0 auto;
	}
}
.telecharger {
	list-style:none;
	margin:0 0 0.5rem;
	text-align: left;
	@include media($bp-small) {
		padding:0 0 1rem;
		margin: 0 auto;

	}
	li {
		padding:0.5rem 0 0.5rem;
	}
	.btn.podcast {
		width:100%;
		padding-left:2.2rem;
		padding-bottom:0.3rem;
		font-size:1.15rem;
		text-transform: none;
		&:before {
			left:0.8rem;
		}
	}
}
.duree {
	font-size:0.7rem;
}

.btn.podcast {
	padding: 0 0.5em 0.1em 1rem;
	position: relative;
	text-align: left;
	border-width:0.25em;
	border-color: $couleurSecondaire;
	color: $couleurSecondaire !important;
	font-weight: 900;
	font-size: 0.6rem;
	text-transform: uppercase;
	&:not(.mini):before {
		@include triangle(right, $couleurSecondaire, 0.5em);
		position: absolute;
		left: 0.4rem;
		top: 50%;
		margin-top: -0.45em;
	}
	small {
		font-size:0.7em;
		font-weight:400;
	}
	&.mp3:not(.mini) {
		border-color:$couleurPrincipale;
		color:$couleurPrincipale !important;
		&:before {
			@include triangle(right, $couleurPrincipale, 0.5em);
		}
	}
	&:hover, &:active, &:focus {
		background:$couleurPrincipaleOn !important;
		border-color:$couleurPrincipaleOn !important;
		color:$couleurPrincipale !important;
		&:before {
			@include triangle(right, $couleurPrincipale, 0.5em);
		}
	}
	&.mini {
		background-color: white;
		background-position: top !important;
		background-size:100% !important;
		border: 0 !important;
		transition: none !important;
		height: 11px;
		width: 33px;
		padding: 0;
		&:before {
			display: none;
		}
		&:hover {
			background-color: white !important;
			background-position: bottom !important;
			background-size: 100% !important;
		}
		&.ogg {
			background-image: url('img/ogg.png');
			margin-left:1rem;
			&:hover {
				background-image: url('img/ogg.png') !important;
			}
		}
		&.mp3 {
			background-image: url('img/mp3.png');
			margin-left:0.5rem;
			&:hover {
				background-image: url('img/mp3.png') !important;
			}
		}
	}
}


.sujet_autre {
	background:$couleurBackgroundTexte;
	padding:1rem 4rem;
	margin:2rem -4rem -2rem;
	@include media($bp-medium) {
		padding:1rem 2rem;
		margin:2rem -2rem -2rem;
	}
	&.flex {
		width: auto;
	}
	> ul {
		@include flex;
		@include vendor-prefix(flex-wrap, wrap);
		> li {
			width:50%;
			&:nth-child(odd) {
				padding-right:2rem;
			}
			&:nth-child(even) {
				padding-left:2rem;
				&:before {
					left:1rem;
				}
			}
			h3 {
				margin:0;
			}
		}
	}
	// pour insertion dans le texte/chapo avant d'avoir le podcast
	.chapo & {
		margin-bottom: -2rem;
		clear: both;
		font-size:1rem;
		> * {
			font-size:1.2rem;
		}
	}
	.derniere_emission & {
		margin:0 -4rem;
		@include media($bp-medium) {
			margin:0 -2rem;
		}
		width: auto;
	}
}


/* notation */
.formulaire_notation .notation_note {
	display: inline-block;
}
.formulaire_jaime_jaimepas {
	.note, .reponse_formulaire {
		float: left;
	}
}
div.star-rating, div.star-rating a {
	background-image: url('img/star.png');
}
div.rating-cancel a {
	background-image: url('img/delete.png');
}
/**/

.sociaux {
	.socicon {
		display: inline-block;
		padding: .35em;
	}
	a.spip_out {
		border:0;
	}
}
a:hover .fab, a:hover .fas {
	color: $couleurPrincipaleOn;
}


/* bloc connex */
.page_connex {
	margin: 3rem 0 0;
	padding: 0 0 1rem;
/* 	background:$couleurPrincipale; */
}
.page_connex_content {
	color: white;
	.liste h2 {
		color: white;
		font-size: 1rem;
	}
	ul {
		list-style: none;
		margin-left: 0;
		li {
			margin: 0 0 0.5rem;
		}
	}
	a {
		border:0;
	}
}
.article_forum {
	background: white;
	color: $couleurPrincipale;
	margin: 0 0 4rem;
	padding: 1rem 4rem;
	@include media($bp-medium) {
		padding: 1rem 2rem;
	}
}

/**/
.page_footer {
	.article {
		@include media($bp-small-up) {
			@include flex;
			justify-content: space-between;
			> * {
				width: calc(50% - 1rem);
			}
		}
		.article__texte, .article__chapo {
			margin-bottom:2rem;
			font-weight: 400;
			strong, i, .btn {
				font-size: 115%;
			}
		}
	}
	.formulaire_spip.formulaire_recherche {
/* 		max-width:100%; */
	}
}

/* page sommaire */
.body__sommaire .page_main {
	h1 {
		margin: 1em 0 0.8em;
	}
	.emission_heroine h1 {
		font-size: 2.4rem;
		@include media($bp-xxsmall) {
			font-size:2rem;
		}
	}
}
.emission-resume.article-resume {
	align-items: center;
	padding: 0 1rem 0 4rem;
	margin:0;
	@include media($bp-medium) {
		padding: 0 1rem 0 2rem;
	}
	h1 {
		small {
			display: inline-block;
		}
		a:hover .fa-link {
			opacity: 1;
		}
	}
	.fa-link {
		font-size: 0.7em;
		opacity: 0.2;
	}
}

.derniere_emission, .liste.emissions {
	padding-bottom:0;
	> h2 {
		color: white;
		.page_recherche & {
			padding: 0 4rem;
		}
	}
	.article__infos {
		margin-top:0;
		.num_emission {
			font-size: 2rem;
			padding: 0.1rem 1rem;
			width: auto;
		}
		.article__date {
			font-size:1rem;
			color:$couleurPrincipale;
			font-weight:400;
		}
		.btn.blanc {
			margin-left:1rem;
			font-weight:700;
		}
	}
}
.derniere_emission:not(.emission_heroine) {
	.emission-resume {
		margin:0 -4rem;
		@include media($bp-medium) {
			margin:0 -2rem;
		}
	}
}
.derniere_emission.emission_heroine {
	position: relative;
	margin-top: -2rem;
	padding: 0;
	padding-left: 0 !important;
	padding-right: 0 !important;
	background: white;
	> h2 {
		color:$couleurPrincipale;
/* 		margin-top:-3.6rem; */
/* 		margin-bottom:0.65rem; */
		padding-left:4rem;
		@include media($bp-medium) {
/* 			margin-bottom: 2.05rem; */
		}
		@include media($bp-small) {
/* 			margin-bottom: 2.15rem; */
		}
	}
	html:not(.composition_chroniques) & .article__infos {
		margin-top: 0;
	}
}
.prochaine_emission.emission_heroine {
	.page_content > article& {
		margin-bottom: 4rem;
	}
}

.texte_content {
	flex:1;
	padding-bottom: 1rem;
	min-height: 240px;
	h1 {
		font-size: 1.6rem;
	}
	h2 {
		font-size: 1.2rem;
	}
	p.flex {
		margin: 1rem 0;
		padding-right: 2rem;
		align-items: center;
		.podcast {
			font-size: 110%;
			text-transform: none;
			padding-left: 1.6rem;
		}
	}
}
.liste.emissions {
	.cartouche {
		margin: 0;
	}
	> h2 {
		margin-bottom: 0.6rem;
		@media (max-width:460px) {
			margin-left: -2rem;
			margin-right: -2rem;
		}
	}
	> ul {
		list-style: none;
		padding:0;
		margin:0 -4rem;
		.page_recherche & {
			margin: 0;
		}
		@include media($bp-medium) {
			margin: 0 -2rem;
		}
		> li {
			margin-bottom:2px;
		}
	}
	li {
		line-height: 1.3;
		margin-bottom: 0.5rem;
		> small {
			display: inline-block;
			margin-left: 0.5rem;
		}
	}

	.pagination {
		.pagination-items a, .pagination-items span, .lien_pagination, .lien_pagination span, .pages a, .pages strong {
			color: white;
			padding: 0.2em 0.5em;
			border-radius: 0;
			&.on, &:hover {
				background-color: #587ca0 !important;
			}
		}
	}
	.sujet_autre {
		margin: 1rem -1rem -1rem;
		padding: 1rem;
		width: auto;
	}

	&.emissions_selectionaccueil {
		position: relative;
		.controlcarousel {
			display: inline-block;
		}
		.avant {
			@include triangle(left, white, 0.4em);
		}
		.ensuite {
			@include triangle(right, white, 0.4em);
		}
		.avant, .ensuite {
			display: inline-block;
			margin: 0 0.2em;
			cursor: pointer;
			&.disabled {
				opacity: 0.5;
				cursor: default;
			}
		}
		.owl-carousel {
			margin: 0 -4rem;
			width: auto;
			@media (max-width:768px) {
				margin: 0 -2rem;
			}
			article {
				padding: 0 1rem;
				h1 small, .texte_aside, .podcast, .sujets {
					display: none;
					opacity: 0;
				}
				&:hover {
					.sujets, .btn.blanc {
/* 						display: block; */
/* 						opacity: 1; */
						/*
						position: absolute;
						top: 100%;
						background: white;*/
					}
				}
				.article__infos {
					margin: 0 0 1rem -1rem;
					position: static;
					.btn.blanc {
						position: absolute;
						bottom: 1rem;
						right: 0;
					}
				}
				.texte_content {
					position: relative;
					min-height: 320px;
				}
			}
			.owl-nav {
				font-size: 6rem;
				button.owl-prev, button.owl-next {
					color: white;
					position: absolute;
					top: -2rem;
					right: -4rem;
					line-height: 1;
					background: none !important;
					@media(max-width:768px) {
						right: -2.5rem;
					}
					span {
						display: block;
					}
				}
				button.owl-prev {
					left: -4rem;
					@media(max-width:768px) {
						left: -2.5rem;
					}
				}
			}

		}
	}
	.emission-resume.article-resume h1 {
		margin-top: 0.8em;
		margin-bottom: 1.5em;
		small {
			display: block;
		}
	}
}
.liste.emissions.chroniques {
	> ul > li {
		background-color: white;
		margin-bottom: 1rem;
	}
	.emission-resume.article-resume {
/* 		align-items:start; */
	}

}
.emission_heroine.emission-resume.article-resume {
/* 	margin-bottom:4rem; */
	padding-bottom: 2rem;
	.article__infos {
		margin: 0 0 0 -4rem;
		@include media($bp-medium) {
			margin: 0 0 0 -2rem;
		}
	}
	.article__date {
		display: inline-block;
		margin-right:1rem;
		font-size:1rem;
		color:$couleurPrincipale;
		font-weight:400;
	}
	.chapo {
		font-size:1.2rem;
	}
	.radiolive {
		clear: right;
		text-align: center;
		max-width: 100%;
		margin: 0 0 1rem;
		h4 {
			text-align: center;
		}
		iframe {
			min-height: 860px;
		}
	}
	@include media($bp-medium) {
		h1, .chapo, .sujet_principal {
			clear: both;
		}
		.encart, .radiolive {
			clear: both;
			margin: 0 0 1rem;
		}
	}
	@include media($bp-small) {
		.radiolive {
			margin: 0 -2rem;
			float: none;
		}
	}
}
/* modele radiolive */
.radiolive {
	@include clearfix();
	p {
		line-height: 1.1;
	}
	iframe {
		min-height: 860px;
	}
	audio {
		@include media($bp-medium) {
			margin: 0.5rem -4rem;
			width: 100%;
		}
	}
	.live_audio {
		@include media($bp-medium-up) {
			@include flex();
			align-items: center;
			justify-content: space-between;
			> * {
				width:33%;
				&:first-child {
					text-align: left;
				}
				&:last-child {
					text-align: right;
				}
			}
		}
		padding: 1rem;
		background: $couleurSecondaire;
		color: white;
		text-align: center;
		h4 {
			margin:0;
			color: white;
		}
	}
}

.orange {
	color:$couleurSecondaire;
}

.pagination {
	.pagination-items a, .pagination-items span, .lien_pagination a /* spip 3 et 4 */ {
		color: white;
		.composition_blog &, .page_content aside & {
			color:$couleurPrincipale;
		}
	}
}


.header_initiatives, .header_initiatives .nav, .btn-nav, .header_initiatives .btn-initiatives {
	@include gradient-4(#02375b,#02375b,#02375b,#00263e);
	.inclure_blocs { /* pour un var_mode=inclure sans encombre */
		display: none;
	}
}

/* centrer le lecteur audio pour SPIP3 */
.audio-wrapper {
    margin: 0 auto;
}


.page_recherche, .page_plan {
	.page_content .formulaire_spip.formulaire_recherche {
		margin: 0;
	}
	.page_content {
		background: white;
		p {
			margin: 0;
		}
	}
}






/* ajout Antoine - 1 */
 /*!    Plusieurs typographies sont finalement trop grosses, j'ai réduit. */
h1, .h1 {
/*     font-size: 2.6em; */
	a {
		border:0;
	}
}
h2 {
    font-weight: 700;
}
.article-resume__titre a {
    color: #2E5281;
    border-bottom: inherit;
}


 /*!    certaines graisses sont trop forte en 700.*/

/*.page_header > .page_container .nav a {
    font-weight: 500;
}*/


/*!    Sur le menu j'ai augmenté la hauteur du bouton RSS et le champ recherche. Pour le menu avec le hover je propose de modifier le design, car le bouton bleu cyan au rollover est trop prégnant. Je convertis en filets simlple 2pt. Par contre j'ai basculé le padding sur le "li" sinon le filet sous le "a" débordait de chaque côté (voir copie-écran de la retouche css de la bannière)
Sur le menu, je vais voir s'il est possible de faire des filets de rollover composés de tirets et de points avec les fonctions css border-image. Ce  qui ferrait un rappel du design.*/

 /*!  cyan ausurvol*/
.page_header .nav a:hover, .page_header .nav a.on, .page_header .nav a.active {
    color: white !important;
    background-color: transparent !important;
    border-bottom: 3px solid #00c4f5;
}
.header_initiatives .menu-entree.sousinitiatives > ul.ouvert li {
	background:#02375b;
}
 /*!  bleu charte ensuite */
.page_header .nav a.on, .page_header .nav a.active {
    border-bottom: 3px solid #2E5281;
}




.formulaire_spip input[type="text"]{
    min-height: 2.5em;
    line-height: 1.875em;
}

 /*!    trop gros, j'ai réduis. */

.num_emission {
    font-size: 2.3rem;
}
.nav li {
    margin: 0 0.7em;
}
.page_header .nav a {
    padding: 0.3em 0em 0.2em;
    color: white !important;
    background-color: inherit;
    border-radius: 0;
    border-bottom: 3px solid transparent;
}

/*! couleurs des liens sortants selon la maquette */


.formulaire_spip .abonnement button::after {
    bottom: 0.8rem;
}

/*!    fond du cartouche galerie selon la maquette avec ombrages*/

.fl {
    background: #EEF1F5;
    box-shadow: inset 0px 1px 20px rgba(0, 0, 0, 0.5);
}


/*!    Polices du pied de page plus maigre  */

.page_footer p {
    font-size: 0.8rem;
    font-weight: 200;
	a, a.spip_out {
		display: inline;
		font-weight: 400;
		color: white;
		border-bottom-width: 1px;
	}
}

/*
 * ajouts Antoine 07/09
 */
/* réduction de corps de titre
*/
h3, .h3 {
    font-size: 1.2em;
}
/* pas de graissage de corps. Dans le corps de texte, les liens "a" sont soulignés
*/
a.spip_out {
    font-weight: 400;
    color: #2E5281;
	border-bottom:1px solid $couleurPrincipale;
}
/* réduction et degraissages des boutons podcats
*/
.btn.podcast {
    padding: 0em 0.5em 0em 1rem;
    border-width: 0.15rem;
    font-weight: 700;
    font-size: 0.5rem;
}
.podlove.native, .podlove .info, .podlove .progress {
    font-family:$typo-titre;
    color: #005184;
    font-weight: 300;
}

.telecharger .btn.blanc {
    border-width: 0.3rem;
}
.telecharger .btn.podcast {
    font-size: 1rem;
    font-weight: 600;
}
.btn.podcast small {
    font-size: 0.6em;
    font-weight: 300;
}


/* ajout du 14/09 */
/* titres des chroniques en corps moins gras et gros */
.chronique h3 {
    font-weight: 400;
    font-size: 1em;
    line-height: 1.6em;
    font-family: 'lato','sans-serif';
}

/* liens du footer */
.page_footer p {
    line-height: 1.8em;
}
.page_footer p a, .page_footer p a.spip_out {
    border-bottom: none;
}
.page_footer a:hover,.page_footer p a:hover, .page_footer p a.spip_out:hover {
    color: #00c4f5;
}
.sociaux .socicon:hover {
    color: #00c4f5;
}

/* pave dernière émission, calage des boutons à gauche */
.derniere_emission .texte_content p.flex, .liste.emissions .texte_content p.flex {
    margin: 1rem 0;
    justify-content: start;
}
.derniere_emission .texte_content p.flex a, .liste.emissions .texte_content p.flex a{
    margin-right: 2rem;
}

/* repositionnement photo de l'émission (IMCOMPLET:si possible un format carré) */
.derniere_emission .photo, .liste.emissions .photo {
    max-width: 250px;
}
.derniere_emission .photo .photoapril, .liste.emissions .photo .photoapril {
    margin: 1em;
}
.derniere_emission .photo, .liste.emissions .photo {
    background: inherit;
}
.derniere_emission .photo a, .liste.emissions .photo a {
    color: #2E5281;
    padding: 0;
    margin-right: 1em;
}

/*
 * Vincent 02/10/2023
 * Lien vers la recherche avancée
 */
#recherche_avancee_bloc {
    background: #FFF;
    display: block;
    padding-right: 4px;
    border: 1px solid #B3B3B3;
    border-top-width: 0;
}

#lien_recherche_avancee {
     color: $couleurPrincipale !important;
     background: #FFF!important;
     font-weight: 400;
}

#lien_recherche_avancee:hover {
    color: $couleurPrincipaleOn !important;
}

/*Nécessaire pour être au dessus du bouton  S'abonner aux actus */
.page_header > .page_container .nav > ul .loupe .formulaire_recherche.vu {
    z-index: 5;
}


/*
 * fin
 */
.page_header > .page_container .nav > ul .loupe .formulaire_recherche.vu {
    top: 1.4rem;
}

@media (max-width:940px) {
	.page_header > .page_container {
		.nav {
			font-size: 0.95rem;
			z-index: 7;
			position: static;
			> .nav-list {
				position: absolute;
				width: 100%;
				top: 36px;
				left: -100%;
				z-index: 10;
				justify-content: space-around;
				&.ouvert{
					left:0;
				}
				.loupe {
					.formulaire_recherche.vu {
						right: 50%;
						margin-right: -160px;
						max-width: 320px;
						form {
							padding:0.5rem;
							&:before {
								display: none;
							}
						}
					}
				}
			}
		}
	}
	.btn-nav {
		display: block;
	}
	.header_initiatives {
		.btn-initiatives {
			display: block;
		}
		.nav {
			position: absolute;
			width:100%;
			top:36px;
			left:-100%;
			@include vendor-prefix(transition,all 0.3s ease-in-out);
			&.ouvert {
				left:0;
			}
			ul, .initiatives {
				display: inline;
			}
		}
	}

	.page_header .header_menu .liens {
		flex-direction: column;
		margin-top: 2.5rem;
		.formulaire_spip.formulaire_abomailman_mini_une_liste {
			margin: 0 0 0.3rem;
		}
	}
}

@media (min-width:941px) {
	.page_header > .page_container .nav {
		position: relative;
	}
}

@media($bp-medium) {
	.page_header > .page_container {
		.nav {
			font-size: 0.95rem;
			z-index: 7;
			position: static;
			> .nav-list {
				position: absolute;
				width: 100%;
				top: 36px;
				left: -100%;
				z-index: 10;
				justify-content: space-around;
				flex-wrap: wrap;
				padding: 0;
				&.ouvert {
					left: 0;
				}
				a {
					padding: 1.1rem 1rem 1rem;
					margin: 0;
					background: $couleurPrincipale !important;
					border:0;
					&:hover, &:active, &:focus, &.on {
						color: $couleurPrincipale !important;
						background: $couleurPrincipaleOn !important;
						border: 0;
					}
				}
				.loupe {
					.formulaire_recherche.vu {
						right: 50%;
						margin-right: -160px;
						max-width: 320px;
						form {
							padding:0.5rem;
							&:before {
								display: none;
							}
						}
					}
				}
			}
		}
	}
}

@include media($bp-small) {
	.page_header > .page_container .nav {
		padding-top: 0;
	}
	.article-resume > :last-child.telecharger {
		margin-bottom:1rem;
	}

	.page_header .header_menu .liens {
		margin-top: 1.5rem;
		.formulaire_spip.formulaire_abomailman_mini_une_liste {
			width: 188px;
		}
		.abonnement label.btn {
			font-size: 0.9rem;
			float: right;
		}
		.sociaux {
			margin-top: 0;
		}
		.sociaux_podcast {
			flex-direction: column-reverse;
			.sociaux {
				margin: 0;
				display: block;
				width: 100%;
				text-align: right;
			}
		}
		.btn {
			font-size: 0.9rem;
		}
	}
	.page_header .header_title {
		min-width: 100px;
	}
}