/*
 * Bloc "menus par unite pedagogique".
 *
 * Reprise de la maquette de la page /restauration/. Sur cette page, les regles
 * existantes (portee #resto-ndb, marquees !important) restent prioritaires :
 * cette feuille sert de secours si le bloc est place ailleurs sur le site.
 */

.resto-grid {
	max-width: 980px;
	margin: 0 auto;
	display: grid;
	/* Quatre unites pedagogiques par defaut ; le bloc [ndb_menus] pose son
	   propre nombre de colonnes par la variable --ndb-cols. */
	grid-template-columns: repeat(var(--ndb-cols, 4), 1fr);
	gap: 18px;
}

.resto-grid .menu-card {
	--c: #192B79;
	--c-d: #11205f;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 8px 26px rgba(25, 43, 121, .10);
	border: 1px solid #eef0f7;
	transition: transform .2s, box-shadow .2s;
	display: flex;
	flex-direction: column;
}

.resto-grid .menu-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 38px rgba(25, 43, 121, .18);
}

.resto-grid .menu-top {
	padding: 26px 18px;
	text-align: center;
	background: linear-gradient(135deg, var(--c), var(--c-d));
}

.resto-grid .menu-lvl {
	font-family: "Sora", "DM Sans", sans-serif;
	font-weight: 800;
	color: #fff;
	font-size: 16px;
}

.resto-grid .menu-body {
	padding: 16px 18px 20px;
	text-align: center;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.resto-grid .menu-txt {
	margin: 0;
	font-size: 13px;
	color: #6b7398;
}

.resto-grid .menu-btns {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-top: 14px;
}

.resto-grid .menu-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 15px;
	border-radius: 11px;
	font-family: "Sora", "DM Sans", sans-serif;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.2;
	text-decoration: none;
	border: 2px solid var(--c);
	transition: background .2s, color .2s, box-shadow .2s, transform .15s;
}

.resto-grid .menu-btn-full {
	background: var(--c);
	color: #fff;
	box-shadow: 0 4px 12px rgba(25, 43, 121, .16);
}

.resto-grid .menu-btn-full:hover,
.resto-grid .menu-btn-full:focus {
	background: var(--c-d);
	border-color: var(--c-d);
	color: #fff;
	transform: translateY(-2px);
}

.resto-grid .menu-btn-out {
	background: #fff;
	color: var(--c);
}

.resto-grid .menu-btn-out:hover,
.resto-grid .menu-btn-out:focus {
	background: var(--c);
	color: #fff;
	transform: translateY(-2px);
}

.resto-grid .menu-btn:focus-visible {
	outline: 3px solid #7c86d6;
	outline-offset: 2px;
}

.resto-grid .menu-btn-dl {
	font-size: 15px;
	line-height: 1;
	opacity: .85;
}

/* Unite sans document publie : la carte reste en place, sans bouton actif. */
.resto-grid .menu-card--vide { opacity: .75; }

.resto-grid .menu-vide {
	margin: 14px 0 0;
	font-size: 13px;
	font-style: italic;
	color: #8b93b4;
}

.menu-note {
	max-width: 980px;
	margin: 22px auto 0 auto;
	text-align: center;
	font-size: 13px;
	color: #6b7398;
}

/*
 * Le bloc generique porte les deux classes : sa propre feuille lui imposerait
 * sinon sa grille et le fond blanc de ses cartes.
 */
.ndb-menus .resto-grid.ndb-menus__resto {
	display: grid;
	/* 231 px : la largeur exacte d une carte de la maquette (980 px, quatre
	   colonnes, 18 px de gouttiere). Les cartes gardent donc leur taille,
	   quelle que soit la largeur du contenu qui les accueille. */
	grid-template-columns: repeat(var(--ndb-cols, 4), minmax(0, 231px));
	justify-content: center;
	gap: 18px;
}

/*
 * Le bloc generique est pose dans des contenus de largeurs tres variables :
 * il se replie sur la place dont il dispose reellement, et non sur la taille
 * de l ecran. Une colonne de contenu etroite dans une large fenetre serrerait
 * sinon les quatre cartes jusqu a les rendre illisibles.
 */
.ndb-menus { container-type: inline-size; }

@container (max-width: 760px) {
	.ndb-menus .resto-grid.ndb-menus__resto { grid-template-columns: repeat(2, minmax(0, 231px)); }
}

@container (max-width: 430px) {
	.ndb-menus .resto-grid.ndb-menus__resto { grid-template-columns: 1fr; }
}

/* Secours pour les navigateurs sans requetes de conteneur. */
@supports not (container-type: inline-size) {
	@media (max-width: 980px) {
		.ndb-menus .resto-grid.ndb-menus__resto { grid-template-columns: repeat(2, minmax(0, 231px)); }
	}
}

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

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

@media (prefers-reduced-motion: reduce) {
	.resto-grid .menu-card,
	.resto-grid .menu-btn { transition: none; }
	.resto-grid .menu-card:hover,
	.resto-grid .menu-btn:hover { transform: none; }
}