/**
 * Le Casting des Talents — feuille de style de campagne.
 *
 * Les tokens vivent sur .ac-scope, jamais sur :root : rien ne fuit dans le
 * reste du site. Les sections Elementor portent la classe ac-scope, le bloc
 * interactif porte ac-casting (qui l'inclut).
 *
 * Mono-thème par choix : c'est une page de marque, pas de mode sombre.
 */

.ac-scope,
.ac-casting {
	--ac-navy: #1d3d91;
	--ac-navy-deep: #142a66;
	--ac-ink: #0b1636;
	--ac-magenta: #e5004b;
	--ac-magenta-dark: #b80039;
	--ac-gold: #ffc24b;
	--ac-gold-texte: #ca8600;
	--ac-sky: #74a4bd;
	--ac-sky-texte: #487c97;
	--ac-paper: #f6f7fb;
	--ac-card: #ffffff;
	--ac-line: #e1e5f2;
	--ac-muted: #5d6a90;
	--ac-text: #16224a;
	--ac-shadow-sm: 0 1px 2px rgba(11, 22, 54, .06), 0 4px 12px rgba(11, 22, 54, .06);
	--ac-shadow-md: 0 2px 4px rgba(11, 22, 54, .06), 0 12px 32px rgba(11, 22, 54, .10);
	--ac-shadow-lg: 0 4px 8px rgba(11, 22, 54, .08), 0 24px 64px rgba(11, 22, 54, .16);
	--ac-display: "Big Shoulders Display", "Haettenschweiler", "Arial Narrow", sans-serif;
	--ac-body: muli, "Mulish", "Segoe UI", system-ui, -apple-system, sans-serif;
	--ac-wrap: 1120px;

	color: var(--ac-text);
	font-family: var(--ac-body);
}

.ac-scope *,
.ac-scope *::before,
.ac-scope *::after,
.ac-casting *,
.ac-casting *::before,
.ac-casting *::after {
	box-sizing: border-box;
}

.ac-scope :focus-visible,
.ac-casting :focus-visible {
	border-radius: 4px;
	outline: 3px solid var(--ac-gold);
	outline-offset: 3px;
}

.ac-wrap {
	margin-inline: auto;
	max-width: var(--ac-wrap);
	padding-inline: 24px;
	width: 100%;
}

/* Libellés ---------------------------------------------------------------- */

.ac-eyebrow {
	color: var(--ac-sky-texte);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .16em;
	margin: 0;
	text-transform: uppercase;
}

.ac-eyebrow--ink {
	color: var(--ac-magenta);
}

.ac-eyebrow--gold {
	color: var(--ac-gold);
}

/* Bande clap -------------------------------------------------------------- */

.ac-clapper {
	background: repeating-linear-gradient(115deg, var(--ac-ink) 0 18px, var(--ac-gold) 18px 36px);
	height: 10px;
	opacity: .9;
}

/* Hero -------------------------------------------------------------------- */

.ac-hero {
	background:
		radial-gradient(1100px 520px at 50% -12%, rgba(116, 164, 189, .30), transparent 62%),
		linear-gradient(178deg, var(--ac-navy-deep) 0%, var(--ac-ink) 78%);
	color: #fff;
	isolation: isolate;
	overflow: hidden;
	padding-block: 78px 150px;
	position: relative;
}

/* Faisceau de projecteur et grain : tout en CSS, aucune image a charger. */
.ac-hero::before {
	animation: ac-sweep 14s ease-in-out infinite alternate;
	background: conic-gradient(from 175deg at 50% 0%,
		transparent 0deg, rgba(255, 194, 75, .10) 6deg, rgba(255, 255, 255, .055) 12deg,
		rgba(255, 194, 75, .10) 18deg, transparent 24deg);
	content: "";
	filter: blur(6px);
	height: 150%;
	inset: -30% -10% auto 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 70%;
	z-index: -1;
}

@keyframes ac-sweep {
	from { transform: translateX(-50%) rotate(-7deg); }
	to { transform: translateX(-50%) rotate(7deg); }
}

.ac-hero::after {
	background-image: radial-gradient(rgba(255, 255, 255, .14) .5px, transparent .5px);
	background-size: 3px 3px;
	content: "";
	inset: 0;
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), transparent 70%);
	opacity: .35;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.ac-hero-inner {
	margin-inline: auto;
	max-width: 820px;
	position: relative;
	text-align: center;
}

/* Hero en image : la colonne suit la largeur du contenu. Le plafond ci-dessus
   vient de la maquette typographique ; il s'applique a la COLONNE, en plus de
   celui pose sur son conteneur interne — les deux doivent etre leves. */
.ac-hero--photo .ac-hero-inner {
	max-width: none;
}

.ac-presente {
	color: rgba(255, 255, 255, .62);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .22em;
	margin-bottom: 26px;
	text-transform: uppercase;
}

.ac-marquee {
	font-family: var(--ac-display);
	font-size: clamp(48px, 10.5vw, 132px);
	font-weight: 800;
	letter-spacing: .004em;
	line-height: .86;
	margin: 0;
	text-transform: uppercase;
}

.ac-marquee .ac-lite {
	color: #fff;
	display: block;
	font-size: .46em;
	font-weight: 600;
	letter-spacing: .06em;
	margin-bottom: .12em;
}

.ac-marquee .ac-hot {
	color: var(--ac-gold);
	display: block;
	text-shadow: 0 0 42px rgba(255, 194, 75, .34);
}

.ac-tagline {
	color: rgba(255, 255, 255, .9);
	font-size: clamp(18px, 2.4vw, 24px);
	font-style: italic;
	font-weight: 400;
	margin-top: 22px;
}

/* Billet ------------------------------------------------------------------ */

