/* PitStock : feuille de composants.
   Mobile d'abord : les règles de base visent le téléphone, les media queries (min-width) élargissent.
   Points de rupture : 480 px, 720 px, 960 px, 1180 px. Classes préfixées pd-, en bloc__élément--variante.
   Toutes les valeurs viennent de tokens.css : aucune couleur, aucun rayon, aucune taille de texte en dur ici,
   sauf les tailles propres à un composant. Aucun JavaScript requis ; js/pitstock.js n'ajoute que du confort. */

/* ===== 1. Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font-family: var(--font-sans); font-size: 15px; line-height: 22px; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
input, textarea { caret-color: var(--encre); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
/* Un mot sans espace (une adresse, un pseudo) se coupe plutôt que d'élargir la page */
:where(h1, h2, h3, h4, p, li, dd, blockquote, .pd-profil__qui, .pd-fil-annonce) { overflow-wrap: anywhere; }
/* Les cellules de tableau gardent leurs mots : un tableau défile au lieu d'écraser ses colonnes */
::selection { background: var(--jaune); color: var(--sur-jaune); }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
/* Téléphone : pas de flash gris au toucher, pas d'attente avant le clic, pas de texte sélectionné
   par un appui long sur un contrôle. Le texte de contenu reste sélectionnable. */
html { -webkit-tap-highlight-color: transparent; }
a, button, summary, label, [role="button"], [role="tab"] { touch-action: manipulation; }
.pd-btn, .pd-filtre, .pd-favori, .pd-vues button, .pd-pagination__page, .pd-onglets [role="tab"], .pd-barre-mobile a, .pd-menu__option, .pd-bourse__pause, .pd-galerie__fleche, .pd-choix__carte, .pd-quantite button, .pd-calendrier__jour, .pd-suggestions__option, .pd-accordeon summary, .pd-aide > summary { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* Bandeaux sombres : tout le texte est blanc (pas de gris, pas de jaune), la hiérarchie vient de la
   taille et de la graisse. Le lissage par défaut épaissit un peu le texte clair : il se lit mieux. */
[data-theme="nuit"] { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
[hidden] { display: none !important; }
.titre-hero, .titre-1, .titre-2, .titre-3 { text-wrap: balance; }
/* Chiffres tabulaires : pd-tabulaire sur un nombre isolé (compteur, total) ; pd-chiffres est la grille des chiffres clés */
.pd-tabulaire, .pd-chiffres, .montant, .montant-grand { font-variant-numeric: tabular-nums; }
.pd-secondaire { color: var(--encre-2); }

/* Masqué à l'écran, lu par les lecteurs d'écran */
.pd-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Lien d'évitement : premier élément de la page */
.pd-evitement { position: absolute; left: var(--esp-4); top: -60px; z-index: var(--z-notification); background: var(--encre); color: var(--fond); padding: 10px 14px; border-radius: var(--rayon); font-weight: 600; text-decoration: none; }
.pd-evitement:focus { top: var(--esp-3); }

/* Bandeau sombre : data-theme="nuit" sur le conteneur, puis cette classe pour le fond. */
.pd-asphalte { background: var(--fond); color: var(--encre); }

/* Icônes : <svg class="pd-icone"><use href="icones.svg#nom"/></svg> */
.pd-icone { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pd-icone--petite { width: 16px; height: 16px; }
.pd-icone--grande { width: 32px; height: 32px; stroke-width: 1.75; }

/* ===== 2. Mise en page ===== */
.pd-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.pd-page > main { flex: 1 0 auto; }
/* La marge tient compte des encoches en paysage */
.pd-conteneur { width: 100%; max-width: calc(var(--conteneur) + 2 * var(--marge-page)); margin-inline: auto; padding-left: max(var(--marge-page), env(safe-area-inset-left, 0px)); padding-right: max(var(--marge-page), env(safe-area-inset-right, 0px)); }
.pd-conteneur--lecture { max-width: calc(var(--conteneur-lecture) + 2 * var(--marge-page)); }
.pd-conteneur--etroit { max-width: calc(var(--conteneur-etroit) + 2 * var(--marge-page)); }  /* pages d'entrée */
.pd-section { padding-top: var(--esp-8); }
.pd-section--serree { padding-top: var(--esp-6); }
.pd-section__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--esp-1) var(--esp-4); margin-bottom: var(--esp-4); }
.pd-section__tete > .pd-lien { flex: none; white-space: nowrap; }
.pd-pile { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); align-content: start; }
.pd-pile--serree { gap: var(--esp-2); }
.pd-pile--minime { gap: var(--esp-1); }
.pd-pile--large { gap: var(--esp-6); }
.pd-rangee { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.pd-rangee--ecartee { justify-content: space-between; }
/* Rangée qu'on fait défiler du doigt, jusqu'aux bords de l'écran */
.pd-defile { display: flex; gap: var(--esp-2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--marge-page)); padding-inline: var(--marge-page); scroll-padding-inline: var(--marge-page); }
.pd-defile::-webkit-scrollbar { display: none; }
.pd-defile > * { flex: none; }
.pd-filet { border: 0; border-top: 1px solid var(--trait); margin: 0; }
/* Liste sans puces ni retrait (lignes, vignettes, liens) */
.pd-liste { margin: 0; padding: 0; list-style: none; }
/* Les rangées qu'on fait défiler ne déclenchent pas le geste « page précédente » en arrivant au bout */
.pd-defile, .pd-filtres, .pd-tuiles, .pd-ariane, .pd-onglets, .pd-galerie__defile, .pd-galerie__vignettes, .pd-visionneuse__defile { overscroll-behavior-x: contain; }
@media (min-width: 960px) {
  .pd-section { padding-top: var(--esp-9); }
  .pd-section--serree { padding-top: var(--esp-6); }
}

/* ===== 3. Marque ===== */
.pd-marque { display: inline-flex; align-items: center; gap: 10px; color: var(--encre); text-decoration: none; }
.pd-marque__symbole { --h: 15px; height: var(--h); width: calc(var(--h) * 2.138); fill: var(--encre); stroke: var(--encre); stroke-width: 1.6; stroke-linejoin: round; overflow: visible; flex: none; }
[data-theme="nuit"] .pd-marque__symbole, .pd-marque__symbole--jaune { fill: var(--jaune); stroke: var(--jaune); }
.pd-marque__nom { --h: 13px; height: var(--h); width: calc(var(--h) * 13.47); fill: currentColor; flex: none; }
.pd-marque--grande { gap: 14px; }
.pd-marque--grande .pd-marque__symbole { --h: clamp(22px, 2.6vw, 30px); }
.pd-marque--grande .pd-marque__nom { --h: clamp(18px, 2.2vw, 26px); }
@media (min-width: 960px) {
  .pd-marque__symbole { --h: 18px; }
  .pd-marque__nom { --h: 15px; }
}
@container (max-width: 959px) { .pd-entete .pd-marque__symbole { --h: 15px; } .pd-entete .pd-marque__nom { --h: 13px; } }

/* ===== 4. Boutons et liens ===== */
.pd-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2); min-height: var(--cible); padding: 0 var(--esp-5); border: 0; border-radius: var(--rayon); background: var(--fond-2); color: var(--encre); font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--duree-courte) ease-out, color var(--duree-courte) ease-out, transform 100ms var(--sortie); }
.pd-btn:active { transform: scale(0.98); }
.pd-btn--jaune { background: var(--jaune); color: var(--sur-jaune); }
.pd-btn--plein { background: var(--encre); color: var(--fond); }
.pd-btn--discret { background: transparent; padding-inline: 12px; }
.pd-btn--danger { background: var(--erreur); color: var(--sur-erreur); }
/* Contour : pour un bouton secondaire posé sur une surface teintée (un aplat ne se pose jamais sur un aplat) */
.pd-btn--contour { background: transparent; box-shadow: inset 0 0 0 1px var(--trait-fort); }
.pd-btn--petit { min-height: 36px; padding: 0 12px; font-size: 14px; }
.pd-btn--grand { min-height: 56px; padding: 0 var(--esp-6); font-size: 16px; }
.pd-btn--large { width: 100%; }
.pd-btn--multiligne { white-space: normal; padding-block: 10px; }
.pd-btn--icone { flex: none; width: var(--cible); padding: 0; }
.pd-btn--icone.pd-btn--petit { width: 36px; }
.pd-btn--icone.pd-btn--grand { width: 56px; }
.pd-btn:disabled, .pd-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
/* Bouton à bascule enclenché : plein encre, icône remplie (favori enregistré, alerte active) */
.pd-btn[aria-pressed="true"] { background: var(--encre); color: var(--fond); }
.pd-btn[aria-pressed="true"] .pd-icone { fill: currentColor; }
/* Une bascule large (« Enregistrée ») garde son gris : l'icône pleine et le mot disent l'état, l'aplat noir écraserait l'action jaune voisine */
.pd-btn--large[aria-pressed="true"] { background: var(--fond-2); color: var(--encre); }
/* En cours : le texte reste, une roue tourne à sa place */
.pd-btn[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; }
.pd-btn[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: var(--rayon-rond); border: 2px solid currentColor; border-color: var(--encre) var(--encre) transparent transparent; animation: pd-tourne 0.8s linear infinite; }
.pd-btn--jaune[aria-busy="true"]::after { border-color: var(--sur-jaune) var(--sur-jaune) transparent transparent; }
.pd-btn--plein[aria-busy="true"]::after { border-color: var(--fond) var(--fond) transparent transparent; }
@keyframes pd-tourne { to { transform: rotate(360deg); } }
.pd-boutons { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
/* Un libellé long passe à la ligne plutôt que d'élargir la page (« Proposer une voiture à la location » à 320 px) */
.pd-boutons > .pd-btn { max-width: 100%; white-space: normal; }
/* « ou » : sépare deux façons de faire la même chose, sans filet */
.pd-ou { margin: 0; color: var(--encre-2); font-size: 14px; text-align: center; }
/* Sur une seule ligne : le premier bouton prend la place, les boutons à icône gardent la leur */
.pd-boutons--ligne { flex-wrap: nowrap; }
.pd-boutons--ligne > :not(.pd-btn--icone) { flex: 1 1 auto; min-width: 0; }
/* L'action principale d'abord : au téléphone, chaque bouton prend la ligne (jamais un secondaire plus large que le principal) ; côte à côte au-delà */
@media (max-width: 479px) { .pd-boutons--pile { flex-direction: column; } .pd-boutons--pile > :is(.pd-btn, button) { width: 100%; } }

.pd-lien { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--trait); transition: text-decoration-color var(--duree-courte) ease-out; }
/* Un lien isolé qui doit rester facile à toucher */
.pd-lien--cible { display: inline-flex; align-items: center; min-height: var(--cible); }
/* Une action qui envoie un formulaire mais se lit comme un lien (« Revendiquez-la ») */
button.pd-lien { padding: 0; border: 0; background: none; cursor: pointer; }
.pd-lien--fort { font-weight: 600; text-decoration-color: currentColor; }
:is(h1, h2, h3) > .pd-lien { font-weight: inherit; }  /* un titre-lien garde la graisse du titre */
[data-theme="nuit"] .pd-lien--fort { color: var(--encre); text-decoration-color: currentColor; }
.pd-lien--fleche { display: inline-flex; align-items: center; gap: var(--esp-1); text-decoration: none; font-weight: 600; }

/* ===== 5. Badges et étiquettes ===== */
/* Badge : un signe de course, incliné comme le logo. Le texte reste droit. */
.pd-badge { display: inline-flex; justify-self: start; transform: skewX(-14deg); border-radius: var(--rayon-petit); padding: 4px 10px; font-size: 12px; font-weight: 700; line-height: 16px; white-space: nowrap; background: var(--fond-2); color: var(--encre); }
.pd-badge > span { display: inline-flex; align-items: center; gap: var(--esp-1); transform: skewX(14deg); }
.pd-badge .pd-icone { width: 12px; height: 12px; stroke-width: 2.5; }
.pd-badge--jaune { background: var(--jaune); color: var(--sur-jaune); }
.pd-badge--blanc { background: #fff; color: #000; }
.pd-badge--encre { background: var(--encre); color: var(--fond); }
.pd-badge .pd-badge__court { display: none; }
@media (max-width: 479px) { .pd-badge--court .pd-badge__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .pd-badge--court .pd-badge__court { display: inline; } }
/* Le flash d'une baisse de prix : deux clignements, une seule fois, à l'arrivée à l'écran (js/pitstock.js) */
.pd-badge--flash.pd-allume { animation: pd-flash 1.1s steps(1, end) 1; }
@keyframes pd-flash {
  0%, 100% { background: var(--jaune); color: var(--sur-jaune); }
  18%, 54% { background: #000; color: #fff; }
  36%, 72% { background: var(--jaune); color: var(--sur-jaune); }
}

/* Étiquette : une donnée, droite et calme (classe, catégorie, homologation) */
.pd-etiquette { --fond-etiquette: var(--fond-2); position: relative; isolation: isolate; display: inline-flex; justify-self: start; align-items: center; gap: var(--esp-1); padding: 2px 10px; margin-inline: 2px; color: var(--encre); font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; }
/* Même forme inclinée que le prix et les badges : seul le fond penche, le texte reste droit */
.pd-etiquette::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--rayon-petit); background: var(--fond-etiquette); transform: skewX(-14deg); }
.pd-etiquette .pd-icone { width: 14px; height: 14px; }
.pd-etiquette--succes { --fond-etiquette: var(--succes-pale); color: var(--succes); }
.pd-etiquette--attention { --fond-etiquette: var(--attention-pale); color: var(--attention); }
.pd-etiquette--erreur { --fond-etiquette: var(--erreur-pale); color: var(--erreur); }
.pd-etiquette--info { --fond-etiquette: var(--info-pale); color: var(--info); }

/* Compteur : un nombre posé sur une icône ou un onglet */
.pd-compteur { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--rayon-rond); background: var(--jaune); color: var(--sur-jaune); font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }

/* ===== 6. Prix ===== */
.pd-prix { display: inline-flex; justify-self: start; transform: skewX(-14deg); border-radius: var(--rayon-petit); padding: 4px 12px; margin-left: 2px; background: var(--jaune-pale); color: var(--encre); }
.pd-prix > span { display: inline-flex; align-items: baseline; gap: var(--esp-2); transform: skewX(14deg); font-size: 16px; font-weight: 700; line-height: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-prix--sur-demande { background: var(--fond-2); }
.pd-prix--sur-demande > span { font-size: 14px; font-weight: 600; }
.pd-prix--grand { padding: 8px 18px; }
.pd-prix--grand > span { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
/* Sur le jaune pâle, le texte secondaire est une ombre du jaune, pas un gris */
/* L'ancien prix se pose à côté de l'aplat, pas dedans : il peut passer à la ligne */
.pd-prix__ancien { font-size: 13px; font-weight: 500; color: var(--encre-2); text-decoration: line-through; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-prix--grand.pd-prix--sur-demande > span { font-size: 18px; font-weight: 600; letter-spacing: 0; }
@media (min-width: 960px) { .pd-prix--grand > span { font-size: 36px; } .pd-prix--grand.pd-prix--sur-demande > span { font-size: 20px; } }


/* ===== 7. Champs de formulaire ===== */
.pd-champ { display: grid; gap: var(--esp-2); align-content: start; min-width: 0; }
.pd-champ__nom { font-size: 14px; font-weight: 600; line-height: 20px; }
.pd-champ__nom .pd-facultatif { font-weight: 400; color: var(--encre-2); }
.pd-champ__saisie { width: 100%; min-width: 0; min-height: 48px; padding: 0 14px; border: 0; border-radius: var(--rayon); background: var(--fond-2); color: var(--encre); font-size: 16px; line-height: 22px; appearance: none; transition: background-color var(--duree-courte) ease-out, box-shadow var(--duree-courte) ease-out; }
.pd-champ__saisie::placeholder { color: var(--encre-2); opacity: 1; }
.pd-champ__saisie:focus { outline: none; background: var(--fond); box-shadow: inset 0 0 0 1px var(--trait-fort); }
.pd-champ__saisie:focus::placeholder { color: transparent; }
.pd-champ__saisie:disabled { background: var(--fond-3); color: var(--encre-2); cursor: not-allowed; }
textarea.pd-champ__saisie { min-height: 132px; padding-block: 12px; resize: vertical; }
.pd-champ__aide { max-width: 60ch; font-size: 13px; line-height: 18px; color: var(--encre-2); }  /* la mesure du texte, même sous un champ large */
.pd-champ__pied { display: flex; justify-content: space-between; gap: var(--esp-4); }
.pd-champ__compteur { font-size: 13px; color: var(--encre-2); font-variant-numeric: tabular-nums; margin-left: auto; }
.pd-champ__erreur { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--erreur); }
.pd-champ__erreur .pd-icone { width: 16px; height: 16px; margin-top: 1px; }
.pd-champ--erreur .pd-champ__saisie { background: var(--erreur-pale); box-shadow: inset 0 0 0 1px var(--erreur); }
/* Liste déroulante : un chevron dessiné à droite */
.pd-champ__liste { position: relative; }
.pd-champ__liste .pd-champ__saisie { padding-right: 40px; cursor: pointer; }
.pd-champ__liste::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--encre); border-bottom: 2px solid var(--encre); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
/* Unité collée à la valeur (€, km, h) */
.pd-champ__unite { position: relative; }
.pd-champ__unite .pd-champ__saisie { padding-right: 44px; font-variant-numeric: tabular-nums; }
.pd-champ__unite > span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--encre-2); pointer-events: none; }
/* Deux bornes : prix de, à */
.pd-intervalle { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--esp-2); }
.pd-intervalle > span { color: var(--encre-2); font-size: 14px; }

/* Case à cocher, bouton radio, interrupteur : l'input natif, redessiné */
.pd-case { display: flex; align-items: flex-start; gap: var(--esp-3); min-height: var(--cible); padding: 11px 0; cursor: pointer; line-height: 22px; }
.pd-case input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; appearance: none; border: 1.5px solid var(--trait-fort); border-radius: var(--rayon-petit); background: var(--fond) center / 14px no-repeat; cursor: pointer; transition: background-color var(--duree-courte) ease-out, border-color var(--duree-courte) ease-out; }
.pd-case input[type="radio"] { border-radius: var(--rayon-rond); }
.pd-case input:checked { border-color: var(--encre); background-color: var(--encre); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
[data-theme="nuit"] .pd-case input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.pd-case input[type="radio"]:checked { background-image: none; box-shadow: inset 0 0 0 4px var(--fond); }
.pd-case input:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
.pd-case input:disabled { opacity: 0.45; cursor: not-allowed; }
.pd-case__texte { display: grid; gap: 2px; }
.pd-case__texte small { font-size: 13px; line-height: 18px; color: var(--encre-2); }
/* Ce qu'une case cochée ouvre (disciplines et tarif d'une prestation) : rangé sous son libellé, puis un palier avant la case suivante */
.pd-case__suite { margin-left: calc(20px + var(--esp-3)); padding-bottom: var(--esp-5); }
.pd-case__nombre { margin-left: auto; color: var(--encre-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.pd-cases { display: grid; }
.pd-cases--colonnes { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); column-gap: var(--esp-4); }  /* deux colonnes dès 320 px */
/* Longue liste de cases (plus de douze choix) : elle défile dans sa propre hauteur */
.pd-cases--defile > div { max-height: min(288px, 40dvh); overflow-y: auto; overscroll-behavior: contain; }
.pd-interrupteur { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); min-height: var(--cible); cursor: pointer; }
.pd-interrupteur input { flex: none; width: 44px; height: 26px; margin: 0; appearance: none; border-radius: var(--rayon-rond); background: var(--trait-fort) radial-gradient(circle at 13px 50%, var(--fond) 9px, transparent 9.5px) no-repeat; cursor: pointer; transition: background-color var(--duree-courte) ease-out, background-position var(--duree-courte) ease-out; }
.pd-interrupteur input:checked { background-color: var(--encre); background-position: 18px 0; }
.pd-interrupteur input:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }

/* Choix en cartes (type d'annonce, formule) : un bouton radio caché, toute la carte se coche */
.pd-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2); }
@media (min-width: 720px) { .pd-choix { grid-template-columns: repeat(3, minmax(0, 1fr)); } }  /* six types : 3 + 3, jamais 4 + 2 */
.pd-choix__carte { position: relative; display: grid; gap: var(--esp-1); align-content: start; padding: 16px; border-radius: var(--rayon-grand); background: var(--fond-2); cursor: pointer; transition: background-color var(--duree-courte) ease-out, box-shadow var(--duree-courte) ease-out; }
.pd-choix__carte input { position: absolute; opacity: 0; pointer-events: none; }
.pd-choix__carte .pd-icone { width: 28px; height: 28px; margin-bottom: 6px; }
.pd-choix__carte strong { font-weight: 600; }
.pd-choix__carte small { font-size: 13px; line-height: 18px; color: var(--encre-2); }
/* Coché : un aplat noir, comme un filtre actif. Pas de cadre. */
.pd-choix__carte:has(input:checked), .pd-choix__carte:has(input:checked) small { background: var(--encre); color: var(--fond); }
.pd-choix__carte:has(input:checked) small { background: none; }
.pd-choix__carte:has(input:focus-visible) { outline: 2px solid var(--encre); outline-offset: 2px; }

/* Groupe de champs : un fieldset sans cadre, titré */
.pd-groupe { border: 0; margin: 0; padding: 0; display: grid; gap: var(--esp-4); min-width: 0; }
.pd-groupe > legend { padding: 0; margin-bottom: var(--esp-3); }
/* Deux cases de suite dans un groupe : une liste, pas deux champs (les cibles de 44 px se touchent) */
.pd-groupe > .pd-champ:has(> .pd-case:first-child) + .pd-champ:has(> .pd-case:first-child) { margin-top: calc(-1 * var(--esp-4)); }
.pd-grille-champs { display: grid; gap: var(--esp-4); }
/* Deux champs courts côte à côte à toutes les tailles (du, au) */
.pd-grille-champs--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4) var(--esp-3); }
@media (min-width: 720px) { .pd-grille-champs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pd-grille-champs > .pd-champ--plein { grid-column: 1 / -1; } }
/* Un montant et sa devise : toujours sur une ligne, le montant d'abord */
.pd-grille-champs--montant { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--esp-4) var(--esp-3); }

/* Téléversement des photos */
.pd-televersement { position: relative; display: grid; justify-items: center; gap: var(--esp-2); padding: 28px 20px; border-radius: var(--rayon-grand); background: var(--fond-2); text-align: center; cursor: pointer; transition: background-color var(--duree-courte) ease-out; }
.pd-televersement--survol { background: var(--fond-3); }
.pd-televersement input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pd-televersement:has(input:focus-visible) { outline: 2px solid var(--encre); outline-offset: 2px; }
.pd-televersement small { font-size: 13px; color: var(--encre-2); }
.pd-televersement[aria-busy="true"] { opacity: 0.6; pointer-events: none; cursor: progress; }  /* envoi parti au choix des fichiers */
.pd-vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--esp-2); }
@media (min-width: 720px) { .pd-vignettes { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); } }
.pd-vignette { position: relative; aspect-ratio: 4 / 3; border-radius: var(--rayon); overflow: hidden; background: var(--fond-2); }
.pd-vignette img { width: 100%; height: 100%; object-fit: cover; }
.pd-vignette .pd-badge { position: absolute; left: 6px; bottom: 6px; }
/* Retirer une photo : un carré blanc de 32 px dans une cible de 44 px, au coin de la vignette */
.pd-vignette__retirer { position: absolute; top: 0; right: 0; width: var(--cible); height: var(--cible); display: flex; align-items: flex-start; justify-content: flex-end; padding: 12px; border: 0; background: none; color: #000; cursor: pointer; }
.pd-vignette__retirer::before { content: ""; position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: var(--rayon); background: #fff; }
.pd-vignette__retirer .pd-icone { position: relative; width: 16px; height: 16px; }
/* Envoi d'une photo : la barre de progression en bas de la vignette */
.pd-vignette .pd-progression__barre { position: absolute; left: 8px; right: 8px; bottom: 8px; width: auto; height: 4px; }

/* Date seule (mise en circulation, disponible à partir du) : le sélecteur natif du téléphone, aligné comme un champ */
.pd-champ__saisie[type="date"], .pd-champ__saisie[type="time"] { display: flex; align-items: center; text-align: left; }
.pd-champ__saisie::-webkit-date-and-time-value { text-align: left; }
.pd-champ__saisie::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }
/* Un bouton dans le champ : afficher le mot de passe, effacer. pd-champ__ancre porte une liste de suggestions. */
.pd-champ__avec-action, .pd-champ__ancre { position: relative; }
.pd-champ__avec-action .pd-champ__saisie { padding-right: 52px; }
.pd-champ__action { position: absolute; top: 50%; right: 2px; transform: translateY(-50%); }
.pd-champ__action:active { transform: translateY(-50%) scale(0.96); }
/* Code reçu par email : un seul champ (le téléphone propose le code reçu), chiffres espacés */
.pd-champ__saisie--code { max-width: 280px; min-height: 56px; font-size: 24px; font-weight: 700; letter-spacing: 0.4em; text-indent: 0.4em; text-align: center; font-variant-numeric: tabular-nums; }
/* Bouton qui ouvre un calendrier dans un menu : il a l'air d'un champ */
summary.pd-champ__saisie { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); list-style: none; cursor: pointer; }
summary.pd-champ__saisie::-webkit-details-marker { display: none; }
summary.pd-champ__saisie .pd-icone { width: 20px; height: 20px; color: var(--encre-2); }
.pd-menu[open] > summary.pd-champ__saisie { background: var(--fond); box-shadow: inset 0 0 0 1px var(--trait-fort); }
.pd-champ__vide { color: var(--encre-2); }

/* Quantité (pièces vendues par lot) : moins, nombre, plus, sur un seul aplat */
.pd-quantite { display: inline-flex; align-items: center; justify-self: start; border-radius: var(--rayon); background: var(--fond-2); }
.pd-quantite button { display: flex; align-items: center; justify-content: center; width: var(--cible); height: 48px; padding: 0; border: 0; border-radius: var(--rayon); background: transparent; color: var(--encre); cursor: pointer; }
.pd-quantite button:active { transform: scale(0.94); }
.pd-quantite button[aria-disabled="true"] { opacity: 0.35; cursor: not-allowed; }
.pd-quantite input { width: 4ch; min-width: 40px; height: 48px; padding: 0; border: 0; border-radius: var(--rayon-petit); background: transparent; font-size: 16px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
.pd-quantite input::-webkit-inner-spin-button, .pd-quantite input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pd-quantite input:focus-visible { outline-offset: -2px; }

/* Curseur à deux poignées (prix, année) : toujours avec les deux champs, qui restent la saisie précise.
   La piste est grise, la plage choisie noire, les poignées des carrés noirs de 28 px. */
.pd-curseur { position: relative; height: var(--cible); }
.pd-curseur__piste { position: absolute; left: 14px; right: 14px; top: 50%; height: 4px; margin-top: -2px; border-radius: var(--rayon-rond); background: var(--fond-3); }
.pd-curseur__plage { position: absolute; top: 0; bottom: 0; left: var(--debut, 0%); right: calc(100% - var(--fin, 100%)); border-radius: inherit; background: var(--encre); }
.pd-curseur input { position: absolute; left: 0; right: 0; top: 50%; width: 100%; height: 28px; margin: -14px 0 0; padding: 0; background: none; -webkit-appearance: none; appearance: none; pointer-events: none; }
.pd-curseur input::-webkit-slider-runnable-track { height: 28px; background: none; }
.pd-curseur input::-moz-range-track { height: 28px; background: none; }
.pd-curseur input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border: 0; border-radius: var(--rayon); background: var(--encre); pointer-events: auto; cursor: grab; transition: transform var(--duree-courte) var(--sortie); }
.pd-curseur input::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: var(--rayon); background: var(--encre); pointer-events: auto; cursor: grab; }
.pd-curseur input:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.1); }
.pd-curseur input:focus-visible { outline: none; }
.pd-curseur input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--encre); outline-offset: 2px; }
.pd-curseur input:focus-visible::-moz-range-thumb { outline: 2px solid var(--encre); outline-offset: 2px; }

/* Calendrier (js/pitstock.js) : un mois, deux côte à côte à partir de 720 px avec data-mois="2", lundi en premier.
   Le jour choisi est un aplat noir ; une période, un aplat gris entre ses deux bouts noirs ; aujourd'hui,
   un point sous le chiffre ; un jour déjà pris est barré ; un jour passé, effacé. */
