/* ============================================================
   veterinaires.ch — refonte 2026
   Feuille de style unique, sans dépendance externe.
   ============================================================ */

:root {
  --vert-950: #083f38;
  --vert-800: #0d5a51;
  --vert-700: #0f766e;
  --vert-600: #128a80;
  --vert-100: #d7efeb;
  --vert-50:  #eef8f6;
  --encre:    #1b2733;
  --gris:     #56677a;
  --ligne:    #e2eae7;
  --fond:     #fafdfc;
  --carte:    #ffffff;
  --ambre:    #b45309;
  --ambre-50: #fef6ec;
  --rouge:    #b91c1c;
  --rouge-50: #fdf0ef;
  --radius:   14px;
  --ombre:    0 1px 2px rgba(13, 60, 53, .06), 0 8px 24px -12px rgba(13, 60, 53, .14);
  --police:   ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--encre);
  background: var(--fond);
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; border-radius: var(--radius); }

a { color: var(--vert-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--vert-950); }

:focus-visible { outline: 3px solid var(--vert-600); outline-offset: 2px; border-radius: 4px; }

.contenu { max-width: 1060px; margin: 0 auto; padding: 0 20px; }

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

.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ligne);
}

.entete-barre {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px;
  max-width: 1060px; margin: 0 auto; padding: 10px 20px;
}

.logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em;
  color: var(--vert-950); text-decoration: none; white-space: nowrap;
}

.logo .patte {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 12px;
  background: linear-gradient(135deg, var(--vert-700), var(--vert-950));
  color: #fff; font-size: 1.15rem;
}

.logo small { display: block; font-size: .67rem; font-weight: 600; color: var(--gris); letter-spacing: .02em; }

.nav {
  display: flex; gap: 2px; margin-left: auto;
  overflow-x: auto; scrollbar-width: none;
  min-width: 0;
}
@media (max-width: 1120px) {
  .nav {
    flex-basis: 100%; margin-left: -8px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  }
}
.nav::-webkit-scrollbar { display: none; }

.nav a {
  padding: 8px 12px; border-radius: 10px;
  font-size: .92rem; font-weight: 600;
  color: #3a4a59; text-decoration: none; white-space: nowrap;
}
.nav a:hover { background: var(--vert-50); color: var(--vert-950); }
.nav a.actif { background: var(--vert-100); color: var(--vert-950); }
.nav a.urgence { color: var(--rouge); }
.nav a.urgence:hover, .nav a.urgence.actif { background: var(--rouge-50); }

/* ---------- Héros (accueil) ---------- */

.heros {
  background:
    radial-gradient(900px 420px at 85% -60%, var(--vert-100), transparent 70%),
    linear-gradient(180deg, var(--vert-50), var(--fond));
  border-bottom: 1px solid var(--ligne);
}

.heros-int { max-width: 1060px; margin: 0 auto; padding: clamp(48px, 8vw, 84px) 20px; }

.heros .surtitre {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--ligne);
  font-size: .82rem; font-weight: 700; color: var(--vert-800);
}

.heros h1 {
  margin: 18px 0 10px; max-width: 21ch;
  font-size: clamp(1.9rem, 1.3rem + 2.8vw, 3.1rem);
  line-height: 1.12; letter-spacing: -.02em; color: var(--vert-950);
}

.heros p.accroche { max-width: 56ch; margin: 0 0 26px; font-size: 1.08rem; color: var(--gris); }

/* ---------- Boutons ---------- */

