/* =========================================================================
   Annuaires — couche design commune
   Vernaculaire : l'annuaire imprimé (index, filets, chiffres tabulaires).
   Les variables (--brand, --display, --r…) sont posées par méga.
   ========================================================================= */

@font-face{font-family:'Instrument';src:url('/_f/instrument-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Instrument';src:url('/_f/instrument-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Instrument';src:url('/_f/instrument-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Instrument';src:url('/_f/instrument-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Archivo';src:url('/_f/archivo-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Archivo';src:url('/_f/archivo-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Archivo';src:url('/_f/archivo-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Fraunces';src:url('/_f/fraunces-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Fraunces';src:url('/_f/fraunces-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Newsreader';src:url('/_f/newsreader-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Newsreader';src:url('/_f/newsreader-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'MonoIdx';src:url('/_f/mono-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'MonoIdx';src:url('/_f/mono-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --body:'Instrument',system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:'MonoIdx',ui-monospace,SFMono-Regular,Menlo,monospace;
  --line:color-mix(in srgb, var(--ink) 12%, transparent);
  --line-soft:color-mix(in srgb, var(--ink) 7%, transparent);
  --muted:color-mix(in srgb, var(--ink) 58%, #fff);
}

/* ---------- Base ---------- */
body{font-family:var(--body);color:var(--ink);-webkit-font-smoothing:antialiased;font-feature-settings:"cv05" 1}
h1,h2,h3,h4,.u-display{font-family:var(--display);letter-spacing:-.022em}
h1{font-weight:800;line-height:1.03}
h2{font-weight:700;line-height:1.12;letter-spacing:-.02em}
h3{font-weight:700;letter-spacing:-.012em}
p,li,td{font-family:var(--body)}
a{text-underline-offset:.18em}

/* Chiffres alignés partout : c'est un annuaire, les nombres se comparent */
.u-num,[class*="text-2xl"] b,[class*="font-bold"]{font-variant-numeric:tabular-nums}

/* ---------- Hero : lisibilité (le titre héritait d'un noir de styles.css) ---------- */
.hero-gradient,.hero-category,.hero-city{position:relative;background-color:#0b1220}
.hero-gradient::after,.hero-category::after,.hero-city::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,12,20,.30) 0%,rgba(8,12,20,.62) 62%,rgba(8,12,20,.86) 100%);
}
.hero-gradient>*,.hero-category>*,.hero-city>*{position:relative;z-index:2}
.hero-gradient h1,.hero-category h1,.hero-city h1,
.hero-gradient h2,.hero-category h2,.hero-city h2,
.hero-gradient p,.hero-category p,.hero-city p,
.hero-gradient span,.hero-category span,.hero-city span{color:#fff}
.hero-gradient h1,.hero-category h1,.hero-city h1{
  font-size:clamp(2.1rem,1.15rem + 3.3vw,3.6rem);
  text-shadow:0 1px 26px rgba(0,0,0,.34);margin-bottom:.5rem;
}
.hero-gradient p,.hero-category p,.hero-city p{color:rgba(255,255,255,.88)!important;max-width:46ch}

/* Filet sous le titre : marque d'entrée d'index */
.hero-gradient h1::after,.hero-category h1::after,.hero-city h1::after{
  content:"";display:block;width:64px;height:3px;margin-top:.7rem;background:var(--brand);border-radius:2px;
}

/* Pastilles de chiffres du hero → jetons d'index, chiffres tabulaires */
.hero-gradient [class*="rounded-full"],.hero-category [class*="rounded-full"],.hero-city [class*="rounded-full"]{
  border-radius:var(--r)!important;background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(3px);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.hero-gradient form [class*="rounded"],.hero-category form [class*="rounded"],.hero-city form [class*="rounded"]{
  background:#fff!important;border-color:transparent
}

/* ---------- Cartes : filets plutôt qu'ombres flottantes ---------- */
.bg-white.rounded-xl,.bg-white.rounded-lg,.bg-white.rounded-2xl,
.bg-white.shadow,.bg-white.shadow-md,.bg-white.shadow-lg{
  border-radius:var(--r)!important;
  border:1px solid var(--line-soft);
  box-shadow:0 1px 2px rgba(16,24,40,.04)!important;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.bg-white.rounded-xl:hover,.bg-white.rounded-lg:hover,.bg-white.shadow-md:hover,.bg-white.shadow:hover{
  border-color:var(--brand);
  box-shadow:0 6px 20px -8px color-mix(in srgb, var(--brand) 42%, transparent)!important;
  transform:translateY(-1px);
}
.bg-white h3,.bg-white h2{letter-spacing:-.015em}

/* ---------- En-tête + sous-navigation ---------- */
header[data-sticky-header]{
  background-image:linear-gradient(92deg,var(--ink) 0%,var(--brand-dk) 100%)!important;
  border-bottom:1px solid rgba(255,255,255,.10);
}
header[data-sticky-header] a{color:#fff;font-family:var(--display);letter-spacing:-.01em}
header[data-sticky-header] a[class*="bg-white"]{
  color:var(--brand-dk);border-radius:var(--r);font-weight:700;background:#fff!important;
}
header[data-sticky-header] #mobile-menu a{color:var(--ink);font-family:var(--body)}

#fzc-subnav{border-bottom:1px solid var(--line);top:var(--hdr-h,64px)}
.fzc-sn-in a{font-family:var(--display);font-weight:600;letter-spacing:-.008em;color:var(--muted)}
.fzc-sn-in a:hover{color:var(--brand-dk)}
.fzc-sn-in a.fzc-act{color:var(--brand-dk);border-bottom-color:var(--brand);background:var(--soft)}
#fzc-crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;text-transform:uppercase}
#fzc-crumb a{color:var(--brand-dk)}
#fzc-crumb .fzc-pill{background:var(--soft);border-radius:var(--r);font-weight:600}

/* ---------- Boutons ---------- */
a[class*="bg-blue-6"],a[class*="bg-blue-7"],button[class*="bg-blue-6"],button[class*="bg-blue-7"],
a[class*="bg-indigo-6"],button[class*="bg-indigo-6"],input[type=submit]{
  background:var(--brand)!important;border-radius:var(--r)!important;
  font-family:var(--display);font-weight:700;letter-spacing:-.005em;
  box-shadow:0 1px 2px rgba(16,24,40,.10);
}
a[class*="bg-blue-6"]:hover,a[class*="bg-blue-7"]:hover,button[class*="bg-blue-6"]:hover{background:var(--brand-dk)!important}

/* ---------- Étiquettes de section : petites capitales d'index ---------- */
[class*="uppercase"][class*="text-xs"],[class*="tracking-wide"][class*="text-xs"]{
  font-family:var(--mono);font-weight:500;letter-spacing:.12em;color:var(--muted);
}

/* ---------- Grille : les blocs pleine largeur ne se coincent plus ---------- */
.grid>.mt-10,.grid>.text-center,.grid>.mt-8{grid-column:1/-1}

/* ---------- Pied de page ---------- */
footer{border-top:3px solid var(--brand)}
footer h3,footer h4{font-family:var(--display);letter-spacing:.02em;text-transform:uppercase;font-size:12.5px;opacity:.72}
footer a:hover{color:#fff}
footer .text-sm{font-variant-numeric:tabular-nums}

/* ---------- Accessibilité ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;border-radius:2px;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- Mobile ---------- */
@media (max-width:640px){
  .hero-gradient h1,.hero-category h1,.hero-city h1{font-size:2rem;line-height:1.06}
  .hero-gradient p,.hero-category p,.hero-city p{font-size:.95rem}
  .fzc-sn-in a{padding:9px 10px;font-size:13px}
}

/* ---------- En-tête : unifier les deux variantes du générateur ---------- */
header.sticky.bg-white,header.bg-white.sticky{
  background-image:linear-gradient(92deg,var(--ink) 0%,var(--brand-dk) 100%)!important;
  background-color:transparent!important;border-bottom:1px solid rgba(255,255,255,.10);
}
header.sticky.bg-white a,header.sticky.bg-white span,header.bg-white.sticky a,header.bg-white.sticky span{
  color:#fff!important;font-family:var(--display);letter-spacing:-.01em;
}
header.sticky.bg-white a:hover,header.bg-white.sticky a:hover{color:rgba(255,255,255,.78)!important}
header.sticky.bg-white #mobile-menu a,header.bg-white.sticky #mobile-menu a{color:var(--ink)!important;font-family:var(--body)}

/* ---------- Hero : retirer les doublons du générateur ---------- */
/* fil d'ariane natif (pastille flottante) : remplacé par #fzc-crumb, sticky et cohérent */
.hero-category>*>nav[aria-label],.hero-city>*>nav[aria-label],
.hero-category nav[aria-label="Fil d\'Ariane"],.hero-city nav[aria-label="Fil d\'Ariane"]{display:none}
/* gros emoji décoratif : la règle colorée sous le titre porte l'accent */
.hero-gradient span[role="img"],.hero-category span[role="img"],.hero-city span[role="img"]{display:none}

/* ---------- Respiration du hero (les gabarits hub n'ont aucun padding haut) ---------- */
.hero-gradient,.hero-category,.hero-city{padding-top:clamp(2rem,3.4vw,3.25rem);padding-bottom:clamp(2rem,3.4vw,3.25rem)}

/* ---------- Fiche entreprise : boutons d'action dans la palette ---------- */
a[href^="tel:"],a[href*="waze.com"],a[href*="google.com/maps"]{
  border-radius:var(--r)!important;font-family:var(--display);font-weight:700;
}
a[href*="waze.com"],a[href*="google.com/maps"]{background:var(--brand)!important;color:#fff!important}
a[href*="waze.com"]:hover,a[href*="google.com/maps"]:hover{background:var(--brand-dk)!important}

/* Encart partenaire (devis) : le contenir visuellement, il vient d'un tiers */
div:has(>#v459ba301e5d){border:1px solid var(--line);border-radius:var(--r);background:var(--soft)}

/* ---------- Blocs à fond sombre : restaurer l'intention text-white ---------- */
header[class*="text-white"]{background-image:linear-gradient(92deg,var(--ink) 0%,var(--brand-dk) 100%)!important}
header[class*="text-white"] a,header[class*="text-white"] span{color:#fff!important}
header[class*="text-white"] a:hover{color:rgba(255,255,255,.78)!important}
section[class*="bg-gradient-to"][class*="text-white"]{
  background-image:linear-gradient(165deg,var(--ink) 0%,var(--brand-dk) 100%)!important;
}
section[class*="text-white"] h1,section[class*="text-white"] h2,
section[class*="text-white"] p,section[class*="text-white"] a{color:#fff!important}

/* ---------- Encarts d'article ---------- */
.fzc-box{margin:1.6rem 0;padding:1rem 1.2rem;border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--r);background:var(--soft)}
.fzc-box p{margin:0 0 .5rem;font-family:var(--display);letter-spacing:-.01em}
.fzc-box ul{margin:0;padding-left:1.1rem}
.fzc-box li{margin:.3rem 0;line-height:1.55}
.fzc-faq{margin-top:2.2rem}
.fzc-faq h2{margin-bottom:.8rem}
.fzc-faq details{border:1px solid var(--line);border-radius:var(--r);padding:.75rem 1rem;margin-bottom:.6rem;background:#fff}
.fzc-faq summary{cursor:pointer;font-family:var(--display);font-weight:700;letter-spacing:-.01em}
.fzc-faq summary::marker{color:var(--brand)}
.fzc-faq details[open]{border-color:var(--brand)}
.fzc-faq details p{margin:.6rem 0 0;color:var(--muted)}