.pd-calendrier { position: relative; display: grid; gap: var(--esp-3); width: 100%; max-width: 360px; }
.pd-calendrier[data-mois="2"] { max-width: 760px; }
.pd-calendrier__mois { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--esp-6); }
.pd-calendrier__precedent, .pd-calendrier__suivant { position: absolute; z-index: 1; top: 0; }
.pd-calendrier__precedent { left: -10px; }
.pd-calendrier__suivant { right: -10px; }
.pd-calendrier__grille { width: 100%; border-collapse: separate; border-spacing: 0 2px; table-layout: fixed; }
.pd-calendrier__grille caption { height: var(--cible); line-height: var(--cible); margin-bottom: var(--esp-1); font-size: 16px; font-weight: 600; }
.pd-calendrier__grille th { height: 28px; padding: 0; font-size: 12px; font-weight: 600; color: var(--encre-2); }
.pd-calendrier__grille abbr { text-decoration: none; }
.pd-calendrier__grille td { padding: 0; text-align: center; }
.pd-calendrier__jour { position: relative; width: 100%; height: var(--cible); padding: 0; border: 0; border-radius: var(--rayon); background: none; color: var(--encre); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; }
.pd-calendrier__jour:active { transform: scale(0.94); }
.pd-calendrier__jour[aria-current="date"] { font-weight: 700; }
.pd-calendrier__jour[aria-current="date"]::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 4px; height: 4px; margin-left: -2px; border-radius: var(--rayon-rond); background: currentColor; }
.pd-calendrier__jour[aria-pressed="true"] { background: var(--encre); color: var(--fond); }
.pd-calendrier__jour[aria-disabled="true"] { color: var(--encre-2); cursor: not-allowed; }
.pd-calendrier__jour--passe { opacity: 0.45; }
.pd-calendrier__jour--pris { text-decoration: line-through; text-decoration-thickness: 1.5px; }
/* La période : un ruban gris continu d'un bout à l'autre, arrondi au bout de chaque semaine */
.pd-calendrier__dans { background: var(--fond-2); }
.pd-calendrier__debut { background: linear-gradient(90deg, transparent 50%, var(--fond-2) 50%); }
.pd-calendrier__fin { background: linear-gradient(90deg, var(--fond-2) 50%, transparent 50%); }
.pd-calendrier__dans:first-child { border-radius: var(--rayon) 0 0 var(--rayon); }
.pd-calendrier__dans:last-child { border-radius: 0 var(--rayon) var(--rayon) 0; }
.pd-calendrier__debut:last-child, .pd-calendrier__fin:first-child { background: none; }
.pd-calendrier__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-4); min-height: 36px; }
.pd-calendrier__resume { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pd-calendrier__legende { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-4); margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--encre-2); }
.pd-calendrier__legende li { display: inline-flex; align-items: center; gap: var(--esp-2); }
.pd-calendrier__repere { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--rayon-petit); color: var(--encre); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pd-calendrier__repere--pris { color: var(--encre-2); text-decoration: line-through; }
.pd-calendrier__repere--choisi { background: var(--encre); color: var(--fond); }
/* Dans un menu : le panneau prend la largeur du calendrier ; sur téléphone, le calendrier se centre dans la feuille */
.pd-menu__panneau:has(.pd-calendrier) { width: max-content; max-width: calc(100vw - 2 * var(--marge-page)); }
.pd-menu__panneau .pd-calendrier { margin-inline: auto; }
@media (max-width: 719px) { .pd-menu__panneau:has(.pd-calendrier) { width: auto; max-width: none; } }

/* ===== 8. Recherche ===== */
.pd-recherche { display: flex; gap: var(--esp-2); width: 100%; max-width: 720px; }
.pd-recherche__champ { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--esp-3); min-height: 56px; padding: 0 16px; border-radius: var(--rayon); background: var(--fond-2); font-size: 17px; transition: background-color var(--duree-courte) ease-out, box-shadow var(--duree-courte) ease-out; }
.pd-recherche__champ input { flex: 1; min-width: 0; border: 0; padding: 0; background: transparent; color: var(--encre); font-size: inherit; text-overflow: ellipsis; }
.pd-recherche__champ input::placeholder { color: var(--encre-2); opacity: 1; }
.pd-recherche__champ input:focus { outline: none; }
.pd-recherche__champ input:focus::placeholder { color: transparent; }
.pd-recherche__champ input::-webkit-search-cancel-button { display: none; }
.pd-recherche__champ:focus-within { background: var(--fond); box-shadow: inset 0 0 0 1px var(--trait-fort); }
.pd-recherche__champ > .pd-icone { display: none; }
/* Téléphone : le bouton est un carré avec la loupe ; son nom reste lu */
.pd-recherche__bouton { flex: none; width: 56px; min-height: 56px; padding: 0; }
.pd-recherche__bouton .pd-recherche__texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Variante compacte, en tête des pages intérieures */
.pd-recherche--compacte .pd-recherche__champ { min-height: 44px; font-size: 16px; padding: 0 12px; }
.pd-recherche--compacte .pd-recherche__bouton { width: 44px; min-height: 44px; }
@media (min-width: 480px) {
  .pd-recherche__champ { padding: 0 20px; }
  .pd-recherche__champ > .pd-icone { display: block; color: var(--encre-2); }
  .pd-recherche:not(.pd-recherche--compacte) .pd-recherche__bouton { width: auto; padding: 0 28px; }
  .pd-recherche:not(.pd-recherche--compacte) .pd-recherche__bouton .pd-icone { display: none; }
  .pd-recherche:not(.pd-recherche--compacte) .pd-recherche__texte { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}

/* Suggestions (js/pitstock.js) : sous le champ, des recherches récentes quand il est vide, puis des rubriques et des
   annonces qui complètent ce qu'on tape (servies par le serveur : <a role="option"> vers la page ou la fiche, le
   prix ou le nombre à droite). La partie tapée reste maigre, la suite est en gras. */
.pd-recherche { position: relative; }
.pd-suggestions { text-align: left; position: absolute; z-index: var(--z-menu); top: calc(100% + 6px); left: 0; right: 0; max-height: min(420px, 60dvh); overflow-y: auto; overscroll-behavior: contain; padding: var(--esp-2); border-radius: var(--rayon-grand); background: var(--fond); color: var(--encre); box-shadow: var(--ombre-flottant); }
.pd-suggestions__groupe { display: grid; grid-template-columns: minmax(0, 1fr); }
.pd-suggestions__groupe + .pd-suggestions__groupe { margin-top: var(--esp-2); }
.pd-suggestions__titre { padding: var(--esp-2) var(--esp-3) var(--esp-1); font-size: 12px; font-weight: 600; color: var(--encre-2); }
.pd-suggestions__option { display: flex; align-items: center; gap: var(--esp-3); min-height: var(--cible); padding: 0 var(--esp-3); border-radius: var(--rayon); font-size: 15px; color: inherit; text-decoration: none; cursor: pointer; }
.pd-suggestions__option > .pd-icone { width: 18px; height: 18px; color: var(--encre-2); }
.pd-suggestions__option[aria-selected="true"] { background: var(--fond-2); }
.pd-suggestions__texte { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pd-suggestions__texte mark { background: none; color: inherit; font-weight: 400; }
.pd-suggestions__nombre { flex: none; white-space: nowrap; font-size: 13px; color: var(--encre-2); font-variant-numeric: tabular-nums; }
/* La recherche compacte de l'en-tête : la liste peut dépasser la largeur du champ */
.pd-recherche--compacte .pd-suggestions { min-width: min(400px, calc(100vw - 2 * var(--marge-page))); }

/* ===== 9. Filtres et tri ===== */
.pd-filtres { display: flex; gap: var(--esp-2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--marge-page)); padding: 2px var(--marge-page); }
/* À partir de 720 px, les filtres passent à la ligne au lieu de défiler : leurs menus ne sont plus rognés */
@media (min-width: 720px) { .pd-filtres { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }
.pd-filtres::-webkit-scrollbar { display: none; }
.pd-filtres > * { flex: none; }
.pd-filtres__nom { align-self: center; margin-left: var(--esp-2); font-size: 13px; color: var(--encre-2); white-space: nowrap; }  /* ce qu'est la suite de la rangée (« Par classe ») */
.pd-filtre { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; min-height: 40px; padding: 0 12px 0 14px; border: 0; border-radius: var(--rayon); background: var(--fond-2); color: var(--encre); font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; list-style: none; transition: background-color var(--duree-courte) ease-out; }
.pd-filtre::-webkit-details-marker { display: none; }
summary.pd-btn { list-style: none; }
summary.pd-btn::-webkit-details-marker { display: none; }
.pd-filtre:active, .pd-favori:active > span { transform: scale(0.96); }
.pd-filtre .pd-icone { width: 16px; height: 16px; }
/* Un filtre peut être un lien (page d'une classe, d'un type) : pas de soulignement */
a.pd-filtre { text-decoration: none; }
.pd-filtre--actif, .pd-filtre[aria-pressed="true"] { background: var(--encre); color: var(--fond); }
.pd-filtre__nombre { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--rayon-rond); background: var(--jaune); color: var(--sur-jaune); font-size: 12px; font-weight: 700; }
/* Filtre appliqué : on le retire d'un toucher */
.pd-filtre--retirable { padding-right: 8px; }
.pd-filtres-actifs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }

/* Menu déroulant : <details class="pd-menu"><summary class="pd-filtre">…</summary><div class="pd-menu__panneau">…</div></details> */
.pd-menu { position: relative; }
.pd-menu[open] > .pd-filtre { background: var(--encre); color: var(--fond); }
.pd-menu[open] > .pd-filtre .pd-icone { transform: rotate(180deg); }
.pd-menu__panneau { position: absolute; z-index: var(--z-menu); top: calc(100% + 6px); left: 0; width: min(320px, calc(100vw - 2 * var(--marge-page))); padding: var(--esp-4); border-radius: var(--rayon-grand); background: var(--fond); color: var(--encre); box-shadow: var(--ombre-flottant); }
.pd-menu--droite .pd-menu__panneau { left: auto; right: 0; }
/* Téléphone : un menu ouvert monte du bas de l'écran, sur un voile ; il n'est ni rogné par la rangée qui défile
   ni poussé hors de l'écran. Un toucher à côté ou Échap le referme (js/pitstock.js). */
@media (max-width: 719px) {
  .pd-menu[open]::before { content: ""; position: fixed; inset: 0; z-index: var(--z-menu); background: var(--voile); }
  .pd-menu__panneau, .pd-menu--droite .pd-menu__panneau { position: fixed; z-index: calc(var(--z-menu) + 1); top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 80dvh; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--rayon-grand) var(--rayon-grand) 0 0; padding: var(--esp-5) var(--marge-page) calc(var(--esp-5) + env(safe-area-inset-bottom, 0px)); }
}
.pd-menu__titre { font-size: 14px; font-weight: 600; margin-bottom: var(--esp-2); }
.pd-menu__actions { display: flex; justify-content: space-between; gap: var(--esp-2); margin-top: var(--esp-4); }
.pd-menu__liste { display: grid; margin: calc(-1 * var(--esp-2)) calc(-1 * var(--esp-2)); }
.pd-menu__option { display: flex; align-items: center; gap: var(--esp-3); min-height: var(--cible); padding: 0 var(--esp-2); border: 0; border-radius: var(--rayon); background: none; text-align: left; text-decoration: none; cursor: pointer; }
.pd-menu__option[aria-current="true"], .pd-menu__option[aria-checked="true"] { font-weight: 600; }
.pd-menu__option[aria-current="true"]::after, .pd-menu__option[aria-checked="true"]::after { content: ""; width: 12px; height: 7px; margin-left: auto; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-2px); }

/* En-tête de résultats : nombre d'annonces, tri, vue */
.pd-resultats-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-4); margin: var(--esp-3) 0 var(--esp-4); }
@media (max-width: 959px) { .pd-resultats-tete .pd-btn--petit { min-height: var(--cible); } }
.pd-resultats-tete__nombre { font-size: 15px; font-weight: 600; }
.pd-resultats-tete__nombre span { font-weight: 400; color: var(--encre-2); }
.pd-vues { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--rayon); background: var(--fond-2); }
.pd-vues button { display: flex; align-items: center; justify-content: center; width: 36px; height: 32px; border: 0; border-radius: var(--rayon-petit); background: transparent; color: var(--encre-2); cursor: pointer; }
.pd-vues button[aria-pressed="true"] { background: var(--fond); color: var(--encre); }
.pd-vues .pd-icone { width: 18px; height: 18px; }

