/* =========================================================================
   Atopia.studio — page d'accueil « split »
   Chargée uniquement sur la home. Tout est préfixé par .est-accueil pour ne
   pas déborder sur le reste du site.
   ========================================================================= */

.est-accueil {
	/* --- Couleurs de la maquette --- */
	--clair: #f5f4f0;
	--noir: #0e0e0e;
	--noir-2: #111111;
	--jaune: #fed132;
	--gris-texte: #5a5a56;
	--gris-sur-noir: #a8a8a2;
	--trait-clair: #dedcd5;
	--trait-sombre: #2a2a28;

	/* --- Typographie --- */
	--font-titre: "Bricolage Grotesque", system-ui, sans-serif;
	--font-texte: "Instrument Sans", system-ui, sans-serif;

	/* La police du logo est isolée : une seule ligne à changer. */
	--font-logo: var(--font-titre);

	/* --- Rythme --- */
	--gouttiere: clamp(16px, 4vw, 56px);
	--section-y: clamp(56px, 7vw, 104px);
	--largeur: 1280px;

	background: var(--clair);
	color: var(--noir);
	font-family: var(--font-texte);
}

.est-accueil .contenu-principal {
	padding-bottom: 0;
}

.est-accueil .contenant {
	width: min(100% - (2 * var(--gouttiere)), var(--largeur));
	margin-inline: auto;
}

/* Les boutons de ce site sont carrés, sans exception. */
.est-accueil .bouton,
.est-accueil .bouton--jaune,
.est-accueil .bouton--noir,
.est-accueil .bouton--ligne {
	display: inline-block;
	border-radius: 0;
	padding: 14px 28px;
	font-family: var(--font-texte);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
	min-height: 44px;
}

.est-accueil .bouton--jaune {
	background: var(--jaune);
	color: var(--noir);
	border-color: var(--jaune);
}

.est-accueil .bouton--jaune:hover {
	background: transparent;
	color: currentColor;
}

.est-accueil .bouton--noir {
	background: var(--noir);
	color: var(--clair);
	border-color: var(--noir);
}

.est-accueil .bouton--noir:hover {
	background: transparent;
	color: var(--noir);
}

