/* ==========================================================================
   Domaine d'expertise : hero partagé (hero-page.css), historique, vision, six cartes d'activité,
   équipe, travail en images, appel à l'action.
   ========================================================================== */
.ds-expertise {
	--ex-ink: var(--ds-encre);
	--ex-muted: #6e6a63;
	--ex-text: #514e49;
	--ex-line: var(--ds-filet);
	--ex-red: var(--ds-rouge);
	--ex-rose: #e8a5a1;
	background: #fff;
	color: var(--ex-ink);
	overflow-x: clip;
}
.ds-expertise__container { width: min(100%, 1600px); margin-inline: auto; padding-inline: var(--ds-gouttiere); }
.ds-expertise img { display: block; width: 100%; }
.ds-expertise em { font-weight: 400; }
.ds-expertise h2 { font: 400 clamp(44px, 5vw, 72px)/1 var(--ds-serif); letter-spacing: -.015em; }
.ds-expertise h2 em { color: var(--ex-red); }
.ds-expertise__eyebrow { color: var(--ex-red); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }

/* Titre de section centré (même schéma que « Explorer notre travail » sur Projets) */
.ds-expertise__titre { margin-bottom: clamp(44px, 5vw, 72px); text-align: center; }
.ds-expertise__titre h2 { margin-top: 12px; }
.ds-expertise__trait { display: block; width: 44px; height: 2px; margin: 24px auto 0; background: var(--ex-red); }