/* ===== 10. Carte d'annonce ===== */
/* Une ligne (photo à gauche) sur téléphone, une carte (photo au-dessus) à partir de 480 px. Toute la carte est cliquable. */
.pd-grille-annonces { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); }
.pd-carte { position: relative; display: grid; grid-template-columns: 116px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: var(--esp-3); align-content: start; }
.pd-carte__photo { grid-row: 1 / -1; position: relative; aspect-ratio: 4 / 3; border-radius: var(--rayon-grand); overflow: hidden; background: var(--fond-2); align-self: start; }
.pd-carte__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duree-longue) var(--sortie); }
.pd-carte__photo .pd-badge { position: absolute; top: 8px; left: 10px; }
.pd-carte__nombre { position: absolute; right: 8px; bottom: 8px; display: none; align-items: center; gap: 4px; padding: 2px 6px; border-radius: var(--rayon-petit); background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pd-carte__nombre .pd-icone { width: 14px; height: 14px; }
.pd-carte__titre { font-size: 15px; font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-carte__titre a { text-decoration: none; }
/* Les mots trouvés par la recherche texte : aplat jaune, texte noir (le jaune, c'est la recherche) */
.pd-carte__titre mark { background: var(--jaune); color: var(--sur-jaune); }
.pd-carte__titre a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pd-carte__titre a:focus-visible { outline: none; }
.pd-carte__titre a:focus-visible::after { outline: 2px solid var(--encre); outline-offset: 4px; border-radius: var(--rayon-grand); }
.pd-carte__details { font-size: 13px; line-height: 18px; color: var(--encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-carte__prix { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-2); margin-top: var(--esp-2); }
.pd-carte .pd-vendeur { grid-column: 2; margin-top: 12px; }
/* Le favori passe au-dessus du lien de la carte : dans le coin de la photo sur une carte, à droite du titre sur une ligne */
.pd-carte > .pd-favori { position: absolute; top: 2px; right: 2px; z-index: 2; }
.pd-carte--sans-photo .pd-carte__photo { display: flex; align-items: center; justify-content: center; color: var(--encre-2); }
.pd-carte--sans-photo .pd-carte__photo::after { content: "Pas de photo"; font-size: 12px; }
/* Vendue ou retirée : on la garde lisible, on la dit hors course */
.pd-carte--vendue .pd-carte__titre, .pd-carte--vendue .pd-prix > span { color: var(--encre-2); }
.pd-carte--vendue .pd-prix { background: var(--fond-2); }
/* Téléphone : une liste légère. La photo et son badge, le titre et le cœur, les détails, le prix en
   simple texte gras. Pas de vendeur, pas d'aplat sous le prix, pas de filet : l'espace sépare. */
@media (max-width: 479px) {
  .pd-grille-annonces { gap: var(--esp-5); }
  /* Le titre sur deux lignes : la taille d'un pneu ou une référence tombe souvent en fin de titre */
  .pd-carte__titre { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .pd-carte:has(> .pd-favori) .pd-carte__titre { padding-right: 30px; }
  .pd-carte > .pd-favori { top: -12px; right: -9px; }
  .pd-carte > .pd-favori > span, .pd-carte > .pd-favori[aria-pressed="true"] > span { background: transparent; color: var(--encre); }
  .pd-carte__prix { margin-top: var(--esp-2); }
  .pd-carte .pd-prix, .pd-carte--vendue .pd-prix { transform: none; margin-left: 0; padding: 0; background: none; }
  .pd-carte .pd-prix > span { transform: none; font-size: 15px; }
  .pd-carte .pd-prix--sur-demande > span { font-size: 14px; font-weight: 500; color: var(--encre-2); }
  .pd-carte .pd-vendeur { display: none; }
}
@media (min-width: 480px) {
  .pd-grille-annonces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-6) var(--esp-4); }
  .pd-carte { display: flex; flex-direction: column; }
  .pd-carte__photo { margin-bottom: var(--esp-3); align-self: stretch; }
  .pd-carte__photo .pd-badge { top: 10px; left: 12px; }
  .pd-carte__nombre { display: inline-flex; }
}
@media (min-width: 720px) { .pd-grille-annonces { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .pd-grille-annonces { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-6) var(--esp-5); } }
/* Aperçu de quatre annonces (accueil, annonces proches) : trois colonnes de 720 à 959 px, pas de carte orpheline */
@media (min-width: 720px) and (max-width: 959px) { .pd-grille-annonces--apercu > :nth-child(n + 4) { display: none; } }
/* Liste : une ligne à toutes les tailles (vue liste, favoris, annonces d'un vendeur) */
.pd-grille-annonces--liste { grid-template-columns: minmax(0, 1fr) !important; gap: var(--esp-4); }
.pd-grille-annonces--sans-vendeur .pd-vendeur { display: none; }  /* sur la page même du vendeur (profil, boutique, team) */
.pd-grille-annonces--liste .pd-carte { display: grid; grid-template-columns: 116px minmax(0, 1fr); }
.pd-grille-annonces--liste .pd-carte__photo { margin-bottom: 0; }
@media (min-width: 720px) { .pd-grille-annonces--liste .pd-carte { grid-template-columns: 220px minmax(0, 1fr); column-gap: var(--esp-5); } .pd-grille-annonces--liste .pd-carte__titre { font-size: 17px; white-space: normal; } }

/* Favori : 44 px de cible, un carré de 30 px dessiné */
.pd-favori { width: var(--cible); height: var(--cible); display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.pd-favori > span { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: var(--rayon); background: #fff; color: #000; transition: transform 0.2s var(--sortie); }
.pd-favori .pd-icone { width: 17px; height: 17px; }
.pd-favori[aria-pressed="true"] > span { background: #000; color: #fff; }
.pd-favori[aria-pressed="true"] .pd-icone { fill: currentColor; }

/* ===== 11. Vendeur et avatar ===== */
/* Avatar : gris pour un particulier, noir pour un pro, carré pour la source d'une annonce reprise.
   Le jaune pâle reste aux prix et aux messages envoyés. */
.pd-vendeur { display: flex; align-items: center; gap: var(--esp-2); min-width: 0; font-size: 13px; line-height: 1.3; }
.pd-vendeur__qui { display: grid; min-width: 0; }
.pd-vendeur__nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-vendeur__role { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--encre-2); }
.pd-vendeur__verifie { width: 13px; height: 13px; stroke: var(--encre); stroke-width: 2.5; }
.pd-vendeur--grand { gap: var(--esp-3); font-size: 15px; }
.pd-vendeur--grand .pd-vendeur__role { font-size: 13px; }
.pd-avatar { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--rayon-rond); background: var(--fond-3); color: var(--encre); font-size: 11px; font-weight: 700; }
.pd-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pd-avatar--pro { background: var(--encre); color: var(--fond); }
.pd-avatar--source { border-radius: var(--rayon); background: var(--fond-2); color: var(--encre-2); }
.pd-avatar--grand { width: 48px; height: 48px; font-size: 16px; }

/* Profil d'un vendeur (page publique, boutique d'un pro) : qui, d'où, depuis quand, et comment le joindre */
.pd-profil { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--esp-4); }
.pd-profil > .pd-avatar { width: 64px; height: 64px; font-size: 22px; }
.pd-profil__qui { display: grid; gap: var(--esp-1); min-width: 0; }
.pd-profil__role { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.pd-profil__role .pd-icone { width: 16px; height: 16px; }
.pd-profil__faits { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5); margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--encre-2); }
.pd-profil__faits li { display: inline-flex; align-items: center; gap: 6px; }
.pd-profil__faits .pd-icone { width: 16px; height: 16px; }
.pd-profil__texte { grid-column: 1 / -1; }
.pd-profil__actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--esp-2); }
@media (min-width: 720px) {
  .pd-profil { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--esp-5); row-gap: var(--esp-3); }
  .pd-profil > .pd-avatar { grid-row: span 2; width: 88px; height: 88px; font-size: 28px; }
  .pd-profil__faits { grid-column: 2; }
  .pd-profil__texte { grid-column: 2 / -1; }  /* la description s'aligne sur le nom */
  .pd-profil__actions { grid-column: 3; grid-row: 1 / span 2; display: flex; }
}

/* Prestations d'une team : chaque service avec ses disciplines, son tarif et sa description. Pas de cadre. */
.pd-prestations { display: grid; gap: var(--esp-6); margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .pd-prestations { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--esp-7); } }
.pd-prestation { display: grid; gap: var(--esp-2); align-content: start; min-width: 0; }
.pd-prestation__tete { display: grid; gap: var(--esp-1); }  /* le tarif toujours sous le nom, comme le prix sous le titre d'une carte */
.pd-prestation__tarif { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-prestation__tarif--sur-demande { font-weight: 600; color: var(--encre-2); }
.pd-prestation__texte { max-width: 60ch; margin: 0; color: var(--encre-2); line-height: 1.5; }

/* Équipe d'une team : les personnes et leur rôle, avatar à initiales, en grille. */
.pd-equipe { display: grid; gap: var(--esp-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 480px) { .pd-equipe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .pd-equipe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Chiffres clés (tableau de bord pro, statistiques) : le libellé, le nombre en grand, l'écart. Pas de cadre. */
.pd-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-5) var(--esp-4); margin: 0; }
@media (min-width: 720px) { .pd-chiffres { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--esp-6); } .pd-chiffres:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pd-chiffre { display: flex; flex-direction: column; gap: var(--esp-1); min-width: 0; }
.pd-chiffre dt { font-size: 13px; line-height: 18px; color: var(--encre-2); }
.pd-chiffre__valeur { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.pd-chiffre__ecart { display: inline-flex; align-items: center; gap: var(--esp-1); font-size: 13px; font-weight: 600; }
.pd-chiffre__ecart .pd-icone { width: 14px; height: 14px; stroke-width: 2.5; }
.pd-chiffre__ecart--positif { color: var(--succes); }
.pd-chiffre__ecart--negatif { color: var(--erreur); }
.pd-chiffre__ecart--neutre { color: var(--encre-2); font-weight: 500; }
/* Chiffre qui mène à sa page (tableau de bord du compte) : tout le chiffre est cliquable */
.pd-chiffre:has(.pd-chiffre__lien) { position: relative; }
.pd-chiffre__lien { text-decoration: none; }
.pd-chiffre__lien::after { content: ""; position: absolute; inset: calc(-1 * var(--esp-2)); border-radius: var(--rayon); }
.pd-chiffre__lien:focus-visible { outline: none; }
.pd-chiffre__lien:focus-visible::after { outline: 2px solid var(--encre); outline-offset: 2px; }
.pd-chiffre__note { font-size: 13px; line-height: 18px; color: var(--encre-2); }
/* À traiter (messages non lus, signalements) : le nombre en orange brûlé ; le libellé dit pourquoi */
.pd-chiffre--attention .pd-chiffre__valeur { color: var(--attention); }
/* Compacts : des chiffres plus petits, quand ils ne sont qu'un raccourci en tête de page */
.pd-chiffres--compact .pd-chiffre__valeur { font-size: 24px; }

/* Progression (photos envoyées, annonce complète à 70 %) : toujours avec le texte de la valeur */
.pd-progression { display: grid; gap: var(--esp-2); }
.pd-progression__tete { display: flex; justify-content: space-between; gap: var(--esp-3); font-size: 14px; font-weight: 600; }
.pd-progression__tete > :last-child { font-weight: 500; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.pd-progression__barre { display: block; width: 100%; height: 6px; border: 0; border-radius: var(--rayon-rond); background: var(--fond-3); overflow: hidden; -webkit-appearance: none; appearance: none; }
.pd-progression__barre::-webkit-progress-bar { background: var(--fond-3); border-radius: inherit; }
.pd-progression__barre::-webkit-progress-value { background: var(--jaune); border-radius: inherit; transition: width var(--duree) var(--sortie); }
.pd-progression__barre::-moz-progress-bar { background: var(--jaune); border-radius: inherit; }
/* Histogramme : une barre par jour en SVG (hauteurs par attributs), jaune sur gris comme la progression ; le SVG est décoratif, les chiffres vont dans un tableau pd-sr */
.pd-histogrammes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-5); }
@media (min-width: 720px) { .pd-histogrammes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-5) var(--esp-6); } }
.pd-histogramme { display: grid; gap: var(--esp-2); margin: 0; min-width: 0; }
.pd-histogramme__tete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-3); font-size: 14px; font-weight: 600; }
.pd-histogramme__total { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pd-histogramme__svg { display: block; width: 100%; height: 72px; }
.pd-histogramme__fond { fill: var(--fond-2); }
.pd-histogramme__barre { fill: var(--jaune); }
.pd-histogramme__dates { display: flex; justify-content: space-between; gap: var(--esp-3); font-size: 13px; color: var(--encre-2); }
.pd-histogramme__note { font-size: 13px; color: var(--encre-2); margin: 0; }

/* Code à recopier (revendiquer une annonce) : la valeur en grand, un bouton pour copier */
.pd-code { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-3) var(--esp-3) var(--esp-3) var(--esp-5); border-radius: var(--rayon-grand); background: var(--fond-2); }
.pd-code__valeur { font-family: var(--font-sans); font-size: 22px; font-weight: 800; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; -webkit-user-select: all; user-select: all; }
/* Dans une phrase */
.pd-code--en-ligne { display: inline; padding: 1px 6px; border-radius: var(--rayon-petit); font-weight: 700; letter-spacing: 0.04em; }

/* ===== 12. En-tête, navigation ===== */
/* Une seule barre. L'en-tête réagit à sa propre largeur (requêtes de conteneur), pas à celle de la fenêtre.
   Sur les pages intérieures, la recherche compacte passe à la ligne sur téléphone et se range entre la
   marque et les rubriques sur ordinateur ; les rubriques n'y reviennent qu'à partir de 1 280 px. */
/* Collé en haut sur ordinateur seulement : sur téléphone, il laisse toute la place au contenu */
.pd-entete { position: relative; z-index: var(--z-entete); background: var(--fond); container-type: inline-size; }
@media (min-width: 960px) { .pd-entete { position: sticky; top: 0; } }
.pd-entete__barre { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--esp-4); min-height: var(--hauteur-entete); }
.pd-entete__barre > .pd-marque { min-height: var(--hauteur-entete); }
.pd-entete__recherche { order: 10; flex: 1 0 100%; padding-bottom: var(--esp-3); }
.pd-entete__nav { display: none; gap: 24px; font-weight: 500; }
.pd-entete__nav a, .pd-entete__lien { text-decoration: none; white-space: nowrap; }
.pd-entete__nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.pd-entete__espace { flex: 1; }
.pd-entete__lien, .pd-entete__deposer { display: none; }
.pd-entete--defile { box-shadow: 0 1px 0 var(--trait); }
@media (max-width: 479px) { .pd-entete--tunnel .pd-marque__nom { display: none; } }
@container (min-width: 960px) {
  .pd-entete__barre { flex-wrap: nowrap; column-gap: var(--esp-6); min-height: var(--hauteur-entete-grand); }
  .pd-entete__recherche { order: 0; flex: 1 1 440px; min-width: 0; max-width: 440px; padding-bottom: 0; }
  .pd-entete__nav { display: flex; }
  .pd-entete__lien { display: inline; font-weight: 500; }
  .pd-entete__deposer { display: inline-flex; }
  .pd-entete__recherche ~ .pd-entete__nav { display: none; }
}
@container (min-width: 960px) and (max-width: 1179px) { .pd-entete__barre { column-gap: 16px; } .pd-entete__nav { gap: 14px; } .pd-entete__nav a:nth-child(n + 4) { display: none; } }
/* Raccourcis du membre (Recherches, Favoris, Messages, Compte) : l'icône sur son mot, un compteur
   jaune posé dessus quand quelque chose attend. Sur ordinateur seulement : au téléphone, la barre
   d'onglets porte les mêmes compteurs. Entre 960 et 1 179 px, l'icône seule, le mot reste lu. */
.pd-entete__raccourcis { display: none; gap: var(--esp-1); }
.pd-entete__raccourci { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: var(--cible); min-height: var(--cible); padding-inline: var(--esp-1); color: var(--encre-2); font-size: 12px; line-height: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.pd-entete__raccourci > .pd-icone { width: 22px; height: 22px; color: var(--encre); }
.pd-entete__raccourci:hover, .pd-entete__raccourci[aria-current="page"] { color: var(--encre); }
.pd-entete__raccourci[aria-current="page"] .pd-entete__libelle { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pd-entete__raccourci .pd-compteur { position: absolute; top: 0; left: calc(50% + 4px); }
/* « Déposer », à droite de Compte : un peu détaché, ce n'est pas une liste à consulter. */
.pd-entete__raccourci--deposer { margin-inline-start: var(--esp-3); padding-inline: var(--esp-2); }
@container (min-width: 960px) { .pd-entete__raccourcis { display: flex; } }
.pd-entete__deposer-court { display: none; }
@container (min-width: 960px) and (max-width: 1179px) { .pd-entete__deposer-long { display: none; } .pd-entete__deposer-court { display: inline; } }
@container (min-width: 960px) and (max-width: 1179px) { .pd-entete__libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .pd-entete__raccourci .pd-compteur { top: 2px; } }

/* Barre d'onglets du téléphone */
.pd-barre-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-barre); display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; box-sizing: content-box; height: calc(var(--hauteur-barre) - 1px); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); background: var(--fond); border-top: 1px solid var(--trait); font-size: 11px; line-height: 14px; color: var(--encre-2); text-align: center; transition: transform var(--duree) var(--sortie); }
/* Cachée quand on fait défiler vers le bas (js/pitstock.js) et quand un champ de saisie a le focus :
   sur iOS, une barre fixe flotte au-dessus du clavier ou se coince dessous. */