.ac-ticket {
	align-items: stretch;
	border-radius: 14px;
	box-shadow: 0 18px 46px rgba(0, 0, 0, .34);
	display: inline-flex;
	margin-top: 38px;
	max-width: 100%;
	overflow: hidden;
	text-align: left;
}

.ac-ticket-day {
	background: var(--ac-gold);
	color: var(--ac-ink);
	display: flex;
	flex: none;
	flex-direction: column;
	justify-content: center;
	padding: 18px 26px 16px;
	position: relative;
}

.ac-ticket-day .ac-dow {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .2em;
	opacity: .72;
	text-transform: uppercase;
}

.ac-ticket-day .ac-dm {
	font-family: var(--ac-display);
	font-size: clamp(34px, 6vw, 54px);
	font-weight: 800;
	letter-spacing: .01em;
	line-height: .9;
	margin-top: 4px;
	text-transform: uppercase;
	white-space: nowrap;
}

.ac-ticket-day::after {
	background-image: radial-gradient(circle, var(--ac-ink) 1px, transparent 1.2px);
	background-size: 2px 9px;
	bottom: 0;
	content: "";
	opacity: .35;
	position: absolute;
	right: -1px;
	top: 0;
	width: 2px;
}

.ac-ticket-info {
	backdrop-filter: blur(6px);
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .16);
	border-left: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
	justify-content: center;
	padding: 18px 26px;
}

.ac-ticket-info .ac-t1 {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -.005em;
}

.ac-ticket-info .ac-t2 {
	color: rgba(255, 255, 255, .74);
	font-size: 14.5px;
}

.ac-ticket-info .ac-t2 b {
	color: var(--ac-gold);
	font-weight: 800;
}

.ac-countdown {
	align-items: center;
	color: var(--ac-gold);
	display: inline-flex;
	font-size: 12px;
	font-weight: 800;
	gap: 8px;
	letter-spacing: .1em;
	margin-top: 6px;
	text-transform: uppercase;
}

.ac-blip {
	animation: ac-blip 2.4s ease-out infinite;
	background: var(--ac-gold);
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(255, 194, 75, .7);
	height: 7px;
	width: 7px;
}

@keyframes ac-blip {
	0% { box-shadow: 0 0 0 0 rgba(255, 194, 75, .6); }
	70% { box-shadow: 0 0 0 11px rgba(255, 194, 75, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 194, 75, 0); }
}

.ac-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 26px;
}

.ac-pill {
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 999px;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	padding: 8px 16px;
}

.ac-pill strong {
	color: var(--ac-gold);
	font-weight: 800;
}

/* Marques ----------------------------------------------------------------- */

.ac-hero-brands {
	border-top: 1px solid rgba(255, 255, 255, .13);
	margin-top: 44px;
	padding-top: 30px;
}

.ac-hero-brands .ac-lab {
	color: rgba(255, 255, 255, .5);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .2em;
	margin-bottom: 20px;
	text-transform: uppercase;
}

.ac-wm-row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 18px 40px;
	justify-content: center;
}

/* Hauteurs normalisees optiquement, pas mathematiquement : chaque logo est
   cale sur sa masse visuelle, d'ou des valeurs differentes. */
.ac-wm img {
	display: block;
	height: auto;
	object-fit: contain;
	opacity: .95;
	transition: opacity .18s ease;
	width: auto;
}

.ac-wm img:hover {
	opacity: 1;
}

.ac-wm--sol img { max-height: 34px; }
.ac-wm--a4h img { max-height: 38px; }
.ac-wm--tads img { max-height: 40px; }

.ac-wm-text {
	align-items: center;
	color: #fff;
	display: flex;
	height: 38px;
	line-height: 1;
}

.ac-wm-ads .ac-m {
	font-size: 23px;
	font-weight: 800;
	letter-spacing: -.01em;
}

.ac-wm-ads .ac-m i {
	font-style: normal;
	font-weight: 400;
	margin-left: .16em;
	opacity: .92;
}

.ac-hero-partner {
	align-items: center;
	color: rgba(255, 255, 255, .5);
	display: flex;
	flex-wrap: wrap;
	font-size: 12px;
	font-weight: 700;
	gap: 14px;
	justify-content: center;
	letter-spacing: .14em;
	margin-top: 26px;
	text-transform: uppercase;
}

.ac-wm-mj {
	align-items: center;
	background: #fff;
	border-radius: 9px;
	display: inline-flex;
	padding: 9px 16px;
}

.ac-wm-mj img {
	display: block;
	height: 22px;
	width: auto;
}

/* Repere de logo manquant : ne subsiste que pour AD Seniors. */
.ac-slot {
	position: relative;
}

.ac-slot::after {
	color: rgba(255, 255, 255, .46);
	content: attr(data-ac-slot);
	font-size: 8.5px;
	font-weight: 700;
	left: 50%;
	letter-spacing: .1em;
	position: absolute;
	text-transform: uppercase;
	top: calc(100% + 7px);
	transform: translateX(-50%);
	white-space: nowrap;
}

/* Carte de recherche ------------------------------------------------------ */

.ac-search-zone {
	margin-top: -96px;
	position: relative;
	z-index: 4;
}

.ac-search-card {
	background: var(--ac-card);
	border: 1px solid var(--ac-line);
	border-radius: 20px;
	box-shadow: var(--ac-shadow-lg);
	padding: 34px 34px 30px;
}

.ac-search-card h2 {
	color: var(--ac-navy);
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 800;
	letter-spacing: -.01em;
	margin: 0;
}

.ac-search-card .ac-sub {
	color: var(--ac-muted);
	font-size: 15.5px;
	margin: 7px 0 0;
}

.ac-search-form {
	align-items: end;
	display: grid;
	gap: 14px;
	grid-template-columns: 1.05fr 1.15fr auto;
	margin-top: 24px;
}

