@charset "UTF-8";

/*Grille*/
.grid {display:grid;align-items:center;column-gap:clamp(1rem,4vw,5rem)}
.grid-menu{grid-template-columns: 1fr 1fr;}
.grid-1-1{grid-template-columns:1fr 1fr}
.grid-1-2{grid-template-columns:1fr 2fr}
.grid-3-2{grid-template-columns:3fr 2fr}
.grid-2-1{grid-template-columns:2fr 1fr}
.grid-4-1{grid-template-columns:4fr 1fr}
.grid-2-3{grid-template-columns:2fr 3fr}

.grid-start{align-items:start}
.grid-shrink{justify-self:start}

.grid-1-1.grid-reverse > *:first-child{order:2}
.grid-1-1.grid-reverse > *:last-child{order:1}

.grid-3-equal{grid-template-columns:1fr 1fr 1fr}
.grid-3-main{grid-template-columns:2fr 1fr 1fr}
.grid-3-focus{grid-template-columns:1fr 2fr 1fr}
.grid-auto-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

@media (max-width:900px){
	.grid{column-gap: clamp(1rem,4vw,5rem);row-gap: 1.5rem;}
	.grid-1-1.grid-reverse > *:first-child{order:0}
	.grid-1-1.grid-reverse > *:last-child{order:0}
	.grid-1-1,.grid-1-2,.grid-3-2,.grid-2-1,.grid-4-1,.grid-2-3,.grid-3-equal,.grid-3-main,.grid-3-focus{grid-template-columns:1fr}
	.mobile-first {order:-1;background:red}
	.mobile-last {order:99;background:yellow} /* pratique aussi */
}

/*Menu*/
.menu__wrapper{padding:20px}
.menu__line{margin-bottom:1rem}
.menu__header{color:#000; display:flex;align-items:baseline;}
.menu__title {color:#000;font-size:2rem;margin:0;padding:0;line-height:1.2}
.menu__dots {flex:1;border-bottom:1px dashed #000;margin:0 1em}
.menu__price {color:#000}
.menu__description{margin:0;padding:0}