/* ########################### */
/* DANS style-temoignage.css */
/* ########################### */

/* Conteneur principal (main) */
.temoignage-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;

    /* Centrage vertical/horizontal du conteneur lui-même */
    display: flex;
    flex-direction: column;
    /* Empile les éléments */
    align-items: center;
    /* Centre les éléments horizontalement */
    justify-content: center;
    /* Centre les éléments verticalement (si la hauteur est suffisante) */
    min-height: 50vh;
    /* Assure une hauteur minimale pour le centrage vertical visible */
}

/* 1. Titre du témoignage (Gros et Centré) */
.titre {
    max-width: 800px;
    margin-bottom: 30px;
    padding: 15px;
    background-color: #e6f7ff;
    /* Fond bleu très clair */
    border-left: 5px solid #004d99;

    font-size: 1.5em;
    /* Rendre le texte plus grand */
    font-weight: bold;
    color: #333;
    text-align: center;
    line-height: 1.4;
}

/* Règle pour ignorer les <br> dans le titre si nécessaire, mais cela n'est pas le cas ici */
.titre br {
    display: block;
    content: " ";
    margin-bottom: 0.2em;
}

/* 2. Corps du témoignage (Lisibilité maximale) */
.texte {
    max-width: 800px;
    /* Crucial : Limiter la longueur de la ligne de texte */
    margin: 0 auto 40px auto;
    padding: 30px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    /* --- Règles de Lisibilité --- */

    /* A. Augmenter la taille de la police */
    font-size: 1.15em;

    /* B. Augmenter l'interligne (espace entre les lignes) */
    line-height: 1.7;

    /* C. Choisir une police lisible (si non définie ailleurs) */
    /* Ces polices sont courantes et n'ont pas besoin d'être téléchargées */
    font-family: Georgia, serif;

    /* D. Alignement (Justification) */
    text-align: left;
    color: #222;
}

/* Remplacer les <br><br> (qui sont des erreurs structurelles pour des paragraphes) */
/* par un espacement correct entre les blocs de texte. */
.texte br {
    display: none;
    /* Cache tous les <br> */
}

/* Espacement entre les "paragraphes" - Nous utilisons une astuce pour simuler les paragraphes */
.texte::before {
    content: "";
    display: block;
    height: 1.5em;
    /* Ajoute un espace entre les blocs de texte si la structure HTML n'est pas modifiée */
}

/* Media Query pour les petits écrans */
@media (max-width: 768px) {
    .temoignage-container {
        padding: 0 10px;
    }

    .titre {
        max-width: 100%;
        font-size: 1.3em;
    }

    .texte {
        max-width: 100%;
        font-size: 1em;
        padding: 20px 15px;
        line-height: 1.6;
        text-align: left;
        /* Préférer l'alignement à gauche sur mobile */
    }
}