#decheteries, #voirie, #meteo, #devis-rapide { scroll-margin-top: 90px; }

.ville-main > .ancrages { order: -1; }

.ancrages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm, 8px);
    margin: calc(-1 * var(--space-2xl, 44px) + var(--space-md, 16px)) 0 var(--space-2xl, 44px);
}
.ancrage {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--border, #E8E0E4);
    border-radius: var(--radius, 10px);
    text-decoration: none;
    color: var(--text, #21161B);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.25;
    transition: border-color .2s, background .2s;
}
.ancrage:hover { border-color: var(--primary, #7A1A45); background: var(--accent, #F3E9ED); color: var(--primary, #7A1A45); }
.ancrage svg { flex-shrink: 0; color: var(--primary, #7A1A45); }
.ancrage small { display: block; font-weight: 400; color: var(--text-muted, #6E5F66); font-size: .78rem; margin-top: 2px; }

.dech-intro { color: var(--text-muted, #6E5F66); }
.dech-liste { list-style: none; padding: 0; margin: var(--space-lg, 24px) 0 0; display: flex; flex-direction: column; gap: var(--space-md, 16px); }
.dech-item {
    background: #fff;
    border: 1px solid var(--border, #E8E0E4);
    border-radius: var(--radius, 10px);
    padding: var(--space-md, 16px) var(--space-lg, 24px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px var(--space-md, 16px);
}
.dech-item.dech-droit { border-left: 4px solid var(--success, #0A7F57); }
.dech-item.dech-verif { border-left: 4px solid var(--warning, #EE651C); }
.dech-titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.dech-titre h3 { margin: 0; font-size: 1.05rem; }
.dech-km { font-size: .88rem; color: var(--text-muted, #6E5F66); white-space: nowrap; }
.dech-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .76rem; font-weight: 700; letter-spacing: .01em;
    padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.dech-droit .dech-badge { background: #E3F4EC; color: #08633F; }
.dech-verif .dech-badge { background: #FDEBDD; color: #9A3E0F; }
.dech-adresse, .dech-horaires, .dech-collectivite { margin: 0; font-size: .88rem; color: var(--text-muted, #6E5F66); grid-column: 1 / -1; }
.dech-adresse strong { color: var(--text, #21161B); font-weight: 600; }
/* CORR2 — exceptions du règlement de la Métropole (lib/decheteries-exceptions.php) : notes sur toute la largeur de la
   carte ; badge porteur d'une réserve sur sa propre ligne, retour à la ligne permis (sinon il écrase le titre en 360 px). */
.dech-exception { grid-column: 1 / -1; margin: 0; font-size: .88rem; font-weight: 600; color: #9A3E0F; }
.dech-exception small { font-weight: 400; color: var(--text-muted, #6E5F66); }
.dech-badge.dech-badge-reserve { grid-column: 1 / -1; justify-self: start; white-space: normal; }
.dech-flux { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.dech-flux span {
    font-size: .76rem; padding: 2px 8px; border-radius: 6px;
    background: var(--bg-light, #F9F6F7); border: 1px solid var(--border, #E8E0E4); color: var(--text, #21161B);
}
.dech-flux .dech-flux-plus { background: transparent; border-style: dashed; color: var(--text-muted, #6E5F66); }
.dech-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.dech-actions a {
    font-size: .84rem; font-weight: 600; text-decoration: none;
    padding: 6px 12px; border-radius: 8px;
    border: 1px solid var(--primary, #7A1A45); color: var(--primary, #7A1A45);
}
.dech-actions a:hover { background: var(--primary, #7A1A45); color: #fff; }
.dech-legende { margin-top: var(--space-md, 16px); font-size: .82rem; color: var(--text-muted, #6E5F66); }
.dech-sources { margin-top: 6px; font-size: .76rem; color: var(--text-muted, #6E5F66); }

.dech-bascule {
    margin-top: var(--space-lg, 24px);
    padding: var(--space-lg, 24px);
    background: var(--primary-light, #ECDFE5);
    border-radius: var(--radius, 10px);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md, 16px);
}
.dech-bascule p { margin: 0; font-size: .95rem; max-width: 62ch; }
.dech-bascule .btn { white-space: nowrap; }

.mairie-encart {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px var(--space-lg, 24px);
    margin-top: var(--space-sm, 8px);
    font-size: .9rem;
}
.mairie-encart > div { display: flex; gap: 8px; align-items: flex-start; }
.mairie-encart svg { flex-shrink: 0; margin-top: 2px; color: var(--primary, #7A1A45); }
.mairie-encart a { color: var(--primary, #7A1A45); font-weight: 600; text-decoration: none; word-break: break-word; }
.mairie-encart a:hover { text-decoration: underline; }
.mairie-horaires { grid-column: 1 / -1; }
.mairie-horaires ul { list-style: none; padding: 0; margin: 2px 0 0; color: var(--text-muted, #6E5F66); font-size: .86rem; }

@media (max-width: 720px) {
    .ancrages { grid-template-columns: 1fr; margin-top: calc(-1 * var(--space-2xl, 44px) + var(--space-sm, 8px)); }
    .dech-item { padding: var(--space-md, 16px); }
    .mairie-encart { grid-template-columns: 1fr; }
    .dech-bascule .btn { width: 100%; justify-content: center; }
}

.dech-item[hidden], .dech-outils[hidden], .dech-liste[hidden], .dech-carte[hidden], .dech-vide[hidden] { display: none !important; }

.voisin-card { flex-direction: row; align-items: flex-start; justify-content: flex-start; text-align: left; gap: 8px; padding: 10px 16px; }
.voisin-card svg { margin-top: 3px; }
.voisin-txt { display: flex; flex-direction: column; gap: 1px; }
.voisin-km, .voisin-dech { font-size: .78rem; color: var(--text-muted, #6E5F66); }

.estim { grid-column: 1 / -1; font-size: .88rem; }
.estim > summary { cursor: pointer; color: var(--primary, #7A1A45); font-weight: 600; width: fit-content; }
.estim > summary:focus-visible { outline: 2px solid var(--primary, #7A1A45); outline-offset: 2px; }
.estim-corps { margin-top: 8px; padding: var(--space-md, 16px); background: var(--accent, #F3E9ED); border-radius: var(--radius-sm, 8px); }
.estim-aide, .estim-note { margin: 0 0 8px; color: var(--text-muted, #6E5F66); font-size: .82rem; }
.estim-note { margin: 8px 0 0; font-size: .76rem; }
.estim-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
.estim-cases label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.estim-cases input { margin-top: 3px; accent-color: var(--primary, #7A1A45); }
.estim-cases small { display: block; color: var(--text-muted, #6E5F66); font-size: .76rem; }
.estim-resultat { margin: 10px 0 0; font-weight: 600; color: var(--primary-dark, #571231); }
.estim-appliquer { margin-top: 8px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--primary, #7A1A45); background: #fff; color: var(--primary, #7A1A45); font-weight: 600; cursor: pointer; }
.bascule-table, .grille-table { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: var(--space-md, 16px); }
.bascule-table th, .bascule-table td, .grille-table th, .grille-table td { padding: 8px 10px; border-bottom: 1px solid var(--border, #E5DDE0); text-align: left; vertical-align: top; }
.bascule-table thead th, .grille-table thead th { font-size: .78rem; color: var(--text-muted, #6E5F66); font-weight: 600; }
.bascule-table tr[hidden] { display: none; }
.bascule-votre { background: var(--accent, #F3E9ED); }
.verdict-benne { color: var(--secondary-dark, #C14D0F); font-weight: 600; }
.verdict-decheterie { color: var(--success, #0A7F57); font-weight: 600; }
.tableau-defile { overflow-x: auto; }
.bascule-seuil { margin-top: var(--space-md, 16px); padding: var(--space-md, 16px); border-left: 4px solid var(--secondary, #EE651C); background: var(--bg-light, #F9F7F8); }
@media (max-width: 720px) {
    .estim-cases { grid-template-columns: 1fr; }
    .bascule-table, .grille-table { font-size: .82rem; }
    .bascule-table th, .bascule-table td, .grille-table th, .grille-table td { padding: 6px; }
}
.bascule-table caption, .grille-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bascule-regles { margin: var(--space-sm, 8px) 0 0; padding-left: 1.2em; font-size: .9rem; }
.prix-renvoi { display: block; margin-top: var(--space-lg, 24px); padding: 12px 16px; border: 1px solid var(--secondary, #EE651C); border-radius: var(--radius, 10px); color: var(--secondary-dark, #C14D0F); font-weight: 600; font-size: .9rem; text-decoration: none; }
.grille-table td small, .grille-table th small { color: var(--text-muted, #6E5F66); font-weight: 400; }

html:not(.js-reveal) .reveal-on-scroll {
  opacity: 1;
  transform: none;
  transition: none;
}

html:not(.js-reveal) .faq-answer {
  max-height: none;
}

/* Révélation au défilement : seuls les blocs hors de la fenêtre au chargement portent
   .reveal-attente et attendent leur arrivée ; les autres restent visibles d'emblée, sans fondu. */
.reveal-on-scroll:not(.reveal-attente) {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Illustrations des étapes : elles se réduisent sur petit écran au lieu d'élargir la page. */
.how-section > * { min-width: 0; }
.how-visual svg { max-width: 100%; height: auto; }
.prixbloc-cartes { list-style: none; margin: var(--space-md, 16px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md, 16px); }
.prixbloc-carte { background: var(--bg-light, #F8F5F6); border: 1px solid var(--border, #E5DDE0); border-radius: var(--radius, 10px); padding: var(--space-lg, 24px) var(--space-md, 16px); }
.prixbloc-carte h3 { margin: 0; font-size: 1.1rem; color: var(--primary, #7A1A45); }
.prixbloc-carte h3 small { display: block; margin-top: 2px; font-size: .82rem; font-weight: 400; color: var(--text-muted, #6E5F66); }
.prixbloc-prix { margin: var(--space-sm, 8px) 0 0; font-size: 1.35rem; }
.prixbloc-prix small { display: block; font-size: .76rem; color: var(--text-muted, #6E5F66); }
.prixbloc-pour { margin: var(--space-sm, 8px) 0 0; font-size: .82rem; color: var(--text-muted, #6E5F66); }
.prixbloc-usages { margin: 4px 0 0; padding-left: 1.1em; font-size: .9rem; }
.prixbloc-usages li { margin: 2px 0; }
.prixbloc-sous-titre { margin-top: var(--space-lg, 24px); font-size: 1.05rem; }
.prixbloc-conseils { margin: var(--space-sm, 8px) 0 0; padding-left: 1.1em; font-size: .92rem; }
.prixbloc-conseils li { margin: 6px 0; }
.prixbloc-detail { margin-top: var(--space-md, 16px); }
.prixbloc-detail > summary { cursor: pointer; color: var(--primary, #7A1A45); font-weight: 600; font-size: .9rem; }
.prixbloc-detail > summary:focus-visible { outline: 2px solid var(--primary, #7A1A45); outline-offset: 2px; }
.prixbloc-suite { margin-top: var(--space-md, 16px); font-weight: 600; }
.prixbloc-note { margin: var(--space-sm, 8px) 0 0; font-size: .82rem; color: var(--text-muted, #6E5F66); }

/* ── Lot reorg (22/09) ─────────────────────────────────────────────────────────
   Ordre à l'écran des pages communes : formulaire et encarts (`order:-1`), puis l'intro SEO, le bloc
   prix, les déchets acceptés, les déchèteries et la suite — dans l'ordre du HTML, sans autre `order`. */
#prix { scroll-margin-top: 90px; }
/* Ligne de budget sous les champs du formulaire de devis. */
.budget-indicatif { margin: var(--space-md, 14px) 0 0; font-size: .88rem; color: var(--text, #21161B); }
.budget-indicatif a, .budget-taille { white-space: nowrap; }
.budget-indicatif a { font-weight: 600; }
/* Anciens H4 devenus H3 (hiérarchie) : même rendu qu'un h4 de styles.css. */
.ville-main h3.titre-h4 { font-size: 1.1rem; font-weight: 700; }
/* Intitulés du pied de page : plus des titres de contenu, même rendu que .site-footer h3. */
.site-footer .footer-titre { font-family: var(--font-heading); line-height: 1.2; color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: var(--space-lg); }

/* ── Formulaires sur téléphone (23/09) ─────────────────────────────────────────
   Sous 1024 px seulement (blanc : 768 px et moins) : au-delà, rendu inchangé.
   1. Champ date : Safari iOS lui impose sa largeur native, qui dépasse la carte. On retire l'apparence
      native et on le ramène à la largeur du champ, à la hauteur des autres champs, valeur alignée à gauche.
   2. Boutons : le libellé passe à la ligne au lieu de sortir du bouton ; marge intérieure du grand
      bouton réduite pour garder deux lignes au plus en 360 px.
   3. Blanc au-dessus du formulaire : la section du formulaire qui suit le bandeau démarre à 32 px (au lieu
      de 96), et les garanties de /devis sont suivies de 24 px (au lieu de 64). Navigateurs sans :has() :
      espacement d'origine. */
@media (max-width: 1023.98px) {
  input.form-control[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 3.125rem;
    text-align: left;
  }
  input.form-control[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }

  a.btn, button.btn { white-space: normal; text-align: center; }
  a.btn > svg, button.btn > svg { flex-shrink: 0; }
  button.btn.btn-lg { padding: 16px 20px; }
}
@media (max-width: 768px) {
  .page-hero + .section:has(.devis-form-card), .ville-hero + .section:has(.devis-inline) { padding-top: 32px; }
  .page-hero + .section:has(.devis-form-card) div:has(> .trust-item) { --space-2xl: 24px; }
}