/*
 * LMI — zone des avis des lecteurs, alignée sur la maquette
 * 5-Composants-partages/Note-des-lecteurs.html (RatingPanel, comment = true).
 *
 * Le balisage reste celui de GeneratePress (comments.php) habillé par la
 * bibliotheque Eldorado (inc/bibliotheque/avis-lecteurs.php) : rien n'est
 * refait ici, tout est habillé. Les classes utilisées sont donc celles de
 * WordPress (.comment-list, .comment-respond, .comment-form) et de la
 * bibliotheque (.eldorado-bib-*). Les deux seules classes « lmi- » viennent
 * du mu-plugin (§16 de lmi-site.php) : .lmi-avis-synthese et
 * .lmi-avis-derniers.
 *
 * Ordre de la maquette : titre, synthèse, formulaire, « Derniers avis »,
 * liste des avis. L'ordre du document, lui, met la liste AVANT le
 * formulaire (c'est celui de WordPress) — d'où les `order` ci-dessous, qui
 * ne changent pas l'ordre de lecture au clavier de façon gênante : les deux
 * zones sont des régions distinctes, pas une suite de contrôles.
 *
 * RACINE DE LA ZONE — `.comments-area > [id="comments"]`, et non la classe
 * `.eldorado-bib-avis-lecteurs` du cœur. Mesuré : cette classe n'est posée
 * que là où le composant `avis-lecteurs` est DÉCLARÉ pour le gabarit, c'est
 * à dire sur les avis et les comparatifs. Sur un article ou un duel le cœur
 * ne branche pas son module (catalogue-notes.php ne l'autorise que pour
 * `avis` et `comparatif`) : la zone sort alors brute de WordPress — champs
 * à angles droits en police système, bouton gris, aucune carte. C'est ce
 * que le client a vu. Le sélecteur ci-dessus désigne exactement le même
 * élément dans les deux cas (vérifié au navigateur : sur un comparatif,
 * `.comments-area > [id="comments"]` ET `.eldorado-bib-avis-lecteurs`
 * renvoient le même nœud), donc l'habillage vaut partout sans rien forcer.
 *
 * ⚠️ Et SURTOUT : on ne déclare pas `avis-lecteurs` pour le gabarit article
 * pour obtenir la même chose. Le catalogue du cœur ne l'y autorise pas, et
 * une déclaration refusée est un signalement qui VIDE toutes les
 * déclarations du site (functions-bibliotheque.php). Habiller est sans
 * risque ; déclarer casserait tout.
 *
 * Boutons : la maquette peint le bouton d'envoi en #1E3A8A sur texte blanc.
 * En sombre, --eldorado-accent devient clair (#9db6ff) : on prend donc
 * --eldorado-en-tete-fond / -texte, qui gardent le bleu de marque dans les
 * DEUX thèmes, comme pour la newsletter et le podium du comparatif.
 */

/* ------------------------------------------------------------------ *
 * 1. La zone et l'ordre des blocs
 * ------------------------------------------------------------------ */

.comments-area > [id="comments"] {
    display: flex;
    flex-direction: column;
    /* Tout élément inattendu (navigation des commentaires, message
       « commentaires fermés ») passe à la fin plutôt que de remonter en
       tête, ce qui arriverait avec l'ordre 0 par défaut. */
}

.comments-area > [id="comments"] > * { order: 7; }
.comments-area > [id="comments"] > .comments-title { order: 1; }
.comments-area > [id="comments"] > .eldorado-bib-avis-lecteurs-tete { order: 2; }
.comments-area > [id="comments"] > .lmi-avis-synthese { order: 3; }
.comments-area > [id="comments"] > .comment-respond { order: 4; }
.comments-area > [id="comments"] > .lmi-avis-derniers { order: 5; }
.comments-area > [id="comments"] > .comment-list { order: 6; }

.comments-area > [id="comments"] > .comments-title {
    margin: 0 0 14px;
    font-family: var(--eldorado-police-titres);
    font-size: clamp(26px, 3.4vw, 32px);
    font-weight: 600;
    line-height: 1.2;
}

