/* ==========================================================================
   Agence — Recrutement « Rejoignez Brille »
   Fond BLANC. En-tete (pretitle pill + trait, titre gauche + paragraphe droite,
   meme pattern que l'en-tete Equipe) puis liste des offres (CPT offre_emploi).
   Specs Figma : frame 727:7842.

   z-index 8 (echelle /agence, cf. global.css) : l'escalier#3 qui suit (blanc ->
   noir) chevauche cette section et doit passer AU-DESSUS (z9).
   ========================================================================== */

.agence-recrutement {
	position: relative;
	z-index: 8;
	background-color: var(--color-white);
	padding: var(--space-3xl) var(--space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
}

/* Compensation piste K de l'Equipe (mode .escalier-k-active uniquement). En piste K,
   l'Equipe est RENDUE 60vh plus haut que sa boite (translateY scrubbe, escalier-rise.js)
   -> trou de layout de 60vh entre le bas rendu de l'Equipe et le haut de Recrutement.
   On le ferme en remontant Recrutement de 60vh. COUPLE au RATTRAPAGE (60vh) d'escalier-rise.js
   et a la course (100vh) : ne jamais changer une valeur seule (cf. section-equipe.css).
   Sur la home ce trou est absorbe par l'overlap -160 de l'escalier#2 ; ici, PAS d'escalier
   apres l'Equipe -> la compensation vit sur cette section-ci (cf. STATUS.md « si on retire
   l'escalier #2, restaurer -60vh »). En fallback (piste J, sans .escalier-k-active) : pas de
   transform -> pas de trou -> pas de compensation (Recrutement en flux normal). Gate
   .page-agence : n'affecte NI la home NI /projets. */
.escalier-k-active .page-agence .agence-recrutement {
	margin-top: -60vh;
}

/* --------------------------------------------------------------------------
   En-tete : pretitle + trait, puis titre + paragraphe en flex row
   -------------------------------------------------------------------------- */

.agence-recrutement__header {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	max-width: 1344px;
	margin-inline: auto;
}

.agence-recrutement__pretitle-wrap {
	display: flex;
	align-items: center;
	gap: 32px;
	width: 100%;
}

.agence-recrutement__pretitle {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 6px;
	padding: 8px;
	border-radius: var(--radius-sm);
}

.agence-recrutement__pretitle-dot {
	flex-shrink: 0;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--color-primary);
}

.agence-recrutement__pretitle-text {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: var(--font-weight-medium);
	line-height: 1;
	text-transform: uppercase;
	color: var(--color-black);
}

.agence-recrutement__separator {
	flex: 1 1 0;
	min-width: 0;
	height: 1px;
	background-color: color-mix(in srgb, var(--color-black) 15%, transparent);
}

.agence-recrutement__title-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 48px;
	width: 100%;
}

.agence-recrutement__titre {
	flex: 0 0 auto;
	width: 660px;
	max-width: 100%;
	margin: 0;
	font-family: var(--font-display);
	font-weight: var(--font-weight-book);
	font-size: 56px;
	line-height: 1;
	letter-spacing: 1.12px;
	color: var(--color-black);
}

.agence-recrutement__paragraphe {
	flex: 0 0 auto;
	width: 432px;
	max-width: 100%;
	margin: 0;
	font-family: var(--font-body);
	font-weight: var(--font-weight-medium);
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-black);
}

/* --------------------------------------------------------------------------
   Liste des offres — une ligne par offre (grille 4 colonnes)
   -------------------------------------------------------------------------- */

.agence-recrutement__liste {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	max-width: 1344px;
}

.agence-recrutement__offre {
	position: relative; /* ancre le bouton overlay (.__offre-trigger, absolu) */
	isolation: isolate; /* z-index de la ligne (trigger/postuler/::before) auto-contenus */
	display: grid;
	grid-template-columns: minmax(180px, 1.1fr) 140px minmax(0, 2fr) 130px;
	gap: 32px;
	align-items: start;
	padding: 40px 0;
	border-top: 1px solid color-mix(in srgb, var(--color-black) 15%, transparent);
}

