body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--brown);
}

.fond {background-color: var(--white); min-height: 88vh}
.page {
    max-width: 600px;
    margin: 0 auto; 
    padding: 70px 30px; 
    box-sizing: border-box; 
}

.logo {
    display: block;
    max-width: 180px;
    margin: 0 auto 70px auto;
}

.section-title {
    font-size: 24px;
    font-weight: 100;
    margin: 0 auto 10px auto;
}

.empty {
    font-family: var(--font-classic);
    font-size: 14px;
    color: #d4c4a8;
}

.card {
    display: block;
    margin-bottom: 10px;
    border-radius: 6px;
    overflow: hidden;
}
.card img { width: 100%; display: block; transition: opacity 0.2s; }
.card:hover img { opacity: 0.85; }

.section { margin-bottom: 40px; }


.btn-marron {
    width: 100%;
    max-width: 600px;
    padding: 15px 15px;
    border-radius: 15px;
    background: #694730;
    color: #FFF7DD;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-classic);
    transition: all 0.20s;
    font-size: clamp(0.85rem, 1.2vw, 1.2rem);
    margin-bottom: 10px;
}

.left-content {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.title {
  font-weight: bold;
  font-size: clamp(0.85rem, 1.2vw, 1.2rem)
}

.subtitle {
 font-weight: 400;   
  opacity: 0.8; 
}

.right-content {
  font-weight: bold;
  font-size: clamp(0.85rem, 1.2vw, 1.2rem)
}


.btn-marron:hover {
    opacity: 0.85;
}



.btn-marron-past {
    width: 100%;
    max-width: 600px;
    padding: 15px 15px;
    border-radius: 15px;
    background: #694730c7;
    color: #FFF7DDc7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-classic);
    transform: all 0.20s;
    font-size: clamp(0.85rem, 1.2vw, 1.2rem);
    margin-bottom: 10px;
}