/* OCD Live : parcours de réservation (/reserver), confirmation (/reservation),
   espace équipe et désinscription. Repose sur base.css : jetons et composants partagés.
   Tout ce qui est propre à ces pages est préfixé « p- ». */

/* ---------- Socle de page ---------- */

html {
  scroll-padding-top: 84px;
  scroll-padding-bottom: var(--p-barre, 0px);
}

.p-corps {
  padding-bottom: calc(var(--p-barre, 0px) + 24px);
}

.p-libelle {
  color: var(--sable);
  font-size: var(--t-petit);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.p-aide-texte {
  color: var(--sable);
  font-size: var(--t-petit);
  line-height: 1.45;
}

.p-mention {
  color: var(--sable);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.4;
}

.p-lien {
  display: inline;
  padding: 0;
  color: var(--creme);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .p-lien:hover { color: var(--lueur); }
}

.p-alerte {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-m);
  border: 1px solid rgb(255 122 102 / 0.35);
  background: rgb(255 122 102 / 0.08);
  color: var(--creme);
  font-size: var(--t-petit);
  line-height: 1.45;
  animation: p-fondu var(--duree-etat) ease both;
}
.p-alerte > .icone {
  color: var(--alerte);
  margin-top: 1px;
}
.p-alerte .bouton {
  margin-top: 12px;
}

@keyframes p-fondu {
  from { opacity: 0; }
}

/* ---------- En-tête collé et progression ---------- */

.p-entete {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--nuit);
  border-bottom: 1px solid var(--filet);
  view-transition-name: entete;
}
/* Écran bas (clavier ouvert sur Android, paysage) : l'en-tête défile avec la page
   au lieu de manger la hauteur qui reste. */
@media (max-width: 1023.98px) and (max-height: 520px) {
  .p-entete { position: relative; }
  html { scroll-padding-top: 12px; }
}

.p-entete-ligne {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 56px;
  max-width: calc(1048px + 2 * var(--marge));
  margin: 0 auto;
  padding: 0 max(calc(var(--marge) - 10px), env(safe-area-inset-right, 0px)) 0 max(calc(var(--marge) - 10px), env(safe-area-inset-left, 0px));
}

.p-marque {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 8px;
  color: var(--creme);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.p-marque img {
  width: auto;
  height: 20px;
}
.p-marque-seule {
  margin-left: 2px;
}

.p-aide {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-left: auto;
  padding: 0 14px;
  border-radius: var(--r-pilule);
  color: var(--creme);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--d-survol) ease, transform var(--d-appui) var(--ease-out);
}
.p-aide:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .p-aide:hover { background: var(--coulisse); }
}

.p-bouton-icone {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--creme);
  transition: background-color var(--d-survol) ease, transform var(--d-appui) var(--ease-out), color var(--d-survol) ease;
}
.p-bouton-icone:active:not(:disabled) {
  transform: scale(0.94);
  background: var(--coulisse);
}
.p-bouton-icone:disabled {
  color: var(--cendre);
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  .p-bouton-icone:hover:not(:disabled) { background: var(--coulisse); }
}

.p-progression {
  display: flex;
  gap: 6px;
  max-width: calc(640px + 2 * var(--marge));
  margin: 0 auto;
  padding: 0 max(var(--marge), env(safe-area-inset-right, 0px)) 12px max(var(--marge), env(safe-area-inset-left, 0px));
}
@media (min-width: 1024px) {
  .p-progression {
    max-width: calc(1048px + 2 * var(--marge));
    padding-right: calc(var(--marge) + 408px);
  }
}
/* Titres qui reçoivent le focus par programme : pas d'anneau (ce ne sont pas des contrôles). */
h1[tabindex="-1"]:focus-visible,
h2[tabindex="-1"]:focus-visible {
  outline: none;
}
.p-segment {
  position: relative;
  flex: 1;
  height: 4px;
  overflow: hidden;
  border-radius: var(--r-pilule);
  background: var(--coulisse);
}
.p-segment::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--courbe-sortie);
}
.p-segment.faite::after {
  transform: scaleX(1);
}
.p-segment.ouverte {
  background: var(--voile-dense);
  box-shadow: inset 0 0 0 1px var(--orange);
}

/* ---------- Mise en page : une colonne, deux à partir de 1024 px ---------- */

.p-page {
  max-width: calc(640px + 2 * var(--marge));
  margin: 0 auto;
  padding: 0 max(var(--marge), env(safe-area-inset-right, 0px)) 0 max(var(--marge), env(safe-area-inset-left, 0px));
}

