/* Genere par design/outils/assembler.py a partir de design/composants/*.css, ne pas editer.
 * Modifier la feuille source du composant puis relancer : python3 design/outils/assembler.py
 * Charge une seule fois par templates/head.php, apres style.css.
 */

/* ===== actions.css ===== */
/* Rangee d'actions de la fiche : partir (accent, 52 px), partager, favori, version imprimable.
   Au telephone : l'itineraire prend sa ligne, puis Partager et le coeur. En bureau : une seule rangee.
   Les boutons viennent de bouton.css. */
.pds-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pds-space-2);
}
.pds-actions .pds-actions__itineraire { flex: 1 1 100%; }
.pds-actions .pds-actions__partager { flex: 1 1 0; min-width: 0; }
.pds-actions .pds-actions__favori { flex: 0 0 auto; }
.pds-actions .pds-actions__imprimer { display: none; }
.pds-actions .pds-actions__etat { flex: 1 1 100%; }

/* Favori actif : coeur plein, couleur de l'etat, bordure de meme couleur */
.pds-bouton.pds-bouton--favori { border-color: var(--pds-semantic-danger-mark); color: var(--pds-semantic-danger-mark); }
.pds-bouton.pds-bouton--favori:hover { background: var(--pds-semantic-danger-bg); color: var(--pds-semantic-danger-text); }
.pds-fiche .pds-bouton--favori .material-icons { color: var(--pds-semantic-danger-mark); }

@media (min-width: 992px) {
  .pds-actions { justify-content: flex-end; }
  .pds-actions .pds-actions__itineraire,
  .pds-actions .pds-actions__partager { flex: 0 0 auto; }
  .pds-actions .pds-actions__imprimer { display: inline-flex; }
  .pds-actions .pds-actions__etat { flex: 1 1 100%; text-align: right; }
}

/* ===== agres-grille.css ===== */
/* Grille d'agres pds-agres-grille (5.8) : une tuile par type d'agres de la fiche, lien vers /agres/<slug>.
   Quatre colonnes au telephone, huit en bureau (auto-fill de 80 px minimum). Le nombre d'ateliers du type
   s'affiche en compteur quand il depasse 1. Dans un repli : fermee au telephone, ouverte en bureau. */
.pds-agres-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pds-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pds-agres-grille__tuile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pds-space-1);
  height: 100%;
  min-height: 100px;
  padding: var(--pds-space-1) 0;
  border-radius: var(--pds-radius-sm);
  color: var(--pds-semantic-text);
  text-decoration: none;
  transition: background-color var(--pds-duration-fast) var(--pds-easing-out);
}
a.pds-agres-grille__tuile:hover { background: var(--pds-semantic-primary-soft-strong); color: var(--pds-semantic-text); }
a.pds-agres-grille__tuile:focus-visible {
  outline: var(--pds-control-focus-width) solid var(--pds-semantic-focus);
  outline-offset: var(--pds-control-focus-offset);
}
.pds-agres-grille__tuile--fixe { cursor: default; }
.pds-agres-grille__image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 100%;
  height: var(--pds-control-agres-grid);
  border-radius: var(--pds-radius-sm);
  background: var(--pds-semantic-primary-soft);
}
.pds-agres-grille__image img { width: var(--pds-control-agres-grid); height: var(--pds-control-agres-grid); object-fit: contain; }
.pds-agres-grille__image .material-icons { width: 1em; overflow: hidden; font-size: 28px; line-height: 1; color: var(--pds-semantic-primary); }
.pds-agres-grille__nombre {
  position: absolute;
  top: var(--pds-space-half);
  right: var(--pds-space-half);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--pds-radius-pill);
  background: var(--pds-semantic-text);
  color: var(--pds-semantic-text-inverse);
  font-size: var(--pds-font-size-11);
  font-weight: var(--pds-font-weight-semibold);
  line-height: 1;
}
.pds-agres-grille__nom {
  font-size: var(--pds-font-size-11);
  font-weight: var(--pds-font-weight-medium);
  line-height: var(--pds-font-line-height-compact);
  text-align: center;
  /* Coupe entre les mots, ou a la cesure avec tiret (hyphens: auto, langue de la page), jamais au milieu d'un mot */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 992px) {
  .pds-agres-grille { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .pds-agres-grille__tuile { transition: none; }
}

/* ===== ateliers.css ===== */
/* Liste des ateliers pds-ateliers et atelier pds-atelier (5.9) : une seule liste numerotee, une ligne de
   56 px minimum par atelier. Numero (le meme dessin que le marqueur de carte), illustration du type,
   nom, vignette de la premiere photo avec « +N », puis le guide replie (details dont le resume est le
   chevron, place a droite de la ligne). Premier guide ouvert. En bureau : grille de deux colonnes, par rangees. */
.pds-ateliers {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pds-atelier {
  position: relative;
  margin: 0;
  border-bottom: 1px solid var(--pds-semantic-border);
  background: var(--pds-semantic-surface);
  break-inside: avoid;
}
.pds-atelier__ligne {
  display: flex;
  align-items: center;
  gap: var(--pds-space-2);
  min-height: 56px;
  padding: var(--pds-space-1) 0;
}
/* La place du chevron est reservee sur TOUTES les lignes, guide ou non : sinon la vignette d'une ligne sans
   guide part 44 px plus a droite que celles des autres (passage utilisateur reel 3.0 n°1, friction 14) */
.pds-ateliers:not(.pds-ateliers--types) .pds-atelier__ligne,
.pds-atelier--guide > .pds-atelier__ligne { padding-right: var(--pds-control-target); }

/* Numero : zone de toucher de 44 px autour d'une pastille de 32 px */
.pds-atelier__numero {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pds-control-target);
  height: var(--pds-control-target);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.pds-atelier__numero--fixe { cursor: default; }
.pds-atelier__numero > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pds-control-badge-num);
  height: var(--pds-control-badge-num);
  border: 2px solid var(--pds-semantic-marker-ring);
  border-radius: var(--pds-radius-pill);
  background: var(--pds-semantic-marker-bg);
  color: var(--pds-semantic-text-inverse);
  font-family: var(--pds-font-family-body);
  font-size: var(--pds-font-size-md);
  font-weight: var(--pds-font-weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--pds-shadow-sm);
  transition: box-shadow var(--pds-duration-fast) var(--pds-easing-out);
}
button.pds-atelier__numero:hover > span { background: var(--pds-semantic-primary-hover); }
/* Panneau de depart : ce n'est pas un atelier, il porte le drapeau du depart (celui de la carte), sans numero */
.pds-atelier__numero--depart > span { background: var(--pds-semantic-primary-hover); }
.pds-atelier__numero--depart .material-icons { width: 1em; overflow: hidden; font-size: 20px; line-height: 1; }
button.pds-atelier__numero:focus-visible {
  outline: var(--pds-control-focus-width) solid var(--pds-semantic-focus);
  outline-offset: var(--pds-control-focus-offset);
  border-radius: var(--pds-radius-pill);
}

.pds-atelier__illustration {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pds-control-agres-list);
  height: var(--pds-control-agres-list);
  border-radius: var(--pds-radius-sm);
  background: var(--pds-semantic-primary-soft);
}
.pds-atelier__illustration img { width: 100%; height: 100%; object-fit: contain; }
.pds-atelier__illustration .material-icons { width: 1em; overflow: hidden; font-size: 24px; line-height: 1; color: var(--pds-semantic-primary); }

.pds-atelier__texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pds-atelier__nom {
  font-size: var(--pds-font-size-base);
  font-weight: var(--pds-font-weight-semibold);
  line-height: var(--pds-font-line-height-snug);
  color: var(--pds-semantic-text);
  overflow-wrap: anywhere;
}
.pds-atelier__sous {
  font-size: var(--pds-font-size-sm);
  line-height: var(--pds-font-line-height-compact);
  color: var(--pds-semantic-text-secondary);
}

/* Vignette de la premiere photo : ouvre la visionneuse a cette photo */
.pds-atelier__vignette {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: var(--pds-control-thumb-sm);
  height: var(--pds-control-thumb-sm);
  padding: 0;
  border: 0;
  border-radius: var(--pds-radius-sm);
  overflow: visible;
  background: var(--pds-semantic-surface-alt);
  cursor: pointer;
}
.pds-atelier__vignette img { display: block; width: 100%; height: 100%; border-radius: var(--pds-radius-sm); object-fit: cover; }
.pds-atelier__vignette:focus-visible {
  outline: var(--pds-control-focus-width) solid var(--pds-semantic-focus);
  outline-offset: var(--pds-control-focus-offset);
}
.pds-atelier__plus {
  position: absolute;
  right: calc(var(--pds-space-1) * -1);
  bottom: calc(var(--pds-space-1) * -1);
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 6px;
  border: 2px solid var(--pds-semantic-surface);
  border-radius: var(--pds-radius-pill);
  background: var(--pds-semantic-text);
  color: var(--pds-semantic-text-inverse);
  font-size: var(--pds-font-size-11);
  font-weight: var(--pds-font-weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Guide : le resume est le chevron (44 x 44), pose a droite de la ligne ; le corps s'ouvre dessous */
.pds-atelier__guide { display: block; }
.pds-atelier__chevron {
  position: absolute;
  top: calc((56px - var(--pds-control-target)) / 2);
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pds-control-target);
  height: var(--pds-control-target);
  list-style: none;
  border-radius: var(--pds-radius-sm);
  color: var(--pds-semantic-primary);
  cursor: pointer;
}
.pds-atelier__chevron::-webkit-details-marker { display: none; }
.pds-atelier__chevron::marker { content: ""; }
.pds-atelier__chevron:hover { background: var(--pds-semantic-primary-soft); }
.pds-atelier__chevron .material-icons {
  width: 1em;
  overflow: hidden;
  font-size: 24px;
  line-height: 1;
  transition: transform var(--pds-duration-slow) var(--pds-easing-out);
}
.pds-atelier__guide[open] > .pds-atelier__chevron .material-icons { transform: rotate(180deg); }
.pds-atelier__corps {
  margin: 0 0 var(--pds-space-2);
  padding: var(--pds-space-2) var(--pds-space-4);
  border-radius: var(--pds-radius-md);
  background: var(--pds-semantic-primary-soft);
}
.pds-atelier__comment-titre {
  margin: 0;
  font-size: var(--pds-font-size-sm);
  font-weight: var(--pds-font-weight-semibold);
  line-height: var(--pds-font-line-height-compact);
  color: var(--pds-semantic-heading);
}
.pds-atelier__comment {
  margin: 0;
  font-size: var(--pds-font-size-base);
  line-height: var(--pds-font-line-height-relaxed);
  color: var(--pds-semantic-text);
}
.pds-atelier__savoir {
  display: inline-flex;
  align-items: center;
  min-height: var(--pds-control-target);
  font-size: var(--pds-font-size-15);
  font-weight: var(--pds-font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Atelier courant (clic sur son marqueur ou sur son numero) : fond doux et anneau autour du numero */
.pds-atelier--courant { background: var(--pds-semantic-primary-soft); }
.pds-atelier--courant .pds-atelier__numero > span {
  box-shadow: 0 0 0 2px var(--pds-semantic-surface), 0 0 0 5px var(--pds-semantic-primary);
}
.pds-atelier--courant .pds-atelier__corps { background: var(--pds-semantic-surface); }
.pds-atelier:hover { background: var(--pds-semantic-canvas); }
.pds-atelier--courant:hover { background: var(--pds-semantic-primary-soft); }

/* Fiche sans atelier saisi : exercices par type d'agres, sans numero */
.pds-ateliers--types .pds-atelier__ligne { padding-left: var(--pds-space-1); }

/* Selecteur de niveau, au-dessus de la liste (le segmente vient de champ.css) */
.pds-niveau-zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pds-space-1) var(--pds-space-3);
  margin: 0 0 var(--pds-space-2);
}
.pds-niveau-zone__etiquette {
  font-size: var(--pds-font-size-15);
  font-weight: var(--pds-font-weight-semibold);
  color: var(--pds-semantic-text-secondary);
}
.pds-fiche__retour-calme { margin-top: var(--pds-space-2); }

@media (min-width: 992px) {
  /* Grille par rangees (1 et 2, puis 3 et 4...) et non colonnes CSS : deplier un atelier n'agrandit que sa
     rangee, la colonne voisine ne rebascule plus (passage utilisateur reel 3.0 n°2) */
  .pds-ateliers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--pds-space-6); }
  .pds-ateliers--types { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .pds-atelier__numero > span,
  .pds-atelier__chevron .material-icons { transition: none; }
}

/* ===== avis.css ===== */
/* Avis pds-avis et etoiles pds-etoiles (5.14). Resume (note en Fraunces, etoiles pleines, demies et vides),
   formulaire (cinq etoiles de 44 x 44, zone de texte, bouton), liste d'avis. Les etoiles ont trois formes :
   la note se lit sans la couleur. Rendu par le script de la fiche (fiche_template.php). */
.pds-etoiles { display: inline-flex; align-items: center; color: var(--pds-semantic-star); vertical-align: middle; }
.pds-etoiles .material-icons { width: 1em; overflow: hidden; line-height: 1; color: var(--pds-semantic-star); }
.pds-etoiles__vide { color: var(--pds-semantic-star-empty); }
.pds-etoiles .pds-etoiles__vide { color: var(--pds-semantic-star-empty); }
.pds-etoiles--s .material-icons { font-size: 16px; }
.pds-etoiles--m .material-icons { font-size: 18px; }
.pds-etoiles--l .material-icons { font-size: 20px; }

