/* Essais moto detailed page */
.essais-hero,
.essais-grid { max-width: var(--largeur-site, 1200px); margin: 0 auto 30px; padding: 0 20px; }
.essais-hero { margin-top: 10px; }
/* Bloc carbone : aplat opaque, arete vive, plus de cerne lime decoratif.
   Le lime revient uniquement par la barre de course sous le titre. */
.hero-content { padding: 46px 24px; border-radius: var(--radius-lg); background: var(--carbon); border: 1px solid var(--border-color); box-shadow: none; text-align: left; }
/* Fin du tout-centre : la barre de course se pose au debut du titre. */
.hero-title { margin: 0 0 var(--space-3); }
.hero-subtitle { margin: 0; max-width: var(--container-text); color: var(--muted); }
.essais-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 620px)); justify-content: center; gap: 22px; }
/* Carte au repos : surface opaque, arete vive, aucune ombre diffuse.
   Le lime n'apparait qu'au survol. */
.essai-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 22px; box-shadow: none; text-align: left; transition: background .25s ease, border-color .25s ease; }
.essai-card:hover { background: var(--card-bg-hover); border-color: var(--accent-line); }
.essai-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
/* Petite pastille d'etat : c'est l'un des rares endroits ou le lime a sa place
   (surface minuscule), le filet reste donc accent. */