.p-tete {
  padding: 32px 0 20px;
}
.p-titre-page {
  font-size: var(--t-titre);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.p-intro {
  margin-top: 10px;
  color: var(--sable);
  font-size: var(--t-intro);
  line-height: 1.45;
}

@media (min-width: 1024px) {
  .p-page {
    display: grid;
    grid-template-columns: minmax(0, 640px) 360px;
    gap: 48px;
    align-items: start;
    max-width: calc(1048px + 2 * var(--marge));
  }
  .p-tete {
    padding-top: 48px;
  }
}

/* ---------- Les cinq questions ---------- */

.p-questions {
  border-top: 1px solid var(--filet);
}

/* Pas de scroll-margin : html { scroll-padding-top } place déjà la question sous l'en-tête. */
.p-q {
  border-bottom: 1px solid var(--filet);
}

.p-q-ouverte {
  padding: 28px 0 36px;
  view-transition-name: etape-ouverte;
}

.p-q-titre {
  color: var(--sable);
  font-size: var(--t-sous-titre);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.p-mot {
  color: var(--creme);
}

.p-q-contenu {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}

.p-sous-titre {
  margin-top: -8px;
  color: var(--sable);
  font-size: var(--t-corps);
}

/* Question faite : une ligne qui se touche pour modifier */
.p-q-ligne {
  font-size: inherit;
  font-weight: inherit;
}
.p-faite {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 14px;
  align-items: start;
  width: 100%;
  min-height: 64px;
  padding: 12px 0;
  color: var(--creme);
  text-align: left;
  transition: transform var(--d-appui) var(--ease-out);
}
.p-faite:active {
  transform: scale(0.985);
}
.p-coche {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--nuit);
}
.p-coche .icone {
  width: 15px;
  height: 15px;
  stroke-width: 3;
}
.p-faite-texte {
  display: grid;
  gap: 2px;
  min-width: 0;
}
/* La coche, le mot-clé et « Modifier » partagent la même rangée de 24 px. */
.p-faite .p-mot {
  color: var(--sable);
  font-size: var(--t-petit);
  font-weight: 600;
  line-height: 24px;
}
/* Une réponse tient en 2 lignes au plus : la ligne reste un résumé, pas une fiche. */
.p-reponse {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.p-modifier {
  line-height: 24px;
  color: var(--creme);
  font-size: var(--t-petit);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .p-faite:hover .p-modifier { color: var(--lueur); }
}

/* Question à venir : grisée, avec ce qui la débloque */
.p-avenir {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 56px;
  padding: 17px 0;
}
.p-avenir .p-mot {
  color: var(--sable);
  font-size: 1.0625rem;
  font-weight: 700;
}
.p-deblocage {
  color: var(--sable);
  font-size: var(--t-petit);
  font-weight: 400;
}

/* Coche des cartes choisies */
.p-coche-choix {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--nuit);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--duree-etat) ease, transform var(--duree-etat) var(--ease-out);
}
.p-coche-choix .icone {
  width: 15px;
  height: 15px;
  stroke-width: 3;
}
.choisi > .p-coche-choix {
  opacity: 1;
  transform: none;
}

/* ---------- Question 1 : Où ---------- */

.p-choix-liste {
  display: grid;
  gap: 12px;
}

.p-choix {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 104px;
  padding: 14px 44px 14px 14px;
  border-radius: var(--r-l);
  border: 1px solid var(--filet-fort);
  background: var(--plateau);
  box-shadow: var(--ombre-carte);
  color: var(--creme);
  text-align: left;
  transition:
    transform var(--d-appui) var(--ease-out),
    border-color var(--duree-etat) ease,
    background-color var(--duree-etat) ease,
    box-shadow var(--duree-etat) ease;
}
.p-choix:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .p-choix:hover { border-color: var(--cendre); }
}
.p-choix.choisi {
  border-color: var(--orange);
  background: linear-gradient(var(--voile), var(--voile)), var(--plateau);
  box-shadow: inset 0 0 0 1px var(--orange);
}

.p-vignette {
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 12px;
  object-fit: cover;
  object-position: 50% 30%;
}
.p-vignette-picto {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 25%, var(--voile-dense), var(--coulisse) 70%);
  box-shadow: inset 0 0 0 1px var(--filet);
  color: var(--lueur);
}
.p-vignette-picto .icone {
  width: 34px;
  height: 34px;
  stroke-width: 1.75;
}

.p-choix-texte {
  display: grid;
  gap: 4px;
}
.p-choix-titre {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.p-choix-detail {
  color: var(--sable);
  font-size: var(--t-petit);
  line-height: 1.45;
}

/* Volets d'aide */
.p-details {
  border-radius: var(--r-m);
}
.p-details summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--creme);
  font-size: var(--t-petit);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.p-details summary::-webkit-details-marker {
  display: none;
}
.p-details-plus {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--cendre);
  color: var(--creme);
  transition: transform 220ms var(--ease-out);
}
.p-details-plus .icone {
  width: 16px;
  height: 16px;
}
.p-details[open] .p-details-plus {
  transform: rotate(45deg);
}
.p-details-corps {
  display: grid;
  gap: 10px;
  padding: 4px 0 8px 38px;
  color: var(--sable);
  font-size: var(--t-petit);
  line-height: 1.5;
}
/* Liens dans le texte : le remplissage agrandit la zone de toucher sans bouger les lignes. */
.p-details-corps .lien {
  padding-block: 14px;
}
@media (hover: hover) and (pointer: fine) {
  .p-details summary:hover .p-details-plus { border-color: var(--creme); }
}

