/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    background-image: url('/static/Images/Fond_article.png');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    font-family: 'Lora', serif;
    color: #e8e3dd;
}


.apropos-header {
    text-align: center;
    padding: 60px 20px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
}

.apropos-header h1 {
    font-size: 3rem;
    color: #f5e9d8;
}

.apropos-header .subtitle {
    font-size: 1.2rem;
    color: #d8c7b8;
}


.apropos-container {
    width: 900px;
    margin: 80px auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    position: relative;
}


.apropos-card {
    padding: 25px;
    border-radius: 12px;
    background: rgba(32, 24, 18, 0.92);
    color: #f5e9d8;
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
    cursor: pointer;

    height: 220px;
    overflow: hidden;

    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease, height 0.25s ease;

    transform-origin: center center; 
}


/* Couleurs */
.size1 { border-left: 4px solid #f4c27a; }
.size2 { border-left: 4px solid #9fc5ff; }
.size3 { border-left: 4px solid #c98bff; }

.apropos-card:hover {
    transform: scale(1.20); 
    height: 385px;          
    z-index: 10;
    box-shadow: 0 25px 60px rgba(0,0,0,0.6);
}


.apropos-card p {
    max-height: 95px;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.apropos-card:hover p {
    max-height: 2000px;
}