/* L'en-tête de la bibliothèque porte trois choses : la moyenne écrite, la
   règle de relecture et le remerciement après envoi. La maquette place la
   moyenne dans la carte de synthèse et la règle dans la carte du
   formulaire : les deux sont donc reprises ailleurs et masquées ici. Le
   remerciement, lui, reste — c'est le seul retour que reçoit le lecteur. */
.eldorado-bib-avis-lecteurs-tete {
    margin: 0;
}

/* La moyenne n'est masquée que si la carte de synthèse l'a reprise : sans
   avis, le cœur affiche à la place « Soyez le premier à donner votre
   avis », qui doit rester visible. */
.comments-area > [id="comments"]:has(.lmi-avis-synthese) .eldorado-bib-avis-lecteurs-moyenne {
    display: none;
}

.eldorado-bib-avis-lecteurs-tete > .eldorado-bib-avis-lecteurs-regle {
    display: none;
}

.eldorado-bib-avis-lecteurs-tete > .eldorado-bib-avis-lecteurs-moyenne {
    margin: 0 0 16px;
}

.eldorado-bib-avis-lecteurs-tete > .eldorado-bib-avis-lecteurs-merci {
    margin: 0 0 16px;
}

/* ------------------------------------------------------------------ *
 * 2. Carte de synthèse : la note en grand, les étoiles, la répartition
 * ------------------------------------------------------------------ */

.lmi-avis-synthese {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 28px;
    margin: 0 0 16px;
    padding: 22px 24px;
    border: 1px solid var(--eldorado-bordure);
    border-radius: 16px;
    background: var(--eldorado-surface);
}

.lmi-avis-synthese-note {
    flex: 0 0 150px;
    text-align: center;
}

.lmi-avis-synthese-chiffre {
    display: block;
    font-family: var(--eldorado-police-titres);
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    color: var(--eldorado-accent);
}

.lmi-avis-synthese-note .eldorado-bib-etoiles {
    justify-content: center;
    margin: 6px 0;
    font-size: 18px;
}

.lmi-avis-synthese-nombre {
    display: block;
    font-size: 14px;
    color: var(--eldorado-texte-doux);
}

.lmi-avis-synthese-repartition {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
}

.lmi-avis-synthese-ligne {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.lmi-avis-synthese-ligne > span:first-child {
    width: 62px;
    white-space: nowrap;
}

.lmi-avis-synthese-barre {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--eldorado-texte-doux) 20%, transparent);
}

.lmi-avis-synthese-barre > span {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: var(--eldorado-etoile);
}

.lmi-avis-synthese-ligne > span:last-child {
    width: 40px;
    text-align: right;
    color: var(--eldorado-texte-doux);
}

/* ------------------------------------------------------------------ *
 * 3. Carte du formulaire
 * ------------------------------------------------------------------ */

.comments-area > [id="comments"] > .comment-respond {
    margin: 0;
    padding: 22px 24px;
    border: 1px solid var(--eldorado-bordure);
    border-radius: 16px;
    background: var(--eldorado-surface);
    /* Le reset du thème impose border-radius: var(--border-radius) !important
       aux champs. On redéfinit la variable au lieu de surenchérir. */
    --border-radius: var(--eldorado-rayon-controle, 10px);
}

.comments-area > [id="comments"] > .comment-respond > .comment-reply-title {
    margin: 0 0 4px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
}

.comments-area > [id="comments"] .comment-reply-title small {
    font-weight: 400;
}

/* Replacement des champs dans l'ordre de la maquette : règle, note,
   Prénom | E-mail côte à côte, Votre avis, cookies, bouton. L'ordre du
   document est celui de WordPress (le champ de texte d'abord), d'où la
   grille à placements explicites. */
.comments-area > [id="comments"] .comment-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 6px;
}

.comments-area > [id="comments"] .comment-form > .lmi-avis-regle {
    grid-row: 1;
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--eldorado-texte-doux);
}

