/* Cercle Bruit - demo annuaire des entreprises
   Palette et typographie reprises de laerm.ch (theme WordPress "laerm-theme") */

:root{
  --olive:#666600;
  --olive-clair:#8a8a3d;
  --olive-pale:#b8b676;
  --beige:#e9e7d9;
  --beige-fonce:#d6d3bb;
  --beige-bande:#cfccb4;
  --fond:#f7fbfc;
  --blanc:#ffffff;
  --texte:#212324;
  --texte-doux:#5b5f61;
  --bord:#dcdedf;
  --rouge:#a33;
  --vert:#4a7a2b;
  --titre:"Fira Sans","FiraSans","Trebuchet MS",sans-serif;
  --corps:"Source Sans 3","SourceSans3","Segoe UI",system-ui,sans-serif;
  --ombre:0 1px 3px rgba(0,0,0,.07);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fond);color:var(--texte);
  font-family:var(--corps);font-size:16px;line-height:1.55;
}

/* ---------- en-tete ---------- */
.site-header{background:var(--blanc);border-bottom:1px solid var(--bord)}
.site-header .inner{
  max-width:min(1500px,96vw);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
}
.marque{font-family:var(--titre);font-weight:700;font-size:25px;color:var(--texte);text-decoration:none;white-space:nowrap}
.site-nav{display:flex;gap:20px;flex-wrap:wrap;flex:1}
.site-nav a{
  font-family:var(--titre);font-size:17px;color:var(--texte);
  text-decoration:none;padding:2px 0;border-bottom:2px solid transparent;
}
.site-nav a:hover{color:var(--olive)}
.site-nav a.actif{color:var(--olive);border-bottom-color:var(--olive)}
.langues{display:flex;gap:10px;font-family:var(--titre);font-size:15px}
.langues button{
  background:none;border:0;padding:2px 1px;cursor:pointer;color:var(--texte-doux);
  font:inherit;border-bottom:2px solid transparent;
}
.langues button.actif{color:var(--texte);border-bottom-color:var(--olive)}
.bande{background:var(--beige-bande);height:26px}
.bande .inner{max-width:min(1500px,96vw);margin:0 auto;padding:0 24px;text-align:right}
.bande span{font-family:var(--titre);font-size:13px;letter-spacing:.22em;color:#8d8a70}

/* ---------- structure ---------- */
.page{max-width:min(1500px,96vw);margin:0 auto;padding:34px 24px 70px}
.entete-marque{background:var(--olive);border-radius:4px;padding:16px 22px;margin-bottom:26px;
  display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px;row-gap:2px}
.entete-marque-nom{font-family:var(--titre);font-weight:700;font-size:22px;letter-spacing:.04em;
  color:#fff;text-transform:uppercase}
.entete-marque-soustitre{font-size:14px;color:var(--beige)}
h1{font-family:var(--titre);font-weight:600;font-size:39px;color:var(--olive);margin:0 0 22px}
h2{font-family:var(--titre);font-weight:600;font-size:24px;color:var(--olive);margin:32px 0 10px}
h3{font-family:var(--titre);font-weight:600;font-size:19px;margin:0 0 6px}
a{color:var(--olive)}

.encadre{background:var(--beige);border-radius:3px;padding:22px 26px;margin-bottom:26px}
.encadre h2{margin-top:0;color:var(--olive)}
.encadre p{margin:0 0 10px}
.encadre p:last-child{margin-bottom:0}

.avis{
  border-left:4px solid var(--olive-clair);background:#fbfaf3;
  padding:12px 16px;margin-bottom:22px;font-size:15px;color:var(--texte-doux);
}
.avis strong{color:var(--texte)}

/* ---------- filtres ---------- */
.filtres{
  background:var(--blanc);border:1px solid var(--bord);border-radius:3px;
  padding:18px 20px;margin-bottom:22px;box-shadow:var(--ombre);
}
.filtres-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px 18px}
.champ{display:flex;flex-direction:column;gap:5px}
.champ label{font-size:13px;font-weight:600;color:var(--texte-doux);text-transform:uppercase;letter-spacing:.03em}
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=search],input[type=number],select,textarea{
  font:inherit;font-size:15px;padding:7px 9px;border:1px solid var(--bord);
  border-radius:3px;background:var(--blanc);color:var(--texte);width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--olive-pale);outline-offset:-1px;border-color:var(--olive-clair)}
