:root {
  --papier: #f7f5f1;
  --carte: #ffffff;
  --encre: #131a17;
  --encre-doux: #5a6560;
  --encre-tres-doux: #8b958f;
  --bord: #e6e3dc;
  --bord-fort: #d6d2c8;

  --emeraude-900: #05372a;
  --emeraude-800: #075640;
  --emeraude-700: #0a6b50;
  --emeraude-600: #0d8462;
  --emeraude-500: #12a374;
  --emeraude-400: #2bc48f;
  --emeraude-100: #e4f4ee;

  --degrade: linear-gradient(135deg, #075640 0%, #0d8462 52%, #2bc48f 100%);
  --degrade-doux: linear-gradient(135deg, #e8f6f0 0%, #f2faf6 100%);
  --degrade-sombre: linear-gradient(160deg, #05372a 0%, #075640 55%, #0a6b50 100%);

  --rayon: 16px;
  --ombre: 0 1px 2px rgba(5, 55, 42, .05), 0 10px 30px -12px rgba(5, 55, 42, .13);
  --ombre-forte: 0 2px 4px rgba(5, 55, 42, .07), 0 24px 48px -20px rgba(5, 55, 42, .3);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 16px/1.62 "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--emeraude-700); }
.contenant { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* Entete */
.site-entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .84);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--bord);
}
.site-entete .contenant { display: flex; align-items: center; gap: 18px; padding-block: 13px; }
.marque { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--encre); }
.marque-texte b, .pied-marque b {
  display: block; font-size: 18px; letter-spacing: -.03em;
  line-height: 1.22; font-weight: 700;
}
.marque-sous { display: block; font-size: 12.5px; color: var(--encre-tres-doux); line-height: 1.3; }

.bouton {
  display: inline-block; padding: 12px 22px; border-radius: 11px;
  text-decoration: none; font-weight: 600; font-size: 15px; border: 1px solid transparent;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.bouton:hover { transform: translateY(-1px); }
.bouton-plein { background: var(--degrade); color: #fff; box-shadow: 0 6px 18px -6px rgba(13, 132, 98, .6); }
.bouton-plein:hover { box-shadow: 0 10px 26px -8px rgba(13, 132, 98, .7); }
.bouton-petit { margin-left: auto; padding: 9px 17px; font-size: 14px; border-radius: 10px; }
.bouton-clair-plein { background: #fff; color: var(--emeraude-800); box-shadow: 0 8px 24px -8px rgba(5, 55, 42, .5); }

/* Heros */
.heros {
  position: relative; overflow: hidden;
  background: var(--degrade-sombre); color: #fff;
  padding-block: 46px 52px;
}
.heros-lueur {
  position: absolute; inset: -40% -10% auto -10%; height: 150%;
  background:
    radial-gradient(56% 46% at 78% 8%, rgba(43, 196, 143, .5) 0%, transparent 62%),
    radial-gradient(46% 40% at 8% 96%, rgba(18, 163, 116, .38) 0%, transparent 66%);
  pointer-events: none;
}
.heros .contenant { position: relative; }

.fil { display: flex; align-items: center; gap: 9px; font-size: 13px; margin-bottom: 20px; flex-wrap: wrap; }
.fil a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.fil a:hover { color: #fff; }
.fil span[aria-current] { color: rgba(255, 255, 255, .5); }
.fil-sep { color: rgba(255, 255, 255, .3); }

.heros h1 {
  font-size: clamp(32px, 5vw, 50px); line-height: 1.08; letter-spacing: -.038em;
  margin: 0 0 16px; font-weight: 700; max-width: 19ch;
}
.chapo-principal {
  font-size: 17.5px; color: rgba(255, 255, 255, .78);
  max-width: 68ch; margin: 0 0 28px;
}
.chapo-principal b { color: #fff; font-weight: 600; }

/* Recherche */
.recherche { position: relative; max-width: 560px; margin-bottom: 30px; }
.recherche-champ { position: relative; display: flex; align-items: center; }
.recherche-loupe {
  position: absolute; left: 17px; width: 19px; height: 19px;
  color: var(--encre-tres-doux); pointer-events: none;
}
.recherche-loupe svg { width: 19px; height: 19px; }
#recherche-saisie {
  width: 100%; padding: 15px 18px 15px 48px; font: inherit; font-size: 16px;
  color: var(--encre); background: #fff; border: 1px solid transparent;
  border-radius: 13px; outline: none;
  box-shadow: 0 10px 30px -12px rgba(5, 55, 42, .5);
}
#recherche-saisie::placeholder { color: var(--encre-tres-doux); }
#recherche-saisie:focus { box-shadow: 0 0 0 4px rgba(43, 196, 143, .35), 0 14px 34px -12px rgba(5, 55, 42, .55); }
.recherche-resultats {
  position: absolute; top: calc(100% + 9px); left: 0; right: 0; z-index: 40;
  background: #fff; border: 1px solid var(--bord); border-radius: 13px;
  box-shadow: var(--ombre-forte); overflow: hidden; max-height: 380px; overflow-y: auto;
}
.resultat {
  display: flex; align-items: center; gap: 12px; padding: 11px 15px;
  text-decoration: none; color: var(--encre); border-bottom: 1px solid var(--bord);
}
.resultat:last-child { border-bottom: 0; }
.resultat:hover, .resultat.actif { background: var(--emeraude-100); }
.resultat b { font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; }
.resultat span { font-size: 12.5px; color: var(--encre-tres-doux); display: block; }
.resultat-vide { padding: 15px; color: var(--encre-tres-doux); font-size: 14px; }

/* Chiffres */
.chiffres { display: flex; flex-wrap: wrap; gap: 12px; }
.chiffre {
  flex: 1 1 158px; padding: 15px 18px; border-radius: 14px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
}
.chiffre b {
  display: block; font-size: 28px; font-weight: 700; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.chiffre span {
  font-size: 11.5px; color: rgba(255, 255, 255, .66);
  text-transform: uppercase; letter-spacing: .08em;
}

/* Corps */
main { padding-block: 44px 60px; }
h2 { font-size: 22px; letter-spacing: -.028em; margin: 0 0 16px; font-weight: 650; }
.groupe + .maillage, .maillage + .maillage, .groupe + .groupe { margin-top: 46px; }
.chapo { color: var(--encre-doux); margin: -8px 0 18px; font-size: 15px; }

.fiches {
  list-style: none; padding: 0; margin: 0; display: grid; gap: 13px;
  grid-template-columns: repeat(auto-fill, minmax(328px, 1fr));
}
.fiche {
  position: relative; scroll-margin-top: 92px; background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 18px 20px 16px;
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fiche::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--degrade); opacity: 0; transition: opacity .18s ease;
}
.fiche:hover { transform: translateY(-2px); box-shadow: var(--ombre); border-color: #cfe5dc; }
.fiche:hover::before { opacity: 1; }
.fiche:target { border-color: var(--emeraude-500); box-shadow: var(--ombre-forte); }
.fiche:target::before { opacity: 1; }

.fiche-tete { display: flex; align-items: flex-start; gap: 13px; }
.mono {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border-radius: 13px; color: #fff; font-weight: 700; font-size: 15px;
  letter-spacing: -.02em;
}
.mono-0 { background: linear-gradient(135deg, #075640, #12a374); }
.mono-1 { background: linear-gradient(135deg, #0a6b50, #2bc48f); }
.mono-2 { background: linear-gradient(135deg, #05372a, #0d8462); }
.mono-3 { background: linear-gradient(135deg, #0d8462, #6fd9b0); }
.mono-4 { background: linear-gradient(135deg, #063f30, #17b581); }

.fiche-identite { min-width: 0; }
.fiche h3 { margin: 0; font-size: 17px; letter-spacing: -.022em; font-weight: 650; line-height: 1.3; }
.fiche-activite { margin: 2px 0 0; font-size: 13.5px; color: var(--emeraude-600); font-weight: 500; }
.fiche-etiquettes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.etiq {
  font-size: 11.5px; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--emeraude-100); border: 1px solid #cfe5dc; color: var(--emeraude-700); font-weight: 500;
}
.etiq-neuf { background: linear-gradient(135deg, #fdf1e6, #fbe6d6); border-color: #f2d6bd; color: #a75c26; }
.fiche-adresse { margin: 12px 0 0; font-size: 14.5px; color: var(--encre-doux); }
.reclamer {
  margin-top: auto; padding-top: 14px; font-size: 13px; color: var(--encre-tres-doux);
  text-decoration: none;
}
.fiche-adresse + .reclamer { margin-top: 14px; }
.reclamer:hover { color: var(--emeraude-700); }

/* Maillage */
.grille-liens {
  list-style: none; padding: 0; margin: 0; display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fill, minmax(244px, 1fr));
}
.grille-liens a {
  display: flex; align-items: baseline; gap: 10px; text-decoration: none;
  padding: 11px 15px; border: 1px solid var(--bord); border-radius: 11px;
  background: var(--carte); color: var(--encre); font-size: 14.5px;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.grille-liens a:hover {
  border-color: var(--emeraude-400); background: var(--degrade-doux);
  color: var(--emeraude-800); transform: translateY(-1px);
}
.grille-liens em {
  margin-left: auto; font-style: normal; font-size: 12.5px;
  color: var(--encre-tres-doux); font-variant-numeric: tabular-nums;
}

/* Appel */
.appel { padding-block: 8px 56px; }
.appel-carte {
  position: relative; overflow: hidden; border-radius: 22px;
  background: var(--degrade); color: #fff; padding: 46px 44px;
  box-shadow: 0 24px 60px -26px rgba(5, 55, 42, .6);
}
.appel-carte::after {
  content: ''; position: absolute; inset: auto -8% -70% 40%; height: 150%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, .22) 0%, transparent 68%);
  pointer-events: none;
}
.appel-carte > * { position: relative; }
.appel h2 { margin: 0 0 12px; font-size: clamp(24px, 3.4vw, 32px); letter-spacing: -.032em; font-weight: 700; }
.appel p { margin: 0 0 26px; color: rgba(255, 255, 255, .84); font-size: 16.5px; max-width: 62ch; }

/* Pied */
.site-pied { background: var(--degrade-sombre); color: rgba(255, 255, 255, .62); }
.site-pied .contenant { padding-block: 40px 46px; }
.pied-marque { display: flex; align-items: center; gap: 11px; color: #fff; margin-bottom: 18px; }
.site-pied p { margin: 0 0 8px; font-size: 13.5px; max-width: 76ch; }
.site-pied a { color: rgba(255, 255, 255, .9); }

@media (max-width: 640px) {
  .site-entete .contenant { gap: 10px; }
  .marque-sous { display: none; }
  .fiches { grid-template-columns: 1fr; }
  .heros { padding-block: 30px 38px; }
  .appel-carte { padding: 32px 24px; border-radius: 18px; }
  main { padding-block: 32px 44px; }
}

/* Pont vers la page de service Fixara de la meme ville. */
.pont { margin-bottom: 34px; }
.pont-lien {
  display: flex; align-items: center; gap: 18px; text-decoration: none;
  padding: 20px 24px; border-radius: 18px; color: #fff;
  background: var(--degrade-sombre); position: relative; overflow: hidden;
  box-shadow: 0 16px 40px -22px rgba(5, 55, 42, .8);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pont-lien::after {
  content: ''; position: absolute; inset: auto -10% -80% 46%; height: 160%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(43, 196, 143, .3) 0%, transparent 70%);
  pointer-events: none;
}
.pont-lien:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -24px rgba(5, 55, 42, .9); }
.pont-texte { position: relative; display: grid; gap: 3px; }
.pont-texte b { font-size: 17px; letter-spacing: -.022em; font-weight: 650; }
.pont-texte span { font-size: 14.5px; color: rgba(255, 255, 255, .74); }
.pont-fleche {
  position: relative; margin-left: auto; flex: none;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .2);
}
.pont-fleche svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .pont-lien { padding: 16px 18px; gap: 12px; } }