/*
 * CSS Style de Base
 * Olivier Copetto
 * Derniere Modification : 18/10/2026
 */
 
/* Z-Index :
 * Info Cookie : 1200
 * Menu Flotant : 1000
 * Reading Progress : 2000
*/


:root {
	--blanc : #ffffff;
	--noir : #000000;
	--blanc-casse : #fff1e7;
	--creme : #fdfbd4;
	--gris : #999999;
	--gris-fonce : #3d3d3d;
	--jaune : #ffc803;
	--rose-clair : #ffd6d1;
	--rose : #cb4a77;
	--rose-vif : #d40055;
	--rose-fonce : #51152c;
	--marron : #803704;
	--orange : #ffa500;

	color-scheme: light dark;
	--vlq-fond-page : light-dark(var(--blanc-casse),var(--rose-fonce));
	--vlq-fond-texte : light-dark(var(--noir),var(--blanc));
	--vlq-sidebar-fond : light-dark(var(--blanc-casse),var(--rose-fonce));
	--vlq-sidebar-texte : light-dark(var(--noir),var(--blanc));
	--vlq-fond-bandeau : var(--rose);
	--vlq-trait-titre-fond : light-dark(var(--rose-fonce),var(--rose-vif));
	--vlq-trait-titre-texte : light-dark(var(--rose-vif),var(--rose-clair));
	--vlq-titre-actu-info : light-dark(var(--gris-fonce),var(--gris));
	--vlq-acces-liste-texte : light-dark(var(--rose-vif),var(--rose-vif));
	--vlq-iconesocial-texte : light-dark(var(--rose-fonce),var(--rose-clair));
	--vlq-bagde-titre-fond : light-dark(var(--rose-fonce),var(--rose-clair));
	--vlq-bagde-titre-texte : light-dark(var(--blanc),var(--noir));
	--vlq-lien : light-dark(var(--rose-fonce),var(--rose-clair));
	--vlq-reading-progress : var(--orange);
	--vlq-newsticker-fond : var(--rose-clair);
	--vlq-newsticker-texte : var(--blanc);
	--vlq-newsticker-lien : var(--rose-fonce);
	--vlq-menu-flottant-fond : light-dark(var(--jaune),var(--jaune));
	--vlq-menu-flottant-icone : light-dark(var(--marron),var(--marron));
}
[data-theme="light"] {
	color-scheme: light;
}
[data-theme="dark"] {
	color-scheme: dark;
}

@font-face {
  font-family: 'firasans_regular';
  src: url('../fonts/firasans_regular.woff2') format('woff2'),
       url('../fonts/firasans_regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'firasans_bold';
  src: url('../fonts/firasans_bold.woff2') format('woff2'),
       url('../fonts/firasans_bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

html {
	font-size: 110%;
}

body {
	color: var(--vlq-fond-texte);
	background-color: var(--vlq-fond-page);
	font-family: 'firasans_regular';
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content {
	flex: 1;
}

/* Effet lien texte centre vers exterieur*/
a.lien { color: var(--vlq-lien); }
a.lien-newsticker { color: var(--vlq-newsticker-lien); }
a.lien, a.lien-newsticker {
	text-decoration: none;
	display: inline-block;
	position: relative;
}
a.lien:after { background-color: var(--vlq-lien); }
a.lien:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	height: 1px;
	width: 100%;
	opacity: 0;
	-webkit-transition: opacity 0.25s, -webkit-transform 0.25s;
	transition: opacity 0.25s, transform 0.25s;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
}
a.lien:hover:after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}
a.lien-newsticker:hover {
	color: var(--vlq-newsticker-lien);
	font-weight: bold;
	text-decoration: none;
	display: inline-block;
	position: relative;
}

/* Barre de navigation */
.navbar {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
.navbar-toggler {
     border: 0 !important;
}
.navbar-toggler:focus {
    border: 0 !important;
    box-shadow: none !important;
}

/* Menu sidebar */
.sidebar {
	color: var(--vlq-sidebar-texte);
	background-color: var(--vlq-sidebar-fond);
}
.offcanvas-footer{
    padding: 1rem 1rem;
}
.btn-close-custom {
	filter: invert(50%);
}

/* Bandeau Video */
.hero-banner {
	position: relative;
	width: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
}
.hero-banner video {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}
.hero-banner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(from var(--vlq-fond-bandeau) r g b / .5);
	z-index: 2;
}
.banner-logo {
	max-width: 275px;
	width: 100%;
	height: auto;
	padding: 1.5rem 0;
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
	transition: transform 0.4s ease;
}
.banner-content {
	position: relative;
	z-index: 3;
	padding: 20px;
	animation: fadeInUp 1.2s ease-out;
}

.section-title {
	font-family: 'firasans_bold';
	padding-left: 15px;
	margin: 2rem 0;
	border-left: 6px solid var(--vlq-trait-titre-fond);
	color: var(--vlq-trait-titre-texte);
}
.section-title-petit {
	font-family: 'firasans_bold';
	padding-left: 10px;
	border-left: 5px solid var(--vlq-trait-titre-fond);
	color: var(--vlq-trait-titre-texte);
}
.filtre-section {
	padding: 1rem 0 0 0;
	width: 100%;
}

.fond-newsletter {
	color: var(--vlq-fond-texte);
	background-color: var(--vlq-fond-page);
}
.newsletter-section {
	color: var(--vlq-trait-titre-texte);
	padding: 2rem 0;
	margin-top: 1rem;
}

.bandeau-video {
  width: 100%;
  height: 150px;
  overflow: hidden;
}
.bandeau-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	border: none;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
.card-img-top {
	object-fit: cover;
}
.card-title {
	font-family: 'firasans_bold';
}

.badge-titre {
	position: absolute;
	bottom: 5px;
	left: 5px;
	right: 5px;
	padding: 5px 10px;
	border-radius: 0 0 10px 10px;
	background-color: var(--vlq-bagde-titre-fond);
	color: var(--vlq-bagde-titre-texte);
	font-size: 0.9rem;
	text-transform: uppercase;
	line-height: 99%;
	opacity: 0.9;
}
div a:hover .badge-titre {
	display: none;
}
.badge-ville {
	font-family: 'firasans_bold';
	color: var(--vlq-bagde-titre-texte);
}

/* Icones Menu/Reseaux sociaux */
.iconesocialpetit, .iconesocialflottant { font-size: 1rem; }
.iconesocialgrand, .iconesocialmenu { font-size: 2rem; }
.iconesocialpetit, .iconesocialgrand, .iconesocialmenu {
	color : var(--vlq-iconesocial-texte);
	transition:transform 150ms ease-in;
}
.iconesocialflottant {
	color : var(--vlq-menu-flottant-icone);
	transition:transform 150ms ease-in;
}
.iconesocialgrand:hover, .iconesocialpetit:hover, .iconesocialmenu:hover, .iconesocialflottant:hover { transform:rotate(-3deg) scale(1.5) }


.footer {
	padding: 2rem 0;
	margin-top: 0rem;
}

.copyright {
	font-size: 80%;
}

.img-article {
	margin-bottom: 1rem;
}
.author-info {
	display: flex;
	align-items: center;
	margin-top: 10px;
}
.infos-actu {
	font-family: 'firasans_regular';
	font-size: 0.85rem;
	text-transform: uppercase;
	color: var(--vlq-titre-actu-info);
}
.acces-liste {
	font-family: 'firasans_regular';
	color: var(--vlq-acces-liste-texte);
}

/* Menu Flottant */
#menu-flottant {
	display: true;
	position: fixed;
	z-index: 1000;
	top: 20px;
	left: 20px;
	padding: 10px;
	border : 0px;
	border-radius: 5px;
	background-color: var(--vlq-menu-flottant-fond);
	box-shadow: 3px 3px 8px rgba(0,0,0,0.4);
}

/* Bouton Revenir en haut de page */
#btn-haut-page {
	display: none;
}