.badge { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: var(--radius-pill); background: var(--card-bg-hover); color: var(--accent-text); border: 1px solid var(--accent-line); font-size: var(--text-xs); font-weight: 800; }
.spec-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pros-cons ul { margin: 0; padding-left: 16px; display: block; }
@media (max-width: 900px) { .essais-grid { grid-template-columns: 1fr; } .pros-cons { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .essais-hero, .essais-grid { padding: 0 12px; } .hero-content, .essai-card { padding: 20px 16px; } }

/* ---- Bande tablette ----
   Ces grilles passaient a une colonne des 768px (900px pour certaines), soit
   en pleine tablette : les cartes prenaient toute la largeur et la page
   devenait une longue colonne. Deux colonnes sont retablies jusqu'a 600px,
   ou une colonne unique devient reellement justifiee.
   Regle ajoutee en fin de fichier : a specificite egale, elle l'emporte sur
   la media query d'origine par l'ordre de declaration. */
@media (min-width: 601px) and (max-width: 900px) {
  .essais-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   QUAND UNE FICHE DEVIENT UN PANNEAU
   --------------------------------------------------------------------------
   Sur cette page, chaque section ne contient QU'UNE carte. Une fois que
   vivant.js la classe `groupe-plein`, cette carte n'est plus un objet dans une
   page : elle EST l'ecran. Mesure de depart, en 1920x1080 : un panneau haut de
   1026px contenant 443px de contenu (43 %), dans une carte plafonnee a 620px
   de large et centree. Un petit objet flottant au milieu d'un ecran entier.

   Trois consequences, et une seule idee derriere elles : ce qui etait une
   carte doit se comporter comme une page.

   Rien ici ne s'applique hors panneau : sans JavaScript, ou sur un bloc trop
   court pour meriter un ecran, la carte d'origine reste exactement ce qu'elle
   etait.
   ========================================================================== */

/* 1. La fiche cesse d'etre une carte.
      Un cadre dessine autour d'un contenu qui occupe deja tout l'ecran ne
      separe plus rien : le panneau se detache par son recouvrement, pas par
      son filet. C'est la regle que vivant.css applique deja a l'appel a
      l'action, reprise ici pour la meme raison.
      Le survol part avec : il changeait le fond et le filet de la carte, ce
      qui, sur une surface plein ecran, allumerait la page entiere au passage
      de la souris pour un bloc qui n'est meme pas cliquable. */
.a-heros-fixe .feuille-contenu > section.groupe-plein > .essai-card,
.a-heros-fixe .feuille-contenu > section.groupe-plein > .essai-card:hover {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* La carte occupe la largeur du panneau au lieu de rester bornee a 620px. */
.a-heros-fixe .feuille-contenu > section.groupe-plein.essais-grid {
  grid-template-columns: minmax(0, 1fr);
}

/* 2. Le nom de la machine passe a l'echelle du panneau.
      vivant.css pose l'echelle des titres de panneau sur l'enfant DIRECT de la
      section, et laisse volontairement les titres de CARTE a leur echelle
      propre : une carte est un objet dans une page, pas une annonce de page.
      Ici l'exception est justifiee et strictement bornee a cette page : la
      carte etant seule sur son ecran, son titre EST l'annonce de l'ecran. Le
      poser en `section-header` par-dessus aurait ecrit deux fois "Kawasaki
      Z500" sur le meme ecran.
      L'alignement passe en haut : le pave badge + nom se lit depuis sa
      premiere ligne, quel que soit le nombre de lignes du nom. */
.a-heros-fixe .feuille-contenu > section.groupe-plein .essai-head {
  align-items: flex-start;
}
.a-heros-fixe .feuille-contenu > section.groupe-plein .essai-head h2 {
  font-size: clamp(1.75rem, 2.6vw, 2.75rem);
  line-height: 1.12;
  margin-block: 0;
}

/* 3. La fiche technique devient la typographie du panneau.
      -----------------------------------------------------------------------
      C'est le geste de la page, et il vient du dispositif du site plutot que
      d'un effet ajoute. Les quatre panneaux se remplacent AU MEME ENDROIT de
      l'ecran, et les quatre motos portent les MEMES quatre mesures. En posant
      ces mesures a position constante, le defilement fait changer les chiffres
      sur place : 167 kg devient 169, puis 168, puis 212. Le systeme de
      panneaux transforme une fiche technique en comparateur, sans une ligne de
      JavaScript -- et ce sont exactement les quatre nombres qui decident d'un
      premier achat.

      `tabular-nums` n'est pas un detail de finition, c'est ce qui fait tenir
      l'effet : avec des chiffres de largeurs inegales, "47,5" et "42" ne
      commencent pas au meme point et la colonne tremble d'un panneau a
      l'autre.

      Les deux filets encadrent la bande pour la donner a lire comme un releve
      et non comme une liste. Un filet, pas quatre separateurs de colonnes :
      la lecture se fait deja par les etiquettes.

      `auto-fit` plutot qu'un nombre fixe de colonnes : quatre de front sur un
      panneau large, deux sur un telephone, sans media query. */
.a-heros-fixe .feuille-contenu > section.groupe-plein .spec-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: clamp(14px, 2vw, 32px);
  margin-block: clamp(24px, 3.4vh, 48px);
  padding-block: clamp(18px, 2.6vh, 32px);
  border-block: 1px solid var(--border-color);
  /* Borne mesuree, pas choisie : sans elle, le panneau faisant 1870px de large,
     les quatre colonnes s'etablissaient a 415px chacune. Quatre nombres separes
     par un demi-metre d'ecran ne se lisent plus comme un releve, ils se lisent
     comme quatre elements sans rapport -- et la comparaison d'un panneau au
     suivant, qui est tout l'interet, ne se fait plus d'un coup d'oeil. */
  max-width: 880px;
}
.a-heros-fixe .feuille-contenu > section.groupe-plein .spec-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.22em;
}
.a-heros-fixe .feuille-contenu > section.groupe-plein .spec-chiffre {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: clamp(2rem, 3.4vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.a-heros-fixe .feuille-contenu > section.groupe-plein .spec-unite {
  font-size: clamp(0.9rem, 1.1vw, 1.15rem);
  font-weight: 600;
  color: var(--accent-text);
}
/* L'etiquette passe a la ligne seule : `flex-basis: 100%` la fait rompre sous
   le couple chiffre + unite sans avoir a fermer un conteneur de plus.

   ELLE DOIT TENIR SUR UNE LIGNE sur un panneau large, et ce n'est pas une
   question de gout. Le panneau centre son contenu : une etiquette qui passe a
   deux lignes rend la carte plus haute, donc la fait DEMARRER PLUS HAUT, et la
   bande de mesures se decale par rapport aux autres panneaux. Mesure faite :
   "4 cylindres brides" coutait 13px de decalage sur le quatrieme essai, le
   seul qui repliait. Raccourci en "4 cylindres" -- le bridage etait de toute
   facon deja dit deux fois sur cet ecran, par le surtitre et par la pastille. */
.a-heros-fixe .feuille-contenu > section.groupe-plein .spec-nom {
  flex-basis: 100%;
  margin-top: 0.35em;
  font-size: var(--text-xs, 13px);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* 3 bis. La photo de la machine, quand elle existe.
   -------------------------------------------------------------------------
   Le vide de ces panneaux n'est pas d'abord vertical, il est LATERAL : le
   texte tient dans une colonne de 880px au milieu d'un panneau de 1870. La
   photo occupe cette moitie droite restee blanche, ce qui est sa vraie
   justification ici, bien avant l'ornement.

   `:has(.essai-photo)` : la regle ne s'arme QUE sur une fiche qui porte
   reellement une photo. Une fiche sans image garde exactement la mise en page
   d'aujourd'hui, en une colonne, sans emplacement vide a combler. C'est ce qui
   permet d'illustrer les essais un par un, sans que les autres attendent.

   La photo occupe toutes les lignes de la colonne 2, le texte reste en
   colonne 1. `align-items: start` maintient le texte en haut : sans lui, une
   photo plus haute que le texte centrerait ce dernier et deplacerait la bande
   de mesures, dont toute la valeur est de ne pas bouger d'un panneau a
   l'autre. Le rapport de forme etant le meme partout, la hauteur reste
   identique sur les quatre ecrans, et l'alignement tient.

   Une lisiere plutot qu'une ombre : sur le carbone #0B0B0B, une ombre noire
   est invisible.

   POURQUOI UN CALAGE ABSOLU, et non une grille a deux colonnes. Essaye
   d'abord, la grille a produit un vrai defaut : `grid-row: 1 / -1` compte le
   `-1` sur la grille EXPLICITE, or aucune n'etait declaree. La photo
   n'occupait donc que la premiere ligne, qu'elle gonflait a 587px, et poussait
   tout le texte dessous : carte de 1100px dans un panneau de 1026, le verdict
   passait sous l'ecran. Y remedier demandait soit de figer le nombre de lignes
   (fragile des qu'on ajoute un element), soit d'envelopper le texte dans un
   conteneur (donc de restructurer les quatre fiches).

   Le calage absolu n'a ni l'un ni l'autre : la photo sort du flux, la hauteur
   de la carte reste EXACTEMENT celle du texte, et l'alignement de la bande de
   mesures est donc preserve par construction, sans rien avoir a recalculer.
   Illustrer un essai ne demande alors qu'UNE balise a deposer n'importe ou
   dans la fiche.

   `top` et `bottom` a zero plutot qu'un rapport de forme : la photo prend la
   hauteur de la carte, identique sur les quatre panneaux, et `object-fit:
   cover` recadre ce qu'on lui donne. Le format du fichier fourni n'a donc pas
   a etre exact.

   Le retrait a droite n'est pas decoratif : sans lui, sur un panneau etroit,
   le texte (880px) et la photo (45 %) se recouvriraient. Exprime en
   pourcentage, il fait retrecir le texte en meme temps que la photo. */
.a-heros-fixe .feuille-contenu > section.groupe-plein > .essai-card:has(.essai-photo) {
  position: relative;
  padding-right: 48%;
}
.a-heros-fixe .feuille-contenu > section.groupe-plein .essai-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 45%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

/* Sous 900px la fiche redevient une colonne : deux colonnes y donneraient une
   photo de 150px de large. La photo reprend sa place dans le flux, juste sous
   le nom de la machine, ou elle sert d'accroche plutot que de renfort. */
@media (max-width: 900px) {
  .a-heros-fixe .feuille-contenu > section.groupe-plein > .essai-card:has(.essai-photo) {
    padding-right: 0;
  }
  .a-heros-fixe .feuille-contenu > section.groupe-plein .essai-photo {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    margin-block: clamp(16px, 2vh, 24px) 0;
  }
}

/* 4. Le reste respire a la mesure de l'ecran gagne. */
.a-heros-fixe .feuille-contenu > section.groupe-plein .pitch {
  max-width: var(--container-text, 52ch);
  margin-block: 0.6em 0;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  color: var(--text-secondary);
}
/* Les deux listes s'alignent sur la meme colonne que la bande de mesures :
   sans borne, elles s'etiraient sur toute la largeur du panneau et le bloc
   perdait son bord droit commun. */
.a-heros-fixe .feuille-contenu > section.groupe-plein .pros-cons {
  gap: clamp(14px, 3vw, 48px);
  max-width: 880px;
}
/* Le verdict reserve DEUX lignes, meme quand il n'en occupe qu'une.
   -------------------------------------------------------------------------
   C'est ce qui tient l'alignement de la bande de mesures d'un panneau a
   l'autre, et la cause est contre-intuitive : le verdict est le DERNIER bloc
   de la carte, donc en dessous de la bande. Mais le panneau CENTRE son
   contenu, alors une carte plus haute demarre plus haut, et tout ce qu'elle
   contient remonte -- y compris ce qui precede le bloc fautif.
   Mesure : le quatrieme essai a un avis de deux lignes (54px contre 27px), sa
   carte faisait 547px contre 520px, et sa bande tombait 13px plus haut que les
   trois autres, soit exactement la moitie de l'ecart. Reserver la hauteur du
   cas le plus long coute 27px de blanc sur trois panneaux a moitie vides, ce
   qui ne se voit pas, et protege l'alignement de toute reecriture future.
   `lh` vaut une ligne de ce bloc ; la valeur en `em` reste comme repli. */
.a-heros-fixe .feuille-contenu > section.groupe-plein .verdict {
  margin-block: clamp(18px, 2.6vh, 32px) 0;
  max-width: var(--container-text, 52ch);
  min-height: 3.4em;
  min-height: 2lh;
}