section[data-composant="banniere-reassurance"]{
	&
	{
		background: var(--couleurBanniereReassurance);
		width: min(calc(100% - 40px), 1000px);
		border-radius: var(--borderRadius);
		margin: 10px auto;
		padding: 10px 15px;
		box-shadow: var(--boxShadow);
		font-size: .9em;
	}
	
	ul{
		&{
			display: grid;
			grid-template-columns: repeat(4, minmax(0, 1fr));
			align-items: center;
			margin: 0;
			padding: 0;
		}
		
		li{
			&{
				display: grid;
				grid-template-columns: 40px minmax(0, 1fr);
				gap: 10px;
				align-items: center;
				padding: 0 10px;
				min-width: 0;
				list-style: none;
			}
			
			&:not(:last-child)
			{
				border-right: 1px solid var(--couleurClaire3);
			}
			
			.icone {
				display: grid;
				width: 40px;
				height: 40px;
				place-items: center;
				border-radius: 50%;
				background: var(--couleurFondIcone);
				color: var(--couleurIconeSecondaire);
			}
			
			.icone i, .icone svg
			{
				width: 1em;
				font-size: 1em;
			}
			
			dl, dt{
				min-width: 0;
				margin: 0;
			}

			dt, dd{
				overflow-wrap: anywhere;
			}

			dd{
				margin: 0;
				color: var(--couleurClaire3);
				font-size: 1em;
			}
			
		}
	}

	@media (max-width: 800px){
		&{
			width: min(calc(100% - 30px), 700px);
			padding: 10px;
		}

		ul{
			gap: 10px;
			grid-template-columns: repeat(2, minmax(0, 1fr));

			li{
				min-height: 60px;
				padding: 10px;
				border: 1px solid rgb(from var(--couleurClaire3) r g b / .2);
				border-radius: var(--borderRadiusS);
			}

			li:not(:last-child){
				border-right: 1px solid rgb(from var(--couleurClaire3) r g b / .2);
			}
		}
	}

	@media (max-width: 400px){
		ul{
			grid-template-columns: 1fr;
		}
	}
	
}

[data-composant="txt-image"]
{
	&{
		width: var(--maxWidth);
		margin: 100px auto;
		padding: 60px;
		border-radius: var(--borderRadiusS);
		background: var(--couleurFondSection);
	}

	.grid_1_1{
		display: grid;
		grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
		gap: 60px;
		align-items: center;
	}

	.txts{ padding: 20px; }
	.txt{ color: var(--couleurTextSecondaire); }
	.txt p{ margin: 0 0 20px; }
	.txt p:last-child{ margin-bottom: 0; }

	.media{
		position: relative;
		min-height: 480px;
		margin: 0;
		padding: 10px;
		border-radius: var(--borderRadiusS);
		background: var(--couleurSurface);
		box-shadow: 0 20px 50px rgb(from var(--couleurOmbre) r g b / .12);
	}

	.media img{
		display: block;
		width: 100%;
		height: 100%;
		min-height: 460px;
		border-radius: var(--borderRadiusXS);
		object-fit: cover;
	}

	&.inverse .grid_1_1{ grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
	&.inverse .txts{ grid-column: 2; grid-row: 1; }
	&.inverse .media{ grid-column: 1; grid-row: 1; }

	@media (max-width: 900px){
		&{ padding: 40px 30px; }
		.grid_1_1, &.inverse .grid_1_1{ grid-template-columns: 1fr; gap: 30px; }
		&.inverse .txts, &.inverse .media{ grid-column: 1; grid-row: auto; }
		.media, .media img{ min-height: 400px; }
	}

	@media (max-width: 600px){
		&{ margin: 60px auto; padding: 30px 15px; }
		.txts{ padding: 10px; }
		.media, .media img{ min-height: 280px; }
	}
}

[data-composant="liste-classement"]{
	&{ display: grid; grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); gap: 70px; width: var(--maxWidth); margin: 100px auto; padding: 70px; border-radius: var(--borderRadiusS); background: var(--couleurFondSection); }
	.intro{ align-self: center; }
	.intro > div:last-child{ color: var(--couleurTextSecondaire); }
	ol{ overflow: hidden; margin: 0; padding: 0; border: 1px solid var(--couleurFondMedia); border-radius: var(--borderRadiusS); background: var(--couleurSurface); counter-reset: classement; box-shadow: 0 20px 50px rgb(from var(--couleurOmbre) r g b / .08); }
	li{ display: grid; grid-template-columns: 55px 45px 1fr; gap: 20px; align-items: center; min-height: 130px; padding: 25px 30px; border-bottom: 1px solid var(--couleurFondMedia); list-style: none; counter-increment: classement; }
	li:last-child{ border-bottom: 0; }
	li:nth-child(even){ background: var(--couleurFondSection); }
	.rang:before{ content: counter(classement, decimal-leading-zero); color: var(--couleurBTN); font-family: var(--fontBold); font-size: 1.5em; }
	.icone{ display: grid; width: 45px; height: 45px; place-items: center; border-radius: 50%; background: var(--couleurFondIcone); color: var(--couleurIconeSecondaire); }
	h3{ margin: 0 0 5px; }
	li p{ margin: 0; color: var(--couleurTextSecondaire); }
	@media (hover: hover){ li{ transition: background .25s ease, padding-left .25s ease; } li:hover{ padding-left: 35px; background: var(--couleurClaire1); } }
	@media (max-width: 900px){ &{ grid-template-columns: 1fr; gap: 35px; padding: 50px 30px; } }
	@media (max-width: 600px){ &{ margin: 60px auto; padding: 35px 15px; } li{ grid-template-columns: 45px 1fr; gap: 10px 15px; padding: 25px 20px; } .icone{ grid-column: 1; grid-row: 2; } li > div{ grid-column: 2; grid-row: 1 / span 2; } }
}

