@charset "utf-8";
/* CSS Document */ :root {
	--primary-color: #63b938; /* Couleur principale */
	--secondary-color: #957290 /* Couleur secondaire */
		--background-color: #ffffff; /*#fef5eb;*/ /*#dbe1df;*/ /*#fcead4;*/ /*dbcfd9;*/ /* Couleur de fond spécifique */
	--font-color: #000000;
	--accent-color: #f18b05;
}
h2 {
	color: #957290;
	font-size: 2em;
}
h3 {
	color: var(--primary-color);
}
.sous-titre {
	color: var(--primary-color);
	margin-top: 0;
}
h4 {
	text-align: left;
	font-size: 20px;
	align-self: flex-start;
	font-weight: 600;
	color: #70436a;
}
h6 {
	font-style: italic;
	color: #555;
	margin: 5px 0;
	font-size: 14px;
}

h5{
	font-weight: bold;
	color: #000000;
	margin: 5px 0;
	font-size: 14px;
}
figcaption, .legende {
	text-align: center;
	font-style: italic;
	color: gray;
	font-size: smaller;
}
.note, .note:hover {
	font-size: smaller;
	font-style: italic;
	border-top: 1px solid #ccc;
	padding-top: 5px;
	margin-top: 15px;
}
sup {
	vertical-align: super;
	font-size: smaller;
}
sup:link, sup:visited {
	color: black;
}

/*******Tooltip*********/

.lexi-tooltip-container {
  position: relative;
  display: inline-block;
	cursor: help;
	border-bottom: 1px dashed #555;
}

/* Tooltip en position FIXED, plus absolue */
.lexi-tooltip {
  position: fixed;
  background: #dbcfd9;
  color: #000;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
  z-index: 10000;

  white-space: normal;
  max-width: min(600px, 90vw);
  box-sizing: border-box;
}

/* On ne l’affiche plus via :hover, c’est le JS qui le fait */