/* Reading Progress - barre progression lecture page */
#reading-progress {
	--scrollAmount: 0%;
	background-image: linear-gradient(120deg, var(--vlq-reading-progress) 0%, var(--vlq-reading-progress) 100%);
	width: var(--scrollAmount);
	height: 8px;
	position: fixed;
	top: 0;
	z-index: 2000;
}

/* Newsticker */
.newsticker-section {
	background-color: var(--vlq-newsticker-fond);
	padding: 0.2rem 0;
	width: 100%;
}
.titleenonewsticker{
  height:100%;
  align-items: center;
  justify-content: center;
}
.itemsenonewsticker{
  background-color:none;
}
.itemsenonewsticker p{
  margin-bottom:0;position:relative
}
.navenonewsticker .carousel-control-prev,.navenonewsticker .carousel-control-next{
  color: var(--vlq-newsticker-texte);
  position:relative;
  flex-grow:2;
}
.navenonewsticker .carousel-control-next .carousel-control-next-icon,
.navenonewsticker .carousel-control-prev 
.carousel-control-prev-icon{
  display:block;
  height: 100%;
  width:100%;
  background-size: 60% 60%;
}
.navenonewsticker .carousel-control-next, .navenonewsticker .carousel-control-prev {
  width: auto;
}
.topicenonewsticker{
  color: var(--vlq-newsticker-texte);
  font-size:80%;
  text-transform:uppercase;
  padding:5px 7px;
}

/* Sur tous types d'ecran, quand la largeur de la fenetre est inferieur à 330px */
@media all and (max-width : 330px) {

	.hero-banner {
		height: 200px;
	}
	.img-hero-section {
		width: 50%;
	}
}

/* Sur tous types d'ecran, quand la largeur de la fenetre est inferieur à 768px */
@media all and (max-width: 768px) { 
	
	.hero-banner {
		height: 200px;
	}
	.img-hero-section {
		width: 55%;
	}
}
/* Sur tous types d'ecran, quand la largeur de la fenetre est comprise entre 769px et 992px */
@media all and (min-width: 769px) and (max-width: 992px) { 
	
	.hero-banner {
		height: 200px;
	}
	.img-hero-section {
		width: 40%;
	}
}

/* Sur tous types d'ecran, quand la largeur de la fenetre est comprise entre 993px et 1200px */
@media all and (min-width: 993px) and (max-width: 1200px) { 
	
	.hero-banner {
		height: 200px;
	}
	.img-hero-section {
		width: 30%;
	}
}

/* Sur tous types d'ecran, quand la largeur de la fenetre est comprise entre 1201px et 1440px */
@media all and (min-width: 1201px) and (max-width: 1440px) { 

	.hero-banner {
		height: 250px;
	}
	.img-hero-section {
		width: 25%;
	}
}
	
/* Sur les ecrans, quand la largeur de la fenetre fait au minimum 1441px */
@media all and (min-width: 1441px) {

	.hero-banner {
		height: 300px;
	}
	.img-hero-section {
		width: 25%;
	}
}
