.page {
    max-width: 700px;
    margin: 0 auto 0 auto;
    padding: 30px 20px 30px 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap; 
    gap: 15px;
    min-height: 88vh
}


.ban {
    width: 100%;           
    height: 15rem;         
    object-fit: cover;     
    display: block;   
    background-color: var(--brown);    
}

.ban-image {
    width: 100%;           
    height: 15rem;         
    object-fit: cover;     
    display: block;
    background-image: var(--fond);
    background-size: cover;
    background-position: center;  
    background-repeat: no-repeat;  
}

.ban-image-custom {
    width: 100%;           
    height: 15rem;         
    object-fit: cover;     
    display: block;
}

.section-head {
    width: 100%;
    max-width: 100%;
    padding: 15px 15px;
    border-radius: 25px;
    background-image: var(--fond);
    background-size: cover;
    background-position: center;  
    background-repeat: no-repeat;  
}

.section-title {
    font-size: 30px;
    color: var(--white);
    font-weight: 50;
    padding-bottom: 15px;
}

.section-desc {
    font-family: var(--font-classic);
    font-size: 20px;
    font-weight: 400;
    color: var(--white);
    padding-bottom: 10px;

}

.video-wrapper {
    grid-column: 1;
    grid-row: 1;
    overflow: hidden;
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    max-width: 100%;
    border-radius: 25px;
}

.video-wrapper video {
    aspect-ratio: 16 / 9;
    position: center;
    inset: 0;
    width: 100%;
}


.content-ulule {
    font-size: 20px;
    color: var(--white);
    text-align: left;
    font-family: var(--font-classic);
    font-weight: 700;
}

.content {
    font-size: 20px;
    color: var(--white);
    text-align: left;
    font-weight: 100;
    width: 100%;
    max-width: 100%;
    padding: 15px 15px;
    border-radius: 25px;
    background-image: var(--fond);
    background-size: cover;
    background-position: center;  
    background-repeat: no-repeat;  
    margin-top: 15px;
}



.text-gold  { 
    color: #ffca18; 
    /*color: #ca7300; */
}

.content-bot { 
    display: flex;
    align-items: center;
    justify-content: center;
}

.image { 
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 25px;
}

.btn-blanc {
    font-family: var(--font-classic);
    font-weight: 800;
    padding: 8px 24px;
    border-radius: 20px;
    text-align: center;
    transition: all 0.2s;
    white-space: nowrap;
    display: inline-block;
    font-size: clamp(1rem, 1.2rem);
    background: #694730;
    color: #FFF7DD;
}

.btn-blanc:hover { opacity: 0.85; }



a {
  color: #FFF7DD; 
}

a:hover {
  opacity: 0.8;
}