.comments-area > [id="comments"] .comment-form > .eldorado-bib-avis-lecteurs-note { grid-row: 2; }
.comments-area > [id="comments"] .comment-form > label[for="author"] { grid-row: 3; }
.comments-area > [id="comments"] .comment-form > input#author { grid-row: 4; }
.comments-area > [id="comments"] .comment-form > label[for="email"] { grid-row: 5; }
.comments-area > [id="comments"] .comment-form > input#email { grid-row: 6; }
.comments-area > [id="comments"] .comment-form > .comment-form-comment { grid-row: 7; }
.comments-area > [id="comments"] .comment-form > .comment-form-cookies-consent { grid-row: 8; }
.comments-area > [id="comments"] .comment-form > .form-submit { grid-row: 9; }

@media (min-width: 620px) {
    .comments-area > [id="comments"] .comment-form {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .comments-area > [id="comments"] .comment-form > .lmi-avis-regle,
    .comments-area > [id="comments"] .comment-form > .eldorado-bib-avis-lecteurs-note,
    .comments-area > [id="comments"] .comment-form > .comment-form-comment,
    .comments-area > [id="comments"] .comment-form > .comment-form-cookies-consent,
    .comments-area > [id="comments"] .comment-form > .form-submit {
        grid-column: 1 / -1;
    }
    .comments-area > [id="comments"] .comment-form > label[for="author"] { grid-column: 1; grid-row: 3; }
    .comments-area > [id="comments"] .comment-form > input#author { grid-column: 1; grid-row: 4; }
    .comments-area > [id="comments"] .comment-form > label[for="email"] { grid-column: 2; grid-row: 3; }
    .comments-area > [id="comments"] .comment-form > input#email { grid-column: 2; grid-row: 4; }
    .comments-area > [id="comments"] .comment-form > .comment-form-comment { grid-row: 5; }
    .comments-area > [id="comments"] .comment-form > .comment-form-cookies-consent { grid-row: 6; }
    .comments-area > [id="comments"] .comment-form > .form-submit { grid-row: 7; }
}

/* Espace entre les groupes : la grille garde 6px entre un libellé et son
   champ, les débuts de groupe reprennent 8px. */
.comments-area > [id="comments"] .comment-form > .eldorado-bib-avis-lecteurs-note,
.comments-area > [id="comments"] .comment-form > label[for="author"],
.comments-area > [id="comments"] .comment-form > label[for="email"],
.comments-area > [id="comments"] .comment-form > .comment-form-comment,
.comments-area > [id="comments"] .comment-form > .comment-form-cookies-consent,
.comments-area > [id="comments"] .comment-form > .form-submit {
    margin-top: 8px;
}

.comments-area > [id="comments"] .comment-form > .comment-form-comment {
    margin-bottom: 0;
}

.comments-area > [id="comments"] .comment-form :is(label, legend) {
    font-size: 14px;
    font-weight: 600;
}

/* `font: inherit` de la maquette : mesuré, les champs sortaient en
   -apple-system (la pile système du navigateur) au milieu d'une carte en
   Public Sans — visible dès qu'on clique dans « Votre avis ». */
.comments-area > [id="comments"] .comment-form :is(input[type="text"], input[type="email"], textarea) {
    padding: 12px;
    border: 1px solid var(--eldorado-bordure-forte);
    font-family: inherit;
    font-size: 16px;
}

/* La maquette montre quatre lignes ; WordPress en demande huit (rows="8"),
   ce qui ouvre une zone de texte deux fois trop haute dans la carte. */
.comments-area > [id="comments"] .comment-form textarea {
    height: 120px;
    min-height: 120px;
    resize: vertical;
}

/* « Votre note » et ses cinq étoiles sur une seule ligne. Le <legend> est
   sorti du flux par un float : dans un fieldset en display:flex, les
   navigateurs ne traitent pas la légende de la même façon. */
.comments-area > [id="comments"] .eldorado-bib-avis-lecteurs-note {
    margin: 8px 0 0;
}

.comments-area > [id="comments"] .eldorado-bib-avis-lecteurs-note > legend {
    float: left;
    width: auto;
    margin: 0 12px 0 0;
    padding: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 44px;
}

.comments-area > [id="comments"] .eldorado-bib-etoiles-saisie {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.comments-area > [id="comments"] .eldorado-bib-avis-lecteurs-note::after {
    content: "";
    display: block;
    clear: both;
}

.comments-area > [id="comments"] .eldorado-bib-etoiles-saisie label:hover {
    color: var(--eldorado-etoile);
}

/* ------------------------------------------------------------------ *
 * 3 bis. Les étoiles du formulaire quand la bibliothèque n'est pas branchée
 * ------------------------------------------------------------------ */

/* Sur un article ou un duel, le composant `avis-lecteurs` n'est pas déclaré :
   le cœur retombe sur son ancien champ de notation (css/ratings.css), un
   `div.star-container > div.star-position > div.star-rating` large de 6em,
   libellés `★` à 1,5em répartis en `space-around`, hors de la grille du
   formulaire. On lui donne le rendu du fieldset ci-dessus : même place dans
   la grille, mêmes cibles de 44 px, même doré. */
.comments-area > [id="comments"] .comment-form > .star-container {
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 12px;
    margin: 8px 0 0;
}

@media (min-width: 620px) {
    .comments-area > [id="comments"] .comment-form > .star-container {
        grid-column: 1 / -1;
    }
}

.comments-area > [id="comments"] .comment-form > .star-container > label {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 44px;
}

.comments-area > [id="comments"] .star-position {
    display: block;
}

.comments-area > [id="comments"] .star-rating {
    position: relative;
    width: auto;
    padding: 0;
    justify-content: flex-start;
    gap: 2px;
    font-size: inherit;
}

.comments-area > [id="comments"] .star-rating label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--eldorado-rayon-controle, 10px);
    /* Étoile pâle cernée de doré, comme la maquette et comme la boîte
       « Cette page vous a-t-elle été utile ? » (article.css, § 6). */
    color: var(--eldorado-bordure);
    -webkit-text-stroke: 1px var(--eldorado-etoile);
    font-size: 28px;
    line-height: 1;
}