.pds-avis__resume:empty { display: none; }
.pds-avis__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pds-space-1) var(--pds-space-2);
  margin: 0 0 var(--pds-space-3);
}
.pds-avis__valeur {
  font-family: var(--pds-font-family-head);
  font-size: var(--pds-font-size-3xl);
  font-weight: var(--pds-font-weight-semibold);
  line-height: 1;
  color: var(--pds-semantic-star);
}
.pds-avis__sur { font-size: var(--pds-font-size-sm); color: var(--pds-semantic-text-secondary); }
.pds-avis__lien {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: var(--pds-font-size-md);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pds-avis__vide,
.pds-avis__attente,
.pds-avis__erreur,
.pds-avis__info {
  margin: 0 0 var(--pds-space-3);
  font-size: var(--pds-font-size-base);
  line-height: var(--pds-font-line-height-base);
  color: var(--pds-semantic-text-secondary);
}
.pds-avis__erreur { color: var(--pds-semantic-danger-text); }
.pds-avis__info { display: flex; align-items: flex-start; gap: var(--pds-space-2); }
.pds-avis__info .material-icons { font-size: var(--pds-control-icon-sm); color: var(--pds-semantic-info-mark); }

/* Formulaire */
.pds-avis__formulaire { margin: 0 0 var(--pds-space-4); }
.pds-avis__formulaire-cadre {
  margin: 0;
  padding: var(--pds-space-4);
  min-width: 0;
  border: 1px solid var(--pds-semantic-border);
  border-radius: var(--pds-radius-md);
  background: var(--pds-semantic-surface);
}
.pds-avis__titre-form {
  float: none;
  width: auto;
  margin: 0 0 var(--pds-space-2);
  padding: 0;
  border: 0;
  font-family: var(--pds-font-family-head);
  font-size: var(--pds-font-size-lg);
  font-weight: var(--pds-font-weight-semibold);
  color: var(--pds-semantic-heading);
}
.pds-avis__legende {
  margin: 0;
  font-size: var(--pds-font-size-15);
  font-weight: var(--pds-font-weight-semibold);
  color: var(--pds-semantic-text-secondary);
}
.pds-avis__choix { display: flex; gap: var(--pds-space-1); margin: 0 0 var(--pds-space-3); }
.pds-avis__etoile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pds-control-target);
  height: var(--pds-control-target);
  padding: 0;
  border: 0;
  border-radius: var(--pds-radius-sm);
  background: transparent;
  cursor: pointer;
}
.pds-avis__etoile .material-icons { width: 1em; overflow: hidden; font-size: 32px; line-height: 1; color: var(--pds-semantic-star); }
.pds-avis__etoile:hover { background: var(--pds-semantic-primary-soft); }
.pds-avis__actions { display: flex; flex-wrap: wrap; gap: var(--pds-space-2); }

/* Liste */
.pds-avis__item {
  margin: 0 0 var(--pds-space-3);
  padding: var(--pds-space-3) var(--pds-space-4);
  border: 1px solid var(--pds-semantic-border);
  border-radius: var(--pds-radius-md);
  background: var(--pds-semantic-surface);
}
.pds-avis__entete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pds-space-1) var(--pds-space-2); }
.pds-avis__pseudo { font-size: var(--pds-font-size-15); font-weight: var(--pds-font-weight-semibold); }
.pds-avis__langue {
  padding: 0 var(--pds-space-1);
  border-radius: var(--pds-radius-xs);
  background: var(--pds-semantic-surface-alt);
  color: var(--pds-semantic-text-secondary);
  font-size: var(--pds-font-size-11);
  font-weight: var(--pds-font-weight-semibold);
  line-height: 1.6;
}
.pds-avis__date { font-size: var(--pds-font-size-sm); color: var(--pds-semantic-text-muted); }
.pds-avis__texte { margin: var(--pds-space-2) 0 0; font-size: var(--pds-font-size-base); line-height: var(--pds-font-line-height-relaxed); white-space: pre-line; }

/* ===== bouton.css ===== */
/* Bouton pds-bouton (5.4). Aucune couleur, ombre, rayon ni duree en dur : seulement des jetons.
   Variantes : --primaire, --secondaire, --discret, --accent, --danger, --icone.
   Tailles : --sm (36), defaut (44), --lg (52). --bloc : pleine largeur. */
.pds-bouton {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pds-space-2);
  min-height: var(--pds-control-height-md);
  padding: var(--pds-space-2) var(--pds-control-padding-x);
  border: var(--pds-control-border-width) solid transparent;
  border-radius: var(--pds-radius-sm);
  background: transparent;
  color: var(--pds-semantic-primary);
  font-family: var(--pds-font-family-body);
  font-size: var(--pds-font-size-base);
  font-weight: var(--pds-font-weight-semibold);
  line-height: var(--pds-font-line-height-base);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--pds-duration-fast) var(--pds-easing-out),
    border-color var(--pds-duration-fast) var(--pds-easing-out),
    color var(--pds-duration-fast) var(--pds-easing-out),
    box-shadow var(--pds-duration-fast) var(--pds-easing-out);
}
@media (min-width: 992px) {
  .pds-bouton { font-size: var(--pds-font-size-15); }
}
.pds-bouton:hover { text-decoration: none; }
.pds-bouton:focus-visible {
  outline: var(--pds-control-focus-width) solid var(--pds-semantic-focus);
  outline-offset: var(--pds-control-focus-offset);
}

/* Icone a gauche du libelle : 22 px, couleur du texte */
.pds-bouton__icone,
.pds-bouton .material-icons {
  flex: 0 0 auto;
  font-size: var(--pds-control-icon-md);
  line-height: 1;
  width: 1em;
  overflow: hidden;
}

/* Boutons Bootstrap (.btn) des pages non refondues : 44 px de haut comme les boutons du site, sauf --sm */
.btn:not(.btn-sm) { min-height: var(--pds-control-target); }

/* --- Variantes --- */
.pds-bouton--primaire {
  background: var(--pds-semantic-primary);
  border-color: var(--pds-semantic-primary);
  color: var(--pds-semantic-text-inverse);
}
.pds-bouton--primaire:hover {
  background: var(--pds-semantic-primary-hover);
  border-color: var(--pds-semantic-primary-hover);
  color: var(--pds-semantic-text-inverse);
  box-shadow: var(--pds-shadow-md);
}
.pds-bouton--primaire:active {
  background: var(--pds-semantic-primary-active);
  border-color: var(--pds-semantic-primary-active);
  color: var(--pds-semantic-text-inverse);
  box-shadow: none;
}

.pds-bouton--secondaire {
  background: var(--pds-semantic-surface);
  border-color: var(--pds-semantic-primary);
  color: var(--pds-semantic-primary);
}
.pds-bouton--secondaire:hover {
  background: var(--pds-semantic-primary-soft);
  color: var(--pds-semantic-primary);
}
.pds-bouton--secondaire:active {
  background: var(--pds-semantic-primary-soft-strong);
  color: var(--pds-semantic-heading);
}

.pds-bouton--discret {
  background: transparent;
  border-color: transparent;
  color: var(--pds-semantic-primary);
}
.pds-bouton--discret:hover {
  background: var(--pds-semantic-primary-soft);
  color: var(--pds-semantic-primary);
}
.pds-bouton--discret:active {
  background: var(--pds-semantic-primary-soft-strong);
  color: var(--pds-semantic-heading);
}

.pds-bouton--accent {
  background: var(--pds-semantic-accent);
  border-color: var(--pds-semantic-accent);
  color: var(--pds-semantic-text-inverse);
}
.pds-bouton--accent:hover,
.pds-bouton--accent:active {
  background: var(--pds-semantic-accent-hover);
  border-color: var(--pds-semantic-accent-hover);
  color: var(--pds-semantic-text-inverse);
}

.pds-bouton--danger {
  background: var(--pds-semantic-danger-mark);
  border-color: var(--pds-semantic-danger-mark);
  color: var(--pds-semantic-text-inverse);
}
.pds-bouton--danger:hover,
.pds-bouton--danger:active {
  background: var(--pds-semantic-danger-hover);
  border-color: var(--pds-semantic-danger-hover);
  color: var(--pds-semantic-text-inverse);
}

/* Bouton d'icone seule : 44 x 44, aria-label obligatoire */
.pds-bouton--icone {
  width: var(--pds-control-target);
  min-width: var(--pds-control-target);
  padding: 0;
}
.pds-bouton--rond { border-radius: var(--pds-radius-pill); }

/* --- Tailles --- */
.pds-bouton--sm {
  min-height: var(--pds-control-height-sm);
  padding: var(--pds-space-1) var(--pds-control-padding-x-sm);
  font-size: var(--pds-font-size-md);
}
.pds-bouton--sm.pds-bouton--icone { width: var(--pds-control-height-sm); min-width: var(--pds-control-height-sm); padding: 0; }
.pds-bouton--lg {
  min-height: var(--pds-control-height-lg);
  font-size: var(--pds-font-size-base);
}
.pds-bouton--bloc { display: flex; width: 100%; }

/* --- Desactive : fond, texte et bordure propres, jamais d'opacite --- */
.pds-bouton:disabled,
.pds-bouton[aria-disabled="true"] {
  background: var(--pds-semantic-disabled-bg);
  border-color: var(--pds-semantic-disabled-border);
  color: var(--pds-semantic-disabled-text);
  box-shadow: none;
  cursor: not-allowed;
}

/* --- Chargement : l'icone autorenew tourne, le libelle reste --- */
.pds-bouton__chargement { display: none; }
.pds-bouton[aria-busy="true"] .pds-bouton__chargement {
  display: inline-block;
  animation: pds-bouton-tourne calc(var(--pds-duration-slow) * 4) linear infinite;
}
.pds-bouton[aria-busy="true"] { cursor: progress; }
@keyframes pds-bouton-tourne { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .pds-bouton { transition: none; }
  .pds-bouton[aria-busy="true"] .pds-bouton__chargement { animation: none; }
}

/* ===== carte-parcours.css ===== */
/* Carte de parcours pds-carte-parcours (5.6) : tout le bloc est le lien. Vignette 88 x 66, titre en Fraunces
   sur deux lignes au plus, lieu, puces de chiffres, et la distance en tete dans « Parcours a proximite »
   (« a 6 km »). Liste en colonne, au telephone comme dans la colonne laterale en bureau. */
.pds-cartes-parcours {
  display: flex;
  flex-direction: column;
  gap: var(--pds-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pds-carte-parcours {
  box-sizing: border-box;
  display: flex;
  gap: var(--pds-space-3);
  height: 100%;
  padding: var(--pds-space-2);
  border: 1px solid var(--pds-semantic-border);
  border-radius: var(--pds-radius-md);
  background: var(--pds-semantic-surface);
  box-shadow: var(--pds-shadow-sm);
  color: var(--pds-semantic-text);
  text-decoration: none;
  transition: box-shadow var(--pds-duration-fast) var(--pds-easing-out), transform var(--pds-duration-fast) var(--pds-easing-out);
}
.pds-carte-parcours:hover {
  box-shadow: var(--pds-shadow-md);
  transform: translateY(-2px);
  color: var(--pds-semantic-text);
  text-decoration: none;
}
.pds-carte-parcours:focus-visible {
  outline: var(--pds-control-focus-width) solid var(--pds-semantic-focus);
  outline-offset: var(--pds-control-focus-offset);
}
.pds-carte-parcours__vignette {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 66px;
  border-radius: var(--pds-radius-sm);
  overflow: hidden;
  background: var(--pds-semantic-primary-soft);
}
.pds-carte-parcours__vignette img { width: 100%; height: 100%; object-fit: cover; }
.pds-carte-parcours__vignette img.pds-carte-parcours__picto { width: 36px; height: 36px; object-fit: contain; }
.pds-carte-parcours__corps { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--pds-space-half); }
.pds-carte-parcours__distance {
  display: inline-flex;
  align-items: center;
  gap: var(--pds-space-1);
  font-size: var(--pds-font-size-sm);
  font-weight: var(--pds-font-weight-semibold);
  line-height: var(--pds-font-line-height-compact);
  color: var(--pds-semantic-accent);
}
.pds-carte-parcours__distance .material-icons,
.pds-carte-parcours__lieu .material-icons,
.pds-carte-parcours__note .material-icons { width: 1em; overflow: hidden; font-size: 14px; line-height: 1; }
.pds-carte-parcours__titre {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--pds-font-family-head);
  font-size: var(--pds-font-size-17);
  font-weight: var(--pds-font-weight-semibold);
  line-height: var(--pds-font-line-height-snug);
  color: var(--pds-semantic-text);
}
.pds-carte-parcours__lieu {
  display: inline-flex;
  align-items: center;
  gap: var(--pds-space-1);
  font-size: var(--pds-font-size-md);
  line-height: var(--pds-font-line-height-compact);
  color: var(--pds-semantic-text-secondary);
}
.pds-carte-parcours__puces { display: flex; flex-wrap: wrap; gap: var(--pds-space-1); margin-top: var(--pds-space-1); }
.pds-carte-parcours__puce {
  padding: 2px var(--pds-space-2);
  border-radius: var(--pds-radius-pill);
  background: var(--pds-semantic-primary-soft);
  color: var(--pds-semantic-text);
  font-size: var(--pds-font-size-xs);
  font-weight: var(--pds-font-weight-semibold);
  line-height: var(--pds-font-line-height-compact);
}
.pds-carte-parcours__note {
  display: inline-flex;
  align-items: center;
  gap: var(--pds-space-1);
  font-size: var(--pds-font-size-sm);
  font-weight: var(--pds-font-weight-semibold);
  color: var(--pds-semantic-star);
}
.pds-carte-parcours__note .material-icons { color: var(--pds-semantic-star); }
.pds-carte-parcours__avis { font-weight: var(--pds-font-weight-regular); color: var(--pds-semantic-text-secondary); }
@media (min-width: 992px) {
}
@media (prefers-reduced-motion: reduce) {
  .pds-carte-parcours { transition: none; }
  .pds-carte-parcours:hover { transform: none; }
}

/* ===== carte.css ===== */
/* Carte des ateliers pds-carte (5.10) : une seule carte Leaflet dans le flux de la fiche. 280 px de haut au
   telephone, 420 px en bureau. Controles Leaflet a 36 px, attribution OSM en 11 px sur fond blanc translucide.
   « Agrandir la carte » : plein ecran (API Fullscreen) ou, sans elle, cadre fixe sur toute la fenetre. */
.pds-carte { display: block; }
.pds-carte__cadre {
  position: relative;
  border: 1px solid var(--pds-semantic-border);
  border-radius: var(--pds-radius-md);
  overflow: hidden;
  background: var(--pds-semantic-primary-soft);
}
.pds-carte__carte {
  width: 100%;
  height: var(--pds-layout-map-phone);
  background: var(--pds-semantic-primary-soft);
  z-index: 0;
}
/* « Reduire la carte » en haut au centre : les controles de zoom Leaflet occupent un coin (libererZoom les
   change de coin au besoin), jamais le milieu du bord haut */
.pds-carte__fermer { position: absolute; top: var(--pds-space-2); left: 50%; transform: translateX(-50%); z-index: 1100; }
.pds-carte__fermer[hidden] { display: none; }
.pds-carte__actions { display: flex; flex-wrap: wrap; gap: var(--pds-space-1); margin: var(--pds-space-1) calc(var(--pds-space-2) * -1) 0; }
.pds-carte__actions .pds-bouton { padding-left: var(--pds-space-2); padding-right: var(--pds-space-2); gap: var(--pds-space-1); }

.pds-carte__cadre--agrandi {
  position: fixed;
  inset: 0;
  z-index: 1900;
  border: 0;
  border-radius: 0;
}
.pds-carte__cadre--agrandi .pds-carte__carte,
.pds-carte__cadre:fullscreen .pds-carte__carte { height: 100vh; height: 100dvh; }
.pds-carte__cadre:fullscreen { border: 0; border-radius: 0; }