.est-accueil .bouton--ligne {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

/* --- 1. La marque dans l'en-tête ----------------------------------------- */

/* Sur l'accueil, le nom du site est un <h1> : il ne doit pas hériter des
   dimensions d'un titre de page. */
.est-accueil h1.entete__marque {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: normal;
}

/* --- 2. Le split --------------------------------------------------------- */

.split {
	margin-top: clamp(24px, 3vw, 44px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	margin-inline: var(--gouttiere);
	margin-bottom: var(--section-y);
}

.split__zone {
	position: relative;
	padding: clamp(24px, 3vw, 44px);
	border-bottom: 10px solid transparent;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: border-color 180ms ease;
}

/* L'atténuation porte sur le contenu, pas sur la zone : le fond noir du côté
   jeux doit rester franc même quand l'onglet est fermé. */
.split__zone > * {
	opacity: 0.5;
	transition: opacity 180ms ease;
}

.split__zone.est-active > * {
	opacity: 1;
}

.split__zone.est-active {
	border-bottom-color: var(--jaune);
}

.split__zone--entreprises {
	background: #ffffff;
	color: var(--noir);
}

.split__zone--jeux {
	background: var(--noir-2);
	color: var(--clair);
}

.split__badge {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.split__badge-ouvert {
	display: none;
	background: var(--jaune);
	color: var(--noir);
	padding: 4px 10px;
}

.split__badge-ferme {
	display: inline-block;
	opacity: 0.6;
	padding: 4px 0;
}

.split__zone.est-active .split__badge-ouvert {
	display: inline-block;
}

.split__zone.est-active .split__badge-ferme {
	display: none;
}

.split__titre {
	margin: 0;
}

.split__bouton {
	font-family: var(--font-titre);
	font-weight: 800;
	font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
	letter-spacing: -0.03em;
	line-height: 1.05;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	color: inherit;
	text-align: left;
	cursor: pointer;
	/* Le bouton couvre la zone : le clic passe partout sauf sur les liens. */
}

.split__accroche {
	font-family: var(--font-titre);
	font-weight: 700;
	font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
	letter-spacing: -0.02em;
	margin: 0;
}

.split__texte {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	max-width: 46ch;
}

.split__zone--entreprises .split__texte {
	color: var(--gris-texte);
}

.split__zone--jeux .split__texte {
	color: var(--gris-sur-noir);
}

.split__liste {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: grid;
	gap: 1px;
	background: var(--trait-clair);
	border-top: 1px solid var(--trait-clair);
	border-bottom: 1px solid var(--trait-clair);
}

.split__liste li {
	background: #ffffff;
	padding: 10px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: baseline;
}

.split__liste-titre {
	font-weight: 700;
	font-size: 0.9375rem;
}

.split__liste-mots {
	font-size: 0.8125rem;
	color: var(--gris-texte);
}

.split__vignettes {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.split__vignette-image {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #1c1c1a;
}

.split__vignette-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Les key arts sont verticaux et portent leur titre en haut : on cadre par
	   le haut plutôt qu'au centre. */
	object-position: top center;
	display: block;
}

.split__vignette-image--centre img {
	object-position: center center;
}

.split__vignette-image--bas img {
	object-position: bottom right;
}

.split__vignette-titre {
	display: block;
	font-weight: 700;
	font-size: 0.875rem;
	margin-top: 8px;
}

.split__vignette-meta {
	display: block;
	font-size: 0.75rem;
	color: var(--gris-sur-noir);
}

.split__pied {
	margin: auto 0 0;
	padding-top: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
}

.split__indice {
	font-size: 0.8125rem;
	opacity: 0.7;
}

/* --- 3. Blocs de contenu ------------------------------------------------- */

.bloc {
	padding: var(--section-y) 0;
}

.bloc--intro {
	padding-top: 0;
}

.bloc--sombre {
	background: var(--noir-2);
	color: var(--clair);
}

.bloc--jaune {
	background: var(--jaune);
	color: var(--noir-2);
}

.bloc__titre {
	font-family: var(--font-titre);
	font-weight: 800;
	font-size: clamp(1.75rem, 1.3rem + 2.2vw, 3.25rem);
	letter-spacing: -0.035em;
	line-height: 1.05;
	margin: 0 0 20px;
	max-width: 22ch;
}

.bloc__texte {
	max-width: 62ch;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
	line-height: 1.65;
	margin: 0;
	color: var(--gris-texte);
}

.bloc--sombre .bloc__texte,
.bloc--jaune .bloc__texte {
	color: inherit;
	opacity: 0.86;
}

/* --- 4. Expertises ------------------------------------------------------- */

.expertises {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1px;
	background: var(--trait-clair);
	border: 1px solid var(--trait-clair);
}

.expertise {
	background: var(--clair);
	padding: clamp(20px, 2.4vw, 32px);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.expertise__num {
	font-family: var(--font-titre);
	font-weight: 800;
	font-size: 0.875rem;
	color: var(--jaune);
	margin: 0;
	letter-spacing: 0.06em;
}

.expertise__titre {
	font-family: var(--font-titre);
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: -0.02em;
	margin: 0;
}

.expertise__mots {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.expertise__mots li {
	font-size: 0.75rem;
	border: 1px solid var(--trait-clair);
	padding: 3px 8px;
	color: var(--gris-texte);
}

.expertise__texte {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--gris-texte);
}

.expertise__cta {
	margin-top: auto;
	padding-top: 8px;
	font-weight: 700;
	font-size: 0.875rem;
	text-decoration: none;
	border-bottom: 2px solid var(--jaune);
	align-self: flex-start;
	color: inherit;
}

/* --- 5. Pour qui --------------------------------------------------------- */

.publics {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.publics li {
	border: 1px solid var(--trait-sombre);
	padding: 10px 16px;
	font-size: 0.9375rem;
}

/* --- 6. Réalisations ----------------------------------------------------- */

.realisations {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(20px, 2.4vw, 32px);
}

.realisation__lien {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--trait-clair);
	background: #ffffff;
	height: 100%;
	transition: border-color 150ms ease;
}

.realisation__lien:hover {
	border-color: var(--jaune);
}

.realisation__visuel {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--trait-clair);
}

.realisation__visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}

.realisation__corps {
	display: block;
	padding: clamp(16px, 2vw, 24px);
}

.realisation__client {
	display: block;
	font-family: var(--font-titre);
	font-weight: 800;
	font-size: 1.125rem;
	letter-spacing: -0.02em;
}

.realisation__meta {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--jaune);
	margin: 4px 0 8px;
	font-weight: 700;
}

.realisation__texte {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--gris-texte);
}

/* --- 7. Raisons et méthode ---------------------------------------------- */

.raisons,
.methode {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(20px, 2.4vw, 32px);
}

.raison__num,
.etape__num {
	font-family: var(--font-titre);
	font-weight: 800;
	font-size: 2.25rem;
	line-height: 1;
	color: var(--jaune);
	margin: 0 0 8px;
}