/* Les mêmes étoiles, côté bibliothèque (avis, comparatif) : le cœur les
   peint en --eldorado-bordure-forte, un gris plein. Même traitement, pour
   que les deux formulaires du site soient identiques. */
.comments-area > [id="comments"] .eldorado-bib-etoiles-saisie label {
    color: var(--eldorado-bordure);
    -webkit-text-stroke: 1px var(--eldorado-etoile);
}

/* Le cœur peint le survol en --primary (le bleu des liens) ; l'aperçu doit
   annoncer la couleur de la note, pas celle d'un lien. L'ordre inverse de
   `.star-rating` (flex-direction: row-reverse) fait que « les suivantes dans
   le document » sont bien « celles de gauche » à l'écran. */
.comments-area > [id="comments"] .star-rating :checked ~ label,
.comments-area > [id="comments"] .star-rating label:hover,
.comments-area > [id="comments"] .star-rating label:hover ~ label {
    color: var(--eldorado-etoile);
}

/* Accessibilité : le cœur masque les boutons radio en `display: none`, donc
   ils sortent de l'ordre de tabulation et la note devient inatteignable sans
   souris. On les remet dans la page, invisibles, et on dessine le focus sur
   l'étoile. Le `!important` ne surenchérit pas pour le plaisir : il est le
   seul moyen de battre un `!important` du cœur (spécificité plus forte). */
.comments-area > [id="comments"] .star-rating input {
    display: block !important;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    clip-path: inset(50%);
}

.comments-area > [id="comments"] .star-rating input:focus-visible + label {
    outline: 2px solid var(--eldorado-focus);
    outline-offset: 2px;
}

.comments-area > [id="comments"] .comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
}

.comments-area > [id="comments"] .comment-form-cookies-consent input {
    flex: 0 0 auto;
    margin-top: 2px;
}