.pd-barre-mobile--cachee, body:has(:is(input:not([type="checkbox"], [type="radio"], [type="file"]), textarea, select):focus) :is(.pd-barre-mobile, .pd-contact-mobile) { transform: translateY(100%); }
.pd-barre-mobile a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; text-decoration: none; }
.pd-barre-mobile a > .pd-icone { height: 30px; }
.pd-barre-mobile a:active { color: var(--encre); }
.pd-barre-mobile a[aria-current="page"] { color: var(--encre); font-weight: 600; }
.pd-barre-mobile .pd-compteur { position: absolute; top: 2px; left: calc(50% + 6px); }
.pd-barre-mobile__deposer { width: 40px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: var(--rayon-petit); background: var(--jaune); color: var(--sur-jaune); transform: skewX(-14deg); }
.pd-barre-mobile__deposer .pd-icone { width: 18px; height: 18px; transform: skewX(14deg); }
.pd-avec-barre { padding-bottom: calc(var(--hauteur-barre) + env(safe-area-inset-bottom)); }
@media (min-width: 960px) { .pd-barre-mobile { display: none; } .pd-avec-barre { padding-bottom: 0; } }

/* Fil d'Ariane */
.pd-ariane { display: flex; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none; padding: 0; font-size: 13px; color: var(--encre-2); white-space: nowrap; }
.pd-ariane::-webkit-scrollbar { display: none; }
.pd-ariane a, .pd-ariane [aria-current="page"] { display: inline-flex; align-items: center; min-height: var(--cible); text-decoration: none; }
.pd-ariane .pd-icone { width: 14px; height: 14px; }
.pd-ariane [aria-current="page"] { display: block; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; line-height: var(--cible); color: var(--encre); }

/* Onglets */
/* position: relative : un texte masqué (pd-sr) d'un onglet hors de vue reste dans la rangée, sans élargir la page */
.pd-onglets { position: relative; display: flex; gap: var(--esp-5); overflow-x: auto; scrollbar-width: none; }
.pd-onglets::-webkit-scrollbar { display: none; }
.pd-onglets [role="tab"], .pd-onglets a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--cible); padding: 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--encre-2); font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; }
.pd-onglets [aria-selected="true"], .pd-onglets [aria-current="page"] { color: var(--encre); font-weight: 600; border-bottom-color: var(--encre); }

/* Pagination */
.pd-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; padding: var(--esp-6) 0; }
.pd-pagination__page { display: none; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: var(--rayon); background: var(--fond-2); text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.pd-pagination__page[aria-current="page"] { background: var(--encre); color: var(--fond); }
.pd-pagination__etat { padding: 0 var(--esp-3); font-size: 14px; color: var(--encre-2); font-variant-numeric: tabular-nums; }
/* Saut entre deux numéros (« 1 2 3 … 27 ») */
.pd-pagination__trou { display: none; min-width: 24px; justify-content: center; color: var(--encre-2); }
@media (min-width: 720px) { .pd-pagination__page, .pd-pagination__trou { display: inline-flex; } .pd-pagination__etat { display: none; } }

/* Afficher plus : sous une liste de l'espace membre, ou en plus de la pagination (le bouton est un lien vers la page suivante) */
.pd-suite { display: grid; justify-items: center; gap: var(--esp-3); max-width: 320px; margin: var(--esp-6) auto 0; text-align: center; }
.pd-suite__etat { font-size: 14px; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.pd-suite .pd-progression__barre { height: 4px; }

/* ===== 13. Bandeau défilant des nouvelles annonces ===== */
.pd-bourse { display: flex; align-items: center; gap: var(--esp-3); padding: 6px 8px 6px var(--marge-page); font-size: 13px; }
.pd-bourse__fenetre { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.pd-bourse__defile { display: flex; width: max-content; animation: pd-defile 80s linear infinite; }
.pd-bourse__liste { display: flex; gap: 36px; padding: 0 36px 0 0; margin: 0; list-style: none; white-space: nowrap; }
.pd-bourse:focus-within .pd-bourse__defile, .pd-bourse--pause .pd-bourse__defile { animation-play-state: paused; }
@keyframes pd-defile { to { transform: translateX(-50%); } }
.pd-bourse__cours { display: inline-flex; align-items: center; gap: var(--esp-2); padding: 4px 0; text-decoration: none; }
.pd-bourse__cours::before { content: ""; width: 7px; height: 7px; background: var(--jaune); transform: skewX(-14deg); }
.pd-bourse__heure { font-weight: 700; font-variant-numeric: tabular-nums; }
.pd-bourse__nom { font-weight: 600; }
.pd-bourse__valeur, .pd-bourse__lieu { font-variant-numeric: tabular-nums; }
.pd-bourse__pause { flex: none; width: var(--cible); height: var(--cible); display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--rayon); background: transparent; color: var(--encre); cursor: pointer; }
.pd-bourse__pause .pd-icone { width: 16px; height: 16px; }
.pd-bourse__pause .pd-bourse__lecture, .pd-bourse--pause .pd-bourse__pause .pd-bourse__arret { display: none; }
.pd-bourse--pause .pd-bourse__pause .pd-bourse__lecture { display: block; }

/* ===== 14. Haut de page, tuiles, bandeau vendeur ===== */
.pd-heros { padding: var(--esp-8) 0 var(--esp-2); text-align: center; }
.pd-heros__titre { max-width: 760px; margin: 0 auto; }
.pd-heros__chapo { max-width: 520px; margin: var(--esp-4) auto var(--esp-6); color: var(--encre-2); }
.pd-heros .pd-recherche { margin: 0 auto; }
@media (min-width: 960px) { .pd-heros { padding: calc(var(--esp-9) + var(--esp-6)) 0 var(--esp-5); } .pd-heros__chapo { margin-bottom: var(--esp-7); } }
/* Haut de page des pages intérieures : titre et chapô alignés à gauche */
.pd-tete-page { padding: var(--esp-5) 0 var(--esp-2); }
.pd-tete-page .chapo { margin-top: var(--esp-3); color: var(--encre-2); max-width: 640px; }
/* Sous le fil d'Ariane, le titre se rapproche ; la rangée de filtres prend du champ sous le titre */
.pd-ariane + .pd-tete-page { padding-top: var(--esp-2); }
.pd-tete-page + .pd-filtres { margin-top: var(--esp-5); }
.pd-tete-page > .pd-etapes { margin-bottom: var(--esp-6); }
/* Résultats sur téléphone : le chapô s'efface, la première annonce remonte d'une rangée */
@media (max-width: 719px), (max-height: 500px) { .pd-tete-page--resultats .chapo { display: none; } }

/* Tuiles de discipline : une rangée basse, qu'on fait défiler sur téléphone */
.pd-tuiles { display: flex; gap: var(--esp-3); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--marge-page)); padding-inline: var(--marge-page); }
.pd-tuiles::-webkit-scrollbar { display: none; }
.pd-tuile { position: relative; flex: 0 0 44%; height: 96px; border-radius: var(--rayon-grand); overflow: hidden; background: #000; color: #fff; text-decoration: none; }
.pd-tuile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duree-longue) var(--sortie); }
.pd-tuile::after { content: ""; position: absolute; inset: 0; background: var(--voile-photo); }
.pd-tuile__texte { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; display: grid; }
.pd-tuile__nom { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.pd-tuile__nom::before { content: ""; flex: none; width: 12px; height: 12px; margin-top: 0.3em; background: var(--jaune); transform: skewX(-14deg); border-radius: 1px; }
.pd-tuile__nombre { font-size: 13px; color: #fff; font-variant-numeric: tabular-nums; }
@media (min-width: 720px) {
  .pd-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; gap: var(--esp-4); }
  .pd-tuile { height: 112px; }
  .pd-tuile__nom { font-size: 19px; }
}
@media (min-width: 960px) { .pd-tuile { height: 132px; } }
/* Sans photo, une tuile prend la hauteur de son texte : pas de pavé noir vide plus lourd que la recherche */
.pd-tuile:not(:has(img)) { height: auto; }
.pd-tuile:not(:has(img)) .pd-tuile__texte { position: static; padding: var(--esp-4); }

/* Bandeau vendeur : texte et photo côte à côte, en asphalte */
.pd-bandeau { position: relative; display: grid; border-radius: var(--rayon-grand); overflow: hidden; container-type: inline-size; }
.pd-bandeau__texte { position: relative; z-index: 1; padding: var(--esp-6) var(--esp-5); }
.pd-bandeau__texte p { margin: var(--esp-3) 0 var(--esp-5); font-size: 17px; line-height: 26px; max-width: 400px; }
.pd-bandeau__autres { display: grid; gap: var(--esp-2); max-width: 400px; margin-top: var(--esp-6); font-size: 15px; line-height: 22px; }  /* même mesure que le texte : le trait ne le croise pas */
.pd-bandeau__photo { position: relative; min-height: 220px; }
@media (max-width: 959px) { .pd-bandeau__photo { order: -1; min-height: 160px; } }  /* au téléphone, la photo ouvre le bandeau au lieu de le finir */
.pd-bandeau__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pd-contour { position: absolute; pointer-events: none; overflow: visible; display: none; }
.pd-contour polygon { fill: none; stroke: var(--jaune); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
@media (min-width: 960px) { .pd-bandeau { grid-template-columns: 1fr 1fr; } .pd-bandeau__texte { padding: var(--esp-8) var(--esp-7); } }
/* Sans photo, le bandeau tient sur une colonne : pas de moitié vide */
@media (min-width: 960px) { .pd-bandeau:not(:has(> .pd-bandeau__photo)) { grid-template-columns: minmax(0, 1fr); } .pd-bandeau:not(:has(> .pd-bandeau__photo)) .pd-bandeau__texte { padding-block: var(--esp-7); } }
/* Le trait part de l'espace entre le texte et la photo, sans croiser le texte : seulement quand le bandeau
   fait au moins 1 150 px de large (requête sur le bandeau lui-même, pas sur la fenêtre) */
@container (min-width: 1150px) { .pd-bandeau .pd-contour { display: block; left: 50%; top: -20%; width: 34%; height: 140%; transform: translateX(-34%); z-index: 2; } }

/* ===== 15. Pied de page ===== */
/* L'espace avant le pied est le sien : il ne dépend pas de la façon dont la page se termine */
.pd-pied { position: relative; overflow: hidden; margin-top: var(--esp-8); }
@media (min-width: 960px) { .pd-pied { margin-top: var(--esp-9); } }
.pd-pied__contenu { position: relative; padding-top: var(--esp-8); padding-bottom: var(--esp-6); }
.pd-pied__accroche { margin: var(--esp-4) 0 var(--esp-7); color: var(--encre-2); font-size: 16px; max-width: 420px; }
.pd-pied__colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-6) var(--esp-5); }
.pd-pied__colonnes h2 { margin: 0 0 var(--esp-1); font-size: 13px; font-weight: 600; color: var(--encre-2); }
.pd-pied__colonnes ul { list-style: none; margin: 0; padding: 0; display: grid; }
.pd-pied__colonnes a { display: inline-flex; min-height: var(--cible); align-items: center; text-decoration: none; }
.pd-pied__mentions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; font-size: 13px; color: var(--encre-2); }
/* Le logo du pied de page est un lien vers l'accueil : cible de 44 px */
.pd-pied .pd-marque { min-height: var(--cible); }
@media (min-width: 720px) { .pd-pied__colonnes { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pd-pied .pd-contour { display: block; right: 4%; top: -60px; width: 200px; height: 280px; } }

/* ===== 16. Fiche annonce ===== */
.pd-fiche { display: grid; gap: var(--esp-7); }
.pd-fiche__principal { display: grid; gap: var(--esp-7); min-width: 0; }
.pd-fiche__principal > .pd-pile { gap: var(--esp-3); }
.pd-fiche__principal > :is(.pd-galerie, .pd-galerie--vide) + .pd-fiche-titre { margin-top: calc(var(--esp-5) - var(--esp-7)); }
.pd-fiche__colonne { display: grid; gap: var(--esp-5); }
@media (min-width: 960px) {
  .pd-fiche { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: var(--esp-7); }
  .pd-fiche__colonne { position: sticky; top: calc(var(--hauteur-entete-grand) + var(--esp-4)); }
}
.pd-fiche-titre { display: grid; gap: var(--esp-2); }
.pd-fiche-titre > .pd-rangee:first-child { margin-bottom: var(--esp-1); }
.pd-fiche-titre__details { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--encre-2); }
.pd-fiche-titre__details span { display: inline-flex; align-items: center; gap: 6px; }
.pd-fiche-titre__details .pd-icone { width: 16px; height: 16px; }
/* Téléphone : le prix et le vendeur juste sous le titre ; sur ordinateur, ils sont dans la colonne de contact */
.pd-fiche-titre__prix { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); margin-top: var(--esp-1); }
.pd-fiche-titre__revendiquer { max-width: 60ch; }
@media (min-width: 960px) { .pd-fiche-titre__prix, .pd-fiche-titre__revendiquer { display: none; } }

