/* La Construction — répertoire public
   Portée limitée à .lc-public : le thème garde la main partout ailleurs. */

/*
 * Une seule police pour tout ce que le module affiche.
 *
 * Déclarée sur :root et non sur .lc-public : le pied de page vit hors de ce
 * conteneur, et il doit lire la même chose. Le « !important » n'est pas un
 * excès de zèle — Salient impose sa police à coups de sélecteurs très
 * spécifiques, et sans lui le répertoire changerait d'allure d'un thème à
 * l'autre. Pour garder celle du thème :
 *   add_filter( 'lc_police_url', '__return_empty_string' );
 */
:root {
  --lc-police: "Epilogue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /*
   * L'accent aussi, et pour la même raison que la police.
   *
   * Le pied de page est un « footer » posé hors de .lc-public : sur une page
   * qui charge cette feuille-ci, ses règles lisaient var(--lc-accent) sans
   * rien trouver, et les déclarations concernées étaient abandonnées. Les
   * liens du pied perdaient leur teinte au survol sur les pages du répertoire,
   * et la gardaient partout ailleurs — un écart qu'on met longtemps à voir.
   *
   * La valeur de .lc-public l'emporte à l'intérieur du conteneur : un thème
   * qui y redéfinit l'accent continue de fonctionner comme avant. Pour que le
   * pied suive le même changement, redéclarez-le aussi sur :root.
   */
  --lc-accent: #088EA0;
  --lc-accent-sombre: #067484;
}

.lc-public, .lc-public * { font-family: var(--lc-police) !important; }

.lc-public {
  --lc-bg: #FFFFFF;
  --lc-surface: #F8FAFC;
  --lc-border: #E3E8EE;
  --lc-border-fort: #D5DCE5;
  --lc-encre: #1E2A35;
  --lc-encre-douce: #5A6B7B;
  --lc-muet: #94A3B2;
  /*
   * La couleur principale du site, celle des liens comme des boutons.
   *
   * Elle était bleue et les boutons turquoise : deux accents dans la même
   * page, sans que rien ne distingue ce que chacun voulait dire. Un seul
   * suffit — les liens se reconnaissent à leur place et à leur soulignement
   * au survol, pas à une teinte à part.
   */
  --lc-accent: #088EA0;
  --lc-accent-sombre: #067484;

  /* Fonds pâles dérivés de l'accent, pour les zones qu'il teinte. */
  --lc-accent-voile: #E6F5F7;
  --lc-accent-liseret: #B9E1E7;

  /*
   * Couleur des boutons, distincte de celle des liens.
   *
   * Un lien se reconnaît au bleu par habitude ; un bouton, lui, doit se fondre
   * dans la charte du site. Ils suivent l'accent par défaut, mais restent
   * réglables à part si vous voulez les en détacher :
   *   .lc-public { --lc-bouton: #C0392B; --lc-bouton-fonce: #96291C; }
   */
  --lc-bouton: var(--lc-accent);
  --lc-bouton-fonce: var(--lc-accent-sombre);

  /*
   * Couleur du texte des boutons pleins.
   *
   * Elle a sa propre variable pour une raison précise : la règle qui l'impose
   * porte « !important » — il le faut, le thème repeint sinon la moitié du
   * bouton — et une règle en !important ne se contredit pas depuis une feuille
   * de style ajoutée après. Passer par la variable reste donc le seul chemin
   * praticable :
   *   .lc-public { --lc-bouton-texte: #10202C; }
   */
  --lc-bouton-texte: #FFFFFF;

  /*
   * Fond posé derrière un logo aux traits clairs sur fond transparent.
   *
   * Noir franc : c'est le contraste maximal, et un logo conçu pour être
   * détouré a presque toujours été dessiné sur du noir. Pour l'adoucir :
   *   .lc-public { --lc-logo-fond: #10202C; }
   */
  --lc-logo-fond: #000000;
  --lc-etoile: #F5A623;
  --lc-vert: #12A150;
  --lc-rouge: #DC2626;
  --lc-rayon: 12px;
  --lc-rayon-sm: 8px;
  --lc-ombre: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --lc-ombre-forte: 0 12px 32px rgba(16, 24, 40, .10);
  --lc-cols: 3;

  color: var(--lc-encre);
  font-size: 16px;
  line-height: 1.55;

  /*
   * Largeur explicite, avant la mise en conteneur.
   *
   * « container-type: inline-size » coupe le contenu du calcul de largeur.
   * Dans un thème qui dispose ses blocs en flex, l'élément n'a alors plus rien
   * pour se dimensionner et se réduit à une colonne de quelques centimètres —
   * la fiche s'affichait sur cent quatre-vingts pixels au milieu d'une page
   * vide. « width: 100% » lui redonne une largeur définie, ce qui rend la mise
   * en conteneur sans danger.
   */
  display: block;
  width: 100%;
  container-type: inline-size;
}

.lc-public *,
.lc-public *::before,
.lc-public *::after { box-sizing: border-box; }

.lc-public h1, .lc-public h2, .lc-public h3, .lc-public p, .lc-public ul { margin: 0; }
/*
 * Aucune puce dans le module.
 *
 * « list-style: none » seul ne suffit pas : Salient dessine ses marqueurs par
 * un ::before, avec des sélecteurs plus spécifiques. On coupe les trois
 * chemins d'un coup — le marqueur natif, le pseudo-élément, et l'espace qu'ils
 * réservaient à gauche.
 */
.lc-public ul,
.lc-public ol { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; }
.lc-public li { list-style: none !important; }
.lc-public li::marker { content: none !important; }
.lc-public ul li::before,
.lc-public ol li::before { content: none !important; display: none !important; }
.lc-public a { color: var(--lc-accent); text-decoration: none; }
.lc-public a:hover { text-decoration: underline; }
.lc-public button { font: inherit; cursor: pointer; }

.lc-public .lc-h1 { font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.lc-public .lc-h2 { font-size: 23px; font-weight: 700; margin-bottom: 18px; }
.lc-public .lc-h3 { font-size: 17px; font-weight: 700; margin-bottom: 12px; }

.lc-public .lc-vide,
.lc-public .lc-intro { color: var(--lc-encre-douce); }
.lc-public .lc-vide { padding: 28px 0; text-align: center; }
.lc-public .lc-intro { margin-bottom: 20px; }

.lc-public .lc-cache {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------- Étoiles --------------------------------- */

.lc-public .lc-etoiles { display: inline-flex; align-items: center; gap: 1px; }
.lc-public .lc-etoile { color: #D9DEE5; font-size: 15px; line-height: 1; }
.lc-public .lc-etoile.is-pleine { color: var(--lc-etoile); }
/* Une demi-étoile : la moitié gauche colorée, par dégradé sur le texte. */
.lc-public .lc-etoile.is-demie {
  background: linear-gradient(90deg, var(--lc-etoile) 50%, #D9DEE5 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lc-public .lc-note-chiffre { margin-left: 6px; font-weight: 700; font-size: 14px; }
.lc-public .lc-note-nb { margin-left: 6px; font-size: 13px; color: var(--lc-muet); }
.lc-public .lc-sans-avis { font-size: 13px; color: var(--lc-muet); }

.lc-public .lc-verifie {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--lc-vert);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

/* ------------------------------- Formulaires -------------------------------- */

.lc-public .lc-champ {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--lc-border-fort);
  border-radius: var(--lc-rayon-sm);
  background: #fff;
  color: var(--lc-encre);
  font: inherit;
  font-size: 15px;
}
.lc-public .lc-champ:focus {
  outline: none;
  border-color: var(--lc-bouton);
  box-shadow: 0 0 0 3px rgba(8, 142, 160, .16);
}
.lc-public .lc-champ--mini { width: auto; padding: 7px 10px; font-size: 14px; }
.lc-public textarea.lc-champ { resize: vertical; min-height: 120px; }

.lc-public .lc-bouton {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid var(--lc-border-fort);
  border-radius: var(--lc-rayon-sm);
  background: #fff;
  color: var(--lc-encre);
  /* Epilogue en graisse légère : la police porte assez le texte à cette
     taille, et l'ensemble respire davantage qu'en demi-gras. La règle qui fait
     foi est plus bas, celle qui résiste au thème — les deux valeurs doivent
     rester d'accord. */
  font-size: 16px;
  font-weight: 300;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.lc-public .lc-bouton:hover { background: var(--lc-surface); text-decoration: none; }
.lc-public .lc-bouton--principal {
  border-color: var(--lc-bouton);
  background: var(--lc-bouton);
  color: var(--lc-bouton-texte);
}
.lc-public .lc-bouton--principal:hover { background: var(--lc-bouton-fonce); border-color: var(--lc-bouton-fonce); color: var(--lc-bouton-texte); }
.lc-public .lc-bouton--plein { width: 100%; margin-top: 14px; }
.lc-public .lc-bouton[disabled] { opacity: .55; cursor: default; }

.lc-public .lc-lien-plat {
  padding: 0;
  border: 0;
  background: none;
  color: var(--lc-encre-douce);
  font-size: 13px;
  text-decoration: underline;
}
.lc-public .lc-lien-plat:hover { color: var(--lc-encre); }

/*
 * La couleur du libellé est déclarée, jamais héritée.
 *
 * Salient grise les intitulés de menus déroulants. Un formulaire affichait
 * donc « Région » en gris pâle à côté de « Code postal » en foncé, sur la même
 * rangée — et l'on cherchait la cause du côté du menu, qui n'y était pour
 * rien. Fixer la taille et la graisse sans fixer la couleur laisse justement
 * passer ce qui se voit le plus.
 */
.lc-public .lc-etiquette {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lc-encre);
}
.lc-public .lc-aide { display: block; margin-top: 5px; font-size: 12px; color: var(--lc-muet); }
.lc-public .lc-mini { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--lc-encre-douce); }
.lc-public .lc-champ-groupe { margin-bottom: 16px; flex: 1 1 220px; }
.lc-public .lc-champ-ligne { display: flex; flex-wrap: wrap; gap: 16px; }
.lc-public .lc-mention { margin: 4px 0 16px; font-size: 13px; color: var(--lc-muet); }

.lc-public .lc-reponse-formulaire { margin-top: 14px; font-size: 14px; }
.lc-public .lc-reponse-formulaire.is-ok { color: var(--lc-vert); font-weight: 600; }
.lc-public .lc-reponse-formulaire.is-erreur { color: var(--lc-rouge); font-weight: 600; }

/* --------------------------------- Recherche -------------------------------- */

.lc-public .lc-recherche {
  padding: 18px;
  margin-bottom: 22px;
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-rayon);
  background: var(--lc-surface);
}
.lc-public .lc-recherche__ligne { display: flex; flex-wrap: wrap; gap: 10px; }
.lc-public .lc-recherche__ligne .lc-champ { flex: 1 1 180px; }
.lc-public .lc-recherche__ligne .lc-champ--large { flex: 3 1 280px; }
.lc-public .lc-recherche__options {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  margin-top: 12px;
}

.lc-public .lc-compte { margin-bottom: 16px; font-size: 14px; color: var(--lc-encre-douce); }

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

.lc-public .lc-grille {
  display: grid;
  grid-template-columns: repeat(var(--lc-cols), minmax(0, 1fr));
  gap: 16px;
}

@container (max-width: 900px) {
  .lc-public .lc-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 560px) {
  .lc-public .lc-grille { grid-template-columns: 1fr; }
}

/* Filet de sécurité : un thème ou un navigateur qui ne joue pas la mise en
   conteneur doit tout de même empiler sur un écran étroit. */
@media (max-width: 900px) {
  .lc-public .lc-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .lc-public .lc-grille { grid-template-columns: 1fr; }
}

.lc-public .lc-carte {
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-rayon);
  background: var(--lc-bg);
  box-shadow: var(--lc-ombre);
  transition: box-shadow .18s ease, transform .18s ease;
}
.lc-public .lc-carte:hover { box-shadow: var(--lc-ombre-forte); transform: translateY(-2px); }
.lc-public .lc-carte.is-vedette { border-color: #F0C67A; }

.lc-public .lc-carte__lien {
  display: flex;
  gap: 14px;
  padding: 16px;
  color: inherit;
  text-decoration: none;
}
.lc-public .lc-carte__lien:hover { text-decoration: none; }

.lc-public .lc-carte__media {
  flex: none;
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--lc-rayon-sm);
  background: var(--lc-surface);
  overflow: hidden;
}
/* Voir la note du carrousel : « max-* » plutôt que « height: 100% », que les
   thèmes écrasent par « img { height: auto } ». */
.lc-public .lc-carte__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lc-public .lc-carte__initiale { font-size: 22px; font-weight: 700; color: var(--lc-muet); }

.lc-public .lc-carte__corps { display: grid; gap: 4px; min-width: 0; }
.lc-public .lc-carte__tete { display: flex; align-items: center; gap: 7px; }
.lc-public .lc-carte__nom { font-size: 16px; font-weight: 700; }
.lc-public .lc-carte__secteur { font-size: 13px; color: var(--lc-accent); }
.lc-public .lc-carte__lieu { font-size: 13px; color: var(--lc-encre-douce); }
.lc-public .lc-carte__resume { font-size: 13px; color: var(--lc-muet); }

/* ------------------------------ Secteurs, régions ---------------------------- */

.lc-public .lc-secteur,
.lc-public .lc-region {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-rayon);
  background: var(--lc-bg);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.lc-public .lc-secteur:hover,
.lc-public .lc-region:hover { border-color: var(--lc-accent); background: var(--lc-surface); text-decoration: none; }

.lc-public .lc-secteur__img {
  height: 92px;
  margin-bottom: 8px;
  border-radius: var(--lc-rayon-sm);
  background-size: cover;
  background-position: center;
}
.lc-public .lc-secteur__nom,
.lc-public .lc-region__nom { font-weight: 700; }
.lc-public .lc-secteur__nb,
.lc-public .lc-region__nb { font-size: 13px; color: var(--lc-muet); }

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

.lc-public .lc-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 26px; }
.lc-public .lc-pagination__lien {
  min-width: 38px;
  padding: 8px 12px;
  border: 1px solid var(--lc-border-fort);
  border-radius: var(--lc-rayon-sm);
  background: #fff;
  color: var(--lc-encre);
  font-size: 14px;
  text-align: center;
  text-decoration: none;
}
.lc-public .lc-pagination__lien:hover { background: var(--lc-surface); text-decoration: none; }
.lc-public .lc-pagination__lien.is-active { border-color: var(--lc-bouton); background: var(--lc-bouton); color: #fff; }
.lc-public .lc-pagination__saut { padding: 8px 4px; color: var(--lc-muet); }

.lc-public .lc-appel {
  margin-top: 30px;
  padding: 16px;
  border: 1px dashed var(--lc-border-fort);
  border-radius: var(--lc-rayon);
  text-align: center;
  color: var(--lc-encre-douce);
}

/* ------------------------------ Fiche d'entreprise --------------------------- */

.lc-public.lc-fiche-page {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 18px 50px;
}

/* Le fil d'Ariane tient sur une ligne et passe à la suivante d'un bloc, plutôt
   que de casser après chaque lien. */
.lc-public .lc-fil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}
.lc-public .lc-fil__sep { margin: 0 4px; }

