@charset "utf-8";

:root {
	/* Couleurs principales */
	--color-bleu: #18577f;
	--color-orange: #e36f43;
	--color-orange-clair: #F5C5B2;
	--color-gris: #F2F2F2;

	/* Couleurs secondaires (fonds de sections) */
	--color-bleu-clair: #a6ecfe;
	--color-bleu-moyen: #3098ae;
	--color-vert: #3b6869;
	--color-brun: #9f9a8b;
	--color-claro: #e7dfdf;

	/* Rayons de bordure récurrents */
	--radius-card: 12px;
	--radius-arrondi: 24px;
	--radius-grand: 48px;

	/* Police */
	--font-titres: "Gelasio", serif;
	--font-texte: "Roboto", sans-serif;
}

* {
	box-sizing: border-box;
}

img{
	width: 100%;
}

a{
	text-decoration: none;
}

p{
	margin-bottom: 1rem;
	line-height: 2rem;
	text-align: justify;
}
p:last-child{
	margin-bottom: 0;
}

ul{
	margin-bottom: 0;
}

h2{
	font-size:2rem;
	font-variant:small-caps;
	font-weight:700;
}

h3{
	font-family: "Gelasio", serif;
  	color:var(--color-orange);
	text-transform: lowercase;
	font-variant:small-caps;
	font-weight: 700;
}

summary{
	font-variant:small-caps;
	color:var(--color-orange);
	font-weight:700;
	font-size:1.25rem;
}

summary:hover{
	color:black;
}

#breadcrumbs a{
	color:#e36f43;
}

