/* ==========================================================================
   PBS SERVICES - Feuille principale
   Chargée sans bloquer le rendu. Le premier écran est déjà couvert par
   critical.css, injecté en ligne.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Rythme des sections et titres
   -------------------------------------------------------------------------- */

.pbs-services,
.pbs-deroule,
.pbs-zones,
.pbs-faq,
.pbs-contact,
.pbs-section-avis,
.pbs-maillage,
.pbs-pilier__communes {
  padding-block: clamp(3rem, 8vw, 5.5rem);
}

.pbs-titre-section {
  font-size: clamp(1.625rem, 4vw, 2.5rem);
  letter-spacing: -.025em;
  max-width: 22ch;
}

/* Suréligne. Volontairement rare : deux occurrences sur toute la page
   d'accueil, jamais une au-dessus de chaque section. */
.pbs-eyebrow {
  font-family: var(--f-titre);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--c-brand);
  margin-bottom: .625rem;
}

.pbs-prose { max-width: 68ch; }
.pbs-prose p,
.pbs-prose ul,
.pbs-prose ol { margin-block: 0 1.125rem; }
.pbs-prose h2 { font-size: 1.5rem; margin-block: 2.25rem .75rem; }
.pbs-prose h3 { font-size: 1.1875rem; margin-block: 1.75rem .5rem; }
.pbs-prose ul { list-style: disc; padding-inline-start: 1.25rem; }
.pbs-prose ol { list-style: decimal; padding-inline-start: 1.25rem; }
.pbs-prose li { margin-bottom: .375rem; }
.pbs-prose img { border-radius: var(--r-container); margin-block: 1.5rem; }

.pbs-lecture {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* --------------------------------------------------------------------------
   2. Grille bento des services
   Cinq cellules pour cinq services. Aucune cellule vide, aucune carte
   identique répétée : les tailles portent la hiérarchie commerciale.
   -------------------------------------------------------------------------- */

.pbs-bento {
  margin-top: 2rem;
  display: grid;
  gap: .875rem;
  grid-template-columns: 1fr;
}

.pbs-tuile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  padding: 1.375rem;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-container);
  text-decoration: none;
  color: var(--c-ink);
  overflow: hidden;
  transition: border-color .25s var(--e-inout), box-shadow .25s var(--e-out),
              transform .25s var(--e-out);
}
a.pbs-tuile:hover {
  border-color: var(--c-brand);
  box-shadow: var(--sh-3);
  transform: translateY(-2px);
  color: var(--c-ink);
}
a.pbs-tuile:active { transform: translateY(0); }

.pbs-tuile__icone { color: var(--c-brand); }
.pbs-tuile__titre { font-size: 1.25rem; }
.pbs-tuile__texte { color: var(--c-muted); font-size: .9375rem; max-width: 42ch; }

.pbs-tuile__modes { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: auto; padding-top: .5rem; }

.pbs-tuile__lien {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: .875rem;
  color: var(--c-brand-deep);
}
.pbs-tuile__fleche { transition: transform .25s var(--e-out); }
a.pbs-tuile:hover .pbs-tuile__fleche { transform: translateX(4px); }

/* La tuile urgence est la seule à porter l'accent. Fond teinté plutôt que
   plein, pour rester dans la même famille chromatique que la page. */
.pbs-tuile--urgence {
  background: linear-gradient(180deg, #FDF3F0 0%, #fff 62%);
  border-color: #F2C7B9;
}
.pbs-tuile--urgence .pbs-tuile__icone { color: var(--c-urgence); }
.pbs-tuile--urgence .pbs-tuile__lien { color: var(--c-urgence-hover); }
a.pbs-tuile--urgence:hover { border-color: var(--c-urgence); }

@media (max-width: 719px) {
  /* Sur téléphone, l'urgence passe en tête : c'est l'intention la plus
     probable d'un visiteur mobile. */
  .pbs-tuile--urg { order: -1; }
}

@media (min-width: 720px) {
  .pbs-bento {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "urg plo plo"
      "urg ser cha"
      "rid rid cha";
  }
  .pbs-tuile--urg { grid-area: urg; }
  .pbs-tuile--plo { grid-area: plo; }
  .pbs-tuile--ser { grid-area: ser; }
  .pbs-tuile--cha { grid-area: cha; }
  .pbs-tuile--rid { grid-area: rid; }

  .pbs-tuile--urg .pbs-tuile__titre,
  .pbs-tuile--cha .pbs-tuile__titre { font-size: 1.5rem; }
  .pbs-tuile--urg { padding: 1.75rem; }
}

.pbs-pastille {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  padding: .3125rem .6875rem;
  background: var(--c-blue-50);
  border: 1px solid var(--c-blue-100);
  border-radius: var(--r-interactive);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--c-brand-deep);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   2 bis. Bandeau défilant des situations subies
   Défilement en CSS pur. Il s'arrête au survol et à la mise au point
   clavier, et il est purement et simplement supprimé si le visiteur a
   demandé la réduction des animations. C'est le seul bandeau défilant du
   site : deux se liraient comme du remplissage.
   -------------------------------------------------------------------------- */

.pbs-problemes {
  padding-block: clamp(2.5rem, 7vw, 4.5rem);
  overflow: hidden;
  border-bottom: 1px solid var(--c-line);
}

.pbs-problemes__titre { margin-bottom: 1.25rem; }
.pbs-problemes__fini {
  display: inline-block;
  font-size: clamp(2rem, 6vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--c-ink);
}
/* Le point de suspension typographique, jamais trois points. */
.pbs-problemes__fini::after { content: '…'; color: var(--c-urgence); }

.pbs-ruban {
  display: flex;
  gap: 0;
  width: max-content;
  margin-block: 0 clamp(1.75rem, 5vw, 2.75rem);
  /* Le ruban est deux fois plus large que son contenu visible : la seconde
     piste prend le relais quand la première sort de l'écran. */
  animation: pbs-defile 46s linear infinite;
}
.pbs-ruban:hover,
.pbs-ruban:focus-within { animation-play-state: paused; }

.pbs-ruban__piste { display: flex; align-items: center; }

.pbs-ruban__item {
  display: flex;
  align-items: center;
  padding-inline: clamp(1rem, 3vw, 2rem);
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: clamp(1.0625rem, 2.6vw, 1.5rem);
  color: var(--c-muted);
  white-space: nowrap;
}
/* Séparateur dessiné, pas un caractère : il ne sera pas lu à voix haute. */
.pbs-ruban__item::after {
  content: '';
  width: 6px; height: 6px;
  margin-inline-start: clamp(1rem, 3vw, 2rem);
  border-radius: 50%;
  background: var(--c-urgence);
  opacity: .55;
}

@keyframes pbs-defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.pbs-problemes__bascule {
  display: grid;
  gap: 1.5rem;
  padding-top: clamp(1.5rem, 4vw, 2.25rem);
  border-top: 1px solid var(--c-line);
}
.pbs-problemes__phrase {
  font-size: clamp(1.125rem, 2.8vw, 1.5rem);
  font-family: var(--f-titre);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.015em;
  max-width: 44ch;
}
.pbs-problemes__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

@media (min-width: 900px) {
  .pbs-problemes__bascule {
    grid-template-columns: 1.3fr auto;
    align-items: center;
    gap: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Plus de défilement : le ruban devient une liste qui passe à la ligne. */
  .pbs-ruban {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    padding-inline: var(--gouttiere);
  }
  .pbs-ruban__piste { flex-wrap: wrap; }
  .pbs-ruban__piste[aria-hidden="true"] { display: none; }
  .pbs-ruban__item { padding-inline: 0 1.25rem; }
}

/* --------------------------------------------------------------------------
   2 ter. « Comment ça se passe », en onglets
   Sans JavaScript, les quatre panneaux s'empilent avec leur titre et la
   barre d'onglets disparaît : le contenu reste entièrement lisible.
   -------------------------------------------------------------------------- */

.pbs-comment { padding-block: clamp(3rem, 8vw, 5.5rem); background: var(--c-sand); }
.pbs-comment__intro { margin-block: .875rem 2rem; color: var(--c-muted); max-width: 56ch; }

/* La barre n'apparaît qu'une fois le script en place. */
.pbs-onglets__barre { display: none; }
.pbs-onglets.js-onglets .pbs-onglets__barre {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-bottom: 1.75rem;
}

.pbs-onglets__bouton {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 48px;
  padding: .625rem 1.125rem;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-interactive);
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--c-muted);
  cursor: pointer;
  transition: background-color .2s var(--e-inout), border-color .2s var(--e-inout),
              color .2s var(--e-inout), transform .12s var(--e-snap);
}
.pbs-onglets__bouton svg { color: var(--c-line); transition: color .2s var(--e-inout); }
.pbs-onglets__bouton:hover { border-color: var(--c-blue-300); color: var(--c-brand-deep); }
.pbs-onglets__bouton:hover svg { color: var(--c-brand); }
.pbs-onglets__bouton:active { transform: translateY(1px); }
.pbs-onglets__bouton.est-actif {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
}
.pbs-onglets__bouton.est-actif svg { color: #fff; }

.pbs-onglets__titre-repli { font-size: 1.25rem; margin-bottom: 1rem; }
.pbs-onglets.js-onglets .pbs-onglets__titre-repli { display: none; }

.pbs-onglets__panneau { margin-bottom: 2.5rem; }
.pbs-onglets.js-onglets .pbs-onglets__panneau { display: none; margin-bottom: 0; }
.pbs-onglets.js-onglets .pbs-onglets__panneau.est-actif { display: block; }
.pbs-onglets__panneau:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 4px; }