.lc-public .lc-fil { margin-bottom: 16px; font-size: 13px; color: var(--lc-muet); }
.lc-public .lc-fil__sep { margin: 0 6px; }
.lc-public .lc-fil__ici { color: var(--lc-encre-douce); }







.lc-public .lc-fiche__grille {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}
@container (max-width: 860px) {
  .lc-public .lc-fiche__grille { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .lc-public .lc-fiche__grille { grid-template-columns: 1fr; }
}

.lc-public .lc-bloc {
  padding: 20px;
  margin-bottom: 18px;
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-rayon);
  background: var(--lc-bg);
}


/* Sans capitales : l'œil reconnaît la silhouette d'un mot, et « TÉLÉPHONE »
   n'en a plus. */
.lc-public .lc-coord__label { display: block; font-size: 12px; color: var(--lc-muet); letter-spacing: 0; }





.lc-public .lc-repartition {
  display: grid;
  grid-template-columns: 38px 1fr 28px;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
  font-size: 13px;
}
.lc-public .lc-repartition__piste { height: 7px; border-radius: 999px; background: #EDF1F5; overflow: hidden; }
.lc-public .lc-repartition__valeur { display: block; height: 100%; border-radius: 999px; background: var(--lc-etoile); }
.lc-public .lc-repartition__nb { text-align: right; color: var(--lc-muet); }

.lc-public .lc-description { font-size: 15px; color: var(--lc-encre-douce); }
.lc-public .lc-compteur { font-weight: 400; color: var(--lc-muet); }

/* ---------------------------------- Avis ------------------------------------ */

.lc-public .lc-tri-avis { margin-bottom: 14px; }
.lc-public .lc-avis-liste { display: grid; gap: 16px; }

.lc-public .lc-avis {
  padding: 16px;
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-rayon);
  background: var(--lc-bg);
}
.lc-public .lc-avis--carte { box-shadow: var(--lc-ombre); }

