/** Var **/
:root {
    --red: #A71318;
    --orange: #F29300;
    --brown: #412F13;
    --light-brown: #F0E5D0;
    --beige: #FAF6EF;
    --padding-default: 16px;
    --margin-default: 16px;
    --radius-default: 16px;
}

/** Classes **/

    /** fonts **/
.font-display {
    font-family: "Pirata one";
}

.font-sans {
    font-family: "Montserrat";
}
    /** colors **/
.text-red {
    color: var(--red);
}

.text-orange {
    color: var(--orange);
}

.text-brown {
    color: var(--brown);
}

.text-light-brown {
    color: var(--light-brown);
}

.text-beige {
    color: var(--beige);
}

.text-black {
    color: black;
}

.text-white {
    color: white;
}
    /** background colors **/
.bg-red {
    background-color: var(--red);
}

.bg-orange {
    background-color: var(--orange);
}

.bg-brown {
    background-color: var(--brown);
}

.bg-light-brown {
    background-color: var(--light-brown);
}

.bg-beige {
    background-color: var(--beige);
}

.bg-black {
    background-color: black;
}

.bg-white {
    background-color: white;
}

    /** text alignement **/
.text-center {
    text-align: center;
}

.text-justify {
    text-align: justify;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

    /** font size **/
.fs-1 {
    font-size: 1rem;
}

.fs-2 {
    font-size: 2rem;
}

    /** font-weight **/
.bold {
    font-weight: bold;
}
    /** Flex align **/
.justify-start {
    justify-content: start;
}

.justify-end {
    justify-content: end;
}

    /** Materials icons **/
.material-symbols-outlined {
    font-size: 24px;          /* ajuste la taille de l’icône */
    line-height: 1;
    vertical-align: middle;
}

/** Style **/

    /** Globals **/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat";
}

a {
    text-decoration: none;
    list-style: none;
    color: inherit
}

    /** body **/
body {
    background-image: url("./background.jpeg");
    background-size: cover;
    background-attachment: fixed;
}

    /** header **/
header {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: var(--padding-default) 24px;
    margin: 24px 24px 72px 24px;
    border-radius: var(--radius-default);
    border: 1px solid var(--orange);
    background: black;
}

#header-branding  {
    display: flex;
    justify-content: center;
    align-items: center;
}

#header-branding img{
    text-align: center;
    max-height: 40px;
}

.contact-details {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.contact-item-wrapper {
    color: var(--orange);
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

    /** menu **/ 
#menu-container {
    margin: auto;
    padding: var(--padding-default);
    max-width: 980px;
    background-color: var(--beige);
    border-radius: var(--radius-default);
}

#menu-wrapper > h1 {
    font-size: 3rem;
}

.menu-item {
    margin-top: var(--margin-default);
    margin-bottom: var(--margin-default);
}

.menu-section {
    padding: var(--padding-default);
}

.menu-section-header-legend {
    display: grid;
    grid-template-columns: 50% 25% 25%;
    gap: var(--margin-default);
    margin-top: var(--margin-default);
    padding-left: var(--padding-default);
    padding-right: var(--padding-default);
    font-weight: bold;
}

.menu-item {
  display: flex;
  gap: var(--margin-default);
  padding: var(--padding-default);
}

.menu-item-description {
  flex: 2 1 50%;
  text-align: justify;
}

.price-box-wrapper {
  flex: 1 1 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.price-box {
  padding: var(--padding-default);
  border-radius: var(--radius-default);
  color: white;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  min-height: 60px; /* force une hauteur min égale pour les 2 boîtes */
}

#delivery-modals {
    margin: 32px auto 32px auto;
    width: 620px;
    text-align: center;
}

    /** Presentation **/
#presentation-container {
    margin-top: 50px;
    padding: 50px;
}

#presentation-text {
    max-width: 720px;
    margin: auto;
    margin-top: var(--margin-default);
}

    /** footer **/
footer {
    background-color: var(--brown);
    color: var(--beige);
    text-align: center;
    padding: 24px 16px;
    border-top: 4px solid var(--light-brown);
    font-size: 0.9rem;
}

.footer-content p {
    margin: 6px 0;
}

.footer-title {
    font-weight: bold;
    font-size: 1rem;
    color: var(--orange);
}