/* Carnet de route de ressources.online : ce qui s'ajoute à la mise en page de la carte postale (../carte-postale/carte.css),
   dont l'outil reprend l'atelier : aperçu à gauche, étapes à droite, onglets et aperçu collé sur téléphone, fenêtre du film. */
.carnet .vue-cadre canvas { width: 100%; }
@media (min-width: 901px) { .carnet .vue-cadre.portrait canvas { width: auto; max-height: 68vh; } }
.carnet .envoi-plus button[aria-pressed="true"] { color: var(--orange); }
.carnet .envoi-plus button:disabled, .carnet .envoi .btn:disabled { opacity: .5; cursor: default; }
.lien { font: inherit; font-size: .9rem; background: none; border: 0; padding: 6px 0; color: var(--doux); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lien:hover { color: var(--orange); }

/* l'enregistrement du trajet par la page */
.releve { margin: 12px 0 16px; padding: 14px 16px; border: 1px solid var(--ligne); border-radius: 14px; background: var(--surface-2); }
.releve h3 { margin: 0 0 6px; font-size: .98rem; }
.releve-ou { margin: 0 0 8px; font-size: .98rem; }   /* la seconde possibilité : le relevé d'une application */
.releve-note { margin-top: 12px; }
.releve .rang { margin-bottom: 10px; }
.releve .film-intro:last-of-type { margin-bottom: 0; }
.releve #r-gpx { margin-top: 10px; }
.releve-chiffres { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.releve-chiffres li { background: var(--surface); border-radius: 12px; padding: 10px 6px; text-align: center; }
.releve-chiffres b { display: block; font-size: 1.15rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.releve-chiffres span { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); font-weight: 700; }

/* la liste des photos : vignette, légende, emplacement sur l'itinéraire */
.photos { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; counter-reset: photo; }
.photos li { counter-increment: photo; display: grid; grid-template-columns: 64px minmax(0, 1fr) 44px; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--ligne); border-radius: 14px; background: var(--surface); position: relative; }
.photos li::before { content: counter(photo); position: absolute; left: 2px; top: 2px; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px; background: var(--orange); color: #21160a; font-size: .74rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.photos img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; display: block; background: var(--surface-2); }
.photos div { display: grid; gap: 4px; min-width: 0; }
.photos input { font: inherit; font-size: 16px; color: var(--texte); background: var(--surface); border: 2px solid var(--ligne); border-radius: 10px; min-height: 42px; padding: 0 12px; width: 100%; }
.photos input:focus { border-color: var(--orange); outline: none; }
.photos small { color: var(--doux); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
  .carnet .pas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .carnet .vue-cadre canvas { width: auto; }
  .carnet .vue-cadre.portrait:not(.compact) canvas { max-height: 36dvh; }   /* une vidéo en hauteur : un peu plus grande, sans manger l'écran */
  .carnet .vue-aide { display: block; }
  .carnet .vue-aide:empty { display: none; }
  .carnet .envoi .btn { flex: 1 1 100%; }
  .releve .rang .btn { flex: 1 1 auto; }
}

.effacer:not([hidden]) { display: block; margin: 10px auto 0; }
/* la page récapitulative gardée dans le compte */
.page-compte { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ligne); display: grid; gap: 8px; justify-items: center; text-align: center; }
.page-compte .film-intro { margin: 0; font-size: .86rem; }
.page-compte a { color: var(--texte); font-weight: 600; text-underline-offset: 3px; }

/* L'écran de route : pendant l'enregistrement du trajet, sombre et lisible en marchant. L'arrêt et le déverrouillage demandent un appui long. */
html.route-ouverte { overflow: hidden; }
.route {
  position: fixed; inset: 0; z-index: 1300; background: #0a1124; color: #fff; display: grid; grid-template-rows: auto 1fr auto auto auto; gap: 14px;
  padding: max(16px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); text-align: center;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: contain;
}
.route[hidden], .route-verrou[hidden] { display: none; }
.route-haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.route-gps { margin: 0; display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: .95rem; color: rgba(255, 255, 255, .85); text-align: left; }
.route-gps i { width: 12px; height: 12px; border-radius: 50%; background: #f59e0b; flex: none; }
.route-gps.ok i { background: #22c55e; }
.route-gps.perdu i { background: #ef4444; }
.route-reduire { width: 48px; height: 48px; flex: none; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.route-chiffres { align-self: center; }
.route-km { margin: 0; font-size: clamp(3.2rem, 17vw, 6rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.route-duree { margin: 10px 0 0; font-size: clamp(1.8rem, 9vw, 3rem); font-weight: 700; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .9); }
.route-detail { margin: 10px 0 0; color: rgba(255, 255, 255, .65); font-size: .95rem; }
.route-consigne { margin: 18px auto 0; max-width: 32ch; display: flex; gap: 9px; align-items: flex-start; text-align: left; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .88); font-size: .88rem; line-height: 1.4; }
.route-consigne svg { flex: none; margin-top: 2px; color: var(--orange, #ed7e08); }
.route-photo { justify-self: center; width: min(100%, 420px); min-height: 68px; border-radius: 22px; background: var(--orange, #ed7e08); color: #21160a; font-weight: 800; font-size: 1.15rem; display: flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer; }
.route-photo:focus-visible, .route button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.route-note { margin: 0; min-height: 2.8em; color: rgba(255, 255, 255, .65); font-size: .86rem; line-height: 1.4; }
.route-bas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 10px; width: min(100%, 420px); justify-self: center; }
.route-bas button { position: relative; overflow: hidden; min-height: 58px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); color: #fff; font: inherit; font-weight: 700; font-size: .84rem; line-height: 1.2; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; touch-action: none; padding: 0 8px; min-width: 0; }
.route-bas svg { flex: none; }
.route-arret i { position: absolute; inset: 0; background: #e11d48; transform: scaleX(0); transform-origin: left; }
.route-arret.appui i { transform: scaleX(1); transition: transform var(--appui, 1100ms) linear; }
.route-arret svg, .route-arret span { position: relative; }
.route-verrou { position: absolute; inset: 0; background: #000; display: grid; place-content: center; gap: 18px; justify-items: center; padding: 30px; touch-action: none; color: rgba(255, 255, 255, .45); }
.route-verrou i { width: 74px; height: 74px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); }
.route-verrou.appui i { border-color: #fff; transform: scale(1.25); transition: transform var(--appui, 1300ms) linear, border-color var(--appui, 1300ms) linear; }
.route-verrou p { margin: 0; max-width: 24ch; font-size: .95rem; }
.route-verrou .route-verrou-chiffres { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .32); }

/* Téléphone : un titre de page plus court, et les boutons de création seulement à la dernière étape (avant, « Continuer »). */
@media (max-width: 900px) {
  .page-carnet .hero { padding: 16px 0 2px; }
  .page-carnet .hero h1 { font-size: 1.7rem; margin-bottom: 6px; }
  .page-carnet .chapeau { display: none; }   /* le texte d'accueil : sur grand écran seulement, l'outil arrive tout de suite */
  .carnet .vue-aide { display: none !important; }
  .carnet .envoi, .carnet .envoi-plus { display: none; }
  .carnet[data-etape="3"] .envoi { display: flex; order: 1; margin-top: 14px; padding-top: 0; border-top: 0; }   /* à la dernière étape : les boutons d'abord, les réglages dessous */
  .carnet[data-etape="3"] .envoi-plus { display: grid; order: 1; }
  .carnet .prive { order: 5; margin-top: 18px; }
  .carnet .effacer:not([hidden]) { order: 6; align-self: center; min-height: 44px; }
  .releve .rang { flex-wrap: wrap; }
  .releve .rang .btn { flex: 1 1 140px; min-height: 52px; }
}