.lc-public .lc-avis__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.lc-public .lc-avis__auteur { display: flex; align-items: center; gap: 10px; }
.lc-public .lc-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--lc-surface);
  color: var(--lc-encre-douce);
  font-weight: 700;
}
.lc-public .lc-avis__nom { display: block; font-weight: 600; font-size: 15px; }
.lc-public .lc-avis__ville { display: block; font-size: 12px; color: var(--lc-muet); }
.lc-public .lc-avis__droite { display: grid; justify-items: end; gap: 2px; }
.lc-public .lc-avis__date { font-size: 12px; color: var(--lc-muet); }
.lc-public .lc-avis__titre { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.lc-public .lc-avis__texte { font-size: 15px; color: var(--lc-encre-douce); }
.lc-public .lc-avis__meta { margin-top: 10px; font-size: 13px; color: var(--lc-muet); }
.lc-public .lc-avis__pied { display: flex; gap: 16px; margin-top: 12px; }

.lc-public .lc-reponse {
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 3px solid var(--lc-accent);
  border-radius: var(--lc-rayon-sm);
  background: var(--lc-surface);
}
.lc-public .lc-reponse__tete { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 700; color: var(--lc-accent); letter-spacing: 0; }
.lc-public .lc-reponse__texte { font-size: 14px; color: var(--lc-encre-douce); }

.lc-public .lc-utile.is-vote { color: var(--lc-vert); font-weight: 600; }

/* ----------------------------- Notation en étoiles ---------------------------- */

.lc-public .lc-notation { display: inline-flex; flex-direction: row-reverse; gap: 3px; }
.lc-public .lc-notation__etoile { cursor: pointer; }
.lc-public .lc-notation__etoile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lc-public .lc-notation__etoile span[aria-hidden] {
  font-size: 30px;
  line-height: 1;
  color: #D9DEE5;
  transition: color .12s ease;
}
/*
 * Étoiles en ordre inversé : survoler ou cocher la troisième colore aussi la
 * deuxième et la première, ce qu'un sélecteur « frères suivants » ne sait
 * faire que si l'ordre visuel est renversé.
 */
.lc-public .lc-notation__etoile:hover span[aria-hidden],
.lc-public .lc-notation__etoile:hover ~ .lc-notation__etoile span[aria-hidden],
.lc-public .lc-notation__etoile input:checked ~ span[aria-hidden],
.lc-public .lc-notation__etoile:has(input:checked) ~ .lc-notation__etoile span[aria-hidden] {
  color: var(--lc-etoile);
}
.lc-public .lc-notation__etoile input:focus-visible ~ span[aria-hidden] { outline: 2px solid var(--lc-bouton); outline-offset: 2px; }

.lc-public .lc-bloc--formulaire { background: var(--lc-surface); }
.lc-public .lc-retour { margin-top: 30px; }

/* Colonne de gauche de la fiche : les coordonnées restent sous les yeux
   pendant qu'on fait défiler une longue liste d'avis. */
.lc-public .lc-fiche__col--infos { position: sticky; top: 20px; }
@container (max-width: 860px) {
  .lc-public .lc-fiche__col--infos { position: static; }
}
@media (max-width: 900px) {
  .lc-public .lc-fiche__col--infos { position: static; }
}

.lc-public .lc-carte__note,
.lc-public .lc-fiche__note { display: flex; align-items: center; flex-wrap: wrap; }
.lc-public .lc-repartition__note { color: var(--lc-encre-douce); white-space: nowrap; }

/* =============================================================================
   Pied de page du répertoire
   =============================================================================
   Fond sombre, titres blancs, liens gris clair, accents turquoise. Le bloc ne
   dépend d'aucune variable du thème : posé dans un pied Salient, un widget ou
   une page ordinaire, il se lit de la même façon.
   ========================================================================== */

.lc-pied {
  margin: 34px 0 0;
  padding: 46px 40px 0;
  border-radius: 10px;
  background: #10202C;
  color: #C9D3DC;
  line-height: 1.55;
}
.lc-pied, .lc-pied * { font-family: var(--lc-police) !important; }
.lc-pied *, .lc-pied *::before, .lc-pied *::after { box-sizing: border-box; }

/*
 * Les colonnes s'ajustent à leur nombre.
 *
 * Un gabarit fixe convenait aux quatre listes prévues ; un menu peut en
 * compter trois ou sept, et les surnuméraires passaient à la ligne en laissant
 * de grands vides. « align-items: start » empêche une colonne courte de
 * s'étirer sur la hauteur de la plus longue, ce qui décollerait son titre.
 */
.lc-pied__haut {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  align-items: start;
  gap: 40px;
  padding-bottom: 38px;
}

/*
 * Titres en blanc, sans capitales forcées : l'œil reconnaît la silhouette d'un
 * mot, et « SECTEURS POPULAIRES » n'en a plus. Le blanc et la graisse suffisent
 * à les distinguer des liens.
 */
.lc-pied .lc-pied__titre {
  margin: 0 0 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  /*
   * Un cran au-dessus des liens de la colonne, qui sont à 16 px.
   *
   * « !important » n'est pas un caprice : Salient dimensionne les h3 par
   * « .container-wrap h3 », plus spécifique que ce sélecteur. Sans lui, le
   * titre repartait à la taille du thème — 23 px — quelle que soit la valeur
   * posée ici.
   */
  font-size: 18px !important;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
/*
 * Le lien et le simple texte se règlent ensemble.
 *
 * « .lc-pied__titre-texte » habille les deux : une taille posée là s'applique
 * aussi bien à « Secteurs populaires », qui est un lien, qu'à « Navigation »,
 * qui n'en est pas un.
 */
.lc-pied .lc-pied__titre-texte {
  color: #fff;
  font-family: inherit;
  font-size: inherit !important;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: none;
}
.lc-pied a.lc-pied__titre-texte:hover { color: #7FD3DE; text-decoration: none; }

.lc-pied .lc-pied__intro {
  margin: 0 0 24px;
  color: #C9D3DC;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
}

.lc-pied .lc-pied__coord {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  color: #C9D3DC;
  font-size: 16px;
  font-weight: 300;
  text-decoration: none;
}
.lc-pied .lc-pied__coord:hover { color: #7FD3DE; text-decoration: none; }
.lc-pied .lc-pied__coord svg { flex: none; margin-top: 2px; color: #7FD3DE; }
.lc-pied .lc-pied__coord span { display: block; }
.lc-pied .lc-pied__coord span span { color: inherit; }

.lc-pied__reseaux { display: flex; gap: 10px; margin-top: 24px; }
.lc-pied .lc-pied__reseau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  color: #C9D3DC;
  text-decoration: none;
}
.lc-pied .lc-pied__reseau:hover { border-color: #7FD3DE; color: #7FD3DE; text-decoration: none; }

.lc-pied .lc-pied__liste { margin: 0; padding: 0; list-style: none; }
.lc-pied .lc-pied__liste li { margin: 0; padding: 0; list-style: none; }
.lc-pied .lc-pied__liste li::marker { content: none; }
.lc-pied .lc-pied__liste a,
.lc-pied .lc-pied__liste span {
  display: block;
  padding: 9px 0;
  color: #C9D3DC;
  font-size: 16px;
  font-weight: 300;
  text-decoration: none;
}
.lc-pied .lc-pied__liste a:hover { color: #7FD3DE; text-decoration: none; }

/* Une liste très fournie se répartit sur deux colonnes plutôt que de tirer le
   pied de page sur toute la hauteur de l'écran. */
.lc-pied__liste--colonnes { column-width: 170px; column-gap: 28px; }
.lc-pied__bloc--large { grid-column: span 2; }

.lc-pied__atouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 28px;
  padding: 30px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.lc-pied__atout { display: flex; align-items: flex-start; gap: 14px; }
.lc-pied__ico { flex: none; color: #7FD3DE; line-height: 0; }
.lc-pied__atout-texte { display: flex; flex-direction: column; gap: 4px; }
.lc-pied .lc-pied__atout-texte strong {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.lc-pied .lc-pied__atout-texte span {
  color: #fff;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.5;
}

.lc-pied__bas {
  padding: 22px 0 26px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.lc-pied .lc-pied__droits {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 300;
}

@media (max-width: 700px) {
  .lc-pied { padding: 32px 20px 0; }
  .lc-pied__haut { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .lc-pied__bloc--large { grid-column: span 1; }
  .lc-pied__liste--colonnes { column-width: auto; column-count: 1; }
}

/* -----------------------------------------------------------------------------
   Le thème ne doit pas repeindre à moitié
   -----------------------------------------------------------------------------
   Salient impose sa couleur aux boutons par des sélecteurs très spécifiques,
   mais pas toujours la couleur du texte : le bouton « Rechercher » ressortait
   en turquoise avec des lettres sombres, illisible, alors que « Envoyer ma
   demande » sortait correctement. Plutôt que de deviner quelle moitié le thème
   va peindre, on pose les deux.
   -------------------------------------------------------------------------- */

.lc-public .lc-bouton--principal,
.lc-public .lc-bouton--principal:link,
.lc-public .lc-bouton--principal:visited {
  border-color: var(--lc-bouton) !important;
  background: var(--lc-bouton) !important;
  color: var(--lc-bouton-texte) !important;
}
.lc-public .lc-bouton--principal:hover,
.lc-public .lc-bouton--principal:focus,
.lc-public .lc-bouton--principal:active {
  border-color: var(--lc-bouton-fonce) !important;
  background: var(--lc-bouton-fonce) !important;
  color: var(--lc-bouton-texte) !important;
}
.lc-public .lc-bouton--principal * { color: var(--lc-bouton-texte) !important; }

/*
 * La taille et la graisse aussi.
 *
 * Salient dimensionne ses boutons par « .container-wrap a.button », un
 * sélecteur plus spécifique que le nôtre : « Voir la fiche » restait à la
 * taille du thème pendant que les autres suivaient. Même remède que pour la
 * couleur — on pose la règle assez fort pour qu'elle tienne.
 */
.lc-public .lc-bouton,
.lc-public a.lc-bouton,
.lc-public button.lc-bouton {
  font-family: var(--lc-police) !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Bouton secondaire : fond clair, texte sombre — l'inverse, et pour la même
   raison. */
.lc-public .lc-bouton:not(.lc-bouton--principal),
.lc-public .lc-bouton:not(.lc-bouton--principal):link,
.lc-public .lc-bouton:not(.lc-bouton--principal):visited {
  background: #fff !important;
  color: var(--lc-encre) !important;
}
.lc-public .lc-bouton:not(.lc-bouton--principal):hover {
  background: var(--lc-surface) !important;
  color: var(--lc-encre) !important;
}

/* -----------------------------------------------------------------------------
   Les formulaires dans un encadré
   -----------------------------------------------------------------------------
   Posés à même la page, les champs flottaient sur toute la largeur sans rien
   pour les tenir ensemble. Le fond pâle délimite la zone de saisie et la
   distingue du texte qui l'entoure.
   -------------------------------------------------------------------------- */

.lc-public .lc-formulaire {
  padding: 24px;
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-rayon);
  background: var(--lc-surface);
}

/* Dans un encadré déjà pâle, les champs ressortent en blanc. */
.lc-public .lc-formulaire .lc-champ { background: #fff; }

/* Le formulaire d'avis est déjà dans un bloc : pas de cadre dans un cadre. */
.lc-public .lc-bloc .lc-formulaire {
  padding: 0;
  border: 0;
  background: none;
}

@media (max-width: 640px) {
  .lc-public .lc-formulaire { padding: 18px; }
}

/* =============================================================================
   Fiche d'entreprise
   =============================================================================
   Une bannière, une carte d'identité qui la chevauche, puis deux colonnes :
   les faits à gauche, la parole des clients à droite. Chaque bloc est une carte
   blanche sur fond pâle — la page se parcourt d'un coup d'œil au lieu de se
   lire ligne à ligne.
   ========================================================================== */

.lc-public.lc-fiche-page { background: transparent; }

/* --------------------------------- Bannière --------------------------------- */

.lc-public .lc-couverture {
  height: 220px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
}
/* Sans photo, un dégradé sobre plutôt qu'un trou blanc. */
.lc-public .lc-couverture--vide {
  height: 140px;
  background: linear-gradient(120deg, #0F2E38 0%, #12586A 55%, var(--lc-bouton) 100%);
}

/* ------------------------------ Carte d'identité ----------------------------- */

.lc-public .lc-fiche__tete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  margin: -58px 16px 22px;
  padding: 20px 24px;
  border: 1px solid var(--lc-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(16, 24, 40, .09);
}

.lc-public .lc-fiche__logo-cadre {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  padding: 10px;
  border: 1px solid var(--lc-border);
  border-radius: 12px;
  background: #fff;
}
.lc-public .lc-fiche__logo-cadre img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lc-public .lc-fiche__initiale { font-size: 46px; font-weight: 700; color: var(--lc-muet); }

.lc-public .lc-fiche__identite { display: grid; gap: 5px; min-width: 0; }
.lc-public .lc-fiche__identite .lc-h1 { font-size: 32px; }

/*
 * Même remède que sur les lignes du répertoire.
 *
 * Salient donne aux paragraphes une marge basse et une hauteur de ligne
 * généreuses, par des sélecteurs plus spécifiques que les nôtres. L'espace
 * réapparaît alors à l'intérieur de chaque bloc — invisible du côté des
 * marges, qui sont pourtant bien à zéro. On coupe les deux, sur les enfants
 * comme sur leur contenu, et « gap » redevient seul maître de l'écart.
 *
 * Le vrai remède est ailleurs, dans le balisage : ces lignes d'information
 * sont désormais des <div> et non des <p>. Salient vise les paragraphes par
 * « #ajax-content-wrap p » — un identifiant, qu'aucune combinaison de classes
 * ne peut battre. On ne gagne pas cette course ; on en sort. Les règles qui
 * suivent restent comme garde-fou pour les thèmes moins insistants.
 */
.lc-public .lc-fiche__tete .lc-fiche__identite > *,
.lc-public .lc-fiche__tete .lc-fiche__identite > * > *,
.lc-public .lc-bloc .lc-coord__corps > *,
.lc-public .lc-bloc .lc-vide-etat > * {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

/* Les étoiles gardent leur boîte serrée. */
.lc-public .lc-fiche__tete .lc-fiche__identite .lc-etoile { line-height: 1 !important; }

/*
 * Les textes qui se lisent vraiment gardent de l'air.
 *
 * Le nom d'une entreprise et son adresse tiennent sur une ligne ; une
 * description ou un avis se lisent sur plusieurs, et les serrer les rendrait
 * pénibles. On remet donc les marges à zéro sans toucher à l'interlignage.
 */
.lc-public .lc-description > *,
.lc-public .lc-avis__texte,
.lc-public .lc-reponse__texte {
  margin: 0 !important;
}
.lc-public .lc-description > * + * { margin-top: 12px !important; }

.lc-public .lc-fiche__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.lc-public .lc-fiche__invite { display: block; }
.lc-public .lc-fiche__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--lc-accent);
  text-decoration: none;
}
.lc-public .lc-fiche__tag:hover { text-decoration: underline; }
.lc-public .lc-fiche__tag--muet { color: var(--lc-encre-douce); }

.lc-public .lc-fiche__note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lc-public .lc-fiche__note .lc-etoile { font-size: 19px; }
.lc-public .lc-fiche__note .lc-note-chiffre { font-size: 17px; }
.lc-public .lc-fiche__sep { color: var(--lc-border-fort); }

.lc-public .lc-verifie-etiquette {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--lc-vert);
}

.lc-public .lc-fiche__invite { font-size: 14px; color: var(--lc-encre-douce); }

/* -------------------------------- Actions ----------------------------------- */

.lc-public .lc-fiche__actions { display: grid; justify-items: stretch; gap: 16px; }

.lc-public .lc-bouton--cta {
  gap: 10px;
  padding: 14px 26px;
  border-radius: 10px;
  white-space: nowrap;
}

.lc-public .lc-actions-rondes { display: flex; justify-content: center; gap: 22px; }

.lc-public .lc-action-ronde {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lc-encre-douce);
  font-size: 12px;
}
.lc-public .lc-action-ronde__cercle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--lc-border);
  border-radius: 50%;
  background: var(--lc-surface);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.lc-public .lc-action-ronde:hover .lc-action-ronde__cercle {
  border-color: var(--lc-bouton);
  color: var(--lc-bouton);
  background: #fff;
}
/* Une entreprise mise de côté se voit au premier coup d'œil. */
.lc-public .lc-action-ronde.is-actif .lc-action-ronde__cercle {
  border-color: var(--lc-rouge);
  background: #FEF2F2;
  color: var(--lc-rouge);
}
.lc-public .lc-action-ronde.is-actif .lc-action-ronde__cercle .lc-ico { fill: currentColor; }
.lc-public .lc-action-ronde[disabled] { opacity: .55; }

/* ---------------------------------- Blocs ------------------------------------ */

.lc-public .lc-fiche__grille { gap: 22px; }

.lc-public .lc-bloc {
  padding: 22px 24px;
  margin-bottom: 22px;
  border: 1px solid var(--lc-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--lc-ombre);
}

.lc-public .lc-bloc__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.lc-public .lc-bloc__entete .lc-bloc__titre { margin-bottom: 0; }

.lc-public .lc-bloc__titre {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 19px;
  font-weight: 700;
  color: var(--lc-encre);
}
.lc-public .lc-bloc__titre--accent { color: var(--lc-accent); }
.lc-public .lc-bloc__sous { margin: -10px 0 18px; font-size: 14px; color: var(--lc-accent); }

.lc-public .lc-bloc__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 10px;
  background: var(--lc-accent-voile);
  color: var(--lc-accent);
}
.lc-public .lc-bloc__ico--etoile { background: #FEF5E7; color: var(--lc-etoile); }

/* Bandeau pliable des heures d'ouverture. */
.lc-public .lc-bloc__titre--pliable {
  width: 100%;
  margin-bottom: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
.lc-public .lc-bloc__mot { flex: 1 1 auto; display: grid; gap: 3px; }
.lc-public .lc-bloc__chevron { flex: none; color: var(--lc-muet); transition: transform .18s ease; }
.lc-public .lc-bloc__titre--pliable[aria-expanded="true"] .lc-bloc__chevron { transform: rotate(180deg); }

.lc-public .lc-etat { font-size: 14px; font-weight: 600; }
.lc-public .lc-etat.is-ouvert { color: var(--lc-vert); }
.lc-public .lc-etat.is-ferme { color: var(--lc-encre-douce); }

/* ------------------------------- Coordonnées --------------------------------- */

.lc-public .lc-coord { display: grid; gap: 16px; }
.lc-public .lc-coord__ligne { display: flex; align-items: flex-start; gap: 13px; }
.lc-public .lc-coord__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  background: var(--lc-surface);
  color: var(--lc-accent);
}
.lc-public .lc-coord__corps { display: grid; gap: 3px; min-width: 0; }
.lc-public .lc-coord__label { font-size: 12px; color: var(--lc-muet); }
.lc-public .lc-coord__valeur { font-size: 15px; color: var(--lc-encre); word-break: break-word; }
.lc-public a.lc-coord__valeur { color: var(--lc-accent); }



/* ----------------------------- Réseaux sociaux ------------------------------- */

.lc-public .lc-reseaux { display: flex; flex-wrap: wrap; gap: 12px; }
.lc-public .lc-reseau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  transition: transform .15s ease, filter .15s ease;
}
.lc-public .lc-reseau:hover { transform: translateY(-2px); filter: brightness(1.08); text-decoration: none; }
.lc-public .lc-reseau--facebook { background: #1877F2; }
.lc-public .lc-reseau--instagram { background: linear-gradient(45deg, #F09433, #DC2743 45%, #BC1888); }
.lc-public .lc-reseau--linkedin { background: #0A66C2; }

/* -------------------------------- Horaires ----------------------------------- */

.lc-public .lc-horaire { display: grid; gap: 9px; margin-top: 16px; font-size: 14px; }
.lc-public .lc-horaire li { display: flex; justify-content: space-between; gap: 12px; }
.lc-public .lc-horaire__jour { color: var(--lc-encre-douce); }
.lc-public .lc-horaire li.is-aujourdhui { font-weight: 700; color: var(--lc-encre); }
.lc-public .lc-horaire li.is-aujourdhui .lc-horaire__jour { color: inherit; }

/* ------------------------------- Avis, vide ---------------------------------- */

.lc-public .lc-vide-etat { padding: 30px 10px; text-align: center; }
.lc-public .lc-vide-etat__ico { display: inline-flex; color: var(--lc-border-fort); }
.lc-public .lc-vide-etat__titre { margin-top: 10px; font-size: 18px; font-weight: 700; }
.lc-public .lc-vide-etat__texte { font-size: 14px; color: var(--lc-encre-douce); }

/* ---------------------------- Formulaire d'avis ------------------------------ */

.lc-public .lc-bloc--formulaire {
  border-color: var(--lc-accent-liseret);
  background: linear-gradient(180deg, #F3FBFC 0%, #FFFFFF 60%);
}
.lc-public .lc-requis { color: var(--lc-rouge); }
.lc-public .lc-tri-avis { margin: 0; }

@media (max-width: 860px) {
  .lc-public .lc-fiche__tete { grid-template-columns: 1fr; justify-items: center; text-align: center; margin: -46px 8px 22px; }
  .lc-public .lc-fiche__identite { justify-items: center; }
  .lc-public .lc-fiche__meta,
  .lc-public .lc-fiche__note { justify-content: center; }
  .lc-public .lc-fiche__actions { justify-self: stretch; }
}

/* =============================================================================
   Répertoire : la colonne de gauche et les résultats
   =============================================================================
   Deux colonnes : où chercher à gauche, ce qu'on a trouvé à droite. Les
   résultats sont des lignes longues et non des tuiles — c'est la page où l'on
   compare, et on ne compare pas six noms sans rien d'autre.
   ========================================================================== */

.lc-public .lc-rep {
  display: grid;
  grid-template-columns: minmax(230px, 285px) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}
@media (max-width: 980px) {
  .lc-public .lc-rep { grid-template-columns: 1fr; }
}

.lc-public .lc-rep__principal { min-width: 0; }

/* --------------------------- En-tête des résultats --------------------------- */

.lc-public .lc-rep__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.lc-public .lc-rep__titre { font-size: 23px; font-weight: 700; line-height: 1.3; }
.lc-public .lc-rep__titre strong { color: var(--lc-accent); }
.lc-public .lc-rep__sous { margin-top: 4px; font-size: 14px; color: var(--lc-encre-douce); }

.lc-public .lc-rep__tri { display: inline-flex; align-items: center; gap: 9px; }
.lc-public .lc-rep__tri-mot { font-size: 14px; color: var(--lc-encre-douce); white-space: nowrap; }
.lc-public .lc-rep__tri select { padding: 9px 12px; }

.lc-public .lc-rep__decompte {
  margin-top: 14px;
  font-size: 13px;
  color: var(--lc-muet);
  text-align: right;
}

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

.lc-public .lc-cote { display: grid; gap: 18px; position: sticky; top: 20px; }
@media (max-width: 980px) {
  .lc-public .lc-cote { position: static; }
}

.lc-public .lc-cote__bloc {
  padding: 18px;
  border: 1px solid var(--lc-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--lc-ombre);
}

.lc-public .lc-cote__titre {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 17px;
  font-weight: 700;
}
.lc-public .lc-cote__ico { display: flex; color: var(--lc-accent); }

.lc-public .lc-cote__liste { display: grid; gap: 1px; }

.lc-public .lc-cote__lien {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--lc-encre-douce);
  font-size: 14px;
  text-decoration: none;
}
.lc-public .lc-cote__lien:hover { background: var(--lc-surface); color: var(--lc-encre); text-decoration: none; }
.lc-public .lc-cote__lien.is-actif { background: var(--lc-accent-voile); color: var(--lc-accent); font-weight: 600; }
.lc-public .lc-cote__lien-ico { display: flex; flex: none; color: var(--lc-accent); }
.lc-public .lc-cote__lien-nom { flex: 1 1 auto; min-width: 0; }
.lc-public .lc-cote__nb { flex: none; font-size: 13px; color: var(--lc-muet); font-variant-numeric: tabular-nums; }

.lc-public .lc-cote__plus {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 0 10px;
  color: var(--lc-accent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.lc-public .lc-cote__plus:hover { text-decoration: underline; }

/* Appel à chercher près de chez soi. Le fond évoque un plan sans prétendre en
   être un : une fausse carte ferait chercher une rue qui n'y est pas. */
.lc-public .lc-cote__carte {
  position: relative;
  min-height: 190px;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  border: 1px solid var(--lc-border);
  border-radius: 14px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.04) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 1px, transparent 1px 30px),
    linear-gradient(150deg, #E9F1EC, #DFEAF2);
  overflow: hidden;
}
.lc-public .lc-cote__epingles {
  position: absolute;
  inset: 22px 26px auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: var(--lc-accent);
}
.lc-public .lc-cote__epingles .lc-ico:nth-child(2) { margin-top: 34px; }
.lc-public .lc-cote__epingles .lc-ico:nth-child(3) { margin-top: 12px; }

.lc-public .lc-cote__carte-pied {
  position: relative;
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 2px 10px rgba(16, 24, 40, .12);
}
.lc-public .lc-cote__carte-titre { font-size: 13px; font-weight: 600; }
.lc-public .lc-cote__carte-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 9px;
  padding: 9px 12px;
  border: 1px solid var(--lc-border-fort);
  border-radius: 8px;
  background: #fff;
  color: var(--lc-accent);
  font-size: 13px;
  font-weight: 600;
}
.lc-public .lc-cote__carte-bouton:hover { border-color: var(--lc-accent); }

/* ------------------------------ Ligne de résultat ---------------------------- */

.lc-public .lc-lignes { display: grid; gap: 14px; }

.lc-public .lc-ligne {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 14px;
  border: 1px solid var(--lc-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--lc-ombre);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.lc-public .lc-ligne:hover { box-shadow: var(--lc-ombre-forte); border-color: var(--lc-border-fort); }
.lc-public .lc-ligne.is-vedette { border-color: #F0C67A; }

.lc-public .lc-ligne__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 112px;
  border-radius: 10px;
  background: var(--lc-surface);
  overflow: hidden;
}
.lc-public .lc-ligne__media img { width: 100%; height: 100%; object-fit: cover; }
.lc-public .lc-ligne__initiale { font-size: 40px; font-weight: 700; color: var(--lc-muet); }

/*
 * L'espacement de la ligne vient de la grille, pas des marges.
 *
 * Salient donne une marge basse à ses paragraphes par un sélecteur plus
 * spécifique que notre remise à zéro : le secteur et le lieu poussaient tout
 * ce qui suit vers le bas. On coupe les marges des enfants et on laisse « gap »
 * seul décider — un seul chiffre à changer pour resserrer ou aérer.
 */
.lc-public .lc-ligne__corps { display: grid; gap: 4px; min-width: 0; }

/*
 * Marges ET hauteur de ligne, sur les enfants comme sur leur contenu.
 *
 * Couper les marges ne suffisait pas : Salient donne aussi une hauteur de
 * ligne généreuse à ses paragraphes, par un sélecteur plus spécifique. Le
 * texte occupait donc une boîte bien plus haute que lui, et l'espace
 * réapparaissait à l'intérieur de chaque bloc — invisible dans l'inspecteur
 * du côté des marges, qui étaient bien à zéro.
 *
 * Comme dans l'en-tête de fiche, le remède principal est dans le balisage :
 * ces lignes sont des <div>, hors d'atteinte des règles que le thème réserve
 * aux paragraphes. Voir la note plus bas.
 */
.lc-public .lc-ligne .lc-ligne__corps > *,
.lc-public .lc-ligne .lc-ligne__corps > * > * {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

/* Les étoiles gardent leur boîte serrée : à 1,3 elles réintroduiraient
   l'espace qu'on vient d'enlever. */
.lc-public .lc-ligne .lc-ligne__corps .lc-etoile { line-height: 1 !important; }

.lc-public .lc-ligne__nom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 700;
}
.lc-public .lc-ligne__nom a { color: var(--lc-encre); text-decoration: none; }
.lc-public .lc-ligne__nom a:hover { color: var(--lc-accent); }

.lc-public .lc-verifie-etiquette--mini {
  gap: 5px;
  padding: 3px 9px 3px 6px;
  border-radius: 999px;
  background: #E7F8EE;
  font-size: 12px;
}

.lc-public .lc-ligne__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lc-public .lc-ligne__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--lc-accent);
}
.lc-public .lc-ligne__tag--muet { color: var(--lc-encre-douce); }
.lc-public .lc-ligne__sep { color: var(--lc-border-fort); }

.lc-public .lc-ligne__note { display: flex; align-items: center; }
.lc-public .lc-ligne__note .lc-etoile { font-size: 16px; }

.lc-public .lc-ligne__extrait {
  font-size: 13px;
  font-style: italic;
  color: var(--lc-encre-douce);
}
.lc-public .lc-ligne__extrait--resume { font-style: normal; color: var(--lc-muet); }

.lc-public .lc-ligne__actions {
  display: grid;
  justify-items: end;
  align-content: space-between;
  gap: 14px;
  height: 100%;
  padding: 4px 4px 4px 0;
}

.lc-public .lc-coeur {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--lc-border);
  border-radius: 50%;
  background: #fff;
  color: var(--lc-muet);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.lc-public .lc-coeur:hover { border-color: var(--lc-rouge); color: var(--lc-rouge); }
.lc-public .lc-coeur.is-actif { border-color: var(--lc-rouge); background: #FEF2F2; color: var(--lc-rouge); }
.lc-public .lc-coeur.is-actif .lc-ico { fill: currentColor; }

.lc-public .lc-ligne__voir { gap: 8px; padding: 10px 18px; white-space: nowrap; }

@media (max-width: 760px) {
  .lc-public .lc-ligne { grid-template-columns: 96px minmax(0, 1fr); }
  .lc-public .lc-ligne__media { height: 96px; }
  .lc-public .lc-ligne__actions {
    grid-column: 1 / -1;
    grid-auto-flow: column;
    justify-items: stretch;
    align-items: center;
    height: auto;
  }
  .lc-public .lc-ligne__voir { width: 100%; }
}

/* Ville encore sans fiche : présente dans la liste, mais visiblement en
   attente — le lien mène au formulaire d'inscription. */
.lc-public .lc-region.is-vide { border-style: dashed; }
.lc-public .lc-region.is-vide .lc-region__nom { color: var(--lc-encre-douce); }
.lc-public .lc-region.is-vide .lc-region__nb { color: var(--lc-accent); }

/* -----------------------------------------------------------------------------
   Logos clairs sur fond transparent
   -----------------------------------------------------------------------------
   Un logo aux traits blancs disparaît sur une carte blanche : on voit un cadre
   vide là où il y a pourtant une image. Le fond sombre est donc posé sur le
   cadre, jamais sur l'image elle-même — un logo n'est presque jamais
   rectangulaire, et teinter le fichier laisserait des angles visibles.
   -------------------------------------------------------------------------- */

.lc-public .lc-fiche__logo-cadre.is-clair,
.lc-public .lc-ligne__media.is-clair,
.lc-public .lc-carte__media.is-clair {
  background: var(--lc-logo-fond);
  border-color: var(--lc-logo-fond);
}

/*
 * Un logo se montre en entier, une photo se recadre.
 *
 * « cover » remplit la vignette en rognant ce qui dépasse : parfait pour une
 * photo de chantier, désastreux pour un logo, dont on perdait le nom sur les
 * bords. « contain » le montre en entier, et le retrait l'empêche de toucher
 * les angles du cadre.
 */
.lc-public .lc-ligne__media.is-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lc-public .lc-ligne__media.is-logo { padding: 10px; }
.lc-public .lc-ligne__media.is-logo.is-clair { padding: 12px; }

/* -----------------------------------------------------------------------------
   Carte de la fiche
   -----------------------------------------------------------------------------
   Le cadre porte le coin arrondi et le découpage : un iframe ne se laisse pas
   arrondir tout seul, ses angles dépasseraient de la carte blanche.
   -------------------------------------------------------------------------- */

.lc-public .lc-carte-reelle {
  height: 220px;
  margin-top: 18px;
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-rayon-sm);
  overflow: hidden;
  background: var(--lc-surface);
}
.lc-public .lc-carte-reelle iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.lc-public .lc-bloc .lc-bouton--plein { margin-top: 12px; }

/* -----------------------------------------------------------------------------
   Galerie de la fiche
   -------------------------------------------------------------------------- */

.lc-public .lc-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.lc-public .lc-galerie__vignette {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--lc-rayon-sm);
  background: var(--lc-surface);
  overflow: hidden;
}
.lc-public .lc-galerie__vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
}
.lc-public .lc-galerie__vignette:hover img { transform: scale(1.05); }

/* Agrandissement par-dessus la page. Fond très sombre : une photo se regarde
   mieux quand rien d'autre n'accroche l'œil. */
.lc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 12, 18, .92);
}
.lc-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.lc-lightbox__fermer,
.lc-lightbox__pas {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}
.lc-lightbox__fermer:hover,
.lc-lightbox__pas:hover { background: rgba(255, 255, 255, .24); }
.lc-lightbox__fermer { top: 18px; right: 18px; }
.lc-lightbox__pas--avant { left: 18px; }
.lc-lightbox__pas--apres { right: 18px; }
.lc-lightbox__compte {
  position: absolute;
  bottom: 20px;
  color: rgba(255, 255, 255, .75);
  font-size: 14px;
}

/* -----------------------------------------------------------------------------
   Classement et complétude
   -------------------------------------------------------------------------- */

/* Le rang, posé sur la vignette du résultat. */
.lc-public .lc-ligne { position: relative; }
.lc-public .lc-ligne__rang {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(16, 32, 44, .82);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Les trois premiers se distinguent : un classement sans tête ne se lit pas. */
.lc-public .lc-ligne__rang.is-podium { background: var(--lc-etoile); color: #2A1B00; }

/* Nom sans aucune lettre — « 9198-0839 Québec Inc. » : une icône neutre plutôt
   qu'un chiffre géant qui n'identifie rien. */
.lc-public .lc-ligne__initiale--muette { color: var(--lc-border-fort); }

/* =============================================================================
   Carrousel des nouveautés
   =============================================================================
   Une bande qui défile, posée sur une page d'accueil. Le défilement natif fait
   le travail : au doigt sur un téléphone, à la molette sur un pavé tactile, et
   par les flèches ailleurs. Aucune bibliothèque, aucune position calculée en
   JavaScript qui se décale au redimensionnement.
   ========================================================================== */

.lc-public.lc-carrousel {
  padding: 22px;
  border: 1px solid var(--lc-border);
  border-radius: 14px;
  background: var(--lc-surface);
}

.lc-public .lc-carrousel__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.lc-public .lc-carrousel__titre {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 700;
}
.lc-public .lc-carrousel__titre .lc-ico { color: var(--lc-etoile); }
.lc-public .lc-carrousel__tout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.lc-public .lc-carrousel__cadre { position: relative; }

/*
 * Quatre cartes au maximum, quelle que soit la largeur.
 *
 * Au-delà, les logos deviennent illisibles et le nom passe sur trois lignes :
 * la bande montre plus d'entreprises, mais on n'en reconnaît aucune. Les
 * flèches servent à voir les suivantes — c'est leur raison d'être.
 *
 * « align-items: stretch » vaut la peine d'être écrit : sans lui, une carte
 * dont le nom tient sur une ligne est plus courte que sa voisine, et les pieds
 * sombres arrivent à des hauteurs différentes.
 */
/*
 * Largeur en pourcentage, sans calcul.
 *
 * La version précédente divisait dans un calc() par une variable CSS. C'est
 * théoriquement permis, mais assez mal supporté pour que la déclaration entière
 * soit ignorée : les colonnes reprenaient alors leur largeur automatique, et
 * les dix cartes se serraient dans la bande. Un pourcentage se lit partout.
 *
 * Les valeurs laissent volontairement dépasser un bout de la carte suivante :
 * c'est ce qui montre qu'il y a une suite.
 */
.lc-public .lc-carrousel__piste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  align-items: stretch;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  /*
   * Barre de défilement masquée.
   *
   * Elle doublait les flèches sans rien apporter, et coupait la bande d'un
   * trait gris. Le défilement lui-même reste entier : au doigt, à la molette,
   * au clavier et par les flèches.
   */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lc-public .lc-carrousel__piste::-webkit-scrollbar { display: none; }
@media (min-width: 560px) { .lc-public .lc-carrousel__piste { grid-auto-columns: 46%; } }
@media (min-width: 820px) { .lc-public .lc-carrousel__piste { grid-auto-columns: 31%; } }
@media (min-width: 1080px) { .lc-public .lc-carrousel__piste { grid-auto-columns: 23%; } }
/* Cinq de large sur un grand écran, comme la maquette. En deçà de 1280 px, la
   cinquième carte réduirait les logos au point qu'on ne les reconnaîtrait
   plus. */
@media (min-width: 1280px) { .lc-public .lc-carrousel__piste { grid-auto-columns: 18.6%; } }

.lc-public .lc-nouveaute {
  display: flex;
  flex-direction: column;
  height: 100%;
  scroll-snap-align: start;
  border: 1px solid var(--lc-border);
  border-radius: 12px;
  background: #fff;
  /* « hidden » découperait la pastille, qui mord volontairement sur le pied. */
  overflow: clip;
  color: inherit;
  text-decoration: none;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.lc-public .lc-nouveaute:hover {
  border-color: var(--lc-border-fort);
  box-shadow: var(--lc-ombre-forte);
  transform: translateY(-2px);
  text-decoration: none;
}

/*
 * Un fond légèrement teinté, pas du blanc.
 *
 * La plupart des logos sont sur fond blanc et transparent : posés sur du blanc,
 * ils flottaient sans limite visible, et la carte paraissait vide. Un gris très
 * pâle leur donne un cadre sans les assombrir.
 */
.lc-public .lc-nouveaute__media {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: 210px;
  background: var(--lc-surface);
  /* Le retrait est porté par le cadre, plus par l'image : voir ci-dessous. */
  padding: 9%;
  overflow: hidden;
}

/*
 * Un peu plus d'air en bas quand une pastille est là.
 *
 * Elle mord sur le bandeau du pied et empiétait sur les logos hauts. Sans
 * pastille — le classement par complétude n'en pose pas — le supplément
 * n'aurait servi qu'à rapetisser l'image.
 */
.lc-public .lc-nouveaute__media:has(.lc-nouveaute__pastille) { padding-bottom: 12%; }
.lc-public .lc-nouveaute__media.is-clair { background: var(--lc-logo-fond); }
/*
 * Le logo tient dans le cadre, quoi qu'en dise le thème.
 *
 * « width/height: 100% » avec « object-fit: contain » semblait suffire, mais
 * les thèmes imposent presque tous « img { height: auto } » aux images : la
 * hauteur repartait alors du rapport de l'image, un logo vertical dépassait
 * son cadre et venait chevaucher le bandeau du pied.
 *
 * « max-width » et « max-height » ne se laissent pas déborder ainsi : l'image
 * garde ses proportions et ne peut, par construction, sortir du cadre. Le
 * retrait est porté par le cadre lui-même, ce qui évite au passage la question
 * du modèle de boîte.
 *
 * Il reste en pourcentage : il suit la largeur de la carte, qui change à
 * chaque palier. Une valeur en pixels serrerait le logo sur un téléphone et le
 * perdrait sur un grand écran. Le supplément en bas éloigne les logos à fond
 * sombre du bandeau, lui aussi sombre, et dégage la place de la pastille.
 */
.lc-public .lc-nouveaute__media img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
.lc-public .lc-nouveaute__initiale { color: var(--lc-border-fort); }

/*
 * Pastille en bas à droite, à cheval sur le pied.
 *
 * C'est la position de la maquette, et elle tient : le logo a sa place au
 * centre, la pastille mord sur le bandeau sombre plutôt que sur l'image.
 */
.lc-public .lc-nouveaute__pastille {
  position: absolute;
  right: 12px;
  bottom: -13px;
  z-index: 1;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--lc-bouton);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(16, 24, 40, .18);
}

/*
 * Le pied garde une hauteur constante.
 *
 * Les noms d'entreprise vont de « Realys » à « Menuiserie Patrick Beauchamp
 * Inc. » : sans limite, les bandeaux arrivaient en escalier et la bande
 * paraissait bancale. Deux lignes au plus pour le nom, une pour le secteur.
 */
.lc-public .lc-nouveaute__pied {
  display: grid;
  align-content: start;
  gap: 3px;
  min-height: 78px;
  margin-top: auto;
  padding: 20px 14px 14px;
  background: #17283A;
  color: #fff;
}
.lc-public .lc-nouveaute__nom {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}
.lc-public .lc-nouveaute__sous {
  overflow: hidden;
  font-size: 13px;
  color: #9FB2C4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lc-public .lc-carrousel__pas {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--lc-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--lc-ombre);
  color: var(--lc-encre);
  font-size: 20px;
  line-height: 1;
}
.lc-public .lc-carrousel__pas:hover { border-color: var(--lc-bouton); color: var(--lc-bouton); }
.lc-public .lc-carrousel__pas[disabled] { opacity: .35; cursor: default; }
.lc-public .lc-carrousel__pas--avant { left: -14px; }
.lc-public .lc-carrousel__pas--apres { right: -14px; }


/* =============================================================================
   Recherche assistée
   =============================================================================
   Un bandeau d'accueil : le texte à gauche, la barre à droite, une photo en
   fond. Sans photo, un dégradé prend le relais — un bandeau à moitié vide est
   pire qu'un bandeau uni.
   ========================================================================== */

.lc-public.lc-ia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 30px;
  padding: 34px 36px;
  border-radius: 16px;
  background:
    linear-gradient(100deg, #F4FBFC 0%, #F4FBFC 46%, rgba(244, 251, 252, .7) 62%, rgba(244, 251, 252, 0) 78%),
    var(--lc-ia-image, linear-gradient(120deg, #DCEEF1, #C9E4E9));
  background-size: cover;
  background-position: center right;
}
@media (max-width: 900px) {
  .lc-public.lc-ia {
    grid-template-columns: 1fr;
    padding: 26px 22px;
    /* Sur une colonne, le dégradé horizontal laisserait le texte sur la photo :
       on couvre tout. */
    background: linear-gradient(160deg, #F4FBFC, #E4F2F4);
  }
}


.lc-public .lc-ia__etiquettes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.lc-public .lc-ia__etiquette,
.lc-public .lc-ia__beta {
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lc-public .lc-ia__etiquette { border: 1px solid var(--lc-border-fort); background: #fff; color: var(--lc-encre); }
.lc-public .lc-ia__beta { background: var(--lc-accent-voile); color: var(--lc-accent); }

.lc-public .lc-ia__titre { font-size: 34px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.lc-public .lc-ia__intro { margin-top: 10px; font-size: 16px; color: var(--lc-encre-douce); max-width: 34em; }

/*
 * Trois colonnes qui partagent les mêmes rangées.
 *
 * Chaque bloc calculait sa hauteur seul : une description sur deux lignes
 * décalait le titre de sa voisine, et les trois colonnes semblaient bancales.
 * « subgrid » leur fait partager les rangées de la grille parente — icônes
 * alignées entre elles, titres entre eux, descriptions entre elles.
 *
 * Sans « subgrid », le navigateur retombe sur l'ancien comportement : trois
 * colonnes lisibles, simplement moins bien alignées.
 */
.lc-public .lc-ia__points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-template-rows: auto auto auto;
  gap: 8px 18px;
  margin-top: 26px;
}
.lc-public .lc-ia__points li {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  gap: 6px;
  align-content: start;
}
.lc-public .lc-ia__points .lc-ico { color: var(--lc-accent); }
.lc-public .lc-ia__points strong { font-size: 14px; color: var(--lc-encre); align-self: start; }
.lc-public .lc-ia__points span { font-size: 13px; color: var(--lc-muet); }
.lc-public .lc-ia__points .lc-ia__point-ico { display: flex; align-items: center; height: 22px; }
/* Les trois arguments disparaissent sur un téléphone.
   Sur un écran large, ils tiennent sur une ligne à côté du titre et se lisent
   d'un coup d'œil. Empilés sur une colonne, ils occupent la moitié de la
   hauteur visible et repoussent le champ de saisie sous la ligne de flottaison
   — ils vendent alors une fonction que le visiteur ne peut plus atteindre. */
@media (max-width: 640px) {
  .lc-public .lc-ia__points { display: none; }
}

.lc-public .lc-ia__bulle {
  display: inline-grid;
  gap: 4px;
  padding: 12px 16px;
  margin-bottom: 14px;
  border-radius: 12px 12px 12px 2px;
  background: #fff;
  box-shadow: var(--lc-ombre);
}
.lc-public .lc-ia__bulle-titre { font-size: 12px; color: var(--lc-muet); }
.lc-public .lc-ia__exemple {
  padding: 0;
  border: 0;
  background: none;
  color: var(--lc-bouton);
  font-size: 15px;
  text-align: left;
}
.lc-public .lc-ia__exemple:hover { text-decoration: underline; }

.lc-public .lc-ia__barre {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .12);
}
.lc-public .lc-ia__barre .lc-champ { flex: 1 1 auto; border: 0; }
.lc-public .lc-ia__barre .lc-champ:focus { box-shadow: none; }

.lc-public .lc-ia__resultats { grid-column: 1 / -1; margin-top: 26px; }
.lc-public .lc-ia__lecture {
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--lc-encre-douce);
}
.lc-public .lc-ia__lecture strong { color: var(--lc-encre); }
.lc-public .lc-ia__jetons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lc-public .lc-ia__jeton {
  padding: 4px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--lc-border);
  font-size: 13px;
}


/* Bouton « Voir N de plus », posé par le script sous la liste. */
.lc-public button.lc-cote__plus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 8px 0 0;
  border: 0;
  border-top: 1px solid var(--lc-border);
  background: none;
  color: var(--lc-bouton);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.lc-public button.lc-cote__plus:hover { text-decoration: underline; }

/* Message réservé à l'administrateur, quand un bloc reste vide. La couleur dit
   qu'il s'agit d'un avertissement de réglage, pas d'un contenu du site. */
.lc-public.lc-avis-admin {
  padding: 14px 18px;
  border: 1px dashed #B54708;
  border-radius: 10px;
  background: #FFFAEB;
  color: #7A2E0E;
  font-size: 14px;
}
.lc-public.lc-avis-admin .lc-sub { color: #9A5B2E; }

/* Le contrôle par addition. Volontairement discret : ce n'est pas l'objet du
   formulaire, seulement son péage. */
.lc-public .lc-captcha .lc-etiquette strong {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--lc-accent-voile);
  color: var(--lc-accent);
  font-variant-numeric: tabular-nums;
}
.lc-public .lc-captcha__reponse { max-width: 140px; }

/* -----------------------------------------------------------------------------
   Carte des entreprises
   -------------------------------------------------------------------------- */

.lc-public.lc-carte-bloc { display: grid; gap: 12px; }
.lc-public .lc-carte-points {
  border: 1px solid var(--lc-border);
  border-radius: 14px;
  background: var(--lc-surface);
  overflow: hidden;
}
.lc-public .lc-carte-bloc__compte { text-align: right; }

/* Leaflet pose ses propres styles ; on ne touche qu'à ce qui jure avec le
   reste du répertoire. */
.lc-public .lc-carte-points .leaflet-popup-content { margin: 12px 14px; font-size: 14px; line-height: 1.5; }
.lc-public .lc-carte-points .leaflet-popup-content a { font-weight: 700; text-decoration: none; }
.lc-public .lc-carte-points .leaflet-container { font-family: inherit; }

/* -----------------------------------------------------------------------------
   Générateur de code QR
   -------------------------------------------------------------------------- */

.lc-public.lc-qr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 28px;
  align-items: start;
  padding: 26px 28px;
  border: 1px solid var(--lc-border);
  border-radius: 16px;
  background: var(--lc-surface);
}
@media (max-width: 780px) {
  .lc-public.lc-qr { grid-template-columns: 1fr; padding: 22px; }
}

.lc-public .lc-qr__titre { font-size: 22px; font-weight: 800; }
.lc-public .lc-qr__intro { margin: 6px 0 18px; color: var(--lc-encre-douce); }
.lc-public .lc-qr__reglages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.lc-public .lc-qr__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* Le sélecteur de couleur natif : on lui donne la même hauteur que les autres
   champs, sinon il flotte au milieu de sa ligne. */
.lc-public .lc-qr__couleur { height: 44px; padding: 4px; cursor: pointer; }

.lc-public .lc-qr__cadre { display: grid; gap: 8px; justify-items: center; }
.lc-public .lc-qr__dessin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  padding: 14px;
  border: 1px solid var(--lc-border);
  border-radius: 14px;
  background: #fff;
  text-align: center;
}

/* Le code est dessiné à sa taille réelle puis réduit à l'affichage : ce qu'on
   télécharge est toujours net, quelle que soit la place à l'écran. */
.lc-public .lc-qr__toile { width: 100%; height: auto; image-rendering: pixelated; }
.lc-public .lc-qr__note { text-align: center; }

/* -----------------------------------------------------------------------------
   Outil de coordonnées
   -------------------------------------------------------------------------- */

.lc-public.lc-coord {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  padding: 26px 28px;
  border: 1px solid var(--lc-border);
  border-radius: 16px;
  background: var(--lc-surface);
}
@media (max-width: 860px) {
  .lc-public.lc-coord { grid-template-columns: 1fr; padding: 22px; }
}

.lc-public .lc-coord__titre { font-size: 22px; font-weight: 800; }
.lc-public .lc-coord__intro { margin: 6px 0 18px; color: var(--lc-encre-douce); }
.lc-public .lc-coord__sous-titre {
  margin: 20px 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--lc-border);
  font-size: 15px;
  font-weight: 700;
}
.lc-public .lc-coord__ligne { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.lc-public .lc-coord__ligne .lc-champ { flex: 1 1 200px; }
.lc-public .lc-coord__paire { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Les chiffres alignés en colonnes : deux coordonnées se comparent d'un coup
   d'œil quand leurs décimales tombent au même endroit. */
.lc-public .lc-coord__paire .lc-champ,
.lc-public .lc-coord__ligne .lc-champ[readonly],
.lc-public .lc-coord__dms { font-variant-numeric: tabular-nums; }

.lc-public .lc-coord__dms { font-size: 15px; font-weight: 600; }
.lc-public .lc-coord__carte {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  border: 1px solid var(--lc-border);
  border-radius: 14px;
  background: var(--lc-surface-alt);
  overflow: hidden;
}

/* La liste de suggestions, sous le champ d'adresse. */
.lc-public .lc-coord__saisie { position: relative; }
.lc-public .lc-coord__suggestions {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 280px;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--lc-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--lc-ombre);
  list-style: none;
  overflow-y: auto;
}
.lc-public .lc-coord__suggestions li {
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 14px;
  cursor: pointer;
}
.lc-public .lc-coord__suggestions li:hover,
.lc-public .lc-coord__suggestions li.is-actif {
  background: var(--lc-accent-voile);
  color: var(--lc-accent);
}

/* -----------------------------------------------------------------------------
   Analyseur de site
   -------------------------------------------------------------------------- */

.lc-public.lc-seo {
  padding: 26px 28px;
  border: 1px solid var(--lc-border);
  border-radius: 16px;
  background: var(--lc-surface);
}
.lc-public .lc-seo__titre { font-size: 22px; font-weight: 800; }
.lc-public .lc-seo__intro { margin: 6px 0 18px; color: var(--lc-encre-douce); max-width: 60ch; }
.lc-public .lc-seo__barre { display: flex; flex-wrap: wrap; gap: 8px; }
.lc-public .lc-seo__barre .lc-champ { flex: 1 1 260px; }
.lc-public .lc-seo__erreur {
  margin-top: 16px;
  padding: 14px 18px;
  border-left: 3px solid #B54708;
  border-radius: 8px;
  background: #FFFAEB;
  color: #7A2E0E;
}

.lc-public .lc-seo__resultat {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 18px 22px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--lc-border);
}
@media (max-width: 700px) {
  .lc-public .lc-seo__resultat { grid-template-columns: 1fr; }
}

/* La note, en gros : c'est ce qu'on regarde en premier, et souvent la seule
   chose qu'on retient. */
.lc-public .lc-seo__note {
  display: grid;
  align-content: center;
  justify-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #fff;
}
.lc-public .lc-seo__note--bon { background: #0F7B4F; }
.lc-public .lc-seo__note--moyen { background: #B54708; }
.lc-public .lc-seo__note--faible { background: #A62B2B; }
.lc-public .lc-seo__chiffre { font-size: 44px; font-weight: 800; line-height: 1; }
.lc-public .lc-seo__sur { font-size: 12px; opacity: .85; }

.lc-public .lc-seo__site { font-size: 16px; font-weight: 700; word-break: break-all; }
.lc-public .lc-seo__table { grid-column: 1 / -1; width: 100%; border-collapse: collapse; }
.lc-public .lc-seo__table th,
.lc-public .lc-seo__table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--lc-border);
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}
.lc-public .lc-seo__table th { font-size: 12px; color: var(--lc-muet); text-transform: uppercase; letter-spacing: .04em; }
.lc-public .lc-seo__table .lc-strong { display: block; }
.lc-public .lc-seo__table .lc-sub { display: block; margin-top: 3px; }

/* Une barre de couleur en bord de ligne : plus lisible qu'un fond teinté, qui
   nuirait au contraste du texte. */
.lc-public .lc-seo__table tr.is-bon td:first-child { box-shadow: inset 3px 0 0 #0F7B4F; }
.lc-public .lc-seo__table tr.is-moyen td:first-child { box-shadow: inset 3px 0 0 #B54708; }
.lc-public .lc-seo__table tr.is-faible td:first-child { box-shadow: inset 3px 0 0 #A62B2B; }

.lc-public .lc-seo__contenu { grid-column: 1 / -1; }
.lc-public .lc-seo__contenu h3 { margin-bottom: 12px; font-size: 16px; font-weight: 700; }
.lc-public .lc-seo__contenu .lc-etiquette { margin-top: 14px; }
.lc-public .lc-seo__extrait {
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--lc-surface-alt);
  font-size: 14px;
}
.lc-public .lc-seo__liste { margin: 0; padding-left: 20px; font-size: 14px; }
.lc-public .lc-seo__liste li { margin: 3px 0; }

/* Note Google, chargée à la demande sur une fiche. */
.lc-public .lc-fiche__google {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 14px;
  border: 1px solid var(--lc-border);
  border-radius: 999px;
  font-size: 14px;
}

/* Le logo Google est une obligation, pas un ornement : il doit rester lisible
   et ne jamais passer sous une autre couleur que la sienne. */
.lc-public .lc-google__logo {
  font-family: Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #4285F4;
}
.lc-public .lc-google__etoiles { display: inline-flex; gap: 1px; }
.lc-public .lc-google__etoile { color: #D8DCE3; font-size: 15px; }
.lc-public .lc-google__etoile.is-pleine { color: #FBBC04; }

/* -----------------------------------------------------------------------------
   Fenêtre d'avis, ouverte depuis la recherche assistée
   -------------------------------------------------------------------------- */

/* La fenêtre porte aussi « lc-public » : sans elle, rien de ce qu'elle contient
   n'est stylé. Ces règles-ci fonctionnent dans les deux cas. */
.lc-fenetre,
.lc-public.lc-fenetre {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 20px;
}
.lc-public .lc-fenetre__voile,
.lc-fenetre__voile { position: absolute; inset: 0; background: rgba(15, 25, 40, .55); }

.lc-public .lc-fenetre__boite,
.lc-fenetre__boite {
  position: relative;
  width: min(760px, 100%);
  max-height: 88vh;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 25, 40, .28);
  overflow: auto;
}
.lc-public .lc-fenetre__corps,
.lc-fenetre__corps { padding: 26px 28px 30px; }
@media (max-width: 620px) { .lc-fenetre__corps { padding: 20px 18px 24px; } }

.lc-public .lc-fenetre__croix,
.lc-fenetre__croix {
  position: sticky;
  top: 10px;
  float: right;
  margin: 10px 12px 0 0;
  width: 34px;
  height: 34px;
  border: 1px solid var(--lc-border);
  border-radius: 50%;
  background: #fff;
  color: var(--lc-encre-douce);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.lc-fenetre__croix:hover { border-color: var(--lc-steel); }

/* La page derrière ne défile plus : sans cela, faire défiler la fenêtre
   entraîne la liste et l'on perd sa place en la refermant. */
body.lc-fenetre-ouverte { overflow: hidden; }

/* Le bouton de la recherche assistée ouvre le formulaire ; le lien vers la
   fiche reste, en retrait. */
.lc-public .lc-ligne__voir + .lc-lien-sobre { margin-top: 6px; display: inline-block; }

/* -----------------------------------------------------------------------------
   Produits
   -------------------------------------------------------------------------- */

.lc-public .lc-prod__titre { margin-bottom: 20px; font-size: 24px; font-weight: 800; }

.lc-public .lc-prod__grille {
  display: grid;
  grid-template-columns: repeat(var(--lc-prod-colonnes, 4), minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1100px) { .lc-public .lc-prod__grille { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .lc-public .lc-prod__grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .lc-public .lc-prod__grille { grid-template-columns: 1fr; } }

.lc-public .lc-prod__carte {
  border: 1px solid var(--lc-border);
  border-radius: 14px;
  background: var(--lc-surface);
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}
.lc-public .lc-prod__carte:hover { box-shadow: var(--lc-ombre); transform: translateY(-2px); }
.lc-public .lc-prod__lien { display: block; color: inherit; text-decoration: none; }

.lc-public .lc-prod__vignette {
  aspect-ratio: 4 / 3;
  background: var(--lc-surface-alt);
  overflow: hidden;
}
.lc-public .lc-prod__vignette img { width: 100%; height: 100%; object-fit: cover; }
.lc-public .lc-prod__sans-image {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--lc-muet);
  font-size: 13px;
}

.lc-public .lc-prod__corps { padding: 14px 16px 16px; }
.lc-public .lc-prod__marque {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lc-muet);
}
.lc-public .lc-prod__nom {
  margin-top: 3px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  text-transform: none;
}
.lc-public .lc-prod__note { margin-top: 10px; }

.lc-public .lc-prod__pages { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.lc-public .lc-prod__page {
  padding: 7px 13px;
  border: 1px solid var(--lc-border);
  border-radius: 8px;
  color: inherit;
  font-size: 14px;
  text-decoration: none;
}
.lc-public .lc-prod__page.is-actif { border-color: var(--lc-accent); background: var(--lc-accent); color: #fff; }

/* ------------------------------ Page d'un produit --------------------------- */

.lc-public.lc-fiche-prod { max-width: 1100px; margin: 0 auto; padding: 30px 20px 60px; }
.lc-public .lc-fiche-prod__fil { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--lc-muet); }
.lc-public .lc-fiche-prod__fil a { color: inherit; }

.lc-public .lc-fiche-prod__haut {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 30px;
  margin-top: 18px;
}
@media (max-width: 820px) { .lc-public .lc-fiche-prod__haut { grid-template-columns: 1fr; } }

.lc-public .lc-fiche-prod__principale {
  width: 100%;
  border-radius: 16px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.lc-public .lc-fiche-prod__marque {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lc-muet);
}
.lc-public .lc-fiche-prod__titre { margin-top: 4px; font-size: 28px; font-weight: 800; line-height: 1.2; }
.lc-public .lc-fiche-prod__texte { margin-top: 14px; max-width: 62ch; }

.lc-public .lc-fiche-prod__avis,
.lc-public .lc-fiche-prod__formulaire {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--lc-border);
}
.lc-public .lc-fiche-prod__avis h2,
.lc-public .lc-fiche-prod__formulaire h2 { margin-bottom: 16px; font-size: 20px; font-weight: 700; }
.lc-public .lc-fiche-prod__formulaire { max-width: 680px; }

/* Les caractéristiques d'un produit, en deux colonnes. */
.lc-public .lc-fiche-prod__specs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 18px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--lc-border);
  font-size: 14px;
}
.lc-public .lc-fiche-prod__specs dt { color: var(--lc-encre-douce); }
.lc-public .lc-fiche-prod__specs dd { margin: 0; font-weight: 600; }

/* Le prix, sur la grille et sur la fiche. */
.lc-public .lc-prod__prix { margin-top: 8px; font-size: 18px; font-weight: 800; color: var(--lc-accent); }
.lc-public .lc-fiche-prod__prix { margin: 12px 0 4px; font-size: 28px; font-weight: 800; color: var(--lc-accent); }

/* ------------------------------------------------------------------ *
 * Choix des secteurs
 *
 * Deux états. Sans JavaScript, la grille de cases reste affichée et le
 * formulaire fonctionne : c'est le repli, volontairement simple. Avec, le
 * script masque la grille et pose une recherche, des jetons et une courte
 * liste de propositions — deux cents métiers ne se parcourent pas à l'œil.
 * ------------------------------------------------------------------ */

.lc-secteurs-cases {
	border: 0;
	padding: 0;
	margin: 0 0 18px;
}

.lc-secteurs-cases > legend {
	padding: 0;
	margin-bottom: 8px;
}

/* --- Repli sans JavaScript : la grille de cases --- */

.lc-secteurs-cases__boite {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 2px 14px;
	max-height: 230px;
	overflow-y: auto;
	padding: 10px 12px;
	border: 1px solid var(--lc-liseret, #DCE4E9);
	border-radius: 10px;
	background: #FFF;
}

.lc-secteurs-cases__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 0;
	font-size: 15px;
	line-height: 1.35;
	cursor: pointer;
	color: var(--lc-encre);
}

.lc-secteurs-cases__item span { color: var(--lc-encre); }

.lc-secteurs-cases__item input {
	flex: 0 0 auto;
	margin: 0;
	width: 17px;
	height: 17px;
	accent-color: var(--lc-accent, #088EA0);
}

/* --- Ce que le script met à la place --- */

.lc-secteurs__jetons {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.lc-secteurs__jetons:empty { display: none; }

.lc-secteurs__jeton {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 6px 6px 12px;
	border: 1px solid var(--lc-border-fort);
	border-radius: 999px;
	background: #FFF;
	font-size: 14px;
	line-height: 1.3;
	color: var(--lc-encre);
}

/* Le principal se distingue par sa teinte, jamais par sa seule position :
   une liste repliée sur deux lignes ne dit plus lequel vient en premier. */
.lc-secteurs__jeton.is-principal {
	border-color: var(--lc-accent);
	background: var(--lc-accent-voile);
}

.lc-secteurs__jeton em {
	font-style: normal;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--lc-accent);
}

.lc-secteurs__jeton-x {
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0 4px;
	font-size: 17px;
	line-height: 1;
	color: var(--lc-muet);
	border-radius: 4px;
}

.lc-secteurs__jeton-x:hover { background: rgba(0, 0, 0, .07); color: var(--lc-encre); }

.lc-secteurs__recherche { margin-bottom: 8px; }
.lc-secteurs__recherche:disabled { background: var(--lc-surface) !important; cursor: not-allowed; }

/*
 * Les propositions : une bande qui se replie, jamais une colonne.
 *
 * Quarante résultats en colonne repousseraient le bouton d'envoi hors de
 * l'écran et feraient croire que le formulaire s'arrête là. En bande, ils
 * tiennent en trois ou quatre lignes.
 */
.lc-secteurs__resultats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	max-height: 190px;
	overflow-y: auto;
}

.lc-secteurs__option {
	padding: 7px 12px;
	border: 1px solid var(--lc-liseret, #DCE4E9);
	border-radius: 999px;
	background: #FFF;
	color: var(--lc-encre);
	font: inherit;
	font-size: 14px;
	line-height: 1.3;
	cursor: pointer;
}

.lc-secteurs__option:hover,
.lc-secteurs__option:focus {
	border-color: var(--lc-accent);
	background: var(--lc-accent-voile);
	color: var(--lc-encre);
	outline: none;
}

.lc-secteurs__rien {
	flex: 1 0 100%;
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--lc-muet);
}

/* Le lien de vérification de la licence, sur la fiche. */
.lc-coord__lien {
	display: inline-block;
	margin-left: 8px;
	font-size: 13px;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Menus déroulants : garder les nôtres
 *
 * Certains thèmes — Salient en tête — ne se contentent pas d'habiller les
 * listes : ils les remplacent. Select2 masque le vrai « select », l'enveloppe
 * dans un conteneur, et dessine un faux menu fait de « span » à côté. Toute
 * règle écrite ensuite peint alors un élément invisible pendant que le
 * visiteur en regarde un autre, et l'on cherche pendant des heures un défaut
 * de style qui n'existe pas.
 *
 * La classe « no-fancy-select », posée sur chacun de nos menus, suffit quand
 * le thème la respecte. Ce qui suit est le filet pour quand il ne la respecte
 * pas : on rend le vrai menu et l'on retire le faux. La portée est limitée à
 * « .lc-public » — les listes du thème, ailleurs sur le site, gardent leur
 * habillage.
 * ------------------------------------------------------------------ */

/*
 * « :not([hidden]) » n'est pas une précaution, c'est une correction.
 *
 * L'attribut « hidden » ne doit sa discrétion qu'à une règle du navigateur, de
 * priorité minime : un « display: block !important » la balaie, et le champ
 * Ville affichait alors son déroulant ET sa saisie libre l'un au-dessus de
 * l'autre, tous deux censés être masqués.
 */
/*
 * Chaque propriété que Select2 impose doit être reprise, largeur comprise.
 *
 * « select2-hidden-accessible » masque le vrai menu par six déclarations en
 * « !important » : position, clip, largeur, hauteur, débordement, marge.
 * N'en contredire que quatre laisse un champ parfaitement visible et large
 * d'un pixel — et l'on cherche du côté de l'affichage un défaut qui est de
 * dimension.
 */
.lc-public select.lc-champ:not([hidden]),
.lc-public select.no-fancy-select:not([hidden]) {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  opacity: 1 !important;
  position: static !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  margin: 0 !important;
  border: 1px solid var(--lc-border-fort) !important;
}

/*
 * Le thème repeint aussi ce qui est masqué.
 *
 * Salient pose « display » sur les champs de formulaire avec des sélecteurs
 * plus spécifiques que la règle du navigateur : « hidden » cessait d'avoir le
 * moindre effet dans nos blocs. On le rétablit, une fois, pour tout ce qui
 * porte l'attribut.
 */
.lc-public [hidden] { display: none !important; }

/* Le faux menu et l'enveloppe, s'ils ont malgré tout été posés. */
.lc-public .select2,
.lc-public .select2-container,
.lc-public .sf-input-wrap,
.lc-public .nectar-fancy-select-arrow {
  display: none !important;
}

/*
 * L'enveloppe redevient transparente plutôt que d'être supprimée.
 *
 * Ces thèmes y font aussi entrer l'étiquette du champ : retirer le conteneur
 * emporterait le libellé avec lui, et l'on se retrouverait avec un menu sans
 * nom — un défaut plus difficile à comprendre que celui qu'on corrigeait.
 */
.lc-public .fancy-select-wrap {
  display: block;
  position: static;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}

/* ------------------------------------------------------------------ *
 * Couleurs du texte dans les champs
 *
 * Le thème colore les formulaires à sa façon — texte d'invite orange,
 * intitulés turquoise — avec des sélecteurs plus spécifiques que les
 * nôtres. Le résultat n'est pas laid par accident : c'est la charte du
 * thème appliquée à un bloc qui a la sienne, et les deux se mélangent.
 *
 * On déclare donc ce qu'on laissait à l'héritage. Le texte d'invite passe
 * par ses pseudo-éléments, qui n'héritent pas de « color » : sans eux, il
 * reste à la couleur du thème même quand le champ est corrigé.
 * ------------------------------------------------------------------ */

.lc-public input.lc-champ,
.lc-public select.lc-champ,
.lc-public textarea.lc-champ {
  color: var(--lc-encre) !important;
  background-color: #fff !important;
}

.lc-public .lc-champ::placeholder { color: var(--lc-muet); opacity: 1; }
.lc-public .lc-champ::-webkit-input-placeholder { color: var(--lc-muet); }

/* Intitulés, mentions d'aide et petites étiquettes de filtre. */
.lc-public label,
.lc-public .lc-etiquette,
.lc-public .lc-filtre__label,
.lc-public .lc-mini { color: var(--lc-encre); }

.lc-public .lc-aide,
.lc-public .lc-mention { color: var(--lc-muet); }

/*
 * Les options du menu déroulant.
 *
 * Elles sont dessinées par le système, pas par la page : la plupart des
 * règles n'y arrivent pas. « color » et « background » passent, et c'est
 * ce qu'il faut pour qu'une liste ouverte ne s'affiche pas en orange sur
 * un thème qui l'a décidé ailleurs.
 */
.lc-public .lc-champ option { color: var(--lc-encre); background: #fff; }

/* La provenance d'une description composée par le répertoire. */
.lc-public .lc-description__source {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--lc-muet);
}

.lc-public .lc-description__source a { color: var(--lc-accent); }

/* ------------------------------------------------------------------ *
 * Emplacements publicitaires
 *
 * Centrés, espacés, et jamais collés au contenu : une annonce qui touche une
 * fiche se lit comme une partie de la fiche. C'est ce qu'une régie appelle un
 * placement accidentel, et ce que le visiteur appelle un piège.
 * ------------------------------------------------------------------ */

.lc-public .lc-pub {
	margin: 24px 0;
	text-align: center;
	overflow: hidden;
}

.lc-public .lc-pub__mention {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lc-muet);
}

/* Vide — bloqueur, ou code encore absent — l'espace ne doit pas rester. */
.lc-public .lc-pub:not(:has(iframe)):not(:has(ins)) { margin: 0; }

/* Dans la grille, l'emplacement occupe la largeur d'une vignette. */
.lc-public .lc-grille .lc-pub { margin: 0; }

/* ------------------------------------------------------------------ *
 * Colonnes latérales
 *
 * Masquées par défaut, montrées seulement quand la place existe vraiment.
 * C'est l'inverse de l'habitude — on cache d'ordinaire sur petit écran — mais
 * c'est l'ordre sûr : une largeur qu'on aurait oublié de couvrir n'affiche
 * alors rien, plutôt qu'une bannière posée par-dessus le texte.
 * ------------------------------------------------------------------ */

.lc-pub--rail_gauche,
.lc-pub--rail_droite {
	display: none;
}

/*
 * Accrochées au contenu, pas au bord de l'écran.
 *
 * Le contenu du module fait 1180 px et reste centré. Une colonne posée à
 * « left: 20px » se retrouve donc à six cents pixels de la fiche sur un grand
 * écran : elle flotte dans le vide et n'accompagne plus rien.
 *
 * On part du centre : la moitié du contenu (590), l'écart (24), la largeur de
 * la colonne (160). La bannière se tient ainsi toujours contre la fiche,
 * quelle que soit la taille de l'écran.
 *
 * Le seuil suit le même calcul : 1180 + 2 × (160 + 24) = 1548. En dessous, il
 * n'y a pas la place, et l'on n'affiche pas.
 */
@media (min-width: 1560px) {
	.lc-pub--rail_gauche,
	.lc-pub--rail_droite {
		display: block;
		position: fixed;
		top: 50%;
		transform: translateY(-50%);
		width: 160px;
		height: 600px;
		margin: 0;
		z-index: 5;
	}

	.lc-pub--rail_gauche { left: calc(50% - 774px); }
	.lc-pub--rail_droite { left: calc(50% + 614px); }

	/*
	 * La création reçoit la taille de sa colonne, pas celle de l'écran.
	 *
	 * Un bloc « auto » posé ici demanderait la largeur de la fenêtre et
	 * déborderait par-dessus le contenu. Créez de préférence un bloc de format
	 * fixe dans AdSense — 160 × 600 — mais ces deux lignes rattrapent le cas
	 * où l'on a collé un responsive sans y penser.
	 */
	.lc-pub--rail_gauche ins.adsbygoogle,
	.lc-pub--rail_droite ins.adsbygoogle {
		width: 160px !important;
		height: 600px !important;
	}
}

/* 1180 + 2 × (300 + 24) = 1828 : la place du grand format. */
@media (min-width: 1840px) {
	.lc-pub--rail_gauche,
	.lc-pub--rail_droite {
		width: 300px;
	}

	.lc-pub--rail_gauche { left: calc(50% - 914px); }
	.lc-pub--rail_droite { left: calc(50% + 614px); }

	.lc-pub--rail_gauche ins.adsbygoogle,
	.lc-pub--rail_droite ins.adsbygoogle {
		width: 300px !important;
	}
}

/*
 * Un écran court n'affiche pas de colonne.
 *
 * Une bannière de 600 px de haut sur un portable en paysage couvre l'écran
 * entier et ne laisse plus voir le contenu qu'elle est censée accompagner.
 */
@media (max-height: 700px) {
	.lc-pub--rail_gauche,
	.lc-pub--rail_droite {
		display: none;
	}
}

/* ------------------------------------------------------------------ *
 * Tenir les créations dans leur cadre
 *
 * Un bloc AdSense en « format auto » avec « full-width-responsive » demande
 * toute la largeur disponible, puis choisit une création à sa mesure. Dans un
 * conteneur sans bornes, cette mesure est celle de l'écran : la page s'ouvre
 * sur une image de huit cents pixels de haut, et le contenu commence en
 * dessous.
 *
 * On borne donc, emplacement par emplacement. Le « !important » vise le style
 * en ligne que la régie pose elle-même sur son « ins » — on ne l'atteint pas
 * autrement.
 * ------------------------------------------------------------------ */

.lc-public .lc-pub ins.adsbygoogle,
.lc-public .lc-pub iframe {
	max-width: 100% !important;
}

/* Dans le contenu : la largeur d'une bannière, jamais celle de l'écran. */
.lc-public .lc-pub--repertoire_haut,
.lc-public .lc-pub--fiche_description,
.lc-public .lc-pub--fiche_bas {
	max-width: 970px;
	margin-left: auto;
	margin-right: auto;
}

.lc-public .lc-pub--repertoire_haut ins.adsbygoogle,
.lc-public .lc-pub--fiche_description ins.adsbygoogle,
.lc-public .lc-pub--fiche_bas ins.adsbygoogle {
	/* Une hauteur maximale, pour qu'une création mal choisie ne coupe pas la
	   page en deux. Les formats usuels — 970 × 250, 728 × 90 — tiennent
	   largement dessous. */
	max-height: 280px !important;
}

/* Le conteneur des colonnes ne prend aucune place par lui-même. */
.lc-public.lc-pub-rails {
	margin: 0;
	padding: 0;
}

/*
 * La colonne s'efface au lieu de disparaître d'un coup.
 *
 * « visibility » plutôt que « display » : le bloc garde sa place, donc la
 * régie continue de le compter comme affiché tant qu'il l'était, et l'on
 * n'invalide pas une impression déjà facturée en la faisant clignoter.
 */
.lc-pub--rail_gauche.is-effacee,
.lc-pub--rail_droite.is-effacee {
	visibility: hidden;
	opacity: 0;
	transition: opacity .18s ease;
	pointer-events: none;
}

.lc-pub--rail_gauche,
.lc-pub--rail_droite {
	transition: opacity .18s ease;
}

/* ------------------------------------------------------------------ *
 * Bannière de tête, sur mobile seulement
 *
 * Masquée par défaut, montrée en dessous de 1024 px. L'ordre est le même que
 * pour les colonnes : ce qu'on oublie de couvrir ne s'affiche pas, plutôt que
 * de s'afficher là où il ne faut pas.
 * ------------------------------------------------------------------ */

.lc-public .lc-pub--mobile_haut {
	display: none;
}

@media (max-width: 1023px) {
	.lc-public .lc-pub--mobile_haut {
		display: block;
		margin: 0 0 14px;
	}

	/*
	 * Cent pixels au maximum, et c'est une règle de survie.
	 *
	 * Sur un écran de téléphone, le premier écran fait environ 650 px. Une
	 * bannière de 250 px en mange plus du tiers et repousse le nom de
	 * l'entreprise hors de vue : le visiteur arrive sur une annonce au lieu de
	 * la fiche qu'il a demandée. Google appelle cela une densité excessive
	 * au-dessus de la ligne de flottaison et le sanctionne ; le visiteur, lui,
	 * repart sans rien dire.
	 */
	.lc-public .lc-pub--mobile_haut ins.adsbygoogle,
	.lc-public .lc-pub--mobile_haut iframe {
		max-height: 100px !important;
	}
}