footer {
	/**version blanche*/ background-color: #ffffff;
	/*ligne au-dessus*/
	border-top: 1px solid #ccc;
	padding-top: 5px;
	margin-top: 15px;
	background-color: #dfdfe2;
}
/*
.bloc-container .bloc {
    
    width:20em;
    height: 9em;
    
}*/
/*.bloc-container .bloc .titre {
    
    margin-top:0em;
	margin-left: 0.5em;
    
}*/
h1, h1 a:visited, h1 a:link {
	color: #ffffff;
}
h1 {
	/*text-transform: none;*/
	margin-top: 0em;
	margin-bottom: 1em;
	font-height: 1.8em;
	font-weight: 600;
	text-transform: none; /*pas de majuscule ici*/
}
/*afficher le bannière en haut comme immigration au masculin*/
.header-container, .header-container-accueil {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}
.banner {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin-top: -3.4em;
	;
}
.banner img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Remplit tout l’espace sans déformation */
	display: block;
	filter: brightness(90%);
}
.titre-overlay {
	position: absolute;
	top: 50%; /* Centre verticalement */
	left: 50%;
	transform: translate(-50%, -50%); /* Assure un centrage parfait */
	background: rgba(55, 62, 80, 0.8); /* Fond légèrement transparent */
	/*background: rgba(112, 67, 106, 0.8);  mauve */
	padding: 2em;
	width: 70%;
	text-align: center;
	border-radius: 6px;
}
.titre-overlay h1 {
	font-size: 3em;
	margin: 0;
}
.titre-overlay a {
	text-decoration: none;
}
.titre-overlay a:hover {
	text-decoration: none;
}
/***Header vient des jeunes famille****/
.header-container /*dans header-page du site jeunes, il n'y a pas les boîtes    */ {
	grid-template-columns: 1fr;
	grid-template-areas: "titre";
}
/****pages intérieures*****/
/*media queries pour étaler sur 2 rangées la ligne picto-problématique - inversé pour ce site */
@media only screen and (max-width:750px) {
	.picto-problematique {
		grid-template-columns: 1fr;
		grid-template-areas: "problematique""picto1";
	}
	.problematique {
		margin-top: 1em;
		padding-left: 0em;
	}
}
.round-developpement, .round-pluri, .round-formation, .round-religion, .round-construction, .round-racisme, .round-animation, .round-deux-garcons, .round-violence, .round-mediation, .round-representations, .round-temoignages, #round {
	width: 9em;
	height: 9em;
	border-radius: 6%;
	border: none;
}
/*image spécifique à chacune des pages*/
.round-pluri {
	background-image: url("../images/mere_mus_centre.png");
	background-size: cover;
	background-color: #43819a;
}
/*la section problematique sert ici a mettre le titre h2*/
.problematique {
	font-style: normal;
}
/***carrés de la page d'accueil***/
.bloc-container {
	margin-top: 0em;
}
.bloc-container .bloc .titre {
	font-weight: bold;
}
/***images dans les blocs***/
#bloc0 {
	background-image: url("../images/praida.png");
	background-color: #b6a1b4;
	background-size: cover;
	background-size: 75%;
	background-repeat: no-repeat;
	background-position: center calc(100% - 30px);
	padding-bottom: 30px
}
#bloc0:hover {
	background-color: #63b938;
	background-size: 80%; /* réduit l'image, ajuste selon ton besoin */
	background-repeat: no-repeat;
	background-position: center calc(100% - 30px);
	padding-bottom: 30px
}
#bloc1 {
	background-image: url("../images/bienvenue.svg");
	background-color: #b6a1b4;
	background-size: cover;
	background-size: 43%;
	background-repeat: no-repeat;
	background-position: center calc(100% - 10px);
	padding-bottom: 10px
}
#bloc1:hover {
	background-color: #63b938;
	background-size: 47%; /* réduit l'image, ajuste selon ton besoin */
	background-repeat: no-repeat;
	background-position: center calc(100% - 10px);
	padding-bottom: 5px
}
#bloc2 {
	background-image: url("../images/role.svg");
	background-color: #b6a1b4;
	background-size: cover;
	background-size: 48%;
	background-repeat: no-repeat;
	background-position: center calc(100% - 10px);
	padding-bottom: 10px
}
#bloc2:hover {
	background-color: #63b938;
	background-size: 50%; /* réduit l'image, ajuste selon ton besoin */
	background-repeat: no-repeat;
	background-position: center calc(100% - 10px);
	padding-bottom: 5px
}
#bloc3 {
	background-image: url("../images/processus.svg");
	background-color: #b6a1b4;
	background-size: cover;
	background-size: 48%;
	background-repeat: no-repeat;
	background-position: center calc(100% - 10px);
	padding-bottom: 10px
}
#bloc3:hover {
	background-color: #63b938;
	background-size: 50%; /* réduit l'image, ajuste selon ton besoin */
	background-repeat: no-repeat;
	background-position: center calc(100% - 10px);
	padding-bottom: 5px
}
#bloc4 {
	background-image: url("../images/savoir.svg");
	background-color: #b6a1b4;
	background-size: cover;
	background-size: 48%;
	background-repeat: no-repeat;
	background-position: center calc(100% - 10px);
	padding-bottom: 10px
}
#bloc4:hover {
	background-color: #63b938;
	background-size: 50%; /* réduit l'image, ajuste selon ton besoin */
	background-repeat: no-repeat;
	background-position: center calc(100% - 10px);
	padding-bottom: 5px
}
/****couleur accordéons*******/
.active, .accordion:hover {
	background-color: #0d1d2c;
}
/********aggrandir les images****/
#modal {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	z-index: 10000;
}
#modal img {
	max-width: 90%;
	max-height: 90%;
	margin: auto;
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
#close {
	position: absolute;
	top: 20px;
	right: 30px;
	cursor: pointer;
	font-size: 30px;
	color: white;
}
.zoomable {
	cursor: zoom-in;
	transition: transform 0.2s ease;
}
.zoomable:hover {
	transform: scale(1.02);
}
/***********encadrés**********/
.encadre-droite {
	background-color: #e8f5e9; /* vert pâle doux */
	border-left: 6px solid #63b938; /* couleur principale */
	border-radius: 8px;
	padding: 15px 20px;
	margin: 10px 0 20px 30px;
	width: 40%;
	float: right;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.encadre-droite h4 {
	margin-top: 0;
	color: #63b938;
	font-size: 1.2em;
	text-transform: uppercase;
	font-weight: 600;
}
.encadre-droite p {
	margin: 0;
	line-height: 1.5em;
	font-size: 0.95em;
}
.encadre-gauche {
	background-color: #dbcfd9;
	border-left: 6px solid #957290;
	border-radius: 8px;
	padding: 15px 20px 5px 20px;
	margin: 10px 0 20px 0px;
	width: 70%;
	float: left;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}


.encadre-gauche h4 {
	margin-top: 0;
	color: #70436a;
	font-size: 1.2em;
	text-transform: uppercase;
	font-weight: 600;
}
.encadre-gauche p {
	margin: 0;
	line-height: 1.5em;
	font-size: 0.95em;
}



/***le saviez-vous gauche*****/

.encadre-gauche-vert {
	background-color: #e8f5e9;
	border-left: 6px solid #63b938;
	border-radius: 8px;
	padding: 15px 20px 5px 20px;
	margin: 10px 0 20px 0px;
	width: 70%;
	float: left;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}


.encadre-gauche-vert h4 {
	margin-top: 0;
	color: #63b938;
	font-size: 1.2em;
	text-transform: uppercase;
	font-weight: 600;
}
.encadre-gauche-vert p {
	margin: 0;
	line-height: 1.5em;
	font-size: 0.95em;
}




/* Ajustement responsive : sur petits écrans, le bloc passe en dessous */
@media (max-width: 900px) {
	.encadre-droite, .encadre-gauche-vert {
		width: 100%;
		float: none;
		margin: 20px 0;
	}
}
@media (max-width: 900px) {
	.encadre-gauche {
		width: 100%;
		float: none;
		margin: 20px 0;
	}
}
/* Images fluides dans les panneaux */
.img-fluid {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}
/***pour les images de forme carrée pour éviter qu'elles soient trop grosses***/
.img-fluid-carre {
	display: block;
	margin: 0 auto; /* centre horizontalement */
	width: 70%; /* prend 60% du conteneur */
	max-width: 800px; /* limite la taille maximale */
	height: auto; /* conserve le ratio */
}
/**********Deux formats de graphique vl-hl************/
.graph-h {
	display: block;
}
.graph-v {
	display: none;
}
/* Sur mobile (ex: largeur max 600px) */
@media (max-width: 600px) {
	.graph-h {
		display: none;
	}
	.graph-v {
		display: block;
	}
}
/********couleurs des "lire" dans Références********/
.reference-vert {
	color: #63b938 !important;
	font-weight: bold;
}
/**COULEUR DES ACCORDÉONS***/
.accordion {
	background-color: #957290 /*0d1d2c*/ ;
}
/* Accordéons doux – assure l’affichage et l’animation */
.panel {
	display: block !important; /* empêche display:none de bloquer */
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.6s ease;
}
/* Rangée de 3 zones colorées (desktop 60-70% largeur, mobile pleine largeur) */
.bandes-info {
	width: 80%;
	margin: 20px auto;
	display: flex;
	gap: 16px;
	/*align-items: stretch;*/
	align-items: flex-start;
	/* si tu veux centrer la rangée, décommente la ligne ci-dessous
  margin-left: auto; margin-right: auto;
  */
	align-items: center;
}
.bande {
	flex: 1 1 0;
	background: #957290; /* fallback */
	color: #ffffff;
	border-radius: 10px;
	padding: 25px 25px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	line-height: 1.6;
	/* police légèrement plus grande que le corps de texte */
	font-size: 1.1em;
}
/* variantes de couleur */
.bande.violet {
	background: #957290;
}
.bande.vert {
	background: #6abb43;
}
.bande.bleu {
	background: #045777;
}
.bande p {
	margin: 0;
}
/* Accessibilité/interaction (optionnel) */
.bande:focus-within {
	outline: 3px solid rgba(255, 255, 255, 0.6);
	outline-offset: 2px;
}
/* Responsive: mobile/tablette = pleine largeur, empilement vertical */
@media (max-width: 900px) {
	.bandes-info {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px;
	}
}
/******pictogrammes dans liste***/
.services-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.service-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 1rem;
}
.icon-wrap {
	width: 55px;
	height: 55px;
	background-color: #957290;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
}
.icon-wrap img {
	width: 30px;
	height: 30px;
}
.service-text {
	line-height: 1.5;
}
#haut {
	background-color: #6abb43;
}
.dropdown:hover .dropbtn {
	background-color: #6abb43;
}
/***************Footer******************/
/*footer {
    background-color: #ffffff;
    
}*/
/******************tableau********************/
.wrapper {
	max-width: 1200px;
	margin-left: 0;
	margin-right: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 24px;
}
.column {
	background-color: #ffffff;
	padding: 16px 18px 24px;
	border-radius: 12px;
}
.column-header {
	display: inline-block;
	background-color: #6abb43;
	color: #ffffff;
	padding: 10px 22px;
	border-radius: 10px;
	font-size: 1 rem;
	margin-bottom: 0px;
}
.section {
	display: flex;
	background-color: #f0f9ed;
	border-radius: 12px;
	margin-top: 18px;
	overflow: hidden;
	
	
}
.section-label {
	background-color: #6abb43;
	color: #ffffff;
	padding: 10px 8px;
	font-size: 0.85rem;
	font-weight: bold;
	text-align: center;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	letter-spacing: 0.03em;
	font-family: 'Montserrat', sans-serif;
	transform: rotate(180deg);
}
.section-content {
	padding: 16px 20px;
	flex: 1;
}
.section-content h3 {
	font-size: 1rem;
	margin-bottom: 6px;
	margin-top: 10px;
}
.section-content h3:first-of-type {
	margin-top: 0;
}
/* 2e rangée dans chaque colonne */
.column .section:nth-of-type(2) {
	min-height: 350px; /* à ajuster aussi */
}
ul {
	list-style-type: disc;
	padding-left: 0px;
	margin-bottom: 4px;
}
li {
	margin-bottom: 4px;
	font-size: 0.95rem;
	margin-left: 2em;
}

