/****************************************************
 * 1. LAYOUT GÉNÉRAL
 ****************************************************/

.case-study { overflow: hidden; padding-block: clamp(4rem, 8vw, 6rem); }

/****************************************************
 * 2. COLONNE GAUCHE
 ****************************************************/

.case-layout__left {
	display: flex;
	flex-direction: column;
	gap: 0px;
	padding: 0 10%;
}

.case-label {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 16px;
	color: var(--c-main);
	font-weight: bold;
	margin-bottom: 20px;
}

/*.bloc-resultat{margin-bottom:90px;}*/

.case-title {
	margin: 0 0 12px;
	font-size: clamp(36px, 4vw, 70px);
	line-height: 1.05;
	font-weight: bold;
}

/* On laisse le thème gérer la taille/couleur, on force juste l’interlignage */
.case-intro {
	line-height: 1.7;
	font-size: 18px;
}
.case-intro p {
    margin-bottom: 10px;
}
/****************************************************
 * 3. APPROCHE / RÉSULTAT
 ****************************************************/
.case-extra {
	display: grid;
	margin-top: 30px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 3rem 15px;
}

.approche-contenu {
	max-width: 1200px;
	margin: 0 auto;
	line-height: 1.6;
	margin-bottom: 90px;
}

.approche-contenu p {
		margin-bottom: 1.1em;
}

ul.case-tax-list li { position: relative; padding-left: 17px; }
ul.case-tax-list li::before {
	content: "/";
	position: absolute; top: 0; left: 0;
}
ul.case-tax-list {
	margin-top: 1rem;
	font-weight: bold;
}

.case-block__title {
	margin: 0 0 6px;
	font-size: 11px;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 0.18em;
	color: #94979c;
}

.case-block__content {
	line-height: 1.3;
}

/****************************************************
 * 4. COLONNE DROITE – image / vidéo
 ****************************************************/



/****************************************************
 * 7. RESPONSIVE
 ****************************************************/

/*****************************************************/
/* APPROCHE*/
/*****************************************************/
/* Conteneur global du bloc */
.bloc-approche {
	position: relative;
	padding-top: 80px;
}

.approche-decoration {
	position: absolute;
	bottom: 0px;      /* ajuste selon ta maquette */
	left: 0px;     /* ajuste selon ta maquette */
	width: clamp(100px, 180/1920*100vw, 180px);   /* ajuste */
	transform: translateY(30%);
}

.approche-decoration svg {
	display: block;
	width: 100%;
	height: auto;
}

/* bandes dans le SVG : cachées + décalées au départ */
.approche-stripe {
	fill: var(--c-main);
	transform-box: fill-box;
	transform-origin: center;
	visibility: hidden;                 /* 🔥 on ne les voit pas avant le scroll */
	transform: translate(-120px, 120px); /* 🔥 point de départ (doit matcher JS) */
}

/* Quand le conteneur devient visible au scroll */
.approche-decoration.is-visible .approche-stripe {
	opacity: 1;
	translate: 0 0;
}

/* délais différents pour chaque ligne (apparition une à une) */
.approche-decoration.is-visible .approche-stripe:nth-child(1) {
	transition-delay: 0.05s;
}
.approche-decoration.is-visible .approche-stripe:nth-child(2) {
	transition-delay: 0.15s;
}
.approche-decoration.is-visible .approche-stripe:nth-child(3) {
	transition-delay: 0.25s;
}
.approche-decoration.is-visible .approche-stripe:nth-child(4) {
	transition-delay: 0.35s;
}

/* --- Modal / Overlay --- */
.media-modal-body img,
.media-modal-body video,
.media-modal-body iframe {
	width: 100%;
	border-radius: 14px;
	display: block;
	border: none;
}

/* Responsive : on réduit le nombre de colonnes sur mobile */
@media (max-width: 1600px) {
	.approche-contenu { margin-left: 140px; }
}

@media (max-width: 1279px) {
	.case-layout { align-items: start; }
	.case-layout__left { padding: 0; }
}

@media (max-width: 1024px) {

	.approche-decoration { left: inherit; right: 0; }
	.approche-contenu { margin-left: 0; margin-right: 100px; }
}
@media (max-width: 1023px) {
	.case-layout { grid-template-columns: minmax(0, 1fr); }
	.case-layout__right { max-width: 750px; }
}

@media (max-width: 768px) {

}

@media (max-width: 480px) {
	.approche-decoration { width: 60px; }
	.approche-contenu { margin-right: 0; }
}
@media (max-width: 479px) {
	.case-extra { grid-template-columns: minmax(0, 1fr); }
}