.btn {
  display: inline-block; padding: 11px 20px; border-radius: 12px;
  font-weight: 700; font-size: .98rem; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:active { transform: translateY(1px); }

.btn-plein { background: var(--vert-700); color: #fff !important; box-shadow: var(--ombre); }
.btn-plein:hover { background: var(--vert-800); }

.btn-ligne { border: 2px solid var(--vert-100); background: #fff; color: var(--vert-800) !important; }
.btn-ligne:hover { border-color: var(--vert-600); }

.btn-rouge { background: var(--rouge); color: #fff !important; }
.btn-rouge:hover { background: #991b1b; }

.groupe-btn { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Sections & cartes ---------- */

.section { padding: clamp(36px, 6vw, 64px) 0; }
.section + .section { border-top: 1px solid var(--ligne); }

.section h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); letter-spacing: -.015em; color: var(--vert-950); margin: 0 0 6px; }
.section .sous-titre { color: var(--gris); margin: 0 0 26px; max-width: 64ch; }

.grille { display: grid; gap: 16px; }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.carte {
  background: var(--carte); border: 1px solid var(--ligne);
  border-radius: var(--radius); padding: 22px;
  box-shadow: var(--ombre);
}

a.carte { display: block; text-decoration: none; color: inherit; transition: transform .14s ease, border-color .14s ease; }
a.carte:hover { transform: translateY(-3px); border-color: var(--vert-600); }

.carte .picto { font-size: 1.9rem; line-height: 1; }
.carte h3 { margin: 10px 0 6px; font-size: 1.08rem; color: var(--vert-950); }
.carte p { margin: 0; font-size: .94rem; color: var(--gris); }
.carte .nb { display: inline-block; margin-top: 12px; font-size: .82rem; font-weight: 700; color: var(--vert-700); }

/* ---------- Liste de fiches ---------- */

.categorie-titre {
  display: flex; align-items: center; gap: 12px;
  margin: 38px 0 14px; font-size: 1.3rem; color: var(--vert-950);
}
.categorie-titre:first-of-type { margin-top: 0; }
.categorie-titre .picto { font-size: 1.5rem; }
.categorie-titre small { font-size: .85rem; font-weight: 600; color: var(--gris); }

.fiche-lien {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
}
.fiche-lien .picto { font-size: 1.5rem; }
.fiche-lien h3 { margin: 0; font-size: 1.02rem; }
.fiche-lien p { font-size: .86rem; }

/* ---------- Page article / fiche ---------- */

.fil {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 26px 0 0; font-size: .88rem; color: var(--gris);
}
.fil a { color: var(--gris); }
.fil .sep { opacity: .5; }

.entete-page { padding: 18px 0 8px; }

.entete-page .picto-page { font-size: 2.6rem; line-height: 1; }

.entete-page h1 {
  margin: 8px 0 6px;
  font-size: clamp(1.7rem, 1.3rem + 2vw, 2.5rem);
  letter-spacing: -.02em; line-height: 1.15; color: var(--vert-950);
}

.badge {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  background: var(--vert-100); color: var(--vert-800);
  font-size: .8rem; font-weight: 700;
}

.prose { max-width: 74ch; padding-bottom: 20px; }

.prose h2 {
  margin: 34px 0 10px; padding-bottom: 6px;
  font-size: 1.35rem; color: var(--vert-950);
  border-bottom: 2px solid var(--vert-100);
}
.prose h3 { margin: 26px 0 8px; font-size: 1.12rem; color: var(--vert-800); }
.prose ul { padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--vert-600); }
.prose table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.prose td, .prose th { border: 1px solid var(--ligne); padding: 8px 10px; text-align: left; }
.prose img { margin: 8px 0; }

/* ---------- Encarts ---------- */

.encart {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 26px 0; padding: 18px 20px;
  border-radius: var(--radius); border: 1px solid;
}
.encart .picto { font-size: 1.45rem; line-height: 1.3; }
.encart p { margin: 0; }
.encart strong { display: block; margin-bottom: 2px; }

.encart-urgence { background: var(--rouge-50); border-color: #f3d5d2; }
.encart-urgence strong { color: var(--rouge); }

.encart-info { background: var(--vert-50); border-color: var(--vert-100); }
.encart-info strong { color: var(--vert-800); }

.encart-note { background: var(--ambre-50); border-color: #f5e3c8; }
.encart-note strong { color: var(--ambre); }

/* ---------- Annuaire ---------- */

.pays-titre {
  display: flex; align-items: center; gap: 10px;
  margin: 40px 0 16px; font-size: 1.35rem; color: var(--vert-950);
}
.pays-titre:first-of-type { margin-top: 8px; }
.pays-titre .drapeau { font-size: 1.4rem; }
.pays-titre small { font-weight: 600; font-size: .85rem; color: var(--gris); }

.adresse h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--vert-950); }
.adresse .lieu { margin: 0 0 12px; font-size: .94rem; color: var(--gris); white-space: pre-line; }
.adresse .actions { display: flex; flex-wrap: wrap; gap: 8px; }

.pastille {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--vert-50); border: 1px solid var(--vert-100);
  font-size: .86rem; font-weight: 600; color: var(--vert-800);
  text-decoration: none;
}
.pastille:hover { background: var(--vert-100); }

.mise-en-avant { border: 2px solid var(--vert-600); position: relative; }
.mise-en-avant::before {
  content: "Notre cabinet"; position: absolute; top: -11px; left: 16px;
  padding: 1px 10px; border-radius: 999px;
  background: var(--vert-700); color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
}

/* ---------- Bloc cabinet (accueil) ---------- */

.cabinet-bloc { display: grid; gap: 26px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 720px) { .cabinet-bloc { grid-template-columns: 240px 1fr; } }
.cabinet-bloc img { box-shadow: var(--ombre); }

/* ---------- Pied de page ---------- */

.pied {
  margin-top: 56px; padding: 40px 0 28px;
  background: var(--vert-950); color: #cfe5e1;
}
.pied a { color: #fff; }
.pied h3 { margin: 0 0 10px; font-size: .98rem; color: #fff; }
.pied .grille { gap: 28px; }
.pied p, .pied li { font-size: .92rem; margin: 4px 0; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied .fin {
  margin-top: 30px; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .84rem; color: #9dc4be;
}

/* ---------- Divers ---------- */

.saut { position: absolute; left: -999px; top: 0; background: #fff; padding: 10px 16px; z-index: 100; }
.saut:focus { left: 10px; }

@media print {
  .entete, .pied, .groupe-btn { display: none; }
}

/* ---------- Comparatif assurances ---------- */

.defilable { overflow-x: auto; margin: 4px 0 18px; border-radius: var(--radius); box-shadow: var(--ombre); }
table.comparatif {
  border-collapse: collapse; width: 100%; min-width: 760px;
  font-size: .92rem; background: var(--carte);
}
table.comparatif th {
  background: var(--vert-50); color: var(--vert-950);
  text-align: left; white-space: nowrap;
}
table.comparatif td, table.comparatif th { border: 1px solid var(--ligne); padding: 10px 12px; vertical-align: top; }
table.comparatif td:first-child { font-weight: 700; color: var(--vert-950); white-space: nowrap; }

.carte ul { margin: 10px 0 0; padding-left: 18px; font-size: .9rem; color: var(--gris); }
.carte ul li { margin: 4px 0; }
.carte ul li::marker { color: var(--vert-600); }

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

.btn-recherche {
  order: 2;
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border: 1px solid var(--ligne); border-radius: 12px;
  background: var(--carte); color: var(--vert-950);
  font: inherit; font-size: 1.02rem; cursor: pointer;
}
.btn-recherche:hover { background: var(--vert-50); border-color: var(--vert-600); }
.btn-recherche[hidden] { display: none; }
.entete-barre .nav { order: 1; }
@media (max-width: 1120px) {
  .btn-recherche { order: 0; margin-left: auto; }
  .entete-barre .nav { order: 2; }
}

html.recherche-ouverte { overflow: hidden; }

.recherche-voile {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(8, 63, 56, .42);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  padding: min(10vh, 84px) 16px 16px;
  overscroll-behavior: contain;
}

.recherche-boite {
  max-width: 620px; margin: 0 auto;
  background: var(--carte);
  border: 1px solid var(--ligne); border-radius: 16px;
  box-shadow: 0 24px 70px -18px rgba(8, 63, 56, .45);
  overflow: hidden;
  animation: recherche-pop .16s ease;
}
@keyframes recherche-pop {
  from { opacity: 0; transform: translateY(-8px) scale(.985); }
}
@media (prefers-reduced-motion: reduce) { .recherche-boite { animation: none; } }

.recherche-champ {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 13px 16px;
  border-bottom: 1px solid var(--ligne);
}
.recherche-champ .loupe { font-size: 1.05rem; }
.recherche-champ input {
  flex: 1; min-width: 0; border: 0; outline: none;
  font: inherit; font-size: 1.06rem; color: var(--encre);
  background: transparent;
}
.recherche-champ input::-webkit-search-cancel-button { -webkit-appearance: none; }
.recherche-fermer {
  flex: none; padding: 4px 8px;
  border: 1px solid var(--ligne); border-radius: 8px;
  background: var(--fond); color: var(--gris);
  font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer;
}
.recherche-fermer:hover { color: var(--encre); border-color: var(--gris); }

.recherche-resultats { max-height: min(58vh, 480px); overflow-y: auto; padding: 8px; }

.recherche-resultat {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px; border-radius: 10px;
  text-decoration: none; color: inherit;
}
.recherche-resultat:hover, .recherche-resultat.retenu { background: var(--vert-50); }
.recherche-resultat .picto { flex: none; font-size: 1.25rem; line-height: 1.45; }
.recherche-resultat .texte { min-width: 0; }
.recherche-resultat .ligne1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.recherche-resultat strong { font-size: .99rem; color: var(--vert-950); }
.recherche-resultat .ou {
  padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--vert-50); border: 1px solid var(--vert-100);
  font-size: .73rem; font-weight: 700; color: var(--vert-700);
}
.recherche-resultat .extrait { display: block; margin-top: 2px; font-size: .87rem; color: var(--gris); }

.recherche-resultats mark {
  background: var(--vert-100); color: var(--vert-950);
  border-radius: 3px; padding: 0 1px;
}

.recherche-libelle {
  margin: 10px 12px 4px;
  font-size: .76rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--gris);
}

.recherche-vide { margin: 16px 12px 8px; color: var(--gris); }

.recherche-pied {
  margin: 0; padding: 10px 16px;
  border-top: 1px solid var(--ligne);
  font-size: .78rem; color: var(--gris);
}
.recherche-pied kbd {
  font: inherit; font-weight: 700;
  padding: 1px 5px; border: 1px solid var(--ligne); border-radius: 5px;
  background: var(--fond);
}

.recherche-annonce { position: absolute; left: -999px; }

@media (max-width: 600px) {
  .recherche-voile { padding: 10px 10px 16px; }
  .recherche-pied { display: none; }
}