/* Leaflet : controles de 36 px, attribution lisible, infobulles aux polices du site */
.pds-carte .leaflet-bar a,
.pds-carte .leaflet-bar a:hover {
  width: 36px;
  height: 36px;
  line-height: 36px;
  color: var(--pds-semantic-text);
}
.pds-carte .leaflet-control-attribution {
  padding: 0 var(--pds-space-1);
  background: var(--pds-color-alpha-white-85);
  font-size: var(--pds-font-size-11);
  line-height: 1.5;
  color: var(--pds-semantic-text-secondary);
}
.pds-carte .leaflet-control-attribution a { color: var(--pds-semantic-link); }
.pds-carte .leaflet-tooltip {
  font-family: var(--pds-font-family-body);
  font-size: var(--pds-font-size-md);
  font-weight: var(--pds-font-weight-medium);
  color: var(--pds-semantic-text);
}
.pds-carte .leaflet-popup-content { font-family: var(--pds-font-family-body); font-size: var(--pds-font-size-md); line-height: var(--pds-font-line-height-base); }

@media (min-width: 992px) {
  .pds-carte__carte { height: var(--pds-layout-map-desktop); }
}
@media (prefers-reduced-motion: reduce) {
  .pds-carte .leaflet-zoom-anim .leaflet-zoom-animated,
  .pds-carte .leaflet-fade-anim .leaflet-popup,
  .pds-carte .leaflet-cluster-anim .leaflet-marker-icon,
  .pds-carte .leaflet-cluster-anim .leaflet-marker-shadow { transition: none !important; }
}

/* ===== champ.css ===== */
/* Champ de formulaire pds-champ (5.16). Libelle au-dessus, controle de 44 px, aide et erreur dessous.
   Texte de 16 px au minimum : iOS zoomerait sinon. Jetons seulement. */
.pds-champ { display: block; margin: 0 0 var(--pds-space-4); text-align: left; }
.pds-champ__libelle {
  display: block;
  margin: 0 0 var(--pds-space-1);
  font-family: var(--pds-font-family-body);
  font-size: var(--pds-font-size-15);
  font-weight: var(--pds-font-weight-semibold);
  line-height: var(--pds-font-line-height-base);
  color: var(--pds-semantic-text-secondary);
}
.pds-champ__controle {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: var(--pds-control-height-md);
  padding: 10px 14px;
  border: var(--pds-control-border-width) solid var(--pds-semantic-border-input);
  border-radius: var(--pds-radius-sm);
  background: var(--pds-semantic-surface);
  color: var(--pds-semantic-text);
  font-family: var(--pds-font-family-body);
  font-size: var(--pds-font-size-base);
  font-weight: var(--pds-font-weight-regular);
  line-height: var(--pds-font-line-height-base);
  transition: border-color var(--pds-duration-fast) var(--pds-easing-out),
    box-shadow var(--pds-duration-fast) var(--pds-easing-out);
}
textarea.pds-champ__controle { min-height: 6.5em; resize: vertical; }
.pds-champ__controle { text-overflow: ellipsis; }
.pds-champ__controle::placeholder { color: var(--pds-semantic-text-muted); opacity: 1; }
.pds-champ__controle:hover { border-color: var(--pds-semantic-text-secondary); }
.pds-champ__controle:focus,
.pds-champ__controle:focus-visible {
  outline: var(--pds-control-focus-width) solid var(--pds-semantic-focus);
  outline-offset: var(--pds-control-focus-offset);
  border-color: var(--pds-semantic-primary);
}
.pds-champ__controle:disabled {
  background: var(--pds-semantic-disabled-bg);
  border-color: var(--pds-semantic-disabled-border);
  color: var(--pds-semantic-disabled-text);
  cursor: not-allowed;
}
.pds-champ__aide {
  margin: var(--pds-space-1) 0 0;
  font-size: var(--pds-font-size-sm);
  line-height: var(--pds-font-line-height-compact);
  color: var(--pds-semantic-text-secondary);
}

/* Erreur : bordure, icone error et message prefixe « Erreur : », lie par aria-describedby */
.pds-champ--erreur .pds-champ__controle { border-width: 2px; border-color: var(--pds-semantic-danger-mark); }
.pds-champ__erreur {
  display: flex;
  align-items: flex-start;
  gap: var(--pds-space-1);
  margin: var(--pds-space-1) 0 0;
  font-size: var(--pds-font-size-sm);
  font-weight: var(--pds-font-weight-medium);
  line-height: var(--pds-font-line-height-compact);
  color: var(--pds-semantic-danger-text);
}
.pds-champ__erreur .material-icons { flex: 0 0 auto; width: 1em; overflow: hidden; font-size: var(--pds-control-icon-sm); line-height: 1; }

/* Recherche : loupe a gauche, croix de 44 px a droite */
.pds-champ--recherche { position: relative; }
.pds-champ--recherche .pds-champ__controle { padding-left: 44px; padding-right: 44px; }
.pds-champ__loupe {
  position: absolute;
  left: var(--pds-space-3);
  top: 0;
  display: flex;
  align-items: center;
  height: var(--pds-control-height-md);
  pointer-events: none;
  color: var(--pds-semantic-text-muted);
}
.pds-champ__loupe .material-icons { width: 1em; overflow: hidden; font-size: var(--pds-control-icon-md); line-height: 1; }
.pds-champ__effacer {
  position: absolute;
  right: 0;
  top: 0;
  width: var(--pds-control-target);
  height: var(--pds-control-target);
  border: 0;
  background: transparent;
  color: var(--pds-semantic-text-muted);
  cursor: pointer;
}

/* Case a cocher et radio : ligne cliquable de 44 px, case de 24 px */
.pds-champ--case { display: flex; align-items: center; gap: var(--pds-space-3); min-height: var(--pds-control-target); margin: 0; cursor: pointer; }
.pds-champ--case input[type="checkbox"],
.pds-champ--case input[type="radio"] { flex: 0 0 auto; width: 24px; height: 24px; margin: 0; accent-color: var(--pds-semantic-primary); }
.pds-champ--case .pds-champ__libelle { margin: 0; color: var(--pds-semantic-text); font-weight: var(--pds-font-weight-regular); cursor: pointer; }

/* Segmente (niveau Debutant / Confirme) : boutons de 44 px, aria-pressed. niveau.css y ajoute sa place dans la liste des ateliers. */
.pds-niveau { display: inline-flex; border: var(--pds-control-border-width) solid var(--pds-semantic-primary); border-radius: var(--pds-radius-sm); overflow: hidden; }
.pds-niveau__option {
  min-height: calc(var(--pds-control-height-md) - 3px);
  padding: 0 var(--pds-space-4);
  border: 0;
  background: var(--pds-semantic-surface);
  color: var(--pds-semantic-primary);
  font-family: var(--pds-font-family-body);
  font-size: var(--pds-font-size-base);
  font-weight: var(--pds-font-weight-medium);
  cursor: pointer;
}
.pds-niveau__option[aria-pressed="true"] { background: var(--pds-semantic-primary); color: var(--pds-semantic-text-inverse); }
.pds-niveau__option:focus-visible { outline: var(--pds-control-focus-width) solid var(--pds-semantic-focus); outline-offset: calc(var(--pds-control-focus-offset) * -1); }

@media (prefers-reduced-motion: reduce) {
  .pds-champ__controle { transition: none; }
}

/* ===== chiffres.css ===== */
/* Chiffres cles pds-chiffres (5.7) : distance, denivele et pente, duree, ateliers. 2 x 2 au telephone,
   une rangee de 4 tuiles de 160 px en bureau. Tuile Ateliers : lien d'ancre vers la liste. Le detail de la
   duree (marche, course) est sous la grille au telephone, dans la fiche technique en bureau et au survol (title). */
.pds-chiffres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pds-space-2);
  margin: 0;
}
.pds-chiffres__tuile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icone etiquette" "valeur valeur";
  align-content: center;
  align-items: center;
  column-gap: var(--pds-space-1);
  row-gap: var(--pds-space-half);
  min-height: 72px;
  padding: var(--pds-space-2) var(--pds-space-3);
  border-radius: var(--pds-radius-sm);
  background: var(--pds-semantic-primary-soft);
  color: var(--pds-semantic-text);
  text-decoration: none;
}
.pds-chiffres__icone {
  grid-area: icone;
  font-size: var(--pds-control-icon-sm);
  color: var(--pds-semantic-primary);
}
.pds-chiffres__etiquette {
  grid-area: etiquette;
  font-size: var(--pds-font-size-xs);
  font-weight: var(--pds-font-weight-medium);
  line-height: var(--pds-font-line-height-compact);
  color: var(--pds-semantic-text-secondary);
}
.pds-chiffres__valeur {
  grid-area: valeur;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--pds-space-2);
  font-family: var(--pds-font-family-head);
  font-size: var(--pds-font-size-2xl);
  font-weight: var(--pds-font-weight-semibold);
  line-height: var(--pds-font-line-height-tight);
  font-variant-numeric: tabular-nums;
  color: var(--pds-semantic-heading);
}
.pds-chiffres__pente {
  font-family: var(--pds-font-family-body);
  font-size: var(--pds-font-size-xs);
  font-weight: var(--pds-font-weight-medium);
  line-height: var(--pds-font-line-height-compact);
  color: var(--pds-semantic-text-secondary);
}
.pds-chiffres__valeur--vide { color: var(--pds-semantic-text-secondary); }
/* Detail de la duree (marche, course) sous la grille, au telephone seulement : en bureau la fiche technique le porte */
.pds-chiffres__detail {
  grid-column: 1 / -1;
  margin: var(--pds-space-1) 0 0;
  font-size: var(--pds-font-size-sm);
  line-height: var(--pds-font-line-height-compact);
  color: var(--pds-semantic-text-secondary);
}
a.pds-chiffres__tuile--lien { cursor: pointer; transition: background-color var(--pds-duration-fast) var(--pds-easing-out); }
a.pds-chiffres__tuile--lien:hover { background: var(--pds-semantic-primary-soft-strong); color: var(--pds-semantic-text); }
a.pds-chiffres__tuile--lien:focus-visible {
  outline: var(--pds-control-focus-width) solid var(--pds-semantic-focus);
  outline-offset: var(--pds-control-focus-offset);
}
@media (min-width: 992px) {
  .pds-chiffres { grid-template-columns: repeat(4, 160px); }
  .pds-chiffres__detail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  a.pds-chiffres__tuile--lien { transition: none; }
}

/* ===== encart.css ===== */
/* Encart pds-encart (5.13) : message dans la page. Fond, texte, bordure gauche et icone
   viennent des jetons de l'etat. Un seul encart par zone, le plus grave l'emporte. */
.pds-encart {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: var(--pds-space-3);
  padding: var(--pds-space-3) var(--pds-space-4);
  border-left: 4px solid var(--pds-semantic-info-mark);
  border-radius: var(--pds-radius-md);
  background: var(--pds-semantic-info-bg);
  color: var(--pds-semantic-info-text);
  font-family: var(--pds-font-family-body);
  font-size: var(--pds-font-size-base);
  line-height: var(--pds-font-line-height-base);
  text-align: left;
}
.pds-encart__icone {
  flex: 0 0 auto;
  width: 1em;
  overflow: hidden;
  font-size: var(--pds-control-icon-md);
  line-height: 1;
  color: var(--pds-semantic-info-mark);
}
.pds-encart__corps { flex: 1 1 auto; min-width: 0; }
.pds-encart__titre {
  margin: 0;
  font-family: var(--pds-font-family-body);
  font-size: var(--pds-font-size-base);
  font-weight: var(--pds-font-weight-semibold);
  line-height: var(--pds-font-line-height-base);
  color: inherit;
}
.pds-encart__texte { margin: 0; color: inherit; }
.pds-encart__titre + .pds-encart__texte { margin-top: var(--pds-space-1); }
.pds-encart__action { margin-top: var(--pds-space-2); }
.pds-encart a { color: inherit; text-decoration: underline; }

.pds-encart--info { background: var(--pds-semantic-info-bg); border-left-color: var(--pds-semantic-info-mark); color: var(--pds-semantic-info-text); }
.pds-encart--info .pds-encart__icone { color: var(--pds-semantic-info-mark); }

.pds-encart--succes { background: var(--pds-semantic-success-bg); border-left-color: var(--pds-semantic-success-mark); color: var(--pds-semantic-success-text); }
.pds-encart--succes .pds-encart__icone { color: var(--pds-semantic-success-mark); }

.pds-encart--alerte { background: var(--pds-semantic-warning-bg); border-left-color: var(--pds-semantic-warning-mark); color: var(--pds-semantic-warning-text); }
.pds-encart--alerte .pds-encart__icone { color: var(--pds-semantic-warning-mark); }

.pds-encart--danger { background: var(--pds-semantic-danger-bg); border-left-color: var(--pds-semantic-danger-mark); color: var(--pds-semantic-danger-text); }
.pds-encart--danger .pds-encart__icone { color: var(--pds-semantic-danger-mark); }

/* Variante accent : la ligne parking sous l'itineraire */
.pds-encart--accent { background: var(--pds-semantic-accent-soft); border-left-color: var(--pds-semantic-accent-mark); color: var(--pds-semantic-accent); }
.pds-encart--accent .pds-encart__icone { color: var(--pds-semantic-accent); }

/* ===== entete.css ===== */
/* En-tete du site pds-entete (5.1 et amendement 0). Dans le flux (ni fixe ni sticky) : 56 px au
   telephone, 64 px en bureau. Telephone : pictogramme et nom, bouton Menu, compte. Bureau : liens de
   navigation et langue dans la barre. Les identifiants du bloc compte (#login-btn, #notif-bell,
   #user-dropdown, ...) sont lus par head.php, notifications.js, pseudo-prompt.js et dashboard.php. */
.pds-entete {
  position: relative;
  z-index: 1030;
  box-sizing: border-box;
  height: var(--pds-layout-header-phone);
  border-bottom: 1px solid var(--pds-semantic-border);
  background: var(--pds-semantic-surface);
  font-family: var(--pds-font-family-body);
  text-align: left;
}
.pds-entete__interieur {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--pds-space-2);
  height: 100%;
  max-width: calc(var(--pds-layout-container) + 2 * var(--pds-layout-gutter-desktop));
  margin: 0 auto;
  padding: 0 var(--pds-layout-gutter-phone);
}

