/* ============================================================
   DAL'ALU — Page "RSE"
   Même DA que les autres pages : conteneur 1460 px, hero à
   panneau rouge centré. Sections à grand titre + trait rouge ;
   chaque bloc = texte (avec encadré "actions concrètes") + visuel.
   ============================================================ */

.dal-rse {
	padding: 0 0 90px;
	overflow: hidden;
}

/* Largeur des blocs : .dal-container de global.css (80 %, comme
   l'accueil) — aucun plafond ni override ici. */

/* ── Fil d'ariane ── */
.dal-rse__fil {
	padding: 18px 0 8px;
	font-size: 13px;
	color: #888;
}

.dal-rse__fil a {
	color: #888;
	text-decoration: none;
}

.dal-rse__fil a:hover {
	color: var(--dal-red, #DC0D15);
}

.dal-rse__fil span {
	margin: 0 6px;
}

/* ── Hero : bandeau image + panneau rouge centré ── */
.dal-rse__hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80%;
	min-height: 240px;
	margin: 8px auto 0;
	background: #cfcfcf;
	border-radius: 24px;
}

/* La photo est presque carrée (3066×2605) pour un bandeau de 240px : en
   cover, plus de 700px sont rognés. Centrée, la coupe tombait sur les
   dernières rangées de personnes. On descend le point de cadrage pour faire
   remonter l'image et dégager le bas du groupe ; ce qui part en haut n'est
   que le feuillage et la façade. */
.dal-rse__hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 59%;
	border-radius: inherit;
	display: block;
}

.dal-rse__hero-panel {
	position: relative;
	color: #fff;
	text-align: center;
	padding: 22px 90px;
	border-radius: 100px;
	max-width: 90%;
}

/* Panneau rouge (semi-transparent : laisse deviner le fond vert) */
.dal-rse__hero-panel-bg {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--dal-red, #DC0D15);
	opacity: .9;
}

.dal-rse__hero-panel-texte {
	position: relative;
	z-index: 1;
}

.dal-rse__hero-titre {
	margin: 0;
	color: #FFF;
	text-align: center;
	font-size: 40px;
	font-weight: 600;
	line-height: normal;
}

.dal-rse__hero-sous {
	margin: 4px 0 0;
	color: #FFF;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
}

/* ── Sections : grand titre noir + trait rouge ── */
.dal-container.dal-rse__section {
	margin-top: 80px;
}

.dal-rse__section-titre {
	color: #000;
	font-size: 39px;
	font-weight: 600;
	line-height: normal;
	margin: 0;
}

