/* =========================================================
   SITE UTILE — organisé par BESOINS de l'administré
   ========================================================= */

/* ---------- EN-TÊTE ---------- */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--trait);
  transition: background-color .5s, border-color .5s, box-shadow .3s;
}
.entete.collee { box-shadow: var(--ombre-1); }
.entete__in {
  display: flex; align-items: center; gap: clamp(.8rem, 2vw, 2rem);
  padding: .6rem 0; min-height: 70px;
}
.entete__logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.entete__logo img { height: 58px; width: auto; border-radius: 10px; }
.entete__nav { display: flex; gap: .2rem; margin-left: auto; flex-wrap: wrap; }
.entete__nav a {
  padding: .55rem .85rem; border-radius: var(--r-pill);
  text-decoration: none; font-weight: 500; font-size: var(--fs-sm);
  color: var(--texte-doux); transition: background-color .22s, color .22s;
}
.entete__nav a:hover, .entete__nav a[aria-current="page"] {
  background: var(--bg-alt); color: var(--accent);
}
.entete__outils { display: flex; gap: .45rem; align-items: center; }
.icone-btn {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--trait); background: var(--surface);
  cursor: pointer; transition: background-color .22s, border-color .22s, transform .22s;
}
.icone-btn:hover { background: var(--bg-alt); border-color: var(--accent); transform: translateY(-2px); }
@media (max-width: 980px) { .entete__nav { display: none; } }

/* Bandeau d'alerte / info service */
.bandeau-alerte {
  background: var(--c-orange); color: #2c2408;
  font-size: var(--fs-sm); font-weight: 500;
}
.bandeau-alerte .contenu {
  display: flex; align-items: center; gap: .7rem; padding: .55rem 0; flex-wrap: wrap;
}
.bandeau-alerte strong { font-weight: 700; }
.bandeau-alerte a { margin-left: auto; font-weight: 600; }

/* Trois niveaux, trois lectures. Le rouge se réserve à ce qui engage la
   sécurité : s'il sert pour une fermeture de guichet, il ne sert plus
   à rien le jour du cyclone. */
