/*
 * CSS Style de Base
 * Olivier Copetto
 * Derniere Modification : 10/12/2025
 */
 

/* Z-Index :
 * Menu NavBar : 1000
 * Info Cookie : 1200
 * Bouton Haut : 1000
 * Carte OSM : <1000
 * Reading Progress : 2000
*/

:root {
	--vlq-blanc : #ffffff; /* blanc */
	--vlq-noir : #000000; /* noir */
	--vlq-gris-4545c : #ded9c2; /* gris clair */
	--vlq-gris-420c : #cccccc; /* gris */
	--vlq-gris-417c : #6e6f64; /* gris moyen */
	--vlq-gris-447c : #323532; /* gris fonce */
	--vlq-gris-433c : #212529; /* gris tres fonce */
	--vlq-bleu-317c : #ced9e7; /* bleu plus clair */
	--vlq-bleu-552c : #b9d0dc; /* bleu clair */
	--vlq-bleu-646c : #5781AE; /* bleu */
	--vlq-bleu-647c : #11568C; /* bleu moyen */
	--vlq-bleu-541c : #003C79; /* bleu moins fonce */
	--vlq-bleu-533c : #253355; /* bleu fonce */
	--vlq-bleu-540c : #002F5D; /* bleu tres fonce */
	--vlq-jaune-1025c : #f3e2a7; /* jaune clair */
	--vlq-jaune-803c : #ffe805; /* jaune */
	--vlq-jaune-140c : #7A560F; /* jaune fonce */
	--vlq-rouge-698c : #edcfd7; /* rouge clair */
	--vlq-rouge-485c : #dc241f; /* rouge */
	--vlq-rouge-1815c : #7c211e; /* rouge fonce */
	--vlq-rose-189c : #f8a1be; /* rose clair */
	--vlq-rose-190c : #f8779e; /* rose */
	--vlq-rose-191c : #f23f72; /* rose moyen */
	--vlq-rose-194c : #9c1e3d; /* rose fonce */

	--vlq-creme-607c : #e8e7d0; /* creme */
	--vlq-or-4535c : #d4ccaa; /* or clair */
	--vlq-or-4505c : #9B8948; /* or moyen */
	--vlq-or-455c : #655415; /* or fonce */
}

[data-bs-theme=light] {
	--vlq-texte : var(--vlq-noir);
	--vlq-btn-haut-fond : var(--vlq-jaune-803c);
	--vlq-btn-haut-texte : var(--vlq-jaune-140c);
	--vlq-card : #f1f1f1;
	--vlq-section-titre-before : var(--vlq-gris-420c);
	--vlq-section-titre-after : var(--vlq-noir);

	/* Separateur section */
	hr.style {
		background: linear-gradient(to left, var(--vlq-blanc), var(--vlq-noir), var(--vlq-blanc) );
	}

	/* Inversion couleur image */
	img.inverser { filter: invert(0);}
}
[data-bs-theme=dark] {
	--vlq-btn-haut-fond : var(--vlq-jaune-803c);
	--vlq-btn-haut-texte : var(--vlq-jaune-140c);
	--vlq-card : var(--vlq-gris-417c);
	--vlq-section-titre-before : var(--vlq-gris-417c);
	--vlq-section-titre-after : var(--vlq-blanc);

	/* Separateur section */
	hr.style { 
		background: linear-gradient(to left, var(--vlq-gris-433c), var(--vlq-blanc), var(--vlq-gris-433c) );
	}

	/* Inversion couleur image */
	img.inverser { filter: invert(1);}
}

