/* Page Particuliers (maquette D, validée le 28 octobre 2026) : visiteurs venus du QR code des
   flyers, presque toujours sur téléphone. Une colonne étroite, du gros texte, deux gros boutons
   en haut, une fiche par panne et une barre fixe WhatsApp / Appeler. Propre à cette page
   (page_css, chargée avant refonte.css) : les règles disputées passent par « .refonte .pa-page ». */
.refonte.page-particuliers {
  background: var(--soft);
  /* Place pour la barre fixe sous le pied de page */
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
/* La barre fixe remplace le bouton WhatsApp flottant du site */
.refonte.page-particuliers .dd-wa-float {
  display: none;
}
/* Pied de page : les pages villes listées sous « Notamment à : » sont écrites pour les
   professionnels ; elles n’ont pas leur place sur la page Particuliers. */
.refonte.page-particuliers .dd-footer-areas {
  display: none;
}

.pa-page {
  background: var(--soft);
  color: var(--text);
  font-size: 18px;
  line-height: 1.55;
  overflow-x: hidden;
}
.pa-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.pa-page svg {
  max-width: 100%;
}
.pa-wrap {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 16px 24px;
}
.pa-nw {
  white-space: nowrap;
}
.refonte .pa-page h1,
.refonte .pa-page h2,
.refonte .pa-page h3 {
  margin: 0;
  color: var(--ink);
  line-height: 1.18;
  letter-spacing: -0.01em;
  font-weight: 800;
}
.refonte .pa-page p {
  margin: 0;
  color: var(--text);
  font-size: 18px;
}
.pa-page a:not(.pa-btn):not(.pa-gros) {
  color: var(--forest);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.refonte .pa-page a:focus-visible,
.refonte .pa-page button:focus-visible,
.refonte .pa-page summary:focus-visible,
.refonte .pa-page input:focus-visible,
.refonte .pa-page select:focus-visible,
.refonte .pa-page textarea:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--lime);
}

/* Boutons */
.pa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 10px 16px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s,
    transform 0.15s;
}
.pa-btn svg {
  width: 26px;
  height: 26px;
  flex: none;
}
.pa-btn:active {
  transform: scale(0.98);
}
.pa-btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}
.refonte .pa-page .pa-btn-wa,
.refonte .pa-barre .pa-btn-wa {
  background: var(--wa);
  color: #fff;
}
.refonte .pa-page .pa-btn-wa:hover,
.refonte .pa-barre .pa-btn-wa:hover {
  background: var(--wa-hover);
}
.refonte .pa-page .pa-btn-call,
.refonte .pa-barre .pa-btn-call {
  border-color: var(--ink);
  background: var(--paper);
  color: var(--ink);
}
.refonte .pa-page .pa-btn-call:hover,
.refonte .pa-barre .pa-btn-call:hover {
  background: var(--soft);
}
.refonte .pa-page .pa-btn-dark {
  background: var(--ink);
  color: #fff;
}
.refonte .pa-page .pa-btn-dark:hover {
  background: var(--forest);
}
.pa-btns {
  display: grid;
  gap: 12px;
}
.pa-btn-tel-haut .pa-lbl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.2;
}
.pa-btn-tel-haut .pa-num {
  font-size: 18px;
  font-weight: 600;
}
.pa-btn-tel-haut .pa-sep {
  display: none;
}

/* Premier écran */
.pa-hero {
  padding: 18px 0 30px;
}
.pa-id {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
}
.pa-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 64px;
  margin: 4px;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--forest), var(--ink));
  box-shadow: 0 0 0 5px var(--lime);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
}
.pa-avatar img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.refonte .pa-page .pa-bubble {
  padding: 10px 12px;
  border-radius: 20px 20px 20px 6px;
  background: var(--paper);
  box-shadow: 0 3px 14px rgb(23 63 56 / 10%);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.35;
}
.refonte .pa-page .pa-hero h1 {
  margin-bottom: 8px;
  font-size: clamp(26px, 8vw, 44px);
}
.pa-hl {
  display: inline-block;
  padding: 0 2px;
  background: linear-gradient(
    transparent 62%,
    var(--lime) 62%,
    var(--lime) 92%,
    transparent 92%
  );
  color: var(--forest);
}
.refonte .pa-page .pa-lieu {
  margin-bottom: 12px;
}
.pa-lieu strong {
  color: var(--ink);
}
.pa-calme {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.pa-calme li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.45;
}
.pa-calme svg {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 2px;
  color: var(--forest);
}

/* Sections */
.pa-section {
  padding: 28px 0;
}
.refonte .pa-page h2 {
  margin-bottom: 8px;
  font-size: clamp(26px, 6.8vw, 32px);
}
.refonte .pa-page .pa-lead {
  margin-bottom: 18px;
}
.pa-card {
  padding: 24px 18px;
  border-radius: 26px;
  background: var(--paper);
  box-shadow: 0 2px 0 var(--line);
}