/* Overlay cliquable : ouvre la modale (recrutement-modale.js). Transparent, couvre toute
   la ligne. z-index 1 -> AU-DESSUS des textes (dont le titre qui devient un contexte
   d'empilement quand il glisse au survol) mais SOUS le bouton Postuler (z-index 2) : clic
   sur la ligne = modale, clic sur Postuler = mailto, jamais les deux. Absolu -> ne prend
   aucune cellule de la grille. */
.agence-recrutement__offre-trigger {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	/* pas de fond : c'est l'::before de la ligne qui porte le survol noir */
}

.agence-recrutement__offre-trigger:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -4px; /* vers l'interieur : ne deborde pas sur la ligne voisine */
	border-radius: var(--radius-lg);
}

.agence-recrutement__offre-intitule {
	font-family: var(--font-display);
	font-weight: var(--font-weight-book);
	font-size: 28px;
	line-height: 1.1;
	color: var(--color-black);
}

.agence-recrutement__offre-type {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: var(--font-weight-medium);
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--color-gray-500);
}

.agence-recrutement__offre-desc {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: var(--font-weight-medium);
	line-height: 1.5;
	color: var(--color-black);
	/* Respiration a DROITE : reduit la largeur effective du texte sans toucher aux colonnes
	   de la grille (reduire le fr redistribuerait a la colonne intitule). Evite que la
	   description arrive au contact du bouton POSTULER (plus large que sa colonne + tire a
	   gauche par sa marge -> ecart reel ~3px sinon). Reset en mobile (colonne unique). */
	padding-right: var(--space-md);
	/* Troncature a 2 lignes : le detail complet vit dans la modale. Uniformise la hauteur
	   des lignes -> les 4 colonnes (align-items:start) restent alignees en haut, quelle que
	   soit la longueur de la description. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* CTA « Postuler » VISUEL (span aria-hidden) : padding + radius reserves DANS LES DEUX
   etats (fond transparent au repos) -> au survol de la ligne il « devient un rectangle
   violet » sans decaler le layout. cf. maquette Job (bouton 130x52). Non interactif : il
   vit SOUS l'overlay cliquable (.__offre-trigger) -> un clic ouvre la modale. L'action et le
   focus clavier sont portes par l'overlay (bouton), pas par ce CTA. */
.agence-recrutement__offre-postuler {
	justify-self: end;
	/* Respiration permanente vs le bord droit de la ligne (24px, echelle 8px).
	   Independant du survol -> visible dans tous les etats. */
	margin-right: var(--space-md);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 12px 20px;
	border-radius: var(--radius-md);
	background-color: transparent;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: var(--font-weight-medium);
	line-height: 1;
	text-transform: uppercase;
	color: var(--color-black);
	text-decoration: none;
	transition: background-color var(--duration-fast) var(--easing-default),
	            color var(--duration-fast) var(--easing-default);
}

/* --------------------------------------------------------------------------
   Hover d'une ligne d'offre (maquette Job) : fond noir en RECTANGLE ARRONDI qui s'OUVRE
   depuis le centre vertical vers le haut et le bas ; le texte blanc + le bouton violet
   apparaissent une fois le fond en place. Gate @media (hover: hover) : desactive au
   tactile (hover: none). Focus clavier gere separement (ci-dessus).

   FORME : fond noir porte par ::before (rectangle arrondi, radius --radius-lg), DERRIERE
   le contenu. isolation: isolate -> le z-index -1 reste dans la ligne (pas sous le fond
   blanc de section). Borne a la boite de la ligne, deja inset de la section (--space-xl)
   -> pas bord a bord viewport.

   OUVERTURE : clip-path UNIQUEMENT (jamais de height animee -> pas de reflow ; le contenu
   ne bouge pas, ::before est decoratif). Ferme = inset(50% 0) (hauteur nulle au centre
   vertical) ; ouvert = inset(0). Rapide (--duration-fast).

   LISIBILITE : le contenu est en HAUT de la ligne (align-items:start), donc recouvert en
   DERNIER par l'ouverture -> on RETARDE son passage au blanc/violet (transition-delay =
   duree d'ouverture) : il apparait (fondu) une fois le fond en place, jamais de texte noir
   sur noir a l'entree. Retour immediat a la sortie (pas de delai).

   Couleurs = tokens : noir #131415 (--color-black), violet #4122ED (--color-primary),
   blanc. ⚠️ Contraste : blanc/violet ~8:1 (AA OK) ; le liseré violet/noir (bord bouton vs
   fond de ligne) ~2:1 (sous le 3:1 non-texte WCAG) mais le bouton reste identifie par son
   libelle blanc -> a confirmer avec Nicolas. Variante hover du composant local non
   exportable par le MCP : forme / rayon / timings relevees des tokens + description, a
   valider a l'oeil (radius et durees facilement ajustables).
   -------------------------------------------------------------------------- */
@media (hover: hover) {
	.agence-recrutement__offre::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		background-color: var(--color-black);
		border-radius: var(--radius-lg);
		/* Ferme : bande de hauteur nulle au centre vertical. Ouvre vers haut + bas. */
		clip-path: inset(50% 0 round var(--radius-lg));
		transition: clip-path var(--duration-fast) var(--easing-default);
	}

	.agence-recrutement__offre:hover::before {
		clip-path: inset(0 0 round var(--radius-lg));
	}

	.agence-recrutement__offre-type,
	.agence-recrutement__offre-desc,
	.agence-recrutement__offre-postuler {
		transition: color var(--duration-fast) var(--easing-default),
		            background-color var(--duration-fast) var(--easing-default);
	}

	.agence-recrutement__offre:hover .agence-recrutement__offre-type,
	.agence-recrutement__offre:hover .agence-recrutement__offre-desc {
		color: var(--color-white);
		transition-delay: var(--duration-fast); /* apparait apres l'ouverture du fond */
	}

	.agence-recrutement__offre:hover .agence-recrutement__offre-postuler {
		background-color: var(--color-primary);
		color: var(--color-white);
		transition-delay: var(--duration-fast);
	}

	/* Titre de l'offre : au survol il GLISSE de 24px vers la droite (transform UNIQUEMENT,
	   aucun margin/padding anime). Le decalage ACCOMPAGNE l'ouverture du fond (delai 0, meme
	   duree que le clip-path) ; sa COULEUR, elle, apparait apres (delai = duree, comme le reste
	   du texte). Retour a sa place a la sortie. Seul le titre bouge. Ordre des proprietes
	   [color, transform] -> transition-delay mappe [retarde, immediat]. */
	.agence-recrutement__offre-intitule {
		transition: color var(--duration-fast) var(--easing-default),
		            transform var(--duration-fast) var(--easing-default);
	}

	.agence-recrutement__offre:hover .agence-recrutement__offre-intitule {
		color: var(--color-white);
		transform: translateX(var(--space-md)); /* 24px : decalage plus franc (etait 16px) */
		transition-delay: var(--duration-fast), 0s;
	}
}

