/**
 * Accueil v2 — proposition issue de l'audit UX du 2026-08-24.
 *
 * Feuille SÉPARÉE, chargée uniquement par la page « accueil-v2 » : la page
 * d'accueil de production et son CSS ne sont pas concernés.
 *
 * PRINCIPE : ne rien réinventer. Les sections réutilisent les composants
 * signature de la charte — le dégradé du hero, la coquille de section
 * `.ebrioo-tri` avec ses coins teintés, son eyebrow en dégradé, sa typographie —
 * et cette feuille ne décrit QUE ce qui n'existait pas : le routeur de besoin,
 * les cartes du Why, les emplacements de témoignages, la FAQ, les deux blocs à
 * formulaire. Les cartes copient les valeurs de `.ebrioo-uni` (rayon 20px,
 * bordure, ombre) pour rester dans la même famille visuelle.
 */

/* ── Hero : même dégradé et même typographie, sans le carrousel ─────────── */
.ebrioo-hero--statique .ebrioo-hero__slide {
	position: static; inset: auto; opacity: 1; visibility: visible;
	min-height: 0; padding: clamp(3.5rem, 6vw, 4.5rem) 1.5rem clamp(2.5rem, 4vw, 3.5rem);
}
.ebrioo-hero--statique .ebrioo-hero__track { min-height: 0; }
.ebrioo-hero__eyebrow {
	margin: 0 0 clamp(1.4rem, 2.5vw, 2rem);
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: 700; font-size: .82rem; letter-spacing: 3px; text-transform: uppercase;
	color: rgba(255,255,255,.82);
}

/* ── Routeur de besoin (nouveau) ────────────────────────────────────────── */
.ebrioo-v2routeur {
	/* Le routeur est une seconde offre de lecture, pas la suite du hero : il lui
	   faut son propre espace pour se détacher du sous-titre. */
	margin: clamp(2.6rem, 5vw, 3.6rem) auto 0; max-width: 900px;
}
.ebrioo-v2routeur__intro {
	/* C'est l'invitation qui fait comprendre le routeur : elle doit se voir
	   autant que les boutons, sans concurrencer le H1. */
	margin: 0 0 clamp(1.4rem, 2.5vw, 2rem);
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: 700; font-size: clamp(1.2rem, 2.2vw, 1.55rem); line-height: 1.25;
	color: #fff;
}
.ebrioo-v2routeur__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.ebrioo-v2routeur__link {
	display: flex; flex-direction: column; gap: .3rem; height: 100%;
	position: relative; overflow: hidden;
	padding: 1.2rem 1.3rem; border-radius: 20px; text-align: left; text-decoration: none;
	background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.34);
	color: #fff; transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.ebrioo-v2routeur__link:hover,
