/* Piano Event — réservation plein écran sur téléphone */
@media (max-width: 760px) {
  /* ---------- Fiche du piano ---------- */
  html.tn-pret [data-produit] { display: flex; flex-direction: column; }
  html.tn-pret .produit-grille { order: 1; display: block; width: 100%; padding: 0; }
  html.tn-pret .produit-entete { order: 2; padding: 22px 0 0; }
  html.tn-pret .produit-entete h1 { font-size: 40px; }
  html.tn-pret .produit-entete .lead { font-size: 17px; margin-top: 6px; }
  html.tn-pret .fiche-app { order: 3; }
  html.tn-pret .produit-grille .config, html.tn-pret [data-produit] > .bloc-feutre, html.tn-pret .barre { display: none !important; }
  html.tn-pret .galerie { margin: 0; }
  html.tn-pret .galerie-principale img { border-radius: 0; aspect-ratio: 4 / 3.4; object-fit: cover; }
  html.tn-pret .galerie-vignettes { display: none; }
  .fiche-app { width: calc(100% - 40px); margin: 20px auto 0; padding-bottom: 130px; }
  .fiche-onglets { width: 100%; }
  .fiche-intro { margin: 18px 0 0; color: var(--graphite); font-size: 16px; line-height: 1.6; }
  .fiche-ideal { margin: 14px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--feutre); font-size: 15px; }
  .fiche-ideal span { display: block; font-size: 12px; color: var(--laiton); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; }
  .fiche-dims { margin-top: 18px; }
  .fiche-dims li { background: var(--feutre); }
  .fiche-inclus { list-style: none; padding: 0; margin: 14px 0 0; }
  .fiche-inclus li { display: flex; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid #ececf0; font-size: 15.5px; }
  .fiche-inclus svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--laiton); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .fiche-note { color: var(--graphite); font-size: 14px; margin: 12px 0 0; }
  .fiche-barre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid rgba(0,0,0,.08); }
  .fiche-barre > span { display: flex; flex-direction: column; line-height: 1.15; }
  .fiche-barre small { font-size: 12px; color: var(--graphite); }
  .fiche-barre b { font: 400 26px/1.1 var(--display); }
  .fiche-barre em { font-style: normal; font-size: 11.5px; color: var(--graphite); }
  .fiche-barre .btn-laque { height: 54px; }

  /* ---------- Parcours ---------- */
  html.tn-ouvert, html.tn-ouvert body { overflow: hidden; }
  .tn { position: fixed; inset: 0; z-index: 300; background: var(--blanc); transform: translateY(100%); transition: transform .42s cubic-bezier(.2,.8,.2,1); overscroll-behavior: contain; }
  .tn.visible { transform: none; }
  .tn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .tn-tete { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 14px;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px; background: rgba(255,255,255,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: background .3s; }
  .tn[data-etape="2"] .tn-tete { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .tn-rond { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--feutre); display: grid; place-items: center; cursor: pointer; color: var(--encre); }
  .tn[data-etape="2"] .tn-rond { background: var(--blanc); box-shadow: 0 2px 10px rgba(0,0,0,.18); }
  .tn-rond-d svg { transform: rotate(180deg); }
  .tn-prog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .tn-prog i { height: 4px; border-radius: 2px; background: #e3e3e8; transition: background .4s; }
  .tn-prog i.fait { background: var(--laiton); }
  .tn[data-etape="2"] .tn-prog i { background: rgba(255,255,255,.75); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
  .tn[data-etape="2"] .tn-prog i.fait { background: var(--laiton); }
  .tn-ecrans { position: absolute; inset: 0; overflow: hidden; overflow: clip; }
  .tn-ecran { position: absolute; inset: 0; transform: translateX(100%); transition: transform .44s cubic-bezier(.2,.8,.2,1), opacity .44s; background: var(--blanc); }
  .tn-ecran.actif { transform: none; }
  .tn-ecran.avant { transform: translateX(-28%); opacity: 0; }
  .tn-defile { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(74px + env(safe-area-inset-top)) 20px calc(130px + env(safe-area-inset-bottom)); }
  .tn-sur { margin: 0; font-size: 13px; color: var(--graphite); }
  .tn-titre { margin: 4px 0 0; font: 300 32px/1.08 var(--display); letter-spacing: -.01em; }
  .tn-mini { margin: 26px 0 10px; font: 600 12px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); }
  .tn-aide { margin: 12px 0 0; font-size: 13.5px; color: var(--graphite); }
  .tn-info { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--laiton-fond, #f4efe6); color: #6b5024; font-size: 14px; }
  .tn-lien { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: #8a6a3a; font: 600 14px var(--ui); cursor: pointer; padding: 6px 0; }
  .tn-lien svg { width: 17px; height: 17px; }

  /* Jours */
  .tn-mois { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; }
  .tn-mois b { font-size: 17px; }
  .tn-jours { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 20px; margin: 10px -20px 0; padding: 4px 20px 8px; scrollbar-width: none; }
  .tn-jours::-webkit-scrollbar { display: none; }
  .tn-jour { flex: none; width: 58px; height: 82px; border: 0; border-radius: 16px; background: var(--feutre); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; scroll-snap-align: start; cursor: pointer; color: var(--encre); position: relative; transition: background .2s, transform .15s; }
  .tn-jour:active { transform: scale(.94); }
  .tn-jour small { font-size: 12px; color: var(--graphite); text-transform: capitalize; }
  .tn-jour b { font: 400 24px/1 var(--display); }
  .tn-jour em { font-style: normal; font-size: 10.5px; color: #8a6a3a; font-weight: 600; min-height: 13px; }
  .tn-jour.dim::after { content: ""; position: absolute; top: 8px; right: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--laiton); }
  .tn-jour.choisi { background: var(--laque); color: var(--blanc); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
  .tn-jour.choisi small { color: rgba(255,255,255,.65); }
  .tn-jour.choisi em { color: var(--laiton-clair); }
  .tn-jour.complet { opacity: .35; text-decoration: line-through; cursor: default; }

  /* Moment */
  .tn-moment { width: 100%; }
  .tn-moment button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 6px; font-size: 15px; }
  .tn-moment small { font-size: 12px; color: var(--graphite); font-weight: 500; }

  /* Heures */
  .tn-heures { display: flex; gap: 8px; overflow-x: auto; margin: 0 -20px; padding: 4px 20px 8px; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: 20px; }
  .tn-heures::-webkit-scrollbar { display: none; }
  .tn-heure { flex: none; width: 92px; border: 1.5px solid #e3e3e8; border-radius: 18px; background: var(--blanc); padding: 14px 12px 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; cursor: pointer; color: var(--encre); scroll-snap-align: start; transition: border-color .2s, background .2s, transform .15s; }
  .tn-heure:active { transform: scale(.95); }
  .tn-heure b { font: 400 28px/1 var(--display); }
  .tn-heure small { font-size: 12.5px; color: var(--graphite); }
  .tn-heure em { margin-top: 10px; font-style: normal; font-size: 11.5px; font-weight: 600; color: #8a6a3a; }
  .tn-heure.choisi { background: var(--laque); border-color: var(--laque); color: var(--blanc); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
  .tn-heure.choisi small { color: rgba(255,255,255,.6); }
  .tn-heure.choisi em { color: var(--laiton-clair); }

  /* Bas de l'écran : prix et bouton */
  .tn-bas { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.95); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid rgba(0,0,0,.07); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
  .tn[data-etape="2"] > .tn-bas { transform: translateY(110%); }
  .tn-prix { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
  .tn-prix b { font: 400 28px/1.05 var(--display); white-space: nowrap; }
  .tn-prix b.bouge { animation: tn-bouge .45s cubic-bezier(.2,.7,.2,1); }
  @keyframes tn-bouge { from { opacity: .2; transform: translateY(6px); } }
  .tn-prix small { font-size: 12px; color: var(--graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tn-bas .btn-laque { height: 54px; flex: none; }
  .tn-bas .btn-laque[aria-disabled="true"] { opacity: .35; }
  .tn-bas .btn-laque.payer { padding-left: 22px; }
  .secoue { animation: tn-secoue .4s; }
  @keyframes tn-secoue { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

  /* Écran 2 : carte plein écran et feuille du bas */
  .tn-carte { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, #e8ece4, #dfe4da); opacity: 0; transition: opacity .4s; }
  .tn[data-etape="2"] .tn-carte { opacity: 1; z-index: 1; }
  .tn[data-etape="2"] .tn-ecrans { z-index: 2; pointer-events: none; }
  .tn[data-etape="2"] .tn-ecran-carte { pointer-events: none; background: transparent; }
  .tn-ecran-carte { background: transparent; }
  .tn-feuille { pointer-events: auto; position: absolute; left: 0; right: 0; bottom: 0; max-height: 72%; overflow-y: auto; background: var(--blanc); border-radius: 26px 26px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.18);
    padding: 8px 20px calc(14px + env(safe-area-inset-bottom)); transition: height .56s cubic-bezier(.32,.72,0,1), box-shadow .4s; }
  .tn.saisie .tn-feuille { max-height: none; box-shadow: 0 -20px 60px rgba(0,0,0,.28); }
  .tn-calque { transition: opacity .25s; }
  .tn.saisie .tn-calque { opacity: 0; pointer-events: none; }
  .tn-carte .leaflet-container, .tn-carte > * { transition: transform .6s cubic-bezier(.32,.72,0,1), filter .6s; transform-origin: 50% 30%; }
  .tn.saisie .tn-carte > * { transform: scale(1.06); filter: brightness(.72) saturate(.9); }
  .tn-feuille .tn-titre { transform-origin: left center; transition: transform .45s cubic-bezier(.32,.72,0,1); }
  .tn.saisie .tn-feuille .tn-titre { transform: scale(.86); }
  .tn.saisie .tn-feuille .tn-sur { opacity: .6; }
  .tn.saisie .tn-champ { border-color: var(--laiton); box-shadow: 0 0 0 4px rgba(176,141,87,.18); }
  .tn-sugg li { animation: tn-entre .38s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes tn-entre { from { opacity: 0; transform: translateY(10px); } }
  .tn.adresse-posee .tn-adr { animation: tn-pop .5s cubic-bezier(.3,1.4,.5,1) both; }
  .tn.adresse-posee .tn-adr-ok svg path { stroke-dasharray: 24; animation: tn-trace .5s .15s ease-out both; }
  @keyframes tn-trace { from { stroke-dashoffset: 24; } }
  .tn.adresse-posee [data-acces] button { animation: tn-entre .42s cubic-bezier(.2,.8,.2,1) both; }
  .tn.adresse-posee [data-acces] button:nth-child(2) { animation-delay: .06s; }
  .tn.adresse-posee [data-acces] button:nth-child(3) { animation-delay: .12s; }
  @keyframes tn-pop { from { opacity: 0; transform: scale(.94); } }
  /* Chaque écran se pose : titre puis contenu, en léger décalé */
  .tn-ecran.entre .tn-defile > * { animation: tn-entre .5s cubic-bezier(.2,.8,.2,1) both; }
  .tn-ecran.entre .tn-defile > *:nth-child(2) { animation-delay: .04s; }
  .tn-ecran.entre .tn-defile > *:nth-child(3) { animation-delay: .08s; }
  .tn-ecran.entre .tn-defile > *:nth-child(4) { animation-delay: .12s; }
  .tn-ecran.entre .tn-defile > *:nth-child(5) { animation-delay: .16s; }
  .tn-ecran.entre .tn-defile > *:nth-child(n+6) { animation-delay: .2s; }
  .tn-ecran-carte.entre .tn-feuille { animation: tn-monte-f .6s cubic-bezier(.32,.72,0,1) both; }
  @keyframes tn-monte-f { from { transform: translateY(60%); } }
  /* Appuis : tout ce qui se touche s'enfonce légèrement */
  .tn button, .fiche-barre .btn-laque { -webkit-tap-highlight-color: transparent; }
  .tn button:active:not([aria-disabled="true"]) { transform: scale(.96); }
  .tn .btn-laque { transition: transform .12s, opacity .3s, box-shadow .3s; }
  .tn .btn-laque.allume { animation: tn-allume .9s ease-out; }
  @keyframes tn-allume { 0% { box-shadow: inset 0 0 0 1px rgba(217,189,140,.6), 0 0 0 0 rgba(176,141,87,.55); } 100% { box-shadow: inset 0 0 0 1px rgba(217,189,140,.6), 0 0 0 16px rgba(176,141,87,0); } }
  .tn-option[aria-pressed="true"] .tn-opt-ok { animation: tn-pop .45s cubic-bezier(.3,1.4,.5,1) both; }
  .tn-jour.choisi, .tn-heure.choisi { animation: tn-choix .35s cubic-bezier(.3,1.4,.5,1); }
  @keyframes tn-choix { from { transform: scale(.9); } }
  .tn-poignee { display: block; width: 40px; height: 5px; border-radius: 3px; background: #d2d2d7; margin: 0 auto 12px; }
  .tn-feuille .tn-titre { font-size: 28px; }
  .tn-champ { display: flex; align-items: center; gap: 10px; margin-top: 16px; height: 56px; padding: 0 16px; border-radius: 16px; border: 1.5px solid #d2d2d7; background: var(--blanc); transition: border-color .2s, box-shadow .2s; }
  .tn-champ:focus-within { border-color: var(--laiton); box-shadow: 0 0 0 4px rgba(176,141,87,.18); }
  .tn-champ svg { color: var(--graphite); }
  .tn-champ input { flex: 1; border: 0; outline: 0; background: none; font: 400 17px var(--ui); color: var(--encre); min-width: 0; }
  .tn-sugg { list-style: none; margin: 8px 0 0; padding: 0; }
  .tn-sugg button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 2px; border: 0; border-bottom: 1px solid #ececf0; background: none; text-align: left; cursor: pointer; color: var(--encre); }
  .tn-sugg svg { color: #8a6a3a; }
  .tn-sugg span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
  .tn-sugg b { font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tn-sugg small { font-size: 13px; color: var(--graphite); }
  .tn-sugg em { font-style: normal; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
  .tn-sugg em.incluse { color: #1f7a4d; background: #e3f3ea; }
  .tn-sugg em.plus { color: #8a6a3a; background: var(--laiton-fond, #f4efe6); }
  .tn-sugg em.devis { color: var(--graphite); background: var(--feutre); }
  .tn-adr { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--feutre); }
  .tn-adr-ok { width: 28px; height: 28px; border-radius: 50%; background: #1f7a4d; color: #fff; display: grid; place-items: center; flex: none; }
  .tn-adr-ok svg { width: 16px; height: 16px; stroke-width: 2.6; }
  .tn-adr > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
  .tn-adr b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tn-adr small { font-size: 13px; color: #1f7a4d; }
  .tn-feuille .tn-mini { margin-top: 18px; }
  .tn-tuiles3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .tn-tuiles3 button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 4px 12px; border-radius: 16px; border: 1.5px solid #e3e3e8; background: var(--blanc); cursor: pointer; color: var(--encre); transition: border-color .2s, box-shadow .2s, transform .15s; }
  .tn-tuiles3 button:active { transform: scale(.96); }
  .tn-tuiles3 svg { width: 24px; height: 24px; color: #8a6a3a; margin-bottom: 4px; }
  .tn-tuiles3 b { font-size: 14.5px; }
  .tn-tuiles3 small { font-size: 12px; color: var(--graphite); }
  .tn-tuiles3 button[aria-pressed="true"] { border-color: var(--encre); box-shadow: 0 6px 16px rgba(0,0,0,.1); }
  .tn-etages { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 6px; border-radius: 16px; background: var(--feutre); }
  .tn-etages button { width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--blanc); font-size: 22px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
  .tn-etages b { font-size: 16px; }
  .tn-hors { margin-top: 16px; padding: 16px; border-radius: 16px; background: var(--feutre); }
  .tn-hors p { margin: 4px 0 12px; color: var(--graphite); font-size: 14.5px; }
  .tn-bas-int { position: static; margin: 18px -20px 0; padding: 14px 20px 4px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid #ececf0; }
  .tn.saisie .tn-bas-int { display: none; }
  .tn-calque { position: absolute; z-index: 6; top: calc(62px + env(safe-area-inset-top)); right: 14px; display: flex; padding: 3px; border: 0; border-radius: 12px; background: var(--blanc); box-shadow: 0 2px 10px rgba(0,0,0,.18); cursor: pointer; }
  .tn-calque span { padding: 7px 11px; border-radius: 9px; font: 500 13px var(--ui); color: var(--graphite); }
  .tn-calque span.on { background: var(--laque); color: var(--blanc); font-weight: 600; }
  .tn-plan { filter: saturate(.6) brightness(1.05) contrast(.96); }
  .tn-epingle { position: absolute; left: -20px; top: -46px; width: 40px; height: 46px; }
  .tn-epingle i { position: absolute; inset: 0 0 6px 0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--laque); border: 3px solid var(--blanc); box-shadow: 0 6px 16px rgba(0,0,0,.4); display: grid; place-items: center; animation: tn-pose .6s cubic-bezier(.3,1.4,.5,1) both; }
  .tn-epingle svg { transform: rotate(45deg); width: 17px; height: 17px; color: var(--laiton-clair); }
  .tn-epingle::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 26px; height: 9px; margin-left: -13px; border-radius: 50%; background: rgba(176,141,87,.45); box-shadow: 0 0 0 8px rgba(176,141,87,.18); }
  @keyframes tn-pose { from { transform: rotate(-45deg) translate(30px, -30px); opacity: 0; } }
  .tn .leaflet-control-attribution { font-size: 9px; background: rgba(255,255,255,.7); }

  /* Écran 3 : récapitulatif */
  .tn-piano { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 12px; border-radius: 18px; background: var(--feutre); }
  .tn-piano img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
  .tn-piano span { display: flex; flex-direction: column; }
  .tn-piano b { font: 400 22px/1.1 var(--display); }
  .tn-piano small { font-size: 13px; color: var(--graphite); }
  .tn-ligne { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 2px; border: 0; border-bottom: 1px solid #ececf0; background: none; text-align: left; cursor: pointer; color: var(--encre); }
  .tn-ligne span { flex: 1; display: flex; flex-direction: column; }
  .tn-ligne small { font-size: 12.5px; color: var(--graphite); }
  .tn-ligne b { font-size: 16px; font-weight: 500; }
  .tn-ligne svg { color: #8a6a3a; width: 18px; height: 18px; }
  .tn-profil { width: 100%; margin-top: 18px; }
  .tn-profil button { flex: 1; }
  .tn-option { width: 100%; display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 10px 12px 10px 10px; border-radius: 18px; border: 1.5px solid #e3e3e8; background: var(--blanc); text-align: left; cursor: pointer; color: var(--encre); transition: border-color .2s, background .2s; }
  .tn-option img { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; }
  .tn-option > span { flex: 1; display: flex; flex-direction: column; }
  .tn-option b { font-size: 16px; }
  .tn-option small { font-size: 13px; color: var(--graphite); }
  .tn-option em { font-style: normal; }
  .tn-opt-plus { display: inline-block; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--laiton-clair); color: #7a5f33; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
  .tn-opt-ok { display: none; width: 32px; height: 32px; border-radius: 50%; background: var(--laiton); color: var(--blanc); place-items: center; }
  .tn-opt-ok svg { width: 17px; height: 17px; stroke-width: 2.6; }
  .tn-option[aria-pressed="true"] { border-color: var(--laiton); background: #fcfaf6; }
  .tn-option[aria-pressed="true"] .tn-opt-plus { display: none; }
  .tn-option[aria-pressed="true"] .tn-opt-ok { display: grid; }
  .tn-texte { display: flex; flex-direction: column; gap: 6px; margin: -2px 0 12px; font-size: 13px; color: var(--graphite); }
  .tn-texte input { height: 50px; border: 1px solid #d2d2d7; border-radius: 14px; padding: 0 14px; font: 400 16px var(--ui); }
  .tn-detail { margin: 18px 0 0; padding: 4px 16px; border-radius: 18px; background: var(--feutre); }
  .tn-detail div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; font-size: 14.5px; border-bottom: 1px solid #e6e6ea; }
  .tn-detail div:last-child { border-bottom: 0; }
  .tn-detail dt { color: var(--graphite); }
  .tn-detail dd { margin: 0; font-weight: 600; white-space: nowrap; }
  .tn-detail .total dt { color: var(--encre); font-weight: 600; }
  .tn-detail .total dd { font: 400 22px/1 var(--display); }

  /* Écran 4 : coordonnées */
  .tn-resume { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px; border-radius: 18px; background: var(--laque); color: var(--blanc); }
  .tn-resume img { width: 52px; height: 52px; border-radius: 11px; object-fit: cover; }
  .tn-resume span { display: flex; flex-direction: column; min-width: 0; }
  .tn-resume b { font-size: 16px; }
  .tn-resume small { font-size: 13px; color: var(--laiton-clair); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tn-groupe { margin-top: 14px; padding: 0 16px; border-radius: 18px; background: var(--feutre); }
  .tn-groupe label { display: flex; flex-direction: column; gap: 2px; padding: 11px 0; border-bottom: 1px solid #e3e3e8; }
  .tn-groupe label:last-child { border-bottom: 0; }
  .tn-groupe span { font-size: 12px; color: var(--graphite); }
  .tn-groupe input, .tn-groupe textarea { border: 0; outline: 0; background: none; padding: 2px 0; font: 400 17px var(--ui); color: var(--encre); resize: none; }
  .tn-groupe label.erreur span { color: #b3261e; }
  .tn-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; border-bottom: 1px solid #e3e3e8; }
  .tn-deux label { border: 0; }
  .tn-erreur { margin: 12px 0 0; min-height: 1.2em; font-size: 14px; color: #b3261e; }

  /* Calendrier du mois */
  .tn-cal { position: absolute; inset: 0; z-index: 20; background: rgba(0,0,0,0); transition: background .26s; display: flex; align-items: flex-end; }
  .tn-cal.visible { background: rgba(0,0,0,.4); }
  .tn-cal-feuille { width: 100%; background: var(--blanc); border-radius: 26px 26px 0 0; padding: 8px 20px calc(18px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
  .tn-cal.visible .tn-cal-feuille { transform: none; }
  .tn-cal-t { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .tn-cal-t b { font: 400 22px var(--display); }
  .tn-cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
  .tn-cal-g em { font-style: normal; text-align: center; font-size: 12px; color: var(--graphite); padding-bottom: 4px; }
  .tn-cal-g button { aspect-ratio: 1; border: 0; border-radius: 12px; background: var(--feutre); font: 500 16px var(--ui); color: var(--encre); cursor: pointer; position: relative; }
  .tn-cal-g button:disabled { background: none; color: #c7c7cc; cursor: default; }
  .tn-cal-g button.complet { text-decoration: line-through; background: repeating-linear-gradient(45deg, #f2f2f4 0 4px, #fff 4px 8px); }
  .tn-cal-g button.dim:not(:disabled)::after { content: ""; position: absolute; top: 6px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--laiton); }
  .tn-cal-g button.choisi { background: var(--laque); color: var(--blanc); }
  .tn-cal-leg { display: flex; gap: 16px; margin-top: 14px; font-size: 12.5px; color: var(--graphite); }
  .tn-cal-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
  .leg-complet { background: repeating-linear-gradient(45deg, #c7c7cc 0 2px, #fff 2px 4px); border: 1px solid #c7c7cc; }
  .leg-dim { background: var(--laiton); border-radius: 50% !important; width: 7px !important; height: 7px !important; }
  .tn-cal-ok { width: 100%; justify-content: center; margin-top: 16px; }

  /* ---------- Demande de devis (piano d'exception) ---------- */
  .dv-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
  .dv-types button { display: flex; align-items: center; gap: 10px; padding: 14px 12px; border-radius: 16px; border: 1.5px solid #e3e3e8; background: var(--blanc); text-align: left; cursor: pointer; color: var(--encre); transition: border-color .2s, box-shadow .2s, background .2s; }
  .dv-types svg { width: 22px; height: 22px; color: #8a6a3a; }
  .dv-types b { font-size: 15px; font-weight: 600; line-height: 1.2; }
  .dv-types button[aria-pressed="true"] { border-color: var(--encre); background: #fcfaf6; box-shadow: 0 6px 16px rgba(0,0,0,.1); }
  .tn-lien.on { color: var(--blanc); background: var(--laque); padding: 6px 12px; border-radius: 999px; }
  .dv-invites, .dv-contact { width: 100%; }
  .dv-invites button, .dv-contact button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 4px; font-size: 14.5px; }
  .dv-contact svg { width: 17px; height: 17px; }
  .dv-pianos { margin-top: 20px; }
  .dv-piano { padding: 14px 14px 14px 16px; }
  .dv-rond { display: block; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #c7c7cc; transition: border .2s; }
  .dv-piano[aria-pressed="true"] { border-color: var(--laiton); background: #fcfaf6; }
  .dv-piano[aria-pressed="true"] .dv-rond { border: 7px solid var(--laiton); }
  .dv .tn-groupe textarea { font-size: 16px; }
  .dv-fini { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: calc(110px + env(safe-area-inset-top)); }
  .dv-coche { flex: none; width: 76px; height: 76px; border-radius: 50%; background: var(--laiton); color: var(--blanc); display: grid; place-items: center; margin-bottom: 18px; animation: tn-pop .6s cubic-bezier(.3,1.4,.5,1) both; box-shadow: 0 0 0 10px rgba(176,141,87,.16); }
  .dv-coche svg { width: 36px; height: 36px; stroke-width: 2.4; }
  .dv-coche svg path { stroke-dasharray: 24; animation: tn-trace .5s .25s ease-out both; }
  .dv-fini-txt { margin: 10px 0 0; color: var(--graphite); font-size: 16px; line-height: 1.5; max-width: 32ch; }
  .dv-fini .tn-detail { width: 100%; text-align: left; }
  .dv-fini .tn-detail dd { white-space: normal; text-align: right; }
  .dv-fini-actions { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
  .dv-fini-actions a { justify-content: center; }
  .dv[data-etape="5"] .tn-tete { background: transparent; }

  /* Bandeau « Reprendre » */
  .reprendre { position: fixed; z-index: 65; left: 12px; right: 12px; bottom: calc(var(--onglets-h, 64px) + 10px); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 10px;
    border-radius: 18px; background: var(--laque); color: var(--blanc); text-decoration: none; box-shadow: 0 12px 30px rgba(0,0,0,.3); animation: tn-monte .5s cubic-bezier(.2,.8,.2,1) both .4s; }
  .reprendre img { width: 46px; height: 46px; border-radius: 11px; object-fit: cover; }
  .reprendre span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
  .reprendre b { font-size: 15px; }
  .reprendre small { font-size: 12.5px; color: var(--laiton-clair); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .reprendre button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: var(--blanc); font-size: 18px; cursor: pointer; }
  @keyframes tn-monte { from { transform: translateY(30px); opacity: 0; } }
}
@media (min-width: 761px) { .fiche-app, .fiche-barre, .tn, .reprendre { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .tn, .tn *, .fiche-barre, .reprendre { animation: none !important; transition: none !important; } }

.tn-regle { margin-top: 14px; }