/* ==========================================================================
   Composants du design system (Lot 1)
   Chaque composant lit les variables de surface (--em-text, --em-line, --em-focus…)
   et fonctionne donc sur fond clair comme sur fond sombre.
   ========================================================================== */

/* ---------- Icônes ---------- */
.em-icon { width: 1.5em; height: 1.5em; flex: none; }

/* ---------- Surtitre (eyebrow) ---------- */
.em-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75em;
	font-family: var(--em-font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: var(--em-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--em-accent-text);
}
.em-eyebrow--light { color: var(--em-soft); }
.em-eyebrow::before {
	content: "";
	flex: none;
	align-self: flex-start;
	margin-top: 0.55em;
	width: 1.75rem;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

/* ---------- Boutons ---------- */
.em-btn {
	--btn-bg: transparent;
	--btn-fg: var(--em-text);
	--btn-border: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	min-height: 3.25rem;
	padding: 0.85rem 1.4rem;
	border: 1px solid var(--btn-border);
	border-radius: var(--em-radius-s);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--em-font-sans);
	font-size: 0.9375rem;
	font-weight: 650;
	letter-spacing: 0.005em;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	transition:
		background-color var(--em-dur-base) var(--em-ease-out),
		border-color var(--em-dur-base) var(--em-ease-out),
		color var(--em-dur-base) var(--em-ease-out),
		box-shadow var(--em-dur-base) var(--em-ease-out),
		transform var(--em-dur-fast) var(--em-ease-out);
}
.em-btn__icon { display: inline-flex; transition: transform var(--em-dur-base) var(--em-ease-out); }
.em-btn__icon .em-icon { width: 1.15rem; height: 1.15rem; }
.em-btn:hover .em-btn__icon,
.em-btn:focus-visible .em-btn__icon { transform: translateX(4px); }
.em-btn:active { transform: translateY(1px); }

/* Principal : ambre (« Demander un devis »). Texte nuit sur #EF9A3D = 7,9:1 (0.7.0 ; 0.6 : blanc sur cuivre). */
.em-btn--primary {
	--btn-bg: var(--em-copper-600);
	--btn-fg: var(--em-night);
	--btn-border: var(--em-copper-600);
	background-image: linear-gradient(120deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0) 55%);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 6px 18px rgb(111 208 196 / 0.25);
}
.em-btn--primary:hover { --btn-bg: var(--em-amber-300); --btn-border: var(--em-amber-300); }

/* Vert profond (maquettes « Découvrir nos expertises »). Blanc sur #0A5F58 = 7,52:1. */
.em-btn--deep { --btn-bg: var(--em-deep); --btn-fg: var(--em-white); --btn-border: var(--em-deep); }
.em-btn--deep:hover { --btn-bg: var(--em-deep-700); --btn-border: var(--em-deep-700); }
.em-surface-deep .em-btn--deep { --btn-bg: var(--em-night); --btn-border: var(--em-night); }

/* Contour clair (sur fond sombre) */
.em-btn--ghost-light { --btn-fg: var(--em-white); --btn-border: rgb(255 255 255 / 0.7); }
.em-btn--ghost-light:hover { --btn-bg: var(--em-white); --btn-fg: var(--em-night); --btn-border: var(--em-white); }

/* Contour sombre (sur fond clair) */
.em-btn--ghost-dark { --btn-fg: var(--em-ink); --btn-border: rgb(17 43 48 / 0.45); }
.em-btn--ghost-dark:hover { --btn-bg: var(--em-ink); --btn-fg: var(--em-white); --btn-border: var(--em-ink); }

/* Lien texte avec flèche (maquettes « Voir toutes nos expertises → ») */
.em-btn--link {
	min-height: var(--em-hit);
	padding: 0.25rem 0;
	border: 0;
	border-radius: 0;
	color: var(--em-accent-text);
	font-size: 0.875rem;
	font-weight: 700;
	overflow: visible;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: 0 calc(100% - 0.6rem);
	background-repeat: no-repeat;
	transition: background-size var(--em-dur-base) var(--em-ease-out), color var(--em-dur-fast);
}
.em-btn--link:hover, .em-btn--link:focus-visible { background-size: calc(100% - 1.9rem) 1px; }

/* Tailles */
.em-btn--sm { min-height: var(--em-hit); padding: 0.6rem 1.05rem; font-size: 0.875rem; gap: 0.6rem; }
.em-btn--block { display: flex; width: 100%; }