/* ---------- Question 2 : Quand ---------- */

.p-pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.p-pastille-tot {
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--r-pilule);
  border: 1px solid var(--cendre);
  color: var(--creme);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition:
    transform var(--d-appui) var(--ease-out),
    background-color var(--duree-etat) ease,
    border-color var(--duree-etat) ease,
    color var(--duree-etat) ease;
}
.p-pastille-tot:active {
  transform: scale(0.97);
}
.p-pastille-tot[aria-pressed="true"] {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--nuit);
}
@media (hover: hover) and (pointer: fine) {
  .p-pastille-tot:hover { border-color: var(--orange); background: var(--voile); }
}

.p-calendrier {
  padding: 16px;
  border-radius: var(--r-l);
  border: 1px solid var(--filet);
  background: var(--plateau);
  box-shadow: var(--ombre-carte);
}

.p-mois {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -4px -6px 10px 4px;
}
.p-mois-nom {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.p-mois-fleches {
  display: flex;
  gap: 4px;
}

.p-grille-zone {
  overflow: hidden;
}
.p-grille {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
/* Sous 400 px, la colonne fait moins de 44 px : on gagne de la place sur le cadre et les écarts
   pour que les 7 colonnes tiennent sans rognure, dimanche compris. */
@media (max-width: 399.98px) {
  .p-calendrier { padding: 12px 10px; }
  .p-mois { margin: -2px -4px 8px 6px; }
  .p-grille { gap: 4px; }
}
.p-jour-nom {
  padding-bottom: 4px;
  color: var(--sable);
  font-size: var(--t-micro);
  font-weight: 600;
  text-align: center;
}

/* La case prend la largeur de sa colonne, jamais plus : carrée quand la colonne
   fait 44 px ou plus, 44 px de haut sinon (la cible reste de 44 px). */
.p-jour {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  min-height: 44px;
  border-radius: 12px;
  background: var(--coulisse);
  color: var(--creme);
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition:
    transform var(--d-appui) var(--ease-out),
    background-color var(--duree-etat) ease,
    color var(--duree-etat) ease;
}
button.p-jour:active:not(:disabled):not([aria-disabled="true"]) {
  transform: scale(0.94);
}
@media (hover: hover) and (pointer: fine) {
  button.p-jour.libre:hover,
  button.p-jour.peu:hover { background: var(--voile-dense); }
}
.p-jour.peu::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--orange);
}
.p-jour.complet {
  background: transparent;
  color: var(--sable);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  cursor: help;
}
.p-jour.hors {
  background: transparent;
  color: var(--cendre);
  font-weight: 400;
  cursor: default;
}
.p-jour.choisi {
  background: var(--orange);
  color: var(--nuit);
}
.p-jour.choisi::after {
  background: var(--nuit);
}

.p-squelette {
  background: var(--coulisse);
  color: transparent;
  animation: p-pulsation 1200ms ease-in-out infinite alternate;
}
@keyframes p-pulsation {
  from { opacity: 1; }
  to { opacity: 0.45; }
}

.p-heures-bloc {
  display: grid;
  gap: 12px;
}
.p-heures-titre {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.p-heures-titre + .p-aide-texte {
  margin-top: -6px;
}
/* « Voir toutes les heures » : cible de 44 px sans écarter les lignes du texte. */
.p-heures-bloc .p-lien {
  padding-block: 12px;
  margin-block: -12px;
}
.p-heures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.p-heure {
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 8px 14px;
  border-radius: var(--r-m);
  border: 1px solid var(--cendre);
  background: var(--coulisse);
  color: var(--creme);
  text-align: left;
  transition:
    transform var(--d-appui) var(--ease-out),
    background-color var(--duree-etat) ease,
    border-color var(--duree-etat) ease,
    color var(--duree-etat) ease;
}
.p-heure:active:not(:disabled) {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .p-heure:hover:not(:disabled) { border-color: var(--orange); }
}
.p-heure-ligne {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.p-heure-ligne strong {
  font-size: 1.0625rem;
  font-weight: 700;
}
.p-heure-fin,
.p-heure-local {
  color: var(--sable);
  font-size: var(--t-petit);
  font-variant-numeric: tabular-nums;
}
.p-heure-raison {
  color: var(--sable);
  font-size: var(--t-micro);
  font-weight: 600;
}
.p-heure:disabled {
  border-color: transparent;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--filet);
  color: var(--sable);
  cursor: default;
}
.p-heure:disabled .p-heure-ligne strong {
  font-weight: 500;
}
.p-heure.choisi {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--nuit);
}
.p-heure.choisi .p-heure-fin,
.p-heure.choisi .p-heure-local {
  color: var(--nuit);
}
.p-heure.p-squelette {
  border-color: transparent;
}

/* ---------- Question 3 : Formule ---------- */

.p-formules {
  display: grid;
  gap: 28px;
}
.p-formules-groupe {
  display: grid;
  gap: 12px;
}
.p-formules[aria-busy="true"] button.p-formule {
  cursor: progress;
}