.bandeau-alerte--info { background: var(--c-bleu); color: #fff; }
.bandeau-alerte--info a { color: var(--c-anis); }
.bandeau-alerte--vigilance { background: var(--c-orange); color: #2c2408; }
.bandeau-alerte--vigilance a { color: #2c2408; }
.bandeau-alerte--alerte { background: #b4291f; color: #fff; }
.bandeau-alerte--alerte a { color: #ffd9a0; }

/* ---------- Les labels, en pied de page ---------- */
.pied__labels {
  margin-top: 2.2rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.pied__labels-t {
  margin: 0 0 .8rem; font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-anis);
}
.pied__labels-l { display: flex; gap: .7rem; flex-wrap: wrap; align-items: stretch; }
.label {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .9rem; border-radius: 10px;
  background: rgba(255, 255, 255, .94);
  text-decoration: none; color: #1b2422;
  transition: transform .18s, box-shadow .18s;
}
.label:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6); }
.label img { height: 38px; width: auto; max-width: 110px; object-fit: contain; }
.label__nom {
  font-size: .78rem; font-weight: 700; line-height: 1.2;
  max-width: 14ch;
}
.label__doute {
  font-style: normal; font-size: .62rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .12rem .4rem; border-radius: 999px;
  background: #fff3cd; color: #6b4e00;
}
.label--doute { background: rgba(255, 255, 255, .72); }
.pied__labels-n {
  margin: .9rem 0 0; font-size: .74rem; line-height: 1.6;
  color: rgba(255, 255, 255, .62);
}
.pied__labels-n code {
  padding: .05rem .3rem; border-radius: 4px;
  background: rgba(255, 255, 255, .14); font-size: .95em;
}

/* Dans l'univers du CCAS, le pied est clair : les pastilles se posent
   sur un fond encadré plutôt que sur du blanc sur du blanc. */
.pied__labels--ccas { border-top-color: rgba(255, 255, 255, .22); }

@media (max-width: 560px) {
  .pied__labels-l { gap: .5rem; }
  .label { padding: .45rem .7rem; }
  .label img { height: 30px; }
  .label__nom { font-size: .72rem; }
}

/* ---------- HÉRO « QUE CHERCHEZ-VOUS ? » ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(3rem, 8vh, 6rem) 0 clamp(3.5rem, 9vh, 6rem);
  background: var(--c-vert-900);
  color: #fff;
}
/* La photo est une vraie image : elle se charge, se met en cache et
   se prête au lazy-loading — contrairement à un background CSS. */
.hero__fond {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04);
  animation: heroRespire 24s ease-in-out infinite alternate;
}
@keyframes heroRespire { to { transform: scale(1.12) translateY(-1.5%); } }
.hero__voile {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,37,31,.74), rgba(20,37,31,.44) 52%, rgba(20,37,31,.82));
}
.hero__in { position: relative; z-index: 2; text-align: center; }
.recherche-retour {
  max-width: 52ch; margin: 0 auto 1rem;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--r-md); padding: .6rem .9rem;
  font-size: var(--fs-sm); color: #fff;
}
.recherche-retour[hidden] { display: none; }
.hero h1 { font-size: var(--fs-3xl); margin-bottom: .2em; color: #fff; }
.hero .accroche { color: rgba(255,255,255,.82); max-width: 54ch; margin-inline: auto; }

.recherche {
  display: flex; align-items: center; gap: .5rem;
  width: min(100%, 660px); margin: 2rem auto 1rem;
  background: #fff; border-radius: var(--r-pill);
  padding: .45rem .45rem .45rem 1.3rem;
  box-shadow: 0 20px 50px rgba(4,20,16,.35);
}
.recherche input {
  flex: 1; border: 0; outline: 0; background: none;
  font: inherit; font-size: var(--fs-md); color: var(--c-encre); padding: .6rem 0;
}
.recherche input::placeholder { color: #9aa6a1; }
.recherche .btn { flex: none; }

.suggestions { display: flex; gap: .45rem; flex-wrap: wrap; justify-content: center; }
.suggestions span { font-size: var(--fs-xs); color: rgba(255,255,255,.6); padding-top: .35rem; }
.chip {
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22);
  color: #fff; font-size: var(--fs-xs); padding: .35rem .8rem;
  border-radius: var(--r-pill); cursor: pointer; text-decoration: none;
  transition: background-color .22s, border-color .22s;
}
.chip:hover { background: var(--c-anis); color: #2b3005; border-color: var(--c-anis); }

/* ---------- BESOINS ---------- */
.section { padding: clamp(3rem, 7vh, 5.5rem) 0; }
.section--alt { background: var(--bg-alt); }
.section__tete { display: flex; align-items: flex-end; gap: 1rem; margin-bottom: var(--sp-4); flex-wrap: wrap; }
.section__tete h2 { margin: 0; }
.section__tete .lien-tout { margin-left: auto; font-size: var(--fs-sm); font-weight: 600; color: var(--accent); text-decoration: none; }
.section__tete .lien-tout:hover { text-decoration: underline; }

.grille-besoins {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.besoin {
  position: relative; overflow: hidden;
  display: grid; align-content: start; gap: .4rem;
  padding: 1.6rem 1.5rem 1.7rem;
  border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--trait);
  text-decoration: none; color: var(--texte);
  transition: transform .3s var(--ease-doux), box-shadow .3s var(--ease-doux);
}
.besoin::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 5px;
  background: var(--teinte, var(--c-vert));
  transition: width .3s var(--ease-doux);
}
.besoin:hover { transform: translateY(-5px); box-shadow: var(--ombre-2); }
.besoin:hover::before { width: 100%; opacity: .07; }
.besoin__ico {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--teinte) 15%, transparent);
  color: var(--teinte); margin-bottom: .5rem;
}
.besoin h3 { margin: 0; font-size: 1.55rem; letter-spacing: .02em; }
.besoin p { margin: 0; font-size: var(--fs-sm); color: var(--texte-doux); }
.besoin__ex { margin: .6rem 0 0; padding: 0; list-style: none; display: grid; gap: .18rem; }
.besoin__ex li { font-size: var(--fs-xs); color: var(--texte-doux); display: flex; gap: .4rem; }
.besoin__ex li::before { content: "›"; color: var(--teinte); font-weight: 700; }

/* ---------- EN 2 CLICS ---------- */
.grille-rapide {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
}
.rapide {
  display: grid; gap: .5rem; justify-items: center; text-align: center;
  padding: 1.4rem 1rem; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--trait);
  text-decoration: none; color: var(--texte); font-weight: 600; font-size: var(--fs-sm);
  transition: transform .28s var(--ease-doux), border-color .28s, box-shadow .28s;
}
.rapide:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--ombre-2); }
.rapide .ic {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-alt); color: var(--accent);
}
.rapide small { display: block; font-weight: 400; color: var(--texte-doux); font-size: var(--fs-xs); }

