/* ═══════════════════════════════════════════════════════════════════════════
   ML Avis — présentation
   Reprend les classes tp-testi-* du thème (fond brun, cartes translucides).
   Ne sont définies ici que les règles propres au plugin.

   CONTRASTES — le fond effectif d'une carte est #674127 (brun #5C3317 + 7 %
   de blanc). Mesures sur ce fond :
     --creme  #F7F0E6 → 7,86:1   ✓
     --creme2 #EDE3D4 → 7,00:1   ✓
     --ocre-l #D9A44E → 3,97:1   ✗ pour du texte (suffisant pour une icône)
   L'ocre du thème est donc éclairci en #E3B569 (4,69:1) pour tout ce qui est
   texte — le nom de l'auteur en particulier, en 12 px.
   ═══════════════════════════════════════════════════════════════════════════ */

.ml-avis {
    --mla-texte:  var(--creme, #F7F0E6);
    --mla-doux:   var(--creme2, #EDE3D4);
    --mla-accent: #E3B569;
}

/* ── En-tête : note globale ─────────────────────────────────────────────── */
.ml-avis__global {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: .6rem;
    margin: .75rem 0 .35rem; color: var(--mla-texte);
}
.ml-avis__score { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.ml-avis__count { font-size: .85rem; color: var(--mla-doux); }

/* ── Mentions de transparence (obligatoires à proximité des avis) ───────── */
.ml-avis__control {
    max-width: 62ch; margin: .5rem auto 0;
    font-size: .8rem; line-height: 1.6; color: var(--mla-doux); text-align: center;
}
.ml-avis__badge { color: var(--mla-accent); font-weight: 700; }
.ml-avis__sep   { opacity: .55; margin: 0 .35rem; }
.ml-avis__legal-link {
    color: var(--mla-accent); text-decoration: underline;
    text-underline-offset: 2px; margin-left: .4rem;
}
.ml-avis__legal-link:hover,
.ml-avis__legal-link:focus-visible { color: var(--mla-texte); }

/* ── Grille ─────────────────────────────────────────────────────────────── */
.ml-avis__grid { list-style: none; margin: 2rem 0 0; padding: 0; }
.ml-avis__card { display: flex; flex-direction: column; }
.ml-avis__card--hidden { display: none; }
.ml-avis__text { flex: 1 1 auto; margin-bottom: 1.1rem; }

/* ── Pied de carte ──────────────────────────────────────────────────────── */
.ml-avis__foot { display: flex; align-items: flex-start; gap: .85rem; }
.ml-avis__avatar {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--mla-accent); color: #4A2A12;
    font-weight: 700; font-size: 1rem;
}
.ml-avis__meta { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.ml-avis .tp-testi-author { color: var(--mla-accent); }
.ml-avis__product {
    font-size: .78rem; color: var(--mla-doux);
    text-decoration: underline; text-underline-offset: 2px;
}
.ml-avis__product:hover,
.ml-avis__product:focus-visible { color: var(--mla-texte); }
.ml-avis__dates { font-size: .72rem; color: var(--mla-doux); opacity: .9; }
.ml-avis__report {
    font-size: .72rem; color: var(--mla-doux);
    text-decoration: underline; text-underline-offset: 2px; opacity: .85;
}
.ml-avis__report:hover,
.ml-avis__report:focus-visible { color: var(--mla-texte); opacity: 1; }

/* ── Navigation ─────────────────────────────────────────────────────────── */
.ml-avis__nav {
    display: flex; align-items: center; justify-content: center;
    gap: 1rem; margin-top: 1.75rem;
}
.ml-avis__arrow {
    width: 44px; height: 44px;              /* cible tactile — WCAG 2.5.5 */
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; cursor: pointer;
    background: transparent; color: var(--mla-texte);
    border: 1px solid rgba(227, 181, 105, .55);
    transition: background .2s, border-color .2s;
}
.ml-avis__arrow:hover { background: rgba(255, 255, 255, .09); border-color: var(--mla-accent); }
.ml-avis__arrow:focus-visible { outline: 3px solid var(--mla-accent); outline-offset: 2px; }
.ml-avis__position { font-size: .8rem; color: var(--mla-doux); min-width: 4.5rem; text-align: center; }

/* ── Bloc Google : liens et code QR ─────────────────────────────────────────
   Ligne souple et centrée. Un seul élément reste au milieu ; deux ou trois se
   recentrent d'eux-mêmes et passent à la ligne si la place manque. Aucune
   largeur n'est figée : c'est le contenu qui décide. */
.ml-avis__google {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 1.75rem;
    margin-top: 1.75rem;
}
.ml-avis__google-link {
    display: inline-flex; align-items: center; gap: .45rem;
    min-height: 44px;                 /* cible tactile — WCAG 2.5.5 */
    padding: .3rem 0;
    font-size: .85rem; color: var(--mla-accent);
    text-decoration: underline; text-underline-offset: 3px;
}
.ml-avis__google-link:hover,
.ml-avis__google-link:focus-visible { color: var(--mla-texte); }
.ml-avis__google-link:focus-visible {
    outline: 3px solid var(--mla-accent);
    outline-offset: 3px;
    border-radius: 2px;
}
/* Le lien de dépôt est l'action attendue : on l'affirme un peu plus. */
.ml-avis__google-link--deposer { font-weight: 600; }

/* ── Code QR ────────────────────────────────────────────────────────────── */
.ml-avis__qr {
    display: inline-flex; flex-direction: column; align-items: center; gap: .4rem;
}
.ml-avis__qr img,
.ml-avis__qr svg {
    display: block;
    background: #fff;                 /* un code QR a besoin d'un fond clair */
    padding: 6px;
    border-radius: 4px;
    height: auto;
}
.ml-avis__qr-legende {
    font-size: .72rem; line-height: 1.4;
    color: var(--mla-doux); text-align: center;
    max-width: 16ch;
}
.ml-avis__empty {
    max-width: 60ch; margin: 1.5rem auto 0;
    text-align: center; color: var(--mla-doux); line-height: 1.7;
}

@media (max-width: 640px) {
    .ml-avis__control { font-size: .75rem; }
    .ml-avis__foot    { gap: .6rem; }
}

/* Sous 500 px : le code QR est retiré — on ne peut pas le scanner avec
   l'appareil qui l'affiche, et il occuperait la place utile. Les liens texte
   remplissent alors seuls leur office, empilés pour rester confortables. */
@media (max-width: 500px) {
    .ml-avis__qr     { display: none; }
    .ml-avis__google { flex-direction: column; gap: .35rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Pages « informations » et « signaler »
   Bandeau brun + grille de cartes au liseré ocre : même langage visuel que les
   encarts d'engagement de la page d'accueil.
   ═══════════════════════════════════════════════════════════════════════════ */
.ml-avis-page { padding: 0 0 4rem; }

.ml-avis-hero {
    background: var(--brun, #5C3317);
    color: var(--creme, #F7F0E6);
    padding: 3.25rem 0 3rem;
    margin-bottom: 3rem;
    text-align: center;
}
.ml-avis-hero__label {
    display: inline-block;
    font-size: .72rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
    color: #E3B569;                       /* 4,69:1 sur le brun */
    margin-bottom: .75rem;
}
.ml-avis-hero__title {
    font-family: var(--serif, Georgia, serif);
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    line-height: 1.15; margin: 0 0 1rem; color: var(--creme, #F7F0E6);
}
.ml-avis-hero__title em { color: #E3B569; font-style: italic; }
.ml-avis-hero__intro {
    max-width: 62ch; margin: 0 auto;
    font-size: 1rem; line-height: 1.75; color: var(--creme2, #EDE3D4);
}
.ml-avis-hero__stat {
    display: inline-flex; align-items: baseline; gap: .5rem;
    margin: 1.5rem 0 0; padding: .55rem 1.25rem;
    border: 1px solid rgba(227, 181, 105, .45); border-radius: 999px;
}
.ml-avis-hero__stat strong { font-size: 1.35rem; color: #E3B569; }
.ml-avis-hero__stat span   { font-size: .85rem; color: var(--creme2, #EDE3D4); }

/* Grille de cartes — deux colonnes dès que la place le permet. */
.ml-avis-page__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1.25rem;
    align-items: start;
}
.ml-avis-page__bloc {
    position: relative;
    background: var(--blanc, #fff);
    border-left: 3px solid var(--ocre, #C4862A);
    border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
    padding: 1.5rem 1.75rem 1.5rem 1.5rem;
    box-shadow: 0 1px 3px rgba(61, 53, 48, .06);
}
.ml-avis-page__num {
    position: absolute; top: 1.1rem; right: 1.25rem;
    font-family: var(--serif, Georgia, serif);
    font-size: 1.6rem; line-height: 1;
    color: var(--ocre, #C4862A); opacity: .28;
}
.ml-avis-page__bloc h2 {
    font-family: var(--serif2, Georgia, serif);
    font-size: 1.08rem; line-height: 1.3;
    color: var(--brun, #5C3317);
    margin: 0 2.5rem .5rem 0;
}
.ml-avis-page__bloc p {
    margin: 0; line-height: 1.7; font-size: .93rem;
    color: var(--ardoise, #3D3530);
}

.ml-avis-page__narrow { max-width: 46rem; }

.ml-avis-page__back { margin-top: 2.5rem; text-align: center; }
.ml-avis-page__back-link {
    display: inline-block; padding: .55rem .25rem;
    color: #A06820;                        /* 4,67:1 sur fond clair */
    text-decoration: underline; text-underline-offset: 3px;
}
.ml-avis-page__back-link:hover,
.ml-avis-page__back-link:focus-visible { color: var(--brun, #5C3317); }

.ml-avis-page__notice {
    padding: .9rem 1.1rem; margin-bottom: 1.5rem;
    background: #FAF3E8; border-left: 3px solid #A06820; border-radius: 0 4px 4px 0;
}
.ml-avis-page__quote {
    margin: 0 0 1.5rem; padding: 1rem 1.25rem;
    background: #FAF3E8; border-left: 3px solid #C4862A; border-radius: 0 4px 4px 0;
    font-style: italic;
}
.ml-avis-page__quote cite { display: block; margin-top: .5rem; font-size: .82rem; font-style: normal; }
.ml-avis-page__form label { display: block; font-weight: 600; margin-bottom: .3rem; }
.ml-avis-page__form textarea,
.ml-avis-page__form input[type="email"] {
    width: 100%; padding: .7rem .9rem;
    border: 1px solid #D8CBB6; border-radius: 4px; font: inherit;
}
.ml-avis-page__form textarea:focus,
.ml-avis-page__form input[type="email"]:focus {
    outline: 3px solid #A06820; outline-offset: 1px;
}
/* Pot de miel : hors écran plutôt que display:none, que certains robots détectent. */
.ml-avis-hp { position: absolute !important; left: -9999px !important; }