/* --- Marque : pictogramme et nom --- */
.pds-entete__marque {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  gap: var(--pds-space-2);
  min-width: 0;
  min-height: var(--pds-control-target);
  border-radius: var(--pds-radius-sm);
  color: var(--pds-semantic-heading);
  text-decoration: none;
}
.pds-entete__marque:hover { color: var(--pds-semantic-heading); text-decoration: none; }
.pds-entete__marque:focus-visible {
  outline: var(--pds-control-focus-width) solid var(--pds-semantic-focus);
  outline-offset: var(--pds-control-focus-offset);
}
.pds-entete__picto { display: block; flex: 0 0 auto; width: 36px; height: 36px; }
.pds-entete__nom {
  max-width: 5.5em;
  font-family: var(--pds-font-family-head);
  font-size: var(--pds-font-size-base);
  font-weight: var(--pds-font-weight-semibold);
  line-height: var(--pds-font-line-height-tight);
  letter-spacing: -0.01em;
  color: var(--pds-semantic-heading);
}
@media (min-width: 480px) {
  .pds-entete__nom { max-width: none; font-size: var(--pds-font-size-lg); white-space: nowrap; }
}
@media (max-width: 359px) {
  .pds-entete__nom { display: none; }
}

/* --- Bouton Menu (telephone) --- */
.pds-entete__menu { margin-left: auto; flex: 0 0 auto; }

/* --- Panneau : menu deroulant au telephone, barre de navigation en bureau --- */
.pds-entete__panneau {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  box-sizing: border-box;
  padding: var(--pds-space-2) var(--pds-layout-gutter-phone) var(--pds-space-4);
  border-bottom: 1px solid var(--pds-semantic-border);
  background: var(--pds-semantic-surface);
  box-shadow: var(--pds-shadow-lg);
}
.pds-entete__panneau.est-ouvert { display: block; }
.pds-entete__liens { margin: 0; padding: 0; list-style: none; }
.pds-entete__lien {
  display: flex;
  align-items: center;
  gap: var(--pds-space-3);
  min-height: var(--pds-control-target);
  padding: 0 var(--pds-space-3);
  border-radius: var(--pds-radius-sm);
  color: var(--pds-semantic-text);
  font-size: var(--pds-font-size-base);
  font-weight: var(--pds-font-weight-medium);
  line-height: var(--pds-font-line-height-base);
  text-decoration: none;
}
.pds-entete__lien .material-icons {
  width: 1em;
  overflow: hidden;
  font-size: var(--pds-control-icon-md);
  line-height: 1;
  color: var(--pds-semantic-primary);
}
.pds-entete__lien:hover { background: var(--pds-semantic-primary-soft); color: var(--pds-semantic-text); text-decoration: none; }
.pds-entete__lien:focus-visible {
  outline: var(--pds-control-focus-width) solid var(--pds-semantic-focus);
  outline-offset: var(--pds-control-focus-offset);
}
.pds-entete__lien[aria-current="page"] { background: var(--pds-semantic-primary-soft); font-weight: var(--pds-font-weight-semibold); }
.pds-entete__panneau .pds-langue {
  margin-top: var(--pds-space-2);
  padding-top: var(--pds-space-3);
  border-top: 1px solid var(--pds-semantic-border);
}

/* --- Bloc compte : connexion, cloche, menu du compte --- */
.pds-entete__compte {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--pds-space-2);
}
.pds-entete__compte #notif-bell,
.pds-entete__compte #user-dropdown { position: relative; }
.pds-entete__cloche { position: relative; }
.pds-entete__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--pds-space-1);
  border-radius: var(--pds-radius-pill);
  background: var(--pds-semantic-danger-mark);
  color: var(--pds-semantic-text-inverse);
  font-size: var(--pds-font-size-11);
  font-weight: var(--pds-font-weight-semibold);
  line-height: 20px;
  text-align: center;
}
.pds-entete__pseudo {
  /* Au telephone le pseudo reste lisible par les lecteurs d'ecran, sans occuper de place */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.pds-entete__compte .dropdown-menu { min-width: 240px; margin-top: var(--pds-space-1); max-width: calc(100vw - 2 * var(--pds-layout-gutter-phone)); }
#notif-menu { min-width: 280px; max-height: 400px; overflow-y: auto; }
.pds-entete__chevron { display: none; }
/* Bouton du compte : l'icone seule au telephone (le pseudo reste dans le nom accessible) */
.pds-entete__utilisateur { width: var(--pds-control-target); min-width: var(--pds-control-target); padding: 0; }

/* --- Bureau (1 200 px et plus, la barre complete ne tient pas en dessous) : 64 px, liens dans la barre, langue a droite --- */
@media (min-width: 1200px) {
  .pds-entete { height: var(--pds-layout-header-desktop); }
  .pds-entete__interieur { gap: var(--pds-space-4); padding: 0 var(--pds-layout-gutter-desktop); }
  .pds-entete__menu { display: none; }
  .pds-entete__panneau,
  .pds-entete__panneau.est-ouvert {
    display: contents;
  }
  .pds-entete__nav { flex: 0 1 auto; margin-left: var(--pds-space-2); }
  .pds-entete__liens { display: flex; align-items: center; gap: var(--pds-space-1); }
  .pds-entete__lien {
    position: relative;
    white-space: nowrap;
    padding: 0 var(--pds-space-3);
    font-size: var(--pds-font-size-15);
  }
  .pds-entete__lien .material-icons { display: none; }
  .pds-entete__lien[aria-current="page"] { background: transparent; font-weight: var(--pds-font-weight-medium); }
  .pds-entete__lien[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: var(--pds-space-3);
    right: var(--pds-space-3);
    bottom: var(--pds-space-2);
    height: 2px;
    background: var(--pds-semantic-primary);
  }
  .pds-entete__panneau .pds-langue { margin: 0 0 0 auto; padding: 0; border-top: 0; }
  .pds-entete__utilisateur { width: auto; padding: 0 var(--pds-space-3); }
  .pds-entete__pseudo {
    position: static;
    width: auto;
    height: auto;
    max-width: 160px;
    overflow: hidden;
    clip: auto;
    text-overflow: ellipsis;
  }
  .pds-entete__chevron { display: inline-block; }
}

/* ===== erreur.css ===== */
/* Page d'erreur pds-erreur (5.20, PDS-70) : illustration, titre, phrase, recherche, trois liens et,
   sur la 404, trois parcours recemment verifies. Aucune publicite, noindex. */
.pds-erreur {
  box-sizing: border-box;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--pds-space-6) 0 var(--pds-space-7);
  text-align: center;
  font-family: var(--pds-font-family-body);
  color: var(--pds-semantic-text);
}
/* Page d'erreur : la feuille prend la hauteur restante, le pied repose juste dessous (pas de bande de toile) */
#body_container:has(> .pds-erreur) { flex: 1 0 auto; }
.pds-erreur__illustration {
  display: block;
  width: 200px;
  height: auto;
  margin: 0 auto var(--pds-space-4);
  aspect-ratio: 3 / 2;
}
.pds-erreur__illustration svg { display: block; width: 100%; height: auto; }
.pds-erreur__titre {
  margin: 0 0 var(--pds-space-3);
  font-family: var(--pds-font-family-head);
  font-size: var(--pds-font-size-3xl);
  font-weight: var(--pds-font-weight-semibold);
  line-height: var(--pds-font-line-height-tight);
  color: var(--pds-semantic-heading);
}
.pds-erreur__phrase {
  margin: 0 auto var(--pds-space-6);
  max-width: var(--pds-font-measure-reading);
  font-size: var(--pds-font-size-base);
  line-height: var(--pds-font-line-height-relaxed);
  color: var(--pds-semantic-text-secondary);
}
.pds-erreur__recherche {
  display: flex;
  align-items: stretch;
  gap: var(--pds-space-2);
  max-width: 480px;
  margin: 0 auto var(--pds-space-5);
}
.pds-erreur__recherche .pds-champ { flex: 1 1 auto; margin: 0; }
.pds-erreur__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pds-space-2);
  margin: 0 0 var(--pds-space-6);
}
.pds-erreur__recents { margin: var(--pds-space-7) 0 0; text-align: left; }
.pds-erreur__recents-titre {
  margin: 0 0 var(--pds-space-3);
  font-family: var(--pds-font-family-head);
  font-size: var(--pds-font-size-xl);
  font-weight: var(--pds-font-weight-semibold);
  line-height: var(--pds-font-line-height-snug);
  color: var(--pds-semantic-heading);
}
.pds-erreur__liste { display: grid; gap: var(--pds-space-2); margin: 0; padding: 0; list-style: none; }
.pds-erreur__carte {
  display: flex;
  align-items: center;
  gap: var(--pds-space-3);
  min-height: 56px;
  padding: var(--pds-space-3);
  border: 1px solid var(--pds-semantic-border);
  border-radius: var(--pds-radius-md);
  background: var(--pds-semantic-surface);
  box-shadow: var(--pds-shadow-sm);
  color: var(--pds-semantic-text);
  text-decoration: none;
  transition: box-shadow var(--pds-duration-fast) var(--pds-easing-out), transform var(--pds-duration-fast) var(--pds-easing-out);
}
.pds-erreur__carte:hover {
  box-shadow: var(--pds-shadow-md);
  color: var(--pds-semantic-text);
  text-decoration: none;
  transform: translateY(-2px);
}
.pds-erreur__carte:focus-visible {
  outline: var(--pds-control-focus-width) solid var(--pds-semantic-focus);
  outline-offset: var(--pds-control-focus-offset);
}
.pds-erreur__carte-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: var(--pds-radius-sm);
  background: var(--pds-semantic-primary-soft);
  color: var(--pds-semantic-primary);
}
.pds-erreur__carte-icone .material-icons { width: 1em; overflow: hidden; font-size: 28px; line-height: 1; }
.pds-erreur__carte-corps { min-width: 0; flex: 1 1 auto; }
.pds-erreur__carte-nom {
  display: block;
  font-family: var(--pds-font-family-head);
  font-size: var(--pds-font-size-17);
  font-weight: var(--pds-font-weight-semibold);
  line-height: var(--pds-font-line-height-snug);
}
.pds-erreur__carte-lieu {
  display: block;
  font-size: var(--pds-font-size-sm);
  line-height: var(--pds-font-line-height-compact);
  color: var(--pds-semantic-text-secondary);
}
@media (min-width: 992px) {
  .pds-erreur { padding-top: var(--pds-space-8); }
  .pds-erreur__illustration { width: 240px; }
  .pds-erreur__titre { font-size: var(--pds-font-size-4xl); }
  .pds-erreur__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pds-erreur__carte { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .pds-erreur__carte { transition: none; }
  .pds-erreur__carte:hover { transform: none; }
}

/* ===== evitement.css ===== */
/* Lien d'evitement « Aller au contenu » (5.1) : premier element focalisable, visible au focus */
.pds-evitement {
  position: absolute;
  top: var(--pds-space-2);
  left: var(--pds-space-2);
  z-index: 1060;
  display: inline-flex;
  align-items: center;
  min-height: var(--pds-control-target);
  padding: 0 var(--pds-space-4);
  border-radius: var(--pds-radius-sm);
  background: var(--pds-semantic-primary);
  color: var(--pds-semantic-text-inverse);
  font-family: var(--pds-font-family-body);
  font-size: var(--pds-font-size-base);
  font-weight: var(--pds-font-weight-medium);
  text-decoration: none;
  transform: translateY(-200%);
}
.pds-evitement:focus,
.pds-evitement:focus-visible {
  transform: none;
  color: var(--pds-semantic-text-inverse);
  text-decoration: none;
  outline: var(--pds-control-focus-width) solid var(--pds-semantic-focus-on-dark);
  outline-offset: var(--pds-control-focus-offset);
}

/* ===== faq.css ===== */
/* FAQ pds-faq (5.19, PDS-68) : section de questions repliees. Le contenu est dans le HTML initial
   (details natifs), un FAQPage JSON-LD part de la meme liste. Repris de src/css/faq.css, redessine
   aux jetons. Classes : section.pds-faq, __title, __item, __q, __a. Premiere question ouverte. */
section.pds-faq {
  max-width: 800px;
  margin: var(--pds-space-7) auto var(--pds-space-6);
  padding: 0 var(--pds-space-4);
  text-align: left;
}
section.pds-faq .pds-faq__title {
  margin: 0 0 var(--pds-space-4);
  font-family: var(--pds-font-family-head);
  font-size: var(--pds-font-size-2xl);
  font-weight: var(--pds-font-weight-semibold);
  line-height: var(--pds-font-line-height-tight);
  color: var(--pds-semantic-heading);
}
section.pds-faq .pds-faq__item {
  margin-bottom: var(--pds-space-2);
  border: 1px solid var(--pds-semantic-border);
  border-radius: var(--pds-radius-md);
  background: var(--pds-semantic-surface);
}
section.pds-faq .pds-faq__item[open] { border-color: var(--pds-semantic-border-strong); }
section.pds-faq .pds-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pds-space-3);
  min-height: 56px;
  padding: var(--pds-space-2) var(--pds-space-4);
  border-radius: var(--pds-radius-md);
  font-family: var(--pds-font-family-head);
  font-size: var(--pds-font-size-17);
  font-weight: var(--pds-font-weight-semibold);
  line-height: var(--pds-font-line-height-snug);
  color: var(--pds-semantic-text);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--pds-duration-fast) var(--pds-easing-out);
}
section.pds-faq .pds-faq__q::-webkit-details-marker { display: none; }
/* Chevron : tourne a l'ouverture */
section.pds-faq .pds-faq__q::after {
  content: "expand_more";
  flex: 0 0 auto;
  width: 24px;
  overflow: hidden;
  font-family: "Material Icons";
  font-size: 24px;
  font-weight: var(--pds-font-weight-regular);
  line-height: 1;
  color: var(--pds-semantic-primary);
  transition: transform var(--pds-duration-slow) var(--pds-easing-out);
}
section.pds-faq .pds-faq__item[open] > .pds-faq__q::after { transform: rotate(180deg); }
section.pds-faq .pds-faq__q:hover { background: var(--pds-semantic-surface-alt); }
section.pds-faq .pds-faq__q:focus-visible {
  outline: var(--pds-control-focus-width) solid var(--pds-semantic-focus);
  outline-offset: var(--pds-control-focus-offset);
}
section.pds-faq .pds-faq__a {
  max-width: var(--pds-font-measure-reading);
  padding: 0 var(--pds-space-4) var(--pds-space-4);
  font-family: var(--pds-font-family-body);
  font-size: var(--pds-font-size-base);
  line-height: var(--pds-font-line-height-relaxed);
  color: var(--pds-semantic-text-secondary);
}
section.pds-faq .pds-faq__a p { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  section.pds-faq .pds-faq__q,
  section.pds-faq .pds-faq__q::after { transition: none; }
}