/* ---------- ACTUS / AGENDA ---------- */
.duo { display: grid; gap: clamp(1.6rem, 4vw, 3rem); grid-template-columns: 1.65fr 1fr; align-items: start; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } }

.grille-actus { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.actu { overflow: hidden; padding: 0; }
.actu__img { aspect-ratio: 16/9; background: var(--bg-alt); position: relative; overflow: hidden; }
.actu__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-doux); }
.actu:hover .actu__img img { transform: scale(1.05); }
.actu__img .tag {
  position: absolute; left: .7rem; top: .7rem;
  background: var(--c-anis); color: #2b3005; font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: .25rem .6rem; border-radius: var(--r-pill);
}
.actu__txt { padding: 1.1rem 1.2rem 1.3rem; }
.actu__txt h3 { font-size: 1.3rem; margin-bottom: .3rem; }
.actu__txt p { font-size: var(--fs-sm); color: var(--texte-doux); margin: 0; }
.actu__date { font-size: var(--fs-xs); color: var(--texte-doux); letter-spacing: .06em; text-transform: uppercase; }

.agenda { display: grid; gap: .55rem; }
.event {
  display: flex; gap: .9rem; align-items: center;
  padding: .85rem 1rem; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--trait);
  text-decoration: none; color: var(--texte);
  transition: border-color .25s, transform .25s var(--ease-doux);
}
.event:hover { border-color: var(--accent); transform: translateX(4px); }
.event__date {
  flex: none; width: 52px; text-align: center; line-height: 1;
  padding: .45rem 0; border-radius: 10px;
  background: var(--c-vert); color: #fff;
}
.event__date b { display: block; font-family: var(--f-titre); font-size: 1.5rem; }
.event__date span { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.event__txt strong { display: block; font-size: var(--fs-sm); font-weight: 600; }
.event__txt small { color: var(--texte-doux); font-size: var(--fs-xs); }

/* ---------- LIEUX / ÉTABLISSEMENTS ---------- */
.grille-lieux { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.lieu {
  position: relative; min-height: 260px; overflow: hidden;
  border-radius: var(--r-lg); display: flex; align-items: flex-end;
  padding: 1.3rem; text-decoration: none; color: #fff;
  background: var(--fond, var(--c-vert));
  box-shadow: var(--ombre-1);
  transition: transform .35s var(--ease-doux), box-shadow .35s;
}
.lieu::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,26,22,0) 30%, rgba(10,26,22,.82) 100%);
}
.lieu > * { position: relative; z-index: 2; }
.lieu:hover { transform: translateY(-6px); box-shadow: var(--ombre-2); }
.lieu h3 { margin: 0; font-size: 1.7rem; }
.lieu small { display: block; opacity: .8; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; }
.lieu--ccas { --fond: linear-gradient(150deg, #17322b, #2d5f4e); }
.lieu__deco { position: absolute; right: -14%; top: -10%; width: 62%; opacity: .22; z-index: 1; }

/* ---------- INFOS PRATIQUES / PIED ---------- */
.pied {
  background: var(--c-vert-950); color: rgba(255,255,255,.78);
  padding: var(--sp-6) 0 var(--sp-4); margin-top: 0;
}
.pied a { color: rgba(255,255,255,.78); text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied__grille { display: grid; gap: 2rem; grid-template-columns: 1.3fr repeat(3, 1fr); }
@media (max-width: 860px) { .pied__grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pied__grille { grid-template-columns: 1fr; } }
.pied h3 {
  color: var(--c-anis); font-size: 1.15rem; letter-spacing: .1em; margin-bottom: .8rem;
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: var(--fs-sm); }
.pied__logo { height: 92px; width: auto; margin-bottom: 1rem; border-radius: 14px; }

/* --- Réseaux sociaux dans le pied --- */
.reseaux-pied { display: grid; gap: .5rem; }
.reseau-ligne {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .7rem; border-radius: var(--r-md);
  background: rgba(255,255,255,.06);
  text-decoration: none; color: #fff;
  transition: background-color .25s, transform .25s var(--ease-doux);
}
.reseau-ligne:hover { background: var(--marque, rgba(255,255,255,.16)); transform: translateX(4px); text-decoration: none; }
.reseau-ligne .rond {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--marque, #fff); color: #fff;
}
.reseau-ligne b { display: block; font-size: var(--fs-sm); font-weight: 600; }
.reseau-ligne small { color: rgba(255,255,255,.6); font-size: var(--fs-xs); }
.pied__bas {
  margin-top: var(--sp-5); padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; gap: 1rem; flex-wrap: wrap; font-size: var(--fs-xs);
}
.pied__bas .droite { margin-left: auto; display: flex; gap: 1rem; }


.demarche {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center;
  padding: 1.1rem 1.3rem; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--trait);
  text-decoration: none; color: var(--texte);
  transition: border-color .25s, transform .25s var(--ease-doux), box-shadow .25s;
}
.demarche:hover { border-color: var(--accent); transform: translateX(5px); box-shadow: var(--ombre-1); }
.demarche__n {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-alt); color: var(--accent); font-family: var(--f-titre); font-size: 1.15rem;
}
.demarche strong { display: block; font-weight: 600; }
.demarche small { color: var(--texte-doux); font-size: var(--fs-xs); }
.demarche .marq {
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .22rem .55rem; border-radius: var(--r-pill);
  background: var(--c-anis); color: #2b3005;
}
.demarche .marq--ext { background: var(--c-bleu-100); color: var(--c-bleu-700); }
.liste-demarches { display: grid; gap: .6rem; }

/* ---------- ESPACE CCAS : on change de maison ---------- */
.vue--ccas { min-height: 100svh; }
.ccas-entete {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(239,177,66,.28), transparent 55%),
    linear-gradient(160deg, #17322b, #23483f 60%, #2f5d4b);
  color: #fff;
  padding: clamp(2.5rem, 7vh, 5rem) 0 clamp(3rem, 8vh, 5.5rem);
}
.ccas-entete::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 70px;
  background: var(--bg);
  clip-path: ellipse(72% 100% at 50% 100%);
}
.ccas-retour {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.75); text-decoration: none;
  padding: .4rem .9rem .4rem .6rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  transition: background-color .25s;
}
.ccas-retour:hover { background: rgba(255,255,255,.2); }
.ccas-marque { display: flex; align-items: center; gap: 1.1rem; margin: 1.8rem 0 1rem; flex-wrap: wrap; }
.ccas-sceau {
  width: 78px; height: 78px; border-radius: 22px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--c-orange), #e08a3c);
  color: #2c2408; font-family: var(--f-titre); font-size: 1.9rem; letter-spacing: .04em;
  box-shadow: 0 14px 30px rgba(0,0,0,.3);
}
.ccas-marque h1 { margin: 0; font-size: clamp(2.4rem, 6vw, 4rem); color: #fff; }
.ccas-marque p { margin: 0; color: rgba(255,255,255,.75); font-size: var(--fs-sm); letter-spacing: .1em; text-transform: uppercase; }

.ccas-sites { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 2rem; }
.ccas-site {
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg); padding: 1.1rem 1.2rem;
}
.ccas-site b { display: block; font-family: var(--f-titre); font-size: 1.35rem; letter-spacing: .03em; color: var(--c-anis); }
.ccas-site span { font-size: var(--fs-sm); color: rgba(255,255,255,.82); }

