/* style-projet-detail.css */

/* Pour le h1 spécifique de la page de détail du projet */
main h1 { /* Cible le h1 qui est un enfant direct de main */
    text-align: center;
    color: var(--blanc); /* S'assurer qu'il est blanc */
    margin-top: 40px; /* Ajoute de l'espace au-dessus */
    margin-bottom: 40px; /* Ajoute de l'espace en dessous */
    font-size: clamp(2rem, 4vw, 3rem); /* Taille fluide pour le titre principal */
}

/* AJOUT ICI POUR LE PADDING TOP DE LA SECTION PRÉSENTATION PERSONNELLE */
.portfolio .projet > .content.left {
    padding-top: 60px; /* Ajoute un padding-top de 60px. Ajuste cette valeur si tu veux plus ou moins d'espace. */
    /* Assure-toi que cette règle soit placée APRES les règles générales de .content
       pour qu'elle puisse les surcharger si nécessaire, ou que sa spécificité soit suffisante. */
}


/* ... le reste de ton CSS existant ... */

/* --- Règles Générales pour les Images dans le contenu du détail --- */
.content-image { /* Pour les images que tu pourrais insérer directement dans les descriptions */
    max-width: 800px;
    margin: 20px auto;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Conteneur date + ligne */
.ligne {
    display: flex;
    align-items: center;
    margin: 40px 0;
    gap: 10px; /* espace entre date et hr */
    width: 100%; /* prend toute la largeur */
    font-size: clamp(0.8rem, 2vw, 0.9rem); /* Taille fluide pour la date */
    color: var(--blanc);
    padding: 0 20px; /* Ajout d'un padding pour les petits écrans */
    box-sizing: border-box; /* S'assurer que le padding est inclus dans la largeur */
}

/* Ancrage à gauche ou à droite */
.ligne_left {
    justify-content: flex-start;
}
.ligne_right {
    justify-content: flex-end;
}

/* On fixe l’<hr> à 50% de la largeur du conteneur */
.hr_left,
.hr_right {
    flex: 1; /* Laisse l'HR prendre l'espace restant */
    height: 2px;
    border: none;
    background-color: var(--blanc);
    margin: 0;
    max-width: 45%; /* Limite sa largeur pour éviter qu'il ne s'étire trop sur de très grands écrans */
}

/* pour éviter le retour à la ligne de la date */
.date {
    white-space: nowrap;
}

/* Section Détail Projet */
.projet-detail-content {
    padding: 40px 20px; /* Ajoute un padding horizontal pour les bords */
}

/* Contenu aligné avec flex */
.content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px; /* Ajuste entre 30px et 60px selon ton goût */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne */
    margin-top: 10px;
    max-width: 1100px; /* Ajoute une largeur max pour éviter que tout s'étale */
    margin-left: auto;
    margin-right: auto; /* Centre le conteneur */
    padding: 0 15px; /* Ajout d'un léger padding pour les petits écrans et éviter le coller-bord */
    box-sizing: border-box;
}

/* Texte */
.text {
    max-width: 500px; /* Limite la largeur maximale du bloc de texte */
    width: 100%; /* Prend toute la largeur disponible jusqu'à max-width */
    text-align: left; /* Aligne le texte à gauche par défaut pour une meilleure lisibilité */
    word-break: break-word;
    box-sizing: border-box; /* Assure que le padding est inclus */
}

.text h2 {
    text-transform: uppercase;
    font-size: clamp(1.5rem, 3vw, 2.5rem); /* Taille fluide pour les titres de projet */
    margin-bottom: 15px;
    color: var(--blanc);
}

.text h3 {
    text-transform: uppercase;
    font-size: clamp(1.2rem, 2vw, 1.8rem); /* Taille fluide pour les sous-titres (Contexte, Démarche...) */
    margin-top: 25px; /* Espace au-dessus des sous-titres */
    margin-bottom: 10px;
    color: var(--blanc);
}
.text p {
    white-space: normal;
    color: var(--gris);
    line-height: 1.6; /* Améliore la lisibilité des paragraphes */
    font-size: clamp(0.9rem, 1.5vw, 1.1rem); /* Taille fluide pour le texte de paragraphe */
}