/* ===== fiche.css ===== */
/* Fiche d'un parcours (6.1 et 6.2) : cadre, en-tete, ordre des blocs, colonne laterale, encarts propres
   a la fiche. Boutons, encarts, puces, fil d'Ariane, champs, FAQ et modales viennent de leurs feuilles.
   Jetons seulement. Au telephone la fiche est une seule colonne (flex + order), en bureau deux colonnes
   (744 + 32 + 340 px), colonne laterale NON sticky (aucune annonce ne doit se loger dans un bloc flottant). */

.pds-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pds-fiche {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--pds-layout-container);
  margin: 0 auto;
  text-align: left;
  font-family: var(--pds-font-family-body);
  font-size: var(--pds-font-size-base);
  line-height: var(--pds-font-line-height-relaxed);
  color: var(--pds-semantic-text);
}
.pds-fiche *,
.pds-fiche *::before,
.pds-fiche *::after { box-sizing: border-box; }
.pds-fiche img { max-width: 100%; }
.pds-fiche .material-icons { width: 1em; overflow: hidden; line-height: 1; flex: 0 0 auto; }
/* Liens : poids nul pour que chaque composant (bouton, carte, tuile) garde sa couleur */
:where(.pds-fiche) a:where(:not(.pds-bouton)) { color: var(--pds-semantic-link); }
:where(.pds-fiche) a:where(:not(.pds-bouton)):hover { color: var(--pds-semantic-link-hover); }
.pds-fiche a:focus-visible,
.pds-fiche summary:focus-visible,
.pds-fiche button:focus-visible {
  outline: var(--pds-control-focus-width) solid var(--pds-semantic-focus);
  outline-offset: var(--pds-control-focus-offset);
}
.pds-fiche .pds-bouton--accent:hover,
.pds-fiche .pds-bouton--primaire:hover { text-decoration: none; }
.pds-fiche .pds-bouton { white-space: normal; overflow-wrap: anywhere; }

/* Defilement : la page est a 100 px d'une annonce d'ancrage eventuelle (bas), jamais de bloc fixe en bas */
html { scroll-padding-bottom: 100px; }
/* Accueil (coquille carte et liste, #pds-explore) : l'explorateur occupe tout l'ecran, sa carte touche le bas
   de la fenetre. Avec ces 100 px, le focus que Leaflet donne a la carte au premier toucher (bouton de zoom,
   pincement) faisait defiler la page de 100 px et sortait l'en-tete et la recherche de l'ecran
   (passage utilisateur reel 3.0 n°1, friction 9, scrollY = 100). */
html:has(#pds-explore) { scroll-padding-bottom: 0; }

/* Aperçu d'une fiche non publiée : bandeau existant (style.css) */
.pds-fiche > .pds-preview-banner { margin: 0 0 var(--pds-space-3); }

/* --- Titres --- */
.pds-fiche__h1 {
  margin: 0;
  font-family: var(--pds-font-family-head);
  font-size: var(--pds-font-size-3xl);
  font-weight: var(--pds-font-weight-semibold);
  line-height: var(--pds-font-line-height-tight);
  letter-spacing: 0;
  color: var(--pds-semantic-heading);
  text-align: left;
}
.pds-fiche__h2 {
  margin: 0 0 var(--pds-space-2);
  font-family: var(--pds-font-family-head);
  font-size: var(--pds-font-size-xl);
  font-weight: var(--pds-font-weight-semibold);
  line-height: var(--pds-font-line-height-snug);
  letter-spacing: 0;
  color: var(--pds-semantic-heading);
  text-align: left;
}
.pds-fiche__h3 {
  margin: 0 0 var(--pds-space-2);
  font-family: var(--pds-font-family-head);
  font-size: var(--pds-font-size-lg);
  font-weight: var(--pds-font-weight-semibold);
  line-height: var(--pds-font-line-height-snug);
  letter-spacing: 0;
  color: var(--pds-semantic-heading);
}

/* --- En-tete : titre, lieu, statut, chiffres, actions --- */
.pds-fiche .pds-fil { margin: 0; min-height: 40px; display: flex; align-items: center; }
.pds-fiche .pds-fil__liste { width: 100%; padding: 0; }
.pds-fiche__entete {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pds-space-3);
  margin: 0 0 var(--pds-space-4);
}
.pds-fiche__titre { min-width: 0; }
.pds-fiche__lieu {
  display: flex;
  align-items: flex-start;
  gap: var(--pds-space-1);
  margin: var(--pds-space-2) 0 0;
  font-size: var(--pds-font-size-base);
  line-height: var(--pds-font-line-height-base);
  color: var(--pds-semantic-text-secondary);
}
.pds-fiche__lieu .material-icons { margin-top: 2px; font-size: var(--pds-control-icon-sm); color: var(--pds-semantic-primary); }
.pds-fiche__lieu a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--pds-semantic-text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pds-fiche__lieu a:hover { color: var(--pds-semantic-heading); }
.pds-fiche__statut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pds-space-2) var(--pds-space-3);
  margin: var(--pds-space-2) 0 0;
}
.pds-fiche__verifie {
  display: inline-flex;
  align-items: center;
  gap: var(--pds-space-1);
  font-size: var(--pds-font-size-sm);
  line-height: var(--pds-font-line-height-compact);
  color: var(--pds-semantic-primary);
}
.pds-fiche__verifie .material-icons { font-size: 16px; }
.pds-fiche__entete .pds-encart { margin: 0; }
.pds-fiche__entete .pds-encart__texte { margin: 0; }
/* Lien Visorando (PDS-87, 3.0.2, composant visorando.css) : dans l'en-tete, sous les actions au telephone. Il n'est
   jamais dans la grille du corps, dont les deux colonnes sont couplees ligne a ligne (toute hauteur ajoutee a la
   colonne laterale y laissait un blanc, revue de la 3.0.2). */

/* --- Corps : une colonne, dans l'ordre du DOM (tableau 6.1) ---
   Les blocs sont frères dans le HTML, dans l'ordre de lecture du téléphone : lecture et tabulation suivent
   l'ordre visuel. En bureau la grille les range en deux colonnes (grid-row et grid-column), sans `order`. */
.pds-fiche__corps { display: flex; flex-direction: column; }
.pds-fiche__bloc { min-width: 0; margin: 0 0 var(--pds-space-4); }
.pds-fiche__bloc--technique { display: none; }

/* Repli : pas de marge propre, sa bordure basse suffit */
.pds-fiche__bloc.pds-repli { margin-bottom: var(--pds-space-2); }

/* Parking : encart sous l'itineraire */
.pds-fiche__bloc--parking.pds-encart { margin-bottom: var(--pds-space-4); }
.pds-fiche__bloc--parking .pds-encart__titre { color: inherit; }
.pds-fiche__bloc--parking .pds-encart__texte a { color: inherit; font-weight: var(--pds-font-weight-semibold); display: inline-flex; align-items: center; min-height: var(--pds-control-target); }

.pds-fiche__suite { margin: var(--pds-space-1) 0 0; }

/* --- Description --- */
.pds-description { max-width: var(--pds-font-measure-reading); }
.pds-description__texte p { margin: 0 0 var(--pds-space-3); }
.pds-description__texte a { text-decoration: underline; text-underline-offset: 2px; }
.pds-description__texte--plie {
  max-height: calc(var(--pds-font-line-height-relaxed) * 6em);
  overflow: hidden;
}
.pds-description__suite { margin-top: var(--pds-space-1); padding-left: var(--pds-space-2); padding-right: var(--pds-space-2); }
.pds-description__auto { color: var(--pds-semantic-text); }
.fiche_embed { margin-top: var(--pds-space-3); }
.fiche_embed iframe { max-width: 100%; }

/* --- Puces d'infos pratiques --- */
.pds-puces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pds-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Fiche technique (bureau) --- */
.pds-technique {
  padding: var(--pds-space-4);
  border: 1px solid var(--pds-semantic-border);
  border-radius: var(--pds-radius-md);
  background: var(--pds-semantic-surface);
}
.pds-technique__liste { margin: 0; }
.pds-technique__liste > div {
  display: flex;
  justify-content: space-between;
  gap: var(--pds-space-3);
  padding: var(--pds-space-2) 0;
  border-bottom: 1px solid var(--pds-semantic-border);
}
.pds-technique__liste > div:last-child { border-bottom: 0; }
.pds-technique dt {
  font-size: var(--pds-font-size-md);
  font-weight: var(--pds-font-weight-regular);
  color: var(--pds-semantic-text-secondary);
}
.pds-technique dd a { display: inline-flex; align-items: center; min-height: var(--pds-control-target); }
.pds-technique dd { margin: 0; font-size: var(--pds-font-size-md); font-weight: var(--pds-font-weight-semibold); text-align: right; }
.pds-technique__detail {
  display: block;
  margin-top: var(--pds-space-half);
  font-size: var(--pds-font-size-xs);
  font-weight: var(--pds-font-weight-regular);
  line-height: var(--pds-font-line-height-compact);
  color: var(--pds-semantic-text-secondary);
}

/* --- Contribuer --- */
.pds-contribuer__texte { margin: 0 0 var(--pds-space-3); color: var(--pds-semantic-text-secondary); max-width: var(--pds-font-measure-reading); }
.pds-contribuer__boutons { display: flex; flex-direction: column; gap: var(--pds-space-2); }
.pds-contribuer__boutons > div { display: block; }
.pds-contribuer__aide { display: block; margin-top: var(--pds-space-1); font-size: var(--pds-font-size-sm); color: var(--pds-semantic-text-secondary); }
.pds-bouton.pds-bouton--actif { background: var(--pds-semantic-primary-soft-strong); color: var(--pds-semantic-heading); }

/* --- Pour votre site --- */
.pds-embed-snippet__code { margin: 0 0 var(--pds-space-2); font-size: var(--pds-font-size-xs); }
.pds-repli__texte { margin: 0 0 var(--pds-space-2); font-size: var(--pds-font-size-md); color: var(--pds-semantic-text-secondary); }
.pds-site__imprimer { margin-top: var(--pds-space-1); }

/* --- Auteur et contributeurs --- */
.pds-auteur { margin: 0; font-size: var(--pds-font-size-sm); line-height: var(--pds-font-line-height-base); color: var(--pds-semantic-text-secondary); }
.pds-auteur__ligne { display: block; }
.pds-auteur a { display: inline-flex; align-items: center; min-height: 24px; color: var(--pds-semantic-text-secondary); text-decoration: underline; text-underline-offset: 2px; }

/* --- FAQ dans la fiche : memes marges que les autres blocs, titre au rang des h2 --- */
.pds-fiche .pds-fiche__bloc--faq .container { width: 100%; max-width: none; padding: 0; margin: 0; }
.pds-fiche section.pds-faq { max-width: none; margin: 0; padding: 0; }
.pds-fiche section.pds-faq .pds-faq__title { font-size: var(--pds-font-size-xl); margin-bottom: var(--pds-space-3); }
.pds-fiche section.pds-faq .pds-faq__a { padding-top: 0; }

/* --- Bureau : feuille de 1 180 px, contenu 744 px + 32 + colonne de 340 px --- */
@media (min-width: 992px) {
  /* Feuille de 1 180 px moins deux gouttieres de 32 : 744 + 32 + 340 = 1 116 */
  .pds-fiche { max-width: calc(var(--pds-layout-container) - 2 * var(--pds-layout-gutter-desktop)); }
  .pds-fiche__h1 { font-size: var(--pds-font-size-4xl); }
  .pds-fiche__h2 { font-size: var(--pds-font-size-2xl); }
  .pds-fiche__entete {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--pds-space-7);
    row-gap: var(--pds-space-4);
    align-items: start;
    margin-bottom: var(--pds-space-5);
  }
  .pds-fiche__titre { grid-column: 1; grid-row: 1; }
  .pds-fiche__entete > .pds-actions { grid-column: 2; grid-row: 1; justify-self: end; }
  .pds-fiche__entete > .pds-chiffres { grid-column: 1 / -1; grid-row: 2; }
  .pds-fiche__entete > .pds-encart { grid-column: 1 / -1; }
  /* Lien Visorando : sa propre ligne sous les chiffres (et sous l'alerte d'etat, placement automatique dans l'ordre
     du DOM) tant qu'il ne tient pas a leur droite (664 px de tuiles, 32 d'ecart, 340 de colonne laterale :
     1 036 px d'en-tete, atteints vers 1 090 px de fenetre) */
  .pds-fiche__entete > .pds-visorando { grid-column: 1 / -1; }

  .pds-fiche__corps {
    display: grid;
    grid-template-columns: minmax(0, var(--pds-layout-content)) minmax(0, var(--pds-layout-aside));
    column-gap: var(--pds-space-7);
    justify-content: space-between;
    align-items: start;
  }
  .pds-fiche__bloc { margin-bottom: var(--pds-space-5); }
  .pds-fiche__bloc.pds-repli { margin-bottom: var(--pds-space-5); }

  /* Colonne principale (1) : galerie, description, carte, ateliers, types d'agres, avis, FAQ, randonnees.
     Colonne laterale (2) : fiche technique, parking, infos pratiques, contribuer, parcours proches, carte IGN,
     pour votre site, auteur. Les blocs de la colonne principale s'etendent sur plusieurs lignes de grille pour
     que chaque bloc lateral trouve sa ligne a hauteur voisine : peu de vide, aucune colonne collante. */
  .pds-fiche__bloc--galerie { grid-column: 1; grid-row: 1 / 3; }
  .pds-fiche__bloc--description { grid-column: 1; grid-row: 3; }
  .pds-fiche__bloc--carte { grid-column: 1; grid-row: 4 / 6; }
  .pds-fiche__bloc--ateliers { grid-column: 1; grid-row: 6 / 10; }
  .pds-fiche__bloc--equipements { grid-column: 1; grid-row: 10; }
  .pds-fiche__bloc--avis { grid-column: 1; grid-row: 11; }
  .pds-fiche__bloc--faq { grid-column: 1; grid-row: 12; }
  .pds-fiche__bloc--randos { grid-column: 1; grid-row: 13; }
  .pds-fiche__bloc--technique { display: block; grid-column: 2; grid-row: 1; }
  .pds-fiche__bloc--parking { grid-column: 2; grid-row: 2; }
  .pds-fiche__bloc--infos { grid-column: 2; grid-row: 3; }
  .pds-fiche__bloc--contribuer { grid-column: 2; grid-row: 4; }
  .pds-fiche__bloc--proches { grid-column: 2; grid-row: 6; }
  .pds-fiche__bloc--ign { grid-column: 2; grid-row: 7; }
  /* Pour votre site (bas de sa ligne) et auteur (haut de la suivante) se touchent a la jonction des deux lignes */
  .pds-fiche__bloc--site { grid-column: 2; grid-row: 10; align-self: end; }
  .pds-fiche__bloc--auteur { grid-column: 2; grid-row: 11; align-self: start; }
}