/* ---------- Boutons icône (recherche, flèches de carrousel, réseaux) ---------- */
.em-icon-btn {
	display: inline-grid;
	place-items: center;
	width: var(--em-hit);
	height: var(--em-hit);
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--em-radius-pill);
	background: transparent;
	color: inherit;
	text-decoration: none;
	transition: background-color var(--em-dur-base) var(--em-ease-out), border-color var(--em-dur-base), color var(--em-dur-base), transform var(--em-dur-fast);
}
.em-icon-btn .em-icon { width: 1.25rem; height: 1.25rem; }
.em-icon-btn:hover { background: rgb(127 127 127 / 0.14); }
.em-icon-btn--outline { border-color: var(--em-line); }
.em-icon-btn--outline:hover { border-color: currentColor; background: transparent; }
.em-icon-btn--deep { background: var(--em-deep); color: var(--em-white); border-radius: var(--em-radius-s); }
.em-icon-btn--deep:hover { background: var(--em-deep-700); }
.em-icon-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Flèche ronde des cartes (maquettes : cercle + flèche en bas à droite) */
.em-round-arrow {
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid rgb(255 255 255 / 0.55);
	border-radius: 50%;
	color: var(--em-white);
	transition: background-color var(--em-dur-base) var(--em-ease-out), border-color var(--em-dur-base), color var(--em-dur-base);
}
.em-round-arrow .em-icon { width: 1rem; height: 1rem; transition: transform var(--em-dur-base) var(--em-ease-out); }

/* ---------- En-tête de section ---------- */
.em-section-head {
	display: grid;
	gap: var(--em-space-m) var(--em-space-xl);
	margin-bottom: var(--em-space-xl);
}
.em-section-head__title { margin-top: var(--em-space-xs); max-width: 20ch; }
.em-section-head__intro { color: var(--em-text-muted); max-width: 34rem; }
.em-section-head__aside { display: grid; gap: var(--em-space-xs); justify-items: start; align-content: end; }
@media (min-width: 1024px) {
	.em-section-head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; }
}

/* ---------- Fil d'Ariane ---------- */
.em-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: 0.8125rem; }
.em-breadcrumb li { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--em-text-muted); }
.em-breadcrumb li + li::before { content: "›"; opacity: 0.6; }
.em-breadcrumb a { text-decoration: none; display: inline-flex; min-height: 2rem; align-items: center; }
.em-breadcrumb a:hover { color: var(--em-text); text-decoration: underline; }
.em-breadcrumb [aria-current] { color: var(--em-text); }
.em-page-hero .em-breadcrumb { margin-bottom: var(--em-space-l); }

/* ---------- Bandeau de réassurance (maquettes : 4 items icône + 2 lignes, séparateurs) ---------- */
.em-assurance {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--em-space-s) 0;
	padding-block: var(--em-space-m);
}
.em-assurance__item {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding-inline: var(--em-space-m);
	font-size: 0.875rem;
	font-weight: 650;
	line-height: 1.35;
}
@media (min-width: 768px) {
	.em-assurance__item + .em-assurance__item { border-left: 1px solid var(--em-line); }
}
.em-icon-circle {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: rgb(7 92 92 / 0.08);
	color: var(--em-deep);
}
.em-surface-night .em-icon-circle, .em-surface-deep .em-icon-circle { background: rgb(255 255 255 / 0.08); color: var(--em-soft); }
.em-icon-circle .em-icon { width: 1.35rem; height: 1.35rem; }
.em-icon-circle--copper,
.em-surface-night .em-icon-circle--copper,
.em-surface-deep .em-icon-circle--copper { background: linear-gradient(140deg, #9fe3d8, var(--em-copper-600)); color: var(--em-night); box-shadow: inset 0 0 0 3px rgb(255 255 255 / 0.18); }

/* ---------- Carte expertise (maquettes 01/02 : photo, dégradé, icône, titre, flèche ronde) ---------- */
.em-card-media {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 7 / 9;
	padding: clamp(0.85rem, 0.6rem + 0.8vw, 1.25rem);
	border-radius: var(--em-radius-s);
	overflow: hidden;
	color: var(--em-white);
	text-decoration: none;
	background: var(--em-night-800);
	box-shadow: var(--em-shadow-s);
	container-type: inline-size;
}
.em-card-media__media,
.em-card-media__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform var(--em-dur-slow) var(--em-ease-out);
}
.em-card-media__media--placeholder {
	background:
		radial-gradient(90% 70% at 70% 20%, rgb(111 208 196 / 0.35), transparent 70%),
		linear-gradient(180deg, var(--em-night-800), var(--em-night-900));
}
.em-card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgb(2 19 20 / 0) 35%, rgb(2 19 20 / 0.88) 100%);
}
.em-card-media__icon { color: var(--em-white); margin-bottom: 0.6rem; }
.em-card-media__icon .em-icon { width: 1.6rem; height: 1.6rem; }
.em-card-media__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; }
.em-card-media__title { min-width: 0; font-family: var(--em-font-display); font-size: clamp(1.0625rem, 11cqi, var(--em-step-2)); line-height: 1.1; font-weight: 420; color: var(--em-white); overflow-wrap: anywhere; hyphens: auto; }
.em-card-media .em-round-arrow { flex: none; }
@container (max-width: 190px) {
	.em-card-media__foot { flex-direction: column; align-items: flex-start; }
}
.em-card-media__text { margin-top: 0.4rem; font-size: 0.8125rem; color: rgb(255 255 255 / 0.82); }
@media (hover: hover) {
	.em-card-media:hover .em-card-media__media,
	.em-card-media:hover .em-card-media__media img { transform: scale(1.05); }
	.em-card-media:hover .em-round-arrow { background: var(--em-copper-600); border-color: var(--em-copper-600); }
	.em-card-media:hover .em-round-arrow .em-icon { transform: translateX(2px); }
}
.em-card-media:focus-visible { outline-offset: 4px; }