/* reduced-motion : etat de survol applique DIRECTEMENT (pas d'ouverture animee, pas de
   delai). Combine a (hover: hover) pour ne cibler que les appareils a survol. */
@media (hover: hover) and (prefers-reduced-motion: reduce) {
	.agence-recrutement__offre::before,
	.agence-recrutement__offre-intitule,
	.agence-recrutement__offre-type,
	.agence-recrutement__offre-desc,
	.agence-recrutement__offre-postuler {
		transition: none;
	}

	.agence-recrutement__offre:hover .agence-recrutement__offre-intitule,
	.agence-recrutement__offre:hover .agence-recrutement__offre-type,
	.agence-recrutement__offre:hover .agence-recrutement__offre-desc,
	.agence-recrutement__offre:hover .agence-recrutement__offre-postuler {
		transition-delay: 0s;
	}

	/* Titre : pas de decalage anime -> il RESTE EN PLACE (transform neutralise). */
	.agence-recrutement__offre:hover .agence-recrutement__offre-intitule {
		transform: none;
	}
}

.agence-recrutement__offre-postuler-icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
}

.agence-recrutement__offre-postuler-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	stroke: currentColor;
	fill: none;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.agence-recrutement__title-row {
		flex-direction: column;
		gap: 24px;
	}

	.agence-recrutement__titre,
	.agence-recrutement__paragraphe {
		width: 100%;
	}
}