/* Petit ajustement mobile */
@media (max-width: 600px) {
	.section {
		flex-direction: row;
	}
	.section-label {
		display: block;
		background-color: #6abb43;
		color: white;
		font-size: 1.1rem;
		padding: 10px 12px;
		margin-bottom: 10px;
		border-radius: 4px 4px 0 0;
	}
	.column-header {
		font-size: 1.4rem;
		padding: 12px 24px;
	}
}
/************Tableau interprétation**************/
.comparatif-wrapper {
	max-width: 1200px;
	margin: 24px 0px;
	background-color: #f0f9ed;
	border-radius: 12px;
	overflow-x: auto;
}
.comparatif-interpretariat {
	width: 100%;
	border-collapse: collapse; /* important pour les lignes */
	background-color: #f0f9ed;
	border-radius: 12px;
	overflow: hidden;
}
/* Titre global */
.comparatif-interpretariat thead .titre-global th {
	background-color: #6abb43;
	color: white;
	text-align: center;
	font-size: 1.3rem;
	padding: 14px 18px;
}
/* En-têtes des colonnes */
.comparatif-interpretariat thead th {
	background-color: #6abb43;
	color: #ffffff;
	padding: 12px 16px;
	text-align: left;
	font-weight: 600;
	border-bottom: 2px solid rgba(0, 0, 0, 0.1);/ ligne sous les en-têtes */
}
/* Contenu */
.comparatif-interpretariat td {
	vertical-align: top;
	padding: 0px 25px 15px 25px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);/ lignes horizontales */
}
/* Ligne verticale pâle entre les deux colonnes */
.comparatif-interpretariat td + td {
	border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.comparatif-interpretariat h3 {
	font-size: 1rem;
	margin: 10px 0 4px 0;
}
.comparatif-interpretariat ul {
	margin: 0 0 8px 18px;
	padding: 0;
}
.comparatif-interpretariat li {
	margin-bottom: 4px;
	font-size: 0.95rem;
}



/* Version mobile : colonnes empilées */
@media (max-width: 700px) {
	/* On cache l’en-tête de tableau classique */
.comparatif-interpretariat thead {
	display: none;
}

/* Le tbody devient un conteneur flex vertical */
.comparatif-interpretariat tbody {
	display: flex;
	flex-direction: column;
}

/* Les tr ne servent plus à la mise en page */
.comparatif-interpretariat tbody tr {
	display: contents;
}

/* Toutes les cellules deviennent des blocs empilés */
.comparatif-interpretariat tbody td {
	display: block;
	border-left: none;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	margin-bottom: 10px;
}

/* On évite une ligne en trop au tout début */
.comparatif-interpretariat tbody tr:first-child td:first-child {
	border-top: none;
}

/* Ordre visuel des blocs:
   1: Présentiel – Avantages
   2: Présentiel – Inconvénients
   3: Virtuel – Avantages
   4: Virtuel – Inconvénients
   5: Enjeux
*/

/* Présentiel avantages */
.comparatif-interpretariat tbody tr:nth-child(1) td:nth-child(1) {
	order: 2;
}

/* Présentiel inconvénients */
.comparatif-interpretariat tbody tr:nth-child(2) td:nth-child(1) {
	order: 3;
}

/* Virtuel avantages */
.comparatif-interpretariat tbody tr:nth-child(1) td:nth-child(2) {
	order: 5;
}

/* Virtuel inconvénients */
.comparatif-interpretariat tbody tr:nth-child(2) td:nth-child(2) {
	order: 6;
}

/* Enjeux */
.comparatif-interpretariat tbody tr:nth-child(3) td {
	order: 7;
}

/* En-tête “Interprétation en mode présentiel” avant les deux blocs présentiel */
.comparatif-interpretariat tbody tr:nth-child(1) td:nth-child(1)::before {
	content: "Interprétation en mode présentiel";
	display: block;
	background-color: #6abb43;
	color: #ffffff;
	padding: 8px 12px;
	margin-bottom: 6px;
	border-radius: 8px;
	font-weight: 600;
	order: 1;
}

/* En-tête “Interprétation en mode virtuel (téléphone / caméra)” avant les deux blocs virtuel */
.comparatif-interpretariat tbody tr:nth-child(1) td:nth-child(2)::before {
	content: "Interprétation en mode virtuel (téléphone / caméra)";
	display: block;
	background-color: #6abb43;
	color: #ffffff;
	padding: 8px 12px;
	margin-bottom: 6px;
	border-radius: 8px;
	font-weight: 600;
	order: 4;
}

}
/***********En-tete sur mobile************/
/* --- Amélioration de l’en-tête sur mobile --- */
@media (max-width: 700px) {
	.banner {
		margin-top: 0; /* On enlève le décalage négatif */
		height: 45vh; /* On montre plus de l’image */
	}
	.banner img {
		object-position: center top; /* On recentre pour mieux voir le visuel */
	}
	.titre-overlay {
		width: 90%;
		padding: 1.2em;
	}
	.titre-overlay h1 {
		font-size: 1.8em; /* Le titre tient mieux sur petits écrans */
		line-height: 1.2;
	}
}
/* --- Ajustement de l’en-tête pour les tablettes (iPad, etc.) --- */
@media (min-width: 701px) and (max-width: 1024px) {
	.banner {
		height: 55vh; /* Un peu plus haute qu’en mobile pour mieux voir l’image */
	}
	.banner img {
		object-fit: cover;
		object-position: center top; /* On garde le cadrage agréable */
	}
	.titre-overlay {
		width: 80%; /* Plus large que sur mobile, mais pas plein écran */
		padding: 1.5em;
	}
	.titre-overlay h1 {
		font-size: 2.4em; /* Plus petit que le 3em desktop, mais plus grand que le mobile */
		line-height: 1.2;
	}
}