/* ---------- Carte étape (maquette 01 « Notre méthode » : n°, icône, titre, texte, flèche) ---------- */
.em-step {
	display: grid;
	gap: 0.75rem;
	align-content: start;
	padding: var(--em-space-m);
	border: 1px solid var(--em-line);
	border-radius: var(--em-radius-s);
	background: rgb(255 255 255 / 0.03);
}
.em-step__head { display: flex; align-items: center; gap: 0.9rem; }
.em-step__num { display: block; font-size: 0.75rem; font-weight: 700; color: var(--em-text-muted); letter-spacing: 0.06em; }
.em-step__title { font-family: var(--em-font-display); font-size: var(--em-step-2); font-weight: 420; line-height: 1.1; }
.em-step__text { font-size: 0.875rem; color: var(--em-text-muted); }

/* ---------- Tuile secteur (maquettes : photo paysage, icône + libellé, flèche) ---------- */
.em-tile {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 4 / 3;
	padding: var(--em-space-s);
	border-radius: var(--em-radius-s);
	overflow: hidden;
	color: var(--em-white);
	text-decoration: none;
	background: var(--em-night-800);
}
.em-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgb(2 19 20 / 0.85)); }
.em-tile__label { display: flex; align-items: center; gap: 0.6rem; width: 100%; font-family: var(--em-font-display); font-size: var(--em-step-1); }
.em-tile__label .em-round-arrow { margin-left: auto; width: 2rem; height: 2rem; }

/* ---------- Tuile logo de référence : logo couleur d'origine, AUCUN filtre (cahier §0) ---------- */
.em-logo-tile {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 2;
	padding: var(--em-space-m);
	border: 1px solid var(--em-line);
	border-radius: var(--em-radius-s);
	background: var(--em-white);
}
.em-logo-tile img { max-height: 4.5rem; width: auto; object-fit: contain; filter: none !important; }

/* ---------- Puces / filtres (maquette 05 : « Tous les projets », « Tertiaire »…) ---------- */
.em-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.em-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--em-hit);
	padding: 0.5rem 1rem;
	border: 1px solid var(--em-line);
	border-radius: var(--em-radius-pill);
	background: transparent;
	color: var(--em-text);
	font-size: 0.875rem;
	font-weight: 600;
	transition: background-color var(--em-dur-fast), color var(--em-dur-fast), border-color var(--em-dur-fast);
}
.em-chip:hover { border-color: currentColor; }
.em-chip[aria-pressed="true"] { background: var(--em-deep); border-color: var(--em-deep); color: var(--em-white); }
.em-chip .em-icon { width: 1.1rem; height: 1.1rem; }