@media (max-width: 767px) {
	.agence-recrutement {
		padding: var(--space-2xl) var(--space-md);
	}

	.agence-recrutement__offre {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 28px 0;
	}

	/* Colonne unique empilee : plus de bouton a droite -> pas de respiration a menager. */
	.agence-recrutement__offre-desc {
		padding-right: 0;
	}

	.agence-recrutement__offre-postuler {
		justify-self: start;
	}
}

/* ==========================================================================
   Modale de detail d'offre — pattern REUTILISE de la modale Profil (equipe).
   Soeur de la section (hors <section>), fixed inset:0, z-index 200 (au-dessus du
   header 150). Panneau CLAIR (coherent avec la section blanche). A11y (focus trap,
   scroll lock, Echap/overlay/croix, restauration focus) : recrutement-modale.js.
   ========================================================================== */

/* Data-sources : conteneur cache d'hydratation (equivalent display:none via [hidden]). */
.agence-recrutement__data-sources {
	display: none;
}

.agence-recrutement__modale {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	/* Cross-fade : visibility bascule apres le fondu a la fermeture (pas de pop). is-open
	   remet le delai a 0 a l'ouverture. */
	transition: opacity 250ms var(--easing-default), visibility 0ms 250ms;
}

.agence-recrutement__modale.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 250ms var(--easing-default), visibility 0ms 0ms;
}

.agence-recrutement__modale-overlay {
	position: absolute;
	inset: 0;
	background-color: color-mix(in srgb, var(--color-black) 70%, transparent);
	cursor: pointer;
}

.agence-recrutement__modale-panel {
	position: relative;
	background-color: var(--color-white);
	border-radius: 24px;
	width: min(720px, 100%);
	max-height: 100%;
	overflow: hidden;
	display: flex;
}

.agence-recrutement__modale-close {
	position: absolute;
	top: 24px;
	right: 24px;
	width: 44px;
	height: 44px;
	background: transparent;
	border: none;
	color: var(--color-black);
	cursor: pointer;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: opacity var(--duration-fast) var(--easing-default);
}

.agence-recrutement__modale-close:hover {
	opacity: 0.6;
}

.agence-recrutement__modale-close:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
	border-radius: var(--radius-sm);
}

.agence-recrutement__modale-close svg {
	display: block;
	width: 24px;
	height: 24px;
}

.agence-recrutement__modale-content {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 56px 48px 48px;
	/* Contenu long : scroll intra-panneau (panel en overflow:hidden ; panel borne par
	   max-height -> ce contenu, etire par le flex, defile). Molette/trackpad : geres par
	   data-lenis-prevent (cf. recrutement.php). */
	overflow-y: auto;
	color: var(--color-black);
}

/* Focus clavier de la zone scrollable (tabindex=0) : indicateur visible (WCAG 2.4.7),
   inset pour rester dans le panneau arrondi. */
.agence-recrutement__modale-content:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -3px;
}

.agence-recrutement__modale-titre {
	margin: 0;
	padding-right: 40px; /* n'entre pas sous la croix */
	font-family: var(--font-display);
	font-weight: var(--font-weight-book);
	font-size: 40px;
	line-height: 1.05;
	letter-spacing: 0.8px;
	/* Casse SAISIE respectee (comme l'intitule de la liste) : annule l'uppercase global des
	   h1..h6. cf. dette « design system » de STATUS.md (uppercase global a reposer localement). */
	text-transform: none;
	color: var(--color-black);
}

.agence-recrutement__modale-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
}

.agence-recrutement__modale-type {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px;
	border-radius: var(--radius-sm);
}

.agence-recrutement__modale-type-dot {
	flex-shrink: 0;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--color-primary);
}

.agence-recrutement__modale-type-text {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: var(--font-weight-medium);
	line-height: 1;
	text-transform: uppercase;
	color: var(--color-black);
}

.agence-recrutement__modale-date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: var(--font-weight-medium);
	line-height: 1;
	text-transform: uppercase;
}

.agence-recrutement__modale-date-label {
	color: var(--color-gray-500);
}

.agence-recrutement__modale-date-text {
	color: var(--color-black);
}