/* Lien Visorando a droite des chiffres, aligne sur la colonne laterale du corps (340 px au bord droit) */
@media (min-width: 1100px) {
  .pds-fiche__entete > .pds-chiffres { justify-self: start; }
  .pds-fiche__entete > .pds-visorando { grid-row: 2; justify-self: end; width: var(--pds-layout-aside); }
}

/* --- Mouvement reduit : aucune transition ni animation sur la fiche (critere 30) --- */
@media (prefers-reduced-motion: reduce) {
  .pds-fiche *,
  .pds-fiche *::before,
  .pds-fiche *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* --- Impression de la fiche elle-meme : ni actions, ni galerie, ni formulaires --- */
@media print {
  .pds-fiche .pds-actions,
  .pds-fiche .pds-galerie,
  .pds-fiche .pds-carte__actions,
  .pds-fiche .pds-contribuer,
  .pds-fiche .pds-avis__formulaire,
  .pds-fiche .pds-repli--ign { display: none !important; }
}

/* ===== fil.css ===== */
/* Fil d'Ariane pds-fil (5.3) : ol sur une ligne, chevron entre les elements, dernier element
   tronque. Les anciennes pages Bootstrap (.pds-breadcrumb .breadcrumb) prennent le meme dessin. */
.pds-fil { display: block; margin: 0; padding: 0; text-align: left; }
.pds-fil__liste,
.pds-fil .breadcrumb {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;
  padding: var(--pds-space-2) 0;
  border-radius: 0;
  background: transparent;
  list-style: none;
  font-family: var(--pds-font-family-body);
  font-size: var(--pds-font-size-sm);
  font-weight: var(--pds-font-weight-medium);
  line-height: var(--pds-font-line-height-compact);
}
.pds-fil__item,
.pds-fil .breadcrumb-item {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  padding: 0;
  color: var(--pds-semantic-text-muted);
}
.pds-fil__item + .pds-fil__item::before,
.pds-fil .breadcrumb-item + .breadcrumb-item::before {
  content: "chevron_right";
  display: inline-block;
  flex: 0 0 16px;
  width: 16px;
  margin: 0 var(--pds-space-1);
  padding: 0;
  overflow: hidden;
  font-family: "Material Icons";
  font-size: 16px;
  line-height: 1;
  color: var(--pds-semantic-text-muted);
  text-align: center;
}
.pds-fil__item a,
.pds-fil .breadcrumb-item a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--pds-semantic-link);
  white-space: nowrap;
}
.pds-fil__item a:hover,
.pds-fil .breadcrumb-item a:hover { color: var(--pds-semantic-link-hover); }
.pds-fil__item a:focus-visible,
.pds-fil .breadcrumb-item a:focus-visible {
  outline: var(--pds-control-focus-width) solid var(--pds-semantic-focus);
  outline-offset: var(--pds-control-focus-offset);
  border-radius: var(--pds-radius-xs);
}
/* Dernier element : texte atténué, tronque a partir de 40 % de la largeur */
.pds-fil__item[aria-current="page"],
.pds-fil .breadcrumb-item.active {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 40%;
  color: var(--pds-semantic-text-muted);
}
.pds-fil__item[aria-current="page"] > span,
.pds-fil .breadcrumb-item.active > span,
.pds-fil .breadcrumb-item.active { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pds-fil__item:last-child:not([aria-current]) { flex: 0 1 auto; }
@media (min-width: 992px) {
  .pds-fil__item[aria-current="page"],
  .pds-fil .breadcrumb-item.active { max-width: 60%; }
}

/* ===== galerie.css ===== */
/* Galerie de photos pds-galerie (5.11) : couverture, compteur, bande de vignettes. Tout le bloc ouvre
   la visionneuse (src/js/fiche.js). Remplace le carrousel de 44 vues : plus de fleches sur une photo
   paysage dans un cadre haut (PDS-23). */
.pds-galerie { display: block; }
.pds-galerie__couverture {
  position: relative;
  display: block;
  width: 100%;
  height: var(--pds-layout-cover-phone);
  padding: 0;
  border: 0;
  border-radius: var(--pds-radius-md);
  overflow: hidden;
  background: var(--pds-semantic-surface-alt);
  cursor: pointer;
}
.pds-galerie__couverture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pds-galerie__couverture:focus-visible,
.pds-galerie__vignette button:focus-visible {
  outline: var(--pds-control-focus-width) solid var(--pds-semantic-focus);
  outline-offset: var(--pds-control-focus-offset);
}
.pds-galerie__compteur {
  position: absolute;
  top: var(--pds-space-2);
  right: var(--pds-space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--pds-space-1);
  min-height: 24px;
  padding: 0 var(--pds-space-2);
  border-radius: var(--pds-radius-pill);
  background: var(--pds-semantic-text);
  color: var(--pds-semantic-text-inverse);
  font-size: var(--pds-font-size-xs);
  font-weight: var(--pds-font-weight-semibold);
  line-height: 1;
}
.pds-galerie__compteur .material-icons { width: 1em; overflow: hidden; font-size: 14px; line-height: 1; }

.pds-galerie__bande {
  display: flex;
  gap: var(--pds-space-2);
  margin: var(--pds-space-2) 0 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
.pds-galerie__vignette { flex: 0 0 var(--pds-control-thumb-md); scroll-snap-align: start; }
.pds-galerie__vignette button {
  position: relative;
  display: block;
  width: var(--pds-control-thumb-md);
  height: var(--pds-control-thumb-md);
  padding: 0;
  border: 0;
  border-radius: var(--pds-radius-sm);
  overflow: hidden;
  background: var(--pds-semantic-surface-alt);
  cursor: pointer;
}
.pds-galerie__vignette img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pds-galerie__plus {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pds-semantic-text);
  color: var(--pds-semantic-text-inverse);
  font-size: var(--pds-font-size-lg);
  font-weight: var(--pds-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}
/* Au telephone cinq vignettes, en bureau dix : le « +N » est sur la derniere visible */
.pds-galerie__vignette:nth-child(n + 6) { display: none; }
.pds-galerie__plus--bur { display: none; }
@media (min-width: 992px) {
  .pds-galerie__couverture { height: auto; aspect-ratio: 16 / 9; }
  .pds-galerie__vignette:nth-child(n + 6) { display: block; }
  .pds-galerie__plus--tel { display: none; }
  .pds-galerie__plus--bur { display: flex; }
}

/* ===== impression.css ===== */
/* Version imprimable pds-impression (PDS-52, section 7) : A4 portrait, marges de 15 mm, noir sur blanc,
   aucune couleur de fond. Page 1 : nom, lieu, ligne de chiffres, description, puis la liste des ateliers
   sur deux colonnes (numero dans un cercle a trait noir de 8 mm, illustration de 14 mm en niveaux de gris,
   nom en 11 pt gras, « Comment faire » en 9 pt, en entier). Pied de chaque page : adresse de la
   fiche et date d'impression. Les unites mm et pt sont celles du papier. */
@page pds-imprimable {
  size: A4 portrait;
  margin: 15mm;
}

/* A l'ecran : la feuille est posee comme une page A4 sur la toile */
.pds-impression__barre {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--pds-space-2);
  max-width: 210mm;
  margin: 0 auto var(--pds-space-4);
}
.pds-impression {
  box-sizing: border-box;
  max-width: 210mm;
  margin: 0 auto;
  padding: 15mm;
  border: 1px solid var(--pds-semantic-border);
  background: var(--pds-semantic-surface);
  color: var(--pds-semantic-text);
  font-family: var(--pds-font-family-body);
  font-size: var(--pds-font-size-md);
  line-height: var(--pds-font-line-height-base);
  text-align: left;
  page: pds-imprimable;
}
.pds-impression__titre {
  margin: 0;
  font-family: var(--pds-font-family-head);
  font-size: var(--pds-font-size-3xl);
  font-weight: var(--pds-font-weight-semibold);
  line-height: var(--pds-font-line-height-tight);
  color: var(--pds-semantic-heading);
}
.pds-impression__lieu { margin: var(--pds-space-1) 0 0; font-size: var(--pds-font-size-base); color: var(--pds-semantic-text-secondary); }
.pds-impression__chiffres { margin: var(--pds-space-2) 0 0; font-size: var(--pds-font-size-15); font-weight: var(--pds-font-weight-semibold); }
.pds-impression__niveau { margin: var(--pds-space-1) 0 0; font-size: var(--pds-font-size-md); font-weight: var(--pds-font-weight-semibold); }
.pds-impression__parking { margin: var(--pds-space-1) 0 0; font-size: var(--pds-font-size-md); color: var(--pds-semantic-text-secondary); }
.pds-impression__entete { padding-bottom: var(--pds-space-3); border-bottom: 2px solid var(--pds-semantic-text); }
.pds-impression__description { margin: var(--pds-space-4) 0 0; font-size: var(--pds-font-size-15); line-height: var(--pds-font-line-height-relaxed); }
.pds-impression__description p { margin: 0; }
.pds-impression__h2 {
  margin: var(--pds-space-5) 0 var(--pds-space-2);
  font-family: var(--pds-font-family-head);
  font-size: var(--pds-font-size-xl);
  font-weight: var(--pds-font-weight-semibold);
  color: var(--pds-semantic-heading);
}
.pds-impression__etape { margin: 0 0 var(--pds-space-3); font-size: var(--pds-font-size-md); line-height: var(--pds-font-line-height-base); }
.pds-impression__liste { margin: var(--pds-space-3) 0; padding: 0; list-style: none; columns: 2; column-gap: 8mm; }
.pds-impression__atelier {
  display: flex;
  align-items: flex-start;
  gap: 2mm;
  margin: 0 0 3mm;
  break-inside: avoid;
  page-break-inside: avoid;
}
.pds-impression__numero {
  flex: 0 0 8mm;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 8mm;
  height: 8mm;
  border: 1.5pt solid var(--pds-semantic-text);
  border-radius: var(--pds-radius-pill);
  font-size: 10pt;
  font-weight: var(--pds-font-weight-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pds-impression__numero--depart .material-icons { width: 1em; overflow: hidden; font-size: 12pt; line-height: 1; }
.pds-impression__image { flex: 0 0 14mm; width: 14mm; height: 14mm; }
.pds-impression__image img { display: block; width: 14mm; height: 14mm; object-fit: contain; filter: grayscale(1); }
.pds-impression__texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pds-impression__nom { font-size: 11pt; font-weight: var(--pds-font-weight-bold); line-height: 1.25; }
/* Consigne entiere, jamais coupee par « ... » : un atelier long passe sur deux pages plutot que de perdre sa fin */
.pds-impression__comment {
  font-size: 9pt;
  line-height: 1.35;
}
.pds-impression__pied { margin-top: var(--pds-space-5); padding-top: var(--pds-space-2); border-top: 1px solid var(--pds-semantic-border); font-size: var(--pds-font-size-sm); color: var(--pds-semantic-text-secondary); }
.pds-impression__pied p { margin: 0; }

@media print {
  .pds-impression__barre { display: none !important; }
  .pds-impression {
    max-width: none;
    padding: 0;
    border: 0;
    background: none;
    color: var(--pds-color-neutral-ink);
    font-family: var(--pds-font-family-body), Arial, sans-serif;
    font-size: 10pt;
  }
  .pds-impression__titre { font-family: var(--pds-font-family-head), Georgia, serif; font-size: 22pt; color: var(--pds-color-neutral-ink); }
  .pds-impression__h2 { font-family: var(--pds-font-family-head), Georgia, serif; font-size: 14pt; color: var(--pds-color-neutral-ink); }
  .pds-impression__lieu,
  .pds-impression__niveau,
  .pds-impression__parking,
  .pds-impression__pied { color: var(--pds-color-neutral-ink); }
  .pds-impression__lieu { font-size: 11pt; }
  .pds-impression__chiffres { font-size: 10pt; }
  .pds-impression__niveau { font-size: 10pt; }
  .pds-impression__parking { font-size: 9pt; }
  .pds-impression__description { font-size: 10pt; }
  .pds-impression__etape { font-size: 9pt; }
  .pds-impression__entete { border-bottom-color: var(--pds-color-neutral-ink); }
  .pds-impression__numero { border-color: var(--pds-color-neutral-ink); }
  /* Pied repete sur chaque page imprimee */
  .pds-impression__pied {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding-top: 2mm;
    border-top: 0.5pt solid var(--pds-color-neutral-ink);
    font-size: 8pt;
    background: none;
  }
}

/* ===== langue.css ===== */
/* Selecteur de langue pds-langue (5.18). Dans l'en-tete, jamais flottant, aucun drapeau.
   Bureau : bouton avec le nom et un menu deroule. Telephone : rangee dans le menu, 11 lignes
   de 44 px qui se deploient en place. */
.pds-langue { position: relative; }
.pds-langue__bouton {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--pds-space-2);
  width: 100%;
  min-height: var(--pds-control-target);
  padding: 0 var(--pds-space-3);
  border: var(--pds-control-border-width) solid var(--pds-semantic-primary);
  border-radius: var(--pds-radius-sm);
  background: var(--pds-semantic-surface);
  color: var(--pds-semantic-primary);
  font-family: var(--pds-font-family-body);
  font-size: var(--pds-font-size-base);
  font-weight: var(--pds-font-weight-medium);
  line-height: var(--pds-font-line-height-base);
  cursor: pointer;
  transition: background-color var(--pds-duration-fast) var(--pds-easing-out);
}
.pds-langue__bouton:hover { background: var(--pds-semantic-primary-soft); }
.pds-langue__bouton:focus-visible {
  outline: var(--pds-control-focus-width) solid var(--pds-semantic-focus);
  outline-offset: var(--pds-control-focus-offset);
}
.pds-langue__bouton .material-icons {
  flex: 0 0 auto;
  width: 1em;
  overflow: hidden;
  font-size: var(--pds-control-icon-md);
  line-height: 1;
}
.pds-langue__courant { flex: 1 1 auto; text-align: left; }
.pds-langue__bouton[aria-expanded="true"] .pds-langue__chevron { transform: rotate(180deg); }
.pds-langue__chevron { transition: transform var(--pds-duration-fast) var(--pds-easing-out); }

.pds-langue__code {
  margin-left: auto;
  font-size: var(--pds-font-size-sm);
  font-weight: var(--pds-font-weight-semibold);
  color: var(--pds-semantic-text-secondary);
}
.pds-langue__menu { display: none; }
.pds-langue__menu.est-ouvert { display: block; }
.pds-langue__lien .pds-langue__nom { flex: 1 1 auto; }
.pds-langue__lien .material-icons { visibility: hidden; }
.pds-langue__lien[aria-current="true"] .material-icons { visibility: visible; }

/* Telephone : le menu se deploie en place, sous la rangee */
@media (max-width: 1199px) {
  .pds-langue__menu.est-ouvert { margin-top: var(--pds-space-2); box-shadow: none; }
}
/* Bureau : bouton compact, menu deroule sous le bouton */
@media (min-width: 1200px) {
  .pds-langue__bouton { width: auto; }
  .pds-langue__courant { flex: 0 1 auto; }
  .pds-langue__menu {
    position: absolute;
    top: calc(100% + var(--pds-space-1));
    right: 0;
    z-index: 1;
    width: 240px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pds-langue__bouton, .pds-langue__chevron { transition: none; }
}

/* ===== marqueur.css ===== */
/* Marqueurs de la carte pds-marqueur (5.10) : le numero d'atelier est la signature graphique du site,
   la meme pastille verte a liseré blanc que dans la liste et a l'impression. Groupe de marqueurs proches :
   pastille allongee « 13·14 » de 30 px de haut. Courant : 34 px et anneau. Parking : carre accent. */
.pds-marqueur-conteneur { background: transparent; border: 0; }
.pds-marqueur {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 2px solid var(--pds-semantic-marker-ring);
  border-radius: var(--pds-radius-pill);
  background: var(--pds-semantic-marker-bg);
  color: var(--pds-semantic-text-inverse);
  font-family: var(--pds-font-family-body);
  font-size: var(--pds-font-size-sm);
  font-weight: var(--pds-font-weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: var(--pds-shadow-md);
  cursor: pointer;
  transition: transform var(--pds-duration-fast) var(--pds-easing-out);
}
.pds-marqueur-conteneur:hover .pds-marqueur { transform: scale(1.13); }
.pds-marqueur--groupe { padding: 0 var(--pds-space-2); }
.pds-marqueur--groupe .material-icons { width: 1em; margin-right: 2px; overflow: hidden; font-size: 16px; line-height: 1; }
.pds-marqueur--courant {
  transform: scale(1.13);
  box-shadow: 0 0 0 2px var(--pds-semantic-surface), 0 0 0 5px var(--pds-semantic-primary);
}
.pds-marqueur--parking {
  border-radius: var(--pds-radius-xs);
  background: var(--pds-semantic-accent);
  font-size: var(--pds-font-size-15);
  font-weight: var(--pds-font-weight-bold);
}
@media (prefers-reduced-motion: reduce) {
  .pds-marqueur { transition: none; }
  .pds-marqueur-conteneur:hover .pds-marqueur { transform: none; }
}

/* Depart : drapeau de 36 px, sous les numeros d'atelier. Le repere par defaut que pose loadParcoursForFiche
   (script.js) est masque : ce marqueur le remplace. */
.pds-marqueur--depart {
  background: var(--pds-semantic-primary-hover);
}
.pds-marqueur--depart .material-icons { width: 1em; overflow: hidden; font-size: 20px; line-height: 1; }
/* Panneau de depart de la fiche (30 px comme un numero, il se groupe avec eux) : meme drapeau, pastille plus petite */
.pds-marqueur--panneau .material-icons { font-size: 18px; }
.pds-carte__carte img.leaflet-marker-icon,
.pds-carte__carte img.leaflet-marker-shadow { display: none; }

/* ===== menu.css ===== */
/* Menu pds-menu (liste de choix sous un bouton) : langue, compte, partage. Ne decide jamais
   de l'affichage : Bootstrap (.dropdown-menu.show) ou le script du composant l'ouvre. */
.pds-menu {
  box-sizing: border-box;
  min-width: 200px;
  margin: 0;
  padding: var(--pds-space-1);
  border: 1px solid var(--pds-semantic-border);
  border-radius: var(--pds-radius-md);
  background: var(--pds-semantic-surface);
  box-shadow: var(--pds-shadow-lg);
  list-style: none;
  text-align: left;
  font-family: var(--pds-font-family-body);
}
.pds-menu__item,
.pds-menu .dropdown-item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--pds-space-2);
  width: 100%;
  min-height: var(--pds-control-target);
  padding: 0 var(--pds-space-3);
  border: 0;
  border-radius: var(--pds-radius-sm);
  background: transparent;
  color: var(--pds-semantic-text);
  font-family: var(--pds-font-family-body);
  font-size: var(--pds-font-size-base);
  font-weight: var(--pds-font-weight-regular);
  line-height: var(--pds-font-line-height-base);
  text-align: left;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
}
.pds-menu__item:hover,
.pds-menu .dropdown-item:hover,
.pds-menu .dropdown-item:focus {
  background: var(--pds-semantic-primary-soft);
  color: var(--pds-semantic-text);
  text-decoration: none;
}
.pds-menu__item:focus-visible,
.pds-menu .dropdown-item:focus-visible {
  outline: var(--pds-control-focus-width) solid var(--pds-semantic-focus);
  outline-offset: calc(var(--pds-control-focus-offset) * -1);
}
.pds-menu__item .material-icons,
.pds-menu .dropdown-item .material-icons {
  flex: 0 0 auto;
  width: 1em;
  overflow: hidden;
  font-size: var(--pds-control-icon-md);
  line-height: 1;
  color: var(--pds-semantic-primary);
}
.pds-menu__item[aria-current="true"],
.pds-menu__item[aria-current="page"] { background: var(--pds-semantic-primary-soft); font-weight: var(--pds-font-weight-semibold); }
.pds-menu .dropdown-divider { margin: var(--pds-space-1) 0; border-top-color: var(--pds-semantic-border); }
.pds-menu .dropdown-header { padding: var(--pds-space-2) var(--pds-space-3); font-size: var(--pds-font-size-sm); font-weight: var(--pds-font-weight-semibold); color: var(--pds-semantic-text-secondary); }

/* ===== modale.css ===== */
/* Fenetre modale pds-modale (5.15). Les modales Bootstrap gardent leur mecanique jQuery :
   la classe pds-modale se pose sur .modal-content. Plein ecran sous 640 px. */
.modal-content.pds-modale {
  border: 0;
  border-radius: var(--pds-radius-lg);
  background: var(--pds-semantic-surface);
  color: var(--pds-semantic-text);
  box-shadow: var(--pds-shadow-lg);
  font-family: var(--pds-font-family-body);
}
.pds-modale .modal-header {
  align-items: center;
  padding: var(--pds-space-3) var(--pds-space-4);
  border-bottom: 0;
  border-radius: var(--pds-radius-lg) var(--pds-radius-lg) 0 0;
  background: var(--pds-semantic-primary);
  color: var(--pds-semantic-text-inverse);
}
.pds-modale .modal-title {
  margin: 0;
  font-family: var(--pds-font-family-head);
  font-size: var(--pds-font-size-xl);
  font-weight: var(--pds-font-weight-semibold);
  line-height: var(--pds-font-line-height-snug);
  color: var(--pds-semantic-text-inverse);
}
.pds-modale .modal-header .close {
  width: var(--pds-control-target);
  height: var(--pds-control-target);
  margin: calc(var(--pds-space-3) * -1) calc(var(--pds-space-3) * -1) calc(var(--pds-space-3) * -1) auto;
  padding: 0;
  opacity: 1;
  color: var(--pds-semantic-text-inverse);
  text-shadow: none;
}
.pds-modale .modal-header .close:focus-visible {
  outline: var(--pds-control-focus-width) solid var(--pds-semantic-focus-on-dark);
  outline-offset: calc(var(--pds-control-focus-offset) * -1);
}
.pds-modale .modal-body { padding: var(--pds-space-6); }
/* Boutons radio et cases des formulaires Bootstrap : case de 24 px dans une ligne cliquable de 44 px
   (13 px et libelle de 26 px avant, passage utilisateur reel 3.0 n°1, friction 17) */
.pds-modale .form-check { display: flex; align-items: center; gap: var(--pds-space-3); min-height: var(--pds-control-target); padding-left: 0; }
.pds-modale .form-check .form-check-input { position: static; flex: 0 0 auto; width: 24px; height: 24px; margin: 0; accent-color: var(--pds-semantic-primary); }
.pds-modale .form-check .form-check-label { display: flex; align-items: center; flex: 1 1 auto; min-height: var(--pds-control-target); margin: 0; cursor: pointer; }
.pds-modale .modal-footer {
  justify-content: flex-end;
  gap: var(--pds-space-2);
  padding: var(--pds-space-3) var(--pds-space-6) var(--pds-space-4);
  border-top: 1px solid var(--pds-semantic-border);
}
@media (min-width: 576px) {
  .modal-dialog:has(> .pds-modale) { max-width: 560px; }
}
@media (max-width: 639px) {
  /* Pleine largeur mais à la hauteur de son contenu : étirée à 100vh, la fenêtre posait ses
     boutons dans les 70 derniers px de l'écran, là où se pose l'ancre AdSense du bas (revue
     adversariale de la 3.0). Le voile garde 120 px sous la fenêtre pour qu'on puisse toujours
     faire remonter ses boutons au-dessus de l'ancre. */
  .modal-dialog:has(> .pds-modale) { max-width: none; margin: 0; }
  .modal:has(.pds-modale) { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
  .modal-content.pds-modale { border-radius: 0; }
  .pds-modale .modal-header { border-radius: 0; }
  .pds-modale .modal-body { padding: var(--pds-space-4); }
}

/* Ouverture : 200 ms, echelle 0,98 vers 1 */
.modal.fade .modal-dialog:has(> .pds-modale) {
  transform: scale(0.98);
  transition: transform var(--pds-duration-base) var(--pds-easing-out), opacity var(--pds-duration-base) var(--pds-easing-out);
}
.modal.show .modal-dialog:has(> .pds-modale) { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog:has(> .pds-modale) { transform: none; transition: none; }
}

/* ===== niveau.css ===== */
/* Selecteur de niveau pds-niveau (5.9 et 5.16) : le segmente « Debutant / Confirme » (boutons aria-pressed)
   est dessine par champ.css. Ce fichier ajoute seulement ce que la liste des ateliers exige : des boutons de
   44 px de haut (le cadre de 1,5 px les rendait a 41 px) ; le niveau choisi change le texte « Comment faire »
   des guides (src/js/fiche.js). */
.pds-niveau .pds-niveau__option {
  min-height: var(--pds-control-target);
  min-width: var(--pds-control-target);
}
.pds-niveau .pds-niveau__option:hover:not([aria-pressed="true"]) { background: var(--pds-semantic-primary-soft); }

/* ===== partager.css ===== */
/* Bouton Partager pds-partager (PDS-15) : le bouton est un pds-bouton--secondaire, ce fichier ne dessine
   que le message de confirmation (« Lien copie ») que src/js/partager.js ecrit dans la zone aria-live
   voisine. Pas de toast fixe en bas d'ecran. */
.pds-partager-etat {
  margin: 0;
  font-size: var(--pds-font-size-sm);
  font-weight: var(--pds-font-weight-medium);
  line-height: var(--pds-font-line-height-compact);
  color: var(--pds-semantic-primary);
}
.pds-partager-etat:empty { display: none; }

/* ===== pied.css ===== */
/* Pied de page pds-pied (5.2) : dans le flux, jamais fixe (PDS-62, PDS-71). Telephone : deux colonnes
   de liens de 44 px. Bureau : une ligne de liens, le copyright a droite. */
.pds-pied {
  box-sizing: border-box;
  width: 100%;
  margin-top: auto;
  padding: var(--pds-space-2) var(--pds-layout-gutter-phone) calc(var(--pds-space-2) + env(safe-area-inset-bottom));
  background: var(--pds-semantic-footer-bg);
  color: var(--pds-semantic-footer-text);
  font-family: var(--pds-font-family-body);
  text-align: left;
}
/* Telephone : cinq rangees de deux liens de 44 px. Avec un nombre impair de liens, le droit d'auteur prend la
   case libre de la derniere rangee (plus de ligne a lui, 52 px de moins). */
.pds-pied__interieur {
  position: relative;
  max-width: calc(var(--pds-layout-container) + 2 * var(--pds-layout-gutter-desktop));
  margin: 0 auto;
}
.pds-pied__liens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--pds-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pds-pied__lien {
  display: flex;
  align-items: center;
  min-width: var(--pds-control-target);
  min-height: var(--pds-control-target);
  color: var(--pds-semantic-footer-text);
  font-size: var(--pds-font-size-base);
  font-weight: var(--pds-font-weight-medium);
  line-height: var(--pds-font-line-height-base);
  text-decoration: none;
  transition: color var(--pds-duration-fast) var(--pds-easing-out);
}
.pds-pied__lien:hover {
  color: var(--pds-semantic-footer-text-hover);
  text-decoration: underline;
}
.pds-pied__lien:focus-visible {
  outline: var(--pds-control-focus-width) solid var(--pds-semantic-focus-on-dark);
  outline-offset: var(--pds-control-focus-offset);
  border-radius: var(--pds-radius-xs);
}
.pds-pied__copyright {
  margin: var(--pds-space-2) 0 0;
  font-size: var(--pds-font-size-sm);
  line-height: var(--pds-font-line-height-compact);
  color: var(--pds-semantic-footer-muted);
}
.pds-pied__copyright { display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--pds-space-1); }
.pds-pied__interieur:has(.pds-pied__liens > li:last-child:nth-child(odd)) .pds-pied__copyright {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(50% - var(--pds-space-2));
  margin: 0;
}
.pds-pied__copyright a {
  display: inline-flex;
  align-items: center;
  min-height: var(--pds-control-target);
  color: inherit;
  text-decoration: underline;
}
.pds-pied__copyright a:hover { color: var(--pds-semantic-footer-text-hover); }

@media (min-width: 992px) {
  .pds-pied {
    display: flex;
    align-items: center;
    min-height: 72px;
    padding: var(--pds-space-3) var(--pds-layout-gutter-desktop);
  }
  .pds-pied__interieur {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--pds-space-6);
  }
  .pds-pied__liens {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--pds-space-4);
  }
  .pds-pied__lien { padding: 0 var(--pds-space-2); font-size: var(--pds-font-size-md); }
  .pds-pied__copyright,
  .pds-pied__interieur:has(.pds-pied__liens > li:last-child:nth-child(odd)) .pds-pied__copyright { position: static; width: auto; margin: 0; flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .pds-pied__lien { transition: none; }
}

/* ===== puce.css ===== */
/* Puce pds-puce, etiquette d'etat pds-etiquette et compteur pds-compteur (5.5). Jetons seulement. */

/* --- Puce : information, infos pratiques, equipements --- */
.pds-puce {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--pds-space-2);
  min-height: 32px;
  padding: 0 var(--pds-space-3);
  border: 1px solid var(--pds-semantic-primary-soft-strong);
  border-radius: var(--pds-radius-pill);
  background: var(--pds-semantic-primary-soft);
  color: var(--pds-semantic-text);
  font-family: var(--pds-font-family-body);
  font-size: var(--pds-font-size-sm);
  font-weight: var(--pds-font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
}
.pds-puce .material-icons {
  flex: 0 0 auto;
  width: 1em;
  overflow: hidden;
  font-size: 16px;
  line-height: 1;
  color: var(--pds-semantic-primary);
}
.pds-puce img { width: 24px; height: 24px; flex: 0 0 auto; }

/* Puce cliquable : 44 px de haut, la cible entiere */
a.pds-puce,
button.pds-puce {
  min-height: var(--pds-control-target);
  margin: 0;
  cursor: pointer;
  transition: background-color var(--pds-duration-fast) var(--pds-easing-out);
}
a.pds-puce:hover,
button.pds-puce:hover {
  background: var(--pds-semantic-primary-soft-strong);
  color: var(--pds-semantic-text);
  text-decoration: none;
}
a.pds-puce:focus-visible,
button.pds-puce:focus-visible {
  outline: var(--pds-control-focus-width) solid var(--pds-semantic-focus);
  outline-offset: var(--pds-control-focus-offset);
}

/* Puces de ville des pages departement et ville (style en ligne de leur gabarit) : cible de 44 px */
a.pds-ville-chip { min-height: var(--pds-control-target); box-sizing: border-box; }

/* --- Etiquette d'etat : le mot et l'icone portent l'etat, pas seulement la couleur --- */
.pds-etiquette {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--pds-space-1);
  min-height: 24px;
  padding: 0 var(--pds-space-2);
  border-radius: var(--pds-radius-xs);
  background: var(--pds-semantic-primary-soft);
  color: var(--pds-semantic-primary);
  font-family: var(--pds-font-family-body);
  font-size: var(--pds-font-size-xs);
  font-weight: var(--pds-font-weight-semibold);
  line-height: 1;
}
.pds-etiquette .material-icons { width: 1em; overflow: hidden; font-size: 14px; line-height: 1; }
.pds-etiquette--succes { background: var(--pds-semantic-success-bg); color: var(--pds-semantic-success-text); }
.pds-etiquette--alerte { background: var(--pds-semantic-warning-bg); color: var(--pds-semantic-warning-text); }
.pds-etiquette--danger { background: var(--pds-semantic-danger-bg); color: var(--pds-semantic-danger-text); }
.pds-etiquette--info { background: var(--pds-semantic-info-bg); color: var(--pds-semantic-info-text); }

