/* ==========================================================================
   Monsieur Moto : pages d'avis
   Gabarits : gabarits/avis-produit.html et gabarits/avis-index.html.
   Complète styles.css et article.css.
   ========================================================================== */

/* Titre en deux temps : le nom du modèle, puis son étiquette au marqueur */
.article-entete .avis-titre { max-width: none; margin-bottom: 1.2rem; }
.avis-titre__suite { display: block; width: fit-content; margin-top: .75rem; padding: .25rem .8rem; font-family: var(--police-marqueur); font-weight: 400; font-size: clamp(1.1rem, 2.2vw, 1.55rem); line-height: 1.25; letter-spacing: 0; text-transform: none; background: var(--encre); color: var(--jaune); transform: rotate(-1.5deg); }

/* Titres : coupures de ligne équilibrées */
.page-avis .titre { text-wrap: balance; }

/* En-tête d'un avis : titre, photos, repères et liens */
.avis-entete { display: grid; gap: 1.5rem; }
@media (min-width: 960px) {
  .avis-entete { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-rows: auto 1fr; grid-template-areas: "titre visuel" "achat visuel"; gap: 1.5rem 3rem; align-items: start; }
  .avis-entete__titre { grid-area: titre; }
  .avis-entete__visuel { grid-area: visuel; }
  .avis-entete__achat { grid-area: achat; }
}
.avis-entete__type { display: inline-flex; align-items: center; gap: .4rem; }
.avis-entete__type svg { width: 1.3rem; height: 1.3rem; color: var(--encre); }

/* Photos : cadre principal et vignettes */
.avis-entete__visuel { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: .8rem; align-items: end; }
.avis-entete__cadre { grid-column: 1 / -1; aspect-ratio: 1; max-height: 520px; width: 100%; padding: clamp(1rem, 3vw, 2rem); background: var(--papier); border: var(--bordure) solid var(--encre); border-radius: 22px; box-shadow: 8px 8px 0 var(--jaune); }
.avis-entete__photo { width: 100%; height: 100%; object-fit: contain; }
.avis-entete__visuel figcaption { font-size: .75rem; color: var(--gris); text-align: right; }
.galerie { display: flex; gap: .6rem; }
.galerie a { display: block; width: 76px; height: 76px; padding: .3rem; background: var(--papier); border: 2px solid rgba(25, 25, 25, .25); border-radius: 12px; transition: border-color .15s ease, transform .15s ease; }
.galerie a:hover { border-color: var(--encre); transform: translateY(-2px); }
.galerie a[aria-current="true"] { border-color: var(--encre); box-shadow: 3px 3px 0 var(--jaune); }
.galerie img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 420px) { .galerie a { width: 64px; height: 64px; } }