.vue--ccas .section { background: var(--bg); }
.vue--ccas .carte, .vue--ccas .demarche, .vue--ccas .rapide, .vue--ccas .besoin {
  background: var(--surface); border-color: var(--trait); color: var(--texte);
}
.vue--ccas .besoin__ico { background: color-mix(in srgb, var(--teinte) 22%, transparent); }

/* ---------- DIVERS ---------- */
.mesure { max-width: var(--largeur-texte); }
.encart {
  border-left: 4px solid var(--accent-vif);
  background: var(--bg-alt); border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 1.1rem 1.3rem; margin: 1.4rem 0;
}
.encart p:last-child { margin-bottom: 0; }

/* Le retour en haut vit dans le coin GAUCHE : à droite, l'assistant
   flottant le recouvrait (il est à z-index 700, on ne gagne pas cette
   bataille-là — autant ne pas la livrer). Sa couleur suit l'univers :
   vert commune sur le site de la Ville, bleu pétrole au CCAS. */
.bouton-haut {
  position: fixed; left: clamp(.8rem, 2vw, 1.6rem); right: auto;
  bottom: clamp(.8rem, 2vw, 1.6rem); z-index: 690;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent); color: #fff; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, .92);
  display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(12, 40, 32, .34);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .3s, transform .3s, background-color .3s, border-color .3s;
}
.bouton-haut.visible { opacity: 1; transform: none; pointer-events: auto; }
.bouton-haut:hover { transform: translateY(-3px); }
.bouton-haut:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* L'anneau anis : le même signe que sur la tête de l'assistant côté CCAS. */
[data-univers="ccas"] .bouton-haut {
  background: var(--ccas-bleu);
  border-color: var(--ccas-anis);
  box-shadow: 0 10px 26px rgba(2, 61, 80, .38);
}
[data-univers="ccas"] .bouton-haut:hover { background: var(--ccas-bleu-800); }