.p-formule {
  position: relative;
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 18px;
  border-radius: var(--r-m);
  border: 1px solid var(--filet-fort);
  background: var(--plateau);
  box-shadow: var(--ombre-carte);
  color: var(--creme);
  text-align: left;
  transition:
    transform var(--d-appui) var(--ease-out),
    border-color var(--duree-etat) ease,
    background-color var(--duree-etat) ease,
    box-shadow var(--duree-etat) ease;
}
button.p-formule:active:not([aria-disabled="true"]) {
  transform: scale(0.98);
}
@media (hover: hover) and (pointer: fine) {
  button.p-formule:hover:not([aria-disabled="true"]) { border-color: var(--cendre); }
}
.p-formule.choisi {
  border-color: var(--orange);
  background: linear-gradient(var(--voile), var(--voile)), var(--plateau);
  box-shadow: inset 0 0 0 1px var(--orange);
}
.p-formule .p-coche-choix {
  top: auto;
  bottom: 16px;
  right: 16px;
}
.p-formule-ligne,
.p-formule-detail {
  padding-right: 32px;
}

.p-formule-haut {
  display: flex;
  align-items: center;
  gap: 12px;
}
.p-formule-nom {
  flex: 1;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.p-formule-prix {
  flex: none;
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.p-formule-ligne {
  color: var(--creme);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.p-formule-detail {
  color: var(--sable);
  font-size: var(--t-petit);
  line-height: 1.45;
}
.p-formule-mention {
  justify-self: start;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pilule);
  background: var(--voile);
  color: var(--lueur);
  font-size: var(--t-micro);
  font-weight: 600;
}

.p-formule-vedette {
  margin-top: 12px;
  border-color: rgb(240 104 0 / 0.55);
}
.p-formule-etiquette {
  position: absolute;
  top: -12px;
  left: 16px;
  padding: 4px 10px;
  border-radius: var(--r-pilule);
  background: var(--orange);
  color: var(--nuit);
  font-size: var(--t-micro);
  font-weight: 700;
  line-height: 1.2;
}
.p-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 12%;
}
.p-formule-vedette .p-formule-haut {
  margin-top: 4px;
}

.p-formule-indispo {
  padding-right: 18px;
  border-style: dashed;
  border-color: var(--filet-fort);
  background: transparent;
  box-shadow: none;
}
.p-formule-indispo .p-formule-nom,
.p-formule-indispo .p-formule-prix,
.p-formule-indispo .p-formule-ligne {
  color: var(--sable);
}
.p-formule-indispo .p-formule-etiquette {
  background: var(--coulisse);
  color: var(--sable);
}
.p-raison {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  margin-top: 8px;
  color: var(--creme);
  font-size: var(--t-petit);
  line-height: 1.45;
}
.p-raison .icone {
  color: var(--lueur);
}
.p-formule-indispo .bouton {
  justify-self: start;
  margin-top: 10px;
}
.p-verification {
  margin-top: -16px;
}

/* ---------- Carte du vendeur (aperçu) ---------- */

.p-apercu-carte {
  max-width: 420px;
}

.p-carte-vendeur {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: var(--r-l);
  border: 1px solid var(--filet-fort);
  background: var(--plateau);
  box-shadow: var(--ombre-carte);
  overflow-wrap: anywhere;
}
.p-cv-quand {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--sable);
  font-size: var(--t-petit);
  font-weight: 500;
}
.p-cv-quand strong {
  color: var(--creme);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.p-cv-nom {
  padding: 10px 14px;
  border-radius: var(--r-s);
  background: var(--voile);
  color: var(--creme);
  font-size: 1.3125rem;
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
/* Mêmes limites que la carte publiée : nom sur 2 lignes, activité sur 1, lieux sur 2.
   La limite porte sur le texte, pas sur le bloc : la ligne coupée ne déborde pas dans le remplissage. */
.p-cv-ligne,
.p-cv-infos li > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.p-cv-activite {
  justify-self: start;
  max-width: 100%;
  padding: 4px 12px;
  border-radius: var(--r-pilule);
  background: var(--coulisse);
  font-size: var(--t-petit);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-cv-produit {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.p-cv-infos {
  display: grid;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--filet);
  color: var(--sable);
  font-size: var(--t-petit);
}
.p-cv-infos li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.p-cv-infos li > span {
  min-width: 0;
}
/* Icône calée sur la première ligne (ligne de 21 px, icône de 18 px). */
.p-cv-infos .icone {
  width: 18px;
  height: 18px;
  margin-top: 1.5px;
  color: var(--lueur);
}
.p-vide {
  color: var(--sable);
  font-weight: 400;
}
.p-cv-reserve .p-cv-nom {
  background: var(--coulisse);
  color: var(--sable);
}

/* ---------- Question 4 : Toi ---------- */

.p-formulaire {
  display: grid;
  gap: 32px;
  margin-top: 8px;
}
.p-groupe {
  display: grid;
  gap: 18px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
/* Titre de groupe en surtitre : il domine les libellés de champ au lieu de s'effacer derrière eux. */
.p-groupe > legend {
  float: left;
  width: 100%;
  margin-bottom: 4px;
  padding: 0;
  color: var(--lueur);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.p-libelle-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.p-libelle-ligne label {
  color: var(--creme);
  font-size: var(--t-petit);
  font-weight: 600;
  line-height: 1.3;
}
.p-compteur {
  color: var(--sable);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
}
/* 36 px au-dessus du champ : son libellé reste visible sous l'en-tête. */
.p-formulaire input,
.p-formulaire textarea {
  scroll-margin-top: 36px;
  scroll-margin-bottom: 24px;
}
/* Champ en erreur qui a le focus : l'anneau reste rouge, l'erreur ne passe pas pour un simple focus.
   (Équivalent de .champ [aria-invalid="true"]:focus-visible, que base.css n'a pas encore.) */
.p-formulaire .champ input[aria-invalid="true"]:focus-visible,
.p-formulaire .champ textarea[aria-invalid="true"]:focus-visible {
  border-color: var(--alerte);
  box-shadow: 0 0 0 2px rgb(255 122 102 / 0.45);
}
.p-consentement .case input[aria-invalid="true"]:focus-visible {
  outline-color: var(--alerte);
}
.p-erreur {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  animation: p-fondu var(--duree-etat) ease both;
}
.p-erreur:empty {
  display: none;
}
.p-erreur .icone {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.p-consentement {
  display: grid;
  gap: 4px;
  margin-top: -12px;
}
.p-consentement .case {
  color: var(--creme);
}

/* ---------- Question 5 : Envoi ---------- */

.p-radios {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.p-radios > legend {
  float: left;
  width: 100%;
  margin-bottom: 4px;
  padding: 0;
}
.p-radio {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px;
  border-radius: var(--r-m);
  border: 1px solid var(--filet-fort);
  background: var(--plateau);
  cursor: pointer;
  transition:
    transform var(--d-appui) var(--ease-out),
    border-color var(--duree-etat) ease,
    background-color var(--duree-etat) ease,
    box-shadow var(--duree-etat) ease;
  -webkit-user-select: none;
  user-select: none;
}
.p-radio:active {
  transform: scale(0.98);
}
.p-radio input {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  border-radius: 50%;
  border: 1px solid var(--cendre);
  background: var(--nuit);
  cursor: pointer;
  transition: border-color var(--duree-etat) ease, box-shadow var(--duree-etat) ease;
}
.p-radio input:checked {
  border-color: var(--orange);
  box-shadow: inset 0 0 0 5px var(--nuit), inset 0 0 0 11px var(--orange);
}
.p-radio input:focus-visible {
  outline: 2px solid var(--lueur);
  outline-offset: 3px;
}
.p-radio:has(input:checked) {
  border-color: var(--orange);
  background: linear-gradient(var(--voile), var(--voile)), var(--plateau);
  box-shadow: inset 0 0 0 1px var(--orange);
}
.p-radio-texte {
  display: grid;
  gap: 2px;
}
.p-radio-texte strong {
  font-size: 1rem;
  font-weight: 650;
}
.p-radio-texte span {
  color: var(--sable);
  font-size: var(--t-petit);
  line-height: 1.45;
}
@media (hover: hover) and (pointer: fine) {
  .p-radio:hover { border-color: var(--cendre); }
}

.p-ensuite {
  display: grid;
  gap: 12px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--filet);
}
.p-ensuite ol {
  display: grid;
  gap: 12px;
  counter-reset: p-ensuite;
}
/* Étapes numérotées : rond Orange plein, comme les étapes de la vitrine et la frise de la confirmation. */
.p-ensuite li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.9375rem;
  line-height: 1.45;
  counter-increment: p-ensuite;
}
.p-ensuite li::before {
  content: counter(p-ensuite);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--nuit);
  font-size: var(--t-petit);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- Bouton principal en relief (procédé Duolingo) ---------- */

.p-action {
  display: block;
  width: 100%;
  padding-bottom: var(--relief);
  border-radius: var(--r-pilule);
  background: var(--braise);
  color: var(--nuit);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.p-action-face {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: var(--r-pilule);
  background: var(--orange);
  font-size: 1.0625rem;
  font-weight: 650;
  transition: transform 80ms var(--ease-out), background-color var(--d-survol) ease;
}
.p-action-texte {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.p-action:active:not(:disabled) .p-action-face {
  transform: translateY(var(--relief));
}
.p-action:disabled {
  cursor: progress;
}
.p-action:focus-visible {
  outline: 2px solid var(--lueur);
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .p-action:hover:not(:disabled) .p-action-face { background: var(--orange-survol); }
}
.p-rond {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgb(18 13 10 / 0.25);
  border-top-color: var(--nuit);
  animation: p-tourne 700ms linear infinite;
}
@keyframes p-tourne {
  to { transform: rotate(360deg); }
}

/* ---------- Barre récapitulative (mobile) et colonne « Ton Live » (bureau) ---------- */

.p-recap {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: grid;
  gap: 12px;
  padding: 14px max(var(--marge), env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(var(--marge), env(safe-area-inset-left, 0px));
  border-radius: var(--r-l) var(--r-l) 0 0;
  border-top: 1px solid var(--filet-fort);
  background: var(--plateau);
  box-shadow: 0 -12px 32px -8px rgb(0 0 0 / 0.6);
  transform: translateY(calc(100% + 24px));
  visibility: hidden;
  transition:
    transform 200ms var(--ease-out),
    visibility 0s linear 200ms;
  view-transition-name: barre;
}
.p-recap[data-visible] {
  transform: none;
  visibility: visible;
  transition:
    transform var(--duree-entree) var(--ease-out),
    visibility 0s;
}
@media (max-width: 1023.98px) and (pointer: coarse) {
  .p-recap[data-visible][data-clavier] {
    transform: translateY(calc(100% + 24px));
    visibility: hidden;
    transition:
      transform 200ms var(--ease-out),
      visibility 0s linear 200ms;
  }
}

.p-recap > * {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}
.p-recap-titre,
.p-recap-vide,
.p-recap-apercu {
  display: none;
}
.p-recap-alerte:empty {
  display: none;
}
.p-recap-lent {
  color: var(--attente);
  font-size: var(--t-petit);
  animation: p-fondu var(--duree-etat) ease both;
}
.p-recap-rangee {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
}
.p-recap-lignes {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.p-recap-l1 {
  font-size: 0.9375rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.p-recap-l2 {
  color: var(--sable);
  font-size: var(--t-petit);
  line-height: 1.3;
}
.p-recap-l1,
.p-recap-l2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.p-recap-prix {
  flex: none;
  text-align: right;
}
.p-prix {
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
  font-size: 1.125rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  white-space: nowrap;
}
.p-chiffre {
  display: inline-block;
  white-space: pre;
}
.p-recap-indicatif {
  color: var(--sable);
  font-size: var(--t-micro);
}

/* Questions 4 et 5 : le bouton porte l'action, la date et la formule sont déjà dans les lignes
   au-dessus. La barre se réduit à une rangée « Tarif indicatif | prix », puis au seul bouton
   sur un écran bas, pour laisser la hauteur au formulaire. */
@media (max-width: 1023.98px) {
  .p-recap-action {
    gap: 10px;
    padding-top: 12px;
  }
  .p-recap-action .p-recap-lignes {
    display: none;
  }
  .p-recap-action .p-recap-rangee {
    min-height: 0;
  }
  .p-recap-action .p-recap-prix {
    display: flex;
    flex: 1;
    flex-direction: row-reverse;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
  .p-recap-action .p-recap-indicatif {
    font-size: var(--t-petit);
  }
}
@media (max-width: 1023.98px) and (max-height: 700px) {
  .p-recap-action .p-recap-rangee {
    display: none;
  }
}

@media (min-width: 1024px) {
  .p-corps {
    padding-bottom: 64px;
  }
  .p-recap {
    position: sticky;
    top: 88px;
    margin-top: 48px;
    gap: 16px;
    padding: 24px;
    border-radius: var(--r-xl);
    border: 1px solid var(--filet-fort);
    box-shadow: var(--ombre-carte);
    transform: none;
    visibility: visible;
    transition: none;
  }
  .p-recap > * {
    max-width: none;
    margin: 0;
  }
  .p-recap-titre {
    display: block;
    font-size: var(--t-sous-titre);
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .p-recap-sans .p-recap-vide {
    display: block;
    color: var(--sable);
    font-size: var(--t-petit);
  }
  .p-recap-sans .p-recap-rangee {
    display: none;
  }
  .p-recap-apercu {
    display: grid;
    gap: 10px;
  }
  .p-recap-apercu:empty {
    display: none;
  }
  .p-recap-rangee {
    align-items: flex-start;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--filet);
  }
  .p-recap-l1,
  .p-recap-l2 {
    white-space: normal;
  }
}

/* ---------- Transitions entre questions (View Transitions) ---------- */

::view-transition-old(root) {
  animation: 120ms var(--courbe-sortie) both p-vt-sortie;
}
::view-transition-new(root) {
  animation: 160ms var(--courbe-sortie) both p-vt-entree;
}
::view-transition-group(entete),
::view-transition-group(barre),
::view-transition-old(entete),
::view-transition-new(entete),
::view-transition-old(barre),
::view-transition-new(barre) {
  animation-duration: 150ms;
}
::view-transition-new(etape-ouverte) {
  animation: 220ms var(--courbe-sortie) both p-entree-bas;
}
html[data-sens="arriere"]::view-transition-new(etape-ouverte) {
  animation-name: p-entree-haut;
}
@keyframes p-vt-sortie {
  to { opacity: 0; }
}
@keyframes p-vt-entree {
  from { opacity: 0; }
}
@keyframes p-entree-bas {
  from { opacity: 0; transform: translateY(12px); }
}
@keyframes p-entree-haut {
  from { opacity: 0; transform: translateY(-12px); }
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  .p-squelette { animation: none; }
  .p-segment::after { transition: none; }
  .p-choix:active,
  .p-faite:active,
  .p-radio:active,
  .p-pastille-tot:active,
  .p-heure:active:not(:disabled),
  button.p-formule:active:not([aria-disabled="true"]),
  button.p-jour:active:not(:disabled):not([aria-disabled="true"]),
  .p-bouton-icone:active:not(:disabled) { transform: none; }
  .p-coche-choix { transform: none; }
  .p-details-plus { transition: none; }
  .p-recap,
  .p-recap[data-visible] {
    transition: opacity 150ms ease, visibility 0s;
  }
  .p-recap { transform: none; opacity: 0; }
  .p-recap[data-visible] { opacity: 1; }
  .p-rond { animation-duration: 1400ms; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  .p-recap { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1023.98px) and (pointer: coarse) {
  .p-recap[data-visible][data-clavier] { transform: none; opacity: 0; }
}

/* ---------- Page de réservation (/reservation) ---------- */

.p-action-lien {
  text-decoration: none;
}

.p-conf {
  display: grid;
  gap: 32px;
  max-width: calc(640px + 2 * var(--marge));
  margin: 0 auto;
  padding: 32px max(var(--marge), env(safe-area-inset-right, 0px)) 48px max(var(--marge), env(safe-area-inset-left, 0px));
}
.p-conf-gauche,
.p-conf-droite {
  display: grid;
  gap: 28px;
  align-content: start;
  min-width: 0;
}
@media (min-width: 1024px) {
  .p-conf {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: 64px;
    max-width: calc(1048px + 2 * var(--marge));
    padding-top: 56px;
  }
}

.p-conf-squelette {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px 16px;
}
.p-sq-tuile {
  grid-row: span 3;
  height: 72px;
  border-radius: var(--r-m);
}
.p-sq-ligne {
  height: 16px;
  border-radius: var(--r-pilule);
}
.p-sq-courte {
  width: 50%;
}

.p-conf-tete {
  display: grid;
  gap: 10px;
}
.p-conf-nouvelle {
  justify-items: center;
  text-align: center;
}
.p-conf-h1 {
  font-size: var(--t-titre);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.p-conf-business {
  color: var(--sable);
  font-size: var(--t-sous-titre);
  font-weight: 600;
}
.p-celebration-zone {
  position: relative;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}
.p-celebration {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--nuit);
  box-shadow: 0 0 0 8px var(--voile);
}
.p-celebration .icone {
  width: 32px;
  height: 32px;
  stroke-width: 3;
}
.p-confetti {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
}

.p-statut-bloc {
  display: grid;
  gap: 12px;
  justify-items: start;
}
.p-conf-nouvelle + .p-statut-bloc {
  justify-items: center;
  text-align: center;
}
.p-statut {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 14px 0 12px;
  border-radius: var(--r-pilule);
  border: 1px solid currentColor;
  font-size: var(--t-petit);
  font-weight: 600;
  transition: color 300ms ease, background-color 300ms ease;
}
.p-statut::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.p-statut-en_attente { color: var(--attente); background: rgb(245 196 81 / 0.1); }
.p-statut-confirmee { color: var(--succes); background: rgb(126 214 154 / 0.1); }
.p-statut-annulee,
.p-statut-passe { color: var(--sable); background: var(--coulisse); }

.p-evenement {
  display: grid;
  gap: 18px;
  padding: 20px;
  border-radius: var(--r-l);
  border: 1px solid var(--filet-fort);
  background: var(--plateau);
  box-shadow: var(--ombre-carte);
}
.p-evenement-tete {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: start;
}
.p-tuile-date {
  display: grid;
  justify-items: center;
  width: 64px;
  height: 72px;
  padding: 7px 0 6px;
  overflow: hidden;
  border-radius: var(--r-m);
  border: 1px solid var(--filet-fort);
  background: var(--coulisse);
  line-height: 1;
}
.p-tuile-mois {
  color: var(--lueur);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.p-tuile-jour {
  font-size: 1.75rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.p-tuile-semaine {
  color: var(--sable);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.p-evenement-quand {
  display: grid;
  gap: 4px;
  justify-items: start;
}
.p-evenement-date {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
}
.p-rebours {
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: var(--r-pilule);
  background: var(--voile);
  color: var(--lueur);
  font-size: var(--t-micro);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.p-evenement-lignes {
  display: grid;
  gap: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--filet);
}
/* Icônes calées sur la première ligne : un lieu sur deux lignes ne fait plus flotter son icône. */
.p-evenement-lignes li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding-block: 11px;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.p-evenement-lignes .icone {
  margin-top: 1px;
  color: var(--sable);
}
.p-evenement-lignes li > span {
  flex: 1;
  min-width: 0;
}
/* Cible de 44 px sans grandir la ligne. */
.p-copier {
  min-height: 44px;
  margin-block: -11px;
  padding: 0 4px;
  font-size: var(--t-petit);
}

.p-bouton-agenda {
  justify-content: flex-start;
  min-height: 56px;
  padding: 0 20px;
  border-radius: var(--r-l);
}
.p-bouton-agenda-fleche {
  margin-left: auto;
}

.p-conf-titre {
  margin-bottom: 14px;
  font-size: var(--t-sous-titre);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.p-annonce {
  display: grid;
  gap: 14px;
}
.p-annonce .p-conf-titre,
.p-ta-carte .p-conf-titre {
  margin-bottom: 0;
}
.p-bulle {
  padding: 14px 16px;
  border-radius: var(--r-l) var(--r-l) var(--r-l) 6px;
  background: var(--voile);
  font-size: 0.9375rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.p-annonce-autre {
  text-align: center;
}
.p-annonce-autre .p-lien {
  min-height: 44px;
  padding: 0 8px;
}

.p-frise {
  display: grid;
}
.p-frise-etape {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  padding-bottom: 22px;
}
.p-frise-etape:last-child {
  padding-bottom: 0;
}
.p-frise-etape:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 32px;
  bottom: 4px;
  left: 13px;
  border-left: 2px dotted var(--cendre);
}
.p-frise-point {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--cendre);
  color: var(--nuit);
}
.p-frise-point .icone {
  width: 16px;
  height: 16px;
  stroke-width: 3;
}
.faite > .p-frise-point {
  border-color: var(--orange);
  background: var(--orange);
}
.encours > .p-frise-point {
  border-color: var(--attente);
  box-shadow: inset 0 0 0 4px var(--nuit), inset 0 0 0 10px var(--attente);
}
.p-frise-titre {
  padding-top: 3px;
  font-weight: 600;
}
.avenir .p-frise-titre {
  color: var(--sable);
}

.p-ta-carte {
  display: grid;
  gap: 12px;
}

.p-conf-pied {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding-top: 24px;
  border-top: 1px solid var(--filet);
  color: var(--sable);
  font-size: var(--t-petit);
}
.p-conf-pied .lien,
.p-ta-carte .lien,
.p-simple .lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* Même largeur que « Partager sur WhatsApp » : plus de bouton isolé en largeur automatique. */
.p-conf-pied .bouton {
  width: 100%;
}

.p-conf-erreur {
  display: grid;
  gap: 18px;
  justify-items: start;
  max-width: 36rem;
}

/* Feuille d'agenda : depuis le bas sur mobile, menu sous le bouton sur bureau */
.p-feuille {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 10px var(--marge) calc(20px + env(safe-area-inset-bottom, 0px));
  border: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--plateau);
  color: var(--creme);
  box-shadow: var(--ombre-flottante);
}
.p-feuille[open] {
  display: grid;
  gap: 14px;
}
.p-feuille::backdrop {
  background: rgb(0 0 0 / 0.6);
  animation: p-fondu 300ms ease both;
}
.p-feuille-poignee {
  justify-self: center;
  width: 40px;
  height: 4px;
  border-radius: var(--r-pilule);
  background: var(--cendre);
}
.p-feuille-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.p-feuille-tete h2 {
  font-size: 1.125rem;
  font-weight: 700;
}
.p-feuille-liste {
  display: grid;
  overflow: hidden;
  border-radius: var(--r-m);
  border: 1px solid var(--filet-fort);
}
.p-feuille-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 16px;
  background: var(--coulisse);
  color: var(--creme);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--d-survol) ease;
}
.p-feuille-liste > * + * {
  border-top: 1px solid var(--filet);
}
.p-feuille-ligne:active {
  background: var(--voile);
}
@media (hover: hover) and (pointer: fine) {
  .p-feuille-ligne:hover { background: var(--voile); }
}
.p-feuille-icone {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-s);
  background: var(--nuit);
  color: var(--lueur);
}
.p-feuille-detail {
  margin-left: auto;
  color: var(--sable);
  font-size: var(--t-petit);
  font-weight: 400;
}
.p-feuille-integre {
  padding: 14px 16px;
  background: var(--coulisse);
  color: var(--creme);
  font-size: var(--t-petit);
  line-height: 1.45;
}
@media (min-width: 1024px) {
  .p-feuille {
    inset: auto;
    padding: 12px;
    border: 1px solid var(--filet-fort);
    border-radius: var(--r-l);
    transform-origin: top center;
  }
  .p-feuille::backdrop {
    background: transparent;
  }
  .p-feuille-poignee {
    display: none;
  }
  .p-feuille-tete {
    padding-left: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-feuille::backdrop { animation-duration: 150ms; }
  .p-statut { transition: none; }
}

/* ---------- Pages simples : désinscription ---------- */

.p-simple {
  display: grid;
  gap: 20px;
  justify-items: start;
  max-width: calc(560px + 2 * var(--marge));
  margin: 0 auto;
  padding: 56px max(var(--marge), env(safe-area-inset-right, 0px)) 56px max(var(--marge), env(safe-area-inset-left, 0px));
}