/* Galerie : on fait défiler les photos du doigt ; vignettes et flèches sur ordinateur */
.pd-galerie { display: grid; gap: var(--esp-2); }
.pd-galerie__scene { position: relative; margin-inline: calc(-1 * var(--marge-page)); }
.pd-galerie__defile { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pd-galerie__defile::-webkit-scrollbar { display: none; }
.pd-galerie__photo { flex: 0 0 100%; aspect-ratio: 4 / 3; scroll-snap-align: start; background: var(--fond-2); }
@media (orientation: landscape) and (max-height: 500px) { .pd-galerie__photo { max-height: 70dvh; } }
@media (min-width: 960px) { .pd-galerie__photo { aspect-ratio: 16 / 10; max-height: 60dvh; } }
/* Une annonce reprise d'un autre site n'a qu'une vignette (700 × 525) : 4:3, jamais agrandie */
@media (min-width: 960px) { .pd-galerie--vignette .pd-galerie__scene { max-width: 700px; } }
/* Sans photo : un emplacement à la place de la galerie, qui dit pourquoi et où les voir */
.pd-galerie--vide { display: grid; place-content: center; justify-items: center; gap: var(--esp-2); aspect-ratio: 16 / 9; max-height: 320px; margin-inline: calc(-1 * var(--marge-page)); padding: var(--esp-5); background: var(--fond-2); color: var(--encre-2); text-align: center; }
@media (min-width: 720px) { .pd-galerie--vide { margin-inline: 0; border-radius: var(--rayon-grand); } }
@media (min-width: 960px) { .pd-galerie--vignette .pd-galerie__photo { aspect-ratio: 4 / 3; } }
.pd-galerie__photo img { width: 100%; height: 100%; object-fit: cover; }
.pd-galerie__compte { position: absolute; right: 12px; bottom: 12px; padding: 3px 8px; border-radius: var(--rayon-petit); background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pd-galerie__fleche { position: absolute; top: 50%; transform: translateY(-50%); display: none; width: var(--cible); height: var(--cible); align-items: center; justify-content: center; border: 0; border-radius: var(--rayon); background: #fff; color: #000; cursor: pointer; }
.pd-galerie__fleche--avant { left: 12px; }
.pd-galerie__fleche--apres { right: 12px; }
.pd-galerie__vignettes { display: none; gap: var(--esp-2); overflow-x: auto; scrollbar-width: none; }
.pd-galerie__vignettes button { flex: 0 0 88px; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: var(--rayon); overflow: hidden; background: var(--fond-2); cursor: pointer; opacity: 0.45; }
.pd-galerie__vignettes button[aria-current="true"] { opacity: 1; }
.pd-galerie__vignettes img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 720px) {
  .pd-galerie__scene { margin-inline: 0; border-radius: var(--rayon-grand); overflow: hidden; }
  .pd-galerie__fleche { display: flex; }
  .pd-galerie__vignettes { display: flex; }
}

/* Bouton « Agrandir » de la galerie : ouvre la visionneuse */
.pd-galerie__agrandir { position: absolute; top: 12px; right: 12px; display: flex; width: var(--cible); height: var(--cible); align-items: center; justify-content: center; border: 0; border-radius: var(--rayon); background: #fff; color: #000; cursor: pointer; }
.pd-galerie__agrandir .pd-icone { width: 18px; height: 18px; }
.pd-galerie[data-visionneuse] .pd-galerie__photo { cursor: zoom-in; }

/* Visionneuse : les photos en plein écran, sur le noir (<dialog class="pd-visionneuse" data-theme="nuit">).
   Le doigt fait défiler, les flèches et le clavier aussi ; la photo entière, sans recadrage. */
.pd-visionneuse { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: var(--fond); color: var(--encre); }
.pd-visionneuse[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: pd-apparait var(--duree) var(--sortie); }
.pd-visionneuse::backdrop { background: #000; }
.pd-visionneuse__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: calc(var(--esp-2) + env(safe-area-inset-top, 0px)) max(var(--esp-2), env(safe-area-inset-right, 0px)) var(--esp-2) max(var(--esp-4), env(safe-area-inset-left, 0px)); }
.pd-visionneuse__compte { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pd-visionneuse__scene { position: relative; min-height: 0; }
.pd-visionneuse__defile { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.pd-visionneuse__defile::-webkit-scrollbar { display: none; }
.pd-visionneuse__photo { flex: 0 0 100%; height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; }
.pd-visionneuse__photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pd-visionneuse__legende { padding: var(--esp-3) var(--marge-page) calc(var(--esp-3) + env(safe-area-inset-bottom, 0px)); font-size: 14px; text-align: center; }
@media (min-width: 720px) { .pd-visionneuse .pd-galerie__fleche { display: flex; } .pd-visionneuse .pd-galerie__fleche--avant { left: var(--esp-5); } .pd-visionneuse .pd-galerie__fleche--apres { right: var(--esp-5); } }

/* Fiche technique : libellé, valeur, un filet entre chaque ligne */
.pd-specs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); margin: 0; }
.pd-specs dt, .pd-specs dd { padding: 6px 0; }
.pd-specs dt { color: var(--encre-2); padding-right: var(--esp-4); }
.pd-specs dd { font-weight: 500; font-variant-numeric: tabular-nums; }
@media (min-width: 720px) and (max-width: 959px), (min-width: 1180px) {
  .pd-specs--deux { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); }
  .pd-specs--deux dd { padding-right: var(--esp-6); }
}

/* Équipements homologués : nom, norme, validité */
.pd-equipements { display: grid; max-width: 60ch; }
.pd-equipement { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--esp-4); padding: 8px 0; }
.pd-equipement__nom { font-weight: 600; }
.pd-equipement__norme { grid-column: 1; font-size: 13px; color: var(--encre-2); }
.pd-equipement .pd-etiquette { grid-column: 2; grid-row: 1 / span 2; }

/* Bloc de contact : à droite sur ordinateur, barre fixe en bas sur téléphone */
/* Sans cadre ni fond : le contenu de sa colonne, sur le blanc. Les boutons gris restent des boutons,
   le jaune pâle du prix reste sur du blanc. */
.pd-contact { display: grid; gap: var(--esp-4); }
/* Téléphone : le prix et « Envoyer un message » sont dans la barre fixe, pas deux fois à l'écran */
@media (max-width: 959px) { .pd-contact__prix, .pd-contact__envoyer, .pd-contact__revendiquer, .pd-contact__fonctions > form { display: none; } }
/* Entre 720 et 959 px, la colonne passe sous le contenu : elle garde sa largeur de bureau. */
@media (min-width: 720px) and (max-width: 959px) { .pd-fiche__colonne { max-width: 360px; } }
.pd-contact__actions { display: grid; gap: var(--esp-2); margin-block: var(--esp-2); }
.pd-contact__note { display: flex; gap: var(--esp-2); max-width: 60ch; font-size: 14px; line-height: 20px; color: var(--encre); }
.pd-contact__note .pd-icone { width: 18px; height: 18px; color: var(--encre); }
.pd-contact-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-barre); display: flex; align-items: center; gap: var(--esp-2); padding: 9px max(var(--marge-page), env(safe-area-inset-right, 0px)) calc(9px + env(safe-area-inset-bottom, 0px)) max(var(--marge-page), env(safe-area-inset-left, 0px)); background: var(--fond); border-top: 1px solid var(--trait); transition: transform var(--duree) var(--sortie); }
/* Le montant garde sa place (jusqu'à la moitié de la barre) ; l'action passe sur deux lignes s'il le faut */
.pd-contact-mobile__prix { flex: 0 0 auto; max-width: 50%; display: grid; min-width: 0; line-height: 1.2; margin-right: auto; }
.pd-contact-mobile .pd-btn:not(.pd-btn--icone) { flex: 0 1 auto; min-width: 0; white-space: normal; text-align: center; line-height: 1.15; }
.pd-contact-mobile__prix .montant { white-space: nowrap; }
.pd-contact-mobile__prix small { width: 0; min-width: 100%; font-size: 12px; color: var(--encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }  /* ne compte pas dans la largeur de la colonne : seul le montant la fixe */
@media (min-width: 960px) { .pd-contact-mobile { display: none; } }

/* Historique des prix */
.pd-historique { display: grid; justify-content: start; grid-template-columns: max-content max-content max-content; column-gap: var(--esp-6); margin: 0; padding: 0; list-style: none; }
.pd-historique li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; padding: 6px 0; font-variant-numeric: tabular-nums; }
.pd-historique time { color: var(--encre-2); font-size: 13px; }
.pd-historique__ecart { font-size: 13px; font-weight: 600; }
.pd-historique__ecart--baisse { color: var(--succes); }
.pd-historique__ecart--hausse { color: var(--erreur); }

/* Description : un texte long, à la bonne largeur */
.pd-texte { max-width: 60ch; display: grid; gap: var(--esp-3); }
/* Posée sur un seul paragraphe, la grille couperait la phrase à chaque lien : il garde son flux. */
p.pd-texte { display: block; }
.pd-texte p { line-height: 1.6; }
.pd-replie { position: relative; max-height: 220px; overflow: hidden; }
.pd-replie::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient(180deg, transparent, var(--fond)); }

/* Accordéon (questions fréquentes, aide, conditions) : des <details> natifs, sans filet ; l'espace sépare */
.pd-accordeon { display: grid; gap: var(--esp-1); max-width: 72ch; }
.pd-accordeon summary { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); min-height: 56px; padding: var(--esp-3) 0; font-size: 16px; font-weight: 600; line-height: 22px; list-style: none; cursor: pointer; }
.pd-accordeon summary::-webkit-details-marker { display: none; }
.pd-accordeon summary .pd-icone { width: 20px; height: 20px; transition: transform var(--duree-courte) var(--sortie); }
.pd-accordeon details[open] > summary .pd-icone { transform: rotate(180deg); }
.pd-accordeon__reponse { display: grid; gap: var(--esp-3); max-width: 60ch; padding-bottom: var(--esp-5); line-height: 1.6; }
.pd-accordeon__reponse.pd-lignes { max-width: none; gap: 0; line-height: inherit; }  /* une liste repliée garde la largeur des autres listes */
@supports (interpolate-size: allow-keywords) {
  .pd-accordeon { interpolate-size: allow-keywords; }
  .pd-accordeon details::details-content { height: 0; overflow: clip; transition: height var(--duree) var(--sortie), content-visibility var(--duree) allow-discrete; }
  .pd-accordeon details[open]::details-content { height: auto; }
}

/* Carte des annonces (Leaflet) : bord à bord sur téléphone, des repères en aplat. Pour un repère :
   L.divIcon({ className: "", html: '<span class="pd-plan__repere"><span>214</span></span>' }) */
.pd-plan { position: relative; height: clamp(240px, 68dvh, 720px); margin-inline: calc(-1 * var(--marge-page)); overflow: hidden; isolation: isolate; background: var(--fond-2); font-family: var(--font-sans); }
@media (min-width: 720px) { .pd-plan { margin-inline: 0; border-radius: var(--rayon-grand); } }
.pd-plan__repere { display: inline-flex; transform: translate(-50%, -50%) skewX(-14deg); padding: 3px 9px; border-radius: var(--rayon-petit); background: var(--fond); color: var(--encre); box-shadow: var(--ombre-flottant); font-size: 13px; font-weight: 700; line-height: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; cursor: pointer; }
.pd-plan__repere > span { display: inline-block; transform: skewX(14deg); }
.pd-plan__repere--actif { background: var(--encre); color: var(--fond); }
/* Les contrôles de Leaflet, mis à plat */
.pd-plan .leaflet-bar { border: 0; border-radius: var(--rayon); box-shadow: var(--ombre-flottant); overflow: hidden; }
.pd-plan .leaflet-bar a { width: var(--cible); height: var(--cible); line-height: var(--cible); border-bottom-color: var(--trait); color: var(--encre); font-family: var(--font-sans); }
.pd-plan .leaflet-popup-content-wrapper { border-radius: var(--rayon-grand); box-shadow: var(--ombre-flottant); }
.pd-plan .leaflet-popup-content { margin: var(--esp-3) var(--esp-4); font-size: 14px; line-height: 20px; }
.pd-plan .leaflet-popup-tip { box-shadow: none; }
.pd-plan.leaflet-container a { color: var(--encre); }
.pd-plan .leaflet-container { font-family: var(--font-sans); background: var(--fond-2); }

/* ===== 17. Retours : avis, notification, état vide, attente ===== */
.pd-avis { display: flex; gap: var(--esp-3); align-items: flex-start; padding: var(--esp-4); border-radius: var(--rayon-grand); background: var(--info-pale); color: var(--encre); font-size: 14px; line-height: 20px; }
.pd-avis > .pd-icone { color: var(--info); margin-top: -1px; }
.pd-avis__corps { max-width: 60ch; flex: 1; display: grid; gap: 2px; }
.pd-avis__corps strong { font-weight: 600; }
.pd-avis__fermer { flex: none; margin: -10px -10px -10px 0; }
/* Compact : une ligne de titre et une phrase, pour un rappel qui ne doit pas peser (haut d'un fil) */
.pd-avis--compact { padding: var(--esp-3); border-radius: var(--rayon); }
.pd-avis--compact .pd-avis__corps { max-width: none; gap: 0; }
.pd-avis--succes { background: var(--succes-pale); }
.pd-avis--succes > .pd-icone { color: var(--succes); }
.pd-avis--attention { background: var(--attention-pale); }
.pd-avis--attention > .pd-icone { color: var(--attention); }
.pd-avis--erreur { background: var(--erreur-pale); }
.pd-avis--erreur > .pd-icone { color: var(--erreur); }

