/*
 * Annuaire des salons Blindustry — habillage.
 *
 * Charge après /css/salon.css et réutilise ses tokens (--ink, --paper, --brand,
 * --surface, --border, --muted, --font-title, --font-body, --radius, --shadow-*,
 * --container) ainsi que ses classes partagées (.container, .site-header,
 * .brand, .main-nav, .section__eyebrow, .site-footer, .footer-bottom,
 * .skip-link, .page-main) : rien n'est redéfini ici quand salon.css le fournit
 * déjà. Seul --accent est propre à l'annuaire : posé inline par le template
 * (body et chaque section .brand) depuis la couleur de l'enseigne active.
 */

:root{
  /* Valeur de secours uniquement : --accent est toujours posée inline (body,
     section.brand) depuis brand.accent. */
  --accent: var(--brand);
}

/* Sections par enseigne : le sélecteur générique `.brand` de salon.css habille
   le nom de marque du site-header (inline-flex, Bebas, majuscules) — il ne
   doit rien imposer aux sections `<section class="brand">` de l'annuaire.
   `section.brand` (élément + classe) l'emporte sur `.brand` (classe seule). */
section.brand{
  display:block;
  align-items:normal;
  gap:0;
  font-family:inherit;
  font-size:inherit;
  letter-spacing:normal;
  color:inherit;
  text-transform:none;
}

/* ---------- En-tête ---------- */

.header-meta{
  font-family:var(--font-body);
  font-size:0.85rem;
  color:var(--muted);
  white-space:nowrap;
}

@media (max-width:640px){
  .site-header__inner{
    flex-wrap:wrap;
    row-gap:0.4rem;
    padding-block:0.75rem;
  }

  .main-nav{
    flex-wrap:wrap;
    row-gap:0.3rem;
  }
}

/* ---------- Intro ---------- */

.intro{
  padding-block: clamp(1.5rem, 4vw, 2.25rem) 0;
}

.intro p{
  max-width:42rem;
  margin:0;
  font-size:1.05rem;
  line-height:1.6;
  color:var(--text);
}

/* ---------- Onglets d'enseigne ---------- */

.tabs{
  display:flex;
  gap:0.25rem;
  padding-top: clamp(1.25rem, 3vw, 2rem);
  overflow-x:auto;
  overflow-y:hidden;
  border-bottom:1px solid var(--border);
}

.tab{
  display:inline-block;
  background:none;
  border:none;
  color:var(--muted);
  font-family:var(--font-title);
  font-size:1.05rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:0.6rem 1.1rem 0.85rem;
  cursor:pointer;
  position:relative;
  white-space:nowrap;
  text-decoration:none;
  transition:color 0.15s ease;
}

.tab:hover{
  color:var(--ink);
  text-decoration:none;
}

.tab[aria-selected="true"]{
  color:var(--ink);
}

.tab[aria-selected="true"]::after{
  content:"";
  position:absolute;
  left:14px;right:14px;bottom:0;
  height:3px;
  background:var(--accent);
  border-radius:2px 2px 0 0;
}

@media (max-width:600px){
  .tabs{
    gap:0;
    margin-inline:-1.25rem;
    padding:clamp(1rem, 4vw, 1.5rem) 1.25rem 0;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  }

  .tab{
    font-size:0.92rem;
    padding:0.55rem 0.85rem 0.75rem;
  }
}

/* Toutes les sections d'enseigne sont rendues côté serveur ; le JS masque
   toutes celles qui ne sont pas actives au chargement (voir annuaire.js). */
.brand[hidden]{display:none;}

/* ---------- Grille de cartes (breakpoints de l'ancien .salon-grid) ---------- */

.grid{
  grid-template-columns:1fr;
}

@media (min-width:640px){
  .grid{grid-template-columns:repeat(2, 1fr);}
}

@media (min-width:960px){
  .grid{grid-template-columns:repeat(3, 1fr);}
}

@media (min-width:1200px){
  .grid{grid-template-columns:repeat(4, 1fr);}
}

/* ---------- Carte salon (recette visuelle de l'ancien .salon-card, sur la
   base commune `.card` de salon.css : fond clair, bordure, radius, ombre) --- */

article.card{
  display:flex;
  flex-direction:column;
  transition:transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

article.card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--border-strong);
}

article.card.is-nearest{
  border-color:var(--accent);
}

.card-photo{
  height:140px;
  background:
    linear-gradient(135deg, var(--accent) 0%, transparent 70%),
    var(--bg);
  position:relative;
}

.card-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.nearest-flag{
  position:absolute;
  top:10px;right:10px;
  background:var(--accent);
  color:#fff;
  font-family:var(--font-title);
  font-size:0.7rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:0.25rem 0.6rem;
  border-radius:var(--radius-sm);
}

.card-body{
  padding:1.1rem 1.25rem 1.35rem;
  display:flex;
  flex-direction:column;
  gap:0.3rem;
  flex:1;
}

.card-name{
  font-family:var(--font-title);
  font-size:1.35rem;
  letter-spacing:0.02em;
  color:var(--ink);
  line-height:1.15;
}

.card-phone{
  font-family:var(--font-body);
  font-size:0.85rem;
  color:var(--muted);
  margin-top:0.15rem;
  text-decoration:none;
  align-self:flex-start;
}

.card-phone:hover,
.card-phone:focus-visible{
  color:var(--accent);
  text-decoration:underline;
}

.card-cta{
  margin-top:auto;
  padding-top:0.75rem;
}

.btn-card{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-title);
  font-size:0.95rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  text-decoration:none;
  color:#fff;
  background:var(--accent);
  border:2px solid transparent;
  border-radius:var(--radius-sm);
  padding:0.55rem 1.1rem;
  transition:transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow:var(--shadow-sm);
}

.btn-card:hover{
  text-decoration:none;
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
}

/* ---------- Module « salon le plus proche » ---------- */

.nearest{
  margin-block: clamp(2rem, 5vw, 3rem);
  padding:clamp(1.25rem, 4vw, 1.75rem);
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
  flex-wrap:wrap;
}

.nearest-text h3{
  margin-bottom:0.3rem;
}

.nearest-text p{
  margin:0;
  color:var(--muted);
  font-size:0.92rem;
  max-width:28rem;
  line-height:1.55;
}

.btn-locate{
  font-family:var(--font-title);
  font-size:1.05rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background:var(--accent);
  color:#fff;
  border:2px solid transparent;
  border-radius:var(--radius-sm);
  padding:0.85rem 1.5rem;
  cursor:pointer;
  white-space:nowrap;
  transition:transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow:var(--shadow-sm);
}

.btn-locate:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
}

.btn-locate:disabled{
  opacity:0.55;
  cursor:default;
  transform:none;
  box-shadow:var(--shadow-sm);
}

.nearest-result{
  width:100%;
  font-size:0.9rem;
  color:var(--text);
  padding-top:0.9rem;
  margin-top:0.9rem;
  border-top:1px solid var(--border);
  display:none;
}

.nearest-result.show{display:block;}
.nearest-result strong{color:var(--accent);font-weight:700;}

@media (max-width:600px){
  .nearest{
    flex-direction:column;
    align-items:stretch;
  }

  .nearest-text p{max-width:100%;}
  .btn-locate{width:100%;}
}