/* Corps de texte de la modale : description (lead, sans label) + blocs labellises
   Missions / Profil recherche. Memes styles -> selecteurs groupes (pas d'abstraction). */
.agence-recrutement__modale-desc,
.agence-recrutement__modale-missions,
.agence-recrutement__modale-profil {
	font-family: var(--font-body);
	font-weight: var(--font-weight-medium);
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-black);
}

.agence-recrutement__modale-missions-block,
.agence-recrutement__modale-profil-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Label commun aux blocs Missions / Profil (h3). */
/* Label commun aux blocs Missions / Profil (h3) et au label du bloc candidature. */
.agence-recrutement__modale-block-titre,
.agence-recrutement__candidature-label {
	margin: 0;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: var(--font-weight-medium);
	line-height: 1;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--color-gray-500);
}

/* --------------------------------------------------------------------------
   Bloc de candidature (remplace l'ancien bouton Postuler mailto). PAS de formulaire :
   adresse EN CLAIR (lisible/copiable) + « Copier » (primaire) + mailto (secondaire) + hint.
   -------------------------------------------------------------------------- */
.agence-recrutement__candidature {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 8px;
}

/* L'adresse email : element central, EN GROS, lisible et copiable (user-select:all ->
   un clic la selectionne entierement). Police du corps (PP Neue Montreal) pour une lecture
   fiable des caracteres, dimensionnee en clamp. */
.agence-recrutement__candidature-email {
	font-family: var(--font-body);
	font-weight: var(--font-weight-medium);
	font-size: clamp(20px, 3.2vw, 28px);
	line-height: 1.2;
	color: var(--color-black);
	word-break: break-word;
	user-select: all;
}

.agence-recrutement__candidature-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
}

/* Bouton « Copier » = action PRIMAIRE (violet plein, comme l'ancien Postuler). */
.agence-recrutement__candidature-copy {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 14px 24px;
	border: none;
	border-radius: var(--radius-md);
	background-color: var(--color-primary);
	color: var(--color-white);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: var(--font-weight-medium);
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--duration-fast) var(--easing-default);
}

.agence-recrutement__candidature-copy:hover {
	background-color: color-mix(in srgb, var(--color-primary) 85%, var(--color-black));
}

.agence-recrutement__candidature-copy:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
}

/* Etat « Copié ! » (2 s, pose en JS) : passe au noir pour signaler le changement. */
.agence-recrutement__candidature-copy.is-copied {
	background-color: var(--color-black);
}

/* Bouton mailto = action SECONDAIRE (ghost/outline, moins d'emphase que « Copier ») :
   souvent inerte selon le poste du visiteur, donc jamais le seul chemin. */
.agence-recrutement__candidature-mailto {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 12px 20px;
	border: 1px solid color-mix(in srgb, var(--color-black) 20%, transparent);
	border-radius: var(--radius-md);
	background-color: transparent;
	color: var(--color-black);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: var(--font-weight-medium);
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color var(--duration-fast) var(--easing-default),
	            background-color var(--duration-fast) var(--easing-default);
}

.agence-recrutement__candidature-mailto:hover {
	border-color: var(--color-black);
	background-color: color-mix(in srgb, var(--color-black) 4%, transparent);
}

.agence-recrutement__candidature-mailto:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
}

.agence-recrutement__candidature-mailto-icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
}

.agence-recrutement__candidature-mailto-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	stroke: currentColor;
	fill: none;
}

.agence-recrutement__candidature-hint {
	margin: 0;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: var(--font-weight-medium);
	line-height: 1.5;
	color: var(--color-gray-500);
}

@media (max-width: 767px) {
	.agence-recrutement__modale {
		padding: 12px;
	}

	.agence-recrutement__modale-panel {
		border-radius: 16px;
	}

	.agence-recrutement__modale-content {
		padding: 48px 24px 32px;
		gap: 20px;
	}

	.agence-recrutement__modale-titre {
		font-size: 30px;
		padding-right: 32px;
	}

	.agence-recrutement__modale-close {
		top: 16px;
		right: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.agence-recrutement__modale,
	.agence-recrutement__modale.is-open {
		transition: none;
	}
}