/* Entrée en cascade des étapes à chaque changement d'onglet. Le décalage
   est calculé depuis l'index posé en ligne par le gabarit. */
.pbs-onglets.js-onglets .pbs-onglets__panneau.est-actif .pbs-etape {
  animation: pbs-etape-entre .5s var(--e-out) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes pbs-etape-entre {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.pbs-etapes { display: grid; gap: 1rem; counter-reset: pbs-etape; }

.pbs-etape {
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 3.75rem;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-container);
  counter-increment: pbs-etape;
}
.pbs-etape__icone {
  position: absolute;
  inset-inline-start: 1.25rem;
  top: 1.25rem;
  color: var(--c-brand);
}
.pbs-etape__titre { font-size: 1.0625rem; margin-bottom: .25rem; }
.pbs-etape__texte { font-size: .9375rem; color: var(--c-muted); max-width: 62ch; }

.pbs-onglets__lien { margin-top: 1.5rem; font-family: var(--f-titre); font-weight: 600; }
.pbs-onglets__lien a { display: inline-flex; align-items: center; gap: .375rem; }
.pbs-onglets__lien svg { transition: transform .22s var(--e-out); }
.pbs-onglets__lien a:hover svg { transform: translateX(4px); }

@media (min-width: 720px) {
  .pbs-etapes { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .pbs-etapes { grid-template-columns: repeat(4, 1fr); }
  .pbs-etape { padding: 1.375rem; }
  .pbs-etape__icone { position: static; display: block; margin-bottom: .625rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pbs-onglets.js-onglets .pbs-onglets__panneau.est-actif .pbs-etape { animation: none; }
}

/* --------------------------------------------------------------------------
   3. Bande d'urgence
   Unique inversion de contraste du site. Le fond est le bleu profond de la
   marque, pas une couleur étrangère : la page reste dans une seule famille.
   -------------------------------------------------------------------------- */

.pbs-bande {
  background: var(--c-blue-900);
  color: #fff;
  padding-block: clamp(2.25rem, 6vw, 3.5rem);
}

.pbs-bande__inner {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

.pbs-bande__titre { font-size: clamp(1.375rem, 3.4vw, 2rem); max-width: 20ch; }
.pbs-bande__sous  { margin-top: .625rem; color: var(--c-blue-200); max-width: 52ch; }

.pbs-bande__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

.pbs-bande__lien {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  color: #fff;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: .9375rem;
  text-decoration-color: rgb(255 255 255 / .4);
}
.pbs-bande__lien:hover { color: var(--c-blue-200); text-decoration-color: currentColor; }
.pbs-bande__lien svg { transition: transform .25s var(--e-out); }
.pbs-bande__lien:hover svg { transform: translateX(4px); }

@media (min-width: 860px) {
  .pbs-bande__inner { grid-template-columns: 1.4fr 1fr; gap: 2.5rem; }
  .pbs-bande__actions { justify-content: flex-end; }
}

/* --------------------------------------------------------------------------
   4. Déroulé d'une intervention
   Progression horizontale reliée par un filet. Les intitulés sont des
   actions, jamais des numéros d'étape.
   -------------------------------------------------------------------------- */

.pbs-deroule { background: var(--c-sand); }

.pbs-deroule__liste {
  margin-top: 2rem;
  display: grid;
  gap: 1.5rem;
  counter-reset: pbs-moment;
}

.pbs-moment { position: relative; padding-inline-start: 3.25rem; }

.pbs-moment__icone {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  color: var(--c-brand);
}
.pbs-moment__titre { font-size: 1.0625rem; margin-bottom: .25rem; }
.pbs-moment__texte { color: var(--c-muted); font-size: .9375rem; }

@media (min-width: 860px) {
  .pbs-deroule__liste { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .pbs-moment { padding-inline-start: 0; padding-top: 3.75rem; }
  .pbs-moment__icone { top: 0; }

  /* Le filet de liaison, tracé derrière les pastilles. */
  .pbs-moment::before {
    content: '';
    position: absolute;
    top: 22px;
    inset-inline-start: 44px;
    inset-inline-end: -2rem;
    height: 1px;
    background: var(--c-line);
  }
  .pbs-moment:last-child::before { display: none; }
}

/* --------------------------------------------------------------------------
   5. Communes desservies
   -------------------------------------------------------------------------- */

.pbs-zones__grille { display: grid; gap: 2rem; }
.pbs-zones__texte { margin-block: 1rem 1.5rem; color: var(--c-muted); max-width: 46ch; }

.pbs-pastilles { display: flex; flex-wrap: wrap; gap: .5rem; }

.pbs-pastille--lien {
  text-decoration: none;
  transition: background-color .18s var(--e-inout), border-color .18s var(--e-inout),
              transform .18s var(--e-snap);
}
.pbs-pastille--lien:hover {
  background: var(--c-blue-100);
  border-color: var(--c-blue-300);
  color: var(--c-brand-deep);
  transform: translateY(-1px);
}
.pbs-pastille--lien:active { transform: translateY(0); }

.pbs-pastille--hub {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
  font-weight: 700;
}
.pbs-pastille--hub:hover { background: var(--c-brand-deep); border-color: var(--c-brand-deep); color: #fff; }

.pbs-pastilles--large .pbs-pastille { padding: .5rem .9375rem; font-size: .875rem; }

.pbs-zones__note {
  margin-top: 1.25rem;
  font-size: .875rem;
  color: var(--c-muted);
  max-width: 46ch;
}

@media (min-width: 860px) {
  .pbs-zones__grille { grid-template-columns: 1fr 1.15fr; gap: 3.5rem; align-items: start; }
}

/* --------------------------------------------------------------------------
   6. Questions fréquentes
   Construit sur details et summary natifs : clavier et lecteurs d'écran
   fonctionnent sans une ligne de script.
   -------------------------------------------------------------------------- */

.pbs-faq__grille { display: grid; gap: 1.75rem; }
.pbs-faq__aide { margin-top: .75rem; color: var(--c-muted); font-size: .9375rem; }

.pbs-question {
  border-bottom: 1px solid var(--c-line);
}
.pbs-question:first-child { border-top: 1px solid var(--c-line); }

.pbs-question__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.125rem;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  transition: color .18s var(--e-inout);
}
.pbs-question__q::-webkit-details-marker { display: none; }
.pbs-question__q:hover { color: var(--c-brand); }

.pbs-question__chevron {
  flex: none;
  margin-top: .1875rem;
  color: var(--c-brand);
  transition: transform .3s var(--e-out);
}
.pbs-question[open] .pbs-question__chevron { transform: rotate(180deg); }

.pbs-question__r { padding-bottom: 1.25rem; color: var(--c-muted); max-width: 68ch; }

@media (min-width: 860px) {
  .pbs-faq__grille { grid-template-columns: 1fr 1.6fr; gap: 3.5rem; align-items: start; }
}

/* --------------------------------------------------------------------------
   7. Avis Google
   Conteneur neutre qui applique la charte au widget de l'extension.
   -------------------------------------------------------------------------- */

.pbs-section-avis { background: var(--c-sand); }

.pbs-section-avis__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.pbs-section-avis__lien {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: .9375rem;
}

.pbs-avis {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-container);
  padding: 1.25rem;
}
.pbs-avis--vide {
  border-style: dashed;
  color: var(--c-muted);
  font-size: .875rem;
}
.pbs-avis--vide p { margin-bottom: .5rem; }
.pbs-avis :is(img, iframe) { max-width: 100%; }

/* --------------------------------------------------------------------------
   8. Formulaire
   -------------------------------------------------------------------------- */

.pbs-contact__grille { display: grid; gap: 2.5rem; }
.pbs-contact__intro { margin-block: .75rem 1.75rem; color: var(--c-muted); max-width: 52ch; }

.pbs-form__grille { display: grid; gap: 1.125rem; }

.pbs-champ { display: flex; flex-direction: column; gap: .375rem; }
.pbs-champ--large { grid-column: 1 / -1; }

.pbs-champ label {
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: .875rem;
}
.pbs-champ__facultatif {
  font-family: var(--f-texte);
  font-weight: 400;
  font-size: .75rem;
  color: var(--c-muted);
  margin-inline-start: .375rem;
}

.pbs-champ :is(input[type="text"], input[type="tel"], input[type="email"], select, textarea) {
  width: 100%;
  min-height: 48px;
  padding: .6875rem .875rem;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-container);
  font-family: var(--f-texte);
  /* 16 px minimum : en dessous, iOS zoome à la mise au point du champ. */
  font-size: 1rem;
  color: var(--c-ink);
  transition: border-color .18s var(--e-inout), box-shadow .18s var(--e-out);
}
.pbs-champ textarea { min-height: 130px; resize: vertical; }

.pbs-champ :is(input, select, textarea)::placeholder {
  /* Contraste mesuré du gris sur blanc : 4.83:1, conforme AA. */
  color: #6B7280;
}

.pbs-champ :is(input, select, textarea):focus {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgb(0 74 173 / .16);
  outline: none;
}
.pbs-champ :is(input, select, textarea):focus-visible {
  outline: 3px solid var(--c-brand);
  outline-offset: 1px;
}

/* Les listes déroulantes natives doivent recevoir une couleur explicite,
   sans quoi Windows en thème sombre les rend illisibles. */
.pbs-champ select {
  background-color: #fff;
  color: var(--c-ink);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23535A65' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 18px;
  padding-inline-end: 2.5rem;
}

.pbs-champ__aide { font-size: .8125rem; color: var(--c-muted); }
.pbs-champ__erreur {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--c-urgence-hover);
}
.pbs-champ.is-erreur :is(input, select, textarea) { border-color: var(--c-urgence); }

/* Case à cocher : le libellé et la case forment une seule cible, sans zone
   morte entre les deux. */
.pbs-champ--case label {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  font-family: var(--f-texte);
  font-weight: 400;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--c-muted);
  cursor: pointer;
}
.pbs-champ--case input[type="checkbox"] {
  flex: none;
  width: 20px; height: 20px;
  margin-top: .125rem;
  accent-color: var(--c-brand);
  cursor: pointer;
}

.pbs-form__pied {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.pbs-form__alt { font-size: .875rem; color: var(--c-muted); }

.pbs-message {
  padding: .875rem 1rem;
  border-radius: var(--r-container);
  font-size: .9375rem;
  margin-bottom: 1.25rem;
}
.pbs-message--ok { background: #ECFDF3; border: 1px solid #A6E9C0; color: #14532D; }
.pbs-message--ko { background: #FDF0EC; border: 1px solid #F2C7B9; color: #7A1E05; }

/* Champ leurre. Retiré du flux sans display:none, que certains robots
   détectent, et jamais atteignable au clavier. */
.pbs-leurre {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.pbs-contact__infos { display: grid; gap: 1rem; align-content: start; }

.pbs-carte-info {
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-container);
}
.pbs-carte-info__titre {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--c-muted);
  margin-bottom: .5rem;
}
.pbs-carte-info__tel {
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--c-brand-deep);
}
.pbs-carte-info__tel:hover { text-decoration: underline; }
.pbs-carte-info__lien { font-size: .9375rem; overflow-wrap: anywhere; }
.pbs-carte-info__adresse { font-style: normal; color: var(--c-muted); margin-bottom: .5rem; }
.pbs-carte-info__detail {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin-top: .5rem;
  font-size: .875rem;
  color: var(--c-muted);
}

@media (min-width: 900px) {
  .pbs-contact__grille { grid-template-columns: 1.7fr 1fr; gap: 3rem; align-items: start; }
  .pbs-form__grille { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   9. Page locale
   -------------------------------------------------------------------------- */

.pbs-fil { padding-block: 1rem .25rem; font-size: .8125rem; }
.pbs-fil ol { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.pbs-fil li { display: flex; align-items: center; gap: .375rem; color: var(--c-muted); }
.pbs-fil li:not(:last-child)::after { content: '/'; color: var(--c-line); }
.pbs-fil a { color: var(--c-muted); }
.pbs-fil a:hover { color: var(--c-brand); }
.pbs-fil [aria-current] { color: var(--c-ink); font-weight: 600; }

.pbs-locale__ouverture { padding-block: 1.5rem clamp(2rem, 5vw, 3rem); }
.pbs-locale__grille { display: grid; gap: 2rem; }

.pbs-locale__titre {
  font-size: clamp(1.875rem, 5.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -.03em;
  max-width: 18ch;
}
.pbs-locale__intro { margin-top: 1.125rem; font-size: 1.0625rem; color: var(--c-muted); max-width: 62ch; }

.pbs-locale__modes {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .875rem;
}
.pbs-locale__modes li {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: .875rem;
}
.pbs-locale__modes svg { color: var(--c-brand); }

.pbs-locale__encart {
  padding: 1.375rem;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-container);
  box-shadow: var(--sh-2);
  display: grid;
  gap: .75rem;
  align-content: start;
}
.pbs-locale__encart-titre {
  font-family: var(--f-titre);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
}
.pbs-locale__encart .pbs-appel { justify-content: center; }
.pbs-locale__encart-note { font-size: .8125rem; color: var(--c-muted); }

.pbs-locale__photo,
.pbs-pilier__photo { margin: 0 0 clamp(2rem, 5vw, 3rem); }
.pbs-locale__photo img,
.pbs-pilier__photo img {
  width: 100%;
  border-radius: var(--r-container);
}

.pbs-locale__local { padding-block: clamp(2rem, 6vw, 3.5rem); background: var(--c-sand); }
.pbs-locale__local-grille { display: grid; gap: 1.25rem; }

.pbs-locale__galerie { padding-block: clamp(2rem, 6vw, 3.5rem); }
.pbs-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .75rem;
}
.pbs-galerie figure { margin: 0; }
.pbs-galerie img { width: 100%; border-radius: var(--r-container); }

@media (min-width: 900px) {
  .pbs-locale__grille { grid-template-columns: 1.65fr 1fr; gap: 3rem; align-items: start; }
  .pbs-locale__local-grille { grid-template-columns: 1fr 1.6fr; gap: 3.5rem; align-items: start; }
}

/* --------------------------------------------------------------------------
   10. Maillage interne
   -------------------------------------------------------------------------- */

.pbs-maillage { border-top: 1px solid var(--c-line); }
.pbs-maillage__grille { margin-top: 2rem; display: grid; gap: 2.5rem; }
.pbs-maillage__sous {
  font-size: 1rem;
  color: var(--c-muted);
  font-weight: 600;
  margin-bottom: 1rem;
}

.pbs-maillage__services { display: grid; gap: .5rem; }
.pbs-maillage__services a {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .875rem 1rem;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-container);
  text-decoration: none;
  color: var(--c-ink);
  transition: border-color .2s var(--e-inout), transform .2s var(--e-out),
              box-shadow .2s var(--e-out);
}
.pbs-maillage__services a:hover {
  border-color: var(--c-brand);
  transform: translateX(3px);
  box-shadow: var(--sh-2);
  color: var(--c-ink);
}
.pbs-maillage__icone { color: var(--c-brand); flex: none; }
.pbs-maillage__services strong { display: block; font-family: var(--f-titre); font-size: .9375rem; }
.pbs-maillage__services em { display: block; font-style: normal; font-size: .8125rem; color: var(--c-muted); }

.pbs-maillage__retour { margin-top: 1.25rem; }
.pbs-maillage__retour a {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: .9375rem;
}

@media (min-width: 860px) {
  .pbs-maillage__grille { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
}

/* --------------------------------------------------------------------------
   11. Page pilier
   -------------------------------------------------------------------------- */

.pbs-pilier__ouverture { padding-block: 1.5rem clamp(2rem, 5vw, 3rem); }
.pbs-pilier__titre {
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -.03em;
  max-width: 18ch;
}
.pbs-pilier__accroche { margin-top: 1rem; font-size: 1.0625rem; color: var(--c-muted); max-width: 56ch; }
.pbs-pilier__actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.pbs-pilier__corps { padding-block: 0 clamp(2rem, 5vw, 3rem); }
.pbs-pilier__communes { background: var(--c-sand); }
.pbs-pilier__communes-intro { margin-block: .75rem 1.5rem; color: var(--c-muted); max-width: 52ch; }

/* --------------------------------------------------------------------------
   11 bis. Prestations
   Cartes de prestation sur la page du métier, et page de prestation.
   -------------------------------------------------------------------------- */

.pbs-prestations { padding-block: clamp(3rem, 8vw, 5.5rem); }

.pbs-prestations__grille {
  margin-top: 2rem;
  display: grid;
  gap: .875rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.pbs-presta-carte {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  height: 100%;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-container);
  text-decoration: none;
  color: var(--c-ink);
  transition: border-color .22s var(--e-inout), box-shadow .22s var(--e-out),
              transform .22s var(--e-out);
}
a.pbs-presta-carte:hover {
  border-color: var(--c-brand);
  box-shadow: var(--sh-3);
  transform: translateY(-2px);
  color: var(--c-ink);
}
.pbs-presta-carte--inactive { opacity: .6; }

.pbs-presta-carte__icone { color: var(--c-brand); }
.pbs-presta-carte__titre { font-size: 1.0625rem; }
.pbs-presta-carte__quoi {
  font-size: .8125rem;
  color: var(--c-brand-deep);
  font-weight: 600;
}
.pbs-presta-carte__accroche { font-size: .875rem; color: var(--c-muted); margin-top: auto; padding-top: .375rem; }

/* --- Page de prestation --- */

.pbs-prestation__ouverture { padding-block: 1.5rem clamp(2rem, 5vw, 3rem); }
.pbs-prestation__grille { display: grid; gap: 2rem; }

.pbs-prestation__metier {
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-brand);
  margin-bottom: .625rem;
}
.pbs-prestation__metier a { color: inherit; text-decoration: none; }
.pbs-prestation__metier a:hover { text-decoration: underline; }

.pbs-prestation__titre {
  font-size: clamp(1.875rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -.03em;
  max-width: 20ch;
}
.pbs-prestation__intention {
  margin-top: 1rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--c-ink);
  max-width: 52ch;
}
.pbs-prestation__accroche { margin-top: .5rem; color: var(--c-muted); max-width: 56ch; }
.pbs-prestation__actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .75rem; }

.pbs-prestation__photo { margin: 0; }
.pbs-prestation__photo img { width: 100%; border-radius: var(--r-container); }

.pbs-prestation__corps { padding-block: 0 clamp(2rem, 5vw, 3rem); }
.pbs-prestation__communes { padding-block: clamp(3rem, 8vw, 5rem); background: var(--c-sand); }
.pbs-prestation__communes-intro { margin-block: .75rem 1.5rem; color: var(--c-muted); max-width: 56ch; }

.pbs-maillage__services--grille {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.pbs-maillage__inactif {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .875rem 1rem;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-container);
  opacity: .6;
}
.pbs-maillage__inactif strong { display: block; font-family: var(--f-titre); font-size: .9375rem; }
.pbs-maillage__inactif em { display: block; font-style: normal; font-size: .8125rem; color: var(--c-muted); }

@media (min-width: 900px) {
  .pbs-prestation__grille { grid-template-columns: 1.5fr 1fr; gap: 3rem; align-items: start; }
}

/* --------------------------------------------------------------------------
   12. Blog
   -------------------------------------------------------------------------- */

.pbs-blog__entete { padding-block: 1.5rem 2rem; }
.pbs-blog__titre { font-size: clamp(1.875rem, 5vw, 2.75rem); }
.pbs-blog__sous { margin-top: .75rem; color: var(--c-muted); }

.pbs-blog__liste {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  padding-bottom: 3rem;
}

.pbs-post { display: flex; flex-direction: column; gap: .875rem; }
.pbs-post__image { display: block; border-radius: var(--r-container); overflow: hidden; }
.pbs-post__image img { width: 100%; transition: transform .4s var(--e-out); }
.pbs-post:hover .pbs-post__image img { transform: scale(1.03); }
.pbs-post__titre { font-size: 1.1875rem; }
.pbs-post__titre a { color: var(--c-ink); text-decoration: none; }
.pbs-post__titre a:hover { color: var(--c-brand); text-decoration: underline; }
.pbs-post__meta { font-size: .8125rem; color: var(--c-muted); }
.pbs-post__extrait { color: var(--c-muted); font-size: .9375rem; }

@media (min-width: 860px) {
  .pbs-post--vedette { grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center; }
  .pbs-post--vedette .pbs-post__titre { font-size: 1.75rem; }
}

.pbs-article__entete { padding-block: 1.5rem 1.75rem; }
.pbs-article__titre { font-size: clamp(1.75rem, 5vw, 2.75rem); }
.pbs-article__meta { margin-top: .75rem; font-size: .875rem; color: var(--c-muted); }
.pbs-article__photo { margin: 0 0 2rem; }
.pbs-article__photo img { width: 100%; border-radius: var(--r-container); }
.pbs-article__corps { padding-bottom: 2.5rem; }
.pbs-article__pied { padding-bottom: 3rem; }
.pbs-article__retour { margin-top: 1.5rem; font-family: var(--f-titre); font-weight: 600; }

.pbs-encart-appel {
  padding: 1.5rem;
  background: var(--c-blue-50);
  border: 1px solid var(--c-blue-100);
  border-radius: var(--r-container);
}
.pbs-encart-appel__titre { font-family: var(--f-titre); font-weight: 700; font-size: 1.125rem; }
.pbs-encart-appel__texte { margin-block: .5rem 1rem; font-size: .9375rem; color: var(--c-muted); }

.pbs-pagination { padding-block: 1rem 3rem; }
.pbs-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .375rem; }
.pbs-pagination :is(a, span) {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: .75rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-interactive);
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: .875rem;
  text-decoration: none;
}
.pbs-pagination a:hover { border-color: var(--c-brand); background: var(--c-blue-50); }
.pbs-pagination .current { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }

/* --------------------------------------------------------------------------
   13. Pages simples, états vides, 404
   -------------------------------------------------------------------------- */

.pbs-page__entete { padding-block: 1.5rem 1.5rem; }
.pbs-page__titre { font-size: clamp(1.75rem, 5vw, 2.5rem); }
.pbs-page__corps { padding-bottom: 3.5rem; }

.pbs-vide {
  padding: clamp(2.5rem, 8vw, 4.5rem) 1.5rem;
  text-align: center;
  border: 1px dashed var(--c-line);
  border-radius: var(--r-container);
  margin-bottom: 3rem;
}
.pbs-vide__titre { font-size: 1.375rem; }
.pbs-vide__texte { margin-block: .75rem 1.5rem; color: var(--c-muted); }

.pbs-404 { padding-block: clamp(3rem, 9vw, 6rem); }
.pbs-404__titre { font-size: clamp(1.875rem, 6vw, 3rem); }
.pbs-404__texte { margin-block: 1rem 2rem; color: var(--c-muted); max-width: 52ch; }
.pbs-404__liste { display: grid; gap: .5rem; margin-bottom: 2rem; }
.pbs-404__liste a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1rem;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-container);
  font-family: var(--f-titre);
  font-weight: 600;
  text-decoration: none;
  color: var(--c-ink);
  transition: border-color .2s var(--e-inout), transform .2s var(--e-out);
}
.pbs-404__liste a:hover { border-color: var(--c-brand); transform: translateX(3px); color: var(--c-ink); }
.pbs-404__liste svg { color: var(--c-brand); }
.pbs-404__appel { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --------------------------------------------------------------------------
   14. Pied de page
   -------------------------------------------------------------------------- */

.pbs-pied {
  background: var(--c-blue-900);
  color: var(--c-blue-200);
  padding-block: clamp(2.5rem, 7vw, 4rem) 0;
  /* Laisse la place à la barre d'appel fixe sur téléphone. */
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

.pbs-pied__haut { display: grid; gap: 2.5rem; padding-bottom: 2.5rem; }

.pbs-pied img { background: none; }
.pbs-pied__nom {
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: 1.125rem;
  color: #fff;
  margin-top: .75rem;
}
.pbs-pied__adresse { font-style: normal; margin-top: .5rem; font-size: .9375rem; }
.pbs-pied__contact { margin-top: .75rem; font-size: .9375rem; }
.pbs-pied :is(a) { color: #fff; text-decoration-color: rgb(255 255 255 / .35); }
.pbs-pied :is(a):hover { color: var(--c-blue-200); text-decoration-color: currentColor; }
.pbs-pied__horaires {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin-top: .75rem;
  font-size: .875rem;
}

.pbs-pied__titre {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #fff;
  margin-bottom: 1rem;
}
.pbs-pied__titre--espace { margin-top: 2rem; }
.pbs-pied__liste { display: grid; gap: .5rem; font-size: .9375rem; }
.pbs-pied__liste--colonnes { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.pbs-pied__urgence { color: #F2C7B9 !important; }
.pbs-pied__urgence:hover { color: #fff !important; }

.pbs-pied__prestations {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.pbs-pied__presta-metier {
  font-family: var(--f-titre);
  font-weight: 700;
  font-size: .8125rem;
  color: #fff;
  margin-bottom: .5rem;
}
.pbs-pied__presta-groupe .pbs-pied__liste { gap: .375rem; font-size: .875rem; }

.pbs-pied__gbp { margin-top: .75rem; font-size: .875rem; }
.pbs-pied__gbp a { display: inline-flex; align-items: center; gap: .375rem; }

.pbs-pied__tout {
  margin-top: 1rem;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: .875rem;
}
.pbs-pied__tout a { display: inline-flex; align-items: center; gap: .375rem; }

.pbs-pied__bas {
  border-top: 1px solid rgb(255 255 255 / .12);
  padding-block: 1.5rem;
  display: grid;
  gap: .75rem;
  font-size: .8125rem;
}
.pbs-pied__legal span[aria-hidden] { opacity: .4; margin-inline: .25rem; }
.pbs-pied__mentions ul { display: flex; flex-wrap: wrap; gap: 1rem; }
.pbs-pied__copy { opacity: .7; }

.pbs-pied__alerte {
  margin-bottom: 1.5rem;
  padding: .875rem 1rem;
  background: rgb(208 55 10 / .18);
  border: 1px solid var(--c-urgence);
  border-radius: var(--r-container);
  font-size: .875rem;
  color: #fff;
}

@media (min-width: 860px) {
  .pbs-pied { padding-bottom: 0; }
  /* Quatre blocs : identité, métiers, prestations, communes. Les deux
     derniers sont plus larges parce qu'ils portent le maillage le plus
     dense du site. */
  .pbs-pied__haut { grid-template-columns: 1fr 1fr 1.6fr 1.4fr; gap: 2.5rem; }
  .pbs-pied__bas { grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; }
  .pbs-pied__mentions ul { justify-content: center; }
}

@media (min-width: 860px) and (max-width: 1199px) {
  /* Entre tablette et petit ordinateur, quatre colonnes deviennent
     illisibles. On passe à deux rangées de deux. */
  .pbs-pied__haut { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   15. Barre d'appel fixe sur téléphone
   Un seul bouton, pleine largeur. L'appel est la seule action qui compte
   quand une fuite est en cours ; un second bouton à côté diviserait
   l'attention et coûterait des appels. Le formulaire de devis reste
   accessible plus bas dans la page, là où il a du sens.
   -------------------------------------------------------------------------- */

.pbs-barre-mobile {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  padding: .5rem var(--gouttiere);
  padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
  background: rgb(250 251 253 / .96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--c-line);
}
.pbs-barre-mobile .pbs-appel {
  flex: 1;
  justify-content: center;
  min-height: 56px;
}

@media (min-width: 900px) {
  .pbs-barre-mobile { display: none; }
}

/* --------------------------------------------------------------------------
   16. Méga-panneau de navigation
   Un seul balisage, deux comportements : panneau déroulant pleine largeur
   sur ordinateur, menu plein écran sur téléphone.
   -------------------------------------------------------------------------- */

.pbs-mega__inner {
  display: grid;
  gap: 2rem;
  padding-block: 1.5rem 2.5rem;
}

.pbs-mega__metiers { display: grid; gap: .5rem; }

.pbs-mega__col { padding-block: .25rem; }

.pbs-mega__titre {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: 1.0625rem;
  margin-bottom: .375rem;
}
.pbs-mega__titre a { color: var(--c-ink); text-decoration: none; }
.pbs-mega__titre a:hover { color: var(--c-brand); text-decoration: underline; }
.pbs-mega__icone { color: var(--c-brand); flex: none; }

.pbs-mega__accroche {
  font-size: .8125rem;
  color: var(--c-muted);
  margin-bottom: .75rem;
  max-width: 34ch;
}

.pbs-mega__prestations { display: grid; gap: .125rem; }
.pbs-mega__prestations :is(a, .pbs-mega__presta-inactive) {
  display: block;
  padding: .5rem .625rem;
  border-radius: var(--r-container);
  text-decoration: none;
  color: var(--c-ink);
  transition: background-color .16s var(--e-inout), transform .16s var(--e-out);
}
.pbs-mega__prestations a:hover {
  background: var(--c-blue-50);
  color: var(--c-brand-deep);
  transform: translateX(2px);
}

/* Une prestation encore en brouillon : lisible, non cliquable, et signalée
   comme telle uniquement pour les administrateurs qui la verront en lien. */
.pbs-mega__presta-inactive { opacity: .55; cursor: default; }

.pbs-mega__presta-nom {
  display: block;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: .875rem;
  line-height: 1.3;
}
.pbs-mega__presta-quoi {
  display: block;
  font-size: .75rem;
  color: var(--c-muted);
  line-height: 1.35;
  margin-top: 1px;
}

.pbs-mega__aside { display: grid; gap: 1.25rem; align-content: start; }

.pbs-mega__urgence {
  padding: 1.25rem;
  background: linear-gradient(180deg, #FDF3F0 0%, #fff 70%);
  border: 1px solid #F2C7B9;
  border-radius: var(--r-container);
}
.pbs-mega__urgence-titre {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.0625rem;
  color: var(--c-urgence-hover);
  margin-bottom: .375rem;
}
.pbs-mega__urgence-titre svg { color: var(--c-urgence); }
.pbs-mega__urgence-texte { font-size: .8125rem; color: var(--c-muted); margin-bottom: .875rem; }
.pbs-mega__urgence .pbs-appel { width: 100%; justify-content: center; }
.pbs-mega__urgence-lien {
  display: inline-block;
  margin-top: .75rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--c-urgence-hover);
}

.pbs-mega__liens { display: grid; gap: .125rem; }
.pbs-mega__liens a {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .625rem .625rem;
  border-radius: var(--r-container);
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: .875rem;
  color: var(--c-ink);
  text-decoration: none;
  transition: background-color .16s var(--e-inout);
}
.pbs-mega__liens a:hover { background: var(--c-blue-50); color: var(--c-brand-deep); }
.pbs-mega__liens svg { color: var(--c-brand); flex: none; }

.pbs-mega__horaires {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  color: var(--c-muted);
  padding-inline: .625rem;
}

/* --- Téléphone : chaque métier se replie ------------------------------- */

@media (max-width: 899px) {
  .pbs-mega__inner { padding-bottom: 6rem; }

  .pbs-mega__col { border-bottom: 1px solid var(--c-line); }

  /* Le titre reste un lien vers la page du métier. Le dépliage des
     prestations passe par un bouton distinct, ajouté par le script. Le
     visiteur garde donc les deux accès : la page du métier d'un côté, la
     liste des prestations de l'autre.

     Sans script, aucun attribut de repli n'est posé et tout reste visible :
     le menu est plus long, jamais bloqué. */
  .pbs-mega__titre {
    margin: 0;
    padding-block: .25rem;
    font-size: 1.125rem;
  }
  .pbs-mega__titre a {
    flex: 1;
    padding-block: .875rem;
  }

  .pbs-mega__chev-btn {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-inline-start: auto;
    background: none;
    border: 1px solid var(--c-line);
    border-radius: 50%;
    color: var(--c-brand);
    cursor: pointer;
    transition: background-color .18s var(--e-inout), transform .24s var(--e-out);
  }
  .pbs-mega__chev-btn:hover { background: var(--c-blue-50); }
  .pbs-mega__chev-btn[aria-expanded="true"] { transform: rotate(180deg); }

  .pbs-mega__col[data-pbs-replie] .pbs-mega__accroche,
  .pbs-mega__col[data-pbs-replie] .pbs-mega__prestations { display: none; }
  .pbs-mega__col[data-pbs-replie].est-deplie .pbs-mega__accroche { display: block; }
  .pbs-mega__col[data-pbs-replie].est-deplie .pbs-mega__prestations { display: grid; }

  .pbs-mega__prestations { padding-bottom: 1rem; }
  .pbs-mega__prestations :is(a, .pbs-mega__presta-inactive) { padding-block: .625rem; }

  body.pbs-menu-ouvert { overflow: hidden; }
}

/* --- Ordinateur : quatre colonnes plus une colonne latérale ------------ */

@media (min-width: 900px) {
  /* Le bouton de dépliage est posé par le script quelle que soit la
     largeur, pour que le passage en affichage étroit fonctionne sans
     rechargement. Il n'a de sens que sur téléphone : sur grand écran les
     quatre colonnes sont déjà toutes visibles. */
  .pbs-mega__chev-btn { display: none; }

  .pbs-mega__inner {
    grid-template-columns: minmax(0, 1fr) 292px;
    gap: 2.5rem;
    padding-block: 2rem 2.25rem;
  }
  .pbs-mega__metiers {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.75rem;
  }
  .pbs-mega__col:not(:last-child) {
    border-inline-end: 1px solid var(--c-line);
    padding-inline-end: 1.75rem;
  }
  .pbs-mega__aside {
    border-inline-start: 1px solid var(--c-line);
    padding-inline-start: 2rem;
  }
}

/* --------------------------------------------------------------------------
   17. Apparition au défilement
   Quatre variantes différentes, réparties selon le rôle de la section.
   Un seul effet répété partout est la signature la plus reconnaissable
   d'une page générée : ici le mouvement, la durée et la courbe changent.
   -------------------------------------------------------------------------- */

[data-reveal] { opacity: 0; }

[data-reveal="monte"]   { transform: translateY(22px); transition: opacity .6s var(--e-out) , transform .6s var(--e-out); }
[data-reveal="glisse"]  { transform: translateX(-26px); transition: opacity .55s var(--e-inout), transform .55s var(--e-inout); }
[data-reveal="zoom"]    { transform: scale(.965); transition: opacity .7s var(--e-out), transform .7s var(--e-out); }
[data-reveal="souffle"] { transform: translateY(12px); transition: opacity .9s var(--e-inout), transform .9s var(--e-inout); }

[data-reveal].est-visible {
  opacity: 1;
  transform: none;
}

/* Décalage en cascade pour les enfants d'une grille révélée. */
[data-reveal-cascade] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--e-out), transform .5s var(--e-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-reveal-cascade].est-visible > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-cascade] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   18. Repères de recette, visibles uniquement par les administrateurs
   -------------------------------------------------------------------------- */

.pbs-todo {
  background: #FFF3CD;
  color: #7A1E05;
  padding: .0625rem .375rem;
  border-radius: 3px;
  font-size: .8125rem;
  font-weight: 600;
}

.pbs-todo-bloc {
  padding: 1rem 1.25rem;
  background: #FFF8E6;
  border: 1px solid #F0D9A0;
  border-inline-start: 4px solid #D9A404;
  border-radius: var(--r-container);
  font-size: .9375rem;
  color: #6B4E00;
  max-width: 72ch;
}
.pbs-todo-bloc a { color: #6B4E00; font-weight: 700; }

/* --------------------------------------------------------------------------
   18 bis. Pages fixes
   Contact, zones, questions fréquentes, présentation de l'entreprise.
   -------------------------------------------------------------------------- */

.pbs-page__entete--large { padding-block: 1.5rem 2rem; }
.pbs-page__intro {
  margin-top: 1rem;
  font-size: 1.0625rem;
  color: var(--c-muted);
  max-width: 62ch;
}

/* Masqué à l'écran, lu par les technologies d'assistance. Sert aux
   légendes de tableau, qui décrivent la structure à qui ne la voit pas. */
.pbs-visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Tableau commune par métier --- */

.pbs-grille-zones { padding-block: clamp(2.5rem, 7vw, 4rem); }
.pbs-grille-zones__intro { margin-block: .75rem 1.75rem; color: var(--c-muted); max-width: 56ch; }
.pbs-grille-zones__note { margin-top: 1.5rem; font-size: .9375rem; color: var(--c-muted); }

/* Le tableau défile dans son propre cadre : la page, elle, ne doit jamais
   défiler latéralement. */
.pbs-tableau-zones__cadre {
  overflow-x: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--r-container);
  background: #fff;
}

.pbs-tableau-zones {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  min-width: 620px;
}
.pbs-tableau-zones :is(th, td) {
  padding: .75rem .875rem;
  text-align: start;
  border-bottom: 1px solid var(--c-line);
}
.pbs-tableau-zones thead th {
  position: sticky;
  top: 0;
  background: var(--c-sand);
  font-family: var(--f-titre);
  font-size: .8125rem;
  font-weight: 700;
  white-space: nowrap;
  z-index: 1;
}
.pbs-tableau-zones tbody th {
  font-family: var(--f-titre);
  font-weight: 600;
  white-space: nowrap;
}
.pbs-tableau-zones tbody tr:last-child :is(th, td) { border-bottom: 0; }
.pbs-tableau-zones tbody tr:hover :is(th, td) { background: var(--c-blue-50); }
.pbs-tableau-zones tr.est-pole :is(th, td) { background: var(--c-blue-50); }
.pbs-tableau-zones tr.est-pole th { color: var(--c-brand-deep); }

.pbs-tableau-zones__cp {
  display: block;
  font-family: var(--f-texte);
  font-weight: 400;
  font-size: .75rem;
  color: var(--c-muted);
}
.pbs-tableau-zones td a {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  color: var(--c-brand);
  transition: background-color .16s var(--e-inout), transform .16s var(--e-out);
}
.pbs-tableau-zones td a:hover { background: var(--c-blue-100); transform: translateX(2px); }
.pbs-tableau-zones__vide { color: var(--c-line); }

.pbs-contact-zones { padding-block: clamp(2.5rem, 7vw, 4rem); background: var(--c-sand); }
.pbs-contact-zones__intro { margin-block: .75rem 1.5rem; color: var(--c-muted); max-width: 56ch; }

/* --- Page des questions fréquentes --- */

.pbs-faq-complete { padding-block: 0 clamp(2.5rem, 7vw, 4rem); }

.pbs-faq-complete__sommaire {
  padding: 1.25rem;
  background: var(--c-sand);
  border-radius: var(--r-container);
  margin-bottom: 2.5rem;
}
.pbs-faq-complete__sommaire-titre {
  font-family: var(--f-titre);
  font-weight: 700;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-muted);
  margin-bottom: .75rem;
}
.pbs-faq-complete__sommaire ul { display: flex; flex-wrap: wrap; gap: .5rem; }

.pbs-faq-complete__bloc { margin-bottom: 2.5rem; scroll-margin-top: calc(var(--entete-h) + 1.5rem); }
.pbs-faq-complete__titre {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: 1.375rem;
  margin-bottom: 1rem;
}
.pbs-faq-complete__icone { color: var(--c-brand); }

/* --- Page de présentation --- */

.pbs-apropos-metiers { padding-block: clamp(2.5rem, 7vw, 4rem); background: var(--c-sand); }
.pbs-apropos-metiers__intro { margin-block: .75rem 2rem; color: var(--c-muted); max-width: 56ch; }
.pbs-apropos-metiers__grille {
  display: grid;
  gap: .875rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.pbs-apropos-carte {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-container);
}
.pbs-apropos-carte--urgence { border-color: #F2C7B9; background: linear-gradient(180deg, #FDF3F0 0%, #fff 70%); }
.pbs-apropos-carte--urgence .pbs-apropos-carte__icone { color: var(--c-urgence); }
.pbs-apropos-carte__icone { color: var(--c-brand); }
.pbs-apropos-carte__titre { font-size: 1.0625rem; }
.pbs-apropos-carte__titre a { color: var(--c-ink); text-decoration: none; }
.pbs-apropos-carte__titre a:hover { color: var(--c-brand); text-decoration: underline; }
.pbs-apropos-carte__texte { font-size: .875rem; color: var(--c-muted); }
.pbs-apropos-carte__compte {
  margin-top: auto;
  padding-top: .5rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--c-brand);
}

.pbs-apropos-faits { padding-block: clamp(2.5rem, 7vw, 4rem); }
.pbs-faits {
  margin-top: 2rem;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.pbs-faits__item {
  padding: 1rem 0;
  border-top: 1px solid var(--c-line);
}
.pbs-faits__item dt {
  font-family: var(--f-titre);
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-muted);
  margin-bottom: .25rem;
}
.pbs-faits__item dd { margin: 0; font-size: .9375rem; }

@media (min-width: 640px) {
  .pbs-faits { column-gap: 2.5rem; }
}

/* --------------------------------------------------------------------------
   18 ter. Cibles tactiles
   Sur un écran tactile, une cible doit mesurer au moins 44 pixels dans sa
   plus petite dimension. Un lien de 17 pixels de haut se rate une fois sur
   trois, et sur un site de dépannage la personne qui le rate est en train
   de chercher un numéro dans l'urgence.
   La règle porte sur « pointer: coarse » et non sur la largeur d'écran :
   c'est le mode de saisie qui décide, pas la taille de la fenêtre. Une
   tablette large au doigt est concernée, un petit écran à la souris ne
   l'est pas.
   La hauteur est étendue sans changer la taille du texte : l'aspect reste
   le même, seule la zone cliquable grandit.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {

  /* Pastilles de commune : cibles autonomes, très nombreuses.
     46 et non 44 : avec la bordure et l'arrondi de rendu, une consigne de
     44 produisait 43 pixels mesurés. Deux pixels de marge évitent de
     repasser sous le seuil selon le navigateur. */
  .pbs-pastille--lien {
    min-height: 46px;
    padding-block: .5rem;
  }

  /* Listes de navigation et liens d'action isolés. */
  .pbs-pied__liste a,
  .pbs-pied__mentions a,
  .pbs-pied__tout a,
  .pbs-pied__contact a,
  .pbs-pied__gbp a,
  .pbs-mega__liens a,
  .pbs-mega__urgence-lien,
  .pbs-mega__prestations :is(a, .pbs-mega__presta-inactive),
  .pbs-bande__lien,
  .pbs-onglets__lien a,
  .pbs-maillage__retour a,
  .pbs-section-avis__lien,
  .pbs-carte-info__lien,
  .pbs-article__retour a,
  .pbs-post__titre a,
  .pbs-404__liste a {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
  }

  /* Le logo est large, mais sa hauteur doit rester confortable. */
  .pbs-logo { min-height: 46px; }

  /* Fil d'Ariane et titres de carte : cibles autonomes à part entière. */
  .pbs-fil a { min-height: 46px; }
  .pbs-apropos-carte__titre a,
  .pbs-mega__titre a,
  .pbs-post__titre a {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
  }

  /* Liens en ligne au milieu d'une phrase, dont les numéros de téléphone.
     Sur ce site, l'appel est l'action la plus importante et un lien de
     16 pixels de haut se rate.

     Le remplissage vertical sur un élément en ligne agrandit la zone
     cliquable sans modifier la hauteur de la ligne : le texte autour ne
     bouge pas, la cible passe d'environ 16 à 36 pixels.

     La liste est explicite plutôt que générique. Appliquer ce
     remplissage à tous les liens d'un texte suivi ferait se chevaucher
     les zones cliquables de deux liens sur des lignes voisines, ce qui
     provoquerait des erreurs de frappe au lieu d'en éviter. */
  .pbs-form__alt a,
  .pbs-prestation__metier a,
  .pbs-faits__item dd a,
  .pbs-faq__aide a,
  .pbs-zones__note a,
  .pbs-grille-zones__note a,
  .pbs-page__intro a,
  .pbs-locale__encart-note a {
    padding-block: .625rem;
  }

  /* Liens à l'intérieur d'un texte suivi, notamment sur les pages légales
     où le téléphone et l'adresse électronique sont cités en pleine phrase.
     Le remplissage est volontairement plus faible qu'ailleurs : avec une
     hauteur de ligne de 1,6 sur du texte de 16 pixels, les lignes sont
     espacées d'environ 26 pixels. Trois pixels de part et d'autre portent
     la cible à 25 pixels, au-dessus du seuil, sans que les zones
     cliquables de deux lignes voisines se recouvrent. */
  .pbs-prose a { padding-block: .1875rem; }

  /* Les cellules du tableau des zones sont déjà des cibles de 32 pixels,
     on les porte à 44 pour rester cohérent. */
  .pbs-tableau-zones td a { width: 44px; height: 44px; }
}

/* --------------------------------------------------------------------------
   19. Impression
   -------------------------------------------------------------------------- */

@media print {
  .pbs-entete, .pbs-barre-mobile, .pbs-contact, .pbs-maillage, .pbs-section-avis { display: none; }
  body { background: #fff; color: #000; }
  a::after { content: ' (' attr(href) ')'; font-size: .75em; }
}