/* ==========================================================================
   L'argentique — maquette/Argentique.dc.html
   arg-hero · arg-intro · arg-planche (carrousel) · b-steps · arg-offres
   ========================================================================== */

/* ------------------------------------------------------------------ Hero */
.arg-hero {
	position: relative;
	display: flex; align-items: flex-end;
	height: clamp(520px, 50vw, 720px);
	padding: 0 var(--gutter) clamp(40px, 5vw, 72px);
	background: var(--ph-dark); color: var(--on-dark);
	overflow: hidden;
}
.arg-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arg-hero .ph.arg-hero__media {
	align-items: flex-start; justify-content: flex-end;
	padding: 24px var(--gutter);
	font-size: 11px; letter-spacing: .16em; color: #D9CFC2;
}
.arg-hero__veil { position: absolute; inset: 0; background: rgba(20, 16, 13, .25); }
.arg-hero__inner { position: relative; width: 100%; max-width: var(--wide); margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.arg-hero .breadcrumb, .arg-hero .breadcrumb a, .arg-hero .breadcrumb [aria-current="page"] { color: var(--on-dark); }
.arg-hero .breadcrumb a:hover { color: var(--on-dark); opacity: .8; }
.arg-hero__script { font-family: var(--font-script); font-size: clamp(40px, 4.4vw, 64px); line-height: 1; }
.arg-hero__title { max-width: 820px; font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 4.4vw, 64px); line-height: 1.05; color: var(--on-dark); }

/* ----------------------------------------------------------------- Intro */
.arg-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5.6vw, 80px); }
.arg-intro__body { display: flex; flex-direction: column; gap: 22px; }
.arg-intro__lead { font-size: clamp(21px, 1.8vw, 25px); line-height: 1.6; color: var(--ink); }
.arg-intro__lead :where(em, i) { font-size: 1.35em; }
.arg-intro__text { font-size: var(--fs-body); line-height: 1.65; color: var(--ink-soft); }

/* -------------------------------------------------------- Planche contact */
.arg-planche { position: relative; padding: clamp(48px, 5vw, 72px) 0; background: #141210; }
.arg-planche__track {
	display: flex; gap: 0;
	margin: 0; padding: 0 var(--gutter); list-style: none;
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin; scrollbar-color: #6B6158 transparent;
}
.arg-planche__track:focus-visible { outline: 2px solid #FAF6EF; outline-offset: -2px; }
.arg-planche__frame {
	flex: none; display: flex; flex-direction: column; gap: 10px;
	padding: 18px 12px;
	border-top: 6px dotted #6B6158; border-bottom: 6px dotted #6B6158;
	scroll-snap-align: start;
}
.arg-planche__frame .b-img, .arg-planche__frame .ph { width: clamp(220px, 22vw, 300px); aspect-ratio: 3 / 2; object-fit: cover; background: #3A322B; }
.arg-planche__frame .ph { font-size: 10px; letter-spacing: .14em; color: #E9E1D5; }
.arg-planche__num { font-family: var(--font-ui); font-size: 11px; letter-spacing: .2em; color: #CFC5B8; }
.arg-planche__controls { display: none; justify-content: flex-end; gap: 8px; max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 24px auto 0; padding-inline: var(--gutter); }
.js .arg-planche__controls { display: flex; }
.js .arg-planche__controls[hidden] { display: none; }
.arg-planche__btn {
	display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; padding: 0;
	border: 1px solid #6B6158; background: transparent; color: #FAF6EF;
	transition: border-color var(--t-hover) ease, opacity var(--t-hover) ease;
}
.arg-planche__btn:hover { border-color: #FAF6EF; }
.arg-planche__btn:focus-visible { outline-color: #FAF6EF; }
.arg-planche__btn:disabled, .arg-planche__btn[aria-disabled="true"] { opacity: .35; cursor: default; border-color: #6B6158; }

/* ---------------------------------------------------- Étapes (b-steps) */
.arg-etapes { display: flex; flex-direction: column; gap: 48px; }
.arg-etapes__head { display: flex; flex-direction: column; gap: 10px; }
.b-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.b-steps__item { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--ink); padding-top: 24px; }
.b-steps__num { font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: .22em; color: var(--accent); }
.b-steps__title { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.2; }
.b-steps__text { font-size: 19px; line-height: 1.55; color: var(--ink-soft); }

/* ---------------------------------------------------------------- Offres */
.arg-offres { padding: clamp(80px, 9vw, 128px) 0; background: var(--bg-alt); }
.arg-offres__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.arg-offre { display: flex; flex-direction: column; gap: 16px; padding: clamp(28px, 3.4vw, 48px); background: var(--bg); }
.arg-offre__tag { font-family: var(--font-ui); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.arg-offre__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; }
.arg-offre__text { font-size: 19px; line-height: 1.55; color: var(--ink-soft); }
.arg-offre__price { font-family: var(--font-display); font-size: 36px; line-height: 1.2; color: var(--ink); }
.arg-offre__btn { align-self: flex-start; padding-inline: 28px; }

/* ------------------------------------------------------------ Responsive */
@media (max-width: 900px) {
	.arg-intro, .b-steps, .arg-offres__grid { grid-template-columns: minmax(0, 1fr); }
}
.arg-offre__price--demande { font-family: var(--font-script); font-size: 32px; color: var(--accent); }