/* Pannes */
.pa-cases {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pa-case {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 72px;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s;
}
.pa-case:hover {
  border-color: var(--forest);
}
.pa-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--ink);
}
.pa-ic svg {
  width: 25px;
  height: 25px;
}
.pa-txt {
  flex: 1;
  min-width: 0;
}
.pa-txt b {
  display: block;
  font-size: 19px;
  line-height: 1.25;
}
.pa-txt small {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.35;
}
.pa-chev {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--muted);
  transition: transform 0.2s;
}
.pa-case[aria-expanded="true"] {
  border-color: var(--ink);
  border-radius: 18px 18px 0 0;
  background: var(--ink);
  color: #fff;
}
.pa-case[aria-expanded="true"] .pa-ic {
  background: var(--lime);
}
.pa-case[aria-expanded="true"] small {
  color: #cfe0d8;
}
.pa-case[aria-expanded="true"] .pa-chev {
  color: var(--lime);
  transform: rotate(180deg);
}

/* Fiche d'une panne (repliée par le script avec l'attribut hidden) */
.pa-fiche {
  padding: 18px 16px 10px;
  border: 2px solid var(--ink);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: var(--paper);
}
.refonte .pa-page .pa-fiche > p {
  margin-bottom: 14px;
}
.pa-envoyez {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--soft);
}
.pa-envoyez strong {
  color: var(--ink);
}
.refonte .pa-page .pa-prudence {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--lime);
  color: var(--ink);
}
.pa-fiche .pa-btn {
  padding: 10px 14px;
  font-size: 18px;
}
.pa-fermer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  margin-top: 4px;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
.pa-fermer svg {
  width: 18px;
  height: 18px;
}
.pa-fermer:hover {
  color: var(--ink);
}

/* Comment ça se passe */
.pa-etapes {
  display: grid;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pa-etape;
}
.pa-etape {
  position: relative;
  display: flex;
  gap: 16px;
  padding-bottom: 22px;
}
.pa-etape:last-child {
  padding-bottom: 0;
}
.pa-etape::before {
  content: counter(pa-etape);
  counter-increment: pa-etape;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
  font-size: 21px;
  font-weight: 800;
}
.pa-etape:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 44px;
  bottom: 0;
  left: 21px;
  width: 2px;
  background: var(--line);
}
.refonte .pa-page .pa-etape h3 {
  margin: 8px 0 4px;
  font-size: 20px;
}

/* Qui vous répond */
.pa-moi {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}
.pa-moi .pa-avatar {
  width: 76px;
  height: 76px;
  box-shadow: 0 0 0 4px var(--lime);
  font-size: 25px;
}
.refonte .pa-page .pa-nom {
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}
.refonte .pa-page .pa-bio p + p {
  margin-top: 10px;
}
.pa-promesses {
  display: grid;
  gap: 4px;
  margin: 20px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.pa-promesses li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0 8px;
  border-bottom: 1px solid var(--line);
}
.pa-promesses li:last-child {
  border-bottom: 0;
}
.pa-ok {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--lime);
}
.pa-ok svg {
  width: 18px;
  height: 18px;
  color: var(--ink);
}