.raison__titre,
.etape__titre {
	font-family: var(--font-titre);
	font-weight: 800;
	font-size: 1.125rem;
	letter-spacing: -0.02em;
	margin: 0 0 6px;
}

.raison__texte,
.etape__texte {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--gris-texte);
}

/* --- 8. FAQ -------------------------------------------------------------- */

.faq {
	margin-top: 28px;
	border-top: 1px solid var(--trait-clair);
	max-width: 78ch;
}

.faq__item {
	border-bottom: 1px solid var(--trait-clair);
}

.faq__q {
	cursor: pointer;
	padding: 18px 0;
	font-family: var(--font-titre);
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: -0.015em;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: center;
	min-height: 44px;
}

.faq__q::-webkit-details-marker {
	display: none;
}

.faq__q::after {
	content: "+";
	font-size: 1.5rem;
	color: var(--jaune);
	line-height: 1;
}

.faq__item[open] .faq__q::after {
	content: "–";
}

.faq__a {
	margin: 0;
	padding: 0 0 20px;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--gris-texte);
	max-width: 68ch;
}

/* --- 9. Encart consultation ---------------------------------------------- */

.encart {
	background: var(--jaune);
	color: var(--noir-2);
	padding: clamp(28px, 4vw, 56px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.encart__titre {
	font-family: var(--font-titre);
	font-weight: 800;
	font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2.25rem);
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0;
	max-width: 24ch;
}

.encart__texte {
	margin: 0;
	max-width: 56ch;
	font-size: 1rem;
	line-height: 1.6;
}

/* --- 10. Jeu à la une ---------------------------------------------------- */

.une {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: clamp(20px, 3vw, 48px);
	align-items: center;
}

.une__visuel img {
	width: 100%;
	height: auto;
	display: block;
}

.une__meta {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	color: var(--jaune);
	margin: 0 0 8px;
}

.une__titre {
	font-family: var(--font-titre);
	font-weight: 800;
	font-size: clamp(1.75rem, 1.3rem + 2vw, 3rem);
	letter-spacing: -0.035em;
	line-height: 1.05;
	margin: 0 0 14px;
}

.une__pitch {
	margin: 0 0 20px;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--gris-texte);
	max-width: 52ch;
}

.une__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

/* --- 11. Catalogue de jeux ----------------------------------------------- */

.jeux {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: clamp(20px, 2.4vw, 32px);
}

.jeu {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border: 1px solid var(--trait-clair);
	background: #ffffff;
	padding: clamp(16px, 2vw, 24px);
}

.jeu--avenir {
	border-style: dashed;
	background: transparent;
	opacity: 0.75;
}

.jeu__visuel {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--noir-2);
	margin: calc(-1 * clamp(16px, 2vw, 24px)) calc(-1 * clamp(16px, 2vw, 24px)) 8px;
}

.jeu__visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}

/* Visuel dont l'information utile est en bas à droite (le logo de la Région
   Grand Est sur It Grows) : un cadrage 4/3 dans une image 16/9 rogne les côtés,
   donc on ancre le coin bas-droit pour que le logo reste entier. */
.jeu__visuel--bas img {
	object-position: bottom right;
}

/* Visuel dont le sujet est au milieu (l'entité de Grow!, le héros d'Ashes) :
   cadrer en haut ne montrerait que l'interface ou le titre. */
.jeu__visuel--centre img {
	object-position: center center;
}

.jeu--avenir .jeu__visuel {
	background: repeating-linear-gradient(45deg, #ededea, #ededea 10px, #e4e4e0 10px, #e4e4e0 20px);
}

.jeu__titre {
	font-family: var(--font-titre);
	font-weight: 800;
	font-size: 1.125rem;
	letter-spacing: -0.02em;
	margin: 0;
}

.jeu__meta {
	margin: 0;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--gris-texte);
	font-weight: 700;
}

.jeu__texte {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--gris-texte);
	flex: 1;
}

.jeu__liens {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.jeu__liens a {
	font-weight: 700;
	font-size: 0.875rem;
	text-decoration: none;
	border-bottom: 2px solid var(--jaune);
	color: inherit;
	padding-bottom: 2px;
}

/* --- 11 bis. Soutien public ---------------------------------------------- */

.jeu__soutien {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--noir-2);
	background: var(--jaune);
	padding: 8px 10px;
	font-weight: 600;
}

.soutien {
	border: 2px solid var(--noir-2);
	padding: clamp(24px, 3vw, 40px);
	display: flex;
	gap: clamp(20px, 3vw, 40px);
	align-items: center;
	flex-wrap: wrap;
}

