/* Vitrine du hub (drooft.com). Même enveloppe @media que les feuilles de
 * game_hosting et drooft_commons : à garder synchronisée avec la balise
 * <link media=...> de templates/base.html (seuil 1100/1101 px). */
@media screen and (min-width: 1101px) {
	.hub-hero {
		text-align: center;
		margin: 40px auto 36px;
		max-width: 720px;
	}
	.hub-hero h1 {
		font-size: 3rem;
		margin-bottom: 12px;
	}
	.hub-tagline {
		font-size: 1.2rem;
		line-height: 1.5;
		opacity: 0.9;
	}
	.hub-apps {
		/* Cartes centrées : une seule app ne reste pas collée à gauche. */
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 22px;
		margin-bottom: 60px;
	}
	.hub-app-card {
		width: 320px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		background: #29343f;
		color: #eaddc0;
		border-radius: 12px;
		padding: 22px 22px 18px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		text-decoration: none;
		transition: transform 0.15s ease, box-shadow 0.15s ease;
	}
	.hub-app-card:hover,
	.hub-app-card:focus-visible {
		color: #eaddc0;
		transform: translateY(-3px);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
	}
	.hub-app-icon {
		font-size: 2.2rem;
		color: var(--color--marron);
		line-height: 1;
	}
	.hub-app-name {
		font-size: 1.35rem;
		font-weight: 700;
		margin: 14px 0 8px;
	}
	.hub-app-description {
		font-size: 1rem;
		line-height: 1.5;
		flex-grow: 1;
		margin-bottom: 16px;
	}
	.hub-app-open {
		font-weight: 600;
		color: var(--color--marron);
	}
	.hub-apps-empty {
		text-align: center;
	}

	/* --- Pages légales (repris de game_hosting, qui les servait avant) --- */
	.legal-v2-wrap {
		max-width: 900px;
		margin: 0 auto 40px;
		text-align: left;
	}

	.legal-v2-wrap h1 {
		text-align: center;
	}

	.legal-v2-scope {
		text-align: center;
		font-size: 0.88rem;
		color: rgba(234, 221, 192, 0.6);
	}

	.profil-v2-card {
		background: #29343f;
		color: #eaddc0;
		border-radius: 12px;
		padding: 16px 18px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		margin-top: 18px;
	}

	.profil-v2-card-header {
		font-weight: 700;
		color: #eaddc0;
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 12px;
	}

	.legal-v2-card {
		margin: 20px auto 0;
		color: #eaddc0;
	}

	.legal-v2-card p {
		margin-bottom: 12px;
		line-height: 1.55;
	}

	.legal-v2-card ul {
		margin: 0 0 12px;
	}

	.legal-v2-subheading {
		font-weight: 700;
		color: #eaddc0;
		margin-top: 20px !important;
		margin-bottom: 6px !important;
	}

	.legal-v2-card .profil-v2-card-header ~ .legal-v2-subheading:first-of-type {
		margin-top: 4px !important;
	}

	.privacy-v2-card .legal-v2-subheading,
	.mentions-v2-card .legal-v2-subheading {
		margin-top: 32px !important;
	}

	.legal-v2-link {
		color: #eaddc0;
		font-weight: 600;
		text-decoration: underline;
	}

	.legal-v2-link:hover {
		color: var(--color--marron);
		text-decoration: underline;
	}

	/* --- Formulaire de contact --- */
	.contact-wrap {
		max-width: 720px;
	}

	.contact-form {
		display: flex;
		flex-direction: column;
		padding: 22px;
		margin-top: 20px;
	}

	.contact-form label {
		margin: 14px 0 6px;
		font-size: 0.85rem;
		font-weight: 600;
		color: rgba(234, 221, 192, 0.75);
	}

	.contact-form label:first-of-type {
		margin-top: 0;
	}

	.contact-form input[type="email"],
	.contact-form input[type="text"],
	.contact-form textarea {
		width: 100%;
		box-sizing: border-box;
		padding: 10px 14px;
		border-radius: 10px;
		border: 1px solid rgba(234, 221, 192, 0.18);
		background: #1f272f;
		color: #eaddc0;
		font-size: 0.95rem;
		font-family: inherit;
		transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	}

	.contact-form textarea {
		resize: vertical;
		min-height: 160px;
	}

	.contact-form input::placeholder,
	.contact-form textarea::placeholder {
		color: rgba(234, 221, 192, 0.35);
	}

	.contact-form input:focus,
	.contact-form textarea:focus {
		outline: none;
		border-color: var(--color--marron);
		box-shadow: 0 0 0 3px rgba(230, 103, 0, 0.2);
	}

	.contact-form input:-webkit-autofill,
	.contact-form input:-webkit-autofill:hover,
	.contact-form input:-webkit-autofill:focus {
		-webkit-text-fill-color: #eaddc0;
		-webkit-box-shadow: 0 0 0 1000px #1f272f inset;
		transition: background-color 9999s ease-in-out 0s;
	}

	.contact-error {
		margin: 0 0 6px;
		font-size: 0.82rem;
		color: #ff8a7a;
	}

	.contact-actions {
		display: flex;
		justify-content: flex-end;
		margin-top: 18px;
	}

	.contact-btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 10px 22px;
		border: none;
		border-radius: 10px;
		font-size: 0.9rem;
		font-weight: 600;
		cursor: pointer;
		background: var(--color--anthracite);
		color: var(--color--beige);
		transition: background-color 0.15s ease-in-out;
	}

	.contact-btn:hover {
		background: var(--color--anthracite-v2);
	}

	/* Le padding-right global des <i> décalerait l'icône. */
	.contact-btn i {
		padding: 0;
	}

	/* --- Liste des cookies (page gestion des cookies) --- */
	.cookie-v2-list {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin: 14px 0 18px;
	}

	.cookie-v2-row {
		display: flex;
		align-items: baseline;
		gap: 14px;
		padding: 10px 14px;
		border-radius: 10px;
		background: #1f272f;
		border: 1px solid rgba(234, 221, 192, 0.1);
	}

	.cookie-v2-name {
		flex-shrink: 0;
		min-width: 190px;
		font-family: monospace;
		font-size: 0.85rem;
		font-weight: 700;
		color: #eaddc0;
	}

	.cookie-v2-desc {
		font-size: 0.85rem;
		color: rgba(234, 221, 192, 0.7);
	}

}