.borderbleu{
	border-left: 4px solid var(--color-bleu);
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.gap-card-5{
	column-gap:5%;
}

.p-relative{
	position: relative;
}

.p-absolute{
	position: absolute;
}

/* --- COLORS --- */

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

.bgcolor-orange{
	background-color: var(--color-orange);
}

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

.color-blue{
	color: var(--color-bleu);
}

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

.color-orangeclair{
	color:var(--color-orange-clair);
}

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

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

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

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

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

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

/* --- END COLORS --- */

/* --- FONTS --- */

.gelasio-{
  font-family: "Gelasio", serif;
}

.roboto-{
  font-family: "Roboto", sans-serif;
}

/* --- END FONTS --- */

/* --- BOUTONS --- */

.btn-bleu{
	display: block;
	font-family: "Roboto", sans-serif;
	padding: .75rem 2rem;
	border-radius: .75rem;
	font-size:1.25rem;
	font-variant: small-caps;
	font-weight:600;
	border:none;
	color:white;
	align-self: center;
}

.btn-bleu:hover{
	background-color: lightgrey;
	color:black !important;
	transition: 0.4s;
}

.btn-orange{
	color:white !important;
	padding: 1rem 3rem;
	border-top-left-radius: 24px;
  	border-bottom-right-radius: 24px;
  	font-size:1.25rem;
	font-variant: small-caps;
	font-weight:600;
	border:none;
}

.btn-orange:hover{
	background-color: transparent;
	transition: 0.4s;
	color:var(--color-orange) !important;
}

.btns-header{
	width: 65%;
}

.btn-header{
	background-color:transparent;
	border:none;
	font-size:1.5rem;
	color: white;
}

.navbar-toggler{
	color:white;
	border:none;
}

.navbar-toggler i{
	font-size:1.75rem;
}

/* --- FIN BOUTONS --- */

/* --- LANGUES --- */

form{
	position: absolute;
	bottom:0;
	right: 0;
}

select{
    width: 70px;
    padding: 1.25rem .5rem .75rem 1.5rem;
    border-top-left-radius: 5rem;
    border:none;
    color:white;
    font-weight:600;
    appearance:none;
    text-align: center;
}

select:focus{
 	outline: none; /* Supprime le contour bleu au clic */
 	border: none;  /* Empêche l'affichage d'une bordure */
  	box-shadow: none; /* Supprime l'ombre de focus */
}

option{
	background-color: white;
	color:black;
	font-weight:600;
	border:none;
}

option:hover{
	background-color: lightgrey !important ;
}

.btn-top{
	width: 30%;
	padding: 1rem 3rem;
	border-radius: .75rem;
	border:none;
	margin-bottom: 2rem;
	color:black;
	font-variant: small-caps;
	font-weight: 700;
}

.btn-top:hover{
	background-color: lightgrey;
	transform: translateY(-5px);
	transition: 0.4s;
}

.btn-top i{
	font-size:1.5rem;
}

.parrabtn{
	font-size:1.25rem;
}

/* --- FIN LANGUES --- */

/* --- HEADER ---  */

header{
	min-height: 10rem;
	position: relative;
}

header .logo{
	width:30%;
}

.navbar {
	width: 50%;
}

.navbar-nav .nav-link{
	color:white;
	font-variant: small-caps;
	font-size: 1.25rem;
	font-weight: 600;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
.navbar-toggler a{
	color:var(--color-orange);
}

header i:hover{
	color:var(--color-orange);
}

.nav-link:focus, 
.nav-link:hover,
.navbar-nav .nav-link.show{
	color:var(--color-orange-clair);
}

.dropdown-toggle::after{
	color: rgba(255,255,255,.75);
}

.dropdown-item::first-letter{
	text-transform: uppercase;
}

.dropdown-item:hover{
	background-color: var(--color-orange);
}

.dropdown-item.active, 
.dropdown-item:active {
	background-color: var(--color-gris);
	color:black;
}

.textaccueil h1{
	font-size:1.75rem;
	font-variant:small-caps;
	font-weight:700;
}

.search-container{
    display: flex;
    align-items: center;
    position: relative;
}

.search-bar{
    display: none;
    margin-right: .75rem;
}

.search-bar.active{
    display: block;
}

.search-bar form{
    position: static;
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.search-bar input{
    width: 220px;
    border: none;
    outline: none;
    padding: .6rem 1rem;
    font-family: "Roboto", sans-serif;
}

.search-bar button{
    border: none;
    background-color: var(--color-orange);
    color: white;
    padding: .6rem .9rem;
}


/* --- END HEADER --- */

/* --- VISION / MISSION --- */

.card-vm {
   	background: transparent;
   	border: none; 
   	position: relative;
}

.imgarrow1{
	width: 15%;
	left:11rem;
	top: 1rem;
}

.imgarrow2{
	width: 15%;
	top: 1rem;
	right: 12rem;
	-webkit-transform: scaleX(-1);
  	transform: scaleX(-1);
}

.imgcard {
 	border-top-left-radius: 48px;
 	border-bottom-right-radius: 48px;
}

.vision-mission h2{
	font-size:1.75rem;
	font-variant:small-caps;
	font-weight:700;
}

.vision-mission p{
	text-align: center;
	font-size:1.25rem;
	line-height: 2rem;
}

.fondgris{
	z-index: -1;
	height: 60%;
}

/* --- END VISION / MISSION --- */

/* --- ACTIONS --- */

.gallery-image {
  	border-radius: 12px;
}

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

.gallery-item img:hover{
	transform: scale(1.1); /* agrandit légèrement l'image au survol */
 	opacity: 0.8; 
 	transition: 0.4s;
}

.gallery-title {
 	margin-top: 10px;
  	font-size: 1.25rem;
  	font-weight: 500;
}

.gallery-title::first-letter{
	text-transform: uppercase;
}
/* --- END ACTIONS --- */

/* --- ACTUALITES --- */

.card-actu {
	border-radius: var(--radius-card);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.card-actu img {
	width: 100%;
	height: 250px; /* tu peux ajuster selon ton design */
 	object-fit: cover; /* garde le centrage et rogne un peu si besoin */
  	border-top-right-radius: var(--radius-card);
  	border-top-left-radius: var(--radius-card);
}

.card-actu .date{
	color:white;
	font-weight: 600;
	border-top-right-radius: 12px;
	width: 50%;
	height: 15%;
	position: absolute;
	top: 0;
	right: 0;
}

.actualites h3{
	color:black;
}

/* --- END ACTUALITES ---*/

/* --- TEMOIGNAGES --- */

.testimonial-card {
	background-color: var(--color-gris);
	border-radius: 12px;
	padding: 40px;
	text-align: justify;
	height: 35rem;
}

.testimonial-card h4 {
	text-align: center;
  	color: var(--color-bleu);
  	font-weight: 500;
  	font-size: 1.25rem;
  	padding-bottom: 20px;
}

.carousel-control-prev i,
.carousel-control-next i{
  	color:var(--color-orange-clair);
  	font-size: 2rem;
}

.carousel-control-prev:hover i,
.carousel-control-next:hover i{
  	color:grey;
}

/* --- END TEMOIGNAGES --- */

/* --- FOOTER --- */

footer i{
	font-size: 1.75rem;
}

.footer1 img{
	width: 20%;
}

.footer1 .contact a{
	color:white;
}

.footer1 .contact a:hover{
	color:var(--color-orange);
}

.footer2 img{
	width: 40%;
}

.footer2 a{
	text-decoration: none;
	color:black;
}

.footer2 a:hover{
	color:var(--color-orange);
}

.reseaux i:hover{
	color:var(--color-orange);
}

/* --- END FOOTER --- */


/* --- ASBL --- */

.asbl .droite img{
	width: 100%;
}

.asbl img,
.depart-origine img{
	border-radius: 12px;
}

.photogauche img,
.photodroite img{
	width: 100%;
	height: 23rem;
	object-fit: cover;
}

/* --- historique 1995 à maintenant --- */

.histoire-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: var(--color-gris);
	border-radius: 12px;
	height: 28rem;
	padding:1.5rem;
}

.histoire-card p {
	hyphens: auto;            
  	-webkit-hyphens: auto;   
  	-ms-hyphens: auto;
 	overflow-wrap: break-word;
 	margin-bottom:0;
}

.histoire-card a{
	color:var(--color-bleu);
	font-weight:700;
}

.histoire-card a:hover{
	color:var(--color-orange);
}

.histoire-card .date{
	color:white;
	font-weight: 600;
	border-top-right-radius: 12px;
	width: 50%;
	height: 2.5rem;
	top: 0;
	right: 0;
}

/* --- END ASBL --- */

/* --- PARTENAIRES + NOUS REJOINDRE + PRESSE --- */

.partenaires .parra1,
.rejoindre .parra1,
.presse .parra1{
	font-weight:500;
	text-align:center;
}

.partenaires a,
.rejoindre a,
.presse a{
	color:var(--color-bleu);
	font-weight:700;
}

.partenaires li,
.rejoindre li,
.presse li{
	line-height: 2rem;
}

.partenaires a:hover,
.rejoindre a:hover,
.presse a:hover{
	color:var(--color-orange);
}

/* --- END PARTENAIRES + NOUS REJOINDRE + PRESSE --- */


/* --- RAPPORTS --- */

.card-rapport {
	background-color:var(--color-gris);
  	border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.card-rapport img {
 	width: 100%;
 	height: 250px; /* tu peux ajuster selon ton design */
 	object-fit: cover; /* garde le centrage et rogne un peu si besoin */
 	border-top-right-radius:12px;
  	border-top-left-radius: 12px;
}

.rapports .parra1{
	text-align:center;
	margin-bottom:0;
}

.card-rapport .date,
.card-plaidoyer .date{
	color:white;
	font-weight: 600;
	border-top-right-radius: 12px;
	width: 50%;
	height: 15%;
	position: absolute;
	top: 0;
	right: 0;
}

.rapports h3{
	color:black;
}

/* ---END RAPPORTS --- */

/* --- NOS ACTIONS --- */

.actions .parra1{
	text-align:center;
	margin-bottom:0;
}

.card-actions {
	background-color:var(--color-gris);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.card-actions img{
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}

.actions h4{
	font-family: "Gelasio", serif;
  	color:var(--color-bleu);
	text-transform: lowercase;
	font-variant: small-caps;
	font-weight: 700;
}

.actions .image img{
	border-radius: 12px;
}

.actions a{
	color:var(--color-bleu);
	font-weight:700;
}

.actions .btn-bleu{
	color:white;
}

.actions a:hover{
	color:var(--color-orange);
}

.actions li{
	line-height: 2rem;
	text-align:justify;
	margin-bottom:1rem;
}

.housingfirst .testimonial-card {
	height: 40rem;
}

.actions .accordion-button{
	color:var(--color-orange);
	text-transform: lowercase;
	font-variant: small-caps;
	font-weight:700;
}

.accordion-button:focus {
  	box-shadow:none;
}

.accordion-button:not(.collapsed) {
  	background-color: transparent;
  	border-left: 4px solid var(--color-bleu);
}

/* --- END NOS ACTIONS --- */

/* --- RUE + AIDER + INFORMER --- */

.rue a,
.aider a,
.info a{
	color:var(--color-bleu);
	font-weight:700;
}

.rue a:hover,
.aider a:hover,
.info a:hover{
	color:var(--color-orange);
}

.rue li,
.aider li,
.info li{
	line-height: 2rem;
	text-align:justify;
	margin-bottom:1rem;
}

.rue .parra1,
.aider .parra1{
	font-weight:500;
}

.gallery-info {
	background-color:transparent;
}

.gallery-info img{
	border-radius:12px;	
	width: 100%;
  	height: 300px; /* Hauteur fixe pour uniformiser les images */
 	object-fit: cover; /* Rogne l'image pour garder un rendu uniforme */
 	border-radius: 12px; /* Esquinas redondeadas opcional */
}

.gallery-info img:hover{
	transform: scale(1.1); /* agrandit légèrement l'image au survol */
 	opacity: 0.8; /* réduit légèrement l'opacité */
 	transition: 0.4s;
}

/* --- FIN RUE + AIDER + INFORMER --- */

/* --- ECHOS DE LA RUE + PUBLICATIONS + CAMPAGNES + PLAIDOYER--- */

.card-echos,
.card-echos2,
.card-publi, 
.card-campagnes,
.card-plaidoyer,
.card-plaidoyer2,
.plaidoyer .card-plaidoyer-merveilles {
	background-color:var(--color-gris);
  	border-radius: 12px;
  	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.card-echos img,
.card-publi img,
.card-campagnes img,
.card-plaidoyer img,
.card-plaidoyer2 img,
.card-plaidoyer-merveilles img{
 	width: 100%;
	height: 250px; /* tu peux ajuster selon ton design */
	object-fit: cover; /* garde le centrage et rogne un peu si besoin */
 	border-top-right-radius:12px;
  	border-top-left-radius: 12px;
}

.merveilles .card-plaidoyer img{
	width: auto;
	height: 352px;
	object-fit: contain; /* garde le centrage et rogne un peu si besoin */
	border-top-right-radius:12px;
	border-top-left-radius: 12px;
}

.card-echos2 img{
 	width: 100%;
 	height: 250px; /* tu peux ajuster selon ton design */
 	object-fit: contain; /* garde le centrage et rogne un peu si besoin */
 	border-top-right-radius:12px;
 	border-top-left-radius: 12px;
}

.card-echos iframe{
	width: 100%;
 	height: 250px; /* tu peux ajuster selon ton design */
 	object-fit: cover; /* garde le centrage et rogne un peu si besoin */
	border-top-right-radius:12px;
  	border-top-left-radius: 12px;
}
.videoCampagne iframe{
	width: 100%;
 	height: 250px;
}
.extraplaidoyer .card-plaidoyer img,
.plaidoyer .card-plaidoyer-merveilles img{
	width: 100%;
 	height: 250px; /* tu peux ajuster selon ton design */
 	object-fit: contain; /* garde le centrage et rogne un peu si besoin */
  	border-top-right-radius:12px;
  	border-top-left-radius: 12px;
}
.card-plaidoyer2{
	overflow:hidden;
	border-radius: 12px;
}

.jexiste a,
.sensibilisation a,
.parolesrue2 a{
	color:var(--color-bleu);
	font-weight:700;
}

.jexiste a:hover,
.parolesrue2 a:hover{
	color:var(--color-orange);
}

.jexiste li,
.sensibilisation li{
	line-height: 2rem;
	text-align:justify;
	margin-bottom:1rem;
}

/* --- FIN ECHOS DE LA RUE + PUBLICATIONS + CAMPAGNES + PLAIDOYER --- */

/* --- ACTUALITES --- */

.page {
    display: none;
}

.active {
  	display: block;
}

.pagination {
 	margin-top: 20px;
}

.pagination button {
	border: none;
	background: none;
	color: gray;
	font-size: 20px;
	cursor: pointer;
	margin: 0 5px;
}

.pagination button.active {
  	color:var(--color-orange);
 	font-weight: bold;
}

.pagination button:hover {
  	color:var(--color-orange);
}

.actualite2 .droite img,
.actualite3 .droite img{
	width: 100%;
	height: 365px;
	object-fit: cover;
	border-radius: 12px;
}

.actualite2 a,
.actualite3 a{
	color:var(--color-bleu);
	font-weight:700;
}

.actualite2 li,
.actualite3 li{
	line-height: 2rem;
}

.actualite2 a:hover,
.actualite3 a:hover{
	color:var(--color-orange);
}

/* --- FIN ACTUALITES --- */














/* --- CONTACT --- */

.contact h3{
	color:black;
}

.contact a{
	color:var(--color-bleu);
	font-weight:700;
}

.contact li{
	line-height: 2rem;
}

.contact a:hover{
	color:var(--color-orange);
}

.contact .imgarrow1{
	width: 15%;
	left:27rem;
	top: 1.5rem;
	z-index: 999;
}

.imgcontact img{
  	border-top-left-radius: 48px;
  	border-bottom-right-radius: 48px;
}

.imgcontact{
	width: 80%;
}

.news p{
	bottom:0;
	right: 0;
}

.imgcontact img:hover{
	transform: scale(1.1); /* agrandit légèrement l'image au survol */
 	opacity: 0.8; /* réduit légèrement l'opacité */
 	transition: 0.4s;
}

.contact i{
	font-size:1.75rem;
}

.contact .newsletter i{
	font-size:4rem;
}

/* --- END CONTACT --- */

/* vieprivecookies + plan du site + mentions legales */

.vieprivecookies a{
	color:var(--color-bleu);
	font-weight:700;
}

.vieprivecookies a:hover{
	color:var(--color-orange);
}

/* FIN vieprivecookies + plan du site + mentions legales */












/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {

	.gallery-item{
		margin-top: 1rem;
	}

	.logofooter{
		margin-top: 2rem;
		margin-bottom: 2rem;
	}
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
}

/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
.dropdown:hover > .dropdown-menu{
	display: block;
}

header{
	height: auto;
}

header .logo{
	width:6%;
}

.navbar {
	width:auto;
}

.btns-header{
	width:auto;
}

.btn-orange{
	padding: 1rem 3rem;
}

.w-60{
	width: 60%;
}

.w-45{
	width: 47%;
}

.w-30{
	width: 30%;
}

.w-20{
	width: 25%;
}

.btn-top{
	margin-bottom: 0;
	width: 100%;
}

.boutons i{
	font-size:1.75rem;
}

.parrabtn{
	font-size:1.25rem;
	font-variant: small-caps;
	font-weight:700;
	color:black;
	text-align: center;
}

.textaccueil h1{
	font-size:2.75rem;
}

h2{
	font-size:2.25rem;
}

.vision-mission h2{
	font-size: 2rem;
}

.action.gallery-item{
	width: 23%;
}

h3{
	font-size:1.5rem;
}

.actions .accordion-button{
	font-size: 1.25rem;
}

p,
li{
	font-size:1.1rem;
}

.testimonial-card {
	height: 25rem;
}

.histoire-card {
	padding: 2.5rem;
}

.asbl .droite img{
	width: 80%;
}

.photogauche img,
.photodroite img{
	width: 80%;
}

.housingfirst .image{
	width:80%;
}

.actualite2 .droite img,
.actualite3 .droite img{
	width: 80%;
}

.footer1 img{
	width: 80%;
}

.footer2 img{
	width: 25%;
}
}

/*// X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

}

/*// XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {

}