/* Eye Five 2026 — page Revendeurs, présentation B « Répertoire » (25/09/2026).
   Choix de Maxime sur le banc 49-page-revendeurs : la recherche écrite comme une phrase, un index
   des régions collé à gauche avec une petite France qui s'allume, des lignes filetées. */

.rv-page {
  --rv-entete: 4.75rem;          /* hauteur de l'en-tête collant du site (mesurée par le script) */
  --rv-filet: #E4DFCF;           /* filet clair entre deux lignes (crème assombri) */
  --rv-sourd: #7C766A;           /* texte secondaire */
  --rv-creme-fonce: #E9E3CF;
}

/* ---- En-tête et recherche -------------------------------------------------------------- */

.rv-entete { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(1.75rem, 3.5vw, 3rem); }
.rv-entete .titre-affiche { margin-bottom: clamp(1.75rem, 3.5vw, 3rem); }
@media (max-width: 599px) { .rv-entete .titre-affiche { font-size: min(var(--t-affiche), 9.7vw); } }

.rv-recherche { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.4rem; margin: 0; font-family: var(--font-titre); font-size: var(--t-36); text-transform: uppercase; line-height: 1.1; }
.rv-recherche__debut { white-space: nowrap; }
.rv-recherche__champ { position: relative; display: block; flex: 1 1 12ch; max-width: 30rem; min-width: 0; }
.rv-recherche__loupe {
  position: absolute; left: 0; top: 50%; width: 0.72em; height: 0.72em; transform: translateY(-50%);
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; pointer-events: none;
}
.rv-recherche input {
  width: 100%; font: inherit; text-transform: uppercase; color: var(--charbon);
  padding: 0.12em 0 0.18em 1.2em; background: transparent;
  border: 0; border-bottom: 2px solid var(--charbon); border-radius: 0; -webkit-appearance: none; appearance: none;
  transition: border-color 0.25s var(--courbe);
}
.rv-recherche input::placeholder { color: #BDB6A4; opacity: 1; }
.rv-recherche input:focus { outline: none; border-color: var(--bordeaux); }
.rv-recherche input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 0.5em; height: 0.5em; cursor: pointer; background: var(--charbon);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rv-recherche__geo {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.1rem; padding: 0 1.3rem 0 1.05rem;
  border: 1px solid var(--bordeaux); border-radius: 999px; color: var(--bordeaux);
  font-family: var(--font-texte); font-size: var(--t-12); font-weight: 500; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  transition: background-color 0.35s var(--courbe), color 0.35s var(--courbe);
}
.rv-recherche__geo svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.4; flex: none; }
.rv-recherche__geo .plein { fill: currentColor; stroke: none; }
.rv-recherche__geo:hover, .rv-recherche__geo:focus-visible, .rv-recherche__geo[aria-pressed="true"] { background: var(--bordeaux); color: var(--creme); }
.rv-recherche__geo.est-en-cours svg { animation: rv-viser 1.4s var(--courbe) infinite; }
@keyframes rv-viser { 50% { transform: scale(0.8) rotate(45deg); } }
@media (max-width: 599px) {
  .rv-recherche { font-size: var(--t-30); }
  .rv-recherche__debut { flex-basis: 100%; }
}

.rv-etat { font-size: var(--t-14); margin: 1.2rem 0 0; min-height: 1.5em; }
.rv-etat strong { font-weight: 600; }
.rv-bouton-texte { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; color: var(--bordeaux); }
.rv-etat .rv-bouton-texte { margin-left: 0.35rem; }

/* ---- Index : vignette de la France et régions -------------------------------------------- */