.dal-rse__section-titre::after {
	content: "";
	display: block;
	width: 90px;
	height: 5px;
	margin-top: 14px;
	background: var(--dal-red, #DC0D15);
	border-radius: 20px;
}

/* ── Blocs : texte à gauche, visuel à droite ── */
.dal-rse__bloc {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: clamp(32px, 5vw, 70px);
	align-items: start;
	margin-top: 56px;
}

.dal-rse__sous-titre {
	color: var(--dal-red, #DC0D15);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 20px;
}

.dal-rse__texte {
	color: #000;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.55;
	margin: 0 0 14px;
}

/* Encadré "Quelques actions concrètes" */
.dal-rse__actions {
	margin-top: 32px;
	/* 30 px entre la bordure rouge et les puces/texte */
	padding: 22px 30px 24px;
	border: 1px solid rgba(220, 13, 21, .45);
	border-radius: 30px;
}

.dal-rse__actions-titre {
	color: var(--dal-red, #DC0D15);
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 14px;
}

.dal-rse__liste {
	list-style: none;
	margin: 24px 30px 0;
	padding: 0;
}

.dal-rse__liste > li {
	position: relative;
	/* puce (9 px) + 12 px d'écart avant le texte */
	padding-left: 21px;
	margin-bottom: 10px;
	color: #000;
	font-size: 15px;
	line-height: 1.5;
}

.dal-rse__liste > li:last-child {
	margin-bottom: 0;
}

.dal-rse__liste > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--dal-red, #DC0D15);
}

.dal-rse__liste strong {
	font-weight: 600;
}

.dal-rse__liste a {
	color: var(--dal-red, #DC0D15);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Sous-liste imbriquée (puces creuses) */
.dal-rse__sous-liste {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.dal-rse__sous-liste li {
	position: relative;
	/* point (6 px) + 12 px d'écart avant le texte */
	padding-left: 18px;
	margin-bottom: 8px;
	font-size: 15px;
	line-height: 1.5;
}

.dal-rse__sous-liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #000;
}

/* ── Visuel ── */
.dal-rse__col-visuel {
	position: relative;
}

.dal-rse__visuel {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 20px;
	display: block;
	background: #cfcfcf;
}

/* ── Valeurs : grille 2 colonnes, vignette rouge + titre noir + barre rouge ── */
.dal-container.dal-val__liste {
	margin-top: 100px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px clamp(48px, 8vw, 130px);
	align-items: start;
}

.dal-val__item {
	display: flex;
	align-items: flex-start;
	gap: 28px;
}

.dal-val__icone {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--dal-red, #DC0D15);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Le picto occupe plus de place dans le rond, dont le diamètre (72px
   ci-dessus) ne change pas : seule l'image grandit. */
.dal-val__icone img {
	width: 48px;
	height: 48px;
	object-fit: contain;
	/* icônes en blanc sur le rond rouge */
	filter: brightness(0) invert(1);
}

/* Les tracés de « respect » et « responsabilité » ont plus de marge interne
   que les autres : à taille de boîte égale ils paraissaient plus petits dans
   le rond. On les agrandit seuls pour rattraper l'écart optique. Ciblage par
   le fichier source, pour ne pas avoir à poser une classe sur chaque bloc. */
.dal-val__icone img[src*="respect"],
.dal-val__icone img[src*="responsabilit"] {
	width: 58px;
	height: 58px;
}

/* À l'inverse, le tracé de « intégrité » remplit tout son cadre : à 48px il
   pesait plus lourd que les autres dans le rond. */
.dal-val__icone img[src*="integrit"] {
	width: 44px;
	height: 44px;
}

.dal-val__contenu {
	flex: 1 1 auto;
	min-width: 0;
}

/* Titre noir + barre rouge dessous */
.dal-val__titre {
	color: #000;
	font-size: clamp(1.5rem, 1.8vw, 28px);
	font-weight: 600;
	line-height: 1.15;
	margin: 4px 0 22px;
}

.dal-val__titre::after {
	content: "";
	display: block;
	width: 90px;
	height: 5px;
	margin-top: 14px;
	background: var(--dal-red, #DC0D15);
	border-radius: 20px;
}

.dal-val__texte {
	color: #000;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	margin: 0 0 10px;
}

.dal-val__texte:last-child {
	margin-bottom: 0;
}

/* ── Responsive ── */
@media (max-width: 900px) {
	.dal-rse__bloc {
		grid-template-columns: 1fr;
		gap: 28px;
		margin-top: 40px;
	}

	.dal-container.dal-val__liste {
		grid-template-columns: 1fr;
		margin-top: 48px;
		gap: 40px;
	}

	/* Image avant le texte */
	.dal-rse__col-visuel {
		order: -1;
	}

	.dal-rse__visuel {
		aspect-ratio: 16 / 10;
	}

	.dal-container.dal-rse__section {
		margin-top: 56px;
	}
}

@media (max-width: 700px) {
	/* Hauteur de référence mobile : celle du hero de la page histoire */
	.dal-rse__hero {
		min-height: 220px;
	}

	.dal-rse__hero-panel {
		max-width: calc(100% - 40px);
		box-sizing: border-box;
	}

	.dal-rse__hero-titre {
		font-size: clamp(1.35rem, 6vw, 34px);
	}

	.dal-rse__hero-panel {
		padding: 18px 32px;
	}

	.dal-rse__section-titre {
		font-size: clamp(1.6rem, 7vw, 39px);
	}

	.dal-rse__sous-titre {
		font-size: 22px;
	}

	.dal-rse__actions {
		padding: 18px 20px 20px;
	}

	.dal-val__item {
		gap: 20px;
	}

	.dal-val__icone {
		width: 64px;
		height: 64px;
	}

	/* Même proportion agrandie qu'en desktop, sur un rond de 64px. */
	.dal-val__icone img {
		width: 43px;
		height: 43px;
	}

	.dal-val__icone img[src*="respect"],
	.dal-val__icone img[src*="responsabilit"] {
		width: 52px;
		height: 52px;
	}

	.dal-val__icone img[src*="integrit"] {
		width: 38px;
		height: 38px;
	}

	.dal-val__titre {
		font-size: 22px;
	}
}

/* Mobile : le hero suit la marge latérale du container (global.css) */
@media (max-width: 600px) {
	.dal-rse__hero {
		width: auto;
		margin-left: max(16px, 4vw);
		margin-right: max(16px, 4vw);
	}
}

/* Mobile : le titre quitte la bulle centrée pour une languette collée au
   bord gauche de l'écran (comme le blob du slider de l'accueil). Le hero
   garde sa marge latérale ; la languette la remonte et compense dans son
   padding gauche. */
@media (max-width: 600px) {
	.dal-rse__hero {
		justify-content: flex-start;
	}

	.dal-rse__hero-panel {
		margin-left: calc(-1 * max(16px, 4vw));
		width: fit-content;
		max-width: calc(100% + max(16px, 4vw) - 24px);
		box-sizing: border-box;
		padding: 18px 40px 18px calc(max(16px, 4vw) + 28px);
		border-radius: 0 100px 100px 0;
		text-align: left;
	}

	/* Le fond rouge reprend l'arrondi de la languette */
	.dal-rse__hero-panel-bg {
		border-radius: inherit;
	}

	.dal-rse__hero-titre,
	.dal-rse__hero-sous {
		text-align: left;
	}
}