/* ---------- Formulaires (maquette 07) ---------- */
.em-field { display: grid; gap: 0.4rem; }
.em-field__label { font-size: 0.8125rem; font-weight: 700; }
.em-field__label .em-req { color: var(--em-copper-700); margin-left: 0.15em; }
.em-field__help { font-size: 0.8125rem; color: var(--em-text-muted); }
.em-input,
.em-select,
.em-textarea {
	width: 100%;
	min-height: 3rem;
	padding: 0.75rem 0.95rem;
	border: 1px solid rgb(17 43 48 / 0.28);
	border-radius: var(--em-radius-s);
	background: var(--em-white);
	color: var(--em-ink);
	font-size: 1rem; /* 16 px minimum : pas de zoom automatique sur iOS */
	transition: border-color var(--em-dur-fast), box-shadow var(--em-dur-fast);
}
.em-textarea { min-height: 9rem; resize: vertical; }
.em-select { appearance: none; padding-right: 2.75rem; background: var(--em-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23112B30' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.9rem center / 1.1rem; }
.em-input::placeholder, .em-textarea::placeholder { color: #66777a; }
.em-input:hover, .em-select:hover, .em-textarea:hover { border-color: rgb(17 43 48 / 0.5); }
.em-input:focus-visible, .em-select:focus-visible, .em-textarea:focus-visible {
	outline: none;
	border-color: var(--em-deep);
	box-shadow: 0 0 0 3px rgb(7 92 92 / 0.22);
}
.em-field.is-invalid .em-input,
.em-field.is-invalid .em-select,
.em-field.is-invalid .em-textarea,
.em-input[aria-invalid="true"] { border-color: #b4232a; }
.em-field__error { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; font-weight: 600; color: #a11d24; }

.em-check { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.875rem; line-height: 1.45; }
.em-check input {
	flex: none;
	appearance: none;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.1rem 0 0;
	border: 1.5px solid rgb(17 43 48 / 0.45);
	border-radius: var(--em-radius-xs);
	background: var(--em-white);
	display: grid;
	place-content: center;
}
.em-check input[type="radio"] { border-radius: 50%; }
.em-check input:checked { background: var(--em-deep); border-color: var(--em-deep); }
.em-check input[type="checkbox"]:checked::after { content: ""; width: 0.65rem; height: 0.35rem; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.em-check input[type="radio"]:checked::after { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #fff; }
.em-check input:focus-visible { outline: 2px solid var(--em-focus); outline-offset: 2px; }

/* Choix sous forme de cartes (maquette 07 : « Demande de devis / d'informations / Être rappelé ») */
.em-choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.6rem; border: 0; padding: 0; margin: 0; }
.em-choice-card { position: relative; }
.em-choice-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.em-choice-card span {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 3.25rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid rgb(17 43 48 / 0.25);
	border-radius: var(--em-radius-s);
	background: var(--em-white);
	font-size: 0.875rem;
	font-weight: 600;
	transition: border-color var(--em-dur-fast), background-color var(--em-dur-fast);
}
.em-choice-card input:checked + span { border-color: var(--em-deep); background: rgb(7 92 92 / 0.07); box-shadow: inset 0 0 0 1px var(--em-deep); }
.em-choice-card input:focus-visible + span { outline: 2px solid var(--em-focus); outline-offset: 2px; }

/* ---------- Formulaire de recherche ---------- */
.em-search-form {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.35rem 0.35rem 0.35rem 1rem;
	border: 1px solid rgb(17 43 48 / 0.25);
	border-radius: var(--em-radius-s);
	background: var(--em-white);
	color: var(--em-ink);
}
.em-search-form:focus-within { border-color: var(--em-deep); box-shadow: 0 0 0 3px rgb(7 92 92 / 0.2); }
.em-search-form__icon { width: 1.25rem; height: 1.25rem; opacity: 0.6; }
.em-search-form__input { flex: 1; min-width: 0; min-height: var(--em-hit); border: 0; background: transparent; font-size: 1rem; }
.em-search-form__input:focus { outline: none; }

/* ---------- Apparitions au défilement (activées par motion.js uniquement) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.em-motion-ready [data-reveal] {
		opacity: 0;
		transform: translate3d(0, var(--em-reveal-distance), 0);
		transition:
			opacity var(--em-dur-slow) var(--em-ease-out),
			transform var(--em-dur-slow) var(--em-ease-out);
		transition-delay: calc(var(--reveal-index, 0) * 80ms);
	}
	.em-motion-ready [data-reveal].is-revealed { opacity: 1; transform: none; }
}