.pd-notification { position: fixed; left: 50%; bottom: calc(var(--hauteur-barre) + 16px + env(safe-area-inset-bottom)); z-index: var(--z-notification); display: flex; align-items: center; gap: var(--esp-4); width: max-content; max-width: calc(100vw - 2 * var(--marge-page)); padding: 12px 12px 12px 16px; border-radius: var(--rayon-grand); background: #000; color: #fff; box-shadow: var(--ombre-flottant); font-size: 14px; transform: translateX(-50%); animation: pd-monte var(--duree) var(--sortie); }
.pd-notification a, .pd-notification button { color: var(--jaune); font-weight: 600; background: none; border: 0; padding: 6px; cursor: pointer; text-decoration: none; }
.pd-notification--statique { position: static; width: auto; max-width: 100%; transform: none; animation: none; }
@keyframes pd-monte { from { opacity: 0; transform: translate(-50%, 12px); } }
@media (min-width: 960px) { .pd-notification { bottom: var(--esp-5); } }

.pd-vide { display: grid; justify-items: center; gap: var(--esp-3); padding: var(--esp-7) var(--esp-4); text-align: center; }
.pd-vide > .pd-icone { width: 40px; height: 40px; stroke-width: 1.5; color: var(--encre-2); }
.pd-vide p { max-width: 420px; color: var(--encre-2); }
.pd-vide .pd-boutons { justify-content: center; margin-top: var(--esp-2); }

.pd-squelette { display: block; border-radius: var(--rayon); background: linear-gradient(90deg, var(--fond-2) 0%, var(--fond-3) 50%, var(--fond-2) 100%) 0 0 / 200% 100%; animation: pd-reflet 1.4s ease-in-out infinite; }
.pd-squelette--photo { aspect-ratio: 4 / 3; border-radius: var(--rayon-grand); }
.pd-squelette--ligne { height: 14px; }
.pd-squelette--court { width: 60%; }
@keyframes pd-reflet { to { background-position: -200% 0; } }
.pd-chargement { display: inline-block; width: 24px; height: 24px; border-radius: var(--rayon-rond); border: 2.5px solid var(--fond-3); border-top-color: var(--encre); animation: pd-tourne 0.8s linear infinite; }

/* Aide : un « i » après un mot technique, une bulle noire qui s'ouvre au toucher (<details class="pd-aide">).
   Sous le « i » sur ordinateur ; en bas de l'écran sur téléphone, pour ne jamais déborder. Un toucher à côté la referme. */
.pd-aide { position: relative; display: inline-block; vertical-align: middle; }
.pd-aide > summary { display: inline-flex; align-items: center; justify-content: center; width: var(--cible); height: var(--cible); margin: -12px; border-radius: var(--rayon); color: var(--encre-2); list-style: none; cursor: pointer; }
.pd-aide > summary::-webkit-details-marker { display: none; }
.pd-aide > summary .pd-icone { width: 18px; height: 18px; }
.pd-aide[open] > summary { color: var(--encre); }
.pd-aide__bulle { position: absolute; z-index: var(--z-menu); top: calc(100% + 4px); left: -8px; width: max-content; max-width: 300px; padding: var(--esp-3) var(--esp-4); border-radius: var(--rayon); background: #000; color: #fff; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: 0; text-align: left; box-shadow: var(--ombre-flottant); }
.pd-aide--gauche .pd-aide__bulle { left: auto; right: -8px; }
@media (max-width: 719px) {
  .pd-aide__bulle, .pd-aide--gauche .pd-aide__bulle { position: fixed; z-index: var(--z-notification); top: auto; left: var(--esp-3); right: var(--esp-3); bottom: calc(var(--esp-3) + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; padding: var(--esp-4); border-radius: var(--rayon-grand); animation: pd-apparait var(--duree) var(--sortie); }
}

/* Cookies : seulement pour une mesure qui n'est pas exemptée de consentement. Refuser est aussi simple
   qu'accepter : deux boutons pareils, côte à côte. */
.pd-consentement { position: fixed; z-index: var(--z-notification); left: var(--esp-3); right: var(--esp-3); bottom: calc(var(--esp-3) + env(safe-area-inset-bottom, 0px)); display: grid; gap: var(--esp-2); padding: var(--esp-5); border-radius: var(--rayon-grand); background: var(--fond); color: var(--encre); box-shadow: var(--ombre-flottant); font-size: 14px; line-height: 20px; animation: pd-apparait var(--duree) var(--sortie); }
.pd-consentement__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-2); margin-top: var(--esp-3); }
.pd-consentement__actions > :nth-child(n + 3) { grid-column: 1 / -1; }
.pd-consentement__actions .pd-btn { min-width: 0; padding-inline: var(--esp-3); white-space: normal; }
.pd-consentement--statique { position: static; animation: none; }
@media (min-width: 720px) { .pd-consentement:not(.pd-consentement--statique) { left: var(--esp-5); right: auto; bottom: var(--esp-5); width: 420px; } }

/* ===== 18. Superpositions : boîte de dialogue, feuille ===== */
.pd-dialogue { width: min(480px, calc(100vw - 2 * var(--esp-4))); max-height: calc(100dvh - 2 * var(--esp-4)); padding: 0; border: 0; border-radius: var(--rayon-grand); background: var(--fond); color: var(--encre); box-shadow: var(--ombre-flottant); }
.pd-dialogue::backdrop, .pd-feuille::backdrop { background: var(--voile); }
/* La page ne défile pas sous une boîte, une feuille ou la visionneuse ouverte (iOS laisse sinon défiler le fond) */
html:has(dialog[open]) { overflow: hidden; }
@media (max-width: 719px) { html:has(.pd-menu[open]) { overflow: hidden; } }
.pd-dialogue[open] { animation: pd-apparait var(--duree) var(--sortie); }
.pd-dialogue__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-4) var(--esp-4) 0 var(--esp-5); }
.pd-dialogue__corps { padding: var(--esp-3) var(--esp-5) var(--esp-5); display: grid; gap: var(--esp-4); }
.pd-dialogue__actions { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: var(--esp-2); padding: 0 var(--esp-5) var(--esp-5); }
@keyframes pd-apparait { from { opacity: 0; transform: translateY(8px); } }
/* Feuille : monte du bas sur téléphone (filtres, tri, partage), panneau à droite sur ordinateur */
.pd-feuille { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 88dvh; margin: 0; padding: 0; border: 0; border-radius: var(--rayon-grand) var(--rayon-grand) 0 0; background: var(--fond); color: var(--encre); box-shadow: var(--ombre-flottant); flex-direction: column; }
.pd-feuille[open] { display: flex; animation: pd-feuille-monte var(--duree) var(--sortie); }
.pd-feuille__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-3) max(var(--esp-2), env(safe-area-inset-right, 0px)) var(--esp-3) max(var(--esp-5), env(safe-area-inset-left, 0px)); }
.pd-feuille__corps { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--esp-2) max(var(--esp-5), env(safe-area-inset-right, 0px)) var(--esp-5) max(var(--esp-5), env(safe-area-inset-left, 0px)); }
.pd-feuille__section { padding: var(--esp-6) 0 0; }
.pd-feuille__section:first-child { padding-top: var(--esp-3); }
.pd-feuille__section > h3 { margin-bottom: var(--esp-3); }
.pd-feuille__pied { display: flex; gap: var(--esp-2); padding: var(--esp-3) max(var(--esp-5), env(safe-area-inset-right, 0px)) calc(var(--esp-3) + env(safe-area-inset-bottom)) max(var(--esp-5), env(safe-area-inset-left, 0px)); border-top: 1px solid var(--trait); }
.pd-feuille__pied .pd-btn--jaune { flex: 1; }
/* Téléphone à l'horizontale ou clavier ouvert : la feuille prend tout l'écran, tête et pied resserrés */
@media (max-height: 500px) {
  .pd-feuille { max-height: 100dvh; border-radius: 0; }
  .pd-feuille__tete, .pd-feuille__pied { padding-block: var(--esp-2); }
}
/* Une feuille de réglages est souvent un formulaire : il ne casse pas la mise en page de la feuille */
.pd-feuille > form { display: contents; }
@keyframes pd-feuille-monte { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 960px) {
  .pd-feuille { inset: 0 0 0 auto; width: 440px; max-height: none; height: 100dvh; border-radius: 0; }
  .pd-feuille[open] { animation-name: pd-feuille-glisse; }
  @keyframes pd-feuille-glisse { from { transform: translateX(40px); opacity: 0; } }
}

