/* ============================================================
   AU FIL DES ÂMES — assets/css/pensee_lire.css
   Page de lecture d'une pensée (esprit revue littéraire).
   ============================================================ */

.page-pensee { padding: 3rem 0 5rem; }

.pensee-lire { margin-top: 1.5rem; }

.pensee-lire-label {
    font-family: var(--font-sans);
    font-size: var(--taille-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texte-discret);
    margin: 0 0 1.5rem;
}

.pensee-lire-citation {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    line-height: 1.4;
    font-style: italic;
    color: var(--texte-principal);
    margin: 0 0 1.25rem;
}

.pensee-lire-auteur {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--texte-secondaire);
    margin: 0 0 .3rem;
}
.pensee-lire-source { font-style: italic; color: var(--texte-discret); }

.pensee-lire-courant {
    font-family: var(--font-sans);
    font-size: var(--taille-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 2.25rem;
}

.pensee-lire-explication {
    font-family: var(--font-lecture);   /* était var(--font-serif) */
    font-size: 1.15rem;
    line-height: 1.85;
    color: var(--texte-principal);
    margin-bottom: 2.5rem;
}

/* ── Encart « L'auteur » ───────────────────────────────────── */
.pensee-auteur-encart {
    background: var(--accent-doux);
    border-left: 3px solid var(--accent);
    border-radius: var(--rayon-lg);
    padding: 1.6rem 1.85rem;
    margin: 2.5rem 0;
}
.pensee-auteur-titre {
    font-family: var(--font-sans);
    font-size: var(--taille-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 .6rem;
}
.pensee-auteur-nom {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    color: var(--texte-principal);
    margin: 0 0 .25rem;
}
.pensee-auteur-reperes {
    font-family: var(--font-sans);
    font-size: var(--taille-sm);
    color: var(--texte-discret);
    margin: 0 0 1rem;
}
.pensee-auteur-notice {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--texte-secondaire);
}

/* ── Pied / archive ────────────────────────────────────────── */
.pensee-lire-pied {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bordure-douce);
}
.pensee-archive-lien {
    font-family: var(--font-sans);
    font-size: var(--taille-sm);
    color: var(--accent);
    text-decoration: none;
    transition: text-decoration var(--transition);
}
.pensee-archive-lien:hover { text-decoration: underline; }

/* ── Cas vide ──────────────────────────────────────────────── */
.pensee-vide {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--texte-secondaire);
}

@media (max-width: 640px) {
    .page-pensee { padding: 2rem 0 4rem; }
    .pensee-auteur-encart { padding: 1.3rem 1.3rem; }
    .pensee-lire-explication { font-size: 1.08rem; }
}


/* ============================================================
   RÉACTIONS — repris de articles_lire.css pour un rendu identique.
   Seule différence : .zone-reactions épouse la colonne .contenu-texte
   (pas de max-width/auto ici), pour s'aligner sous la pensée.
   (Dette CSS v3.5 : extraire ces styles dans un reactions.css partagé.)
   ============================================================ */

