#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, #DDE5E1);
    border-radius: var(--radius, 10px);
    text-decoration: none;
    color: var(--text, #16211E);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.25;
    transition: border-color .2s, background .2s;
}
.ancrage:hover { border-color: var(--primary, #14584A); background: var(--accent, #E7F1ED); color: var(--primary, #14584A); }
.ancrage svg { flex-shrink: 0; color: var(--primary, #14584A); }
.ancrage small { display: block; font-weight: 400; color: var(--text-muted, #5F6E69); font-size: .78rem; margin-top: 2px; }

.dech-intro { color: var(--text-muted, #5F6E69); }
.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, #DDE5E1);
    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, #E2601F); }
.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, #5F6E69); 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, #5F6E69); grid-column: 1 / -1; }
.dech-adresse strong { color: var(--text, #16211E); font-weight: 600; }
.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, #F5F8F6); border: 1px solid var(--border, #DDE5E1); color: var(--text, #16211E);
}
.dech-flux .dech-flux-plus { background: transparent; border-style: dashed; color: var(--text-muted, #5F6E69); }
.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, #14584A); color: var(--primary, #14584A);
}
.dech-actions a:hover { background: var(--primary, #14584A); color: #fff; }
.dech-legende { margin-top: var(--space-md, 16px); font-size: .82rem; color: var(--text-muted, #5F6E69); }
.dech-sources { margin-top: 6px; font-size: .76rem; color: var(--text-muted, #5F6E69); }

.dech-bascule {
    margin-top: var(--space-lg, 24px);
    padding: var(--space-lg, 24px);
    background: var(--primary-light, #DCEAE5);
    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, #14584A); }
.mairie-encart a { color: var(--primary, #14584A); 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, #5F6E69); 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, #5F6E69); }

.estim { grid-column: 1 / -1; font-size: .88rem; }
.estim > summary { cursor: pointer; color: var(--primary, #14584A); font-weight: 600; width: fit-content; }
.estim > summary:focus-visible { outline: 2px solid var(--primary, #14584A); outline-offset: 2px; }
.estim-corps { margin-top: 8px; padding: var(--space-md, 16px); background: var(--accent, #E7F1ED); border-radius: var(--radius-sm, 8px); }
.estim-aide, .estim-note { margin: 0 0 8px; color: var(--text-muted, #5F6E69); 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, #14584A); }
.estim-cases small { display: block; color: var(--text-muted, #5F6E69); font-size: .76rem; }
.estim-resultat { margin: 10px 0 0; font-weight: 600; color: var(--primary-dark, #0E3F35); }
.estim-appliquer { margin-top: 8px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--primary, #14584A); background: #fff; color: var(--primary, #14584A); 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, #D9E2DF); text-align: left; vertical-align: top; }
.bascule-table thead th, .grille-table thead th { font-size: .78rem; color: var(--text-muted, #5F6E69); font-weight: 600; }
.bascule-table tr[hidden] { display: none; }
.bascule-votre { background: var(--accent, #E7F1ED); }
.verdict-benne { color: var(--secondary-dark, #B84D18); 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, #E2601F); background: var(--bg-light, #F6F8F7); }
@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, #E2601F); border-radius: var(--radius, 10px); color: var(--secondary-dark, #B84D18); font-weight: 600; font-size: .9rem; text-decoration: none; }
.grille-table td small, .grille-table th small { color: var(--text-muted, #5F6E69); 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, #F4F7F6); border: 1px solid var(--border, #D9E2DF); 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, #14584A); }
.prixbloc-carte h3 small { display: block; margin-top: 2px; font-size: .82rem; font-weight: 400; color: var(--text-muted, #5F6E69); }
.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, #5F6E69); }
.prixbloc-pour { margin: var(--space-sm, 8px) 0 0; font-size: .82rem; color: var(--text-muted, #5F6E69); }
.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, #14584A); font-weight: 600; font-size: .9rem; }
.prixbloc-detail > summary:focus-visible { outline: 2px solid var(--primary, #14584A); 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, #5F6E69); }

/* ── 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, #16211E); }
.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; }
}

/* ── Guide /dimensions-benne (24/09) ───────────────────────────────────────────
   Composants du site réutilisés (page-hero, section-alt, alert-info, check-list, grille-table dans
   tableau-defile, mc-faq, formulaire intégré) ; seuls les ajouts propres à la page sont ici.
   Cartes blanches sur fond section-alt (le gris clair des illustrations ne tranche pas, D9) ;
   tableau lisible en 360 px : colonne Volume figée, défilement horizontal du composant existant,
   sans JavaScript. */
.page-hero .dim-intro { max-width: 760px; }
.dim-encadre { max-width: 760px; margin: 0 auto var(--space-2xl); }
.dim-encadre p + p { margin-top: var(--space-sm); }
.dim-encadre a { font-weight: 600; text-decoration: underline; }
.dim-encadre h3 { font-size: 1.1rem; color: var(--primary); margin-bottom: var(--space-sm); }
.dim-encadre-bas { margin: var(--space-2xl) auto 0; }
.dim-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
.dim-carte { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }
.dim-carte h3 { font-size: 1.25rem; color: var(--primary); }
.dim-carte img { width: 100%; height: auto; border-radius: var(--radius-sm); }
.dim-carte p { color: var(--text-muted); font-size: 1rem; }
.dim-etroit { max-width: 1000px; }
.dim-texte { color: var(--text-muted); font-size: 1.05rem; margin-top: var(--space-md); }
.dim-table { min-width: 680px; font-size: .95rem; }
.dim-table th[scope="row"], .dim-table thead th:first-child { position: sticky; left: 0; z-index: 1; background: #fff; white-space: nowrap; }
.dim-table th[scope="row"] { font-weight: 700; color: var(--primary); }
.dim-table .dim-absente { color: var(--text-muted); font-style: italic; }
.dim-table thead th small { display: block; font-size: .72rem; }
.dim-note { margin-top: var(--space-lg); padding: var(--space-md); border-left: 4px solid var(--secondary); background: var(--bg-light); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.dim-controles { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); }
.dim-controle { background: var(--bg-light); border: 1px solid var(--border); border-top: 4px solid var(--secondary); border-radius: var(--radius); padding: var(--space-lg); }
.dim-controle h3 { font-size: 1.15rem; margin: var(--space-md) 0 var(--space-sm); }
.dim-controle p { color: var(--text-muted); font-size: 1rem; }
.dim-carte .dim-repere, .dim-controle .dim-repere { margin-top: var(--space-sm); font-size: 0.95rem; }
.dim-picto { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--primary-light); color: var(--primary); }
.devis-inline-head .dim-form-intro { margin: 0 0 var(--space-sm); color: var(--text); font-size: 1rem; }
.dim-liens-form { margin-top: var(--space-sm); text-align: center; font-size: .95rem; color: var(--text-muted); }
.devis-inline + .dim-liens-form { margin-top: calc(-1 * var(--space-xl)); }
.dim-liens-form a { font-weight: 600; text-decoration: underline; }
@media (max-width: 1024px) {
  .dim-controles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .dim-cartes { grid-template-columns: 1fr; gap: var(--space-lg); }
  .dim-carte, .dim-controle { padding: var(--space-md); }
  .dim-table { font-size: .9rem; }
}
@media (max-width: 560px) {
  .dim-controles { grid-template-columns: 1fr; }
}

/* Accueil en mobile (lot mob71, signalement humain du 02/10, Discord msg 1555653631674425455) — corrige ici et non
   dans styles.css (réécrit par le générateur) :
   - la rangée des 4 chiffres du hero passait à 3 + 1 orphelin sous 768 px (flex-wrap) → grille 2 × 2 ;
   - 96 px de vert vide sous cette rangée (padding du hero jamais réduit en mobile) → 40 px en bas ;
   - la barre de réassurance n'a pas de .container, donc aucune marge latérale : collée au bord en colonne
     → mêmes marges que .container (24 px, 16 px sous 768 px). */
.trust-bar-inner { padding-inline: var(--space-lg); }
@media (max-width: 768px) {
  .hero { padding-bottom: var(--space-xl); }
  .hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
  .trust-bar-inner { padding-inline: var(--space-md); }
}

/* Listes numérotées des pages éditoriales (lot listmob, 03/10) : même retrait que les listes à puces (styles.css:1233).
   La remise à zéro de styles.css:48 leur retirait tout retrait : les numéros sortaient de la colonne de texte et étaient
   rognés au bord gauche de l'écran sur téléphone (/methodologie, « en 4 temps »). */
.legal-section ol { padding-left: var(--space-xl); }

/* Lot form71 (22/10/2026) — « lien d'aide » : UN style pour les trois liens qui aident à remplir le devis
   (« Je ne sais pas estimer → aidez-moi », « Le détail : poids… » = dépliants ; « Quelle taille pour quel chantier ? » =
   lien qui descend vers les prix). Gras conservé ; soulignement fin et décalé dans le vert du site, plein au survol ;
   en début de ligne, un signe dessiné par le site : chevron qui pivote à l'ouverture (dépliant), flèche vers le bas (lien).
   Addendum 1 (22/10) : « Dimensions des bennes et espace nécessaire au camion » (accueil, bloc prix des communes) prend
   le même style ; il mène à une autre page : flèche vers la droite. */
.lien-aide {
    font-weight: 600;
    color: var(--primary, #14584A);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .28em;
    text-decoration-color: rgba(20, 88, 74, .45);
    cursor: pointer;
}
.lien-aide:hover,
.lien-aide:focus-visible {
    color: var(--primary-dark, #0E3F35);
    text-decoration-thickness: 2px;
    text-decoration-color: currentColor;
}
summary.lien-aide { list-style: none; display: block; width: fit-content; }
summary.lien-aide::-webkit-details-marker { display: none; }
.lien-aide::before {
    content: '';
    display: inline-block;
    width: .8em;
    height: .8em;
    margin-right: .4em;
    vertical-align: -.08em;
    background-color: currentColor;
    -webkit-mask: var(--lien-aide-signe) center / contain no-repeat;
    mask: var(--lien-aide-signe) center / contain no-repeat;
    transition: transform .2s ease;
}
.lien-aide-depli { --lien-aide-signe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 2.5 11 8l-5.5 5.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lien-aide-bas   { --lien-aide-signe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v11M3.5 8.5 8 13l4.5-4.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lien-aide-page { --lien-aide-signe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
details[open] > summary.lien-aide-depli::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .lien-aide::before { transition: none; } }