textarea{min-height:96px;resize:vertical}
.champ{position:relative}
.suggestion-npa{font-size:12px;color:var(--olive,#666600);margin-top:2px;min-height:14px}

.specialites{margin-top:14px;padding-top:14px;border-top:1px solid var(--bord)}
.specialites-entete{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.specialites-entete label{font-size:13px;font-weight:600;color:var(--texte-doux);text-transform:uppercase;letter-spacing:.03em}
.specialites-aide{font-size:12.5px;color:var(--texte-doux)}
.specialites-effacer{font-size:12.5px;background:none;border:0;color:var(--olive);cursor:pointer;padding:0;text-decoration:underline}
.pastilles{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.pastille{
  font:inherit;font-size:13.5px;padding:6px 13px;border-radius:14px;cursor:pointer;
  background:var(--beige);border:1px solid var(--beige-fonce);color:#5c5a2e;
}
.pastille:hover{background:var(--beige-fonce)}
.pastille.actif{background:var(--olive);border-color:var(--olive);color:#fff;font-weight:600}

.barre-resultats{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;margin-bottom:14px;font-size:15px;color:var(--texte-doux);
}
.vues{display:flex;gap:0}
.vues button{
  font:inherit;font-size:14px;padding:6px 14px;cursor:pointer;
  background:var(--blanc);border:1px solid var(--bord);color:var(--texte-doux);
}
.vues button:first-child{border-radius:3px 0 0 3px}
.vues button:last-child{border-radius:0 3px 3px 0;border-left:0}
.vues button.actif{background:var(--olive);border-color:var(--olive);color:#fff}

/* ---------- fiches ---------- */
.fiches{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.fiche{
  background:var(--blanc);border:1px solid var(--bord);border-radius:3px;
  padding:18px 20px;box-shadow:var(--ombre);display:flex;flex-direction:column;gap:10px;
}
.fiche h3{color:var(--olive);font-size:18px}
.fiche .adresse{font-size:14.5px;color:var(--texte-doux);line-height:1.45}
.fiche .liens{font-size:14.5px;display:flex;flex-direction:column;gap:2px;word-break:break-word}
.etiquettes{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.et{
  font-size:12px;padding:3px 9px;border-radius:11px;
  background:var(--beige);color:#5c5a2e;white-space:nowrap;
}
.et.canton{background:var(--olive);color:#fff;font-weight:600}
.et.langue{background:var(--beige-fonce);color:#4d4b31;text-transform:uppercase;font-weight:600;letter-spacing:.04em}
.et.confirmer{background:#f5e9d0;color:#8a5a12}

/* ---------- tableau matriciel ---------- */
.tableau-conteneur{overflow-x:auto;background:var(--blanc);border:1px solid var(--bord);border-radius:3px}
table.matrice{border-collapse:collapse;width:100%;min-width:760px;font-size:14px;table-layout:fixed}
table.matrice th{
  font-family:var(--titre);font-weight:600;color:var(--olive);
  background:var(--beige);padding:8px 8px;text-align:left;
  vertical-align:middle;border-bottom:1px solid var(--beige-fonce);
  border-left:1px solid #fff;
}
table.matrice th:first-child{border-left:0}
table.matrice col.col-nom{width:auto}
table.matrice th.col-nom{width:auto;min-width:170px}
table.matrice th.col-canton{width:64px}
table.matrice th.col-langue{width:78px}
table.matrice th.col-groupe-titre{
  text-align:center;font-size:12.5px;letter-spacing:.02em;
  border-bottom:1px solid var(--beige-fonce);
}
table.matrice th.icone{
  width:42px;text-align:center;padding:8px 4px;vertical-align:middle;
}
table.matrice th.icone svg{display:block;margin:0 auto;color:#7a7840}
table.matrice thead tr:first-child th.icone svg{color:var(--olive)}
table.matrice th[data-sort]{cursor:pointer;user-select:none;position:relative}
table.matrice th[data-sort]:hover{background:var(--beige-fonce)}
table.matrice th.tri-actif{background:var(--olive-pale)}
table.matrice th.tri-actif svg{color:var(--olive)}
.fleche-tri{font-size:10px;margin-left:3px;color:var(--olive)}
table.matrice th.icone .fleche-tri{display:block;margin:2px auto 0;text-align:center}
table.matrice td{padding:7px 8px;border-bottom:1px solid #eee;vertical-align:middle}
table.matrice tbody tr:hover{background:#fcfcf6}
table.matrice td.c{text-align:center;width:42px;padding:7px 4px}
.marque-rub{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--olive-clair)}
.nom-ent{font-weight:600;color:var(--olive)}
.lieu-ent{font-size:13px;color:var(--texte-doux)}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- legende de la vue tableau ---------- */
.legende-tableau{
  font-size:13px;color:var(--texte-doux);background:#fbfaf3;
  border:1px solid var(--bord);border-radius:3px;padding:10px 14px;margin-bottom:10px;
  display:flex;flex-wrap:wrap;gap:5px 16px;align-items:center;
}
.legende-tableau strong{color:var(--texte);flex:0 0 auto}
.legende-item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.legende-item svg{color:var(--olive);flex:0 0 auto}
.legende-note{flex:1 1 100%;font-style:italic;font-size:12.5px}
@media (min-width:700px){.legende-note{flex:0 0 auto;margin-left:auto}}

/* ---------- formulaire ---------- */
.groupe{
  background:var(--blanc);border:1px solid var(--bord);border-radius:3px;
  padding:22px 26px;margin-bottom:20px;box-shadow:var(--ombre);
}
.groupe > h2{margin-top:0}
.groupe .intro{font-size:15px;color:var(--texte-doux);margin:0 0 18px;white-space:pre-line}
.question{padding:16px 0;border-top:1px solid #f0f0ee}
.question:first-of-type{border-top:0}
.question > .libelle{font-weight:600;margin-bottom:4px;white-space:pre-line}
.question .aide{font-size:14px;color:var(--texte-doux);margin-bottom:9px;white-space:pre-line}
.oblig{color:var(--rouge);margin-left:3px}
.sous-champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 16px;margin-top:8px}
.option{
  display:flex;flex-direction:column;gap:6px;padding:9px 12px;
  border:1px solid var(--bord);border-radius:3px;margin-bottom:8px;background:#fdfdfb;
}
.option > label{display:flex;gap:9px;align-items:flex-start;cursor:pointer;font-size:15px}
.option input[type=checkbox],.option input[type=radio]{margin-top:4px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--olive)}
.option.cochee{border-color:var(--olive-clair);background:#fbfbf1}
.commentaire{margin-left:25px;display:none}
.option.cochee .commentaire{display:block}
.commentaire input{font-size:14px}
.conditionnelle{
  border-left:3px solid var(--olive-pale);padding-left:16px;margin-left:2px;
  background:#fcfcf5;
}
.masquee{display:none}
.erreur{border-color:var(--rouge)!important;background:#fdf6f6}
.msg-erreur{color:var(--rouge);font-size:14px;margin-top:6px}

.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:24px}
.aide-note{font-size:13px;color:var(--texte-doux);margin-top:8px}
button.principal,button.secondaire,button.danger{
  font:inherit;font-family:var(--titre);font-size:16px;font-weight:600;
  padding:11px 24px;border-radius:3px;cursor:pointer;border:1px solid transparent;
}
button.principal{background:var(--olive);color:#fff}
button.principal:hover{background:#555500}
button.secondaire{background:var(--blanc);color:var(--olive);border-color:var(--olive-clair)}
button.secondaire:hover{background:#f6f6ec}
button.danger{background:var(--blanc);color:var(--rouge);border-color:#d9b4b4}
button.danger:hover{background:#fbf3f3}
button.petit{font-size:14px;padding:6px 14px}

/* ---------- validation ---------- */
.connexion{max-width:430px;margin:60px auto;background:var(--blanc);border:1px solid var(--bord);
  border-radius:3px;padding:30px;box-shadow:var(--ombre)}
.liste-fiches{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.ligne-fiche{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--blanc);border:1px solid var(--bord);border-radius:3px;padding:13px 17px;
}
.ligne-fiche.attente{border-left:4px solid #d8a13a}
.ligne-fiche.valide{border-left:4px solid var(--vert)}
.ligne-fiche.refuse{border-left:4px solid #b56}
.ligne-fiche .titre{font-weight:600;flex:1;min-width:200px}
.ligne-fiche .meta{font-size:13.5px;color:var(--texte-doux)}
.statut{font-size:12px;padding:3px 10px;border-radius:11px;font-weight:600;white-space:nowrap}
.statut.attente{background:#fbf0d8;color:#8a6212}
.statut.valide{background:#e4efdb;color:#3d6822}
.statut.refuse{background:#f6e2e2;color:#94393b}
.vide{color:var(--texte-doux);font-style:italic;padding:14px 2px}

.tag{font-size:11.5px;padding:2px 9px;border-radius:10px;font-weight:600;white-space:nowrap;
  background:#e6eef5;color:#2b5a80;border:1px solid #c6d9e8}
.tag.modif{background:#efe4f5;color:#63348a;border-color:#dcc4ea}

.diff-panel{border:1px solid var(--bord);border-radius:3px;padding:14px 17px;margin-bottom:18px;
  background:#fbfaf5}
.diff-panel h3{margin:0 0 10px;font-size:16px}
table.diff{width:100%;border-collapse:collapse;font-size:14.5px}
table.diff th{text-align:left;font-size:12.5px;color:var(--texte-doux);font-weight:600;
  padding:4px 8px;border-bottom:1px solid var(--bord)}
table.diff td{padding:6px 8px;border-bottom:1px solid #ece9dc;vertical-align:top}
table.diff td.diff-champ{font-weight:600;white-space:nowrap}
table.diff td.diff-avant{color:#94393b;text-decoration:line-through;text-decoration-color:#d9b4b4}
table.diff td.diff-apres{color:#3d6822;font-weight:600}

.barre-url-base{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.barre-url-base input[type=text]{flex:1;min-width:240px;font:inherit;padding:8px 10px;
  border:1px solid var(--bord);border-radius:3px}
.barre-url-base label{font-size:13.5px;color:var(--texte-doux);font-weight:600}

.notice{
  background:#fbf0d8;border-left:4px solid #d8a13a;padding:12px 16px;
  margin-bottom:20px;font-size:15px;
}
.succes{background:#e4efdb;border-left:4px solid var(--vert);padding:14px 18px;margin-bottom:20px}

footer.pied{
  border-top:1px solid var(--bord);margin-top:50px;padding:22px 24px;
  font-size:14px;color:var(--texte-doux);text-align:center;background:var(--blanc);
}

/* ---------- fiche/ligne cliquable (pop-up) ---------- */
.fiche[data-idx]{cursor:pointer;transition:box-shadow .15s,border-color .15s}
.fiche[data-idx]:hover,.fiche[data-idx]:focus{
  border-color:var(--olive-clair);box-shadow:0 2px 9px rgba(0,0,0,.11);outline:none;
}
table.matrice tbody tr[data-idx]{cursor:pointer}
table.matrice tbody tr[data-idx]:hover,table.matrice tbody tr[data-idx]:focus{
  background:#f3f2e4;outline:none;
}
table.matrice tbody tr[data-idx]:focus{box-shadow:inset 0 0 0 2px var(--olive-pale)}

/* ---------- pop-up fiche entreprise ---------- */
.modale-fond{
  position:fixed;inset:0;background:rgba(33,35,36,.55);
  display:flex;align-items:flex-start;justify-content:center;
  padding:5vh 16px;overflow-y:auto;z-index:100;
}
.modale-fond[hidden]{display:none}
.modale{
  background:var(--blanc);border-radius:4px;max-width:620px;width:100%;
  padding:30px 34px;position:relative;box-shadow:0 8px 30px rgba(0,0,0,.25);
  margin-bottom:5vh;
}
.modale-fermer{
  position:absolute;top:12px;right:14px;background:none;border:0;
  font-size:26px;line-height:1;color:var(--texte-doux);cursor:pointer;padding:4px 8px;
}
.modale-fermer:hover{color:var(--olive)}
.modale h2{margin-top:0;color:var(--olive);font-size:24px;padding-right:26px}
.modale h3{
  font-family:var(--titre);font-weight:600;font-size:13px;color:var(--texte-doux);
  text-transform:uppercase;letter-spacing:.04em;margin:18px 0 5px;
}
.modale > .etiquettes{margin-bottom:4px}
.modale p{margin:0 0 4px;font-size:15px}
.modale .actions{margin-top:22px}

@media (max-width:640px){
  h1{font-size:30px}
  .site-nav{order:3;width:100%}
  .page{padding:24px 16px 50px}
  .groupe{padding:18px 16px}
}