/* Annuaire de réparateurs de spa — affichage public
   Même famille visuelle que le tableau de bord, mais posé dans le thème :
   les variables restent surchargeables depuis le CSS du site. */

.as-repertoire {
  --as-p-encre: #1E2A35;
  --as-p-doux: #5A6B7B;
  --as-p-muet: #94A3B2;
  --as-p-bord: #E3E8EE;
  --as-p-bord-fort: #D5DCE5;
  --as-p-fond: #F5F7FA;
  --as-p-accent: #2F80ED;
  --as-p-urgence: #C2410C;
  --as-p-rayon: 10px;

  color: var(--as-p-encre);
  font-size: 15px;
  line-height: 1.5;
}

.as-repertoire *,
.as-repertoire *::before,
.as-repertoire *::after { box-sizing: border-box; }

/* -------------------------------- Filtres -------------------------------- */

/* -------------------------- Formulaire de recherche ------------------------- */

.as-repertoire .as-recherche {
  margin: 0 0 26px;
  padding: 24px 26px;
  background: #F4F5F6;
  border-radius: 8px;
}

.as-repertoire .as-champs {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 26px;
}
.as-repertoire .as-champ { flex: 0 1 260px; }
.as-repertoire .as-champ label {
  display: block;
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  color: #1E2A35;
  line-height: 1.2;
}

/* Groupe de cases à cocher : titre souligné, puis grille sur quatre colonnes. */
.as-repertoire .as-groupe {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}
.as-repertoire .as-groupe__titre {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid #C9D3DC;
  font-size: 18px;
  font-weight: 800;
  color: #1E2A35;
  line-height: 1.2;
}

/*
 * Colonnes typographiques plutôt qu'une grille.
 *
 * Une grille remplit ligne par ligne : la lecture saute d'une colonne à
 * l'autre. Le multicolonnage remplit chaque colonne de haut en bas, si bien
 * que la liste se lit verticalement — 1 à 5 dans la première colonne, 6 à 10
 * dans la deuxième, et ainsi de suite.
 */
.as-repertoire .as-cases {
  column-count: 4;
  column-gap: 24px;
}
.as-repertoire .as-case {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  font-size: 15px;
  font-weight: 300;
  color: #1E2A35;
  cursor: pointer;
  line-height: 1.3;
}
.as-repertoire .as-case input[type="checkbox"] {
  flex: none;
  width: 17px !important;
  height: 17px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: #4A5768;
  cursor: pointer;
}

.as-repertoire .as-recherche__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
/* Le bouton porte ses dimensions en ligne ; il ne reste ici que le survol,
   qu'un attribut style ne peut pas exprimer. */
.as-repertoire button.as-effacer:hover { background: #2C3542 !important; }

@media (max-width: 1000px) {
  .as-repertoire .as-cases { column-count: 3; }
}
@media (max-width: 760px) {
  .as-repertoire .as-cases { column-count: 2; }
}
@media (max-width: 480px) {
  .as-repertoire .as-cases { column-count: 1; }
  .as-repertoire .as-champ { flex: 1 1 100%; }
}

.as-repertoire .as-compte {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--as-p-muet);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------- Grille --------------------------------- */

.as-repertoire .as-grille {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(var(--as-cols, 3), minmax(0, 1fr));
}
.as-repertoire .as-grille--1 { --as-cols: 1; }
.as-repertoire .as-grille--2 { --as-cols: 2; }
.as-repertoire .as-grille--3 { --as-cols: 3; }
.as-repertoire .as-grille--4 { --as-cols: 4; }

.as-repertoire .as-carte {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--as-p-bord);
  border-left: 4px solid var(--as-p-bord-fort);
  border-radius: var(--as-p-rayon);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.as-repertoire .as-carte:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(16, 24, 40, .1);
}
.as-repertoire .as-carte.is-urgence { border-left-color: var(--as-p-urgence); }

.as-repertoire .as-carte__tete { display: flex; align-items: flex-start; gap: 12px; }
.as-repertoire .as-carte__logo img,
.as-repertoire .as-carte__logo--vide {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}
.as-repertoire .as-carte__logo--vide {
  display: grid;
  place-items: center;
  background: var(--as-p-fond);
  color: var(--as-p-doux);
  font-size: 20px;
  font-weight: 700;
}
.as-repertoire .as-carte__titre { flex: 1; min-width: 0; }
.as-repertoire .as-carte h3 { margin: 0 0 3px; font-size: 17px; line-height: 1.3; color: var(--as-p-encre); }
.as-repertoire .as-carte__lieu { margin: 0; font-size: 13px; color: var(--as-p-doux); }
.as-repertoire .as-carte__note { margin: 0; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.as-repertoire .as-carte__note-val { font-size: 18px; font-weight: 700; }
.as-repertoire .as-carte__note-sur { font-size: 12px; color: var(--as-p-muet); }

.as-repertoire .as-urgence {
  align-self: flex-start;
  margin: 0;
  padding: 4px 9px;
  border-radius: 999px;
  background: #FEF0E7;
  color: var(--as-p-urgence);
  font-size: 12px;
  font-weight: 700;
}

.as-repertoire .as-carte__desc { margin: 0; font-size: 14px; color: var(--as-p-doux); }

.as-repertoire .as-carte__services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.as-repertoire .as-carte__services li {
  padding: 4px 10px;
  border: 1px solid var(--as-p-bord);
  border-radius: 999px;
  background: var(--as-p-fond);
  font-size: 12px;
  color: var(--as-p-doux);
}

.as-repertoire .as-carte__infos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 12px;
  margin: 0;
  font-size: 13px;
}
.as-repertoire .as-carte__infos dt { color: var(--as-p-muet); }
.as-repertoire .as-carte__infos dd { margin: 0; color: var(--as-p-doux); }
.as-repertoire .as-mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.as-repertoire .as-carte__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.as-repertoire .as-cta {
  display: inline-block;
  padding: 10px 15px;
  border: 1px solid var(--as-p-bord-fort);
  border-radius: 8px;
  background: #fff;
  color: var(--as-p-encre);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.as-repertoire .as-cta:hover { background: var(--as-p-fond); color: var(--as-p-encre); }
.as-repertoire .as-cta--primaire {
  background: #3E4C5A;
  border-color: #3E4C5A;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.as-repertoire .as-cta--primaire:hover { background: #14181D; border-color: #14181D; color: #fff; }

.as-repertoire .as-vide {
  padding: 40px 20px;
  text-align: center;
  border: 1px dashed var(--as-p-bord-fort);
  border-radius: var(--as-p-rayon);
  background: var(--as-p-fond);
  color: var(--as-p-doux);
}

/* ------------------------------- Pagination ------------------------------- */

.as-repertoire .as-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid #E7EBEF;
}

.as-repertoire .as-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #E1E6EC;
  border-radius: 10px;
  background: #fff;
  color: #46586A;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.as-repertoire .as-page:hover:not(:disabled):not(.is-active) {
  background: #F4F6F8;
  border-color: #CFD8E1;
  color: #1E2A35;
}
.as-repertoire .as-page:focus-visible {
  outline: 2px solid var(--as-p-accent);
  outline-offset: 2px;
}