[data-composant="quiz-rapide"]{
	&{ display: grid; grid-template-columns: .7fr 1.3fr; gap: 60px; width: var(--maxWidth); margin: 100px auto; padding: 60px; border-radius: var(--borderRadiusS); background: var(--couleur1); color: var(--couleurBTNTxt); }
	.intro{ align-self: center; }
	.intro .balise{ color: var(--couleurBTNTxt); background: rgb(from var(--couleurSurface) r g b / .12); }
	.intro h2{ color: var(--couleurBTNTxt); }
	.intro strong{ color: var(--couleurBTN); }
	.intro p{ color: var(--couleurFondMedia); }
	.quiz{ padding: 35px; border-radius: var(--borderRadiusS); background: var(--couleurSurface); color: var(--couleurText); }
	.progression{ height: 5px; margin-bottom: 30px; overflow: hidden; border-radius: 5px; background: var(--couleurFondMedia); }
	.progression span{ display: block; width: var(--quiz-progression, 33%); height: 100%; background: var(--couleurBTN); transition: width .3s ease; }
	fieldset{ margin: 0; padding: 0; border: 0; }
	legend{ display: flex; gap: 15px; align-items: flex-start; margin-bottom: 25px; color: var(--couleurTitre); font-family: var(--fontBold); font-size: 1.2em; }
	legend > span{ color: var(--couleurBTN); }
	.reponses{ display: grid; gap: 10px; }
	label{ position: relative; display: block; cursor: pointer; }
	label input{ position: absolute; opacity: 0; pointer-events: none; }
	label span{ display: block; padding: 15px 20px; border: 1px solid var(--couleurFondMedia); border-radius: var(--borderRadiusXS); background: var(--couleurFondSection); transition: border-color .2s ease, background .2s ease, transform .2s ease; }
	label:has(input:checked) span{ border-color: var(--couleurBTN); background: rgb(from var(--couleurBTN) r g b / .08); }
	.actions{ display: flex; justify-content: flex-end; margin-top: 25px; }
	.actions[hidden], form[hidden]{ display: none; }
	.actions button{ display: inline-flex; min-height: 50px; padding: 10px 20px; gap: 10px; align-items: center; border: 0; border-radius: var(--borderRadiusXS); background: var(--couleurBTN); color: var(--couleurBTNTxt); font: inherit; font-family: var(--fontBold); cursor: pointer; }
	.actions button:disabled{ opacity: .45; cursor: not-allowed; }
	.resultat{ display: grid; grid-template-columns: 70px 1fr 45px; gap: 20px; align-items: start; }
	.resultat[hidden]{ display: none; }
	.score{ display: grid; width: 70px; height: 70px; place-items: center; border-radius: 50%; background: var(--couleurBTN); color: var(--couleurBTNTxt); font-family: var(--fontBold); }
	.resultat h3, .resultat p{ margin: 0; }
	.resultat p{ color: var(--couleurTextSecondaire); }
	.resultat .cta{ display: inline-flex; margin-top: 20px; padding: 12px 18px; border-radius: var(--borderRadiusXS); background: var(--couleurBTN); color: var(--couleurBTNTxt); font-family: var(--fontBold); text-decoration: none; }
	.recommencer{ display: grid; width: 45px; height: 45px; place-items: center; border: 0; border-radius: 50%; background: var(--couleurFondIcone); color: var(--couleurIconeSecondaire); cursor: pointer; }
	@media (hover: hover){ label:hover span{ border-color: var(--couleurBTN); transform: translateX(5px); } .actions button:hover, .resultat .cta:hover{ transform: translateY(-2px); } .recommencer:hover i{ transform: rotate(-25deg); } }
	.actions button, .resultat .cta, .recommencer i{ transition: transform .2s ease; }
	@media (prefers-reduced-motion: reduce){ label span, .actions button, .resultat .cta, .recommencer i{ transition: none; } }
	@media (max-width: 900px){ &{ grid-template-columns: 1fr; gap: 30px; padding: 45px 30px; } }
	@media (max-width: 600px){ &{ margin: 60px auto; padding: 35px 15px; } .quiz{ padding: 25px 20px; } .resultat{ grid-template-columns: 60px 1fr; } .score{ width: 60px; height: 60px; } .recommencer{ grid-column: 2; } }
}