.soutien__titre {
	font-family: var(--font-titre);
	font-weight: 800;
	font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
	letter-spacing: -0.025em;
	margin: 0 0 10px;
}

.soutien__texte {
	margin: 0 0 12px;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--gris-texte);
	max-width: 70ch;
}

.soutien__lien {
	font-weight: 700;
	font-size: 0.875rem;
	text-decoration: none;
	border-bottom: 2px solid var(--jaune);
	color: inherit;
	display: inline-block;
	min-height: 28px;
}

/* --- 12. ADN ------------------------------------------------------------- */

.adn {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(20px, 2.4vw, 32px);
}

.adn__titre {
	font-family: var(--font-titre);
	font-weight: 800;
	font-size: 1.125rem;
	letter-spacing: -0.02em;
	margin: 0 0 6px;
}

.adn__texte {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* --- 13. Journal de développement ---------------------------------------- */

.actus {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	border-top: 1px solid var(--trait-clair);
}

.actu {
	border-bottom: 1px solid var(--trait-clair);
	padding: 18px 0;
	display: grid;
	grid-template-columns: 140px 1fr auto;
	gap: 16px;
	align-items: baseline;
}

.actu__date {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--gris-texte);
}

.actu__titre {
	margin: 0;
	font-family: var(--font-titre);
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: -0.015em;
}

.actu__tag {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--jaune);
}

/* --- 14. Communauté ------------------------------------------------------ */

.communaute {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1px;
	background: var(--trait-clair);
	border: 1px solid var(--trait-clair);
}

.communaute__item {
	background: var(--clair);
	padding: clamp(20px, 2.4vw, 32px);
}

.communaute__titre {
	font-family: var(--font-titre);
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: -0.02em;
	margin: 0 0 6px;
}

.communaute__texte {
	margin: 0 0 10px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--gris-texte);
}

.communaute__lien {
	font-weight: 700;
	font-size: 0.875rem;
	text-decoration: none;
	border-bottom: 2px solid var(--jaune);
	color: inherit;
}

/* --- 15. Contact --------------------------------------------------------- */

.contact {
	background: var(--noir-2);
	color: var(--clair);
	padding: var(--section-y) 0;
}

.contact__interieur {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: clamp(24px, 3vw, 48px);
	align-items: start;
}

.contact__titre {
	font-family: var(--font-titre);
	font-weight: 800;
	font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem);
	letter-spacing: -0.035em;
	line-height: 1.05;
	margin: 0 0 10px;
}

.contact__texte {
	margin: 0;
	color: var(--gris-sur-noir);
	font-size: 1rem;
}

.contact__coordonnees,
.contact__reseaux {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 0.9375rem;
}

.contact__coordonnees a,
.contact__reseaux a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--trait-sombre);
	padding-bottom: 2px;
	display: inline-block;
	min-height: 24px;
}

.contact__coordonnees a:hover,
.contact__reseaux a:hover {
	border-bottom-color: var(--jaune);
	color: var(--jaune);
}

/* --- 16. Reprise du gabarit commun --------------------------------------- */

.est-accueil .entete {
	background: var(--clair);
	border-bottom-color: var(--trait-clair);
}

.est-accueil .marque,
.est-accueil .nav-principale__liste {
	font-family: var(--font-texte);
}

.est-accueil .marque {
	font-family: var(--font-logo);
}

.est-accueil .pied {
	background: var(--noir);
	color: var(--clair);
	border-top-color: var(--trait-sombre);
}

.est-accueil .pied__mentions,
.est-accueil .pied__liste a {
	color: var(--gris-sur-noir);
}

/* Cible tactile confortable pour les liens du pied de page. */
.est-accueil .pied__liste a {
	display: inline-block;
	padding: 8px 0;
	min-height: 32px;
}

/* Le burger hérite d'un arrondi du CSS commun : ici, tout est carré. */
.est-accueil .burger {
	border-radius: 0;
}

/* --- 17. Mobile ---------------------------------------------------------- */

@media (max-width: 900px) {
	.split {
		grid-template-columns: 1fr;
	}

	.split__zone {
		border-bottom-width: 8px;
	}

	.une {
		grid-template-columns: 1fr;
	}

	.contact__interieur {
		grid-template-columns: 1fr;
	}

	.actu {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

@media (max-width: 520px) {
	.split__vignettes {
		grid-template-columns: 1fr 1fr;
	}

	.split__vignettes li:last-child {
		display: none;
	}

	.split__pied {
		flex-direction: column;
		align-items: stretch;
	}

	.split__pied .bouton {
		text-align: center;
	}
}

/* --- 18. Mouvement réduit ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.est-accueil * {
		transition-duration: 0.01ms !important;
	}
}