/* Page courante : pleine, sans effet de survol — on y est déjà. */
.as-repertoire .as-page.is-active {
  background: #3E4C5A;
  border-color: #3E4C5A;
  color: #fff;
  font-weight: 600;
  cursor: default;
}

/* Précédent / Suivant : plus larges, avec leur chevron. */
.as-repertoire .as-page--nav { padding: 0 18px; font-weight: 500; }
.as-repertoire .as-page--nav svg { display: block; flex: none; }
.as-repertoire .as-page:disabled {
  opacity: .45;
  cursor: default;
  background: #FAFBFC;
}

.as-repertoire .as-page-sep {
  min-width: 24px;
  text-align: center;
  color: #A6B0BA;
  letter-spacing: .1em;
}

/* Repère textuel : utile dès que le nombre de pages devient grand. */
.as-repertoire .as-pages__etat {
  flex: 1 0 100%;
  margin-top: 6px;
  text-align: center;
  font-size: 13px;
  color: #A6B0BA;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .as-repertoire .as-page--nav span { display: none; }
  .as-repertoire .as-page--nav { padding: 0; min-width: 42px; }
}

.as-repertoire.is-loading .as-resultat { opacity: .45; transition: opacity .15s ease; }

.as-repertoire a:focus-visible,
.as-repertoire button:focus-visible,
.as-repertoire input:focus-visible,
.as-repertoire select:focus-visible {
  outline: 2px solid var(--as-p-accent);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .as-repertoire .as-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .as-repertoire .as-grille { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .as-repertoire .as-carte { transition: none; }
  .as-repertoire .as-carte:hover { transform: none; }
}

.as-repertoire .as-carte__alias {
  margin: 0 0 3px;
  font-size: 13px;
  font-style: italic;
  color: var(--as-p-muet);
}

/* =============================================================================
   Premier niveau : la liste du répertoire
   ========================================================================== */

.as-repertoire .as-liste {
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none !important;
  grid-template-columns: repeat(var(--as-cols, 4), minmax(0, 1fr));
}
.as-repertoire .as-liste--1 { --as-cols: 1; }
.as-repertoire .as-liste--2 { --as-cols: 2; }
.as-repertoire .as-liste--3 { --as-cols: 3; }
.as-repertoire .as-liste--4 { --as-cols: 4; }

/* Le thème colle ses puces et ses retraits à tout <li> : on les neutralise,
   sinon chaque carte s'affiche précédée d'un point. */
.as-repertoire .as-item {
  margin: 0 !important;
  padding: 26px 24px !important;
  list-style: none !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  background: #F4F5F6;
  border: 0;
  border-radius: 8px;
  transition: background .15s ease, box-shadow .15s ease;
}
.as-repertoire .as-item::before,
.as-repertoire .as-item::marker { content: none !important; display: none !important; }
.as-repertoire .as-item:hover { background: #EDEFF1; box-shadow: 0 6px 18px rgba(16, 24, 40, .07); }
.as-repertoire .as-item.is-urgence { box-shadow: inset 3px 0 0 var(--as-p-urgence); }

.as-repertoire .as-item__nom { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.25; }
.as-repertoire .as-item__nom a { color: #3E4C5A; text-decoration: none; }
.as-repertoire .as-item__nom a:hover { color: #14181D; text-decoration: underline; }

.as-repertoire .as-item__ville { margin: 0; font-size: 17px; color: #1E2A35; }
.as-repertoire .as-item__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #FEF0E7;
  color: var(--as-p-urgence);
  font-size: 11px;
  font-weight: 700;
}

.as-repertoire .as-item__tel { margin: 0; font-size: 17px; font-variant-numeric: tabular-nums; }
.as-repertoire .as-item__tel a { color: #1E2A35; text-decoration: none; }
.as-repertoire .as-item__tel a:hover { color: #2F80ED; }
.as-repertoire .as-item__sans { color: #A6B0BA; font-size: 14px; }

.as-repertoire .as-item__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  margin-top: 10px;
  padding: 0 28px;
  border-radius: 4px;
  background: #4A5768;
  color: #fff;
  font-size: 15px;
  font-weight: 300;
  line-height: 1;
  text-decoration: none;
  transition: background .15s ease;
}
.as-repertoire .as-item__btn:hover { background: #2C3542; color: #fff; }

@media (max-width: 1100px) { .as-repertoire .as-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .as-repertoire .as-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .as-repertoire .as-liste { grid-template-columns: 1fr; } }

/* =============================================================================
   Second niveau : la page d'une fiche
   ========================================================================== */

.as-fiche-page {
  max-width: 1500px;
  margin: 0 auto;
  padding: 30px 20px 60px;
  color: #1E2A35;
  font-size: 15px;
  line-height: 1.6;
}
.as-fiche-page *,
.as-fiche-page *::before,
.as-fiche-page *::after { box-sizing: border-box; }

.as-fiche-page .as-fil { margin-bottom: 14px; font-size: 13px; color: #94A3B2; }
.as-fiche-page .as-fil a { color: #5A6B7B; text-decoration: none; }
.as-fiche-page .as-fil a:hover { color: #2F80ED; text-decoration: underline; }
.as-fiche-page .as-fil > span { margin: 0 6px; }
.as-fiche-page .as-fil__ici { color: #1E2A35; margin: 0; }

.as-fiche__h1 {
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #1E2A35;
  font-size: 31px;
  font-weight: 800;
  line-height: 1.2;
}

/* Le panneau gris qui contient les deux colonnes */
.as-fiche {
  background: #EFEFEF;
  border-radius: 8px;
  padding: 40px;
}
.as-fiche__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  gap: 40px;
  align-items: start;
}

/* ------------------------------ Colonne gauche ----------------------------- */

.as-fiche__logo { margin-bottom: 16px; }
.as-fiche__logo img {
  /* Deux limites : la plus contraignante s'applique. Un logo en bandeau
     s'arrête à 350 px de large, un logo carré à 150 px de haut. */
  max-width: 350px;
  max-height: 150px;
  width: auto;
  height: auto;
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}
.as-fiche__nom { margin: 0 0 14px; font-size: 24px; font-weight: 600; line-height: 1.25; }
.as-fiche__alias { margin: -8px 0 14px; font-size: 14px; font-style: italic; color: #7A8894; }

.as-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none !important;
}
/* Certains thèmes imposent leurs puces et leurs retraits aux <li>.
   On les neutralise ici, faute de quoi chaque étiquette part à la ligne
   précédée d'un point. */
.as-tags li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: block;
}
.as-tags li::before,
.as-tags li::marker { content: none !important; display: none !important; }
.as-tag {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  background: #3E4C5A;
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
  transition: background .15s ease;
}
a.as-tag:hover { background: #14181D; color: #fff; }

.as-fiche__texte { margin: 0 0 18px; color: #5A6B7B; }
.as-fiche__texte p { margin: 0; }
.as-fiche__services-txt strong { color: #1E2A35; }
.as-fiche__rbq { margin: 0; font-size: 13px; color: #7A8894; }
.as-fiche__rbq span { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* ------------------------------ Colonne droite ----------------------------- */

.as-fiche__cote { display: flex; flex-direction: column; gap: 18px; }

.as-carte {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  overflow: hidden;
  background: #DDE3E8;
}
.as-carte iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Repli pour les navigateurs sans aspect-ratio */
@supports not (aspect-ratio: 16 / 10) {
  .as-carte { height: 300px; }
}

.as-coord { margin: 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.as-coord li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.as-coord__ico { flex: none; display: inline-flex; color: #5A6B7B; }
.as-coord a { color: #5A6B7B; text-decoration: none; }
.as-coord a:hover { color: #2F80ED; text-decoration: underline; }

.as-voir-num {
  padding: 9px 20px;
  border: 0;
  border-radius: 6px;
  background: #3E4C5A;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.as-voir-num:hover { background: #14181D; }
/* Le numéro révélé : texte simple, sans lien ni effet de survol. */
.as-num-affiche {
  font-size: 17px;
  font-weight: 300;
  color: #1E2A35;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  cursor: text;
}

.as-fiche__sceaux { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.as-sceau {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
}
.as-sceau--verifie { background: #16A34A; color: #fff; }
.as-sceau--urgence { background: #FEF0E7; color: #C2410C; }

/* ------------------------------- Bas de page ------------------------------- */

.as-fiche__bloc { margin-top: 34px; }
.as-fiche__bloc h2 { margin: 0 0 12px; font-size: 19px; }

.as-voisins { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.as-voisins li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  border: 0;
  border-radius: 8px;
  background: #3E4C5A;
}
.as-voisins__tel { font-variant-numeric: tabular-nums; }

.as-retour { color: #2F80ED; text-decoration: none; font-size: 14px; }
.as-retour:hover { text-decoration: underline; }
.as-retour-bas { margin-top: 30px; padding-top: 18px; border-top: 1px solid #E3E8EE; }

.as-ville-titre { margin: 0 0 6px; font-size: 30px; line-height: 1.2; font-weight: 800; }

@media (max-width: 900px) {
  .as-fiche { padding: 26px; }
  .as-fiche__grille { grid-template-columns: 1fr; gap: 28px; }
  .as-fiche__sceaux { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .as-fiche__h1 { font-size: 24px; }
  .as-fiche { padding: 20px; }
  .as-tag { padding: 8px 14px; font-size: 13px; }
}

/* =============================================================================
   Priorité sur le thème
   -----------------------------------------------------------------------------
   Les thèmes de constructeur (Salient, Divi, Elementor…) ciblent les titres et
   les liens avec des sélecteurs très spécifiques : #content h3, .wpb_wrapper h3,
   .entry-content a… Ces règles-là l'emportent sur une simple classe et écrasent
   la carte. Le bloc ci-dessous rétablit l'apparence voulue, avec une spécificité
   suffisante pour ne plus dépendre du thème installé.
   ========================================================================== */

.as-repertoire .as-liste .as-item h3.as-item__nom,
.as-repertoire .as-liste .as-item .as-item__nom {
  margin: 0 0 2px !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #3E4C5A !important;
}
.as-repertoire .as-liste .as-item .as-item__nom::before,
.as-repertoire .as-liste .as-item .as-item__nom::after { content: none !important; display: none !important; }

.as-repertoire .as-liste .as-item .as-item__nom a {
  color: inherit !important;
  font: inherit !important;
  text-decoration: none !important;
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
}
.as-repertoire .as-liste .as-item .as-item__nom a:hover {
  color: #14181D !important;
  text-decoration: underline !important;
}

.as-repertoire .as-liste .as-item .as-item__ville,
.as-repertoire .as-liste .as-item .as-item__tel {
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: 17px !important;
  line-height: 1.5 !important;
  color: #1E2A35 !important;
}
.as-repertoire .as-liste .as-item .as-item__tel a {
  color: #1E2A35 !important;
  text-decoration: none !important;
  font-variant-numeric: tabular-nums;
}
.as-repertoire .as-liste .as-item .as-item__tel a:hover { color: #2F80ED !important; }

.as-repertoire .as-liste .as-item a.as-item__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 42px !important;
  margin: 10px 0 0 !important;
  padding: 0 28px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: #4A5768 !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.as-repertoire .as-liste .as-item a.as-item__btn:hover {
  background: #2C3542 !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* Pagination : les thèmes stylent lourdement les <button>. On reprend la main. */
.as-repertoire .as-pages button.as-page {
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 12px !important;
  border: 1px solid #E1E6EC !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #46586A !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
.as-repertoire .as-pages button.as-page--nav { padding: 0 18px !important; }
.as-repertoire .as-pages button.as-page.is-active {
  background: #3E4C5A !important;
  border-color: #3E4C5A !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.as-repertoire .as-pages button.as-page:disabled {
  background: #FAFBFC !important;
  color: #46586A !important;
}
.as-repertoire .as-pages button.as-page:hover:not(:disabled):not(.is-active) {
  background: #F4F6F8 !important;
  border-color: #CFD8E1 !important;
  color: #1E2A35 !important;
}

/* Bouton « Retour au répertoire » des pages fiche et ville */
.as-fiche-page .as-retour-haut { margin: 0 0 18px; }
.as-fiche-page .as-retour-bas { margin-top: 34px; padding-top: 22px; border-top: 1px solid #E7EBEF; }

.as-fiche-page a.as-retour-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 42px !important;
  padding: 0 28px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: #4A5768 !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background .15s ease;
}
.as-fiche-page a.as-retour-btn:hover {
  background: #2C3542 !important;
  color: #fff !important;
  text-decoration: none !important;
}
.as-fiche-page a.as-retour-btn svg { display: block; flex: none; }
.as-fiche-page a.as-retour-btn:focus-visible { outline: 2px solid #2F80ED; outline-offset: 3px; }

/* Étiquettes en <h3> : les thèmes imposent aux titres une taille, une graisse
   et des marges qui feraient éclater la pastille. On reprend la main. */
.as-fiche-page .as-tags h3.as-tag,
.as-fiche-page .as-tags .as-tag {
  display: inline-block !important;
  margin: 0 !important;
  padding: 9px 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #3E4C5A !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
}
.as-fiche-page .as-tags h3.as-tag::before,
.as-fiche-page .as-tags h3.as-tag::after { content: none !important; display: none !important; }

.as-fiche-page .as-tags h3.as-tag a {
  color: inherit !important;
  font: inherit !important;
  text-decoration: none !important;
  background: none !important;
  padding: 0 !important;
  border: 0 !important;
}
.as-fiche-page .as-tags h3.as-tag a:hover { text-decoration: underline !important; }
.as-fiche-page .as-tags li:has(> h3.as-tag > a):hover h3.as-tag { background: #14181D !important; }

/* Bandeau d'appel en haut de fiche */
.as-fiche-page .as-bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 22px;
  padding: 18px 22px;
  background: #3E4C5A;
  border-radius: 8px;
}
.as-fiche-page .as-bandeau__texte {
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 300 !important;
  color: #fff !important;
  line-height: 1.4 !important;
}
.as-fiche-page .as-bandeau__suite { color: #fff; font-weight: 300; }

.as-fiche-page a.as-bandeau__tel {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 42px !important;
  padding: 0 28px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: #EF3340 !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-transform: none !important;
  font-variant-numeric: tabular-nums;
  transition: background .15s ease;
}
.as-fiche-page a.as-bandeau__tel:hover { background: #C81E29 !important; color: #fff !important; }
.as-fiche-page a.as-bandeau__tel svg { display: block; flex: none; }

@media (max-width: 600px) {
  .as-fiche-page .as-bandeau { flex-direction: column; align-items: stretch; text-align: center; }
  .as-fiche-page a.as-bandeau__tel { justify-content: center; }
  .as-fiche-page .as-bandeau__suite { display: block; }
}

/* Entrées libres : même présentation que « Autres réparateurs de spa », sans lien. */
.as-fiche-page .as-voisins__nom {
  color: #fff;
  font-size: 17px;
  font-weight: 300;
}
.as-fiche-page a.as-voisins__tel {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 42px !important;
  padding: 0 28px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: #EF3340 !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: background .15s ease;
}
.as-fiche-page a.as-voisins__tel svg { display: block; flex: none; }
.as-fiche-page a.as-voisins__tel:hover { background: #C81E29 !important; color: #fff !important; }

@media (max-width: 600px) {
  .as-fiche-page .as-voisins li { flex-direction: column; align-items: stretch; text-align: center; }
  .as-fiche-page a.as-voisins__tel { justify-content: center; }
}

/* =============================================================================
   Barre de filtres : priorité sur le thème
   -----------------------------------------------------------------------------
   Les thèmes stylent input[type="search"], select et button avec leurs propres
   hauteurs, marges et couleurs. Résultat : trois contrôles de tailles
   différentes qui ne s'alignent plus. On impose ici une hauteur unique et une
   marge nulle, sans quoi aucun alignement n'est possible.
   ========================================================================== */








/* La flèche du menu doit rester visible : on garde l'apparence native. */







/* Champ de recherche : certains thèmes lui imposent « height: auto » avec un
   fort rembourrage vertical, ce qui le rend plus haut que les menus voisins.
   On verrouille les trois dimensions — hauteur, hauteur minimale et maximale —
   et on neutralise le rembourrage, seule façon fiable de les mettre d'équerre. */




/* Le bouton « Rechercher » porte ses dimensions en ligne ; ces règles ne
   servent qu'à son survol, que l'attribut style ne peut pas exprimer. */

/* Texte du formulaire : les thèmes colorent volontiers les <label> et les
   <legend> avec leur teinte de lien. On rétablit le noir. */
.as-repertoire form.as-recherche label,
.as-repertoire form.as-recherche label span,
.as-repertoire form.as-recherche legend,
.as-repertoire form.as-recherche .as-groupe__titre {
  color: #1E2A35 !important;
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.as-repertoire form.as-recherche .as-champ label,
.as-repertoire form.as-recherche .as-groupe__titre {
  font-size: 18px !important;
  font-weight: 800 !important;
}
.as-repertoire form.as-recherche .as-case,
.as-repertoire form.as-recherche .as-case span { font-size: 15px !important; font-weight: 300 !important; }

/* Un champ relié à un <datalist> affiche, sous Chrome, un petit triangle
   dans le coin. On le masque : les suggestions apparaissent de toute façon
   dès la saisie, et l'icône déséquilibrait le champ. */
.as-repertoire input[list]::-webkit-calendar-picker-indicator {
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  appearance: none;
}
.as-repertoire input[list]::-webkit-list-button {
  display: none !important;
  opacity: 0 !important;
}

/* =============================================================================
   Vérification d'un entrepreneur — [verifier_reparateur]
   ========================================================================== */

.as-verif {
  color: #1E2A35;
  font-size: 15px;
  line-height: 1.6;
}
.as-verif *, .as-verif *::before, .as-verif *::after { box-sizing: border-box; }

.as-verif__form {
  padding: 24px 26px;
  background: #F4F5F6;
  border-radius: 8px;
}
.as-verif__titre {
  margin: 0 0 6px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1E2A35 !important;
  line-height: 1.25 !important;
}
.as-verif__sous { margin: 0 0 18px !important; color: #5A6B7B !important; font-size: 15px !important; }

.as-verif__ligne { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.as-verif__label {
  display: block !important;
  flex: 1 1 100%;
  margin: 0 0 6px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #5A6B7B !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.as-verif__champ { flex: 1 1 260px; }
.as-verif__bouton { flex: 0 0 auto; }
.as-verif input[list]::-webkit-calendar-picker-indicator { display: none !important; }

/* ------------------------------- Résultats -------------------------------- */

.as-verif__resultat { margin-top: 22px; }
.as-verif.is-loading .as-verif__resultat { opacity: .45; transition: opacity .15s ease; }

.as-verif__compte { margin: 0 0 12px !important; font-size: 14px !important; color: #94A3B2 !important; }

.as-verif__liste { margin: 0; padding: 0; list-style: none !important; display: grid; gap: 10px; }
.as-verif__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 !important;
  padding: 18px 22px !important;
  list-style: none !important;
  border: 1px solid #E3E8EE;
  border-left: 4px solid #C9D3DC;
  border-radius: 8px;
  background: #fff;
}
.as-verif__item::before, .as-verif__item::marker { content: none !important; display: none !important; }
.as-verif__item.is-verifie { border-left-color: #16A34A; }

.as-verif__info { flex: 1 1 240px; min-width: 0; }
.as-verif__nom { margin: 0 !important; font-size: 17px !important; font-weight: 600 !important; color: #1E2A35 !important; }
.as-verif__meta { margin: 2px 0 0 !important; font-size: 14px !important; color: #6B7A88 !important; }
.as-verif__rbq { margin: 4px 0 0 !important; font-size: 13px !important; color: #94A3B2 !important; }
.as-verif__rbq span { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.as-verif__etat { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }

/* Mentions attestées : la coche verte porte le signal, le texte reste sobre. */
.as-verif__coche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 300;
  color: #1E2A35;
  white-space: nowrap;
}
.as-verif__coche svg { display: block; flex: none; color: #16A34A; }

.as-verif__avis {
  margin: 0 !important;
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 15px !important;
}
.as-verif__avis--absent { background: #FDECEC; color: #B42318 !important; }
.as-verif__avis--neutre { background: #F4F5F6; color: #5A6B7B !important; }

.as-verif__note {
  margin: 14px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #94A3B2 !important;
}

/* Le champ ne doit jamais dépasser sa colonne, quelle que soit la largeur. */
.as-verif .as-verif__champ {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 640px) {
  .as-verif__form { padding: 20px; }
  .as-verif__ligne { flex-direction: column; align-items: stretch; gap: 10px; }
  .as-verif .as-verif__champ { flex: 1 1 auto; width: 100%; }
  .as-verif__bouton { width: 100%; }
  .as-verif__titre { font-size: 19px !important; }

  /*
   * En colonne, « flex: 1 1 240px » n'agit plus sur la largeur mais sur la
   * hauteur : chaque bloc réservait 240 px, d'où les grands vides entre le
   * nom et les mentions. On rend la hauteur à son contenu.
   */
  .as-verif__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 18px !important;
  }
  .as-verif .as-verif__info {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
  }
  .as-verif__etat {
    flex: 0 0 auto;
    width: 100%;
    gap: 6px 16px;
  }
  .as-verif__coche { white-space: normal; font-size: 14px; }
  .as-verif__nom { font-size: 16px !important; }
  .as-verif__liste { gap: 8px; }
}

/* Lien vers la fiche, à la suite des mentions */
.as-verif__lien {
  color: #2F80ED !important;
  text-decoration: none !important;
  font-size: 14px;
  white-space: nowrap;
}
.as-verif__lien:hover { text-decoration: underline !important; }

/* =============================================================================
   Listes de régions et de villes — [regions_reparateurs] / [villes_reparateurs]
   ========================================================================== */

.as-listes {
  color: #1E2A35;
  font-size: 16px;
  line-height: 1.55;
}
.as-listes *, .as-listes *::before, .as-listes *::after { box-sizing: border-box; }

.as-listes__titre {
  margin: 0 0 14px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1E2A35 !important;
  line-height: 1.25 !important;
}

/* Colonnes remplies de haut en bas : la liste se lit verticalement,
   comme les colonnes d'un journal, plutôt qu'en zigzag. */
.as-listes__cols {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  column-count: var(--as-listes-cols, 3);
  column-gap: 40px;
}
.as-listes--1 { --as-listes-cols: 1; }
.as-listes--2 { --as-listes-cols: 2; }
.as-listes--3 { --as-listes-cols: 3; }
.as-listes--4 { --as-listes-cols: 4; }
.as-listes--5 { --as-listes-cols: 5; }
.as-listes--6 { --as-listes-cols: 6; }

/* Les thèmes appliquent puces et retraits à tout <li> : on les neutralise. */
.as-listes__item {
  margin: 0 0 4px !important;
  padding: 0 !important;
  list-style: none !important;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
}
.as-listes__item::before,
.as-listes__item::marker { content: none !important; display: none !important; }

.as-listes__item a {
  color: #1E2A35 !important;
  text-decoration: none !important;
  border: 0 !important;
}
.as-listes__item a:hover { text-decoration: underline !important; }

@media (max-width: 900px) { .as-listes__cols { column-count: 2; } }
@media (max-width: 560px) { .as-listes__cols { column-count: 1; } }

/* Bloc des réparateurs de spa recommandés : le titre reprend celui des listes. */
.as-recommandes { margin: 0 0 26px; }
.as-recommandes .as-listes__titre {
  margin: 0 0 16px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1E2A35 !important;
}

/* Entrées libres posées hors d'une fiche, via [entrees_libres].
   Le conteneur emprunte l'habillage de la fiche pour le style des lignes,
   sans en reprendre la largeur ni les marges. */
.as-libres {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.as-libres__titre {
  margin: 0 0 16px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1E2A35 !important;
  line-height: 1.25 !important;
}
.as-libres .as-voisins {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(var(--as-libres-cols, 1), minmax(0, 1fr));
}
.as-libres--1 { --as-libres-cols: 1; }
.as-libres--2 { --as-libres-cols: 2; }
.as-libres--3 { --as-libres-cols: 3; }
.as-libres--4 { --as-libres-cols: 4; }

@media (max-width: 900px) { .as-libres .as-voisins { grid-template-columns: 1fr; } }

/* =============================================================================
   Blogue — [blogue_spa]
   ========================================================================== */

.as-blogue {
  max-width: none;
  width: 100%;
  color: #1E2A35;
}
.as-blogue *, .as-blogue *::before, .as-blogue *::after { box-sizing: border-box; }

.as-blogue__titre {
  margin: 0 0 18px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1E2A35 !important;
  line-height: 1.25 !important;
}

.as-blogue__liste {
  display: grid;
  gap: 24px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  grid-template-columns: repeat(var(--as-blog-cols, 3), minmax(0, 1fr));
}
.as-blogue--1 { --as-blog-cols: 1; }
.as-blogue--2 { --as-blog-cols: 2; }
.as-blogue--3 { --as-blog-cols: 3; }
.as-blogue--4 { --as-blog-cols: 4; }

.as-blogue__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.as-blogue__item::before,
.as-blogue__item::marker { content: none !important; display: none !important; }

.as-blogue__image {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 4px;
}
.as-blogue__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .25s ease;
}
.as-blogue__image:hover img { transform: scale(1.03); }

.as-blogue__nom {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
.as-blogue__nom a { color: #1E2A35 !important; text-decoration: none !important; }
.as-blogue__nom a:hover { color: #2F80ED !important; }

.as-blogue__date { margin: 0 !important; font-size: 13px !important; color: #94A3B2 !important; }
.as-blogue__extrait { margin: 0 !important; font-size: 15px !important; color: #5A6B7B !important; line-height: 1.55 !important; }

.as-blogue__lien {
  margin-top: auto;
  padding-top: 6px;
  color: #2F80ED !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 500;
}
.as-blogue__lien:hover { text-decoration: underline !important; }

/* Mention de transparence sous les articles générés */
.as-mention-ia {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid #E3E8EE;
  font-size: 13px;
  color: #94A3B2;
}

@media (max-width: 900px) { .as-blogue__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .as-blogue__liste { grid-template-columns: 1fr; } }

/* Formulaire de zone, affiché après la fiche */
.as-fiche-page .as-form-zone {
  margin-top: 34px;
  scroll-margin-top: 90px;
}
.as-fiche-page .as-form-zone iframe {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  border: 0;
}
/* Une iframe sans dimensions s'affiche en 300×150 : on impose la hauteur choisie. */
.as-fiche-page .as-form-zone--fixe iframe {
  height: var(--as-iframe-hauteur, 700px) !important;
}

/* Le thème impose parfois ses propres dimensions aux images de contenu. */
.as-fiche-page .as-fiche__logo img {
  max-width: 350px !important;
  max-height: 150px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* Sur un écran étroit, 350 px dépasseraient la colonne. */
@media (max-width: 420px) {
  .as-fiche-page .as-fiche__logo img { max-width: 100% !important; }
}

/* =============================================================================
   Maillage interne : liens vers les villes voisines
   ========================================================================== */

.as-maillage {
  margin: 34px 0 0;
  padding-top: 22px;
  border-top: 1px solid #E3E8EE;
}
.as-maillage--seul { margin: 0; padding-top: 0; border-top: 0; }

.as-maillage__titre {
  margin: 0 0 14px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #1E2A35 !important;
  line-height: 1.3 !important;
}

/* Colonnes remplies verticalement : la liste se parcourt du regard. */
.as-maillage__liste {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  column-count: 3;
  column-gap: 32px;
}
.as-maillage__liste li {
  margin: 0 0 6px !important;
  padding: 0 !important;
  list-style: none !important;
  font-size: 14px;
  line-height: 1.5;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
}
.as-maillage__liste li::before,
.as-maillage__liste li::marker { content: none !important; display: none !important; }

.as-maillage__liste a {
  color: #5A6B7B !important;
  text-decoration: none !important;
}
.as-maillage__liste a:hover { color: #2F80ED !important; text-decoration: underline !important; }

.as-maillage__larges {
  margin: 16px 0 0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #94A3B2 !important;
}
.as-maillage__larges a { color: #5A6B7B !important; text-decoration: none !important; }
.as-maillage__larges a:hover { color: #2F80ED !important; text-decoration: underline !important; }
.as-maillage__larges span { margin: 0 6px; color: #C9D3DC; }

@media (max-width: 760px) { .as-maillage__liste { column-count: 2; } }
@media (max-width: 460px) { .as-maillage__liste { column-count: 1; } }

/* =============================================================================
   Produits — [produits_spa]
   ========================================================================== */

.as-produits {
  padding: 26px;
  background: #F4F5F6;
  border-radius: 10px;
  color: #1E2A35;
}
/* Le bloc « Autres produits » reste transparent : il vit déjà dans une page. */
.as-produits--voisins { padding: 24px 0 0; background: none; border-radius: 0; }
.as-produits *, .as-produits *::before, .as-produits *::after { box-sizing: border-box; }

.as-produits__titre {
  margin: 0 0 20px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #1E2A35 !important;
  line-height: 1.25 !important;
}

.as-produits__liste {
  display: grid;
  align-items: stretch;
  gap: 26px 22px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  grid-template-columns: repeat(var(--as-prod-cols, 4), minmax(0, 1fr));
}
.as-produits--1 { --as-prod-cols: 1; }
.as-produits--2 { --as-prod-cols: 2; }
.as-produits--3 { --as-prod-cols: 3; }
.as-produits--4 { --as-prod-cols: 4; }
.as-produits--5 { --as-prod-cols: 5; }
.as-produits--6 { --as-prod-cols: 6; }

/*
 * Les cartes s'étirent sur toute la hauteur de leur rangée, et chaque zone
 * a une hauteur fixe : sans cela, une description de deux lignes décale le
 * bouton par rapport à celui d'à côté, et la grille paraît désordonnée.
 */
.as-produits__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  margin: 0 !important;
  padding: 16px !important;
  background: #fff;
  border-radius: 8px;
  list-style: none !important;
}
.as-produits--voisins .as-produits__item { padding: 14px !important; }
.as-produits__item::before,
.as-produits__item::marker { content: none !important; display: none !important; }

.as-produits__image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 190px;
  margin-bottom: 6px;
  padding: 12px;
  background: #FAFBFC;
  border-radius: 6px;
  text-align: center;
}
.as-produits__image a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.as-produits__image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.as-produits__marque {
  min-height: 16px;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #94A3B2 !important;
}

.as-produits__nom {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 44px;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}
.as-produits__nom a { color: #1E2A35 !important; text-decoration: none !important; }
.as-produits__nom a:hover { color: #2F80ED !important; }

.as-produits__modele,
.as-produits__categorie {
  min-height: 20px;
  margin: 0 !important;
  font-size: 13px !important;
  color: #6B7A88 !important;
}
.as-produits__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 63px;
  margin: 4px 0 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #5A6B7B !important;
}

.as-produits__lien { margin-top: auto; padding-top: 12px; }

.as-produits__vide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #B9C4CE;
  font-size: 13px;
  text-decoration: none !important;
}
/* Le thème souligne les liens : ce texte n'en est pas un. */
.as-produits__image a { text-decoration: none !important; }

@media (max-width: 1000px) { .as-produits__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Sur mobile, une seule colonne : deux cartes côte à côte réduiraient
   l'image à une vignette illisible et couperaient les noms de modèle. */
@media (max-width: 782px)  { .as-produits__liste { grid-template-columns: 1fr; } }


/* =============================================================================
   Page individuelle d'un produit
   ========================================================================== */

.as-produit-page .as-fiche__col--produit-image {
  align-self: start;
}

.as-produit__visuel {
  padding: 22px;
  background: #fff;
  border-radius: 10px;
  text-align: center;
}
.as-produit__visuel img {
  display: inline-block;
  max-width: 100%;
  max-height: 420px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.as-produit__visuel--vide {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  color: #B9C4CE;
  font-size: 14px;
}

.as-produit-page .as-produit__marque {
  margin: 0 0 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #94A3B2 !important;
}

.as-produit-page .as-produit__modele {
  margin: -6px 0 2px !important;
  font-size: 15px !important;
  color: #6B7A88 !important;
}

/* La catégorie suit le modèle, dans le même style : ligne de texte, pas
   de pastille. La marge du bas reprend celle que portait le modèle. */
.as-produit-page .as-produit__categorie {
  margin: 0 0 14px !important;
  font-size: 15px !important;
  color: #6B7A88 !important;
}

.as-produit__action { margin: 22px 0 8px !important; }

.as-produit__hote {
  margin: 0 !important;
  font-size: 12px !important;
  color: #94A3B2 !important;
}

/* Bloc « Autres produits » en bas de page */
.as-produits--voisins {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid #E3E8EE;
}
.as-produits--voisins .as-produits__titre { font-size: 17px !important; }

/* Vues secondaires d'un produit */
.as-produit__vues {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.as-produit__vues li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.as-produit__vues li::before, .as-produit__vues li::marker { content: none !important; display: none !important; }

.as-produit__vue {
  display: block;
  padding: 4px !important;
  border: 2px solid #E3E8EE !important;
  border-radius: 6px !important;
  background: #fff !important;
  cursor: pointer;
  transition: border-color .12s ease;
}
.as-produit__vue img {
  display: block;
  width: 62px;
  height: 52px;
  object-fit: contain;
}
.as-produit__vue:hover { border-color: #B9C4CE !important; }
.as-produit__vue.is-active { border-color: #4A5768 !important; }


.as-produits__compte {
  margin: 0 0 16px !important;
  font-size: 13px !important;
  color: #6B7A88 !important;
}

/* Une carte masquée par les filtres ne doit pas occuper de place. */
.as-produits__item[hidden] { display: none !important; }

/* Bouton du formulaire de filtres, aligné avec les menus */
/* Les filtres reprennent le dessin du répertoire ; seuls les boutons
   demandent un ajustement. */
.as-produits .as-recherche__actions a { text-decoration: none !important; }



.as-produits__vide-liste {
  margin: 0 !important;
  padding: 30px 0;
  text-align: center;
  color: #6B7A88 !important;
  font-size: 15px !important;
}

/* Pagination de la grille de produits */
.as-produits__pages {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #E3E8EE;
}
.as-produits__pages a { text-decoration: none !important; }

.as-produits__pages-etat {
  font-size: 14px;
  color: #4A5768;
}
.as-produits__pages-total { color: #94A3B2; }

/* =============================================================================
   Filtres des produits : même dessin que ceux du répertoire
   ========================================================================== */

.as-produits .as-recherche {
  margin: 0 0 26px;
  padding: 24px 26px;
  background: #fff;
  border-radius: 8px;
}

.as-produits .as-champs {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 26px;
}
.as-produits .as-champ { flex: 0 1 260px; }

.as-produits .as-champ label {
  display: block !important;
  margin: 0 0 8px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #1E2A35 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.as-produits .as-champ input[type="text"] {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid #D6DDE4 !important;
  border-radius: 4px !important;
  background: #fff !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  color: #1E2A35 !important;
  line-height: 40px !important;
}
.as-produits .as-champ input[type="text"]:focus {
  outline: none !important;
  border-color: #4A5768 !important;
}

.as-produits .as-groupe {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}
.as-produits .as-groupe__titre {
  display: block !important;
  width: 100%;
  margin: 0 0 14px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid #C9D3DC;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #1E2A35 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Groupes repliables (marque, catégorie) : l'en-tête sert de bouton et
   porte le « + », qui bascule en « − » une fois le groupe ouvert. */
.as-produits .as-groupe--pli > summary.as-groupe__titre {
  display: flex !important;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.as-produits .as-groupe--pli > summary.as-groupe__titre::-webkit-details-marker { display: none; }
.as-produits .as-groupe__nom { flex: none; }
.as-produits .as-groupe__compte {
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  background: #E7EDF2;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #4A5768 !important;
}
.as-produits .as-groupe__actifs {
  flex: none;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #4A5768 !important;
}
/* Le « + » est poussé à droite : repère de pliage constant d'un groupe à l'autre. */
.as-produits .as-groupe--pli > summary.as-groupe__titre::after {
  content: "+";
  margin-left: auto;
  width: 26px;
  height: 26px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #C9D3DC;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: #4A5768;
}
.as-produits .as-groupe--pli[open] > summary.as-groupe__titre::after { content: "−"; }
.as-produits .as-groupe--pli > summary.as-groupe__titre:hover::after {
  background: #E7EDF2;
  border-color: #4A5768;
}

/* Ouverte, la liste défile au lieu de repousser le bouton « Rechercher »
   hors de l'écran. La hauteur laisse voir une dizaine de lignes. */
.as-produits .as-cases-zone {
  max-height: 300px;
  overflow-y: auto;
  padding: 4px 4px 0;
  border: 1px solid #E1E8ED;
  border-radius: 8px;
  overscroll-behavior: contain;
}
.as-produits .as-cases-zone::-webkit-scrollbar { width: 10px; }
.as-produits .as-cases-zone::-webkit-scrollbar-thumb {
  background: #C9D3DC;
  border-radius: 999px;
}
.as-produits .as-cases-zone::-webkit-scrollbar-track { background: transparent; }

/* Quatre colonnes, remplies verticalement : la liste des marques se lit
   de haut en bas plutôt qu'en zigzag. */
.as-produits .as-cases {
  column-count: 4;
  column-gap: 24px;
}
.as-produits .as-case {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px !important;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  font-size: 15px !important;
  font-weight: 300 !important;
  color: #1E2A35 !important;
  cursor: pointer;
  line-height: 1.3 !important;
}
.as-produits .as-case span { font-size: 15px !important; font-weight: 300 !important; }
.as-produits .as-case input[type="checkbox"] {
  flex: none;
  width: 17px !important;
  height: 17px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: #4A5768;
  cursor: pointer;
}

.as-produits .as-recherche__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.as-produits .as-recherche__actions a { text-decoration: none !important; }
.as-produits .as-recherche__actions button:hover { background: #2C3542 !important; }

@media (max-width: 1000px) { .as-produits .as-cases { column-count: 3; } }
@media (max-width: 760px)  { .as-produits .as-cases { column-count: 2; } }
@media (max-width: 480px) {
  .as-produits .as-cases { column-count: 1; }
  .as-produits .as-champ { flex: 1 1 100%; }
}

/* Un champ relié à une liste de suggestions affiche, sous Chrome, un petit
   triangle dans le coin. On le masque : les suggestions apparaissent de toute
   façon dès la saisie, et l'icône déséquilibrait le champ. */
.as-produits input[list]::-webkit-calendar-picker-indicator {
  display: none !important;
  opacity: 0 !important;
}

/* Grille en cours de rafraîchissement : un léger estompement suffit à
   signaler l'attente sans faire sauter la mise en page. */
.as-produits__grille { transition: opacity .12s ease; }
.as-produits__grille.is-charge { opacity: .45; }

/* Offre affichée sur la page d'un produit */
.as-produit__offre {
  margin-top: 24px;
  padding: 20px 22px;
  background: #fff;
  border-radius: 8px;
}
.as-produit__offre-titre {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #1E2A35 !important;
  line-height: 1.3 !important;
}
.as-produit__offre-texte {
  margin: 2px 0 0 !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  color: #5A6B7B !important;
}
.as-produit__offre .as-produit__action { margin: 16px 0 0 !important; }
.as-produit__offre a { text-decoration: none !important; }

/* Pastille verte de disponibilité */
.as-produit__pastille {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 8px;
  border-radius: 50%;
  background: #22A45D;
  /* Halo léger : la pastille se détache du texte sans l'alourdir. */
  box-shadow: 0 0 0 3px rgba(34, 164, 93, .18);
  vertical-align: middle;
}

.as-produit__offre-lieu {
  margin: 12px 0 0 !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.55 !important;
  color: #5A6B7B !important;
}

/* ------------------------------------------------------------------ */
/* Listes de marques et de catégories — [marques_spa], [categories_spa] */
/* ------------------------------------------------------------------ */

.as-valeurs { margin: 0 0 28px; }
.as-valeurs__titre {
  margin: 0 0 14px !important;
  padding: 0 0 10px;
  border-bottom: 1px solid #E1E8ED;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1F2A37 !important;
}

/* Colonnes remplies verticalement : la liste se lit de haut en bas,
   comme les cases à cocher du formulaire. Le nombre vient du shortcode. */
.as-valeurs__liste {
  column-gap: 24px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.as-valeurs__item {
  break-inside: avoid;
  margin: 0 0 2px !important;
  padding: 0 !important;
  list-style: none !important;
}
.as-valeurs__item::before { content: none !important; }
.as-valeurs__item a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  text-decoration: none !important;
  color: #2F6F8F !important;
  line-height: 1.35;
}
.as-valeurs__item a:hover {
  background: #EFF3F7;
  color: #1F2A37 !important;
}
.as-valeurs__compte {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: #E7EDF2;
  font-size: 12px;
  font-weight: 600;
  color: #4A5768;
}

@media (max-width: 900px) {
  .as-valeurs__liste { column-count: 2 !important; }
}
@media (max-width: 560px) {
  .as-valeurs__liste { column-count: 1 !important; }
}

/* ------------------------------------------------------------------ */
/* Grille de logos de marques — [logos_marques_spa]                     */
/* ------------------------------------------------------------------ */

.as-logos { margin: 0 0 28px; }
.as-logos__titre {
  margin: 0 0 16px !important;
  padding: 0 0 10px;
  border-bottom: 1px solid #E1E8ED;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1F2A37 !important;
}

/* Le nombre de colonnes vient du shortcode, par variable CSS. */
.as-logos__grille {
  display: grid;
  grid-template-columns: repeat(var(--as-logos-colonnes, 4), minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* Hauteur fixe : les logos ont des proportions très inégales, et sans
   contrainte commune les rangées seraient bancales. L'image s'inscrit
   dans la case sans se déformer ni se rogner. */
.as-logos__case {
  display: flex;
  align-items: center;
  justify-content: center;
  /* La hauteur exclut la marge : régler l'une n'écrase pas l'autre, et le
     logo garde la même respiration quand la case grandit. */
  box-sizing: content-box;
  height: var(--as-logos-hauteur, 110px);
  padding: var(--as-logos-marge, 22px);
  border: 1px solid #E1E8ED;
  border-radius: 10px;
  background: #FFFFFF;
  text-decoration: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.as-logos__case:hover {
  border-color: #C9D3DC;
  box-shadow: 0 2px 10px rgba(31, 42, 55, .08);
}
.as-logos__case img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.as-logos__nom {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: #4A5768 !important;
  line-height: 1.3;
}

@media (max-width: 900px) {
  .as-logos__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .as-logos__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Fond commun des cases, réglé par l'attribut « fond » du shortcode. */
.as-logos--gris .as-logos__case { background: #F1F4F7; border-color: #E1E8ED; }
.as-logos--sombre .as-logos__case { background: #1F2A37; border-color: #2C3A4B; }
.as-logos--sombre .as-logos__nom { color: #E7EDF2 !important; }

/* Cas particuliers, marque par marque. Un logo blanc reste lisible sur
   fond sombre ; l'inversion sert aux logos noirs sur fond sombre commun. */
.as-logos .as-logos__case--sombre {
  background: #1F2A37;
  border-color: #2C3A4B;
}
.as-logos .as-logos__case--sombre .as-logos__nom { color: #E7EDF2 !important; }
.as-logos .as-logos__case--clair { background: #FFFFFF; border-color: #E1E8ED; }

/* L'inversion convient aux logos d'une seule couleur : un blanc devient
   noir. Sur un logo en couleurs, elle fausserait les teintes. */
.as-logos .as-logos__case--invert img { filter: invert(1) grayscale(1); }

/* ------------------------------------------------------------------ */
/* Catégories et marques illustrées                                    */
/* — [images_categories_spa], [images_marques_spa]                     */
/* ------------------------------------------------------------------ */

.as-vignettes { margin: 0 0 28px; }
.as-vignettes__titre {
  margin: 0 0 16px !important;
  padding: 0 0 10px;
  border-bottom: 1px solid #E1E8ED;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1F2A37 !important;
}
.as-vignettes__grille {
  display: grid;
  grid-template-columns: repeat(var(--as-vignettes-colonnes, 4), minmax(0, 1fr));
  gap: 18px;
}

.as-vignette {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #E1E8ED;
  border-radius: 10px;
  background: #FFFFFF;
  text-decoration: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.as-vignette:hover {
  border-color: #C9D3DC;
  box-shadow: 0 2px 12px rgba(31, 42, 55, .09);
}

/* Hauteur d'image commune : les photos de pièces ont des proportions très
   variées, et sans cadre fixe les cartes d'une rangée seraient inégales.
   « contain » plutôt que « cover » : une pièce détourée ne doit pas être
   rognée, quitte à laisser de l'air autour. */
.as-vignette__image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--as-vignettes-hauteur, 180px);
  padding: 14px;
  background: #F7FAFC;
  border-bottom: 1px solid #E1E8ED;
}
.as-vignette__image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.as-vignette__vide {
  font-size: 13px;
  color: #9AA7B4;
}

.as-vignette__nom {
  padding: 12px 14px 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #1F2A37 !important;
}
.as-vignette__compte {
  padding: 4px 14px 14px;
  font-size: 13px;
  color: #6B7A88 !important;
}

@media (max-width: 900px) {
  .as-vignettes__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .as-vignettes__grille { grid-template-columns: 1fr; }
}

/* Quand le produit n'a pas de modèle, la catégorie remonte à sa place. */
.as-produit-page .as-fiche__nom + .as-produit__categorie { margin-top: -6px !important; }