/* Repères, prix situé, « Est-ce qu'il passe chez vous ? », source des caractéristiques, Comparer (N) : inc/reperes.php. */

/* 1. Collection: one compact row inside the grid, after the first results; scrolls sideways on a phone. */
.reperes { grid-column: 1 / -1; min-width: 0; margin: 0.25rem 0; padding: 0.9rem 0 0.4rem; border-block: 1px solid var(--trait); }
.reperes[hidden] { display: none; }
.reperes__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.75rem; margin-bottom: 0.6rem; }
.reperes__titre { margin: 0; font: 650 var(--t-xs)/1.2 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--anthracite); }
.reperes__base { margin: 0; font: 400 var(--t-xs)/1.3 var(--sans); color: var(--feutre); }
.reperes__liste { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 0.75rem; margin: 0; padding: 0 0 0.5rem; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.repere { scroll-snap-align: start; min-width: 0; }
.repere__lien { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto auto auto; column-gap: 0.6rem; align-items: start; height: 100%; padding: 0.5rem; border: 1px solid var(--trait); border-radius: 10px; background: var(--blanc); color: var(--anthracite); text-decoration: none; }
.repere__lien:hover, .repere__lien:focus-visible { border-color: var(--anthracite); }
.repere__lien img { grid-row: 1 / span 4; width: 56px; height: 42px; object-fit: cover; border-radius: 6px; background: var(--platre); }
.repere__type { font: 650 var(--t-xs)/1.2 var(--sans); color: var(--feutre); }
.repere__valeur { font: 650 var(--t-md)/1.25 var(--sans); }
.repere__nom { font: 400 var(--t-xs)/1.3 var(--sans); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.repere__sur { font: 400 0.72rem/1.3 var(--sans); color: var(--feutre); }
@media (max-width: 899px) { .reperes__liste { grid-auto-columns: 78%; } }
@media (min-width: 900px) { .reperes__liste { grid-auto-columns: minmax(0, 1fr); overflow: visible; } }

/* 2. Fiche: one discreet line under the price; its room is kept while another format loads (no jump). */
.prix-situe { display: flex; align-items: center; gap: 0.35rem; margin: 0.45rem 0 0; font: 400 var(--t-xs)/1.35 var(--sans); color: var(--feutre); }
.prix-situe.est-vide { visibility: hidden; }
.prix-situe [data-ps-texte] { min-width: 0; }
.prix-situe .info { flex: none; font-size: var(--t-sm); }
/* Phone: the fiche's column is reordered (main.css, round 10): the line stays right under the price. */
@media (max-width: 900px) { .fiche__tete .achat > .prix-situe { order: 9; margin: -0.35rem 0 0; } }
/* The « i » sits at the end of the line: its bubble opens to the left, never past the screen's edge (360 px). */
@media (max-width: 900px) { .prix-situe .info__bulle { left: auto; right: -6px; transform: none; } .prix-situe .info__bulle::before { left: auto; right: 12px; transform: rotate(45deg); } }

/* 3. Fiche: « Est-ce qu'il passe chez vous ? », one line until opened. */
.passe { margin: 0.75rem 0 0; border: 1px solid var(--trait); border-radius: 10px; background: var(--blanc); }
.passe > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; padding: 0.7rem 2.2rem 0.7rem 0.9rem; cursor: pointer; list-style: none; position: relative; font: 650 var(--t-sm)/1.3 var(--sans); }
.passe > summary::-webkit-details-marker { display: none; }
.passe > summary::after { content: ""; position: absolute; right: 0.95rem; top: 50%; width: 0.5rem; height: 0.5rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg); }
.passe[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.passe > summary small { font: 400 var(--t-xs)/1.3 var(--sans); color: var(--feutre); }
.passe__corps { padding: 0 0.9rem 0.9rem; }
.passe__format { margin: 0 0 0.6rem; font: 400 var(--t-xs)/1.4 var(--sans); color: var(--feutre); }
.passe__champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 0.75rem; }
.passe__champ { display: flex; flex-direction: column; justify-content: space-between; gap: 0.2rem; min-width: 0; font: 400 var(--t-xs)/1.3 var(--sans); }
.passe__champ small { color: var(--feutre); }
.passe__saisie { display: flex; align-items: center; gap: 0.35rem; }
.passe__saisie input { width: 100%; min-width: 0; min-height: 44px; padding: 0.4rem 0.6rem; border: 1px solid var(--trait); border-radius: 8px; font: 400 var(--t-md)/1.2 var(--sans); background: #fff; color: var(--anthracite); }
.passe__resultat { margin: 0.7rem 0 0; padding: 0; list-style: none; font: 400 var(--t-sm)/1.4 var(--sans); }
.passe__resultat:empty { display: none; }
.passe__resultat li { padding: 0.15rem 0 0.15rem 1.1rem; position: relative; }
.passe__resultat li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.55rem; height: 0.55rem; border-radius: 50%; }
.passe__ok::before { background: var(--vert-ok); }
.passe__non::before { background: var(--rouge-non); }
.passe__verif::before { background: var(--moutarde); }
.passe__note { margin: 0.6rem 0 0; font: 400 0.72rem/1.4 var(--sans); color: var(--feutre); }
.passe__salon { margin: 0.6rem 0 0; }

/* 4. Fiche: one source line at the head of the characteristics, a small marker only where it matters. */
.caracs-source { margin: -0.4rem 0 0.6rem; font: 400 var(--t-xs)/1.4 var(--sans); color: var(--feutre); }
.caracs-marque { color: var(--bleu); font-weight: 650; cursor: help; }

/* 5. /ma-selection/: « Comparer (N) », as quiet as the other actions. */
.selection__action--comparer[hidden] { display: none; }

/* /ma-selection/ on a phone (Romain 01/10 16 h 46): the head actions aligned left, icon and text on one line, short
   labels; 2 even columns (a label too long for its column wraps, still aligned left); « Vider la liste » apart, a quiet text link at the end. */
@media (max-width: 600px) {
  .selection__tete .selection__barre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.75rem; align-items: center; }
  .selection__tete .selection__barre[hidden] { display: grid; }
  .selection__tete .selection__action { justify-content: flex-start; min-height: 38px; text-align: left; font: 600 0.8rem/1.2 var(--sans); }
  .selection__tete .selection__action .icone { flex: none; width: 18px; height: 18px; }
  .selection__tete .selection__action > span { min-width: 0; }
  .selection__tete .selection__action--vider { grid-column: 1 / -1; order: 99; justify-self: start; min-height: 32px; margin: 0.15rem 0 0; font: 500 var(--t-xs)/1.2 var(--sans); color: var(--feutre); text-decoration: underline; text-underline-offset: 3px; }
  .selection__tete .selection__barre .selection__retour, .selection__tete .selection__barre .partage--panneau { grid-column: 1 / -1; }
}
@media (max-width: 380px) { .selection__tete .selection__barre { gap: 0 0.6rem; } .selection__tete .selection__action { font-size: 0.76rem; gap: 0.35rem; } }