/* Style pour la page "À Propos" - Design "Vieillot" */

body {
    background-color: #ffffff;
    color: #000000;
    font-family: 'Times New Roman', Times, serif;
    margin: 0;
    padding: 40px; /* Ajout de marge pour voir la frise */
}

.container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 40px;
    position: relative;
    border: 1px solid #000; /* Bordure simple pour l'instant */
}

.header {
    text-align: center;
    margin-bottom: 40px;
    border-bottom: 1px solid #000;
    padding-bottom: 20px;
}

.header h1 {
    font-size: 2.2em;
    color: #000;
    font-weight: normal;
    letter-spacing: 1px;
    margin: 0;
}

.content-grid {
    display: block; /* On abandonne la grille pour un flux simple */
    position: relative;
}

.photo-section {
    position: absolute;
    top: 20px;
    left: -125px; /* Décalage vers la gauche */
    width: 250px;
    z-index: 10;
}

.photo-frame {
    border: 1px solid #000;
    padding: 5px;
    background-color: #fff;
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 1); /* Ombre portée dure */
    transform: rotate(-5deg); /* Légère rotation */
    position: relative; /* Nécessaire pour le positionnement des pseudo-éléments */

    /* Application des 4 images de bordure pour le cadre */
    background-image: 
        url('../images/bordure-apropos-haut.png'), 
        url('../images/bordure-apropos-bas.png'),
        url('../images/bordure-apropos-gauche.png'), 
        url('../images/bordure-apropos-droite.png');
    
    background-repeat: 
        repeat-x,
        repeat-x,
        repeat-y,
        repeat-y;

    background-position: 
        top center,
        bottom center,
        left center,
        right center;

    /* Ajustez la taille de vos bordures ici */
    background-size: 
        auto 10px, /* Hauteur bordure haute */
        auto 10px, /* Hauteur bordure basse */
        10px auto, /* Largeur bordure gauche */
        10px auto; /* Largeur bordure droite */
    
    /* Ajustement du padding pour que le contenu ne soit pas sous les bordures */
    padding: 15px;
}

.profile-photo {
    width: 100%;
    height: auto;
    display: block;
}

.photo-caption {
    display: none; /* On cache la légende pour l'instant */
}

.text-section {
    padding-left: 120px; /* Espace pour la photo qui dépasse */
}

.bio-content p {
    line-height: 1.7;
    text-align: justify;
    margin-bottom: 1.2em;
    font-size: 1.1em;
}

.glitch-box {
    display: none; /* On cache la glitch-box pour ce design */
}

.footer {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #000;
    font-size: 0.9em;
    color: #333;
}

a {
    color: #000;
    text-decoration: underline;
}

a:hover {
    background-color: #000;
    color: #fff;
}

/* Gestion des bordures avec plusieurs arrière-plans */
.container {
    /* ... (les autres styles du container restent inchangés) ... */
    max-width: 800px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 40px;
    position: relative;
    border: 1px hidden #000; /* Maintenu comme fallback */
    

    /* Application des 4 images de bordure */
    background-image: 
        url('../images/bordure-apropos-haut.png'), 
        url('../images/bordure-apropos-bas.png'), /* Note: J'utilise un placeholder, à remplacer si vous avez le fichier */
        url('../images/bordure-apropos-gauche.png'), 
        url('../images/bordure-apropos-droite.png');
    
    background-repeat: 
        repeat-x,
        repeat-x,
        repeat-y,
        repeat-y;

    background-position: 
        top center,
        bottom center,
        left center,
        right center;

    /* Ajustez la taille de vos bordures ici */
    background-size: 
        auto 20px,
        auto 20px,
        20px auto,
        20px auto;
}/