.repertoire {
  display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 0 clamp(2rem, 4.5vw, 4.5rem);
  border-top: var(--trait); padding-bottom: var(--section);
}
.repertoire__index {
  position: sticky; top: calc(var(--rv-entete) + 1.5rem); align-self: start; padding-top: 1.75rem;
  max-height: calc(100vh - var(--rv-entete) - 2rem); overflow: auto; scrollbar-width: thin; overscroll-behavior: contain;
}
.repertoire__vignette { background: var(--creme); padding: 0.9rem 0.8rem; margin-bottom: 1.25rem; }
.repertoire__carte { width: 100%; height: auto; display: block; overflow: visible; }
.repertoire__carte path { fill: var(--blanc); stroke: #D9D1B8; stroke-width: 0.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: fill 0.35s var(--courbe); }
.repertoire__carte path[data-nombre] { fill: var(--rv-creme-fonce); cursor: pointer; }
.repertoire__carte path[data-nombre]:hover { fill: #D8CFB4; }
.repertoire__carte path.est-actif { fill: var(--bordeaux); }
.repertoire__carte .carte__points circle { fill: var(--charbon); pointer-events: none; }
.repertoire__carte .carte__repere { fill: none; stroke: var(--bordeaux); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.repertoire__carte .carte__vous { fill: var(--navy); stroke: var(--blanc); stroke-width: 2; vector-effect: non-scaling-stroke; }

.repertoire__regions, .repertoire__deps { list-style: none; margin: 0; padding: 0; }
.repertoire__regions a { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; text-decoration: none; }
.repertoire__region > a {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.7rem 0 0.45rem; border-top: 1px solid var(--rv-filet);
}
.repertoire__region:first-child > a { border-top: 0; }
.repertoire__deps { display: none; padding: 0 0 0.5rem; }
.repertoire__region.est-ouverte .repertoire__deps { display: block; }
.repertoire__deps a { position: relative; font-size: var(--t-14); padding: 0.2rem 0 0.2rem 0.95rem; }
.repertoire__deps a::before { content: ''; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: transparent; transition: background-color 0.3s; }
.repertoire__deps a.est-actif { color: var(--bordeaux); }
.repertoire__deps a.est-actif::before { background: var(--bordeaux); }
.repertoire__regions a:hover { color: var(--bordeaux); }
.repertoire__regions a.est-absent { color: #C3BCA9; }
.repertoire__nombre { font-family: var(--font-texte); font-size: var(--t-12); font-weight: 400; letter-spacing: 0.02em; color: var(--rv-sourd); font-variant-numeric: tabular-nums; }
.repertoire__index.est-sourd .repertoire__regions { opacity: 0.45; }

/* ---- L'annuaire ------------------------------------------------------------------------ */

.repertoire__corps { min-width: 0; }
.rv-region {
  display: flex; align-items: baseline; gap: 0.75rem; margin: 3.25rem 0 0; padding: 0 0 0.5rem;
  font-family: var(--font-texte); font-size: var(--t-12); font-weight: 600; letter-spacing: 0.18em; line-height: 1.5; text-transform: uppercase;
  scroll-margin-top: calc(var(--rv-entete) + 1rem);
}
.rv-region::after { content: ''; order: 1; flex: 1; border-bottom: 1px dotted var(--charbon); transform: translateY(-0.25em); }
.rv-region__compte { order: 2; font-weight: 400; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.rv-region:first-of-type { margin-top: 1.9rem; }

.rv-groupe { margin-top: 1.5rem; scroll-margin-top: calc(var(--rv-entete) + 1rem); }
.rv-groupe__titre { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 0.7rem; font-size: var(--t-36); padding: 0 0 0.7rem; border-bottom: 2px solid var(--charbon); }
.rv-groupe__code {
  font-family: var(--font-texte); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em;
  border: 1px solid currentColor; border-radius: 999px; padding: 0.2em 0.55em 0.15em; transform: translateY(-0.2em);
}
.rv-groupe__compte { font-family: var(--font-texte); font-size: var(--t-12); font-weight: 500; letter-spacing: 0.14em; margin-left: auto; color: var(--rv-sourd); }

.rv {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) minmax(0, 1.15fr) 8.5rem;
  grid-template-areas: "ville nom adresse actions" "ville nom distance actions";
  column-gap: 1.5rem; align-items: baseline;
  padding: 0.95rem 0.6rem; margin: 0 -0.6rem; border-bottom: 1px solid var(--rv-filet);
  transition: background-color 0.3s var(--courbe);
  scroll-margin-top: calc(var(--rv-entete) + 6rem);
}
.rv:hover { background: var(--creme); }
.rv__ville { grid-area: ville; margin: 0; font-size: var(--t-12); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bordeaux); }
.rv--suite .rv__ville { visibility: hidden; }
.rv__nom { grid-area: nom; font-size: 1.05rem; line-height: 1.12; letter-spacing: 0.02em; }
.rv__adresse { grid-area: adresse; margin: 0; font-size: var(--t-14); line-height: 1.45; }
.rv__distance { grid-area: distance; margin: 0.3rem 0 0; font-size: var(--t-12); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--navy); }
.rv__actions { grid-area: actions; margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.rv__lien {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: var(--t-12); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid currentColor; padding: 0.15em 0 0.25em;
}
.rv__lien[data-itineraire]::after {
  content: ''; width: 0.62em; height: 0.62em; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 9 9 3M4.5 3H9v4.5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 9 9 3M4.5 3H9v4.5' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.45s var(--courbe);
}
.rv__lien:hover::after { transform: translate(2px, -2px); }

/* « Les plus proches » : une seule liste, triée par distance, les groupes cachés. */
.rv-liste--proches { list-style: none; margin: 1.75rem 0 0; padding: 0; border-top: 2px solid var(--charbon); }
.rv-liste--proches .rv--suite .rv__ville { visibility: visible; }
.rv-page.est-proximite [data-groupe], .rv-page.est-proximite .rv-region { display: none; }
.rv-plus { margin: 1.75rem 0 0; }
.rv-plus button { font-size: var(--t-12); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: var(--trait); padding-bottom: 0.3em; }
.rv-plus button:hover { color: var(--bordeaux); border-color: var(--bordeaux); }
.rv-vide { padding: 3rem 0; }
.rv-vide__titre { font-family: var(--font-titre); font-size: var(--t-30); text-transform: uppercase; margin-bottom: 0.5rem; }

@media (max-width: 1099px) {
  .rv { grid-template-columns: 8rem minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "ville nom adresse" "ville actions distance"; row-gap: 0.4rem; }
  .rv__actions { flex-direction: row; align-items: baseline; gap: 0.35rem 1.25rem; }
}

/* Téléphone : l'index devient une bande de régions sous l'en-tête ; les lignes s'empilent. */
@media (max-width: 899px) {
  .repertoire { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .repertoire__index {
    position: sticky; top: var(--rv-entete); z-index: 6; max-height: none; overflow: visible;
    margin: 0 calc(-1 * var(--gouttiere)); padding: 0; background: var(--blanc); border-block: var(--trait);
  }
  .repertoire__vignette { display: none; }
  .repertoire__regions { display: flex; overflow-x: auto; scrollbar-width: none; padding: 0 var(--gouttiere); scroll-snap-type: x proximity; }
  .repertoire__regions::-webkit-scrollbar { display: none; }
  .repertoire__region { flex: none; scroll-snap-align: start; }
  .repertoire__region > a { border: 0; padding: 0.95rem 0.9rem 0.85rem 0; gap: 0.35rem; white-space: nowrap; }
  .repertoire__region > a.est-actif { color: var(--bordeaux); box-shadow: inset 0 -2px 0 var(--bordeaux); }
  .repertoire__region + .repertoire__region > a { padding-left: 0.9rem; }
  .repertoire__region.est-ouverte .repertoire__deps { display: none; }
  .rv { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ville" "nom" "adresse" "distance" "actions"; row-gap: 0.35rem; }
  .rv--suite .rv__ville { display: none; }
  .rv-liste--proches .rv--suite .rv__ville { display: block; }
  .rv__actions { margin-top: 0.4rem; }
  .rv-region, .rv-groupe { scroll-margin-top: calc(var(--rv-entete) + 3.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .rv-recherche__geo.est-en-cours svg { animation: none; }
}