/* Traitement Polices */
@font-face {
	font-family: "DDIN";
	src: url("../fonts/ddin.woff2") format("woff2"),
		url("../fonts/ddin.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "DDIN-Condensed";
	src: url("../fonts/ddincondensed.woff2") format("woff2"),
		url("../fonts/ddincondensed.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "DDIN-Condensed-Bold";
	src: url("../fonts/ddincondensed-bold.woff2") format("woff2"),
		url("../fonts/ddincondensed-bold.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

html {
	font-size: 100%; /* Initialisation rem (taille_police x px) */
}

body {
	font-family: "DDIN",sans-serif;
	line-height: normal;
	background-color : var(--vlq-fond);
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

.menu-haut {
	padding: 0px 0px 0px 0px;
}

a {
	font-family: "DDIN-Condensed",sans-serif;
	color: var(--vlq-lien-hypertexte);
	text-decoration: none;
	text-transform: uppercase;
	font-weight: normal;
}
a:hover {
	font-family: "DDIN-Condensed",sans-serif;
	color: var(--vlq-lien-hypertexte);
	text-transform: uppercase;
	font-weight: normal;
	cursor: pointer;
}

/* Effet lien texte centre vers exterieur*/
a.lien { color: var(--vlq-lien-hypertexte); }
a.lien-jaune { color: var(--vlq-jaune-803c); }
a.lien-rouge { color: var(--vlq-rouge-485c); }
a.lien, a.lien-jaune, a.lien-rouge {
	text-decoration: none;
	display: inline-block;
	position: relative;
}
a.lien:after { background-color: var(--vlq-lien-hypertexte); }
a.lien-jaune:after { background-color: var(--vlq-jaune-803c); }
a.lien-rouge:after { background-color: var(--vlq-rouge-485c); }
a.lien:after, a.lien-jaune:after, a.lien-rouge: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, a.lien-jaune:hover:after, a.lien-rouge:hover:after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

p {
	font-family: "DDIN",sans-serif;
}

img {
	border-radius: 15px;
}
.card-img-top {
	border-radius: 15px 15px 0px 0px;
}

/* Images Responsive */
img.img-responsive {
	max-width: 100%;
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 0px;
	vertical-align: middle;
}

img.arrete {
	width: 50px;
	height: 50px;
	margin: 0px;
	padding: 0px;
}

.card {
	border: 0px;
	border-radius: 15px;
	background-color: var(--vlq-card);
}

/* Espace droite picto */
p i, div i, button.accordion-button i {
	margin: 0px 6px 0px 0px;
}
button i, a.nav-link i {
	margin: 0px;
}

/* Espace vertical debut/fin de page */
.espace-vertical {
	padding: 10px 0px 10px 0px;
}

/* Espace vertical entre deux blocs */
.w-100 { padding: 0px;}

/* Separateur avec degrade */
hr.style { 
	border: 0; 
	height: 2px; 
}

/* Alignement */
.left {	text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.justify { 
	text-align: justify;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

#imgleft {	float: left; margin: 20px 20px 0px 0px; }
#imgright { float: right; margin: 20px 0px 0px 20px; }


/* Ruban date */
.ruban {
	position: relative;
}
.ruban-actu, .ruban-agenda-ok, .ruban-agenda-ko {
	position: absolute;
	height: 40px;
	line-height: 40px;
	padding-left: 10px;
	padding-right: 10px;
	top: 5px;
	left: 5px;
	border-radius: 15px;
	text-transform: uppercase;
}
.ruban-actu, .ruban-agenda-ok, .ruban-agenda-ko {
	opacity: 0.85;
}

/* Affichage Info Note */
.carte-info-bleu, .carte-info-rouge, .carte-info-jaune {
	border-radius: 15px;
}

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

/* Overlay Zoom */
.overlay, .overlay-lien {
	position:relative; display: inline-block;
	/* background-color:rgba(255,255,255,0.4);*/
	overflow: hidden;
}
.overlay img, .overlay-lien img {
	transition:transform 200ms ease-in;
}
.overlay:hover img, .overlay-lien:hover img {
	transform: scale(1.1) ;
}

/* Formulaire */
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
	transform: scale(.80) translateY(-.5rem) translateX(.15rem);
}

input[type=text], input[type=email] {
	width: 100%;
	border-radius: 15px;
}
textarea.form-control, select.form-control {
	width: 100%;
	border-radius: 15px;
	resize: vertical;
}
input[type=submit],input[type=reset] {
	font-family: "DDIN-Condensed",sans-serif;
	text-transform: uppercase;
	font-weight: normal;
	padding: 10px 15px;
	margin-right: 10px;
	border: none;
	border-radius: 15px;
	cursor: pointer;
}

/* Titre Section */
.section-titre {
	padding-bottom: 30px;
}
.section-titre h3 {
	font-family: "DDIN-Condensed-Bold",sans-serif;
	text-transform: uppercase;
	text-align: center;
	font-weight: 700;
	position: relative;
	padding-bottom: 5px;
}
.section-titre h3::before {
	content: '';
	position: absolute;
	display: block;
	width: 120px;
	height: 1px;
	background: var(--vlq-section-titre-before);
	bottom: 1px;
	left: calc(50% - 60px);
}
.section-titre h3::after {
	content: '';
	position: absolute;
	display: block;
	width: 40px;
	height: 3px;
	background: var(--vlq-section-titre-after);
	bottom: 0;
	left: calc(50% - 20px);
}

/* Titre Paragraphe */
.titre-gauche {
	font-family: "DDIN-Condensed-Bold",sans-serif;
	text-transform: uppercase;
	text-align: left;
	line-height: normal;
}
.titre-justify {
	font-family: "DDIN-Condensed-Bold",sans-serif;
	text-transform: uppercase;
	text-align: justify;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	line-height: normal;
}
.titre-centre {
	font-family: "DDIN-Condensed-Bold",sans-serif;
	text-transform: uppercase;
	text-align: center;
}
.titre-droite {
	font-family: "DDIN-Condensed-Bold",sans-serif;
	text-transform: uppercase;
	text-align: right;
	line-height: normal;
}

/* Carousel Flickity */
.carousel {
	max-width: 100%;
	padding: 0px 0px 0px 0px;

/*	mask-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0),
		rgba(0, 0, 0, 1) 20%,
		rgba(0, 0, 0, 1) 80%,
		rgba(0, 0, 0, 0)
	); */
}

/* Blason Bandeau Haut */
.blason-villequiers {
	width: 280px;
	height: 70px;
	display: block;
	max-height: 70px;
	transition: transform 200ms ease-in;
}
.blason-villequiers:hover {
	transform: rotate(-3deg) scale(1.1)
}

/* Conteneur Bandeau Haut et Bas */
.fond-bandeau {
	font-family: "DDIN-Condensed",sans-serif;
	text-transform: uppercase;
	margin-top: auto;
	padding: 0px;
	color: var(--vlq-blanc);
	background-color: var(--vlq-bandeau-haut-bas);
/*	background-image: linear-gradient(to top, rgba(248,119,158,0), rgba(248,119,158,1) 60%);
	box-shadow: 0 10px 6px -6px rgba(0, 0, 0, 0.3); */
}

/* Bandeau du Haut et menu Responsive */
.nav-item {
	padding: 2px;
	text-align:center;
}
.nav-icone, .nav-link {
	padding: 2px;
	text-align: center;
}
.nav-item a, .nav-icone a {
	text-decoration: none;
}
.nav-icone a {
	transition:transform 150ms ease-in;
}
.nav-item a:hover {
	border: none;
	border-radius: 6px;
	text-decoration: none;
}
.nav-icone a:hover, .nav-icone button:hover, a.navbar-toggler:hover {
	text-decoration: none;
	transform: rotate(-3deg) scale(1.5)
}
.navbar {
	padding: 0px 0px 0px 0px; /* affichage mobile */
}
.navbar-toggler {
	border: 0px;
}
div.navbar-toggler ul {
	list-style-type:none;
}
div.navbar-toggler ul li, div.navbar-toggler ul li a {
	float: left;
	padding: 3px; /* affichage mobile */
}
.nav-link.disabled, .dropdown-item.disabled {
	color: var(--vlq-gris-420c);
}
.nav-link a:focus, .dropdown-item a:focus {
	border-radius: 6px;
}
.dropdown-menu {
	font-family: "DDIN-Condensed",sans-serif;
	width: 250px;
	border: none;
	border-radius: 6px;
	box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.3);
}
.dropdown-menu a:hover {
	text-decoration: none;
	border-radius: 0px;
}
a.dropdown-toggle:focus {
	border-radius: 6px;
}

/* survol menu affichage auto */
/*.dropdown:hover .dropdown-menu {
	display: block; 
	margin-top: 0px;
} */

/* Seances Conseil Municipal */
.tab-seance {
	font-family: "DDIN-Condensed-Bold",sans-serif;
	text-transform: uppercase;
	color: var(--vlq-tab-seance);
}

/* Accordeon */
.accordion-button {
	font-family: "DDIN-Condensed",sans-serif;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: normal;
}
.accordion-button:enabled {
	box-shadow: none;
	background-color: var(--vlq-card);
}
.accordion-button:focus {
	box-shadow: none;
	background-color: transparent;
}

/* Table */
.bloc-table {
	font-family: "DDIN-Condensed",sans-serif;
	border: 0px;
	border-radius: 15px;
	background-color: var(--vlq-card);
	padding: 10px 10px 3px 10px;
}
.table-custom {
	--bs-table-bg: transparent !important;
}
.table-active {
/*	background: var(--vlq-table-jour); */
}

/* Boutons reseau sociaux bas de page */
.iconebandeau {
	padding: 0px 5px 0px 0px;
	transition:transform 150ms ease-in;
}
.iconebandeau:hover {
	transform:rotate(-3deg) scale(1.5)
}

/* Bouton Revenir en haut de la page */
#btn-haut-page {
	display: none;
	position: fixed;
	z-index: 1000;
	bottom: 15px;
	left: 15px;
	padding: 10px;
	border : 0px;
	border-radius: 50%;
	color: var(--vlq-btn-haut-texte);
	background-color: var(--vlq-btn-haut-fond);
}

/* Widgets */
.widgetcarte { width:100%; height: 320px;}
.widgetmeteo {width: 100%; height: 318px;}
#map { height:320px;}


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

	/* Menu Responsive NavBar */
	.navbar-toggler, .dropdown-menu { font-size: 1.1rem; }
	.iconebandeau { font-size: 1.3rem; }
	.nav-item, .nav-icone { text-align:center; }
	.dropdown-menu {
		width: 100%;
		box-shadow: none;
	}
}

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

	body { font-size: 1.1rem; }
	.petitCaractere { font-size: 1.0rem; }
	.section-titre h3 { font-size: 1.8rem; }
	.titre-gauche, .carte-titre-gauche, .titre-justify, .titre-centre, .titre-droite {font-size: 1.4rem; }
	.navbar-toggler, .dropdown-menu, .accordion-button { font-size: 1.1rem; }
	.iconebandeau { font-size: 1.7rem; }
	.badge { font-size: 0.8rem; margin: 2px 0px; padding: 4px; }
	.mentions, .bulletins { font-size: 1.0rem; }

	/* Taille Blason */
	.blason-villequiers { margin: 5px 0px 0px 0px; }

	/* Carousel Flickity */
	.carousel-cell {
		width: 150px;
		height: 150px;
		margin-right: 0px;
		padding: 0px 5px 0px 0px;
		border-radius: 0px;
		counter-increment: carousel-cell;
	}

	/* Menu Responsive NavBar */
	.dropdown-menu {
		width: 100%;
		box-shadow: none;
	}
}
/* 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) { 
	
/*	.container { max-width: 768px; } */

	body { font-size: 1.1rem; }
	.petitCaractere { font-size: 0.9rem; }
	.section-titre h3 { font-size: 1.9rem; }
	.titre-gauche, .carte-titre-gauche, .titre-justify, .titre-centre, .titre-droite { font-size: 1.4rem; }
	.navbar-toggler, .dropdown-menu, .accordion-button { font-size: 1.1rem; }
	.iconebandeau { font-size: 1.7rem; }
	.badge { font-size: 0.7rem; margin: 2px 0px; padding: 4px; }
	.mentions, .bulletins { font-size: 1.0rem; }

	/* Taille Blason */
	.blason-villequiers { margin: 10px 0px; }

	/* Carousel Flickity */
	.carousel-cell {
		width: 150px;
		height: 150px;
		margin-right: 0px;
		padding: 0px 5px 0px 0px;
		border-radius: 0px;
		counter-increment: carousel-cell;
	}

	/* Menu Responsive NavBar */
	.dropdown-menu {
		width: 100%;
		box-shadow: none;
	}
}

/* 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) { 
	
/*	.container { max-width: 992px;	} */

	body { font-size: 1.1rem; }
	.petitCaractere { font-size: 0.9rem; }
	.section-titre h3 { font-size: 2.0rem; }
	.titre-gauche, .carte-titre-gauche, .titre-justify, .titre-centre, .titre-droite { font-size: 1.4rem; }
	.navbar-toggler, .dropdown-menu, .accordion-button { font-size: 1.1rem; }
	.iconebandeau { font-size: 1.7rem; }
	.badge { font-size: 0.7rem; margin: 2px 0px; padding: 4px; }
	.mentions, .bulletins { font-size: 1.0rem; }

	nav { height: 110px; }

	/* Carousel Flickity */
	.carousel-cell {
		width: 150px;
		height: 150px;
		margin-right: 0px;
		padding: 0px 5px 0px 0px;
		border-radius: 0px;
		counter-increment: carousel-cell;
	}
}