/* Repères chiffrés */
.reperes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 620px) and (max-width: 959px) { .reperes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.reperes li { display: flex; flex-direction: column; gap: .2rem; padding: .7rem .85rem .75rem; background: var(--papier); border: 2px solid var(--encre); border-radius: 14px; }
.reperes__libelle { font-family: var(--police-titre); font-weight: 700; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.reperes__valeur { font-family: var(--police-titre); font-weight: 800; font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1; }
.reperes__detail { font-size: .8rem; line-height: 1.3; color: var(--gris); }
.reperes li:first-child { background: var(--jaune); }
.reperes li:first-child .reperes__libelle, .reperes li:first-child .reperes__detail { color: var(--encre); }
.avis-entete__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 1.4rem 0 0; }

/* Sélections qui citent le modèle */
.avis-selections { margin-top: 1.25rem; }
.avis-selections__titre { margin: 0 0 .5rem; font-family: var(--police-titre); font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.avis-selections ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.avis-selections a { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .8rem .3rem .35rem; background: var(--papier); border: 2px solid var(--encre); border-radius: 999px; font-size: .9rem; font-weight: 600; text-decoration: none; transition: background-color .15s ease; }
.avis-selections a:hover { background: var(--jaune); }
.avis-selections__rang { flex: none; min-width: 1.6rem; height: 1.6rem; padding: 0 .3rem; display: grid; place-items: center; font-family: var(--police-titre); font-weight: 800; font-size: .9rem; line-height: 1; background: var(--jaune); border: 2px solid var(--encre); border-radius: 999px; }
/* Simple mention : pas de rang, la pastille reprend sa marge et s'efface un peu */
.avis-selections .avis-selections__cite { padding-left: .8rem; background: transparent; border-style: dashed; }
.avis-selections .avis-selections__cite:hover { background: var(--jaune); }

/* Verdict : avis en bref, pour qui, points forts et limites */
.avis-verdict { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.avis-verdict__grille { display: grid; gap: 2rem; }
@media (min-width: 900px) { .avis-verdict__grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3rem; align-items: start; } }
.avis-verdict .titre { max-width: none; }
.avis-verdict__texte > p:not(.surtitre) { font-size: 1.1rem; }
.pour-qui { margin: 1.5rem 0 0; display: grid; gap: .75rem; }
.pour-qui div { padding: .7rem 1rem; background: rgba(254, 232, 39, .25); border-left: 4px solid var(--jaune); }
.pour-qui .pour-qui__non { background: var(--creme); border-left-color: var(--gris-clair); }
.pour-qui dt { margin-bottom: .15rem; font-family: var(--police-titre); font-weight: 800; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.pour-qui dd { margin: 0; font-size: .98rem; }
.avis-verdict__points { display: grid; gap: 1rem; }
.bloc-points { background: var(--papier); border: 2px solid var(--encre); border-radius: 18px; box-shadow: 3px 3px 0 var(--encre); overflow: hidden; }
.bloc-points h3 { padding: .6rem 1.1rem; font-family: var(--police-titre); font-weight: 800; font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid var(--encre); }
.bloc-points--forts h3 { background: var(--jaune); }
.bloc-points--faibles h3 { background: var(--creme); }
.bloc-points ul { list-style: none; margin: 0; padding: .9rem 1.1rem 1rem; display: grid; gap: .5rem; }
.bloc-points li { position: relative; padding-left: 1.5rem; font-size: .98rem; }
.bloc-points li::before { position: absolute; left: 0; top: 0; font-family: var(--police-marqueur); font-size: 1.1rem; line-height: 1.4; }
.bloc-points--forts li::before { content: "+"; }
.bloc-points--faibles li::before { content: "−"; }

/* Analyse détaillée : un bloc par thème, sur deux colonnes quand la place le permet */
.avis-detail { padding-top: 0; }
.avis-detail .titre { max-width: none; }
.avis-detail__texte { max-width: none; display: grid; gap: 1.5rem 3rem; }
@media (min-width: 860px) { .avis-detail__texte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.avis-detail__texte section { padding-top: 1rem; border-top: var(--bordure) solid var(--encre); }
.avis-detail__texte h3, .avis-detail__texte h3:first-of-type { margin: 0 0 .6rem; font-size: 1.45rem; }
.avis-detail__texte p { margin: 0; }

/* Fiche technique */
.fiche-technique { margin: 0; padding: .4rem 1.25rem .6rem; background: var(--papier); border: var(--bordure) solid var(--encre); border-radius: var(--rayon); box-shadow: 6px 6px 0 var(--encre); }
@media (min-width: 820px) { .fiche-technique { columns: 2; column-gap: 2.5rem; } }
.fiche-technique div { display: grid; grid-template-columns: minmax(7.5rem, 36%) 1fr; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid rgba(25, 25, 25, .15); break-inside: avoid; }
.fiche-technique dt { font-family: var(--police-titre); font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.fiche-technique dd { margin: 0; font-weight: 500; }
.comparatif .titre { max-width: none; }

/* Alternatives : les cartes de l'article, sur fond blanc */
.avis-alternatives { background: var(--papier); border: 0; }
.avis-alternatives .titre { max-width: none; }
.avis-alternatives .mention { transition: transform .2s ease, box-shadow .2s ease; }
.avis-alternatives .mention:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--encre); }

/* Questions */
.avis-questions { padding-block: clamp(2.5rem, 5vw, 3.5rem); border-top: var(--bordure) solid var(--encre); }
.avis-questions .titre { max-width: none; }

/* Rappel final : résumé et prix */
.avis-rappel__grille { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 860px) { .avis-rappel__grille { grid-template-columns: 1.2fr .8fr; gap: 3rem; } }
.avis-rappel .titre { max-width: none; margin-bottom: .75rem; }
.avis-rappel .lien-simple { display: inline-block; margin-top: .5rem; }
.avis-rappel__offre { display: grid; gap: .5rem; justify-items: start; padding: 1.4rem 1.5rem 1.6rem; background: var(--papier); color: var(--encre); border: var(--bordure) solid var(--jaune); border-radius: 18px; box-shadow: 8px 8px 0 var(--jaune); --ombre-couleur: var(--encre); }
.avis-rappel .avis-rappel__libelle { margin: 0; font-family: var(--police-titre); font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.avis-rappel .avis-rappel__prix { margin: 0 0 .6rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; color: var(--gris); }
.avis-rappel__prix strong { font-family: var(--police-titre); font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--encre); }
.avis-rappel__prix .prix-bloc__remise { color: var(--encre); }

/* Liste des avis */
.avis-liste { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.avis-liste--creme { background: var(--creme); border-block: var(--bordure) solid var(--encre); }
.avis-liste .titre { max-width: none; }
.avis-cartes { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .avis-cartes { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 1.1rem; } }
.avis-carte { position: relative; display: flex; flex-direction: column; padding: .9rem .9rem 1rem; background: var(--papier); border: 2px solid var(--encre); border-radius: 18px; box-shadow: 3px 3px 0 var(--encre); transition: transform .2s ease, box-shadow .2s ease; }
.avis-carte:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--encre); }
.avis-carte__image { width: 100%; height: 140px; object-fit: contain; margin-bottom: .75rem; }
.avis-liste--creme .avis-carte__image { mix-blend-mode: multiply; }
.avis-carte__rang { position: absolute; top: .6rem; left: .6rem; z-index: 1; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; font-family: var(--police-marqueur); font-size: 1.05rem; background: var(--jaune); border: 2px solid var(--encre); border-radius: 50%; transform: rotate(-6deg); }
.avis-carte__type { margin: 0 0 .25rem; font-family: var(--police-titre); font-weight: 700; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.avis-carte h3 { font-family: var(--police-titre); font-weight: 800; font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1; text-transform: uppercase; }
.avis-carte h3 a { text-decoration: none; }
/* Toute la carte est cliquable */
.avis-carte h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.avis-carte__etiquette { margin: .4rem 0 0; font-size: .92rem; line-height: 1.35; color: var(--gris); }
.avis-carte__prix { margin: auto 0 0; padding-top: .7rem; font-family: var(--police-titre); font-weight: 800; font-size: 1.2rem; }
.avis-liste__suite { padding-block: clamp(2.5rem, 5vw, 3.5rem); }

@media (prefers-reduced-motion: reduce) { .galerie a, .avis-carte, .avis-alternatives .mention { transition: none; } }

@media print {
  .galerie, .avis-entete__actions, .avis-rappel__offre .bouton { display: none !important; }
  .avis-entete__cadre, .bloc-points, .fiche-technique, .avis-carte { box-shadow: none; }
}