/* ══════════════════════════════════════════════════════════
   RÉCAPITULATIF DE FIN DE COMPARATIF
   Encadré « si vous ne deviez en retenir qu'un », partagé par single.php
   (sur interrupteur ACF) et le bloc Gutenberg acf/recapitulatif.

   Il reprend le langage visuel du « notre choix » de la table de synthèse
   — filet vert en tête, pastille verte — pour que le lecteur reconnaisse
   la même désignation à deux endroits de la page.

   Mobile-first, spacings sur la grille 8px, ombres par variables.

   Le bloc est rendu dans .def-content et .article-content, dont les règles
   visent p, a et div avec la même spécificité que les nôtres et sont
   chargées après. Le double-classe reprend la main partout où ces éléments
   sont touchés, faute de quoi le rendu dépend de l'ordre des feuilles.
   ══════════════════════════════════════════════════════════ */

.recap-comparatif {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-s);
    margin-top: var(--space-xl);
    padding: var(--space-m);
    border-top: 3px solid var(--green-dark);
    border-radius: var(--radius-card);
    background: var(--tertiary-bg);
    box-shadow: var(--soft-shadow);
    text-align: center;
}

/* ── Intitulé ──────────────────────────────────────────────────── */

/* Pastille pleine plutôt que texte coloré : le contraste seul ne suffit
   pas à signaler un rôle, et le blanc sur --green-dark tient 7,8:1. */
.recap-comparatif .recap-comparatif__intro {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin: 0;
    padding: 4px 12px;
    border-radius: var(--radius-badge);
    background: var(--green-dark);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
    color: var(--white);
}

.recap-comparatif .recap-comparatif__intro > i {
    font-size: 14px;
}

/* ── Produit désigné ───────────────────────────────────────────── */

.recap-comparatif .recap-comparatif__nom {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: var(--green-dark);
}

.recap-comparatif .recap-comparatif__atout {
    margin: 0;
    padding: 4px 12px;
    border-radius: var(--radius-badge);
    background: rgba(54, 92, 2, 0.08);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    color: var(--green-dark);
}

/* Le verdict est le seul bloc de prose de l'encadré : centré, il devenait
   pénible à lire dès trois lignes. Il reste donc aligné à gauche, comme le
   disclaimer et la bio d'auteur l'ont déjà tranché. */
.recap-comparatif .recap-comparatif__verdict {
    width: 100%;
    text-align: left;
}

.recap-comparatif .recap-comparatif__verdict p {
    margin: 0 0 var(--space-xs);
    font-size: 0.9375rem;
    line-height: 1.65;
    text-align: left;
    color: var(--text-color);
}

.recap-comparatif .recap-comparatif__verdict p:last-child {
    margin-bottom: 0;
}

/* ── Appel à l'action ──────────────────────────────────────────── */

/* _base.css impose display:block, width:max-content et line-height:1 à tout
   lien. Sur un bouton, cela écrase le centrage et écrase le texte : les
   trois propriétés sont reprises ici, pas seulement la largeur. */
.recap-comparatif .recap-comparatif__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    width: 100%;
    /* Zone tactile conforme au critère WCAG 2.5.8 (24px minimum), portée
       ici à la cible confortable de 48px. */
    min-height: 48px;
    padding: var(--space-xs) var(--space-m);
    font-size: 0.9375rem;
    line-height: 1.4;
    text-align: center;
}

/* ── Retour à la table ─────────────────────────────────────────── */

.recap-comparatif .recap-comparatif__retour {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    text-align: center;
}

.recap-comparatif .recap-comparatif__retour a {
    display: inline-block;
    width: auto;
    min-height: 48px;
    /* Le lien doit rester lisible comme un lien : la charte retire le
       soulignement à tous les liens, or celui-ci n'a ni fond ni bordure
       pour signaler sa nature. */
    line-height: 48px;
    color: var(--secondary-brown);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.recap-comparatif .recap-comparatif__retour a:hover {
    color: var(--brown-deep);
}

.recap-comparatif .recap-comparatif__retour a:focus-visible {
    outline: 2px solid var(--green-dark);
    outline-offset: 4px;
    border-radius: var(--low-radius);
}

/* ── Tablette et au-delà ───────────────────────────────────────── */

@media (min-width: 768px) {

    .recap-comparatif {
        padding: var(--space-l);
    }

    .recap-comparatif .recap-comparatif__nom {
        font-size: 1.5rem;
    }

    /* Sur une ligne large, un bouton pleine largeur cesse de lire comme un
       bouton. Il se dimensionne sur son texte. */
    .recap-comparatif .recap-comparatif__cta {
        width: auto;
        min-width: 240px;
    }
}

/* Les encarts de fin d'article se resserrent et se centrent sur grand écran :
   étalés sur toute la largeur du contenu, ils pesaient autant que l'article
   qu'ils accompagnent. Même traitement que .auteur-bloc et .def-disclaimer. */
@media (min-width: 992px) {

    .recap-comparatif {
        max-width: var(--encart-width);
        margin-inline: auto;
    }
}