/*
 * ACE — layout : conteneur unique, header, footer, contenu générique.
 * Mobile-first : la base décrit le rendu 390 px.
 */

@layer ace.layout {
	/* Conteneur unique — la largeur max change par attribut data-w. */
	.ace-container {
		--ace-w: var(--ace-w-wide);
		width: min(100% - 2 * var(--ace-gutter), var(--ace-w));
		margin-inline: auto;
		padding-block: var(--ace-6);
	}

	.ace-container[data-w="checkout"] {
		--ace-w: var(--ace-w-checkout);
	}

	.ace-container[data-w="form"] {
		--ace-w: var(--ace-w-form);
	}

	.ace-container[data-w="auth"] {
		--ace-w: var(--ace-w-auth);
	}

	/* --- Header ----------------------------------------------------------- */

	.ace-header {
		position: relative;
		z-index: var(--ace-z-header);
		background: var(--ace-surface);
		border-bottom: 1px solid var(--ace-border);
	}

	.ace-header__inner {
		display: flex;
		align-items: center;
		gap: var(--ace-3);
		height: var(--ace-header-h);
		padding-inline: var(--ace-gutter);
	}

	.ace-header__logo {
		flex: none;
		display: flex;
		align-items: center;
	}

	.ace-header__logo img {
		height: 26px;
		width: auto;
	}

	/* Recherche repliée en mobile (icône dans le burger flow) */
	.ace-header__search {
		display: none;
		align-items: center;
		flex: 1;
		max-width: 520px;
		height: 38px;
		border: 1px solid var(--ace-border);
		border-radius: var(--ace-radius);
		overflow: hidden;
		background: var(--ace-surface);
	}

	.ace-header__search:focus-within {
		border-color: var(--ace-primary);
		box-shadow: var(--ace-ring-field);
	}

	.ace-header__search input[type="search"] {
		flex: 1;
		min-width: 0;
		height: 100%;
		border: 0;
		padding: 0 14px;
		font: inherit;
		font-size: 13.5px;
		background: transparent;
	}

	.ace-header__search input:focus-visible {
		box-shadow: none;
	}

	.ace-header__search button {
		display: flex;
		align-items: center;
		gap: var(--ace-2);
		height: 100%;
		padding: 0 18px;
		border: 0;
		background: var(--ace-navy);
		color: #fff;
		font-size: var(--ace-fs-sm);
		font-weight: 600;
		cursor: pointer;
	}

	.ace-header__search button:hover {
		background: var(--ace-navy-dark);
	}

	.ace-header__nav {
		display: none;
	}

	.ace-header__menu {
		display: flex;
		align-items: center;
		gap: var(--ace-5);
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.ace-header__menu a {
		font-size: 13.5px;
		font-weight: 500;
		color: var(--ace-text-strong);
		text-decoration: none;
	}

	.ace-header__menu a:hover {
		color: var(--ace-primary-text);
	}

	.ace-header__divider {
		display: none;
		width: 1px;
		height: 28px;
		background: var(--ace-border);
		flex: none;
	}

	.ace-header__account {
		display: flex;
		align-items: center;
		gap: var(--ace-3);
		margin-left: auto;
		flex: none;
	}

	.ace-header__cart {
		display: flex;
		align-items: center;
		gap: 7px;
		height: 38px;
		padding: 0 12px;
		border: 1px solid var(--ace-border);
		border-radius: var(--ace-radius);
		background: var(--ace-surface);
		font-size: var(--ace-fs-sm);
		font-weight: 600;
		color: var(--ace-text);
		text-decoration: none;
	}

	.ace-header__cart:hover {
		border-color: var(--ace-border-strong);
	}

	.ace-header__cart-label {
		display: none;
	}

	.ace-header__cart-count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		border-radius: 9px;
		background: var(--ace-primary);
		color: #fff;
		font-size: var(--ace-fs-2xs);
		font-weight: 700;
	}

	.ace-header__user {
		display: flex;
		align-items: center;
		gap: 9px;
		text-decoration: none;
		color: inherit;
	}

	.ace-header__user-meta {
		display: none;
		flex-direction: column;
		line-height: 1.15;
	}

	.ace-header__user-name {
		font-size: 12.5px;
		font-weight: 600;
	}

	.ace-header__user-status {
		font-size: 10.5px;
		color: var(--ace-text-subtle);
	}

	.ace-header__login {
		display: none;
		font-size: 13.5px;
		font-weight: 600;
		color: var(--ace-text-strong);
		text-decoration: none;
	}

	.ace-header__login:hover {
		color: var(--ace-primary-text);
	}

	.ace-header__signup-long {
		display: none;
	}

	.ace-header__burger {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		flex: none;
		border: 1px solid var(--ace-border);
		border-radius: var(--ace-radius);
		background: var(--ace-surface);
		color: var(--ace-text-strong);
		cursor: pointer;
	}

	.ace-header__mobile {
		display: flex;
		flex-direction: column;
		padding: var(--ace-2) var(--ace-gutter) var(--ace-4);
		background: var(--ace-surface);
		border-bottom: 1px solid var(--ace-border);
		box-shadow: var(--ace-shadow-card);
	}

	.ace-header__mobile[hidden] {
		display: none;
	}

	.ace-header__mobile-menu {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.ace-header__mobile-menu a,
	.ace-header__mobile-account {
		display: block;
		padding: var(--ace-3) 0;
		font-size: 14px;
		font-weight: 600;
		color: var(--ace-text-strong);
		text-decoration: none;
		border-bottom: 1px solid var(--ace-rule);
	}

	/* --- Avatar ------------------------------------------------------------ */

	.ace-avatar {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background: var(--ace-info-bg);
		color: var(--ace-info);
		font-size: var(--ace-fs-xs);
		font-weight: 700;
	}

	/* --- Contenu générique ------------------------------------------------- */

	.ace-entry__title {
		font-size: var(--ace-fs-h1);
		font-weight: 800;
		line-height: 1.12;
		letter-spacing: -0.02em;
		margin-bottom: var(--ace-4);
	}

	.ace-entry__subtitle {
		font-size: var(--ace-fs-h3);
		font-weight: 700;
		margin: var(--ace-4) 0 var(--ace-2);
	}

	.ace-entry__meta {
		color: var(--ace-text-subtle);
		font-size: var(--ace-fs-sm);
		margin-bottom: var(--ace-4);
	}

	.ace-entry__content > * + * {
		margin-top: var(--ace-3);
	}

	/* Contenu hérité d'un constructeur de pages : un SVG décoratif sans
	   attribut de largeur s'étirerait à 100 % du conteneur (l'icône devient
	   une image géante). Borné à une taille d'icône — les illustrations
	   légitimes portent width/height ou une classe. */
	.ace-entry__content svg:not([width]) {
		width: 48px;
		height: 48px;
	}

	/* --- Footer ------------------------------------------------------------ */

	.ace-footer {
		background: var(--ace-text);
		color: var(--ace-border-strong);
		margin-top: var(--ace-8);
	}

	.ace-footer__main {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ace-6);
		padding-block: var(--ace-8) var(--ace-6);
	}

	.ace-footer__brand {
		display: flex;
		flex-direction: column;
		gap: var(--ace-3);
	}

	.ace-footer__logo {
		display: inline-flex;
		align-self: flex-start;
		padding: 9px 13px;
		border-radius: var(--ace-radius);
		background: #fff;
	}

	.ace-footer__logo img {
		height: 26px;
		width: auto;
	}

	.ace-footer__desc {
		max-width: 280px;
		font-size: 12.5px;
		line-height: 1.6;
		color: var(--ace-text-subtle);
	}

	.ace-footer__tags {
		display: flex;
		gap: var(--ace-2);
		flex-wrap: wrap;
	}

	.ace-footer__tags span {
		padding: 4px 8px;
		border: 1px solid #33373d;
		border-radius: var(--ace-radius-sm);
		font-size: var(--ace-fs-2xs);
		color: var(--ace-text-subtle);
	}

	.ace-footer__col {
		display: flex;
		flex-direction: column;
		gap: var(--ace-2);
	}

	.ace-footer__title {
		font-size: var(--ace-fs-2xs);
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--ace-text-muted);
	}

	.ace-footer__menu {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--ace-2);
	}

	.ace-footer__menu a,
	.ace-footer__menu li {
		font-size: var(--ace-fs-sm);
		color: var(--ace-border-strong);
		text-decoration: none;
	}

	.ace-footer__menu a:hover {
		color: var(--ace-primary);
	}

	.ace-footer__legal {
		border-top: 1px solid #2a2e33;
	}

	.ace-footer__legal .ace-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--ace-4);
		flex-wrap: wrap;
		padding-block: var(--ace-4);
	}

	.ace-footer__copy {
		font-size: 11.5px;
		color: var(--ace-text-muted);
	}

	.ace-footer__links {
		display: flex;
		gap: 18px;
		flex-wrap: wrap;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.ace-footer__links a {
		font-size: 11.5px;
		color: var(--ace-text-subtle);
		text-decoration: none;
	}

	.ace-footer__links a:hover {
		color: var(--ace-primary);
	}

	/* --- Paliers ----------------------------------------------------------- */

	@media (min-width: 768px) {
		.ace-header__search {
			display: flex;
		}

		.ace-header__signup-long {
			display: inline;
		}

		.ace-header__signup-short {
			display: none;
		}

		.ace-footer__main {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (min-width: 1025px) {
		.ace-header__inner {
			gap: var(--ace-6);
		}

		.ace-header__logo img {
			height: 38px;
		}

		.ace-header__nav {
			display: block;
		}

		.ace-header__divider {
			display: block;
		}

		.ace-header__burger,
		.ace-header__mobile {
			display: none;
		}

		.ace-header__cart-label {
			display: inline;
		}

		.ace-header__user-meta {
			display: flex;
		}

		.ace-header__login {
			display: inline;
		}

		.ace-footer__main {
			grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
			gap: var(--ace-8);
		}
	}
}