[data-composant="diagnostic-choix"]{
	&{ width: var(--maxWidth); margin: 100px auto; padding: 70px; border-radius: var(--borderRadiusS); background: var(--couleurFondSection); }
	.intro{ max-width: 900px; margin: 0 auto 45px; text-align: center; }
	.intro .balise{ margin-inline: auto; }
	.outil{ display: grid; grid-template-columns: 1.2fr .8fr; gap: 30px; align-items: stretch; }
	fieldset{ margin: 0; padding: 0 30px 30px; border: 0; border-radius: var(--borderRadiusS); background: var(--couleurSurface); }
	legend{ width: calc(100% + 60px); margin: 0 -30px 25px; padding: 20px 30px; border-radius: var(--borderRadiusS) var(--borderRadiusS) 0 0; background: var(--couleur1); color: var(--couleurBTNTxt); }
	legend > span{ display: inline-block; vertical-align: middle; }
	legend .legend-icone{ display: inline-grid; width: 50px; height: 50px; margin-right: 15px; place-items: center; border-radius: 50%; background: rgb(from var(--couleurSurface) r g b / .12); color: var(--couleurIconeSecondaire); }
	legend strong, legend small{ display: block; }
	legend strong{ color: var(--couleurBTNTxt); font-family: var(--fontBold); }
	legend small{ margin-top: 2px; color: var(--couleurFondMedia); }
	.choix{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
	label{ position: relative; display: grid; grid-template-columns: 45px 1fr; gap: 12px; align-items: center; min-height: 95px; padding: 15px 45px 15px 15px; border: 2px dashed var(--couleurFondMedia); border-radius: var(--borderRadiusXS); cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
	label:after{ content: "+"; display: grid; position: absolute; top: 50%; right: 15px; width: 25px; height: 25px; place-items: center; border: 2px dashed var(--couleurTextSecondaire); border-radius: 50%; color: var(--couleurTextSecondaire); font-family: var(--fontBold); transform: translateY(-50%); transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
	label input{ position: absolute; opacity: 0; pointer-events: none; }
	label .icone{ display: grid; width: 45px; height: 45px; place-items: center; border-radius: 50%; background: var(--couleurFondIcone); color: var(--couleurIconeSecondaire); }
	label strong, label small{ display: block; }
	label small{ color: var(--couleurTextSecondaire); }
	label:has(input:checked){ border-style: solid; border-color: var(--couleurBTN); background: rgb(from var(--couleurBTN) r g b / .06); }
	label:has(input:checked):after{ content: ""; border-style: solid; border-color: var(--couleurBTN); background: var(--couleurBTN); box-shadow: inset 0 0 0 6px var(--couleurSurface); transform: translateY(-50%) scale(1.05); }
	.orientation{ display: grid; align-content: center; min-height: 100%; padding: 40px; border-radius: var(--borderRadiusS); background: var(--couleur1); color: var(--couleurBTNTxt); }
	.orientation-icone{ display: grid; width: 60px; height: 60px; margin-bottom: 25px; place-items: center; border-radius: 50%; background: var(--couleurBTN); color: var(--couleurBTNTxt); font-size: 1.2em; }
	.orientation small{ color: var(--couleurFondMedia); text-transform: uppercase; }
	.orientation h3{ margin: 5px 0 10px; color: var(--couleurBTNTxt); }
	.orientation p{ color: var(--couleurFondMedia); }
	.orientation a{ display: inline-flex; width: fit-content; margin-top: 10px; padding: 12px 18px; gap: 10px; align-items: center; border-radius: var(--borderRadiusXS); background: var(--couleurBTN); color: var(--couleurBTNTxt); font-family: var(--fontBold); text-decoration: none; }
	.orientation a[hidden]{ display: none; }
	@media (hover: hover){ label:hover{ border-color: var(--couleurBTN); box-shadow: 0 8px 20px rgb(from var(--couleurOmbre) r g b / .08); transform: translateY(-2px); } label:hover:after{ border-color: var(--couleurBTN); color: var(--couleurBTN); transform: translateY(-50%) scale(1.1); } label:hover .icone{ background: var(--couleurBTN); color: var(--couleurBTNTxt); } .orientation a:hover{ transform: translateX(4px); } }
	label .icone, .orientation a{ transition: background .2s ease, color .2s ease, transform .2s ease; }
	@media (prefers-reduced-motion: reduce){ label, label .icone, .orientation a{ transition: none; } }
	@media (max-width: 900px){ &{ padding: 50px 30px; } .outil{ grid-template-columns: 1fr; } }
	@media (max-width: 600px){ &{ margin: 60px auto; padding: 35px 15px; } fieldset{ padding: 0 15px 20px; } legend{ width: calc(100% + 30px); margin-inline: -15px; padding: 20px 15px; } .choix{ grid-template-columns: 1fr; } .orientation{ padding: 30px 25px; } }
}

[data-composant="points-controle"]{
	&{ --couleurTitre: var(--couleurBTNTxt); display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; width: var(--maxWidth); margin: 100px auto; padding: 70px; overflow: hidden; border-radius: var(--borderRadiusS); background: var(--couleur1); color: var(--couleurBTNTxt); }
	.intro{ align-self: center; }
	.intro .balise{ color: var(--couleurBTNTxt); background: rgb(from var(--couleurSurface) r g b / .12); }
	.intro p{ color: var(--couleurFondMedia); }
	ol{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin: 0; padding: 0; counter-reset: controle; }
	li{ display: grid; position: relative; grid-template-columns: 55px 1fr; gap: 15px; min-height: 150px; padding: 25px; border: 1px solid rgb(from var(--couleurSurface) r g b / .18); border-radius: var(--borderRadiusXS); background: rgb(from var(--couleurSurface) r g b / .08); list-style: none; counter-increment: controle; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
	.icone{ display: grid; width: 45px; height: 45px; place-items: center; border-radius: 50%; background: var(--couleurBTN); color: var(--couleurBTNTxt); }
	h3{ margin: 0 0 5px; color: var(--couleurBTNTxt); }
	li p{ margin: 0; color: var(--couleurFondMedia); }
	.validation{ display: grid; position: absolute; top: 58px; left: 58px; width: 25px; height: 25px; place-items: center; border: 3px solid var(--couleur1); border-radius: 50%; background: var(--couleurValidation); color: var(--couleurBTNTxt); font-size: 12px; }
	@supports (animation-timeline: view()){
		.validation{ opacity: 0; transform: scale(.5) rotate(-15deg); animation: controle-valide linear both; animation-timeline: view(); animation-range: entry 15% cover 35%; }
		li:nth-child(2) .validation{ animation-range: entry 20% cover 40%; }
		li:nth-child(3) .validation{ animation-range: entry 25% cover 45%; }
		li:nth-child(4) .validation{ animation-range: entry 30% cover 50%; }
	}
	@media (hover: hover){ li:hover{ border-color: rgb(from var(--couleurSurface) r g b / .4); background: rgb(from var(--couleurSurface) r g b / .14); transform: translateY(-3px); } li:hover .icone{ transform: scale(1.08); } }
	.icone{ transition: transform .2s ease; }
	@media (prefers-reduced-motion: reduce){ li, .icone{ transition: none; } }
	@media (max-width: 900px){ &{ grid-template-columns: 1fr; gap: 35px; padding: 50px 30px; } }
	@media (max-width: 600px){ &{ margin: 60px auto; padding: 35px 20px; } ol{ grid-template-columns: 1fr; } li{ min-height: 0; } }
}
@keyframes controle-valide{ to{ opacity: 1; transform: scale(1) rotate(0); } }

[data-composant="explication-numeroter"]{
	&{ --progression: 0; width: var(--maxWidth); margin: 100px auto; }
	.intro{ max-width: 850px; margin: 0 auto 60px; text-align: center; }
	.intro .balise{ margin-inline: auto; }
	ol{ position: relative; display: grid; gap: 20px; max-width: 1100px; margin: auto; padding: 0; counter-reset: etape; }
	ol:before{ content: ""; position: absolute; top: 0; bottom: -70px; left: 50%; width: 5px; border-radius: 10px; background: var(--couleurFondMedia); transform: translateX(-50%); }
	ol:after{ content: ""; position: absolute; z-index: 1; top: 0; bottom: -70px; left: 50%; width: 5px; border-radius: 10px; background: var(--couleurBTN); transform: translateX(-50%) scaleY(var(--progression)); transform-origin: top; will-change: transform; }
	li{ position: relative; display: grid; grid-template-columns: 1fr 80px 1fr; align-items: center; min-height: 130px; list-style: none; }
	li > div{ grid-column: 1; justify-self: end; width: min(100%, 430px); padding: 25px; text-align: right; border: 1px solid rgb(from var(--couleurOmbre) r g b / .08); border-radius: var(--borderRadiusS); background: var(--couleurSurface); box-shadow: 0 15px 35px rgb(from var(--couleurOmbre) r g b / .08); transition: transform .4s ease, box-shadow .4s ease; }
	li:nth-child(even) > div{ grid-column: 3; justify-self: start; text-align: left; }
	.numero{ position: relative; z-index: 2; grid-column: 2; grid-row: 1; justify-self: center; display: grid; width: 50px; height: 50px; place-items: center; border: 5px solid var(--couleurClaire1); border-radius: 50%; background: var(--couleur1); color: var(--couleurBTNTxt); transition: background .3s ease, transform .3s ease; }
	.numero:before{ counter-increment: etape; content: "0" counter(etape); font-family: var(--fontBold); font-size: .8em; }
	li p{ margin-bottom: 0; color: var(--couleurTextSecondaire); }
	.action{ position: relative; z-index: 2; display: flex; justify-content: center; margin-top: 40px; }

	@media (max-width: 700px){
		&{ margin: 60px auto; }
		ol:before, ol:after{ left: 25px; }
		li{ grid-template-columns: 50px 1fr; gap: 15px; }
		.numero{ grid-column: 1; }
		li > div, li:nth-child(even) > div{ grid-column: 2; justify-self: stretch; width: 100%; text-align: left; }
	}

	li.est-actif .numero{ background: var(--couleurBTN); transform: scale(1.05); }
	li.est-actif > div{ transform: translateY(-5px); box-shadow: 0 20px 45px rgb(from var(--couleurOmbre) r g b / .15); }

	@media (hover: hover)
	{
		li:hover > div{ transform: translateY(-8px) scale(1.01); box-shadow: 0 25px 50px rgb(from var(--couleurOmbre) r g b / .18); }
		li:hover .numero{ background: var(--couleurBTN); transform: scale(1.12); }
	}
}

[data-composant="sequence-actions"]{
	&{ width: var(--maxWidth); margin: 100px auto; }
	.intro{ max-width: 850px; margin: 0 auto 50px; text-align: center; }
	.intro .balise{ margin-inline: auto; }
	ol{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin: 0; padding: 0; counter-reset: action; }
	li{ position: relative; min-width: 0; padding: 30px; border: 1px solid var(--couleurFondMedia); border-radius: var(--borderRadiusS); background: var(--couleurSurface); box-shadow: 0 15px 35px rgb(from var(--couleurOmbre) r g b / .08); list-style: none; counter-increment: action; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
	li:not(:last-child):after{ content: "\2192"; display: grid; position: absolute; z-index: 2; top: 42px; right: -35px; width: 45px; height: 45px; place-items: center; border: 5px solid var(--couleurSurface); border-radius: 50%; background: var(--couleurBTN); color: var(--couleurBTNTxt); font-size: 22px; }
	.numero:before{ content: "0" counter(action); display: block; position: absolute; top: 25px; right: 25px; color: rgb(from var(--couleur1) r g b / .18); font-family: var(--fontTitre); font-size: 55px; font-weight: 800; line-height: 1; }
	.icone{ display: grid; width: 65px; height: 65px; margin-bottom: 20px; place-items: center; border-radius: 50%; background: var(--couleur1); color: var(--couleurBTNTxt); font-size: 25px; }
	h3{ margin: 0 0 10px; }
	li p{ margin: 0; color: var(--couleurTextSecondaire); }
	.action{ display: flex; justify-content: center; margin-top: 35px; }
	@media (hover: hover){ li:hover{ border-color: var(--couleurBTN); box-shadow: 0 20px 40px rgb(from var(--couleurOmbre) r g b / .14); transform: translateY(-5px); } li:hover .icone{ background: var(--couleurBTN); transform: scale(1.06); } }
	.icone{ transition: background .2s ease, transform .2s ease; }
	@media (prefers-reduced-motion: reduce){ li, .icone{ transition: none; } }
	@media (max-width: 750px){
		&{ margin: 60px auto; }
		ol{ grid-template-columns: 1fr; }
		li{
			display: grid;
			grid-template-columns: 65px minmax(0, 1fr);
			gap: 0 20px;
			padding: 25px;
		}
		li:not(:last-child):after{
			content: "\2193";
			top: auto;
			right: auto;
			bottom: -35px;
			left: 35px;
		}
		.numero{ position: absolute; }
		.icone{
			grid-column: 1;
			justify-self: start;
			margin-bottom: 0;
		}
		h3{
			grid-column: 2;
			align-self: center;
			margin-bottom: 0;
		}
		li > p{
			grid-column: 1 / -1;
			margin-top: 20px;
		}
	}

	@media (max-width: 400px){
		li{
			grid-template-columns: 55px minmax(0, 1fr);
			gap: 0 15px;
			padding: 20px;
		}
		.icone{ width: 55px; height: 55px; }
		li:not(:last-child):after{ left: 25px; }
	}
}

[data-composant="tableau-expertise"]{
	&{ display: grid; grid-template-columns: .8fr 1.2fr; gap: 45px; width: var(--maxWidth); margin: 100px auto; align-items: center; }
	.presentation{ align-self: center; }
	.intro{ align-self: center; }
	.preuve{ display: grid; grid-template-columns: 60px auto 1fr; gap: 15px; align-items: center; margin-top: 30px; padding: 20px; border-radius: var(--borderRadiusXS); background: var(--couleur1); color: var(--couleurBTNTxt); }
	.preuve .medaille{ display: grid; width: 55px; height: 55px; place-items: center; border-radius: 50%; background: var(--couleurBTN); }
	.preuve strong{ font-family: var(--fontTitre); font-size: 45px; line-height: 1; }
	.action-secondaire{ margin-top: 20px; }
	.action-secondaire [data-composant="bouton"]{ border: 1px solid var(--couleur1); background: transparent; color: var(--couleur1); }
	.tableau{ overflow: hidden; border: 1px solid var(--couleurFondMedia); border-radius: var(--borderRadiusS); background: var(--couleurSurface); }
	.entetes{ display: grid; grid-template-columns: .7fr 1.1fr 1.2fr; gap: 20px; padding: 15px 25px; background: var(--couleur1); color: var(--couleurBTNTxt); font-family: var(--fontBold); font-size: 15px; }
	article{ display: grid; grid-template-columns: .7fr 1.1fr 1.2fr; gap: 20px; align-items: center; min-height: 140px; padding: 20px 25px; border-bottom: 1px solid var(--couleurFondMedia); transition: background .2s ease, padding-left .2s ease; }
	.materiau{ display: grid; grid-template-columns: 25px 45px 1fr; gap: 10px; align-items: center; }
	.numero{ color: var(--couleurBTN); font-family: var(--fontTitre); font-size: 20px; font-weight: 800; }
	article:last-child{ border-bottom: 0; }
	article:nth-child(even){ background: var(--couleurFondSection); }
	.icone{ display: grid; width: 45px; height: 45px; place-items: center; border-radius: 50%; background: var(--couleurFondIcone); color: var(--couleurIconeSecondaire); }
	h3, article p{ margin: 0; }
	article ul{ display: grid; gap: 8px; margin: 0; padding: 0; color: var(--couleurTextSecondaire); }
	article li{ position: relative; padding-left: 18px; list-style: none; }
	article li:before{ content: ""; position: absolute; top: .7em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--couleurBTN); }
	.methode{ padding: 15px; border: 1px solid rgb(from var(--couleurValidation) r g b / .25); border-radius: var(--borderRadiusXS); background: rgb(from var(--couleurValidation) r g b / .1); }
	.methode .badge{ display: inline-flex; margin-bottom: 10px; padding: 5px 10px; gap: 6px; align-items: center; border-radius: 20px; background: var(--couleurValidation); color: var(--couleurBTNTxt); font-size: 15px; font-weight: 700; }
	.methode p{ color: var(--couleurText); }
	@media (hover: hover){ article:hover{ background: rgb(from var(--couleurFondIcone) r g b / .65); padding-left: 30px; } article:hover .icone{ background: var(--couleurBTN); color: var(--couleurBTNTxt); transform: scale(1.06); } }
	.icone{ transition: background .2s ease, color .2s ease, transform .2s ease; }
	@media (prefers-reduced-motion: reduce){ article, .icone{ transition: none; } }
	@media (max-width: 950px){ &{ grid-template-columns: 1fr; } .intro{ max-width: 850px; } }
	@media (max-width: 700px){ &{ margin: 60px auto; } .entetes{ display: none; } article{ grid-template-columns: 1fr; gap: 15px; } .materiau{ grid-template-columns: 25px 45px 1fr; } article ul:before{ content: "Points de vigilance"; color: var(--couleur1); font-family: var(--fontBold); } .preuve{ grid-template-columns: 50px auto 1fr; } }
}

[data-composant="repere-temporel"]{
	&{ width: var(--maxWidth); margin: 100px auto; padding: 60px; border-radius: var(--borderRadiusS); background: var(--couleurFondSection); }
	.entete{ display: grid; grid-template-columns: 1fr 280px; gap: 50px; align-items: center; margin-bottom: 50px; }
	.calendrier{ overflow: hidden; border-radius: var(--borderRadiusXS); background: var(--couleurSurface); box-shadow: 0 15px 35px rgb(from var(--couleurOmbre) r g b / .1); text-align: center; transition: box-shadow .2s ease, transform .2s ease; }
	.calendrier span{ display: block; padding: 12px; background: var(--couleurBTN); color: var(--couleurBTNTxt); font-weight: 700; }
	.calendrier strong{ display: block; padding: 25px 15px 5px; color: var(--couleur1); font-family: var(--fontTitre); font-size: 25px; }
	.calendrier small{ display: block; padding: 0 20px 25px; color: var(--couleurTextSecondaire); }
	ol{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 0; padding: 0; }
	li{ display: grid; grid-template-columns: 55px 1fr; gap: 20px; padding: 25px; border-radius: var(--borderRadiusXS); background: var(--couleurSurface); list-style: none; transition: box-shadow .2s ease, transform .2s ease; }
	.icone{ display: grid; width: 55px; height: 55px; place-items: center; border-radius: 50%; background: var(--couleur1); color: var(--couleurBTNTxt); }
	h3{ margin: 0 0 8px; }
	li p{ margin: 0; color: var(--couleurTextSecondaire); }
	.action{ display: flex; justify-content: center; margin-top: 35px; }
	@media (hover: hover){ .calendrier:hover{ box-shadow: 0 20px 45px rgb(from var(--couleurOmbre) r g b / .16); transform: translateY(-4px); } li:hover{ box-shadow: 0 12px 30px rgb(from var(--couleurOmbre) r g b / .1); transform: translateY(-3px); } li:hover .icone{ background: var(--couleurBTN); transform: scale(1.06); } }
	.icone{ transition: background .2s ease, transform .2s ease; }
	@media (prefers-reduced-motion: reduce){ .calendrier, li, .icone{ transition: none; } }
	@media (max-width: 800px){ &{ padding: 40px 30px; } .entete{ grid-template-columns: 1fr; gap: 30px; } .calendrier{ max-width: 350px; } }
	@media (max-width: 600px){ &{ margin: 60px auto; padding: 30px 20px; } ol{ grid-template-columns: 1fr; } }
}

[data-composant="realisations-intro"]{
	&{ width: var(--maxWidth); margin: 100px auto; overflow: hidden; }
	.intro{ max-width: 850px; }
	.realisations{ display: grid; grid-auto-flow: column; grid-auto-columns: calc(45% - 10px); gap: 20px; padding: 20px 5px 35px; overflow-x: auto; scroll-snap-type: x mandatory; }
	article{ min-width: 0; overflow: hidden; border: 1px solid rgb(from var(--couleurOmbre) r g b / .08); border-radius: var(--borderRadiusS); background: var(--couleurSurface); box-shadow: 0 15px 40px rgb(from var(--couleurOmbre) r g b / .08); scroll-snap-align: start; transition: transform .3s ease, box-shadow .3s ease; }
	@media (hover: hover){ article:hover{ transform: translateY(-5px) scale(1.01); box-shadow: 0 25px 50px rgb(from var(--couleurOmbre) r g b / .15); } }
	.comparaison{ margin-bottom: 0; }
	[data-composant="avant-apres"]{ min-height: 0; aspect-ratio: 1.8; border: 0; border-radius: 0; box-shadow: none; }
	article > h3, article > div:last-child{ margin-inline: 25px; }
	article > h3
	{
		margin-top: 20px;
		margin-bottom: 10px;
		overflow: hidden;
		font-size: .8em;
		line-height: 1.2;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	article > div:last-child{ min-height: 2.8em; margin-bottom: 25px; color: var(--couleurTextSecondaire); font-size: .8em; line-height: 1.4; }
	article > div:last-child p
	{
		display: -webkit-box;
		margin: 0;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	@media (max-width: 800px){ &{ margin: 60px auto; } .realisations{ grid-auto-columns: 85%; } }
}

[data-composant="avant-apres"]{
	&{
		position: relative;
		width: 100%;
		aspect-ratio: 1.4;
		min-height: 420px;
		border: 5px solid var(--couleurSurface);
		border-radius: var(--borderRadiusS);
		overflow: hidden;
		background: var(--couleurFondMedia);
		box-shadow: 0 20px 45px rgb(from var(--couleurOmbre) r g b / .16);
	}

	.image{
		position: absolute;
		inset: 0;
	}

	.image-apres{
		clip-path: inset(0 0 0 var(--position));
	}

	img{
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.label-image{
		position: absolute;
		bottom: 20px;
		padding: 10px 20px;
		border-radius: var(--borderRadiusXS);
		background: var(--couleurClaire2);
		font-family: var(--fontBold);
		font-size: .8em;
		letter-spacing: .1em;
		text-transform: uppercase;
	}

	.image-avant .label-image{
		left: 20px;
	}

	.image-apres .label-image{
		right: 20px;
	}

	.separateur{
		position: absolute;
		z-index: 3;
		top: 0;
		bottom: 0;
		left: var(--position);
		width: 3px;
		background: var(--couleurSurface);
		transform: translateX(-50%);
		pointer-events: none;
	}

	.separateur:after{
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 60px;
		height: 60px;
		border: 5px solid var(--couleurSurface);
		border-radius: 50%;
		background: var(--couleurBTN);
		transform: translate(-50%, -50%);
		box-shadow: 0 5px 20px rgb(from var(--couleurOmbre) r g b / .2);
	}

	.separateur i,
	.separateur svg{
		position: absolute;
		z-index: 1;
		top: 50%;
		left: 50%;
		width: 20px;
		height: 20px;
		color: var(--couleurBTNTxt);
		transform: translate(-50%, -50%);
	}

	.curseur-comparaison{
		position: absolute;
		z-index: 4;
		inset: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		opacity: 0;
		cursor: ew-resize;
	}

	@media (hover: hover)
	{
		&:hover .separateur i,
		&:hover .separateur svg{ animation: incitation-avant-apres .5s ease-in-out 2; }
	}

	&:has(.curseur-comparaison:focus-visible){
		outline: 5px solid rgb(from var(--couleurBTN) r g b / .45);
		outline-offset: 5px;
	}

	@media (max-width: 680px){
		&{
			min-height: 300px;
			aspect-ratio: 1 / 1.1;
		}

		.label-image{
			bottom: 10px;
			padding: 10px;
		}

		.image-avant .label-image{
			left: 10px;
		}

		.image-apres .label-image{
			right: 10px;
		}
	}
}

@keyframes incitation-avant-apres
{
	0%, 100%{ transform: translate(-50%, -50%) translateX(0); }
	25%{ transform: translate(-50%, -50%) translateX(-4px); }
	75%{ transform: translate(-50%, -50%) translateX(4px); }
}

[data-composant="banniere-cta"]{
	&{
		--couleurTitre: var(--couleurBTNTxt);
		position: relative;
		isolation: isolate;
		overflow: hidden;
		border-radius: var(--borderRadiusS);
		background: var(--couleur1);
		color: var(--couleurBTNTxt);
	}

	.background{
		position: absolute;
		z-index: -2;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	&:has(.background):before{
		content: "";
		position: absolute;
		z-index: -1;
		inset: 0;
		background: rgb(from var(--couleur1) r g b / .82);
	}

	.contenu-cta{
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 30px;
		align-items: center;
	}

	.textes-cta{
		min-width: 0;
	}
	
	.textes-cta h3
	{
		color: var(--couleurBTNTxt);
		font-size: 1em;
	}

	.balise-cta{
		width: fit-content;
		margin-bottom: 10px;
		background: var(--couleurBTN);
		font-family: var(--fontBold);
		font-size: .8em;
		letter-spacing: .2em;
		text-transform: uppercase;
		padding: 5px;
		border-radius: var(--borderRadiusXS);
	}

	p{
		margin: 10px 0 0;
		color: rgb(from var(--couleurSurface) r g b / .78);
	}

	.action-cta{
		min-height: 60px;
		padding: 0 25px;
		border-radius: var(--borderRadiusXS);
		background: var(--couleurBTN);
		color: var(--couleurBTNTxt);
		display: inline-flex;
		gap: 20px;
		align-items: center;
		justify-content: center;
		font-family: var(--fontBold);
		text-decoration: none;
		white-space: nowrap;
		transition: transform .2s ease, filter .2s ease;
	}

	.action-cta.icone-seule{
		width: 60px;
		padding: 0;
	}

	.action-cta:hover{
		transform: translateX(3px);
		filter: brightness(1.05);
	}

	.action-cta:focus-visible{
		outline: 5px solid var(--couleurSurface);
		outline-offset: 5px;
	}

	&[data-theme="compact"]{
		min-height: 0;
		padding: 25px 30px;
		align-self: start;
	}

	&[data-theme="compact"] p{
		font-size: .9em;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
	}

	&[data-theme="image"]{
		width: var(--maxWidth);
		min-height: 180px;
		margin: 30px auto;
		padding: 35px 50px;
		box-shadow: 0 20px 45px rgb(from var(--couleurOmbre) r g b / .13);
	}

	&[data-theme="image"] p{
		max-width: 720px;
		font-size: 1em;
		line-height: 1.4;
	}

	&[data-theme="image"] .balise-cta{
		padding: 10px 15px;
		border-radius: var(--borderRadiusXS);
		background: rgb(from var(--couleurSurface) r g b / .14);
		color: var(--couleurBTNTxt);
	}

	@media (max-width: 680px){
		.contenu-cta{
			grid-template-columns: 1fr;
			gap: 20px;
		}

		.action-cta:not(.icone-seule){
			width: 100%;
			white-space: normal;
			text-align: center;
		}

		&[data-theme="compact"]{
			padding: 20px;
		}

		&[data-theme="compact"] .contenu-cta{
			grid-template-columns: minmax(0, 1fr) 50px;
			gap: 15px;
		}

		&[data-theme="compact"] .action-cta.icone-seule{
			width: 50px;
			min-height: 50px;
		}

		&[data-theme="image"]{
			width: 95%;
			padding: 25px 20px;
		}
	}
}

[data-composant="liste-avis"]{
	&{ width: 100%; padding: 100px max(2.5%, calc((100% - 1400px) / 2)); overflow: hidden; background: linear-gradient(var(--couleurClaire1), var(--couleurFondSection)); }
	.intro{ max-width: 800px; margin: auto; text-align: center; }
	.intro .balise{ margin-inline: auto; }
	.note-globale{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; color: var(--couleur1); }
	.note-globale strong{ padding: 10px 15px; border-radius: 30px; background: var(--couleurSurface); box-shadow: 0 10px 25px rgb(from var(--couleurOmbre) r g b / .08); }
	.note-globale > span, .etoiles{ color: var(--couleurBTN); letter-spacing: 0; }
	.note-globale small{ color: var(--couleurTextSecondaire); }
	.avis{ display: grid; grid-auto-flow: column; grid-auto-columns: minmax(340px, 34%); gap: 15px; margin-top: 30px; padding: 20px 5px 40px; overflow-x: auto; scroll-snap-type: x mandatory; }
	article{ position: relative; display: flex; flex-direction: column; min-height: 330px; padding: 30px 30px 60px; overflow: hidden; border: 1px solid rgb(from var(--couleurOmbre) r g b / .08); border-radius: var(--borderRadiusS); background: var(--couleurSurface); box-shadow: 0 15px 40px rgb(from var(--couleurOmbre) r g b / .08); scroll-snap-align: start; transition: transform .3s ease, box-shadow .3s ease; }
	article:nth-child(even){ background: var(--couleurClaire2); }
	article header{ display: flex; width: auto; margin: 0 0 25px; gap: 15px; justify-content: flex-start; }
	.avatar{ display: grid; flex: 0 0 60px; width: 60px; height: 60px; place-items: center; border: 5px solid var(--couleurSurface); border-radius: 50%; background: var(--couleur1); color: var(--couleurBTNTxt); font-family: var(--fontBold); box-shadow: 0 10px 25px rgb(from var(--couleurOmbre) r g b / .15); }
	.identite, cite, .etoiles, .identite small{ display: block; }
	cite{ color: var(--couleurTitre); font-family: var(--fontBold); font-style: normal; }
	.identite small{ margin-top: 5px; color: var(--couleurTextSecondaire); }
	blockquote{ position: relative; margin: 0; padding-left: 35px; color: var(--couleurTextSecondaire); line-height: 1.6; }
	blockquote:before{ content: "“"; position: absolute; top: 0; left: 0; color: var(--couleurBTN); font-family: "Archivo", var(--fontBold); font-size: 2em; font-weight: 900; line-height: .8; }
	article > a{ position: absolute; right: 30px; bottom: 25px; color: var(--couleur1); font-size: .8em; text-decoration: none; }
	@media (hover: hover){ article:hover{ transform: translateY(-5px) scale(1.01); box-shadow: 0 25px 55px rgb(from var(--couleurOmbre) r g b / .15); } }
	@media (max-width: 680px){ &{ padding-top: 60px; padding-bottom: 60px; } .avis{ grid-auto-columns: 88%; } }
}

[data-composant="faq"]{
	&{ width: var(--maxWidth); margin: 100px auto; }
	& > .grid_1_1{ display: grid; grid-template-columns: minmax(300px, .7fr) minmax(0, 1.3fr); gap: 80px; align-items: start; }
	.intro{ position: sticky; top: 30px; }
	.intro .contenu{ max-width: 500px; color: var(--couleurTextSecondaire); }
	.intro ul{ margin-left: 0; padding: 0; }
	.intro li{ list-style: none; }
	.question-contact{ margin-top: 30px; padding: 20px; background: var(--couleurFondSection); }
	.question-contact h3{ margin-bottom: 10px; }
	.question-contact [data-composant="bouton"]{ margin: 0; }
	.accordeon{ min-width: 0; }
	article{ margin-bottom: 10px; overflow: hidden; border: 1px solid var(--couleurFondMedia); border-radius: var(--borderRadiusXS); background: var(--couleurSurface); transition: border-color .3s ease, box-shadow .3s ease; }
	article:hover, article:has(input:checked){ border-color: rgb(from var(--couleur1) r g b / .25); box-shadow: 0 10px 30px rgb(from var(--couleurOmbre) r g b / .08); }
	.question{ font-family: var(--fontBold); font-size: 1em; }
	label{ display: grid; grid-template-columns: 1fr 50px; gap: 15px; align-items: center; min-height: 60px; padding: 15px 10px 15px 20px; cursor: pointer; }
	.question .titre, .infos{ padding: 0; }
	input{ display: none; }
	.infos{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
	.infos-contenu{ min-height: 0; padding: 0 20px; overflow: hidden; color: var(--couleurTextSecondaire); }
	.infos-contenu p{ transition: margin .4s ease; }
	article:not(:has(input:checked)) .infos-contenu p{ margin-block: 0; }
	.iconeAccordeon{ display: flex; align-items: center; justify-content: center; transform-origin: center; transition: transform .4s ease; }
	.iconeAccordeon > span{ color: var(--couleurBTN); font-size: 1.5em; line-height: 1; }
	article:has(input:checked) .infos{ grid-template-rows: 1fr; }
	article:has(input:checked) .iconeAccordeon{ transform: rotate(45deg); }

	@media (max-width: 850px){
		&{ margin: 60px auto; }
		& > .grid_1_1{ grid-template-columns: 1fr; gap: 35px; }
		.intro{ position: static; }
	}
}

[data-composant="demander-rdv"]{
	&{ --couleurTitre: var(--couleurBTNTxt); display: grid; position: relative; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: start; width: var(--maxWidth); margin: 100px auto; padding: 70px; overflow: hidden; border-radius: var(--borderRadiusS); background: linear-gradient(135deg, var(--couleurOmbre), var(--couleur1)); color: var(--couleurBTNTxt); }
	&:after{ content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgb(from var(--couleurOmbre) r g b / .9), rgb(from var(--couleur1) r g b / .7)); }
	.image-fond{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
	.intro, .formulaire{ position: relative; z-index: 1; }
	.intro{ position: sticky; top: 120px; }
	.intro .balise{ color: var(--couleurBTNTxt); background: rgb(from var(--couleurSurface) r g b / .15); }
	.formulaire{ padding: 35px; color: var(--couleurText); }
	.formulaire form:is([data-theme="liquid-glass"], [data-theme="blanc"]){ padding: 30px; box-shadow: 0 20px 60px rgb(from var(--couleurOmbre) r g b / .2); }
	@media (max-width: 850px){ &{ grid-template-columns: 1fr; margin: 60px auto; padding: 40px 20px; } .intro{ position: static; } .formulaire{ padding: 20px; } }
}