/* BoulangeriesPatisseries.fr — v2
   Palette : papier chaud, brun croûte, doré. Fraunces pour les titres, Inter pour le reste. */

:root {
  --papier: #FAF7F1;
  --blanc: #FFFFFF;
  --encre: #1E1A17;
  --encre-2: #4A443F;
  --encre-3: #7C746C;
  --trait: #E6E0D6;
  --croute: #3B2A1E;
  --croute-2: #553D2B;
  --dore: #B27A36;
  --dore-clair: #F3E7D2;
  --focus: #2F6FED;
  --rayon: 10px;
  --largeur: 1120px;
  --colonne-texte: 68ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 16px/1.6 Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: Fraunces, Georgia, serif; font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h2 { font-size: 1.35rem; margin-top: 2.2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
a { color: var(--dore); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
small { color: var(--encre-3); font-size: .85em; }
address { font-style: normal; }
ul { padding-left: 1.2em; }
.wrap { max-width: var(--largeur); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.section { padding-block: 2.5rem 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--croute); color: #fff; padding: 8px 12px; border-radius: 6px; z-index: 100; }
.skip:focus { left: 8px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* En-tête ------------------------------------------------------------ */
.site-header { background: var(--blanc); border-bottom: 1px solid var(--trait); position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.logo { font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 1.15rem; color: var(--encre); letter-spacing: -0.02em; white-space: nowrap; }
.logo span { color: var(--dore); font-style: italic; font-weight: 400; margin-inline: 1px; }
.logo small { color: var(--encre-3); font-size: .8em; font-weight: 400; }
.logo:hover { text-decoration: none; }

.nav-principale { display: flex; align-items: center; gap: 4px; }
.menu { position: relative; }
.menu > summary {
  list-style: none; cursor: pointer;
  font-size: .92rem; font-weight: 500; color: var(--encre-2);
  padding: 8px 12px; border-radius: 8px;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; vertical-align: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.menu > summary:hover { background: var(--papier); color: var(--dore); }
.menu[open] > summary { background: var(--papier); color: var(--dore); }
.menu[open] > summary::after { transform: rotate(-135deg); vertical-align: -1px; }
.menu-panneau {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
  display: grid; grid-template-columns: 220px 320px; gap: 28px;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon);
  box-shadow: 0 14px 40px rgba(59, 42, 30, .16);
  padding: 20px 24px;
}
.menu-titre { font-size: .72rem; font-weight: 600; color: var(--encre-3); margin: 0 0 8px; }
.menu-panneau ul { list-style: none; margin: 0; padding: 0; }
.menu-panneau li a { display: block; padding: 4px 0; font-size: .9rem; color: var(--encre-2); }
.menu-panneau li a:hover { color: var(--dore); text-decoration: none; }
.menu-villes { columns: 2; gap: 20px; }
.nav-geoloc {
  font: 500 .92rem/1 Inter, sans-serif; color: var(--encre-2);
  background: none; border: 0; padding: 8px 12px; border-radius: 8px; cursor: pointer;
}
.nav-geoloc:hover { background: var(--papier); color: var(--dore); }

/* Fil d'Ariane */
.barre-ariane { background: var(--blanc); border-bottom: 1px solid var(--trait); }
.breadcrumb { font-size: .82rem; color: var(--encre-3); padding-block: 9px; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.breadcrumb li + li::before { content: "›"; margin-right: 8px; color: var(--trait); }
.breadcrumb a { color: var(--encre-3); }
.breadcrumb a:hover { color: var(--dore); }

/* Recherche ---------------------------------------------------------- */
.search { display: flex; position: relative; }
.search input {
  flex: 1; min-width: 0;
  font: inherit; color: var(--encre);
  background: var(--blanc); border: 1px solid var(--trait); border-right: 0;
  border-radius: 8px 0 0 8px; padding: 10px 14px;
}
.search input::placeholder { color: var(--encre-3); }
.search button {
  font: 600 .95rem/1 Inter, sans-serif; color: #fff;
  background: var(--croute); border: 0; border-radius: 0 8px 8px 0;
  padding: 0 18px; cursor: pointer;
}
.search button:hover { background: var(--croute-2); }
.search-header { flex: 1; max-width: 420px; margin-left: auto; }
.search-page { max-width: 560px; margin-block: 1rem 2rem; }
.autocomplete {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(59, 42, 30, .12);
  list-style: none; margin: 0; padding: 6px 0; text-align: left;
}
.autocomplete li a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px; color: var(--encre); }
.autocomplete li a:hover, .autocomplete li.actif a { background: var(--dore-clair); text-decoration: none; }
.autocomplete small { color: var(--encre-3); }

/* Accueil ------------------------------------------------------------ */
.hero-accueil {
  background: var(--croute) url(../images/cover.jpg) center/cover no-repeat;
  color: #fff; text-align: center;
  padding-block: clamp(56px, 10vw, 120px);
  position: relative;
}
.hero-accueil::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40, 26, 16, .72), rgba(40, 26, 16, .82)); }
.hero-accueil .wrap { position: relative; max-width: 760px; }
.hero-accueil h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 700; margin-bottom: .4em; }
.hero-accueil .hero-sous { font-size: 1.1rem; color: rgba(255,255,255,.8); margin-bottom: 1.8em; }
.search-hero input { padding: 15px 18px; font-size: 1.05rem; border: 0; }
.search-hero button { background: var(--dore); padding-inline: 24px; font-size: 1rem; }
.search-hero button:hover { background: #9a672b; }
.lien-geoloc {
  background: none; border: 0; color: rgba(255,255,255,.85); font: inherit; font-size: .92rem;
  margin-top: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.lien-geoloc:hover { color: #fff; }
.grille-regions { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 24px 32px; margin-top: 1rem; }
.bloc-region h3 { border-bottom: 2px solid var(--dore); padding-bottom: 6px; margin-bottom: 8px; }
.bloc-region h3 a { color: var(--encre); }
.bloc-region ul { list-style: none; padding: 0; margin: 0; }
.bloc-region li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; font-size: .95rem; }
.bloc-region li a { color: var(--encre-2); }
.bloc-region li a:hover { color: var(--dore); }

/* Textes ------------------------------------------------------------- */
.texte-long { max-width: var(--colonne-texte); color: var(--encre-2); }
.texte-long p { line-height: 1.75; }
.colonne-texte { max-width: var(--colonne-texte); }

/* En-tête des pages liste ------------------------------------------- */
.entete-liste { padding-block: 1.6rem .4rem; }
.entete-sous { color: var(--encre-2); font-size: 1.02rem; max-width: var(--colonne-texte); }
.entete-note { display: block; color: var(--encre-3); font-size: .92rem; margin-top: 4px; }
.code-dep { font-family: Inter, sans-serif; font-weight: 600; font-size: .5em; color: var(--dore); vertical-align: middle; margin-left: 6px; }

/* Grilles à deux colonnes --------------------------------------------- */
.liste-grille, .fiche-grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; padding-block: 1rem 3rem; align-items: start; }
.liste-principal > section:first-child h2, .fiche-principal > section:first-child h2 { margin-top: 0; }
.aside-bloc { border-top: 2px solid var(--dore); padding-top: 12px; margin-bottom: 28px; }
.aside-bloc h2 { font-size: 1.05rem; margin: 0 0 8px; }
.puces { list-style: none; padding: 0; margin: 0; }
.puces li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--trait); font-size: .95rem; }
.puces li a { color: var(--encre-2); }
.puces li a:hover { color: var(--dore); }
@media (max-width: 860px) {
  .liste-grille, .fiche-grille { grid-template-columns: 1fr; gap: 24px; }
}

/* Explorateur carte + liste (page commune) -------------------------------
   La liste suit le flux normal de la page : pas de bloc à défilement interne.
   La carte reste collée sous l'en-tête pendant qu'on parcourt la liste. */
.explorateur {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  gap: 28px;
  align-items: start;
  margin-block: 20px 40px;
}
.explorateur-panneau { min-width: 0; }
.explorateur-outils { margin-bottom: 16px; }
.explorateur-outils input {
  width: 100%; font: inherit; padding: 11px 14px;
  border: 1px solid var(--trait); border-radius: 8px; background: var(--blanc);
}
.explorateur-outils input::placeholder { color: var(--encre-3); }
.segments { display: flex; gap: 4px; margin-top: 10px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 8px; padding: 3px; }
.segment {
  flex: 1; font: 500 .85rem/1 Inter, sans-serif; color: var(--encre-2);
  background: none; border: 0; border-radius: 6px; padding: 8px 4px; cursor: pointer;
}
.segment:hover { color: var(--dore); }
.segment-actif, .segment-actif:hover { background: var(--croute); color: #fff; }
.explorateur-compteur { margin: 10px 2px 0; font-size: .82rem; color: var(--encre-3); }
.explorateur-liste { margin: 0; }
.explorateur-liste .carte { cursor: pointer; scroll-margin-top: 90px; }
.explorateur-liste .carte[hidden] { display: none; }
.carte-active { border-color: var(--dore); box-shadow: 0 0 0 2px var(--dore-clair); }
.explorateur-vide { padding: 20px 4px; color: var(--encre-2); font-size: .95rem; }

.explorateur-carte {
  position: sticky;
  top: 84px;
  height: calc(100vh - 116px);
  max-height: 720px;
  min-height: 380px;
}
#carte-ville { height: 100%; border-radius: var(--rayon); border: 1px solid var(--trait); z-index: 1; }
.leaflet-container { font: inherit; background: var(--papier); }
.leaflet-popup-content { font-size: .88rem; line-height: 1.5; }
.btn-carte-zone {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 2;
  font: 600 .85rem/1 Inter, sans-serif; color: var(--croute); background: var(--blanc);
  border: 1px solid var(--trait); border-radius: 100px; padding: 9px 18px; cursor: pointer;
  box-shadow: 0 3px 12px rgba(59, 42, 30, .18);
}
.btn-carte-zone:hover { border-color: var(--dore); color: var(--dore); }
/* Portrait chiffré d'un territoire -------------------------------------- */
.bloc-portrait {
  max-width: var(--colonne-texte);
  padding-block: 4px 8px;
}
.bloc-portrait p { color: var(--encre-2); line-height: 1.8; margin-bottom: .9em; }
.bloc-portrait strong { color: var(--encre); font-weight: 600; }

/* Publicité --------------------------------------------------------------
   Le rendu est celui de la régie : pas d'encadré ni d'étiquette ajoutés, le
   bloc qu'elle insère porte déjà sa propre mention. On se contente de réserver
   la place et d'aligner la typographie sur le reste du site. */
.pub { margin-block: 22px; }
.pub[hidden], .pub:empty { display: none; }
.pub ins { display: block; text-decoration: none; }
.pub a { color: var(--croute); }
.pub-liste { list-style: none; margin-block: 0; }
.fiche-aside .pub, .liste-aside .pub { margin-block: 0; }

/* Cartes d'établissements -------------------------------------------- */
.liste-cartes { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.carte {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  background: var(--blanc); border: 1px solid var(--trait); border-left: 4px solid var(--dore);
  border-radius: var(--rayon); padding: 14px 18px;
}
.carte h3 { margin: 0 0 2px; font-size: 1.08rem; }
.carte h3 a { color: var(--encre); }
.carte-type { margin: 0 0 4px; color: var(--encre-3); font-size: .86rem; }
.carte-dist { color: var(--dore); font-weight: 500; margin-left: 4px; }
.carte address { color: var(--encre-2); font-size: .95rem; }
.carte address a { color: var(--encre-2); }
.carte-tel {
  flex-shrink: 0; font-weight: 600; font-size: .95rem; color: var(--croute);
  background: var(--dore-clair); padding: 8px 12px; border-radius: 8px; white-space: nowrap;
}
.carte-tel:hover { background: var(--dore); color: #fff; text-decoration: none; }
.carte-pub { list-style: none; }
@media (max-width: 560px) {
  .carte { flex-direction: column; gap: 10px; }
  .carte-tel { align-self: stretch; text-align: center; }
}

/* Puces de villes, grille de départements ---------------------------- */
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-block; background: var(--blanc); border: 1px solid var(--trait); border-radius: 100px; padding: 6px 14px; color: var(--encre-2); font-size: .92rem; }
.chips a:hover { border-color: var(--dore); color: var(--dore); text-decoration: none; }
.chips small { margin-left: 4px; }
.grille-departements { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.grille-departements a {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 14px 16px; color: var(--encre);
}
.grille-departements a:hover { border-color: var(--dore); text-decoration: none; }
.grille-departements .code-dep { grid-row: 1 / 3; font-size: 1.1rem; margin: 0; }
.grille-departements small { grid-column: 2; }
.liste-adresses { list-style: none; padding: 0; margin: 0; }
.liste-adresses li { padding: 10px 0; border-bottom: 1px solid var(--trait); }
.liste-villes { list-style: none; padding: 0; margin: 0; max-width: 560px; }
.liste-villes li { padding: 8px 0; border-bottom: 1px solid var(--trait); display: flex; justify-content: space-between; }
.vide { color: var(--encre-2); }

/* Fiche entreprise ------------------------------------------------------ */
.fiche-entete {
  background: var(--croute);
  color: #fff;
  padding-block: clamp(32px, 5vw, 56px) clamp(28px, 4vw, 44px);
  position: relative; overflow: hidden;
}
.fiche-entete::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 90% at 88% 30%, rgba(178,122,54,.30), transparent 65%),
    radial-gradient(ellipse 45% 70% at 5% 90%, rgba(178,122,54,.14), transparent 60%);
}
.fiche-entete-inner { position: relative; }
.fiche-pastille {
  display: inline-block; margin-bottom: 14px;
  font-size: .78rem; font-weight: 500; color: #E3B978;
  background: rgba(255,255,255,.09); border: 1px solid rgba(227,185,120,.3);
  padding: 5px 13px; border-radius: 100px;
}
.fiche-entete h1 {
  font-size: clamp(1.9rem, 5vw, 3rem); color: #fff; font-weight: 700;
  margin-bottom: .3em; max-width: 20ch;
}
.fiche-adresse { font-size: 1.05rem; color: rgba(255,255,255,.75); margin-bottom: 22px; }
.fiche-adresse a { color: #E3B978; }
.fiche-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-block; font: 600 .95rem/1 Inter, sans-serif;
  border-radius: 8px; padding: 13px 20px; cursor: pointer; border: 1px solid transparent;
}
.btn:hover { text-decoration: none; }
.btn-principal { background: var(--dore); border-color: var(--dore); color: #fff; }
.btn-principal:hover { background: #9a672b; border-color: #9a672b; color: #fff; }
.btn-clair { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); color: #fff; }
.btn-clair:hover { background: rgba(255,255,255,.16); color: #fff; }
.btn-large { display: block; text-align: center; margin-top: 10px; }
.fiche-contact .btn-clair { background: var(--blanc); border-color: var(--trait); color: var(--croute); }
.fiche-contact .btn-clair:hover { border-color: var(--dore); color: var(--dore); }

.fiche-grille {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 44px; padding-block: 36px 3rem; align-items: start;
}
.fiche-principal > section { margin-bottom: 40px; }
.fiche-principal > section:first-child { margin-top: 0; }
.fiche-principal h2 { margin-top: 0; }
.bloc-texte { max-width: var(--colonne-texte); }
.bloc-texte p { color: var(--encre-2); line-height: 1.8; }
.section-intro { color: var(--encre-3); font-size: .92rem; margin-top: -.4em; }

.fiche-infos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 28px; margin: 0;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 6px 24px;
}
.fiche-infos > div { padding: 14px 0; border-bottom: 1px solid var(--trait); }
.fiche-infos dt { font-size: .78rem; color: var(--encre-3); margin-bottom: 3px; }
.fiche-infos dd { margin: 0; font-weight: 500; }
.fiche-infos dd a { color: var(--encre); }
.fiche-infos dd a:hover { color: var(--dore); }
.dd-note { font-weight: 400; font-size: .82rem; color: var(--encre-3); }

.bloc-horaires {
  background: var(--dore-clair); border: 1px solid #E7D6B4;
  border-radius: var(--rayon); padding: 20px 24px; max-width: var(--colonne-texte);
}
.bloc-horaires h2 { margin-top: 0; font-size: 1.15rem; }
.bloc-horaires p { color: #6B5230; margin-bottom: .6em; }
.bloc-horaires-cta { font-weight: 500; margin-bottom: 0; }

.fiche-aside { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 84px; }
.fiche-carte { height: 240px; border-radius: var(--rayon); border: 1px solid var(--trait); background: var(--dore-clair); z-index: 1; }
.fiche-contact { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 20px; }
.fiche-contact-nom { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 1.05rem; margin-bottom: 6px; }
.fiche-contact-adr { color: var(--encre-2); font-size: .93rem; margin-bottom: 4px; }
.fiche-signalement { font-size: .88rem; color: var(--encre-3); border-top: 1px solid var(--trait); padding-top: 18px; }

@media (max-width: 900px) {
  .fiche-grille { grid-template-columns: 1fr; gap: 28px; }
  .fiche-aside { position: static; }
}

/* États fermé et retiré -------------------------------------------------- */
.fiche-pastille-ferme {
  color: #F0C8B4;
  background: rgba(180, 70, 40, .22);
  border-color: rgba(240, 200, 180, .35);
}
.bandeau-ferme {
  background: #FBEDE8;
  border: 1px solid #EBCBBE;
  border-left: 4px solid #B4462B;
  border-radius: var(--rayon);
  padding: 18px 22px;
  margin-bottom: 32px;
  max-width: var(--colonne-texte);
}
.bandeau-ferme p { color: #6E3423; margin-bottom: .6em; }
.bandeau-ferme p:last-child { margin-bottom: 0; }
.bandeau-ferme-titre {
  font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 1.1rem;
  color: #8A2A15;
}
.bandeau-ferme a { color: #8A2A15; text-decoration: underline; text-underline-offset: 2px; }
.bandeau-ferme-note { font-size: .88rem; color: #8A6255; }

.bloc-retire {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-left: 4px solid var(--encre-3);
  border-radius: var(--rayon);
  padding: 22px 26px;
  margin-bottom: 32px;
}
.bloc-retire h1 { font-size: clamp(1.5rem, 3.5vw, 2rem); margin-bottom: .4em; }
.bloc-retire p { color: var(--encre-2); margin-bottom: 0; }
.apres-liste { margin-top: 1.4rem; }

/* Pagination, formulaire, alertes ------------------------------------ */
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 1.5rem; font-size: .95rem; }
.pagination a { color: var(--croute); font-weight: 500; }
.pagination-etat { color: var(--encre-3); }
.formulaire { max-width: 560px; margin-bottom: 3rem; }
.formulaire label { display: block; font-weight: 500; margin-bottom: 4px; }
.formulaire input, .formulaire textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 8px; background: var(--blanc); }
.piege { position: absolute; left: -9999px; }
.alerte { padding: 12px 16px; border-radius: 8px; max-width: 560px; }
.alerte-ok { background: #E5F3E5; color: #1E5B2A; }
.alerte-erreur { background: #FBE7E4; color: #8A2A1E; }

/* Portrait chiffré d'un territoire -------------------------------------- */
.bloc-portrait {
  max-width: var(--colonne-texte);
  padding-block: 4px 8px;
}
.bloc-portrait p { color: var(--encre-2); line-height: 1.8; margin-bottom: .9em; }
.bloc-portrait strong { color: var(--encre); font-weight: 600; }

/* Publicité ---------------------------------------------------------- */
.ad { margin-block: 20px; }
.ad:empty, .ad ins:empty { display: none; }
.ad-solocal ins { display: block; }

/* Pied de page -------------------------------------------------------- */
.site-footer { background: var(--croute); color: rgba(255,255,255,.72); margin-top: 4rem; font-size: .9rem; }
.footer-grille {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr .9fr; gap: 36px;
  padding-block: 44px 32px;
}
.footer-logo { font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 1.2rem; color: #fff; margin-bottom: 10px; }
.footer-logo span { color: var(--dore); font-style: italic; font-weight: 400; }
.footer-logo small { color: rgba(255,255,255,.5); font-size: .8em; font-weight: 400; }
.footer-marque p { margin-bottom: 12px; max-width: 42ch; line-height: 1.65; }
.footer-source { font-size: .83rem; color: rgba(255,255,255,.5); }
.footer-titre { font-size: .74rem; font-weight: 600; color: #fff; margin: 4px 0 12px; }
.site-footer nav ul { list-style: none; margin: 0; padding: 0; }
.site-footer nav li { padding: 3px 0; }
.site-footer a { color: rgba(255,255,255,.72); }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-villes { columns: 2; gap: 18px; }
.footer-bas {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  border-top: 1px solid rgba(255,255,255,.14); padding-block: 16px 24px;
  font-size: .82rem; color: rgba(255,255,255,.45);
}
.footer-bas p { margin: 0; }

@media (max-width: 1040px) {
  .footer-grille { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-marque { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .header-inner { flex-wrap: wrap; padding-block: 10px; gap: 10px 16px; }
  .nav-principale { order: 3; }
  .search-header { order: 2; margin-left: auto; flex: 1 1 100%; max-width: none; }
  .menu-panneau { grid-template-columns: 1fr; gap: 18px; left: 0; right: auto; min-width: 260px; }
  .menu-villes { columns: 2; }
}
@media (max-width: 560px) {
  .footer-grille { grid-template-columns: 1fr; }
  .footer-villes, .menu-villes { columns: 2; }
}


/* =====================================================================
   Espace professionnel et affichage des données fournies par les commerces
   ===================================================================== */

.colonne-pro { max-width: 820px; padding-bottom: 4rem; }
.page-pro .site-header .nav-principale a { text-decoration: none; }
.intro-pro { color: var(--encre-2); max-width: var(--colonne-texte); }
.formulaire small { display: block; color: var(--encre-3); font-size: .85rem; margin-top: 3px; font-weight: 400; }
.formulaire-large { max-width: none; }

.liste-pro { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 10px; }
.liste-pro li {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--blanc); border: 1px solid var(--trait); border-left: 4px solid var(--dore);
  border-radius: var(--rayon); padding: 14px 18px;
}
.encadre-fiche {
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 16px 20px; margin-bottom: 20px;
}

.etiquette-attente, .etiquette-refus {
  font-size: .8rem; font-weight: 600; padding: 5px 11px; border-radius: 100px;
}
.etiquette-attente { background: var(--dore-clair); color: #7A5620; }
.etiquette-refus { background: #FBE7E4; color: #8A2A1E; }
.alerte-attente { background: var(--dore-clair); color: #6B5230; }

/* Saisie des horaires */
.table-horaires { width: 100%; border-collapse: collapse; margin-bottom: 1.6rem; }
.table-horaires th, .table-horaires td { padding: 8px 10px; border-bottom: 1px solid var(--trait); text-align: left; }
.table-horaires thead th { font-size: .78rem; color: var(--encre-3); font-weight: 600; }
.table-horaires tbody th { font-weight: 500; white-space: nowrap; }
.table-horaires input[type="time"] {
  font: inherit; padding: 6px 8px; border: 1px solid var(--trait); border-radius: 6px; background: var(--blanc);
}
.table-horaires td span { color: var(--encre-3); font-size: .85rem; margin: 0 2px; }
.col-ferme { text-align: center; }

.grille-photos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.grille-photos img { width: 100%; height: 140px; object-fit: cover; border-radius: var(--rayon); border: 1px solid var(--trait); }

/* Modération */
.bloc-moderation {
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 18px 22px; margin-bottom: 16px;
}
.bloc-moderation h3 { margin-bottom: 4px; }
.bloc-moderation h3 small { font-weight: 400; color: var(--encre-3); font-family: Inter, sans-serif; font-size: .8rem; }
.moderation-meta { font-size: .9rem; color: var(--encre-2); }
.moderation-message { border-left: 3px solid var(--trait); margin: 12px 0; padding-left: 14px; color: var(--encre-2); }
.indices { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 4px; }
.indices li { font-size: .88rem; padding-left: 22px; position: relative; }
.indices li::before { position: absolute; left: 0; font-weight: 700; }
.indice-ok { color: #1E5B2A; } .indice-ok::before { content: "✓"; color: #1E5B2A; }
.indice-non { color: #8A2A1E; } .indice-non::before { content: "✕"; color: #8A2A1E; }
.indice-info { color: var(--encre-3); } .indice-info::before { content: "·"; }
.decision { display: flex; gap: 10px; margin-top: 14px; }
.compteur { font-family: Inter, sans-serif; font-size: .75rem; background: var(--croute); color: #fff; border-radius: 100px; padding: 3px 10px; vertical-align: middle; }
.table-apercu { border-collapse: collapse; margin: 10px 0; }
.table-apercu th, .table-apercu td { padding: 4px 14px 4px 0; text-align: left; font-weight: 400; font-size: .92rem; }
.table-apercu th { color: var(--encre-3); }
.valeur-proposee { font-weight: 500; word-break: break-all; }
.apercu-photo { max-width: 320px; border-radius: var(--rayon); border: 1px solid var(--trait); display: block; margin: 10px 0; }

/* Horaires et photos sur la fiche publique */
/* Les horaires doivent tenir sur une ligne par jour : c'est un tableau que
   l'on parcourt du regard, pas un texte que l'on lit. La colonne des jours est
   donc calée en largeur et celle des heures ne se replie pas. */
.table-horaires-publique { border-collapse: collapse; margin-bottom: .8rem; width: 100%; }
.table-horaires-publique th, .table-horaires-publique td { padding: 6px 0; text-align: left; }
.table-horaires-publique th {
  font-weight: 400; color: var(--encre-3); width: 6.2em; padding-right: 14px;
}
.table-horaires-publique td { font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table-horaires-publique tr + tr th, .table-horaires-publique tr + tr td {
  border-top: 1px solid var(--trait);
}
.jour-actuel th, .jour-actuel td { color: var(--encre); font-weight: 600; }
.badge-ouvert, .badge-ferme-jour {
  font-family: Inter, sans-serif; font-size: .72rem; font-weight: 600;
  padding: 4px 11px; border-radius: 100px; vertical-align: middle; margin-left: 10px;
}
.badge-ouvert { background: #E5F3E5; color: #1E5B2A; }
.badge-ferme-jour { background: #F1EEE9; color: var(--encre-3); }
.source-horaires { font-size: .85rem; color: var(--encre-3); }



/* =====================================================================
   Informations communiquées par le commerçant
   Elles ouvrent la fiche : ce sont elles qui répondent aux questions du
   visiteur, là où le reste vient des registres. Un seul bloc, dont la
   largeur s'ajuste au contenu — une colonne d'horaires seule n'a pas à
   s'étaler sur toute la page.
   ===================================================================== */
/* Deux colonnes : les horaires tiennent peu de place, le reste occupe la
   largeur disponible. Sans cela, le bloc laissait un grand vide à droite sur
   un écran d'ordinateur. */
.pratique {
  display: grid; grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  gap: 0 40px; align-items: start;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 24px 30px; margin-top: 24px;
}
.pratique h2 { margin-top: 0; font-size: 1.1rem; }
.pratique-droite { border-left: 1px solid var(--trait); padding-left: 40px; min-width: 0; }
.pratique-services + .vitrine { margin-top: 20px; }
.source-fournie { grid-column: 1 / -1; }

/* Une seule colonne à afficher : le bloc se resserre au lieu de s'étirer. */
.pratique:not(:has(.pratique-droite)) { grid-template-columns: auto; width: fit-content; }
.pratique:not(:has(.pratique-horaires)) { grid-template-columns: minmax(0, 1fr); }
.pratique:not(:has(.pratique-horaires)) .pratique-droite { border-left: 0; padding-left: 0; }

@media (max-width: 760px) {
  .pratique, .pratique:not(:has(.pratique-droite)) {
    display: block; width: auto; padding: 22px;
  }
  .pratique-droite {
    border-left: 0; padding-left: 0; margin-top: 22px;
    border-top: 1px solid var(--trait); padding-top: 22px;
  }
}

.groupe-services + .groupe-services { margin-top: 16px; }
.groupe-titre { font-size: .8rem; color: var(--encre-3); margin: 0 0 6px; }
.services { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.services li {
  font-size: .88rem; background: var(--dore-clair); color: #6B5230;
  border-radius: 100px; padding: 5px 13px;
}

.bandeau-conges {
  background: #FBEDE8; border: 1px solid #E9C9BC; border-left: 4px solid #B4462B;
  border-radius: var(--rayon); padding: 14px 18px; margin-top: 24px;
  color: #7A3423; font-weight: 500;
}
.source-fournie { font-size: .85rem; color: var(--encre-3); margin: 16px 0 0; }



/* Appel au commerçant sur une fiche jamais complétée ---------------------
   Il occupe la place qu'auraient prise les horaires : c'est le meilleur canal
   de recrutement, un boulanger tombant souvent sur sa propre fiche. */
.appel-pro {
  background: linear-gradient(180deg, #FBF3E4, var(--dore-clair));
  border: 1px solid #E3CFA4; border-radius: var(--rayon);
  padding: 24px 28px; max-width: var(--colonne-texte);
}
.appel-pro h2 { margin-top: 0; color: var(--croute); }
.appel-pro p { color: #6B5230; line-height: 1.75; }
.appel-pro-action { margin: 18px 0 0; }


/* La vitrine ------------------------------------------------------------
   La composition dépend du nombre de photos : une seule s'étale en bandeau,
   deux se partagent la largeur, trois ou quatre s'organisent autour d'une
   image principale. Quatre vignettes identiques alignées ne ressemblent pas
   à une devanture. */
.vitrine {
  list-style: none; padding: 0; margin: 22px 0 0;
  display: grid; gap: 10px;
  /* Une largeur explicite, et non un simple maximum : dans un bloc qui s'ajuste
     à son contenu, une grille sans largeur se réduit au plus petit possible et
     les photos deviennent des timbres-poste. */
  max-width: 100%;
}
.vitrine li { margin: 0; overflow: hidden; border-radius: var(--rayon); background: var(--dore-clair); }
.vitrine a { display: block; height: 100%; }
.vitrine img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
.vitrine a:hover img, .vitrine a:focus-visible img { transform: scale(1.03); }

.vitrine-1 { grid-template-columns: 1fr; max-width: 560px; }
.vitrine-1 li { aspect-ratio: 3 / 2; }

.vitrine-2 { grid-template-columns: 1fr 1fr; max-width: 760px; }
.vitrine-2 li { aspect-ratio: 3 / 2; }

/* À partir de trois, la première photo tient toute la hauteur à gauche et les
   suivantes s'empilent à droite : c'est la lecture d'une devanture, une vue
   d'ensemble puis les détails. */
.vitrine-3 { grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr 1fr; height: 320px; }
.vitrine-3 li:first-child { grid-row: span 2; }

.vitrine-4 { grid-template-columns: 1.55fr 1fr 1fr; grid-template-rows: 1fr 1fr; height: 320px; }
.vitrine-4 li:first-child { grid-row: span 2; }
.vitrine-4 li:nth-child(2) { grid-column: span 2; }

@media (max-width: 700px) {
  /* Sur un téléphone, la mosaïque devient une bande que l'on fait défiler du
     pouce : chaque photo garde ainsi une taille lisible. */
  .vitrine, .vitrine-1, .vitrine-2, .vitrine-3, .vitrine-4 {
    display: flex; height: auto; max-width: none; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 10px; padding-bottom: 6px; margin-inline: calc(clamp(16px, 4vw, 40px) * -1);
    padding-inline: clamp(16px, 4vw, 40px); scrollbar-width: none;
  }
  .vitrine::-webkit-scrollbar { display: none; }
  .vitrine li {
    flex: 0 0 78%; aspect-ratio: 4 / 3; grid-row: auto !important; grid-column: auto !important;
    scroll-snap-align: center;
  }
  .vitrine-1 li { flex-basis: 100%; aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) { .vitrine img { transition: none; } }


/* La visionneuse ---------------------------------------------------------
   Ouverte par-dessus la page. Le fond est sombre pour que la photo porte
   seule ; les commandes restent discrètes tant qu'on ne les survole pas. */
.visionneuse {
  border: 0; padding: 0; max-width: 100vw; max-height: 100vh;
  width: 100vw; height: 100vh; background: transparent; overflow: hidden;
  align-items: center; justify-content: center; gap: 10px;
}
/* Le display n'est posé qu'à l'ouverture : le déclarer sur la règle de base
   écraserait le « display: none » que le navigateur applique à un <dialog>
   fermé, et la visionneuse s'afficherait en bas de page. */
.visionneuse:not([open]) { display: none; }
.visionneuse[open] { display: flex; }
.visionneuse::backdrop { background: rgba(24, 18, 13, .93); }

.visionneuse-scene {
  margin: 0; flex: 1 1 auto; min-width: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 20px 0;
}
.visionneuse-scene img {
  max-width: 100%; max-height: calc(100vh - 110px);
  object-fit: contain; border-radius: 6px; display: block;
}
.visionneuse figcaption {
  color: rgba(255,255,255,.72); font-size: .88rem; text-align: center;
  display: flex; gap: 14px; align-items: baseline; justify-content: center; flex-wrap: wrap;
}
.visionneuse-compteur { color: rgba(255,255,255,.45); font-variant-numeric: tabular-nums; }

.visionneuse button {
  background: rgba(255,255,255,.10); color: #fff; border: 0; cursor: pointer;
  border-radius: 50%; width: 46px; height: 46px; flex: 0 0 auto;
  font-size: 1.6rem; line-height: 1; display: grid; place-items: center;
  transition: background-color .15s;
}
.visionneuse button:hover { background: rgba(255,255,255,.22); }
.visionneuse button[hidden] { display: none; }
.visionneuse-fermer {
  position: absolute; top: 18px; right: 18px; font-size: 1.5rem !important;
}

@media (max-width: 640px) {
  .visionneuse { gap: 4px; }
  .visionneuse button { width: 38px; height: 38px; font-size: 1.3rem; }
  .visionneuse-scene img { max-height: calc(100vh - 130px); }
}
@media (prefers-reduced-motion: reduce) { .visionneuse button { transition: none; } }


/* Appels vers l'espace professionnel ------------------------------------- */
.nav-pro {
  font-size: .88rem; font-weight: 500; color: var(--croute); text-decoration: none;
  border: 1px solid var(--dore); border-radius: 100px; padding: 7px 14px; white-space: nowrap;
}
.nav-pro:hover { background: var(--dore-clair); text-decoration: none; }

.appel-pro-ligne {
  background: var(--dore-clair); border-radius: var(--rayon);
  padding: 14px 18px; margin-top: 28px; color: #6B5230; font-size: .95rem;
}
.appel-pro-ligne a { color: var(--croute); font-weight: 500; }

.renvoi-pro {
  background: linear-gradient(180deg, #FBF3E4, var(--dore-clair));
  border: 1px solid #E3CFA4; border-radius: var(--rayon);
  padding: 22px 26px; margin: 22px 0 28px; max-width: var(--colonne-texte);
}
.renvoi-pro p { color: #6B5230; }
.renvoi-pro-titre {
  font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 1.12rem;
  color: var(--croute); margin-bottom: .5em;
}
.renvoi-pro-action { margin: 16px 0 0; }


/* Mention d'artisan ------------------------------------------------------
   Discrète mais lisible : c'est une qualité officielle, pas une réclame. */
.etiquette-artisan {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .85rem; font-weight: 500; color: #6B5230;
  background: var(--dore-clair); border: 1px solid #E3CFA4;
  border-radius: 100px; padding: 5px 14px; margin-top: 10px;
}
.etiquette-artisan::before { content: "✦"; color: var(--croute); }

.etiquette-bio { background: #E9F2E5; border-color: #C4DCB8; color: #35602A; }
.etiquette-bio::before { content: "❦"; color: #4A7C3B; }
.etiquette-epv { background: #EDEBF5; border-color: #CBC6E0; color: #453C6B; }
.etiquette-epv::before { content: "❖"; color: #6B5FA8; }

.lien-certificat { font-size: .82rem; margin-left: 8px; text-decoration: underline; }
.etiquette-bio .lien-certificat { color: #2E5624; }


/* Distinctions officielles ----------------------------------------------
   Présentées à part des services déclarés par le commerçant : elles viennent
   de registres publics et ne se discutent pas. Chaque bloc porte son détail,
   ce qu'une pastille sous le nom ne permettait pas. */
.distinctions { max-width: var(--colonne-texte); }
.distinction {
  border: 1px solid var(--trait); border-left-width: 3px;
  border-radius: var(--rayon); padding: 14px 18px; margin-bottom: 12px;
  background: var(--blanc);
}
.distinction-titre {
  margin: 0; font-weight: 600; font-size: .98rem;
  display: flex; align-items: baseline; gap: 9px;
}
.distinction-titre::before { font-size: .95em; }
.distinction-note { margin: 6px 0 0; font-size: .89rem; color: var(--encre-3); }
.distinction-note a { font-weight: 500; }

.distinction-artisan { border-left-color: var(--dore); background: #FDFAF4; }
.distinction-artisan .distinction-titre { color: var(--croute); }
.distinction-artisan .distinction-titre::before { content: "✦"; color: var(--dore); }

.distinction-bio { border-left-color: #6F9E5B; background: #F6FAF4; }
.distinction-bio .distinction-titre { color: #35602A; }
.distinction-bio .distinction-titre::before { content: "❦"; color: #6F9E5B; }
.distinction-bio .distinction-note a { color: #2E5624; }

.distinction-epv { border-left-color: #7E72B8; background: #F7F6FC; }
.distinction-epv .distinction-titre { color: #453C6B; }
.distinction-epv .distinction-titre::before { content: "❖"; color: #7E72B8; }


/* Marqueurs du bandeau ---------------------------------------------------
   Un mot chacun : ils signalent, le bloc « Distinctions » explique. Fond
   translucide clair, le bandeau étant sombre. */
/* La pastille et les marqueurs partagent une seule ligne : c'est la même
   nature d'information — ce qu'est ce commerce — et l'empiler sur trois
   niveaux repoussait le nom vers le bas. */
.fiche-entete-ligne {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.fiche-entete-ligne .fiche-pastille { margin: 0; }
.marqueur {
  display: inline-flex; align-items: center; gap: 6px;
  /* Aligné sur la pastille voisine, pour que la ligne se lise d'un trait. */
  font-size: .78rem; font-weight: 500; letter-spacing: .01em;
  padding: 5px 13px 5px 11px; border-radius: 100px; text-decoration: none;
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .88); transition: background-color .15s;
}
.marqueur:hover { background: rgba(255, 255, 255, .18); text-decoration: none; }
.marqueur span { font-size: .95em; line-height: 1; }
.marqueur-artisan span { color: var(--dore); }
.marqueur-bio span { color: #9FD08A; }
.marqueur-epv span { color: #B5AAE6; }

/* La cible de l'ancre ne doit pas se coller au haut de la fenêtre. */
.distinctions { scroll-margin-top: 90px; }

.source-horaires { font-size: .8rem; color: var(--encre-3); margin: 0 0 10px; }


/* Fiches récemment enrichies --------------------------------------------- */
.maj-recentes {
  list-style: none; padding: 0; margin: 18px 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px 28px;
}
.maj-recentes li {
  padding: 10px 0; border-bottom: 1px solid var(--trait);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
}
.maj-recentes a { font-weight: 500; }
.maj-lieu { font-size: .85rem; color: var(--encre-3); }
.maj-apports {
  font-size: .78rem; color: #6B5230; background: var(--dore-clair);
  border-radius: 100px; padding: 2px 10px; margin-left: auto;
}


/* Présentation rédigée d'après le site du commerçant ----------------------
   Elle se distingue du texte calculé : le visiteur doit savoir ce qui vient
   de l'établissement et ce qui vient de nous. */
.presentation-redigee {
  border-left: 3px solid var(--dore); padding-left: 18px; margin-bottom: 20px;
}
.presentation-redigee p { margin: 0 0 10px; }
.presentation-source { font-size: .84rem; color: var(--encre-3); margin-bottom: 0 !important; }