.ebrioo-v2routeur__link:focus-visible {
	background: #fff; border-color: #fff; color: #201a35; transform: translateY(-3px);
	box-shadow: 0 10px 30px rgba(50,53,50,.18);
}
.ebrioo-v2routeur__besoin {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: 700; font-size: 1.05rem;
}
.ebrioo-v2routeur__detail { font-size: .87rem; opacity: .88; }
.ebrioo-v2routeur__fleche { margin-top: .3rem; font-size: 1.05rem; color: var(--eb-turquoise, #46B5AA); }
.ebrioo-v2routeur__link:hover .ebrioo-v2routeur__fleche { color: var(--eb-magenta, #E5239C); }
.ebrioo-v2routeur__link.is-bientot { border-style: dashed; }

/* ── Le picto de l'univers, en filigrane dans son encadre ────────────────
   Les PNG ne servent que de MASQUE : la couleur vient du CSS. Sur le hero
   sombre le filigrane est un voile blanc ; au survol, la carte devient
   blanche et le picto prend la couleur de son univers. Un seul fichier par
   univers couvre donc les deux etats, sans filtre et sans double image.
   Encapsule dans @supports : sans masque CSS, mieux vaut aucun filigrane
   qu'un carre de couleur pleine. */
@supports ((mask-image: url("#")) or (-webkit-mask-image: url("#"))) {
	.ebrioo-v2routeur__link::after {
		content: ""; position: absolute; z-index: 0;
		right: -1.1rem; bottom: -1.4rem;
		width: clamp(6rem, 9vw, 8.2rem); aspect-ratio: 1;
		background-color: #fff; opacity: .13;
		-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
		-webkit-mask-position: center; mask-position: center;
		-webkit-mask-size: contain; mask-size: contain;
		transition: opacity .28s ease, background-color .28s ease, transform .28s ease;
		pointer-events: none;
	}
	.ebrioo-v2routeur__link.is-talentio::after {
		-webkit-mask-image: url("../images/pictos/picto-talentio.png");
		mask-image: url("../images/pictos/picto-talentio.png");
	}
	.ebrioo-v2routeur__link.is-perform::after {
		-webkit-mask-image: url("../images/pictos/picto-perform.png");
		mask-image: url("../images/pictos/picto-perform.png");
	}
	.ebrioo-v2routeur__link.is-digit::after {
		-webkit-mask-image: url("../images/pictos/picto-digit.png");
		mask-image: url("../images/pictos/picto-digit.png");
	}
	/* Au survol : la carte passe au blanc, le picto prend sa couleur d'univers
	   et se rapproche legerement. C'est la seule couleur du mouvement. */
	.ebrioo-v2routeur__link:hover::after,
	.ebrioo-v2routeur__link:focus-visible::after { opacity: .16; transform: translate(-.25rem, -.35rem); }
	.ebrioo-v2routeur__link.is-talentio:hover::after,
	.ebrioo-v2routeur__link.is-talentio:focus-visible::after { background-color: var(--eb-violet, #501E96); }
	.ebrioo-v2routeur__link.is-perform:hover::after,
	.ebrioo-v2routeur__link.is-perform:focus-visible::after { background-color: var(--eb-turquoise, #46B5AA); opacity: .22; }
	.ebrioo-v2routeur__link.is-digit:hover::after,
	.ebrioo-v2routeur__link.is-digit:focus-visible::after { background-color: #2E6EEF; opacity: .18; }
	/* Le texte repasse devant : les spans ne sont pas positionnes par defaut,
	   un ::after positionne les recouvrirait. */
	.ebrioo-v2routeur__besoin,
	.ebrioo-v2routeur__detail,
	.ebrioo-v2routeur__fleche { position: relative; z-index: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.ebrioo-v2routeur__link::after { transition: none; }
	.ebrioo-v2routeur__link:hover::after { transform: none; }
}

/* ── Why unifié : cartes de la même famille que .ebrioo-uni ─────────────── */
.ebrioo-v2why__grid {
	list-style: none; margin: 3rem 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; text-align: left;
}
.ebrioo-v2why__item {
	padding: 1.85rem 1.6rem; border-radius: 20px; background: #ffffff;
	border: 1px solid var(--eb-gris-clair, #C3C8CC);
	box-shadow: 0 10px 30px rgba(50,53,50,.06);
}
.ebrioo-v2why__cent {
	display: block;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 1.5rem; font-weight: 700;
	background: linear-gradient(90deg, #7A2DA6, #2AA79E, #2E6EEF);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.ebrioo-v2why__label { margin: .35rem 0 .55rem; font-size: 1.02rem; color: #201a35; }
.ebrioo-v2why__desc { margin: 0; font-size: .93rem; line-height: 1.55; color: #55585c; }
.ebrioo-v2why__valeurs { max-width: 680px; margin: 2.5rem auto 0; color: #55585c; }
.ebrioo-v2why__valeurs strong { color: #201a35; }

/* ── Capture Perform : fond clair de la charte, accent turquoise ────────── */
.ebrioo-v2perform { padding: clamp(3rem, 6vw, 4.5rem) 1.5rem; background: var(--eb-gris-tres-clair, #F9F9FC); }
.ebrioo-v2perform__inner {
	/* Pleine largeur, un seul flux centré : le bloc n'a plus de colonne
	   formulaire — il renvoie au formulaire unique du bas de page. */
	max-width: 820px; margin: 0 auto; text-align: center;
}
.ebrioo-v2perform__badge {
	display: inline-block; margin: 0 0 1rem; padding: .32rem .85rem; border-radius: 999px;
	background: var(--eb-turquoise, #46B5AA); color: #fff;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: .76rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 700;
}
.ebrioo-v2perform__title {
	margin: 0 0 .85rem; color: #201a35;
	font-family: var(--wp--preset--font-family--heading, inherit); font-weight: 700;
	font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.12; letter-spacing: -.5px;
}
.ebrioo-v2perform__lead { margin: 0 auto 1.6rem; max-width: 68ch; font-size: 1.05rem; line-height: 1.6; color: #55585c; }
.ebrioo-v2perform__action { margin: 0 0 1.2rem; }
.ebrioo-v2perform__promesse { margin: 0; font-size: .95rem; color: var(--eb-violet, #501E96); font-weight: 700; }

/* ── Preuves : chiffres en dégradé de marque, témoignages en attente ────── */
.ebrioo-v2preuves__chiffres {
	list-style: none; margin: 3rem 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem;
}
.ebrioo-v2preuves__chiffre {
	padding: 1.6rem 1.2rem; border-radius: 20px; background: #fff;
	border: 1px solid var(--eb-gris-clair, #C3C8CC); box-shadow: 0 10px 30px rgba(50,53,50,.06);
}
.ebrioo-v2preuves__valeur {
	display: block;
	font-family: var(--wp--preset--font-family--heading, inherit); font-weight: 700; font-size: 2rem;
	background: linear-gradient(90deg, #7A2DA6, #2AA79E, #2E6EEF);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.ebrioo-v2preuves__legende { font-size: .92rem; color: #55585c; }
/* Le nombre de cartes varie avec le nombre d'accords obtenus : la grille
   s'adapte pour rester centree, sans colonne vide. */
.ebrioo-v2preuves__temoins {
	display: grid; gap: 1.4rem; margin: 2.8rem auto 0;
	grid-template-columns: repeat(3, 1fr);
}
.ebrioo-v2preuves__temoins[data-cartes="1"] { grid-template-columns: minmax(0, 620px); max-width: 620px; }
.ebrioo-v2preuves__temoins[data-cartes="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
.ebrioo-v2preuves__temoin {
	margin: 0; padding: 2.2rem 1.8rem 1.7rem; border-radius: 20px; text-align: left;
	background: #fff; border: 1px solid var(--eb-gris-clair, #C3C8CC);
	box-shadow: 0 10px 30px rgba(50,53,50,.06);
	display: flex; flex-direction: column; position: relative;
}
/* Le guillemet ouvrant, en filigrane : il signale la citation sans l'alourdir. */
.ebrioo-v2preuves__temoin::before {
	content: "\201C"; position: absolute; top: .3rem; left: 1.4rem;
	font-family: Georgia, "Times New Roman", serif; font-size: 4.2rem; line-height: 1;
	color: var(--eb-turquoise, #46B5AA); opacity: .26; pointer-events: none;
}
.ebrioo-v2preuves__quote { margin: 0; padding: 0; border: 0; }
.ebrioo-v2preuves__verbatim {
	margin: 0; position: relative; color: #323532;
	font-size: 1.02rem; line-height: 1.65;
}
.ebrioo-v2preuves__chiffrecle {
	margin: 1.2rem 0 0; align-self: flex-start;
	padding: .3rem .75rem; border-radius: 999px;
	background: rgba(70,181,170,.14); color: #1f6f68;
	font-size: .82rem; font-weight: 700;
}
/* margin-top auto : la signature reste collee en bas, donc les cartes
   s'alignent meme quand un verbatim fait 58 caracteres et l'autre 228. */
.ebrioo-v2preuves__signature {
	margin: auto 0 0; padding: 1.1rem 0 0;
	border-top: 1px solid var(--eb-gris-clair, #C3C8CC);
}
.ebrioo-v2preuves__auteur { display: block; font-size: .92rem; font-weight: 700; color: #201a35; }
.ebrioo-v2preuves__entreprise { display: block; margin-top: .1rem; font-size: .9rem; color: var(--eb-violet, #501E96); font-weight: 700; }
.ebrioo-v2preuves__contexte { display: block; margin-top: .45rem; font-size: .82rem; line-height: 1.5; color: #6b6e72; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.ebrioo-v2faq { background: var(--eb-gris-tres-clair, #F9F9FC); }
.ebrioo-v2faq .ebrioo-tri__inner { max-width: 820px; }
.ebrioo-v2faq__list { margin-top: 2.5rem; text-align: left; }
.ebrioo-v2faq__item {
	background: #fff; border: 1px solid var(--eb-gris-clair, #C3C8CC); border-radius: 16px;
	margin-bottom: .85rem; padding: 1.05rem 1.3rem;
	box-shadow: 0 10px 30px rgba(50,53,50,.04);
}
.ebrioo-v2faq__question {
	cursor: pointer; color: #201a35;
	font-family: var(--wp--preset--font-family--heading, inherit); font-weight: 700;
}
.ebrioo-v2faq__item[open] .ebrioo-v2faq__question { color: var(--eb-magenta, #E5239C); }
.ebrioo-v2faq__reponse { padding-top: .75rem; line-height: 1.6; color: #55585c; }

/* ── CTA final : dégradé violet de la charte ────────────────────────────── */
.ebrioo-v2cta {
	padding: clamp(3.5rem, 6vw, 5rem) 1.5rem;
	background: linear-gradient(180deg, #501E96 5%, #A31770 100%);
	color: #fff;
}
.ebrioo-v2cta__inner {
	max-width: 1160px; margin: 0 auto;
	display: grid; grid-template-columns: 1fr 1.1fr; gap: 2.8rem; align-items: start;
}
.ebrioo-v2cta__title {
	margin: 0 0 .9rem; color: #fff;
	font-family: var(--wp--preset--font-family--heading, inherit); font-weight: 700;
	font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.1; letter-spacing: -.5px;
}
.ebrioo-v2cta__lead { margin: 0 0 1.3rem; font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,.92); }
.ebrioo-v2cta__rassure { margin: 0; padding-left: 1.1rem; line-height: 1.9; color: rgba(255,255,255,.92); }
.ebrioo-v2cta__form { background: #fff; border-radius: 20px; padding: 1.85rem; color: #323532; }

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
	.ebrioo-v2routeur__list,
	.ebrioo-v2why__grid,
	.ebrioo-v2preuves__chiffres,
	.ebrioo-v2preuves__temoins,
	.ebrioo-v2perform__inner,
	.ebrioo-v2cta__inner { grid-template-columns: 1fr; }
}
@media (min-width: 861px) and (max-width: 1100px) {
	.ebrioo-v2why__grid,
	.ebrioo-v2preuves__chiffres { grid-template-columns: repeat(2, 1fr); }
}