/* --- Compteur (photos, atelier) : fond plein, jamais translucide --- */
.pds-compteur {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--pds-space-1);
  min-height: 24px;
  padding: 0 var(--pds-space-2);
  border-radius: var(--pds-radius-pill);
  background: var(--pds-semantic-text);
  color: var(--pds-semantic-text-inverse);
  font-family: var(--pds-font-family-body);
  font-size: var(--pds-font-size-xs);
  font-weight: var(--pds-font-weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pds-compteur .material-icons { width: 1em; overflow: hidden; font-size: 14px; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  a.pds-puce, button.pds-puce { transition: none; }
}

/* ===== repli.css ===== */
/* Section repliable pds-repli (5.12) : details natif, contenu dans le HTML initial (indexe, sans
   JavaScript), resume de 56 px. data-pds-ouvert="bureau" : fermee au telephone, ouverte en bureau
   (src/js/fiche.js, sans toucher a ce que le visiteur a deja manipule). Variante --douce : echauffement
   et retour au calme. */
.pds-repli {
  border-bottom: 1px solid var(--pds-semantic-border);
  text-align: left;
}
.pds-repli__resume {
  display: flex;
  align-items: center;
  gap: var(--pds-space-3);
  min-height: 56px;
  padding: var(--pds-space-2) 0;
  list-style: none;
  cursor: pointer;
}
.pds-repli__resume::-webkit-details-marker { display: none; }
.pds-repli__resume::marker { content: ""; }
.pds-repli__resume:hover .pds-repli__titre { text-decoration: underline; text-underline-offset: 3px; }
.pds-repli__icone {
  flex: 0 0 auto;
  width: 1em;
  overflow: hidden;
  font-size: var(--pds-control-icon-md);
  line-height: 1;
  color: var(--pds-semantic-primary);
}
.pds-repli__titre {
  margin: 0;
  font-family: var(--pds-font-family-head);
  font-size: var(--pds-font-size-xl);
  font-weight: var(--pds-font-weight-semibold);
  line-height: var(--pds-font-line-height-snug);
  letter-spacing: 0;
  color: var(--pds-semantic-heading);
}
.pds-repli__titre--petit { font-size: var(--pds-font-size-base); }
.pds-repli__titre { flex: 1 1 auto; min-width: 0; }
.pds-repli__apercu {
  flex: 0 0 auto;
  display: inline-flex;
  margin-left: auto;
}
.pds-repli__apercu + .pds-repli__chevron { margin-left: var(--pds-space-1); }
.pds-repli__apercu img {
  width: 32px;
  height: 32px;
  margin-left: calc(var(--pds-space-3) * -1);
  border: 2px solid var(--pds-semantic-surface);
  border-radius: var(--pds-radius-pill);
  background: var(--pds-semantic-primary-soft);
  object-fit: contain;
}
.pds-repli__apercu img:first-child { margin-left: 0; }
@media (max-width: 479px) {
  .pds-repli__apercu img:nth-child(n + 4) { display: none; }
}
.pds-repli__chevron {
  flex: 0 0 auto;
  margin-left: auto;
  width: 1em;
  overflow: hidden;
  font-size: 24px;
  line-height: 1;
  color: var(--pds-semantic-primary);
  transition: transform var(--pds-duration-slow) var(--pds-easing-out);
}
.pds-repli[open] > .pds-repli__resume .pds-repli__chevron { transform: rotate(180deg); }
.pds-repli__corps { padding: 0 0 var(--pds-space-4); }
.pds-repli__corps > :last-child { margin-bottom: 0; }
.pds-repli__iframe { display: block; width: 100%; border: 0; border-radius: var(--pds-radius-md); background: var(--pds-semantic-surface-alt); }
.pds-repli__iframe:focus-visible,
.pds-repli__iframe:focus,
.pds-repli__iframe.pds-iframe--focus {
  outline: var(--pds-control-focus-width) solid var(--pds-semantic-focus);
  outline-offset: var(--pds-control-focus-offset);
}

/* Variante douce : fond vert tres clair, sans filet */
.pds-repli--douce {
  margin: 0 0 var(--pds-space-2);
  border: 0;
  border-radius: var(--pds-radius-md);
  background: var(--pds-semantic-primary-soft);
}
.pds-repli--douce .pds-repli__resume { padding: var(--pds-space-2) var(--pds-space-4); }
.pds-repli--douce .pds-repli__corps { padding: 0 var(--pds-space-4) var(--pds-space-4); }
.pds-repli--douce .pds-repli__corps p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .pds-repli__chevron { transition: none; }
}