/* 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) { 

/*	.container { max-width: 1200px; } */

	body { font-size: 1.2rem; }
	.petitCaractere { font-size: 1.0rem; }
	.section-titre h3 { font-size: 2.2rem; }
	.titre-gauche, .carte-titre-gauche, .titre-justify, .titre-centre, .titre-droite  { font-size: 1.5rem; }
	.navbar-toggler, .dropdown-menu, .accordion-button { font-size: 1.2rem; }
	.iconebandeau { font-size: 1.7rem; }
	.badge { font-size: 0.8rem; margin: 2px 0px; padding: 4px; }
	.mentions, .bulletins { font-size: 1.1rem; }

	nav { height: 120px; }

	/* Carousel Flickity */
	.carousel-cell {
		width: 200px;
		height: 200px;
		margin-right: 0px;
		padding: 0px 5px 0px 0px;
		border-radius: 0px;
		counter-increment: carousel-cell;
	}
}
	
/* Sur les ecrans, quand la largeur de la fenetre fait au minimum 1441px */
@media all and (min-width: 1441px) {

/*	.container { max-width: 1400px;	} */

	body { font-size: 1.3rem; }
	.petitCaractere { font-size: 1.1rem; }
	.section-titre h3 { font-size: 2.4rem; }
	.titre-gauche, .carte-titre-gauche, .titre-justify, .titre-centre, .titre-droite { font-size: 1.6rem; }
	.navbar-toggler, .dropdown-menu, .accordion-button { font-size: 1.3rem; }
	.iconebandeau { font-size: 1.8rem; }
	.badge { font-size: 0.9rem; margin: 2px 0px; padding: 4px; }
	.mentions, .bulletins { font-size: 1.2rem; }

	nav { height: 126px; }

	/* Carousel Flickity */
	.carousel-cell {
		width: 200px;
		height: 200px;
		margin-right: 0px;
		padding: 0px 5px 0px 0px;
		border-radius: 0px;
		counter-increment: carousel-cell;
	}
}