/* ---------- REPLI SANS JAVASCRIPT ---------- */
.sans-js { display: none; padding: clamp(2rem, 7vh, 4.5rem) 0; background: var(--bg); }
.sans-js__logo { width: clamp(100px, 16vw, 150px); border-radius: 14px; margin-bottom: 1.4rem; }
.sans-js h1 { color: var(--c-vert); }
.sans-js__mot { max-width: 54ch; color: var(--texte-doux); font-size: var(--fs-md); }
.sans-js__grille {
  display: grid; gap: 1rem; margin: 2rem 0;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.sans-js__grille > div {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: var(--r-lg); padding: 1.2rem 1.3rem;
}
.sans-js__grille h2 { font-size: 1.5rem; color: var(--c-vert); }
.sans-js__grille p { margin: 0; font-size: var(--fs-sm); line-height: 1.7; }
.sans-js a { color: var(--c-vert); }

/* ---------- Les résultats de recherche ---------- */
.recherche-retour {
  margin-top: .9rem; padding: .9rem 1.1rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--ombre-1);
  text-align: left; color: var(--c-encre);
}
.rech-compte {
  margin: 0 0 .5rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-bleu);
}
.rech-vide { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--c-encre-70); }
.rech-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.rech-liste a {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  padding: .5rem .6rem; border-radius: 9px;
  text-decoration: none; color: inherit;
  transition: background-color .15s;
}
.rech-liste a:hover { background: var(--c-vert-50); }
.rech-liste b { font-size: .98rem; }
.rech-liste small {
  font-size: .72rem; color: var(--c-encre-70);
  padding: .1rem .45rem; border-radius: 999px; background: var(--c-vert-100);
}

/* =========================================================
   LE MENU DÉPLIANT
   Au-dessus de 980 px la navigation tient sur une ligne. En
   dessous, elle devient un panneau : la rangée défilante qu'on
   avait cachait les trois quarts du site derrière un geste que
   rien n'annonçait, et le site a maintenant seize entrées.
   ========================================================= */
.entete__burger {
  display: none; position: relative;
  width: 44px; height: 44px; flex: none;
  border-radius: 12px; border: 1px solid var(--trait);
  background: var(--surface); cursor: pointer;
}
.entete__burger span {
  position: absolute; left: 12px; width: 20px; height: 2px;
  background: var(--texte); border-radius: 2px;
  transition: transform .22s var(--ease-doux), opacity .18s;
}
.entete__burger span:nth-child(1) { top: 15px; }
.entete__burger span:nth-child(2) { top: 21px; }
.entete__burger span:nth-child(3) { top: 27px; }
.entete__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.entete__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.entete__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 980px) {
  .entete__burger { display: block; order: 3; margin-left: auto; }
  .entete__outils { order: 2; margin-left: auto; }

  /* Le panneau : il descend sous l'en-tête et prend toute la largeur.
     `display:none` quand il est fermé, pour qu'il ne soit pas
     atteignable au clavier ni lu par un lecteur d'écran. */
  .entete__nav {
    display: none; order: 4; width: 100%;
    flex-direction: column; gap: .1rem;
    margin: .5rem 0 .6rem; padding-top: .6rem;
    border-top: 1px solid var(--trait);
    max-height: min(62svh, 520px); overflow-y: auto;
  }
  .entete__nav.ouvert { display: flex; }
  .entete__nav a {
    padding: .72rem .9rem; border-radius: 10px;
    font-size: 1rem; font-weight: 600; color: var(--texte);
  }
  .entete__nav a[aria-current="page"] { background: var(--bg-alt); color: var(--accent); }
}

@media (max-width: 640px) {
  /* Le bouton « Visite guidée » prend trop de place à côté du menu :
     on ne garde que la loupe et le menu. */
  .entete__outils .btn span { display: none; }
  .entete__outils .btn { padding: .5rem .7rem; }
}