.ac-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ac-label {
	color: var(--ac-navy);
	display: block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	margin-bottom: 7px;
	text-transform: uppercase;
}

.ac-input {
	background: #fff;
	border: 1.5px solid var(--ac-line);
	border-radius: 11px;
	color: var(--ac-text);
	font: inherit;
	font-size: 16px;
	padding: 14px 16px;
	transition: border-color .15s ease, box-shadow .15s ease;
	width: 100%;
}

.ac-input::placeholder {
	color: #6475a1;
}

.ac-input:focus {
	border-color: var(--ac-navy);
	box-shadow: 0 0 0 4px rgba(29, 61, 145, .10);
	outline: none;
}

.ac-input[aria-invalid="true"] {
	border-color: var(--ac-magenta);
}

.ac-aide {
	color: var(--ac-muted);
	font-size: 13px;
	margin-top: 6px;
}

.ac-btn {
	border: 0;
	border-radius: 11px;
	cursor: pointer;
	font: inherit;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: .01em;
	padding: 15px 26px;
	transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}

.ac-btn--primaire {
	/* Repli en dur : si le token ne se resout pas, `background: var(--x)` devient
	   invalide et retombe sur transparent. Le CTA principal ne peut pas dependre
	   de ca. */
	background-color: #e5004b;
	background-color: var(--ac-magenta, #e5004b);
	box-shadow: 0 6px 18px rgba(229, 0, 75, .28);
	color: #fff;
}

.ac-btn--primaire:hover {
	background-color: var(--ac-magenta-dark, #b80039);
	transform: translateY(-1px);
}

.ac-btn--fantome {
	background: transparent;
	border: 1.5px solid var(--ac-line);
	color: var(--ac-navy);
}

.ac-btn--fantome:hover {
	background: #f2f4fb;
	border-color: var(--ac-navy);
}

.ac-btn--bloc {
	width: 100%;
}

.ac-hint {
	color: var(--ac-muted);
	font-size: 13.5px;
	margin-top: 14px;
}

.ac-hint b {
	color: var(--ac-navy);
}

/* Résultats --------------------------------------------------------------- */

.ac-erreur {
	background: #fff2f5;
	border-left: 4px solid var(--ac-magenta);
	border-radius: 4px;
	margin-top: 14px;
	padding: .75rem 1rem;
}

.ac-resultats:empty {
	display: none;
}

.ac-etat {
	border-top: 1px dashed var(--ac-line);
	margin-top: 22px;
	padding-top: 22px;
}

.ac-etat__titre {
	align-items: center;
	color: var(--ac-navy);
	display: flex;
	font-size: 15px;
	font-weight: 800;
	gap: 10px;
	margin: 0 0 14px;
}

.ac-agences {
	display: grid;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ac-agence {
	align-items: flex-start;
	background: #fbfcfe;
	border: 1.5px solid var(--ac-line);
	border-radius: 13px;
	display: flex;
	gap: 16px;
	padding: 16px 18px;
}

.ac-agence--participante {
	background: #fffcf4;
	border-color: rgba(255, 194, 75, .85);
}

.ac-flag {
	align-items: center;
	background: var(--ac-navy);
	border-radius: 10px;
	color: #fff;
	display: flex;
	flex: none;
	font-family: var(--ac-display);
	font-size: 17px;
	font-weight: 700;
	height: 42px;
	justify-content: center;
	letter-spacing: .04em;
	width: 42px;
}

.ac-agence--participante .ac-flag {
	background: var(--ac-gold);
	color: var(--ac-ink);
}

.ac-agence__nom {
	color: var(--ac-navy);
	font-size: 16.5px;
	font-weight: 800;
	margin: 0;
}

.ac-agence__meta {
	color: var(--ac-muted);
	font-size: 14px;
	margin: 3px 0 0;
}

.ac-tag {
	background: #eef1f9;
	border-radius: 999px;
	color: var(--ac-navy);
	display: inline-block;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .08em;
	/* Le corps de page est en 1.6 : beaucoup trop aere pour des capitales de
	   11,5 px des que le libelle passe a la ligne. */
	line-height: 1.35;
	margin-top: 8px;
	padding: 6px 14px;
	text-align: center;
	text-transform: uppercase;
	text-wrap: balance;
}

.ac-tag--gold {
	background: var(--ac-gold);
	color: var(--ac-ink);
}

.ac-etat__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 18px;
}

.ac-notice {
	background: #eef1f9;
	border: 1px solid var(--ac-line);
	border-radius: 13px;
	color: var(--ac-text);
	font-size: 15px;
	padding: 16px 18px;
}

.ac-notice b {
	color: var(--ac-navy);
}

.ac-chargement {
	color: var(--ac-muted);
	margin-top: 22px;
}

/* Sections éditoriales ---------------------------------------------------- */

.ac-section {
	padding-block: 88px;
}

.ac-section--card {
	/* Pas de bordure : le bloc est decoupe en deux sections Elementor, un
	   `border-block` y tracait quatre traits pleine largeur au lieu d'un. Le
	   fond blanc suffit a detacher la section du papier. */
	background: var(--ac-card);
}

.ac-section--navy {
	background: var(--ac-navy);
	color: #fff;
}

.ac-sec-head {
	margin-bottom: 44px;
	max-width: 640px;
}

.ac-sec-head h2 {
	color: var(--ac-navy);
	font-size: clamp(26px, 3.6vw, 40px);
	font-weight: 800;
	letter-spacing: -.02em;
	margin: 12px 0 0;
}

.ac-sec-head p {
	color: var(--ac-muted);
	font-size: 17px;
	margin: 12px 0 0;
}

.ac-section--navy .ac-sec-head h2 { color: #fff; }
.ac-section--navy .ac-sec-head p { color: rgba(255, 255, 255, .72); }

/* Rôles ------------------------------------------------------------------- */

.ac-roles {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(3, 1fr);
}

.ac-role {
	background: #fff;
	border: 1.5px solid var(--ac-line);
	border-radius: 18px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.ac-role:hover {
	border-color: #c9d2ea;
	box-shadow: var(--ac-shadow-md);
	transform: translateY(-3px);
}

.ac-role-top {
	background: var(--ac-navy);
	color: #fff;
	padding: 22px 24px 20px;
}

.ac-role-top .ac-num {
	color: var(--ac-gold);
	font-family: var(--ac-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.ac-role-top h3 {
	font-size: 23px;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.15;
	margin: 6px 0 0;
}

.ac-role-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 16px;
	padding: 22px 24px 24px;
}

.ac-role .ac-lab {
	color: var(--ac-magenta);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ac-missions {
	display: grid;
	gap: 9px;
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.ac-missions li {
	color: var(--ac-text);
	font-size: 15.5px;
	padding-left: 20px;
	position: relative;
}

.ac-missions li::before {
	background: var(--ac-sky);
	border-radius: 2px;
	content: "";
	height: 8px;
	left: 0;
	position: absolute;
	top: 9px;
	width: 8px;
}

.ac-role .ac-btn {
	margin-top: auto;
}

/* Étapes ------------------------------------------------------------------ */

.ac-steps {
	background: #fff;
	border: 1.5px solid var(--ac-line);
	border-radius: 18px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	overflow: hidden;
}

.ac-step {
	border-right: 1.5px solid var(--ac-line);
	padding: 30px 28px;
}

.ac-step:last-child {
	border-right: 0;
}

/* Le doré ne passe pas AA sur blanc : version assombrie pour ce chiffre. */
.ac-step .ac-n {
	color: var(--ac-gold-texte);
	font-family: var(--ac-display);
	font-size: 46px;
	font-weight: 800;
	line-height: 1;
}

.ac-step h3 {
	color: var(--ac-navy);
	font-size: 19px;
	font-weight: 800;
	margin: 12px 0 0;
}

.ac-step p {
	color: var(--ac-muted);
	font-size: 15.5px;
	margin: 9px 0 0;
}

.ac-step .ac-when {
	background: #eef1f9;
	border-radius: 999px;
	color: var(--ac-navy);
	display: inline-block;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .09em;
	margin-top: 14px;
	padding: 4px 10px;
	text-transform: uppercase;
}

/* Pourquoi ---------------------------------------------------------------- */

.ac-whys {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(4, 1fr);
}

.ac-why {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 16px;
	padding: 24px 22px;
}

.ac-why .ac-ic {
	color: var(--ac-gold);
	height: 34px;
	margin-bottom: 14px;
	width: 34px;
}

.ac-why h3 {
	font-size: 17.5px;
	font-weight: 800;
	margin: 0;
}

.ac-why p {
	color: rgba(255, 255, 255, .76);
	font-size: 15px;
	line-height: 1.55;
	margin: 8px 0 0;
}

/* Bande partenaire -------------------------------------------------------- */

.ac-partnerband {
	padding-block: 70px;
}

.ac-pb-card {
	align-items: center;
	background: #fff;
	border: 1.5px solid var(--ac-line);
	border-radius: 18px;
	box-shadow: var(--ac-shadow-sm);
	display: flex;
	flex-wrap: wrap;
	gap: 38px;
	padding: 34px 38px;
}

.ac-pb-logo img {
	display: block;
	height: 38px;
	width: auto;
}

.ac-pb-text {
	flex: 1;
	min-width: 280px;
}

.ac-pb-text h3 {
	color: var(--ac-navy);
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -.01em;
	margin: 10px 0 0;
}

.ac-pb-text p:last-child {
	color: var(--ac-muted);
	font-size: 15.5px;
	margin: 8px 0 0;
}

.ac-legal {
	color: var(--ac-muted);
	font-size: 13px;
	line-height: 1.6;
	max-width: 820px;
}

/* Modale ------------------------------------------------------------------ */

.ac-modale {
	background: transparent;
	border: 0;
	max-height: 92vh;
	max-width: min(620px, calc(100vw - 32px));
	overflow: visible;
	padding: 0;
	width: 100%;
}

.ac-modale::backdrop {
	backdrop-filter: blur(3px);
	background: rgba(11, 22, 54, .62);
}

.ac-form {
	animation: ac-pop .22s cubic-bezier(.2, .8, .3, 1);
	background: #fff;
	border-radius: 20px;
	box-shadow: var(--ac-shadow-lg);
	display: flex;
	flex-direction: column;
	max-height: 92vh;
	overflow: hidden;
}

@keyframes ac-pop {
	from { opacity: 0; transform: translateY(14px) scale(.985); }
	to { opacity: 1; transform: none; }
}

.ac-modale__entete {
	background: var(--ac-navy);
	color: #fff;
	flex: none;
	padding: 24px 28px;
	position: relative;
}

.ac-modale__titre {
	font-size: 23px;
	font-weight: 800;
	letter-spacing: -.01em;
	margin: 8px 0 0;
}

.ac-modale__contexte {
	color: rgba(255, 255, 255, .78);
	font-size: 14.5px;
	margin: 6px 0 0;
}

.ac-modale__fermer {
	background: rgba(255, 255, 255, .14);
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	font-size: 19px;
	height: 44px;
	line-height: 1;
	position: absolute;
	right: 14px;
	top: 14px;
	width: 44px;
}

.ac-modale__fermer:hover {
	background: rgba(255, 255, 255, .26);
}

.ac-modale__corps {
	display: grid;
	gap: 18px;
	overflow-y: auto;
	padding: 26px 28px 28px;
}

.ac-grille2 {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr 1fr;
}

.ac-req {
	color: var(--ac-magenta);
}

.ac-modalite {
	border: 0;
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.ac-modalite legend {
	padding: 0;
}

.ac-radio {
	align-items: flex-start;
	background: #fff;
	border: 1.5px solid var(--ac-line);
	border-radius: 12px;
	cursor: pointer;
	display: flex;
	gap: 12px;
	padding: 14px 16px;
	transition: border-color .14s ease, background .14s ease;
}

.ac-radio:has(input:checked) {
	background: #f3f6fd;
	border-color: var(--ac-navy);
}

.ac-radio input {
	accent-color: var(--ac-navy);
	flex: none;
	height: 17px;
	margin-top: 3px;
	width: 17px;
}

.ac-radio .ac-t {
	color: var(--ac-navy);
	display: block;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.35;
}

.ac-radio .ac-d {
	color: var(--ac-muted);
	display: block;
	font-size: 13.5px;
	line-height: 1.45;
	margin-top: 3px;
}

.ac-recap {
	background: #f3f6fd;
	border: 1px solid var(--ac-line);
	border-radius: 12px;
	font-size: 14.5px;
	padding: 14px 16px;
}

.ac-recap b {
	color: var(--ac-navy);
}

.ac-upload {
	background: #fbfcfe;
	border: 1.5px dashed var(--ac-line);
	border-radius: 12px;
	padding: 18px;
}

.ac-upload b {
	color: var(--ac-navy);
}

.ac-modale__pied {
	background: #fbfcfe;
	border-top: 1px solid var(--ac-line);
	flex: none;
	padding: 20px 28px 26px;
}

.ac-rgpd {
	color: var(--ac-muted);
	font-size: 12.5px;
	font-style: italic;
	line-height: 1.55;
	margin: 16px 0 0;
	text-align: center;
}

.ac-form__erreur {
	background: #fff2f5;
	border-left: 4px solid var(--ac-magenta);
	border-radius: 4px;
	margin: 0;
	padding: .75rem 1rem;
}

/* Pot de miel : hors écran plutôt que display:none, que certains robots
   savent détecter. */
.ac-pot {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 0;
}

/* Confirmation ------------------------------------------------------------ */

.ac-done {
	padding: 44px 32px;
	text-align: center;
}

.ac-done .ac-tick {
	align-items: center;
	background: var(--ac-gold);
	border-radius: 50%;
	color: var(--ac-ink);
	display: flex;
	font-size: 30px;
	font-weight: 800;
	height: 64px;
	justify-content: center;
	margin: 0 auto 20px;
	width: 64px;
}

.ac-done h3 {
	color: var(--ac-navy);
	font-size: 25px;
	font-weight: 800;
	margin: 0;
}

.ac-done p {
	color: var(--ac-muted);
	font-size: 16px;
	margin: 12px 0 0;
}

/* Points de rupture ------------------------------------------------------- */

@media (max-width: 980px) {
	.ac-whys { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
	.ac-roles { grid-template-columns: 1fr; }
	.ac-steps { grid-template-columns: 1fr; }
	.ac-step { border-bottom: 1.5px solid var(--ac-line); border-right: 0; }
	.ac-step:last-child { border-bottom: 0; }
}

@media (max-width: 800px) {
	.ac-search-form { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
	.ac-ticket { flex-direction: column; }
	.ac-ticket-day::after {
		background-size: 9px 2px;
		bottom: -1px;
		height: 2px;
		left: 0;
		right: 0;
		top: auto;
		width: auto;
	}
	.ac-ticket-info { border-left: 1px solid rgba(255, 255, 255, .16); border-top: 0; }
}

@media (max-width: 560px) {
	.ac-whys { grid-template-columns: 1fr; }
	.ac-grille2 { grid-template-columns: 1fr; }
	.ac-hero { padding-block: 56px 130px; }
	.ac-search-card { padding: 24px 20px 22px; }
	.ac-section { padding-block: 60px; }
}

@media (prefers-reduced-motion: reduce) {
	.ac-scope *,
	.ac-scope *::before,
	.ac-scope *::after,
	.ac-casting *,
	.ac-casting *::before,
	.ac-casting *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* =========================================================================
   Compatibilité Elementor
   Les sections éditoriales passent par sections/colonnes : Elementor
   intercale ses propres conteneurs entre nos classes et le contenu. Ces
   règles neutralisent ses espacements par défaut là où la maquette impose
   un bord à bord.
   ========================================================================= */

.ac-scope .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}

.ac-scope .elementor-widget-wrap {
	padding: 0;
}

/* Hero : le contenu est centré et la colonne ne doit pas contraindre. */
/* Hero typographique : le texte est plus lisible sur une colonne etroite. */
.ac-hero:not(.ac-hero--photo) .ac-hero-inner .elementor-widget-wrap {
	margin-inline: auto;
	max-width: 820px;
	text-align: center;
}

/* Hero en image : les bandes s'alignent sur la largeur du contenu qui suit,
   soit les 1140 px du conteneur Elementor. Les plafonner a 820 px les faisait
   paraitre plus etroites que la carte de recherche et les sections suivantes. */
.ac-hero--photo .ac-hero-inner .elementor-widget-wrap {
	margin-inline: auto;
	max-width: none;
	text-align: center;
}

.ac-hero .elementor-widget-text-editor p {
	margin: 0;
}

.ac-hero .ac-tagline {
	margin-top: 22px;
}

.ac-section--head .elementor-widget-wrap {
	max-width: 640px;
}

/* Cartes métier : la colonne EST la carte. */
.ac-roles-row > .elementor-container {
	align-items: stretch;
	gap: 22px;
}

.ac-roles-row .elementor-column.ac-role {
	background: #fff;
	border: 1.5px solid var(--ac-line);
	border-radius: 18px;
	overflow: hidden;
}

/* Elementor empile les widgets dans un flex EN LIGNE avec retour a la ligne :
   margin-top:auto n'y pousse rien vers le bas. En colonne sans retour, le
   bouton se cale au pied de la carte, quelle que soit la longueur des
   missions — les trois boutons s'alignent donc a la meme hauteur. */
.ac-role .elementor-widget-wrap {
	align-content: stretch;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	height: 100%;
}

.ac-role .elementor-widget-wrap > .elementor-element {
	width: 100%;
}

.ac-role .ac-role-top {
	background: var(--ac-navy);
	color: #fff;
	padding: 22px 24px 20px;
}

.ac-role .ac-role-missions {
	padding: 22px 24px 0;
}

.ac-role .ac-role-cta {
	margin-top: auto;
	padding: 20px 24px 24px;
}

.ac-role .ac-role-cta .elementor-button {
	background: transparent;
	border: 1.5px solid var(--ac-line);
	border-radius: 11px;
	color: var(--ac-navy);
	font-weight: 800;
	padding: 15px 26px;
	width: 100%;
}

.ac-role .ac-role-cta .elementor-button:hover {
	background: #f2f4fb;
	border-color: var(--ac-navy);
	color: var(--ac-navy);
}

/* Étapes : une seule boîte bordée, colonnes séparées par un filet. */
.ac-steps-row > .elementor-container {
	background: #fff;
	border: 1.5px solid var(--ac-line);
	border-radius: 18px;
	overflow: hidden;
}

.ac-steps-row .elementor-column.ac-step {
	border-right: 1.5px solid var(--ac-line);
	padding: 30px 28px;
}

.ac-steps-row .elementor-column.ac-step:last-child {
	border-right: 0;
}

/* Pourquoi : quatre cartes sur fond navy. */
.ac-whys-row > .elementor-container {
	align-items: stretch;
	gap: 20px;
}

.ac-whys-row .elementor-column.ac-why {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 16px;
	padding: 24px 22px;
}

.ac-whys-row .ac-why h3,
.ac-whys-row .ac-why p {
	color: #fff;
}

.ac-whys-row .ac-why p {
	color: rgba(255, 255, 255, .76);
}

/* Bande partenaire. */
.ac-pb-card > .elementor-container {
	align-items: center;
	background: #fff;
	border: 1.5px solid var(--ac-line);
	border-radius: 18px;
	box-shadow: var(--ac-shadow-sm);
	gap: 38px;
	padding: 34px 38px;
}

.ac-pb-logo img {
	height: 38px;
	max-width: none;
	width: auto;
}

.ac-section--head + .ac-roles-row,
.ac-section--head + .ac-steps-row,
.ac-section--head + .ac-whys-row {
	padding-block: 0 88px;
}

.ac-section--head {
	padding-block-end: 0;
}

@media (max-width: 880px) {
	.ac-steps-row .elementor-column.ac-step {
		border-bottom: 1.5px solid var(--ac-line);
		border-right: 0;
	}

	.ac-steps-row .elementor-column.ac-step:last-child {
		border-bottom: 0;
	}
}

/* =========================================================================
   Correctif mobile — audité à 360 / 375 / 390 px
   ========================================================================= */

/* --- Gouttières latérales -------------------------------------------------
   Les sections sont déclarées avec `gap: no`, ce qui supprime le padding
   qu'Elementor met d'habitude sur les colonnes. Sans lui, le contenu touche
   les deux bords sous 768 px. La gouttière est portée par la section, jamais
   par `.elementor-container`, pour ne pas entrer en conflit avec les cartes
   qui ont leur propre padding interne. */

.ac-scope.elementor-section {
	padding-inline: 24px;
}

/* Le bloc interactif est DANS une section déjà gouttiérée : pas de double. */
.ac-casting {
	padding-inline: 0;
}

/* --- Espacement intitulé / contenu ----------------------------------------
   Chaque bloc est découpé en deux sections Elementor : l'intitulé et le
   contenu. Les deux appliquaient leur propre padding vertical, d'où un vide
   d'une centaine de pixels. Un seul espacement subsiste, porté par
   `.ac-sec-head`. */

.ac-roles-row,
.ac-steps-row,
.ac-whys-row {
	padding-block-start: 0;
}

.ac-sec-head {
	margin-bottom: 36px;
}

/* --- Cibles tactiles ------------------------------------------------------
   44 px minimum sur tout ce qui se touche. Les champs restent à 16 px de
   corps : en dessous, iOS zoome automatiquement à la saisie et casse la
   mise en page. */

.ac-btn,
.ac-role-cta .elementor-button {
	min-height: 44px;
}

.ac-input {
	font-size: 16px;
	min-height: 44px;
}

.ac-radio {
	min-height: 44px;
}

/* --- Logos de marque ------------------------------------------------------
   Les PNG d'origine avaient des marges transparentes très inégales (48 %,
   90 % et 75 % du canevas occupés) : contraindre le canevas donnait trois
   tailles apparentes différentes. Les fichiers sont désormais détourés au
   plus juste, et les hauteurs ci-dessous équilibrent la masse d'encre plutôt
   que la boîte englobante — d'où la valeur plus basse du logotype large.
   Ajustables ici en une ligne après contrôle visuel. */

.ac-wm-row {
	--ac-wm-a4h: 38px;
	--ac-wm-tads: 26px;
	--ac-wm-sol: 38px;
}

.ac-wm--a4h img { max-height: var(--ac-wm-a4h); }
.ac-wm--tads img { max-height: var(--ac-wm-tads); }
.ac-wm--sol img { max-height: var(--ac-wm-sol); }

.ac-wm-text {
	height: var(--ac-wm-a4h);
}

@media (max-width: 768px) {
	.ac-wm-row {
		--ac-wm-a4h: 28px;
		--ac-wm-tads: 19px;
		--ac-wm-sol: 28px;
		gap: 16px 28px;
	}
}

/* --- Ajustements sous 768 px ---------------------------------------------- */

@media (max-width: 768px) {
	.ac-scope.elementor-section {
		padding-inline: 20px;
	}

	.ac-sec-head {
		margin-bottom: 28px;
	}

	/* Le débord de la carte de recherche sur le hero est trop marqué sur un
	   écran étroit : le titre de campagne s'y trouve tronqué. */
	.ac-search-zone {
		margin-top: -56px;
	}

	.ac-search-card {
		padding: 22px 18px 20px;
	}

	.ac-pb-card > .elementor-container {
		gap: 22px;
		padding: 26px 22px;
	}

	.ac-modale {
		max-width: calc(100vw - 24px);
	}

	.ac-form {
		max-height: 88vh;
	}

	.ac-modale__corps,
	.ac-modale__entete,
	.ac-modale__pied {
		padding-inline: 20px;
	}
}

@media (max-width: 560px) {
	/* Sur deux ou trois lignes, la capsule devient disgracieuse : ses extremites
	   arrondies n'ont plus de rapport avec la hauteur du bloc. On passe en bloc
	   centre, rayon modere, padding equilibre sur les quatre cotes. */
	.ac-tag {
		border-radius: 12px;
		display: block;
		letter-spacing: .05em;
		padding: 9px 14px;
	}
}

@media (max-width: 400px) {
	/* À 360 px, le titre de campagne doit tenir sans débordement horizontal. */
	.ac-marquee {
		font-size: clamp(40px, 12vw, 56px);
	}

	.ac-ticket-day,
	.ac-ticket-info {
		padding-inline: 20px;
	}

	.ac-pills {
		gap: 8px;
	}

	.ac-pill {
		font-size: 12px;
		padding: 7px 13px;
	}
}

/* =========================================================================
   Neutralisation des styles hérités
   Deux feuilles extérieures gagnent en spécificité sur nos règles. Elles sont
   neutralisées ici, dans notre périmètre uniquement — on ne touche ni au thème
   ni au Kit Elementor, qui servent le reste du site.
   ========================================================================= */

/* --- Boutons -------------------------------------------------------------
   Le Kit Elementor génère `.elementor-kit-4 button { background-color:
   var(--e-global-color-primary) }`, soit une spécificité (0,1,1) qui l'emporte
   sur `.ac-btn--primaire` en (0,1,0) : le CTA sortait en navy, seule l'ombre
   magenta survivait. On repasse en (0,2,0). */

.ac-scope .ac-btn--primaire,
.ac-casting .ac-btn--primaire {
	background-color: var(--ac-magenta, #e5004b);
	color: #fff;
}

.ac-scope .ac-btn--primaire:hover,
.ac-casting .ac-btn--primaire:hover {
	background-color: var(--ac-magenta-dark, #b80039);
}

.ac-scope .ac-btn--fantome,
.ac-casting .ac-btn--fantome {
	background-color: transparent;
	color: var(--ac-navy);
}

.ac-scope .ac-modale__fermer {
	background-color: rgba(255, 255, 255, .14);
	color: #fff;
}

/* Un libellé long ne doit jamais élargir son conteneur. */
.ac-scope .ac-btn,
.ac-casting .ac-btn {
	max-width: 100%;
	overflow-wrap: break-word;
	white-space: normal;
}

/* --- Titres --------------------------------------------------------------
   Le thème enfant applique à TOUS les h2 : `text-transform: uppercase`,
   `display: inline-block`, et surtout un `h2:after` décoratif placé en
   `right: -160px` sur 140 px de large. Ce pseudo-élément déborde de 300 px à
   droite de chaque titre — c'est lui qui provoquait le défilement horizontal
   sur mobile, et non un dépassement de notre mise en page. */

.ac-scope h2,
.ac-casting h2 {
	display: block;
	text-transform: none;
}

.ac-scope h2::after,
.ac-casting h2::after {
	content: none;
}

/* --- Garde-fou anti-débordement -----------------------------------------
   La cause est traitée au-dessus ; ce clip empêche une future règle héritée
   de rouvrir le même défaut. `clip` et non `hidden` : aucun conteneur de
   défilement n'est créé, les ombres portées restent visibles. */

.ac-scope.elementor-section {
	max-width: 100%;
	overflow-x: clip;
}

/* --- Modale --------------------------------------------------------------
   Bornée à la fenêtre visible, quelle que soit la largeur du document. */

.ac-modale {
	margin: auto;
	max-width: min(620px, calc(100vw - 24px));
	width: calc(100% - 24px);
}

/* =========================================================================
   Hero visuel — retours cliente du 02/09
   La couverture fournie porte deja le titre, l'accroche, la date et les quatre
   logos en couleur. On l'affiche telle quelle plutot que de la reconstituer,
   et on ne redouble aucun de ses elements en HTML.
   ========================================================================= */

/* Le titre reste dans le document pour le referencement et les lecteurs
   d'ecran, meme s'il n'est visible que dans l'image. */
.ac-sr-only {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.ac-hero--photo {
	/* Noir franc, pour se fondre avec le bord de l'image. */
	background: #000;
	padding-block: 0 120px;
}

/* Les decors du hero precedent (faisceau, grain) n'ont plus lieu d'etre
   par-dessus une photographie. */
.ac-hero--photo::before,
.ac-hero--photo::after {
	content: none;
}

.ac-hero-visuel {
	display: block;
	height: auto;
	margin: 0 auto 28px;
	max-width: 100%;
	width: 100%;
}

/* Le billet et les pastilles restent sous l'image, sur le noir. */
.ac-hero--photo .ac-ticket-info {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .18);
}

/* --- Présentation de la journée ------------------------------------------ */

.ac-section--intro {
	background: var(--ac-card);
}

/* La colonne porte `.ac-sec-head`, plafonnee a 640 px et alignee a gauche :
   centrer son conteneur interne ne servait a rien tant que la colonne
   elle-meme restait callee a gauche. Les deux doivent etre traites. */
.ac-section--intro .ac-sec-head {
	margin-inline: auto;
	max-width: 780px;
}

.ac-section--intro .elementor-widget-wrap {
	margin-inline: auto;
	max-width: 780px;
	text-align: center;
}

.ac-presentation h2 {
	font-size: clamp(24px, 3vw, 34px);
}

.ac-presentation .ac-eyebrow--gold {
	color: var(--ac-gold-texte);
}

.ac-section--intro p + p {
	margin-top: 14px;
}

@media (max-width: 768px) {
	.ac-hero--photo {
		padding-block: 0 96px;
	}

	.ac-hero-visuel {
		margin-bottom: 20px;
	}

	/* L'image est deja pleine largeur : la gouttiere ferait une bande noire
	   inutile de chaque cote. */
	.ac-hero--photo.elementor-section {
		padding-inline: 0;
	}

	.ac-hero--photo .ac-ticket,
	.ac-hero--photo .ac-pills {
		margin-inline: 20px;
	}
}

/* --- Logos de marque en couleur, sur le hero noir -------------------------
   Hauteurs reprises des proportions de la couverture fournie par la graphiste,
   mesurees sur son fichier : AD Seniors 41 px, all4home 114, tout a dom 55,
   Solutia 67, pour une composition large de 1640 px. Le rapport entre eux est
   conserve, l'echelle d'ensemble est ramenee a notre largeur. */

.ac-wm-row--couleur {
	--ac-wm-ads: 24px;
	--ac-wm-a4h: 72px;
	--ac-wm-tads: 35px;
	--ac-wm-sol: 42px;

	gap: 20px 44px;
}

.ac-wm-row--couleur .ac-wm {
	align-items: center;
	display: flex;
	height: var(--ac-wm-a4h);
}

.ac-wm-row--couleur .ac-wm--ads img { max-height: var(--ac-wm-ads); }
.ac-wm-row--couleur .ac-wm--a4h img { max-height: var(--ac-wm-a4h); }
.ac-wm-row--couleur .ac-wm--tads img { max-height: var(--ac-wm-tads); }
.ac-wm-row--couleur .ac-wm--sol img { max-height: var(--ac-wm-sol); }

.ac-wm-row--couleur img {
	display: block;
	height: auto;
	opacity: 1;
	width: auto;
}

/* Le logo Meteojob est deja concu pour fond sombre (cyan, jaune, blanc) :
   la pastille blanche qui le portait auparavant n'a plus lieu d'etre. */
.ac-hero--photo .ac-wm-mj {
	background: none;
	padding: 0;
}

.ac-hero--photo .ac-wm-mj img {
	height: 26px;
	width: auto;
}

@media (max-width: 768px) {
	.ac-wm-row--couleur {
		--ac-wm-ads: 18px;
		--ac-wm-a4h: 52px;
		--ac-wm-tads: 25px;
		--ac-wm-sol: 30px;

		gap: 16px 28px;
	}

	.ac-hero--photo .ac-wm-mj img {
		height: 22px;
	}
}

/* --- Présentation de la journée, dans le hero -----------------------------
   Le bloc a rejoint la section noire, entre les pastilles et la bande des
   marques : les couleurs passent en clair sur fond sombre. */

.ac-hero-intro__sur,
.ac-hero-intro__titre,
.ac-hero-intro__texte {
	margin-inline: auto;
	max-width: 820px;
}

.ac-hero-intro__sur {
	margin-top: 44px;
}

.ac-hero--photo .ac-hero-intro__sur .ac-eyebrow--gold {
	/* Sur fond noir, le doré d'origine reprend sa place : la variante
	   assombrie n'était nécessaire que sur blanc. */
	color: var(--ac-gold);
}

/* Elementor colore ses titres via `.elementor-widget-heading
   .elementor-heading-title`, soit une specificite (0,2,0) qui l'emporte sur un
   simple `.ac-hero-intro__titre h2`. On passe en (0,3,0). */
.ac-hero--photo .ac-hero-intro__titre .elementor-heading-title,
.ac-hero--photo .ac-hero-intro__titre h2 {
	color: #fff;
	font-size: clamp(23px, 2.8vw, 32px);
	font-weight: 800;
	letter-spacing: -.01em;
	margin: 10px 0 0;
}

.ac-hero-intro__texte {
	color: rgba(255, 255, 255, .82);
	font-size: 16.5px;
	line-height: 1.6;
	margin-top: 16px;
}

.ac-hero-intro__texte p + p {
	margin-top: 14px;
}

/* La bande des marques suit, avec de l'air. */
.ac-hero--photo .ac-hero-brands {
	border-top: 0;
	margin-top: 40px;
	padding-top: 0;
}

@media (max-width: 768px) {
	.ac-hero-intro__sur {
		margin-top: 32px;
	}

	.ac-hero-intro__sur,
	.ac-hero-intro__titre,
	.ac-hero-intro__texte {
		padding-inline: 20px;
	}

	.ac-hero-intro__texte {
		font-size: 15.5px;
	}

	.ac-hero--photo .ac-hero-brands {
		margin-top: 30px;
	}
}

/* --- Correctif : `hidden` doit primer -------------------------------------
   Une regle `display` posee par nos soins (par exemple `.ac-modalite {
   display: grid }`) l'emporte sur le `[hidden] { display: none }` de la
   feuille du navigateur. Les elements masques par JS restaient donc visibles :
   les deux boutons radio de disponibilite s'affichaient meme quand aucune
   agence ne tenait de portes ouvertes. */

.ac-scope [hidden],
.ac-casting [hidden] {
	display: none !important;
}