#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, #E1E1E5);
    border-radius: var(--radius, 10px);
    text-decoration: none;
    color: var(--text, #19181F);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.25;
    transition: border-color .2s, background .2s;
}
.ancrage:hover { border-color: var(--primary, #2E2A5C); background: var(--accent, #EBEAF0); color: var(--primary, #2E2A5C); }
.ancrage svg { flex-shrink: 0; color: var(--primary, #2E2A5C); }
.ancrage small { display: block; font-weight: 400; color: var(--text-muted, #63626B); font-size: .78rem; margin-top: 2px; }

.dech-intro { color: var(--text-muted, #63626B); }
.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, #E1E1E5);
    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, #EF6A4B); }
.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, #63626B); 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, #63626B); grid-column: 1 / -1; }
.dech-adresse strong { color: var(--text, #19181F); font-weight: 700; }
/* Note propre à une déchèterie : sur toute la largeur de la carte ; badge à réserve sur sa propre ligne, retour à la ligne permis. */
.dech-exception { grid-column: 1 / -1; margin: 0; font-size: .88rem; font-weight: 700; color: #9A3E0F; }
.dech-exception small { font-weight: 400; color: var(--text-muted, #63626B); }
.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, #F6F6F8); border: 1px solid var(--border, #E1E1E5); color: var(--text, #19181F);
}
.dech-flux .dech-flux-plus { background: transparent; border-style: dashed; color: var(--text-muted, #63626B); }
.dech-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.dech-actions a {
    font-size: .84rem; font-weight: 700; text-decoration: none;
    padding: 6px 12px; border-radius: 8px;
    border: 1px solid var(--primary, #2E2A5C); color: var(--primary, #2E2A5C);
}
.dech-actions a:hover { background: var(--primary, #2E2A5C); color: #fff; }
.dech-legende { margin-top: var(--space-md, 16px); font-size: .82rem; color: var(--text-muted, #63626B); }
.dech-sources { margin-top: 6px; font-size: .76rem; color: var(--text-muted, #63626B); }

.dech-bascule {
    margin-top: var(--space-lg, 24px);
    padding: var(--space-lg, 24px);
    background: var(--primary-light, #E2E1E9);
    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, #2E2A5C); }
.mairie-encart a { color: var(--primary, #2E2A5C); font-weight: 700; 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, #63626B); 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, #63626B); }

.estim { grid-column: 1 / -1; font-size: .88rem; }
.estim > summary { cursor: pointer; color: var(--primary, #2E2A5C); font-weight: 700; width: fit-content; }
.estim > summary:focus-visible { outline: 2px solid var(--primary, #2E2A5C); outline-offset: 2px; }
.estim-corps { margin-top: 8px; padding: var(--space-md, 16px); background: var(--accent, #EBEAF0); border-radius: var(--radius-sm, 8px); }
.estim-aide, .estim-note { margin: 0 0 8px; color: var(--text-muted, #63626B); 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, #2E2A5C); }
.estim-cases small { display: block; color: var(--text-muted, #63626B); font-size: .76rem; }
.estim-resultat { margin: 10px 0 0; font-weight: 700; color: var(--primary-dark, #211E42); }
.estim-appliquer { margin-top: 8px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--primary, #2E2A5C); background: #fff; color: var(--primary, #2E2A5C); font-weight: 700; 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, #DEDDE2); text-align: left; vertical-align: top; }
.bascule-table thead th, .grille-table thead th { font-size: .78rem; color: var(--text-muted, #63626B); font-weight: 700; }
.bascule-table tr[hidden] { display: none; }
.bascule-votre { background: var(--accent, #EBEAF0); }
.verdict-benne { color: var(--secondary-dark, #BF3211); font-weight: 700; }
.verdict-decheterie { color: var(--success, #0A7F57); font-weight: 700; }
.tableau-defile { overflow-x: auto; }
.bascule-seuil { margin-top: var(--space-md, 16px); padding: var(--space-md, 16px); border-left: 4px solid var(--secondary, #EF6A4B); background: var(--bg-light, #F7F7F8); }
@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, #EF6A4B); border-radius: var(--radius, 10px); color: var(--secondary-dark, #BF3211); font-weight: 700; font-size: .9rem; text-decoration: none; }
.grille-table td small, .grille-table th small { color: var(--text-muted, #63626B); 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, #F5F5F7); border: 1px solid var(--border, #DEDDE2); 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, #2E2A5C); }
.prixbloc-carte h3 small { display: block; margin-top: 2px; font-size: .82rem; font-weight: 400; color: var(--text-muted, #63626B); }
.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, #63626B); }
.prixbloc-pour { margin: var(--space-sm, 8px) 0 0; font-size: .82rem; color: var(--text-muted, #63626B); }
.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, #2E2A5C); font-weight: 700; font-size: .9rem; }
.prixbloc-detail > summary:focus-visible { outline: 2px solid var(--primary, #2E2A5C); outline-offset: 2px; }
.prixbloc-suite { margin-top: var(--space-md, 16px); font-weight: 700; }
.prixbloc-note { margin: var(--space-sm, 8px) 0 0; font-size: .82rem; color: var(--text-muted, #63626B); }

/* ── Ordre des pages communes ── Formulaire et encarts remontés à l’écran (order:-1), le texte d’introduction restant en tête du document ; rien n’est masqué. */
#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, #19181F); }
.budget-indicatif a, .budget-taille { white-space: nowrap; }
.budget-indicatif a { font-weight: 700; }
/* 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: 700; 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: 700; 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 : chiffres du hero en grille 2 × 2 sous 768 px, moins de blanc sous le hero, marges latérales de la barre de réassurance alignées sur .container. */
.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 : même retrait que les listes à puces. */
.legal-section ol { padding-left: var(--space-xl); }

/* « Lien d’aide » : un même style pour les liens qui aident à remplir la demande de devis. */
.lien-aide {
    font-weight: 700;
    color: var(--primary, #2E2A5C);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .28em;
    text-decoration-color: rgba(46,42,92,.45);
    cursor: pointer;
}
.lien-aide:hover,
.lien-aide:focus-visible {
    color: var(--primary-dark, #211E42);
    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; } }