/* ===== 19. Lignes et listes (alertes, recherches enregistrées, conversations) ===== */
.pd-lignes { display: grid; margin: 0; padding: 0; list-style: none; }
.pd-ligne { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); padding: 12px 0; }
.pd-ligne--active { margin-inline: calc(-1 * var(--esp-3)); padding-inline: var(--esp-3); border-radius: var(--rayon); background: var(--fond-2); }
/* Ligne qui s'ouvre (gestion) : la flèche vit dans une colonne réservée à droite (jamais seule sur une ligne), le titre se souligne au survol, le focus entoure la ligne */
.pd-ligne--lien { padding-right: var(--esp-7); border-bottom: 1px solid var(--trait); }  /* filet sous chaque ligne, comme les tableaux de la gestion */
.pd-ligne__fleche { position: absolute; right: 0; top: 50%; translate: 0 -50%; color: var(--encre-2); pointer-events: none; }
.pd-ligne--lien .pd-ligne__titre a:focus-visible { outline: none; }
.pd-ligne--lien:has(.pd-ligne__titre a:focus-visible) { outline: 2px solid var(--encre); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .pd-ligne__fleche { transition: translate var(--duree-courte) ease-out, color var(--duree-courte) ease-out; }
}
/* Le titre garde au moins 180 px : faute de place, les actions passent dessous (téléphone) */
.pd-ligne__principal { flex: 1 1 180px; min-width: 0; display: grid; gap: 2px; }
/* Un autre lien ou contrôle de la ligne (la source d'une revendication) passe au-dessus du lien étiré */
.pd-ligne__principal :is(a, button, input, select, textarea, summary):not(.pd-ligne__titre a) { position: relative; }
.pd-ligne__titre { font-size: inherit; line-height: inherit; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-ligne__titre a { text-decoration: none; }
/* Ligne entière : le titre et le détail se lisent en entier (récapitulatif à vérifier) */
.pd-ligne--entiere :is(.pd-ligne__titre, .pd-ligne__meta) { white-space: normal; overflow: visible; display: block; }
.pd-ligne__titre a::after { content: ""; position: absolute; inset: 0; }
.pd-ligne__meta { font-size: 13px; color: var(--encre-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-ligne__fin { display: grid; justify-items: end; gap: 4px; font-size: 12px; color: var(--encre-2); position: relative; }
/* Sans z-index : un menu ouvert depuis une ligne (une confirmation) passerait sous la barre d'onglets */
.pd-ligne__actions { display: flex; align-items: center; gap: var(--esp-1); position: relative; }
/* Téléphone : le titre d'une ligne sur deux lignes au plus, et ses actions à la taille d'un pouce */
@media (max-width: 719px) {
  .pd-ligne { flex-wrap: wrap; }
  .pd-ligne__principal { flex: 1 1 12rem; }
  .pd-ligne__actions { flex-wrap: wrap; }
  .pd-ligne__titre, .pd-ligne__meta { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  /* Au pouce, une petite action garde sa cible de 44 px */
  .pd-btn--petit { min-height: var(--cible); }
}
/* Non lue : un point bleu devant le nom, la seule touche de bleu de l'interface hors des avis d'information */
.pd-ligne--non-lue .pd-ligne__titre::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: var(--rayon-rond); background: var(--info); vertical-align: 0; }
.pd-ligne--non-lue .pd-ligne__meta { color: var(--encre); font-weight: 500; }
.pd-ligne__vignette { flex: none; width: 64px; aspect-ratio: 4 / 3; border-radius: var(--rayon); overflow: hidden; background: var(--fond-2); }
.pd-ligne__vignette img { width: 100%; height: 100%; object-fit: cover; }
/* Au téléphone, des actions passées à la ligne s'alignent sur le texte, pas sous la vignette */
@media (max-width: 719px) { .pd-ligne:has(> .pd-ligne__vignette) > .pd-ligne__actions { margin-left: calc(64px + var(--esp-3)); } }
/* Conversation : le pseudo et l'heure, le titre de l'annonce, puis l'aperçu et le compteur, chacun sur sa ligne coupée d'une ellipse */
.pd-messagerie__liste .pd-ligne { align-items: start; flex-wrap: nowrap; }
.pd-ligne__haut, .pd-ligne__bas { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-3); min-width: 0; }
.pd-ligne__haut > .pd-ligne__titre, .pd-ligne__bas > .pd-ligne__meta { flex: 1; min-width: 0; }
.pd-ligne__heure { flex: none; font-size: 12px; color: var(--encre-2); white-space: nowrap; }
.pd-ligne__bas { align-items: center; }
.pd-ligne__sujet { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-messagerie__liste :is(.pd-ligne__titre, .pd-ligne__meta) { display: block; white-space: nowrap; -webkit-line-clamp: unset; line-clamp: unset; }

/* ===== 20. Messagerie ===== */
.pd-fil { display: grid; gap: var(--esp-4); padding: var(--esp-4) 0; }
.pd-message:not(.pd-message--moi) + .pd-message:not(.pd-message--moi), .pd-message--moi + .pd-message--moi { margin-top: calc(var(--esp-1) - var(--esp-4)); }
.pd-fil__jour { justify-self: center; margin: var(--esp-3) 0 var(--esp-1); font-size: 12px; color: var(--encre-2); }
.pd-message { max-width: min(80%, 520px); justify-self: start; display: grid; gap: var(--esp-1); padding: var(--esp-3) var(--esp-4); border-radius: var(--rayon-grand); border-bottom-left-radius: var(--rayon-petit); background: var(--fond-2); line-height: 1.45; }
.pd-message--moi { justify-self: end; border-radius: var(--rayon-grand); border-bottom-right-radius: var(--rayon-petit); background: var(--jaune-pale); box-shadow: none; }
.pd-fil-tete { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-2) 0 var(--esp-3); }
/* Les actions sur la conversation (archiver, bloquer, signaler) dans un menu, à droite */
.pd-fil-tete > .pd-menu { margin-left: auto; }
.pd-message--moi .pd-message__heure { color: color-mix(in srgb, var(--encre) 68%, var(--jaune-pale)); }
.pd-message__heure { font-size: 12px; color: var(--encre-2); justify-self: end; font-variant-numeric: tabular-nums; }
.pd-message__photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; }
.pd-message__photos img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); }
.pd-fil-annonce { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-3); border-radius: var(--rayon-grand); background: var(--fond-2); text-decoration: none; }
.pd-fil-annonce img { flex: none; width: 56px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); }
/* Le titre de l'annonce tient sur une ligne, son prix à côté */
.pd-fil-annonce .pd-pile { flex: 1; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--esp-3); }
.pd-fil-annonce .corps-fort { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Le texte à côté de la vignette se coupe plutôt que de pousser la page (titre très long) */
.pd-fil-annonce > :not(img) { min-width: 0; }
/* Un bouton qui porte un champ de fichier (« Ajouter des photos ») montre le focus du champ */
label.pd-btn:has(input:focus-visible) { outline: 2px solid var(--encre); outline-offset: 2px; }
.pd-saisie-message { position: sticky; bottom: 0; z-index: 1; border-top: 1px solid var(--trait); display: flex; align-items: flex-end; gap: var(--esp-2); padding: var(--esp-3) 0 calc(var(--esp-3) + env(safe-area-inset-bottom, 0px)); background: var(--fond); }
/* Joindre des photos : un bouton à icône qui porte le champ fichier, son focus se voit */
.pd-saisie-message label.pd-btn:has(input:focus-visible) { outline: 2px solid var(--encre); outline-offset: 2px; }
.pd-saisie-message .pd-champ__saisie { min-height: 44px; max-height: 160px; padding-block: 11px; resize: none; }

/* ===== 21. Dépôt d'annonce ===== */
.pd-etapes { display: grid; gap: var(--esp-2); }
.pd-etapes__barre { height: 4px; border-radius: var(--rayon-rond); background: var(--fond-2); overflow: hidden; }
.pd-etapes__barre span { display: block; height: 100%; width: var(--avance, 25%); background: var(--jaune); }
/* Sans style en ligne (gabarits du site) : la part faite se donne par data-avance */
.pd-etapes__barre[data-avance="1/4"] span { width: 25%; }
.pd-etapes__barre[data-avance="1/3"] span { width: 33.34%; }
.pd-etapes__barre[data-avance="1/2"] span { width: 50%; }
.pd-etapes__barre[data-avance="2/3"] span { width: 66.67%; }
.pd-etapes__barre[data-avance="3/4"] span { width: 75%; }
.pd-etapes__barre[data-avance="1"] span { width: 100%; }
.pd-etapes__etat { font-size: 13px; color: var(--encre-2); }
.pd-etapes__liste { display: none; list-style: none; margin: 0; padding: 0; gap: var(--esp-5); counter-reset: etape; }
.pd-etapes__liste li { display: flex; align-items: center; gap: var(--esp-2); color: var(--encre-2); font-weight: 500; counter-increment: etape; }
.pd-etapes__liste li::before { content: counter(etape); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; transform: skewX(-14deg); border-radius: var(--rayon-petit); background: var(--fond-2); color: var(--encre); font-size: 12px; font-weight: 700; }
.pd-etapes__liste li[aria-current="step"] { color: var(--encre); font-weight: 600; }
.pd-etapes__liste li[aria-current="step"]::before { background: var(--jaune); color: var(--sur-jaune); }
.pd-etapes__liste li.pd-fait::before { content: ""; background: var(--encre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
@media (min-width: 720px) { .pd-etapes__liste { display: flex; } .pd-etapes__etat { display: none; } }
.pd-formulaire { display: grid; gap: var(--esp-7); }
.pd-formulaire__actions { position: sticky; bottom: 0; z-index: var(--z-barre); display: flex; gap: var(--esp-2); justify-content: space-between; margin-inline: calc(-1 * var(--marge-page)); padding: var(--esp-3) var(--marge-page) calc(var(--esp-3) + env(safe-area-inset-bottom)); background: var(--fond); border-top: 1px solid var(--trait); }
/* Sur téléphone, les actions collées prennent toute la largeur (l'action principale d'un bloc) */
.pd-formulaire__actions > .pd-btn { flex: 1 1 auto; min-width: 0; white-space: normal; }
.pd-formulaire__actions > .pd-btn--discret { flex: none; }
@media (max-width: 959px) { .pd-avec-barre .pd-formulaire__actions { position: static; margin-inline: 0; padding-inline: 0; border-top: 0; } }
@media (min-width: 720px) { .pd-formulaire__actions { position: static; margin-inline: 0; padding-inline: 0; border-top: 0; justify-content: flex-start; } .pd-formulaire__actions > .pd-btn { flex: none; } }

/* ===== 22. Tableau (espaces pro et gestion) ===== */
.pd-tableau-cadre { overflow-x: auto; }
.pd-tableau { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.pd-tableau th { text-align: left; font-size: 13px; font-weight: 600; color: var(--encre-2); padding: 10px 12px; background: var(--fond-2); white-space: nowrap; }
.pd-tableau th:first-child { border-radius: var(--rayon) 0 0 var(--rayon); }
.pd-tableau th:last-child { border-radius: 0 var(--rayon) var(--rayon) 0; }
.pd-tableau td { padding: 12px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.pd-tableau .pd-nombre { text-align: right; }
/* Tableau qui s'empile au téléphone (statistiques d'un particulier, équipements à saisir) : chaque
   ligne devient un bloc, la première cellule en entier, chaque autre dit son libellé (data-libelle). */
@media (max-width: 719px) {
  .pd-tableau--empile thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pd-tableau--empile, .pd-tableau--empile tbody { display: block; }
  .pd-tableau--empile tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3) var(--esp-4); padding-block: var(--esp-4); border-bottom: 1px solid var(--trait); }
  .pd-tableau--empile td { display: block; padding: 0; border: 0; }
  .pd-tableau--empile td:first-child { grid-column: 1 / -1; }
  .pd-tableau--empile td:empty { display: none; }
  .pd-tableau--empile .pd-nombre { text-align: left; }
  .pd-tableau--empile td[data-libelle]::before { content: attr(data-libelle); display: block; margin-bottom: var(--esp-1); font-size: 13px; font-weight: 600; color: var(--encre-2); }
}

/* ===== 23. Moins de mouvement ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .pd-bourse__fenetre { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .pd-bourse__defile, .pd-badge--flash.pd-allume, .pd-squelette, .pd-notification, .pd-dialogue[open], .pd-feuille[open], .pd-visionneuse[open], .pd-aide__bulle, .pd-consentement { animation: none; }
  .pd-bourse__pause { display: none; }
  .pd-carte:hover .pd-carte__photo img, .pd-tuile:hover img { transform: none; }
  .pd-btn[aria-busy="true"]::after, .pd-chargement { animation-duration: 2.4s; }
}

/* ===== 24. Messagerie : liste et fil côte à côte sur ordinateur =====
   Téléphone : la liste ou le fil, la page défile, la saisie est collée en bas.
   Ordinateur : une messagerie qui tient dans l'écran. La liste et les messages défilent chacun de leur côté,
   séparés par un filet (deux zones qui défilent) ; la personne et l'annonce restent en haut, la saisie en bas. */
.pd-messagerie { display: grid; min-height: calc(100dvh - var(--hauteur-entete)); }
.pd-messagerie__liste { display: none; min-width: 0; }
.pd-messagerie__fil { display: flex; flex-direction: column; min-width: 0; }
.pd-fil-zone { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pd-fil-zone .pd-fil { flex: 1; align-content: end; }
.pd-fil-bas { display: contents; }  /* téléphone : la saisie reste collée en bas de la page */
.pd-fil-haut { position: sticky; top: 0; z-index: 2; background: var(--fond); border-bottom: 1px solid var(--trait); }  /* barre collée : filet permis */
.pd-messagerie__retour { display: inline-flex; align-items: center; gap: var(--esp-1); padding: var(--esp-3) 0; font-weight: 600; text-decoration: none; }
.pd-fil-zone > .pd-avis { margin-top: var(--esp-3); }
/* Aucune conversation ouverte : la liste seule sur téléphone, un fil vide à côté sur ordinateur */
.pd-messagerie--liste .pd-messagerie__liste { display: block; }
.pd-messagerie--liste .pd-messagerie__fil { display: none; }
@media (min-width: 960px) {
  .pd-messagerie--liste .pd-messagerie__fil { display: flex; justify-content: center; }
  /* La page fait la hauteur de l'écran : l'en-tête et les avis gardent la leur, la messagerie prend le reste (aucune hauteur écrite en dur) */
  body:has(> .pd-messagerie) { height: 100dvh; overflow: hidden; }
  .pd-page > .pd-messagerie { flex: 1 1 0; min-height: 0; grid-template-columns: 360px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0; overflow: hidden; }
  .pd-messagerie__liste { display: block; padding: var(--esp-4) var(--esp-3) var(--esp-4) 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--trait); }  /* le filet sépare deux zones qui défilent */
  .pd-messagerie__liste .pd-ligne, .pd-messagerie__liste .pd-section__tete { padding-inline: var(--esp-3); }
  .pd-messagerie__liste .pd-ligne--active { margin-inline: 0; }
  .pd-messagerie__fil { min-height: 0; overflow: hidden; }
  .pd-fil-haut { position: static; padding-inline: var(--esp-5); padding-top: var(--esp-2); border-bottom: 0; }
  .pd-messagerie__fil > .pd-fil-annonce { flex: none; margin: 0 var(--esp-5) var(--esp-3); }
  .pd-messagerie__retour { display: none; }
  .pd-fil-zone { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding-inline: var(--esp-5); border-top: 1px solid var(--trait); }  /* sous l'annonce : le haut de la zone qui défile */
  /* Peu de messages : l'avis et le fil tombent ensemble en bas de la zone ; beaucoup : la zone défile depuis le haut */
  .pd-fil-zone { padding-top: var(--esp-3); }
  .pd-fil-zone:focus-visible { outline-offset: -2px; }  /* le fil coupe tout ce qui dépasse : l'anneau reste à l'intérieur */
  .pd-fil-zone > .pd-avis { flex: none; margin-top: auto; }
  .pd-fil-zone .pd-fil { flex: none; }
  .pd-fil-bas { display: block; flex: none; padding-inline: var(--esp-5); border-top: 1px solid var(--trait); }
  .pd-fil-bas .pd-defile { margin-inline: 0; padding-inline: 0; padding-top: var(--esp-3); }
  .pd-fil-bas .pd-avis { margin-top: var(--esp-3); }
  .pd-fil-bas .pd-saisie-message { position: static; border-top: 0; padding-bottom: var(--esp-3); }
}

/* ===== 25. Gestion (back-office) =====
   Les écrans de la gestion : navigation des modules, journal brut, différences d'une action, message cité.
   Une rangée qui défile sur téléphone, une colonne collée à gauche sur ordinateur. */
.pd-gestion { display: grid; gap: var(--esp-5); padding-block: var(--esp-5) var(--esp-8); }
.pd-gestion__nav { display: flex; gap: var(--esp-1); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--marge-page)); padding-inline: var(--marge-page); }
.pd-gestion__nav::-webkit-scrollbar { display: none; }
.pd-gestion__titre { display: none; }
.pd-gestion__lien { flex: none; display: flex; align-items: center; min-height: var(--cible); padding: 0 var(--esp-3); border-radius: var(--rayon); color: var(--encre-2); font-weight: 500; text-decoration: none; white-space: nowrap; }
.pd-gestion__lien[aria-current="page"] { background: var(--encre); color: var(--fond); font-weight: 600; }
.pd-gestion__contenu { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-6); align-content: start; min-width: 0; }
/* Un texte de la gestion garde une mesure lisible, même dans une colonne de 1 000 px */
.pd-gestion__contenu p { max-width: 60ch; }
@media (min-width: 960px) {
  .pd-gestion { grid-template-columns: 220px minmax(0, 1fr); gap: var(--esp-7); padding-top: var(--esp-6); }
  .pd-gestion__nav { position: sticky; top: calc(var(--hauteur-entete-grand) + var(--esp-4)); align-self: start; flex-direction: column; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .pd-gestion__titre { display: block; padding: 0 var(--esp-3) var(--esp-2); font-size: 13px; font-weight: 600; color: var(--encre-2); }
}
/* Journal brut d'un passage ou d'un import */
.pd-journal { margin: 0; max-height: 240px; overflow: auto; padding: var(--esp-3); border-radius: var(--rayon); background: var(--fond-2); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; line-height: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Différences d'une action du journal d'audit : le champ, l'ancienne valeur barrée, la nouvelle en gras */
.pd-diff { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px var(--esp-3); font-size: 13px; line-height: 18px; }
.pd-diff dt { color: var(--encre-2); }
.pd-diff dd { overflow-wrap: anywhere; }
.pd-diff del { color: var(--encre-2); }
.pd-diff ins { text-decoration: none; font-weight: 600; }
/* Message cité en modération : le texte tel qu'il a été envoyé, sur l'aplat gris */
.pd-citation { margin: 0; padding: var(--esp-3) var(--esp-4); border-radius: var(--rayon); background: var(--fond-2); white-space: pre-line; overflow-wrap: anywhere; }

/* ===== 26. Survol : seulement avec une souris =====
   Sur un écran tactile, le premier toucher déclenche le survol et le laisse collé : chaque effet de
   survol vit ici. Le retour au toucher passe par :active, à côté de chaque composant. */
/* Au doigt (téléphone à l'horizontale, tablette) : les petites cibles des composants à 44 px */
@media (pointer: coarse) {
  .pd-filtre, .pd-btn--petit, .pd-pagination__page { min-height: var(--cible); }
  .pd-pagination__page { min-width: var(--cible); height: var(--cible); }
  /* Liens en ligne : la zone de toucher grandit sans déplacer la mise en page */
  .pd-entete__nav a, .pd-entete__lien, .pd-section__tete > .pd-lien { padding-block: 11px; }
}

@media (hover: hover) and (pointer: fine) {
  /* :where() ne compte pas dans la priorité : chaque variante (jaune, plein, discret…) garde son propre survol */
  .pd-btn:where(:not([aria-pressed="true"])):hover, .pd-btn--large[aria-pressed="true"]:hover { background: var(--fond-3); }
  .pd-btn--jaune:hover { background: var(--jaune-fonce); }
  .pd-btn--plein:hover { background: color-mix(in srgb, var(--encre) 84%, var(--fond)); }
  .pd-btn--discret:hover { background: var(--fond-2); }
  .pd-btn--contour:hover { background: var(--fond); }
  .pd-btn--danger:hover { background: color-mix(in srgb, var(--erreur) 88%, #000); }
  .pd-lien:hover { text-decoration-color: currentColor; }
  .pd-lien--fleche:hover { text-decoration: underline; text-underline-offset: 4px; }
  .pd-choix__carte:not(:has(input:checked)):hover { background: var(--fond-3); }
  .pd-televersement:hover { background: var(--fond-3); }
  .pd-filtre:not(.pd-filtre--actif, [aria-pressed="true"]):hover { background: var(--fond-3); }
  .pd-filtre--actif:hover { background: color-mix(in srgb, var(--encre) 84%, var(--fond)); }
  .pd-menu__option:hover { background: var(--fond-2); }
  .pd-carte:hover .pd-carte__photo img { transform: scale(1.03); }
  .pd-favori:hover > span { transform: scale(1.08); }
  .pd-entete__nav a:hover, .pd-entete__lien:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
  .pd-ariane a:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
  .pd-pagination__page:not([aria-current]):hover { background: var(--fond-3); }
  .pd-bourse:hover .pd-bourse__defile { animation-play-state: paused; }
  .pd-bourse__cours:hover .pd-bourse__nom { text-decoration: underline; text-underline-offset: 3px; }
  .pd-bourse__pause:hover { background: var(--fond-2); }
  .pd-tuile:hover img { transform: scale(1.04); }
  .pd-pied__colonnes a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .pd-quantite button:not([aria-disabled="true"]):hover { background: var(--fond-3); }
  .pd-calendrier__jour:not([aria-pressed="true"], [aria-disabled="true"]):hover { background: var(--fond-2); }
  .pd-calendrier__dans .pd-calendrier__jour:not([aria-disabled="true"]):hover { background: var(--fond-3); }
  .pd-suggestions__option:hover { background: var(--fond-2); }
  .pd-accordeon summary:hover { text-decoration: underline; text-underline-offset: 4px; }
  .pd-aide > summary:hover { color: var(--encre); }
  .pd-galerie__agrandir:hover { background: color-mix(in srgb, #fff 90%, #000); }
  .pd-chiffre:has(.pd-chiffre__lien:hover) .pd-chiffre__lien { text-decoration: underline; text-underline-offset: 3px; }
  .pd-gestion__lien:not([aria-current]):hover { background: var(--fond-2); color: var(--encre); }
  .pd-ligne--lien:hover .pd-ligne__titre a { text-decoration: underline; text-underline-offset: 4px; }
  .pd-ligne--lien:hover .pd-ligne__fleche { color: var(--encre); }
  @media (prefers-reduced-motion: no-preference) { .pd-ligne--lien:hover .pd-ligne__fleche { translate: 2px -50%; } }
}