/* Deux colonnes image / texte */
.ds-expertise__duo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(48px, 8vw, 130px); align-items: center; }
.ds-expertise__duo--inverse { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.ds-expertise__texte h2 { margin: 14px 0 28px; }
.ds-expertise__texte > p:not(.ds-expertise__eyebrow) { max-width: 580px; margin-bottom: 18px; color: var(--ex-text); font-size: 17px; line-height: 1.8; }

/* Image en arche, cadre rouge décalé */
.ds-expertise__arche { position: relative; isolation: isolate; width: 100%; max-width: 500px; margin: 0; }
.ds-expertise__arche img { aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 0 0; background: #e7e1d8; }
.ds-expertise__arche::before { content: ""; position: absolute; z-index: -1; inset: 20px -20px auto 20px; aspect-ratio: 4 / 5; border: 1px solid var(--ex-red); border-radius: 999px 999px 0 0; }
.ds-expertise__arche--portrait { justify-self: end; }
.ds-expertise__arche--portrait img { object-position: center 20%; }
.ds-expertise__arche figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: 40px; }
.ds-expertise__arche figcaption strong { font: 400 26px/1.1 var(--ds-serif); }
.ds-expertise__arche figcaption span { color: var(--ex-muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.ds-expertise__sceau { position: absolute; right: -26px; bottom: 54px; z-index: 1; display: grid; place-items: center; width: 116px; height: 116px; border-radius: 50%; background: var(--ex-red); color: #fff; text-align: center; transform: rotate(-8deg); }
.ds-expertise__sceau b { font: 400 36px/1 var(--ds-serif); }
.ds-expertise__sceau small { margin-top: -26px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; }

/* Historique */
.ds-expertise__historique { padding-block: clamp(72px, 9vw, 130px); }
.ds-expertise__faits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--ex-line); }
.ds-expertise__faits dt { font: 400 26px/1.1 var(--ds-serif); }
.ds-expertise__faits dd { margin: 8px 0 0; color: var(--ex-muted); font-size: 11px; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; }

/* Vision */
.ds-expertise__vision { padding-block: clamp(80px, 10vw, 150px); background: var(--ex-ink); color: #fff; }
.ds-expertise__vision .ds-expertise__eyebrow { color: var(--ex-rose); }
.ds-expertise__vision h2 { max-width: 1100px; margin-top: 22px; font-size: clamp(40px, 5.6vw, 84px); line-height: 1.04; }
.ds-expertise__vision h2 em { color: var(--ex-rose); }
.ds-expertise__guillemet { display: block; height: .42em; color: var(--ex-rose); font-size: 1.7em; line-height: 1; }
.ds-expertise__vision-texte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 96px); margin-top: clamp(48px, 6vw, 84px); padding-top: 40px; border-top: 1px solid #45423d; }
.ds-expertise__vision-texte p { color: #cfc9bf; font-size: 17px; line-height: 1.8; }

/* Six activités : cartes claires */
.ds-expertise__activites { padding-block: clamp(80px, 10vw, 140px); background: var(--ds-fond); }
.ds-expertise__cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.ds-expertise__carte { scroll-margin-top: calc(var(--ds-header-h-compact) + 24px); position: relative; overflow: hidden; padding: 40px 34px 38px; border: 1px solid var(--ex-line); background: #fff; transition: transform .35s var(--ds-sortie), box-shadow .35s var(--ds-sortie); }
.ds-expertise__carte::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--ex-red); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ds-sortie); }
.ds-expertise__carte:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -30px rgba(26, 25, 23, .32); }
.ds-expertise__carte:hover::before { transform: scaleX(1); }
.ds-expertise__numero { position: absolute; top: 18px; right: 28px; color: #efeae2; font: 400 76px/1 var(--ds-serif); }
.ds-expertise__icone { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 30px; border: 1px solid var(--ex-line); border-radius: 50%; color: var(--ex-red); transition: background .3s, color .3s, border-color .3s; }
.ds-expertise__carte:hover .ds-expertise__icone { border-color: var(--ex-red); background: var(--ex-red); color: #fff; }
.ds-expertise__carte h3 { margin-bottom: 14px; font: 400 clamp(26px, 2.2vw, 32px)/1.1 var(--ds-serif); }
.ds-expertise__carte p { color: var(--ex-text); font-size: 15.5px; line-height: 1.75; }

/* Équipe */
.ds-expertise__equipe { padding-block: clamp(80px, 10vw, 140px); background: #eeeae3; }
.ds-expertise__chaine-intro { max-width: 760px; margin: clamp(64px, 8vw, 110px) auto 0; text-align: center; font: 400 clamp(24px, 2.4vw, 32px)/1.3 var(--ds-serif); }
.ds-expertise__chaine { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 44px 0 0; padding: 0; list-style: none; }
.ds-expertise__chaine li { position: relative; padding: 38px 10px 0; text-align: center; }
.ds-expertise__chaine li::before { content: ""; position: absolute; top: 0; left: 50%; z-index: 1; width: 14px; height: 14px; margin-left: -7px; border: 2px solid var(--ex-red); border-radius: 50%; background: #eeeae3; }
.ds-expertise__chaine li:not(:last-child)::after { content: ""; position: absolute; top: 6px; left: 50%; width: 100%; height: 1px; background: #c9c4bb; }
.ds-expertise__chaine span { font-size: 12px; font-weight: 600; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; }

/* Travail en images : mosaïque de Projets, pleine largeur */
.ds-expertise__travail.ds-projets { padding-top: clamp(72px, 9vw, 120px); background: #fff; }
.ds-expertise__suite { padding: 48px var(--ds-gouttiere) clamp(72px, 9vw, 120px); text-align: center; }
.ds-expertise__lien { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 7px; border-bottom: 1px solid var(--ex-red); font-size: 14px; font-weight: 600; transition: gap .2s, color .2s; }
.ds-expertise__lien:hover { gap: 16px; color: var(--ex-red); }
.ds-expertise__lien span { font-size: 19px; line-height: 1; }

/* Appel à l'action */
.ds-expertise__cta { padding-block: clamp(80px, 10vw, 140px); background: var(--ex-ink); color: #fff; text-align: center; }
.ds-expertise__cta .ds-expertise__eyebrow { color: var(--ex-rose); }
.ds-expertise__cta h2 { margin: 16px auto 40px; max-width: 900px; font-size: clamp(44px, 6vw, 84px); line-height: .98; }
.ds-expertise__cta h2 em { color: var(--ex-rose); }

@media (max-width: 1100px) {
	.ds-expertise__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ds-expertise__chaine { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
	.ds-expertise__chaine li:nth-child(3)::after { display: none; }
}
@media (max-width: 1000px) {
	/* La mosaïque passe à deux colonnes : on n'affiche que deux projets (pas de carte orpheline). */
	.ds-expertise__travail .ds-projets__tuile:nth-child(n + 3) { display: none; }
}
@media (max-width: 900px) {
	.ds-expertise__duo, .ds-expertise__duo--inverse { grid-template-columns: 1fr; gap: 64px; }
	.ds-expertise__arche, .ds-expertise__arche--portrait { justify-self: center; max-width: 420px; margin-right: 20px; }
	.ds-expertise__vision-texte { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
	.ds-expertise__cartes { grid-template-columns: 1fr; }
	.ds-expertise__carte { padding: 32px 26px; }
	.ds-expertise__faits { grid-template-columns: 1fr; gap: 20px; }
	.ds-expertise__arche::before { inset: 14px -14px auto 14px; }
	.ds-expertise__sceau { right: -14px; width: 96px; height: 96px; }
	.ds-expertise__sceau b { font-size: 30px; }
	.ds-expertise__sceau small { margin-top: -22px; }
	.ds-expertise__chaine { grid-template-columns: 1fr; row-gap: 0; max-width: 360px; margin-inline: auto; }
	.ds-expertise__chaine li { padding: 0 0 26px 38px; text-align: left; }
	.ds-expertise__chaine li::before { top: 2px; left: 0; margin-left: 0; }
	.ds-expertise__chaine li:not(:last-child)::after { display: block; top: 16px; left: 6px; width: 1px; height: calc(100% - 4px); }
	.ds-expertise .ds-bouton-contour { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.ds-expertise__carte, .ds-expertise__carte::before, .ds-expertise__icone { transition: none; }
	.ds-expertise__carte:hover { transform: none; }
}
