/*
*/



/* ---- Variables ---- */

:root{
	--fluo:#ECF23D;
	--jaune: #EAF205;
	--jaune-pastel:#EFF291;
	--jaune-light:#FAFCDA;
	--linear-jaune:linear-gradient(56deg, #F7F7DA 3.17%, #EDFFE8 100%);
	--vert:#10734F;
	--vert-fonce:#0F2624;
	--vert-gris:#48594E;
	--kaki:#A2A637;
	--bleu-clair:#d8f7f2;
	--bleu:#2398b3;
	--bleu-fonce:#2a4f5c;
	--linear-bleu:linear-gradient(56deg, #FAFCDA 3.17%, #f2fbf9 100%);
	--gris:#BFBFBF;
	--gris-clair:#DEDEDE;
	--gris-moyen:#858585;
	--gris-fonce:hsl(0, 0%, 40%);
	--marron-clair:#A69A60;
	--marron:#A68A56;
	--marron-fonce:#735826;
	--brun:#262626;
	--blanc:#FFFFFF;
	--ocre:#BF7C41;
	--rouge:#C96E51;
	--rouge-fonce:#8e3922;
	--grey-shadow:0px 2px 6px 0px rgba(0, 0, 0, 0.25);
	--inset-shadow:-3px 0 10px -6px rgba(0, 0, 0, 0.15) inset;
	--radius-5:5px;
	--padding-large:1.5em 2em;
}

/* ---- Fonts ---- */
@font-face {
  font-family: "Scout";
  font-weight:400;
  src:
    local("Scout-Light"),
    url("../fonts/scout/Scout-Light.otf") format("opentype") tech(color-COLRv1),
}

@font-face {
  font-family: "Scout";
  font-weight:500;
  src:
    local("Scout-Regular"),
    url("../fonts/scout/Scout-Regular.otf") format("opentype") tech(color-COLRv1),
}

@font-face {
  font-family: "Scout";
  font-weight:600;
  src:
    local("Scout-Bold"),
    url("../fonts/scout/Scout-Bold.otf") format("opentype") tech(color-COLRv1),
}

@font-face {
  font-family: "Corbel";
  font-weight:500;
  src:
    local("Corbel"),
    url("../fonts/corbel/Corbel.ttf") format("truetype") tech(color-COLRv1),
}

@font-face {
  font-family: "Corbel";
  font-weight:700;
  src:
    local("Corbel-Bold"),
    url("../fonts/corbel/Corbel-Bold.ttf") format("truetype") tech(color-COLRv1),
}

html{
	font-family: 'Scout';
	font-weight: 400;
	font-size: 18px;
}

li{
	list-style: none;
}

ul{
	padding-left: 0;
}

a{
	text-decoration: none;
	color: inherit;
}

p,h1{
	margin: 0;
}

h1,h2,h3{
	margin: 0.4em initial;
}

p{
	margin-top:0.5em;
}

select{
	border: inherit;
	box-shadow: inherit;
}

.light{
	font-weight: 400;
}

.regular{
	font-weight: 500;
}

.semibold{
	font-weight: 600;
}

.text-s{
	font-size: 0.9em;
}

.text-22{
	font-size: 1.12rem;
}

.text-24{
	font-size: 1.3rem;
}

.text-center{
	text-align: center;
}

.text-right{
	text-align: right;
}

/* ---------------- Layout ---- */

/* Background Layout */

.blanc-bg{
	background-color:var(--blanc);
}

.jaune-light-bg{
	background-color:var(--jaune-light);
}

.jaune-pastel-bg{
	background-color:var(--jaune-pastel);
}

.bleu-bg{
	background-color:hsl(171.8, 100%, 95.7%);
}

.bleu-light-bg{
	background-color:var(--bleu-clair);
}

.linear-bleu-bg{
	background-color:var(--linear-bleu);
}

.rouge-bg{
	background-color:var(--rouge);
}

.linear-jaune-bg{
	background:var(--linear-jaune);
}

.jaune-bg{
	background-color:var(--jaune);
}

.vert-fonce-bg{
	background-color:var(--vert-fonce);
	color:var(--jaune-pastel);
}

.vert-gris-bg{
	background-color:var(--vert-gris);
}

.brun-bg{
	background-color:var(--brun);
	color:var(--gris);
}

.grey-shadow{
	box-shadow:var(--grey-shadow);
}

.inset-shadow{
	box-shadow:var(--inset-shadow);
}

.radius-5{
	border-radius: var(--radius-5);
}

.img-bg{
	background:url('../img/hero-banner.png');
	background-size: cover;
	background-repeat: no-repeat;
}

.kaki{
	color:var(--kaki);
}

.vert-gris{
	color:var(--vert-gris);
}

.rouge{
	color:var(--rouge);
}

.rouge:hover{
	color:var(--rouge-fonce);
}

.gris{
	color:var(--gris-moyen);
}

.gris:hover {
	color:var(--gris-fonce);
}


/* Spacing */
.padding-10{
	padding:10px;
}

.padding-20{
	padding:20px;
}

.padding-large{
	padding:var(--padding-large);
}

/* Flex Layout */

.vertical{
	display: flex;
	flex-direction: column;
}

.row-auto{
	height: auto;
}

.flex-3{
	flex-grow: 3;
}

.items-vertical-center{
	justify-content: center;
}

.align-center{
	align-items: center!important;
}

.justify-between{
	justify-content: space-between !important;
}

.justify-center{
	justify-content: center!important;
}

.self-center{
	align-self: center;
}

.self-stretch{
	align-self: stretch;
}

.colonnes{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.colonnes-2{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.colonnes-3{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.colonne-20w{
	width:20%;
	flex-shrink: 2;
	flex-grow: 1;
}

.colonne-50w{
	min-width: calc(97% /2);
	max-width:calc(97% /2);
	flex-shrink: 2;
	flex-grow: 2;
}

.colonne-60w{
	width: 60%;
	flex-grow: 2;
	min-width: 350px;
}

.colonne-80w{
	width:80%;
	flex-shrink: 2;
	flex-grow: 2;
}

/* Grid Layout */

.grid-2-colonnes{
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 100vh;
}

.colonnes-25__75{
	grid-template-columns: minmax(300px, 365px) auto;
}

.row-22_auto{
	grid-template-rows: minmax(150px, 200px) auto;
}

/* Gap Layout */
.gap-5{
	gap:5px;
}

.gap-15{
	gap:15px;
}

.gap-30{
	gap:30px;
}

/* Layout Container */

main{
	min-height: 100vh;
}

.minus-header{
	margin-top:-70px;
}

.full-h{
	min-height: 100vh;
}

.h-50vh{
	min-height: 50vh;
}

.h-100{
	height: 100%!important;
}

.w-10{
	width: 10%;
}

.w-30{
	width: 30%;
}

.w-60{
	width: 60%;
}

.w-70{
	width: 70%;
}

.w-100{
	width: 100%;
}

.w-fit{
	width: fit-content;
}

.w-auto{
	width: auto;
}

.contained{
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
}

.home section:not(section:first-child){
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6em 0;
}

.inline{
	display: inline-flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
}

.no-wrap{
	flex-wrap: nowrap;
}

.resume{
	margin-top:15px;
	margin-bottom:15px;
}

.info-post{
	gap:8px;
	justify-content: space-between;
}

.icon__info{
	display: inline-flex;
	min-width: 17px;
	gap: 6px;
}

.icon-container{
	display: flex;
	justify-content: center;
	align-items: center;
}

.thmb-user{
	margin-top: 22.41px;
	border-radius: 100%;
    max-height: 80px;
    max-width: 80px;
    object-fit: cover;
	aspect-ratio: 1/1;
    height: 100%;
    display: block;
	transition: filter 0.2s ease-in-out;
	
	img{
		border-radius: 100%;
		max-height: 80px;
		max-width: 80px;
		object-fit: cover;
		height: 100%;
		display: block;
	}

	&:hover{
		filter: brightness(1.5) contrast(0.6);
	}
}

/* Layout Table */
table{
	border-collapse: collapse;
}

tbody{
	border: none!important;
}

.sort-icon{
	text-align: right;
	margin-left: 10px;
} 

td{
  border-bottom: 1px solid #ddd;
	padding:15px 20px;
}

.td__nom{
	cursor: pointer;
	transition: 0.2s ease-in-out all;
}

.msg_new{
	font-weight: 600;
}

.msg_new.read,
.msg_new.read td{
	font-weight: 500;
}

.td__nom:hover{
	text-decoration: underline;
	color:var(--vert-gris);
}

.icon-btn button{
	border: none;
	display: block;
	margin: 0 auto;
}

.voir path{
	stroke:var(--bleu);
}

.icon-btn button{
	transition: 0.2s ease-in-out all;
}

.delete path{
	stroke:var(--rouge);
}

.icon-btn .delete:hover path{
	stroke:var(--rouge-fonce);
}

.icon-btn .voir:hover path{
	stroke:var(--bleu-fonce);
}

th{
	background-color: var(--jaune-light);
	font-weight: 500;
	padding:20px 20px;
	text-align: left;
}

/* Homepage Container */
.hero-banner{
	position: relative;
	display: flex;
	position: relative;
	justify-content: center;
}

.intro-block{
	position: relative;
	top:30vh;
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
}

.intro-block h1{
	text-transform: uppercase;
	color:var(--blanc);
	font-family: 'Scout';
	font-weight: 500;
	font-size: 240%;
	text-align: center;
}

.schema-anime{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	flex-direction: column;
	height: 100%;
	max-height: 900px;
}

.front{
	z-index: 29;
}

.back{
	
	z-index: 2;
}

.trajectoire-container{
	top:0;
	width: 100%;
}

.trajectoire{
	top:0;
	fill:none;
	stroke:#eff291;
	stroke-linecap:round;
	stroke-miterlimit:10;
	stroke-width:3px;
	stroke-dasharray:3 14;
}

.suiveur{
	width: 40px;
	height: 40px;
	bottom: 0;
	z-index: 3;
}

/* Forms */

.block-input{
	display: flex;
	flex-direction: column;
	gap:10px;
	width: 100%;
}

.switch{
	position: relative;
  display: inline-block;
  width: 50px;
  height: 25px;
	
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
	display: flex;
	justify-content: flex-start;
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 19px;
  width: 19px;
	left: 1px;
  top: 1px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(25px);
  -ms-transform: translateX(25px);
  transform: translateX(25px);
}

textarea{
	resize: none;
}

.edit{
	width: 25px;
}

.new-title{
	padding:10px 1em;
	border-radius: 5px;
}

.login{
	padding: 3em var(--padding-large);
	border-radius: 15px;
	color:#000000;
}

#itineraires_accepte label{
	display: inline-flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Annonces Container */

.breakcrumb{
	height: 20vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.annonces .colonnes-2{
	justify-content: center;
	align-items: stretch;

	> div{
		min-width:100px;
	}

}

.all-annonces-container{
	display: flex;
	flex-direction: column;
	gap:20px;
	margin-bottom: 2em;
}

.all-annonces{
	padding: 1em;
	display: flex;
	flex-direction: column;
	gap:20px;
}

.scrolling{
	overflow: scroll;
	scroll-behavior: smooth;
	max-height: 80vh;
}

/* ---- Backoffice ---- */

.backoffice .grid-2-colonnes{
  grid-template-areas:
    "account head"
    "nav main";
}

.account{
	grid-area: account;
}

.account p{
	margin: 0;
}

.user-thmb-container{
	max-width: 78px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 100%;
  aspect-ratio: 1/1;
}

.user-intro{
	flex-grow: 2;
	width: auto;
}

.follow{
	width: 100%;
}

.followers-wrapper{
	flex-grow: 2;
}

.followers-wrapper p{
	margin: 0;
}

.sidebar-container{
  grid-area: nav;
  overflow-x: hidden;
}

.sb-row{
	padding: 20px;
	margin-bottom: 8px;
}

.bo__breakcrumb{
	grid-area: head;
	box-sizing: border-box;
}

.content{
	grid-area: main;
}

.bo-items{
	display: flex;	
	color:var(--marron);
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	cursor: pointer;
	font-weight: 400;
}

.bo-items a{
	transition: 0.5s ease-in-out all;
}

.bo-items a:hover{
	color: var(--marron-fonce);
	text-decoration: underline;
}

.bo-items__open{
	color:var(--marron-fonce);
	font-weight: 400;
}
.bo-items .bo-items_submenu{
	display: none;
}

.bo-items__open .bo-items_submenu{
	display: initial;
	color:var(--marron-clair);
	width: 100%;
	margin:5px auto 1em 2.81rem;
}

.prev__icon{
	display: inline-flex;
	flex-grow: 2;
}

.prev__icon__active{
	font-weight: 600;
}


.prev__icon__active::before svg{
	fill:var(--marron-fonce);
}

.prev__icon::before{
	width: 30px;
	height: 30px;
	margin-right: 5px;
}

.arrow{
	width: 15px;
	height: auto;
}

.arrow .down{
	color:var(--marron-fonce);
}

.settings::before{
	content:url('../img/icons/icon-settings.svg');
}

.itineraires::before{
	content:url('../img/icons/icon-backoffice-itineraires.svg');
}

.friends::before{
	content:url('../img/icons/icon-backoffice-friends.svg');
}

.mailer::before{
	content:url('../img/icons/icon-backoffice-mail.svg');
}

.sort{
	 cursor: pointer;
}

/* ---- Backoffice ADMIN ---- */


/* ---- Elements ---- */
button{
	border: inherit;
	cursor: pointer;
	border-radius:46px ;
	padding: 11px 37px;
}

.btn-small{
	padding: 6px 15px;
}

.btn-small .w150px{
	max-width: 150px;
}

.action{
	display: flex;
	justify-content: center;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}

.action svg{
	height: 25px;
}

.ajouter{
  gap: 5px;
}

.ajouter::before{
	content:url('../img/icons/icon-add.svg');
}

.ecrire{
  gap: 10px;
}

.notification{
	position: relative;
}

.icon-notification{
	content:url('../img/icons/icon-notification.svg');
	height: 25px;
}

.round{
	position: absolute;
	font-weight: 600;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 19px;
	background-color: var(--rouge);
	border:2px solid black;
	font-size: 12px;
}

.btn-green{
	background-color: var(--fluo);
	color: black;
	transition: 0.2s ease-in-out all;
}

.btn-blue{
	color:var(--blanc);
	background-color: var(--bleu);
	transition: 0.2s ease-in-out all;
}

.btn-blue path{
	fill: white!important;
}

.no-bg{
	padding: 0;
	background-color: transparent;
	color: black;
	transition: 0.2s ease-in-out all;
}

.hover-green:hover{
	background-color: var(--kaki);
}

.btn-kaki{
	background-color:var(--kaki);
}

.search{
	width: 100%;
	box-sizing: border-box;
	background-color:var(--blanc);
	border-radius: 30px;
	padding: 0.5em 1em;
	display: inline-flex;
}

.search >*{
	flex-grow: 2;
	padding: 0.5em 1em;
}

.search button{
	min-width: 180px!important;
}

.search input,
.search select{
	border: inherit;
	background: inherit;
	width: calc(100% / 4);
}

.search input:not(input:first-child),
.search select{
	border-left: 1px solid gray;
	margin-left: 1em;
}

.border-thin{
	border:1px solid var(--gris-clair);
}

.post-wrapper{
	padding: 1em;
}

.post-wrapper .colonne-20w{
	align-items: center;
}

.post-wrapper button:not(.content button){
	flex-grow: 3;
}

.contact{
	width: 30px;
}

.map-container {
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 600px;
	height: 100%;
}

.map-container img{
	height: 100%;
	width: auto;
}
/* ---- Position ---- */

.relative{
	position: relative;
}

.absolute{
	position: absolute;
}

/* ---- Media ---- */

img, svg{
	width: 100%;
	height: auto;
}

/* ---- Header ---- */
header{
	position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
	width: 100%;
	background-color:var(--vert-fonce);
	z-index: 1000;
}

.header-wrapper{
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	padding: 10px;
	font-family: 'Corbel';
	font-weight:500;
}

.site-branding{
	max-width: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.site-branding img{
	width: 100%;
	height: auto;
}

.menu-header{
	width: 40vw;
}

.menu-item{
	color:var(--blanc);
}

.menu-item:hover{
	color: var(--jaune);
}

.log-wrapper{
	display: flex;
	justify-content: space-between;
	align-items: center;
	color:var(--jaune);
	gap:20px;
}

.logout-link{
	display: inline-flex;
	align-items: center;
	color: var(--jaune);
	transition: opacity 0.2s ease-in-out;
}

.logout-link:hover{
	opacity: 0.8;
}

.account-icon-wrapper{
	position: relative;
	display: inline-block;
	line-height: 0;
}

.account-icon-wrapper img{
	display: block;
	width: auto;
	height: auto;
}

.notification-badge{
	position: absolute;
    top: -8px;
    right: -3px;
    background-color: #ff4444;
    color: white !important;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    width: 20px;
    aspect-ratio: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    border: 2px solid white;
    line-height: 1;
}

/*Animation header scroll*/

.hidden{
	animation:0.4s ease-in-out 1 forwards headerHide;
}

.show{
	animation:0.4s ease-in-out 1 forwards headerIn;
}

.initial{
	animation:0.2s ease-in-out 1 forwards headerIn;
}


@keyframes headerIn{
	0%{
		transform: translateY(-100%);
		opacity: 0;
	}
	100%{
		transform: translateY(0%);
		opacity: 1;
	}
}

@keyframes headerHide{
	0%{
		transform: translateY(0%);
		opacity: 1;
	}
	100%{
		transform: translateY(-100%);
		opacity: 0;
	}
}  

/* ---- Navigation ---- */

.pagination-wrapper{
  display: flex;
	justify-content: center;
	align-items: center;
}

.number{
	display: flex;
	width:10px;
	height: 10px;
	text-align: center;
	border-radius: 100%;
	padding: 10px;
	justify-content: center;
	align-items: center;
}

/* ---- Footer ---- */
footer{
	background-color:var(--marron);
}

.footer-container{
	max-width: 800px;
	margin:0 auto;
	padding:3em 0 1em 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.list-inline{
	display: flex;
	justify-content: center;
	gap:20px;
} 

.copyright{
	width: 100%;
	text-align: center;
	padding-top:1em;
	border-top:1px solid var(--marron-fonce);
}

/* ---- Main ---- */

/* ============================================
   RESPONSIVE - Media Queries
   ============================================ */

/* Tablette (max-width: 1024px) */
@media screen and (max-width: 1024px) {
	html {
		font-size: 16px;
	}
	
	.contained {
		padding: 0 20px;
	}
	
	.colonne-50w {
		min-width: 100%;
		max-width: 100%;
	}
	
	.colonne-60w {
		min-width: 100%;
		width: 100%;
	}
	
	.colonne-80w,
	.colonne-20w {
		width: 100%;
	}
	
	.grid-2-colonnes {
		grid-template-columns: 1fr;
	}
	
	.backoffice .grid-2-colonnes {
		grid-template-areas:
			"account"
			"head"
			"nav"
			"main";
	}
	
	.home section:not(section:first-child) {
		padding: 4em 0;
	}
	
	.intro-block h1 {
		font-size: 180%;
	}
	
	.menu-header {
		width: 50vw;
	}
}

/* Mobile moyen (max-width: 768px) */
@media screen and (max-width: 768px) {
	html {
		font-size: 15px;
	}
	
	h1 {
		font-size: 1.8rem;
	}
	
	h2 {
		font-size: 1.5rem;
	}
	
	h3 {
		font-size: 1.3rem;
	}
	
	.text-24 {
		font-size: 1.1rem;
	}
	
	.text-22 {
		font-size: 1rem;
	}
	
	/* Layout Flex */
	.colonnes-2 {
		flex-direction: column;
	}
	
	.colonnes-3 {
		flex-direction: column;
	}
	
	.colonne-20w,
	.colonne-50w,
	.colonne-60w,
	.colonne-80w {
		width: 100%;
		min-width: 100%;
		max-width: 100%;
	}
	
	.inline {
		flex-wrap: wrap;
	}
	
	.gap-30 {
		gap: 15px;
	}
	
	.gap-15 {
		gap: 10px;
	}
	
	/* Header */
	.header-wrapper {
		flex-wrap: wrap;
		padding: 10px 15px;
	}
	
	.menu-header {
		width: 100%;
		order: 3;
		margin-top: 10px;
	}
	
	.site-branding {
		max-width: 80px;
	}
	
	.log-wrapper {
		gap: 15px;
	}
	
	/* Search */
	.search {
		flex-direction: column;
		gap: 15px;
		padding: 1em;
	}
	
	.search > * {
		width: 100%;
		border-left: none !important;
		margin-left: 0 !important;
		border-top: 1px solid var(--gris-clair);
		padding-top: 15px;
	}
	
	.search > *:first-child {
		border-top: none;
		padding-top: 0.5em;
	}
	
	.search input,
	.search select {
		width: 100%;
	}
	
	.search button {
		min-width: 100% !important;
		margin-top: 10px;
	}
	
	/* Breakcrumb */
	.breakcrumb {
		height: auto;
		padding: 20px 0;
		min-height: auto;
	}
	
	/* Homepage */
	.intro-block {
		top: 20vh;
		padding: 0 20px;
	}
	
	.intro-block h1 {
		font-size: 150%;
	}
	
	.home section:not(section:first-child) {
		padding: 3em 0;
	}
	
	/* Post wrapper */
	.post-wrapper {
		padding: 15px;
	}
	
	.post-wrapper .colonnes-2 {
		flex-direction: column;
	}
	
	.post-wrapper .colonne-20w {
		flex-direction: row;
		align-items: center;
		gap: 15px;
		margin-top: 15px;
	}
	
	.info-post.inline {
		flex-wrap: wrap;
		gap: 10px;
	}
	
	.icon__info {
		flex: 1 1 auto;
		min-width: auto;
	}
	
	/* Buttons */
	button {
		padding: 10px 25px;
		font-size: 0.9rem;
	}
	
	.btn-small {
		padding: 5px 12px;
		font-size: 0.85rem;
	}
	
	/* Forms */
	.block-input {
		gap: 8px;
	}
	
	.login {
		padding: 2em 1.5em;
	}
	
	/* Table */
	td {
		padding: 10px 15px;
		font-size: 0.9rem;
	}
	
	th {
		padding: 15px;
		font-size: 0.9rem;
	}
	
	/* Footer */
	.footer-container {
		padding: 2em 1em 1em 1em;
	}
	
	.list-inline {
		flex-direction: column;
		gap: 15px;
		align-items: center;
	}
	
	/* Backoffice */
	.sb-row {
		padding: 15px;
	}
	
	.bo-items {
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
	}
	
	.user-thmb-container {
		max-width: 60px;
	}
	
	/* Scrolling */
	.scrolling {
		max-height: 60vh;
	}
}

/* Mobile petit (max-width: 480px) */
@media screen and (max-width: 480px) {
	html {
		font-size: 14px;
	}
	
	h1 {
		font-size: 1.6rem;
	}
	
	h2 {
		font-size: 1.4rem;
	}
	
	h3 {
		font-size: 1.2rem;
	}
	
	.text-24 {
		font-size: 1rem;
	}
	
	.text-22 {
		font-size: 0.95rem;
	}
	
	.text-s {
		font-size: 0.85rem;
	}
	
	/* Spacing */
	.padding-20 {
		padding: 15px;
	}
	
	.padding-10 {
		padding: 8px;
	}
	
	.padding-large {
		padding: 1em 1.5em;
	}
	
	/* Header */
	.header-wrapper {
		padding: 8px 10px;
	}
	
	.site-branding {
		max-width: 70px;
	}
	
	.log-wrapper {
		gap: 10px;
		font-size: 0.9rem;
	}
	
	/* Search */
	.search-container {
		padding: 0 15px;
	}
	
	.search {
		padding: 0.8em;
		gap: 12px;
	}
	
	/* Homepage */
	.intro-block {
		top: 15vh;
		padding: 0 15px;
	}
	
	.intro-block h1 {
		font-size: 130%;
	}
	
	.home section:not(section:first-child) {
		padding: 2em 0;
	}
	
	/* Post wrapper */
	.post-wrapper {
		padding: 12px;
	}
	
	.post-wrapper .colonne-20w {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	
	.info-post.inline {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	
	.icon__info {
		width: 100%;
	}
	
	/* Buttons */
	button {
		padding: 8px 20px;
		font-size: 0.85rem;
	}
	
	.btn-small {
		padding: 5px 10px;
		font-size: 0.8rem;
	}
	
	/* Table */
	td {
		padding: 8px 10px;
		font-size: 0.85rem;
	}
	
	th {
		padding: 12px 10px;
		font-size: 0.85rem;
	}
	
	/* Footer */
	.footer-container {
		padding: 1.5em 1em 1em 1em;
	}
	
	.copyright {
		font-size: 0.85rem;
	}
	
	/* Backoffice */
	.sb-row {
		padding: 12px;
		font-size: 0.9rem;
	}
	
	.user-thmb-container {
		max-width: 50px;
	}
	
	/* Scrolling */
	.scrolling {
		max-height: 50vh;
	}
	
	.all-annonces {
		padding: 0.8em;
		gap: 15px;
	}
	
	/* Map */
	.map-container {
		min-height: 300px;
	}
	
	/* Gap adjustments */
	.gap-30 {
		gap: 10px;
	}
	
	.gap-15 {
		gap: 8px;
	}
	
	.gap-5 {
		gap: 4px;
	}
}