/* ===== toast.css ===== */
/* Message d'etat pds-toast (5.17 et amendement 0) : jamais en bas de l'ecran (l'ancre de
   Google s'y pose, rien de fixe ni de sticky en bas au telephone). Par defaut dans le flux,
   a cote de l'element qui l'a declenche. --haut : bandeau fixe en haut de la fenetre. */
.pds-toast {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--pds-space-2);
  max-width: 100%;
  min-height: var(--pds-control-height-md);
  padding: var(--pds-space-2) var(--pds-space-4);
  border-radius: var(--pds-radius-md);
  background: var(--pds-semantic-text);
  color: var(--pds-semantic-text-inverse);
  font-family: var(--pds-font-family-body);
  font-size: var(--pds-font-size-15);
  line-height: var(--pds-font-line-height-base);
}
.pds-toast[hidden] { display: none; }
.pds-toast .material-icons { flex: 0 0 auto; width: 1em; overflow: hidden; font-size: var(--pds-control-icon-sm); line-height: 1; }
.pds-toast--haut {
  position: fixed;
  top: max(var(--pds-space-4), env(safe-area-inset-top));
  left: 50%;
  z-index: 1060;
  transform: translateX(-50%);
  box-shadow: var(--pds-shadow-lg);
  animation: pds-toast-entree var(--pds-duration-base) var(--pds-easing-out);
}
@keyframes pds-toast-entree {
  from { opacity: 0; transform: translate(-50%, calc(var(--pds-space-2) * -1)); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .pds-toast--haut { animation: none; }
}

/* ===== visionneuse.css ===== */
/* Visionneuse de photos pds-visionneuse (5.11) : plein ecran, photo en contain (paysage et portrait),
   fleches et croix de 48 x 48 (blanc sur primary-hover), barre du bas avec legende, credit et compteur
   « 12 / 35 ». Construite par src/js/fiche.js a la premiere ouverture, cachee sinon. */
.pds-visionneuse {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  background: var(--pds-semantic-overlay);
  overscroll-behavior: contain;
  font-family: var(--pds-font-family-body);
}
.pds-visionneuse[hidden] { display: none; }
html.pds-sans-defilement,
html.pds-sans-defilement body { overflow: hidden; }

.pds-visionneuse__scene {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--pds-semantic-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pds-visionneuse__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pds-visionneuse__fleche {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  padding: 0;
  border: 0;
  border-radius: var(--pds-radius-pill);
  background: var(--pds-semantic-primary-hover);
  color: var(--pds-semantic-text-inverse);
  cursor: pointer;
}
.pds-visionneuse__fleche[hidden] { display: none; }
.pds-visionneuse__fleche .material-icons { width: 1em; overflow: hidden; font-size: 28px; line-height: 1; }
.pds-visionneuse__fleche:hover { background: var(--pds-semantic-primary); }
.pds-visionneuse__fleche:focus-visible {
  outline: var(--pds-control-focus-width) solid var(--pds-semantic-focus-on-dark);
  outline-offset: var(--pds-control-focus-offset);
}
.pds-visionneuse__fleche--prec { left: var(--pds-space-2); }
.pds-visionneuse__fleche--suiv { right: var(--pds-space-2); }
.pds-visionneuse__fermer { top: var(--pds-space-2); right: var(--pds-space-2); margin-top: 0; }

.pds-visionneuse__barre {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pds-space-3);
  padding: var(--pds-space-3) var(--pds-space-4);
  padding-bottom: calc(var(--pds-space-3) + env(safe-area-inset-bottom));
  background: var(--pds-semantic-text);
  color: var(--pds-semantic-text-inverse);
}
.pds-visionneuse__textes { min-width: 0; }
.pds-visionneuse__legende {
  margin: 0;
  font-size: var(--pds-font-size-15);
  font-weight: var(--pds-font-weight-medium);
  line-height: var(--pds-font-line-height-compact);
  color: var(--pds-semantic-text-inverse);
}
.pds-visionneuse__credit {
  margin: var(--pds-space-half) 0 0;
  font-size: var(--pds-font-size-sm);
  line-height: var(--pds-font-line-height-compact);
  color: var(--pds-semantic-footer-text);
}
.pds-visionneuse__legende:empty,
.pds-visionneuse__credit:empty { display: none; }
.pds-visionneuse__compteur {
  flex: 0 0 auto;
  font-size: var(--pds-font-size-15);
  font-weight: var(--pds-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--pds-semantic-text-inverse);
}

/* ===== visorando.css ===== */
/* Lien Visorando pds-visorando (5.22, PDS-87, 3.0.2) : encart cliquable vers la randonnee Visorando de la
   fiche. Icone de Visorando (seule couleur de marque, dans l'image), titre, ce qu'on y trouve en trois points
   avec leur icone (suivre l'itineraire, carte IGN, trace GPX, depuis la 3.0.3, PDS-91), fleche
   « nouvel onglet ». Toute la carte est le lien (cible de 64 px), bordure verte comme un bouton secondaire
   pour qu'elle se lise cliquable. Place dans l'en-tete de la fiche (fiche.css) : sous les actions au
   telephone, a droite des chiffres cles en bureau (titre et texte equilibres sur deux lignes dans ses
   340 px). Jetons seulement. */
.pds-visorando {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--pds-space-3);
  min-height: 64px;
  padding: var(--pds-space-2) var(--pds-space-3);
  border: var(--pds-control-border-width) solid var(--pds-semantic-primary);
  border-radius: var(--pds-radius-md);
  background: var(--pds-semantic-surface);
  color: var(--pds-semantic-text);
  font-family: var(--pds-font-family-body);
  text-align: left;
  text-decoration: none;
  transition: background-color var(--pds-duration-fast) var(--pds-easing-out);
}
.pds-visorando:hover {
  background: var(--pds-semantic-primary-soft);
  color: var(--pds-semantic-text);
  text-decoration: none;
}
.pds-visorando:focus-visible {
  outline: var(--pds-control-focus-width) solid var(--pds-semantic-focus);
  outline-offset: var(--pds-control-focus-offset);
}
.pds-visorando__logo {
  flex: 0 0 auto;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: var(--pds-radius-sm);
}
.pds-visorando__corps {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--pds-space-half);
  min-width: 0;
}
.pds-visorando__titre {
  font-size: var(--pds-font-size-base);
  text-wrap: balance;
  font-weight: var(--pds-font-weight-semibold);
  line-height: var(--pds-font-line-height-compact);
  color: var(--pds-semantic-heading);
}
.pds-visorando__points {
  display: flex;
  flex-direction: column;
  gap: var(--pds-space-half);
  margin-top: var(--pds-space-1);
}
.pds-visorando__point {
  display: flex;
  align-items: flex-start;
  gap: var(--pds-space-1);
  font-size: var(--pds-font-size-sm);
  line-height: var(--pds-font-line-height-compact);
  color: var(--pds-semantic-text-secondary);
}
.pds-visorando__point .material-icons {
  flex: 0 0 auto;
  width: 1em;
  overflow: hidden;
  font-size: var(--pds-control-icon-sm);
  line-height: 1;
  color: var(--pds-semantic-primary);
}
.pds-visorando__fleche {
  flex: 0 0 auto;
  width: 1em;
  overflow: hidden;
  font-size: var(--pds-control-icon-md);
  line-height: 1;
  color: var(--pds-semantic-primary);
}
@media (prefers-reduced-motion: reduce) {
  .pds-visorando { transition: none; }
}
@media print {
  .pds-visorando { display: none !important; }
}