.zone-reactions {
    margin: 3rem 0 0;
    padding-top: 2rem;
    border-top: 1px solid var(--bordure-douce, #e8e3da);
}

.titre-reactions {
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--texte, #1e1c1a);
    margin: 0 0 1.5rem;
}

.reactions-invite {
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--texte-doux, #6c6660);
    margin: 0 0 1rem;
}

/* --- La palette : le dictionnaire que le membre lit avant de choisir --- */
.reactions-palette {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.9rem;
    margin: 0 0 1rem;
}

.reaction-form { margin: 0; }

.reaction-carte {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 1.1rem 0.9rem 1rem;
    background: #ffffff;
    border: 1px solid var(--bordure-douce, #e8e3da);
    border-radius: 14px;
    cursor: pointer;
    text-align: center;
    font-family: var(--font-sans, 'DM Sans', sans-serif);
    transition: border-color 0.2s ease, box-shadow 0.2s ease,
                transform 0.2s ease, background-color 0.2s ease;
}

.reaction-carte:hover {
    border-color: var(--accent, #4a6741);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.reaction-carte.choisie {
    border-color: var(--accent, #4a6741);
    background: var(--accent-doux, #eef1ea);
    box-shadow: inset 0 0 0 1px var(--accent, #4a6741);
}

.reaction-picto {
    font-size: 1.9rem;
    line-height: 1;
    color: var(--accent, #4a6741);
}
.reaction-picto img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
}

.reaction-nom {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--texte, #1e1c1a);
}

.reaction-phrase {
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--texte-doux, #6c6660);
}

.reactions-aide,
.reactions-note {
    font-family: var(--font-sans, 'DM Sans', sans-serif);
    font-size: 0.88rem;
    color: var(--texte-doux, #6c6660);
    margin: 0.5rem 0 0;
}
.reactions-note a { color: var(--accent, #4a6741); font-weight: 500; }

.reactions-vide {
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--texte-doux, #6c6660);
    margin: 0.5rem 0 0;
}

/* --- La liste des réacteurs : picto + pseudo, phrase révélée au survol --- */
.reactions-liste {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.reaction-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.4rem;
    border-bottom: 1px solid var(--bordure-douce, #e8e3da);
}
.reaction-item:last-child { border-bottom: none; }

.reaction-item-picto {
    flex: 0 0 auto;
    width: 1.8rem;
    text-align: center;
    font-size: 1.25rem;
    color: var(--accent, #4a6741);
    cursor: help;
}
.reaction-item-picto img {
    width: 28px; height: 28px; object-fit: contain; vertical-align: middle;
}

.reaction-item-auteur {
    flex: 0 0 auto;
    font-family: var(--font-sans, 'DM Sans', sans-serif);
    font-weight: 500;
    color: var(--accent, #4a6741);
    text-decoration: none;
}
.reaction-item-auteur:hover { text-decoration: underline; }

.reaction-item-phrase {
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--texte-doux, #6c6660);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.reaction-item:hover  .reaction-item-phrase,
.reaction-item:focus-within .reaction-item-phrase {
    opacity: 1;
    transform: translateX(0);
}

/* --- Repli « voir N autres réactions » (sans JS) --- */
.reactions-plus { margin-top: 0.25rem; }
.reactions-plus > summary {
    cursor: pointer;
    list-style: none;
    display: inline-block;
    padding: 0.4rem 0;
    font-family: var(--font-sans, 'DM Sans', sans-serif);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--accent, #4a6741);
}
.reactions-plus > summary::-webkit-details-marker { display: none; }
.reactions-plus > summary::marker { content: ''; }
.reactions-plus > summary:hover { text-decoration: underline; }
.reactions-plus[open] > summary { margin-bottom: 0.25rem; }

/* Emoji rendu droit dans le <i> (sinon il hérite de l'italique) */
.reaction-emoji { font-style: normal; }

@media (max-width: 700px) {
    .reactions-palette {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.7rem;
    }
    .reaction-item { flex-wrap: wrap; }
    .reaction-item-phrase {
        opacity: 1;
        transform: none;
        flex-basis: 100%;
        padding-left: 2.5rem;
    }
}


/* ============================================================
   COMMENTAIRES — repris de articles_lire.css (fil plat, pas de
   réponse d'auteur). .zone-commentaires épouse la colonne de
   lecture (pas de max-width/auto ici).
   (Dette CSS v3.5 : à mutualiser avec les articles.)
   ============================================================ */

.zone-commentaires {
    margin: 3rem 0 0;
    padding: 2rem 0 0;
    border-top: 1px solid var(--bordure-douce);
}

.titre-commentaires {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--texte-principal);
    margin-bottom: 1.5rem;
}

.commentaires-vide,
.commentaires-note {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--texte-secondaire);
    margin-bottom: 1.5rem;
}
.commentaires-note a { color: var(--accent); border-bottom: 1px solid var(--accent); text-decoration: none; }

.commentaire {
    background: var(--fond-carte);
    border: 1px solid var(--bordure-douce);
    border-radius: var(--rayon);
    padding: 1.1rem 1.3rem;
    margin-bottom: 1rem;
    box-shadow: var(--ombre-carte);
}

.commentaire-entete {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    margin-bottom: .5rem;
}

.commentaire-auteur {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--taille-sm);
    color: var(--accent);
    text-decoration: none;
}
.commentaire-auteur:hover { text-decoration: underline; }

.commentaire-date {
    font-size: var(--taille-xs);
    color: var(--texte-discret);
}

.commentaire-corps {
    line-height: 1.65;
    color: var(--texte-principal);
}

.form-supprimer-commentaire { margin-top: .6rem; }

.lien-supprimer-commentaire {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--taille-sm);
    color: var(--texte-discret);
    transition: color var(--transition);
}
.lien-supprimer-commentaire:hover { color: var(--accent-rose, #a86b6b); }

.form-commentaire {
    margin-top: 1.8rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bordure-douce);
}

.form-commentaire label {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--texte-principal);
    margin-bottom: .6rem;
}

.form-commentaire textarea {
    width: 100%;
    font-family: var(--font-sans);
    font-size: var(--taille-md, 1rem);
    line-height: 1.6;
    color: var(--texte-principal);
    background: var(--fond-carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: .8rem 1rem;
    resize: vertical;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-commentaire textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-doux);
}

.form-commentaire .aide {
    font-size: var(--taille-sm);
    color: var(--texte-discret);
    margin: .5rem 0 1rem;
}

/* Bouton « Envoyer » (même style que sur les articles) */
.btn-principal {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    background: var(--accent, #4a6741);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: var(--font-sans, 'DM Sans', sans-serif);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
}
.btn-principal:hover {
    background: var(--accent-fonce, #3c5435);
    box-shadow: 0 4px 12px rgba(74, 103, 65, 0.25);
}
.btn-principal:active { transform: translateY(1px); }