/* Garder le numéro */
.pa-garder {
  border: 2px dashed var(--line);
  text-align: center;
}
.refonte .pa-page .pa-gros {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  margin: 10px 0 6px;
  padding: 0 8px;
  color: var(--ink);
  font-size: clamp(28px, 8vw, 36px);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
/* En anglais, le numéro est au format international (+32 …), plus long : un cran plus petit
   pour qu’il tienne dans la carte jusqu’à 320 px. */
.refonte .pa-page .pa-gros:lang(en) {
  font-size: clamp(24px, 7.5vw, 36px);
}
.refonte .pa-page .pa-garder p {
  margin-bottom: 16px;
}

/* Rappel : discret, sans carte ni bouton coloré, juste avant « Gardez mon numéro » */
.pa-rappel {
  border-top: 1px solid var(--line);
}
.refonte .pa-page .pa-rappel h2 {
  font-size: 24px;
}
.refonte .pa-page .pa-rappel-intro {
  margin-bottom: 16px;
}
.refonte .pa-page .pa-form {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.pa-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.refonte .pa-page .pa-field label {
  display: block;
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
}
.refonte .pa-page .pa-field input,
.refonte .pa-page .pa-field select,
.refonte .pa-page .pa-field textarea {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 18px;
}
.refonte .pa-page .pa-field input:hover,
.refonte .pa-page .pa-field select:hover,
.refonte .pa-page .pa-field textarea:hover {
  border-color: var(--forest);
}
.refonte .pa-page .pa-plus {
  padding: 0;
  border: 0;
}
.refonte .pa-page .pa-plus summary {
  display: flex;
  justify-content: flex-start;
  gap: 6px;
  min-height: 52px;
  color: var(--forest);
  font-size: 18px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pa-plus[open] summary {
  margin-bottom: 8px;
}
.pa-optional {
  color: var(--muted);
  font-weight: 400;
}
.refonte .pa-page .pa-small {
  font-size: 18px;
}
.refonte.page-particuliers .pa-page .dd-form-error,
.refonte.page-particuliers .pa-page .dd-form-success,
.refonte.page-particuliers .pa-page .dd-form-success p {
  font-size: 18px;
}
.refonte.page-particuliers .pa-page .dd-form-success {
  border-radius: 14px;
  background: var(--paper);
}

/* Barre fixe en bas : sans script, toujours affichée ; avec (is-ready), visible seulement après
   les boutons du haut et cachée pendant la lecture d'une fiche (is-masked) */
.pa-barre {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 -6px 18px rgb(23 63 56 / 10%);
}
.pa-barre-in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 600px;
  margin: 0 auto;
}
.pa-barre .pa-btn {
  min-height: 54px;
  padding: 8px 10px;
  font-size: 18px;
}
.pa-barre.is-ready {
  visibility: hidden;
  transform: translateY(110%);
}
.pa-barre.is-ready.is-visible {
  visibility: visible;
  transform: none;
}
.pa-barre.is-ready.is-visible.is-masked {
  visibility: hidden;
  transform: translateY(110%);
}
/* Animée seulement après le chargement (is-armed), pour ne pas la voir glisser à l'arrivée */
.pa-barre.is-armed {
  transition:
    transform 0.2s ease,
    visibility 0s linear 0.2s;
}
.pa-barre.is-armed.is-visible:not(.is-masked) {
  transition:
    transform 0.2s ease,
    visibility 0s;
}

/* Très petits écrans (320 px) */
@media (max-width: 359px) {
  .refonte .pa-page .pa-hero h1 {
    font-size: 26px;
  }
  .pa-case {
    gap: 10px;
    padding: 12px 10px;
  }
  .pa-ic {
    width: 38px;
    height: 38px;
  }
  .pa-ic svg {
    width: 22px;
    height: 22px;
  }
  .pa-chev {
    width: 18px;
    height: 18px;
  }
  .pa-btn {
    padding-inline: 12px;
  }
}
@media (min-width: 400px) {
  .pa-hero {
    padding-top: 24px;
  }
  .pa-id {
    gap: 16px;
    margin: 4px 0 16px;
  }
  .pa-avatar {
    width: 92px;
    height: 92px;
    margin: 5px;
    font-size: 30px;
  }
  .refonte .pa-page .pa-bubble {
    padding: 12px 16px;
  }
  .refonte .pa-page .pa-hero h1 {
    margin-bottom: 12px;
  }
  .refonte .pa-page .pa-lieu {
    margin-bottom: 18px;
  }
}
@media (min-width: 480px) {
  .pa-btn-tel-haut .pa-lbl {
    flex-direction: row;
    gap: 0.3em;
    align-items: baseline;
  }
  .pa-btn-tel-haut .pa-sep {
    display: inline;
  }
  .pa-card {
    padding: 28px 26px;
  }
}
@media (min-width: 761px) {
  .pa-wrap {
    padding-top: 24px;
    padding-bottom: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pa-page *,
  .pa-barre,
  .pa-barre * {
    transition: none !important;
    animation: none !important;
  }
}

/* Bandeau de confidentialité sur téléphone : compact, en bas, sans cacher le premier écran.
   Refuser et accepter restent côte à côte et de même poids ; le détail s'ouvre avec
   « Personnaliser » ou « Mes préférences ». */
@media (max-width: 760px) {
  .refonte.page-particuliers .privacy-panel:not(.is-open) {
    bottom: 0;
    width: 100%;
    max-height: none;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
    border-width: 1px 0 0;
  }
  /* Titre gardé pour les lecteurs d'écran (aria-labelledby), masqué à l'œil. */
  .refonte.page-particuliers .privacy-panel:not(.is-open) h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .refonte.page-particuliers .privacy-panel:not(.is-open) .privacy-short {
    display: block;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
  }
  .refonte.page-particuliers .privacy-panel:not(.is-open) .privacy-copy > p:not(.privacy-short),
  .refonte.page-particuliers .privacy-panel:not(.is-open) .privacy-copy > label,
  .refonte.page-particuliers .privacy-panel:not(.is-open) #privacy-save {
    display: none;
  }
  .refonte.page-particuliers .privacy-panel:not(.is-open) .privacy-actions {
    flex-direction: row;
    gap: 8px;
    margin-top: 10px;
  }
  .refonte.page-particuliers .privacy-panel:not(.is-open) .privacy-actions .button {
    flex: 1;
    min-height: 48px;
    padding: 10px 12px;
  }
  .refonte.page-particuliers .privacy-panel:not(.is-open) .privacy-more {
    display: inline;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
  }
}