.comments-area > [id="comments"] .comment-form-cookies-consent label {
    font-weight: 400;
    color: var(--eldorado-texte-doux);
}

.comments-area > [id="comments"] .form-submit {
    margin-bottom: 0;
}

.comments-area > [id="comments"] .form-submit input[type="submit"] {
    min-height: 44px;
    padding: 13px 20px;
    border: 0;
    border-radius: var(--eldorado-rayon-controle, 10px);
    background: var(--eldorado-en-tete-fond, #1e3a8a);
    color: var(--eldorado-en-tete-texte, #ffffff);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

/* ------------------------------------------------------------------ *
 * 4. « Derniers avis » et les cartes d'avis
 * ------------------------------------------------------------------ */

.lmi-avis-derniers {
    margin: 22px 0 10px;
    font-size: 17px;
    font-weight: 800;
}

.comments-area > [id="comments"] > .comment-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.comments-area > [id="comments"] .comment-list li.comment {
    margin: 0;
    padding: 0;
    list-style: none;
}

.comments-area > [id="comments"] .comment-body {
    padding: 18px 20px;
    border: 1px solid var(--eldorado-bordure);
    border-radius: 16px;
    background: var(--eldorado-surface);
}

.comments-area > [id="comments"] .comment-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

/* Pastille à l'initiale du prénom : la maquette montre un rond coloré, pas
   une photo. Aucune requête réseau (cf. §16 du mu-plugin). */
.lmi-avis-pastille {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--eldorado-accent) 20%, transparent);
    color: var(--eldorado-accent);
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

.comments-area > [id="comments"] .comment-author-info {
    flex: 1 1 auto;
    min-width: 0;
}

.comments-area > [id="comments"] .comment-author {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.comments-area > [id="comments"] .comment-author .fn {
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
}

/* Le point médian séparait le nom des étoiles ; celles-ci passent à droite. */
.comments-area > [id="comments"] .comment-author .o50 {
    display: none;
}

.comments-area > [id="comments"] .comment-author > cite:last-child {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-style: normal;
}

.comments-area > [id="comments"] .comment-author .star-rated {
    font-size: 16px;
    color: var(--eldorado-etoile);
}

.comments-area > [id="comments"] .comment-metadata {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--eldorado-texte-doux);
}

.comments-area > [id="comments"] .comment-metadata a {
    color: inherit;
    text-decoration: none;
}

.comments-area > [id="comments"] .comment-metadata a:hover {
    text-decoration: underline;
}

/* GeneratePress encadre le texte du commentaire (.comment-content :
   padding 30px + bordure) : dans la maquette, le texte est posé à même la
   carte, sans second cadre. */
.comments-area > [id="comments"] .comment-content {
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    font-size: 16px;
    line-height: 1.6;
}

.comments-area > [id="comments"] .comment-content > p {
    margin: 0 0 8px;
}

.comments-area > [id="comments"] .comment-content > p:last-of-type {
    margin-bottom: 0;
}

.comments-area > [id="comments"] .comment-content .reply {
    display: block;
    margin-top: 10px;
    font-size: 14px;
}

.comments-area > [id="comments"] .comment-content .reply a {
    color: var(--eldorado-texte-doux);
    text-decoration: none;
}

.comments-area > [id="comments"] .comment-content .reply a:hover {
    color: var(--eldorado-lien);
    text-decoration: underline;
}

/* Réponses imbriquées : la maquette n'en montre pas ; on garde un décalage
   discret plutôt que de les aplatir. */
.comments-area > [id="comments"] .comment-list .children {
    margin: 12px 0 0 clamp(12px, 4vw, 32px);
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (max-width: 619px) {
    .lmi-avis-synthese {
        padding: 18px;
    }
    .lmi-avis-synthese-note {
        flex: 1 1 100%;
    }
    .comments-area > [id="comments"] > .comment-respond {
        padding: 18px;
    }
    .comments-area > [id="comments"] .comment-body {
        padding: 16px;
    }
}