/* Image de projet — style commun */
.content img { /* Notez le .content img pour cibler les images dans ce contexte */
    width: 100%;
    height: auto;
    max-width: 380px;
    object-fit: contain;
    background-color: transparent;
    display: block;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Conteneur pour plusieurs images (si tu en as sur la page détail) */
.images {
    display: flex;
    flex-direction: column; /* pour empiler verticalement par défaut */
    gap: 20px;
    flex-shrink: 0; /* Empêche les images de rétrécir plus que leur contenu */
}

/*
    *** IMPORTANT ***
    Ces règles 'order' sont spécifiquement pour le grand écran
    pour maintenir l'alternance "image gauche / texte droit" et "texte gauche / image droite".
    Elles seront annulées sur mobile par la media query.
*/
.content.left .images {
    order: 2; /* Images à droite */
}
.content.right .images {
    order: 1; /* Images à gauche */
}


/* SECTION COMMENTAIRES*/
.commentaires {
    background-color: #111;
    padding: 40px 20px;
    margin-top: 60px;
    border-top: 2px solid var(--gris);
}

.commentaires h2 {
    text-align: center;
    font-size: clamp(1.4rem, 2.5vw, 2rem); /* Taille fluide pour le titre des commentaires */
    color: var(--gris);
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Chaque bloc de commentaire */
.commentaire {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
    background-color: #1c1c1c;
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
    max-width: 800px; /* Limite la largeur des commentaires pour une meilleure lisibilité */
    margin-left: auto;
    margin-right: auto; /* Centre les commentaires */
}

/* Image de profil */
.commentaire-pp {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0; /* Empêche l'image de rétrécir */
}

/* Texte du commentaire */
.commentaire-text {
    flex: 1;
}

.commentaire-nom {
    font-size: clamp(1rem, 1.8vw, 1.2rem); /* Taille fluide */
    color: var(--blanc);
    margin-bottom: 5px;
    font-weight: bold;
}

.commentaire-message {
    font-size: clamp(0.9rem, 1.5vw, 1rem); /* Taille fluide */
    color: var(--gris);
    line-height: 1.5;
}

/* Formulaires : commentaire */
form.add-comment-form { /* Cibler spécifiquement le formulaire de commentaire */
    max-width: 600px; /* Limite la largeur max sur les grands écrans */
    margin: 40px auto 60px;
    padding: 20px; /* Garde le padding pour les grands écrans */
    background-color: #1c1c1c;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-sizing: border-box; /* S'assurer que le padding est inclus dans la largeur */
}

form.add-comment-form label {
    color: var(--gris, #D2D2D2);
    font-weight: bold;
}

form.add-comment-form input[type="text"],
form.add-comment-form textarea,
form.add-comment-form select { /* Ajout de la règle pour les sélecteurs */
    padding: 10px;
    background-color: #2a2a2a;
    color: var(--blanc, #FFFFFF);
    border: 1px solid var(--gris, #D2D2D2);
    border-radius: 8px;
    font-size: 1rem;
    resize: vertical;
    width: 100%; /* S'assure que les champs prennent toute la largeur disponible */
    box-sizing: border-box; /* Très important pour que padding et border ne fassent pas déborder l'input */
}

form.add-comment-form input[type="submit"] {
    padding: 12px 20px;
    background-color: var(--gris, #D2D2D2);
    color: var(--noir, #000000);
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

form.add-comment-form input[type="submit"]:hover {
    background-color: var(--blanc, #FFFFFF);
    color: var(--noir, #000000);
}

.delete-comment-btn {
    background-color: #dc3545; /* Couleur rouge pour supprimer */
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.85rem;
    margin-top: 10px;
    transition: background-color 0.2s ease;
}

.delete-comment-btn:hover {
    background-color: #c82333;
}

/* Position tout en bas */
body > .commentaires {
    margin-bottom: 0;
}


/* --- ANCIENNES RÈGLES POUR LES SECTIONS DÉTAILS CLIQUABLES (ACCORDÉON) - CONSERVÉES AU CAS OÙ ELLES SERAIENT UTILISÉES AILLEURS OU POUR COMPARAISON --- */
/*
.detail-section {
    margin-top: 25px;
    border: 1px solid var(--gris);
    border-radius: 8px;
    overflow: hidden;
    background-color: #1a1a1a;
}

.detail-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    background-color: #2a2a2a;
    color: var(--blanc);
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    font-weight: bold;
    border-bottom: 1px solid transparent;
    transition: background-color 0.3s ease, border-bottom-color 0.3s ease;
}

.detail-summary:hover {
    background-color: #3a3a3a;
}
*/
/* Retire le style par défaut du triangle des détails (qui n'est pas une icône Font Awesome) */
/*
details > summary::marker,
details > summary::-webkit-details-marker {
    display: none;
}
*/
/* Style du titre h3 à l'intérieur du summary */
/*
.detail-summary h3 {
    margin: 0;
    color: var(--blanc);
    font-size: inherit;
    text-transform: uppercase;
    flex-grow: 1;
}
*/
/* Icône de déploiement */
/*
.toggle-icon {
    margin-left: 15px;
    transition: transform 0.3s ease;
    color: var(--gris);
}
*/
/* Rotation de l'icône quand la section est ouverte */
/*
details[open] .toggle-icon {
    transform: rotate(180deg);
}

.detail-content {
    padding: 20px;
    background-color: var(--noir);
    color: var(--gris);
    line-height: 1.6;
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    animation: fadeIn 0.3s ease-out;
}
*/
/* Assure que les paragraphes à l'intérieur de .detail-content n'ont pas de marges excessives */
/*
.detail-content p:last-child {
    margin-bottom: 0;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
*/

/* --- NOUVELLES RÈGLES POUR LES TOGGLES IMBRIQUÉS --- */

/* Styles généraux pour le conteneur principal de details */
.main-toggle {
    margin-top: 25px; /* Espace au-dessus de chaque section dépliable principale */
    border: 1px solid var(--gris); /* Un petit cadre pour le rendre visible */
    border-radius: 8px;
    overflow: hidden; /* Important pour les transitions et les bords arrondis */
    background-color: #1a1a1a; /* Couleur de fond pour le bloc */
}

.main-toggle summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    background-color: #2a2a2a; /* Fond pour le titre cliquable principal */
    color: var(--blanc);
    font-size: clamp(1.2rem, 2vw, 1.8rem); /* Assure une taille lisible */
    font-weight: bold;
    border-bottom: 1px solid transparent; /* Pour la transition */
    transition: background-color 0.3s ease, border-bottom-color 0.3s ease;
}

.main-toggle summary:hover {
    background-color: #3a3a3a; /* Effet de survol sur le titre principal */
}

/* Retire le style par défaut du triangle des détails (qui n'est pas une icône Font Awesome) */
.main-toggle > summary::marker,
.main-toggle > summary::-webkit-details-marker {
    display: none;
}

/* Contenu du toggle principal (qui contiendra les sous-toggles) */
.main-content-area {
    padding: 15px; /* Espace interne autour des sous-toggles */
    background-color: var(--noir); /* Fond pour le contenu principal */
    /* Pas de couleur de texte ici, car le texte sera dans les sous-toggles */
    border-top: 1px solid #444; /* Séparateur visuel */
}


/* Styles pour les sous-toggles (imbriqués) */
.sub-toggle {
    background-color: #2a2a2a; /* Fond légèrement plus clair que le main-toggle ou noir */
    margin-top: 10px; /* Espace entre les sous-toggles */
    border: 1px solid #444; /* Bordure plus fine pour les sous-toggles */
    border-radius: 5px; /* Coins légèrement arrondis */
    overflow: hidden;
}

.sub-toggle:first-child {
    margin-top: 0; /* Pas de marge supérieure pour le premier sous-toggle */
}

.sub-toggle summary {
    padding: 12px 18px; /* Moins de padding pour les summaries de sous-toggles */
    font-size: clamp(0.95rem, 1.8vw, 1.2rem); /* Taille plus petite que le toggle principal */
    font-weight: normal; /* Moins gras que le titre principal */
    background-color: #333; /* Fond pour le titre du sous-toggle */
    color: var(--blanc);
    transition: background-color 0.3s ease;
}

.sub-toggle summary:hover {
    background-color: #444; /* Effet de survol pour les sous-toggles */
}

/* Contenu des sous-toggles */
.content-wrapper {
    padding: 15px 18px; /* Padding pour le contenu des sous-toggles */
    background-color: #1c1c1c; /* Fond pour le contenu du sous-toggle */
    color: var(--gris);
    line-height: 1.6;
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    border-top: 1px solid #444; /* Séparateur */
    animation: fadeIn 0.3s ease-out; /* Conserve l'animation de fondu */
}

/* Assurez-vous que l'icône de chevron s'applique aux deux types de toggles */
/* Si vous aviez déjà une règle pour .toggle-icon, elle s'appliquera, sinon ajoutez celle-ci */
/* (Celle-ci devrait déjà exister dans votre CSS si vous avez les chevrons sur les toggles actuels) */
.toggle-icon {
    margin-left: 15px;
    transition: transform 0.3s ease;
    color: var(--gris); /* Couleur de l'icône */
}

details[open] .toggle-icon {
    transform: rotate(180deg);
}

/* Ajustements pour les paragraphes à l'intérieur des wrappers */
.content-wrapper p {
    margin-bottom: 1em; /* Espacement entre paragraphes */
}
.content-wrapper p:last-child {
    margin-bottom: 0; /* Pas de marge en bas du dernier paragraphe */
}


/* Conteneur Flex pour aligner les badges */
.tags-container {
    display: flex;
    flex-wrap: wrap; /* Permet aux tags de passer à la ligne */
    gap: 10px; /* Espace entre chaque badge */
    margin-top: 10px;
    /* Si vous voulez que les tags prennent toute la largeur disponible pour l'alignement, vous pouvez ajouter ceci: */
    width: 100%; 
}

/* Style individuel des badges */
.tag-badge-secondaire {
    /* Style visuel */
    background-color: #f1f1f1; 
    color: #333; 
    padding: 7px 12px;
    border-radius: 20px; /* Forme de pilule */
    font-size: 0.85em;
    font-weight: 500;
    border: 1px solid #ddd;
    white-space: nowrap; /* Empêche la coupure d'un mot sur plusieurs lignes */
    
    /* Optionnel: petite ombre pour un effet de relief */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Suggestion pour un meilleur affichage des tags dans la structure 'content right' */
.projet-section .content.right .tags-container {
    /* Si le conteneur 'content right' utilise un display: flex avec d'autres éléments, 
       ceci garantit que les tags se comportent comme un bloc horizontal. */
    flex-grow: 1;
}

/* Responsive - Mobile First pour les détails */

/* Pour les très petits écrans (< 576px) - smartphones */
@media (max-width: 575.98px) {
    /* AJOUT ICI DANS LA MEDIA QUERY POUR LE PADDING TOP DE LA SECTION PRÉSENTATION PERSONNELLE SUR MOBILE */
    .portfolio .projet > .content.left {
        padding-top: 30px; /* Moins de padding sur mobile */
    }

    .ligne {
        font-size: 0.8rem;
        margin: 30px 0;
        padding: 0 10px; /* Réduire le padding */
    }

    .hr_left,
    .hr_right {
        max-width: 35%; /* L'HR peut être plus court sur les petits écrans */
    }

    .projet-detail-content {
        padding: 20px 10px;
    }

    .content {
        flex-direction: column; /* Force l'empilement vertical */
        text-align: center;
        gap: 25px; /* Réduit le gap */
        padding: 0 10px; /* Réduire le padding */
        box-sizing: border-box;
    }

    /* ****************************************************** */
    /* RÈGLES POUR FORCER IMAGE EN BAS SUR MOBILE (SMARTPHONE) */
    /* Ces règles écrasent les ordres left/right quand en colonne */
    /* ****************************************************** */
    .content .text {
        order: 1; /* Texte en premier */
    }
    .content img, /* Si l'image est directement sous .content (cas de votre Présentation) */
    .content .images { /* Si l'image est dans un conteneur .images (cas des autres projets) */
        order: 2; /* Image en deuxième (donc en bas du texte) */
    }
    /* ****************************************************** */


    .text {
        max-width: 100%; /* Le texte prend toute la largeur disponible */
        padding: 0 5px; /* Un petit padding interne */
        text-align: center; /* Centre le texte sur mobile */
    }

    .text h2 {
        font-size: clamp(1.3rem, 5vw, 1.8rem); /* Adapte encore plus sur mobile */
    }

    .text h3 {
        font-size: clamp(1.0rem, 4vw, 1.4rem); /* Fixé à 1.0rem pour éviter trop petit */
    }

    .text p {
        font-size: clamp(0.85rem, 3.5vw, 1rem);
    }

    .content img {
        max-width: 90%; /* Les images peuvent être un peu plus grandes sur mobile */
        width: 100%; /* S'assure qu'elles ne débordent pas */
    }

    .images {
        flex-direction: column; /* Empilées verticalement sur mobile */
        gap: 15px;
        align-items: center; /* Centre les images empilées */
    }

    .commentaires {
        padding: 20px 10px;
    }

    .commentaire {
        flex-direction: column; /* Empile l'image de profil et le texte sur mobile */
        align-items: center;
        text-align: center;
        gap: 15px;
        padding: 15px;
    }

    .commentaire-pp {
        margin-bottom: 5px; /* Ajoute un peu d'espace sous la PP */
    }
    .commentaire-text {
        text-align: center; /* Centre le texte du commentaire */
    }

    /* Formulaires */
    form.add-comment-form {
        width: calc(100% - 40px); /* Prend 100% de la largeur moins 20px de chaque côté */
        margin: 30px auto; /* Centre le formulaire avec des marges auto */
        padding: 15px; /* Garde le padding interne */
        max-width: unset; /* S'assure que la max-width du grand écran n'interfère pas */
    }

    /* Styles spécifiques pour les sections détails sur mobile */
    .detail-summary { /* Ancien détail summary - peut être supprimé si non utilisé */
        padding: 12px 15px;
        font-size: clamp(1rem, 4vw, 1.5rem);
    }
    .toggle-icon {
        margin-left: 10px;
    }
    .detail-content { /* Ancien détail content - peut être supprimé si non utilisé */
        padding: 15px;
        font-size: clamp(0.85rem, 3.5vw, 1rem);
    }

    /* Styles spécifiques pour les NOUVELLES sections détails sur mobile */
    .main-toggle summary {
        padding: 10px 15px;
        font-size: clamp(1.1rem, 4vw, 1.5rem);
    }
    .main-content-area {
        padding: 10px;
    }
    .sub-toggle summary {
        padding: 8px 12px;
        font-size: clamp(0.85rem, 3.5vw, 1.1rem);
    }
    .content-wrapper {
        padding: 10px 12px;
        font-size: clamp(0.8rem, 3vw, 1rem);
    }
}

/* Pour les écrans moyens (576px à 991.98px) - tablettes */
@media (min-width: 576px) and (max-width: 991.98px) {
    /* AJOUT ICI DANS LA MEDIA QUERY POUR LE PADDING TOP DE LA SECTION PRÉSENTATION PERSONNELLE SUR TABLETTE */
    .portfolio .projet > .content.left {
        padding-top: 40px; /* Padding ajusté pour tablette */
    }

    .ligne {
        font-size: 1rem;
        margin: 35px 0;
        padding: 0 15px;
    }

    .hr_left,
    .hr_right {
        max-width: 40%;
    }

    .projet-detail-content {
        padding: 30px 15px;
    }

    .content {
        flex-direction: column; /* Conserver l'empilement vertical pour les tablettes aussi */
        gap: 30px;
        padding: 0 20px;
    }

    /* ****************************************************** */
    /* RÈGLES POUR FORCER IMAGE EN BAS SUR TABLETTE (PORTRAIT) */
    /* ****************************************************** */
    .content .text {
        order: 1; /* Texte en premier */
    }
    .content img,
    .content .images {
        order: 2; /* Image en deuxième (donc en bas du texte) */
    }
    /* ****************************************************** */

    .text {
        max-width: 700px; /* Peut être plus large sur tablette */
        text-align: center; /* Centre le texte aussi sur tablette */
    }

    .text h2 {
        font-size: clamp(1.8rem, 4vw, 2.2rem);
    }

    .text h3 {
        font-size: clamp(1.4rem, 3vw, 1.7rem);
    }

    .text p {
        font-size: clamp(0.95rem, 2vw, 1.1rem);
    }

    .content img {
        max-width: 450px; /* Les images peuvent être plus grandes sur tablette */
    }

    .images {
        flex-direction: column; /* Empilées verticalement */
        gap: 20px;
        align-items: center; /* Centre les images */
    }

    .commentaires {
        padding: 30px 15px;
    }

    .commentaire {
        gap: 15px;
        padding: 15px;
    }

    .commentaire-nom {
        font-size: 1.1rem;
    }
    .commentaire-message {
        font-size: 0.95rem;
    }

    /* Formulaires */
    form.add-comment-form {
        width: calc(100% - 60px); /* Prend 100% de la largeur moins 30px de chaque côté */
        margin: 30px auto; /* Centre le formulaire */
        padding: 20px;
        max-width: unset;
    }

    /* Styles spécifiques pour les sections détails sur tablette */
    .detail-summary { /* Ancien détail summary - peut être supprimé si non utilisé */
        padding: 15px 20px;
        font-size: clamp(1.1rem, 3vw, 1.7rem);
    }
    .detail-content { /* Ancien détail content - peut être supprimé si non utilisé */
        padding: 20px;
        font-size: clamp(0.9rem, 2vw, 1.1rem);
    }

    /* Styles spécifiques pour les NOUVELLES sections détails sur tablette */
    .main-toggle summary {
        padding: 12px 18px;
        font-size: clamp(1.1rem, 3vw, 1.7rem);
    }
    .main-content-area {
        padding: 12px;
    }
    .sub-toggle summary {
        padding: 10px 15px;
        font-size: clamp(0.9rem, 2.5vw, 1.15rem);
    }
    .content-wrapper {
        padding: 12px 15px;
        font-size: clamp(0.85rem, 1.8vw, 1.05rem);
    }
}

/* Pour les grands écrans (992px et +) - ordinateurs de bureau */
@media (min-width: 992px) {
    /* AJOUT ICI DANS LA MEDIA QUERY POUR LE PADDING TOP DE LA SECTION PRÉSENTATION PERSONNELLE SUR GRAND ÉCRAN */
    .portfolio .projet > .content.left {
        padding-top: 80px; /* Plus de padding sur grand écran */
    }

    .ligne {
        font-size: 1rem;
        margin: 50px 0;
    }

    .hr_left,
    .hr_right {
        flex: 1; /* Reprend la flexibilité pour l'HR */
        max-width: 45%; /* Limite pour ne pas qu'il soit trop long */
    }

    .projet-detail-content {
        padding: 60px 40px;
    }

    .content {
        flex-direction: row; /* Revenir à l'alignement horizontal sur grand écran */
        gap: 60px; /* Augmenter le gap pour plus d'espace */
        padding: 0; /* Pas de padding spécifique ici car le max-width est suffisant */
    }

    /*
        Ces règles sont essentielles pour que l'ordre des images (gauche/droite)
        soit respecté sur les grands écrans, car elles sont spécifiques aux classes .left/.right
        et DOIVENT annuler les ordres définis pour les mobiles.
    */
    .content .text {
        order: unset; /* Le texte retrouve son ordre naturel ou défini par left/right */
    }
    .content img,
    .content .images {
        order: unset; /* L'image retrouve son ordre naturel ou défini par left/right */
    }

    /* Les règles d'ordre spécifiques au grand écran sont toujours appliquées ici */
    .content.left .images {
        order: 2; /* Images à droite */
    }

    .content.right .images {
        order: 1; /* Images à gauche */
    }

    .text {
        text-align: left; /* Texte aligné à gauche sur grand écran */
        max-width: 500px; /* Largeur max initiale */
    }

    .text h2 {
        font-size: clamp(2rem, 3vw, 3rem); /* Plage plus large */
    }

    .text h3 {
        font-size: clamp(1.5rem, 2vw, 2rem);
    }

    .text p {
        font-size: clamp(1rem, 1.5vw, 1.2rem);
    }

    .content img {
        max-width: 400px; /* L'image peut être un peu plus grande */
    }

    .images {
        flex-direction: column; /* Empilées verticalement */
        gap: 30px; /* Plus d'espace entre les images */
        align-items: flex-start; /* Aligner les images à gauche dans leur colonne */
    }

    .commentaires {
        padding: 60px 40px;
    }

    .commentaire {
        gap: 20px;
        padding: 20px;
    }

    .commentaire-nom {
        font-size: 1.2rem;
    }
    .commentaire-message {
        font-size: 1rem;
    }

    /* Formulaires */
    form.add-comment-form {
        max-width: 600px; /* Reprendre la max-width sur les grands écrans */
        margin: 40px auto 60px; /* Centrer à nouveau */
        padding: 25px;
        width: auto; /* Revenir à auto pour laisser max-width dicter */
    }

    /* Styles spécifiques pour les NOUVELLES sections détails sur grand écran */
    .main-toggle summary {
        padding: 15px 20px;
    }
    .main-content-area {
        padding: 15px;
    }
    .sub-toggle summary {
        padding: 12px 18px;
    }
    .content-wrapper {
        padding: 15px 18px;
    }
}

/* Pour les très très grands écrans (plus de 1400px) - ajustements finaux optionnels */
@media (min-width: 1400px) {
    .content {
        max-width: 1300px; /* Augmente la largeur max du conteneur principal */
        gap: 80px; /* Encore plus d'espace entre le texte et l'image */
    }

    .content img {
        max-width: 450px; /* Les images peuvent être encore plus grandes */
    }
}