/* Carte d'un temps au tour (temps-tour.js, carte()) : page circuit, Paddock, page publique du pilote, Mes performances, aperçu du Profil public ;
   page publique du pilote (pilote.html) ; notifications de Mon garage. Charte « Corde » (DESIGN.md) : cartes blanches 12px,
   filets 1px, chiffres Manrope 800 tabulaires, rouge en ponctuation seulement. Chargé après potes.css / paddock.css. */

/* ---------- Fil de cartes ---------- */
.tc-fil { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.tc-fil > li { min-width: 0; }
.tc { display: grid; gap: 14px; min-width: 0; padding: 18px 20px 12px; border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-1); }
.tc a:focus-visible, .tc button:focus-visible, .tc summary:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 3px; border-radius: var(--radius-sm); }

/* Pilote (classements, Paddock) */
.tc-pil { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tc-pos { flex: none; min-width: 30px; font: 800 28px/1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--ink); text-align: center; }
.tc-pil-av { flex: none; display: block; border-radius: 50%; text-decoration: none; }
.tc-av, .tc-av-s { display: block; flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--paper-2); border: 1px solid var(--rule); }
.tc-ini { display: grid; place-items: center; font: 800 18px/1 var(--f-display); color: var(--ink-2); }
.tc-av-s { width: 26px; height: 26px; }
.tc-av-s.tc-ini { font-size: 12px; }
.tc-pil-id { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.tc .tc-pil-n { font: 700 16px/1.25 var(--f-text); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.tc .tc-pil-n:hover { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tc-on { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--radius-sm); background: var(--green-2); color: var(--green); font: 600 12px/1.2 var(--f-text); white-space: nowrap; }
.tc-on i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* En-tête circuit */
.tc-circ { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tc-tr { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-sm); background: #f1f3f4; }
.tc-tr .trace-mini { width: 50px; height: 50px; }
.tc-circ-t { min-width: 0; }
.tc .tc-cn { margin: 0; font: 800 21px/1.15 var(--f-display); letter-spacing: -.035em; text-wrap: balance; }
.tc .tc-cn a { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; }
.tc .tc-cn a .flag { margin-top: 0; }
.tc .tc-cn a:hover span { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tc-cfg { margin: 3px 0 0; font-size: 13.5px; line-height: 1.35; color: var(--ink-3); }
.tc-cfg:empty { display: none; }

/* Le temps */
.tc-perf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.tc-t { margin: 0; font: 800 clamp(40px, 5.4vw, 54px)/1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.tc-m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.tc-b { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 10px; border-radius: var(--radius-sm); background: var(--neutral-bg); color: var(--neutral-ink); font: 600 13px/1.2 var(--f-text); white-space: nowrap; text-decoration: none; }
.tc-b .ico { width: 15px; height: 15px; }
.tc-b .ico:last-child { width: 13px; height: 13px; opacity: .8; }
.tc-b-ok { background: var(--green-2); color: var(--green); }
a.tc-b-ok:hover { text-decoration: underline; text-underline-offset: 3px; }
.tc-rang { font: 600 13.5px/1.3 var(--f-text); color: var(--ink-2); }
.tc-ec { font: 700 13.5px/1.3 var(--f-text); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.tc-ec.is-best { color: var(--green); }

/* Pastilles groupées */
.tc-gs { display: grid; gap: 8px; margin: 0; padding-top: 14px; border-top: 1px solid var(--paper-2); }
.tc-g { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 10px; align-items: start; }
.tc-g dt { display: flex; align-items: center; gap: 7px; min-height: 32px; font: 600 12.5px/1.2 var(--f-text); color: var(--ink-3); }
.tc-g dt .ico { width: 18px; height: 18px; color: var(--ink-2); }
.tc-g dd { margin: 0; min-width: 0; }
.tc-ps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tc-p { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; max-width: 100%; padding: 4px 10px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); font: 500 13.5px/1.25 var(--f-text); color: var(--ink); overflow-wrap: anywhere; }
.tc-p .ico { width: 16px; height: 16px; color: var(--ink-2); }
.tc-p b { font-weight: 700; }
.tc-p-fort { font-weight: 700; font-variant-numeric: tabular-nums; }
.tc-p-doux { background: #fff; color: var(--ink-3); }

/* Note du pilote : citation discrète */
.tc-note { margin: 0; padding: 0 0 0 12px; border-left: 1px solid var(--rule-strong); }
.tc-note p { margin: 0; max-width: 70ch; font: italic 400 14px/1.5 var(--f-text); color: var(--ink-2); overflow-wrap: anywhere; }

/* Pied : Respect, qui a salué, signaler */
.tc-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding-top: 10px; border-top: 1px solid var(--paper-2); }
.tc-r, .tc-a { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.tc-r:empty, .tc-a:empty { display: none; }
.tc-resp { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: #fff; color: var(--ink); font: 600 14px/1 var(--f-text); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.tc-resp .ico { width: 19px; height: 19px; }
.tc-resp:hover { border-color: var(--ink); }
.tc-resp[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tc-resp[aria-pressed=true]:hover { background: var(--navy-2); border-color: var(--navy-2); }
.tc-resp:disabled { cursor: progress; }
.tc-rn { font-weight: 800; font-variant-numeric: tabular-nums; }
.tc-rn:empty { display: none; }
.tc-resp.is-fixe { border-color: transparent; background: var(--paper); cursor: default; padding: 0 12px; }
.tc-resp.is-pop .ico { animation: tc-pop .5s var(--ease); }
@keyframes tc-pop { 0% { transform: scale(1); } 35% { transform: scale(1.28) rotate(-8deg); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .tc-resp.is-pop .ico { animation: none; } }
.tc-qui, .tc .tt-sig { min-height: 40px; padding: 0; border: 0; background: none; font: 500 13px/1.2 var(--f-text); color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; cursor: pointer; }
.tc .tt-sig { color: var(--ink-3); font-size: 12.5px; }
.tc-qui:hover, .tc .tt-sig:hover { color: var(--ink); text-decoration-color: currentColor; }
.tc-a .btn { text-decoration: none; }
.tc-ql { margin-top: -4px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--paper); }
.tc-ql-t { margin: 0 0 8px; font: 600 12.5px var(--f-text); color: var(--ink-3); }
.tc-ql-c { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.tc-ql ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.tc-ql li, .tc-ql li a { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; font: 600 13.5px var(--f-text); color: var(--ink); }
.tc-ql li a { text-decoration: none; }
.tc-ql li a:hover span { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }

@media (max-width: 560px) {
  .tc { padding: 14px 14px 10px; gap: 12px; }
  .tc-circ { gap: 12px; }
  .tc-tr { width: 52px; height: 52px; }
  .tc-tr .trace-mini { width: 42px; height: 42px; }
  .tc-g { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tc-g dt { min-height: 0; }
  .tc-p { font-size: 13px; min-height: 30px; }
  .tc-pied { padding-top: 8px; }
}

/* ---------- Page publique du pilote ---------- */
.pl-page .pl-tete { align-items: flex-start; gap: 22px; margin-bottom: 0; padding: 24px; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-1); }
.pl-page .pl-photo { width: 112px; height: 112px; }
.pl-page .pl-initiale { font-size: 46px; }
.pl-tete .pl-pseudo { margin: 0; overflow-wrap: anywhere; }
.pl-page .pl-tete .pl-pseudo { font: 800 clamp(30px, 3.5vw, 44px)/1.05 var(--f-display); letter-spacing: -.045em; }
.pl-lieu { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 15.5px; line-height: 1.4; color: var(--ink-2); }
.pl-lieu .flag { margin-top: 0; }
.pl-lieu .ico { width: 17px; height: 17px; color: var(--ink-3); }
.pl-stats { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 12px 0 0; font-size: 13.5px; color: var(--ink-3); }
.pl-stats b { margin-right: 3px; font: 800 22px/1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.pl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 24px; align-items: start; margin-top: 28px; }
.pl-temps, .pl-side { min-width: 0; display: grid; gap: 16px; align-content: start; }
.pl-h { margin: 0; font: 800 26px/1.15 var(--f-display); letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.pl-page .pl-circs { gap: 18px; }
.pl-page .pl-circ { display: grid; gap: 8px; }
.pl-autres > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font: 600 13.5px var(--f-text); color: var(--ink-2); cursor: pointer; list-style: none; }
.pl-autres > summary::-webkit-details-marker { display: none; }
.pl-autres > summary .ico { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.pl-autres[open] > summary .ico { transform: rotate(180deg); }
.pl-autres > summary:hover span { text-decoration: underline; text-underline-offset: 3px; }
.pl-autres > summary:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 3px; border-radius: var(--radius-sm); }
.pl-autres > .tc-fil { gap: 10px; margin-top: 4px; }
.pl-autres .tc { box-shadow: none; background: var(--paper); }
.pl-autres .tc-p { background: #fff; }
.pl-vide { margin: 0; padding: 18px 20px; border: 1px dashed var(--rule-strong); border-radius: var(--radius); color: var(--ink-2); }
.pl-page .pl-voitures { gap: 12px; }
.pl-v-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--paper); }
.pl-page .pl-voitures .ico { width: 24px; height: 24px; color: var(--ink); }
.pl-page .pl-voitures b { font-weight: 700; color: var(--ink); }

@media (max-width: 860px) {
  .pl-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .pl-page .pl-tete { padding: 16px; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 14px; align-items: center; }
  .pl-page .pl-lieu { margin-top: 0; font-size: 14.5px; }
  .pl-page .pl-stats, .pl-page .pl-liens, .pl-page .pl-ami { margin-top: 10px; }
  .pl-page .pl-photo { width: 72px; height: 72px; }
  .pl-page .pl-initiale { font-size: 30px; }
  .pl-page .pl-stats, .pl-page .pl-liens, .pl-page .pl-ami { grid-column: 1 / -1; }
  .pl-h { font-size: 22px; }
}

/* ---------- Profil public (mon-profil.html) : réglages à gauche, aperçu de la page publique à droite (dessous sur téléphone) ---------- */
.mp-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 24px; align-items: start; }
.mp-voir-ap { display: none; }
.mp-ap { position: sticky; top: 112px; display: grid; gap: 12px; min-width: 0; max-height: calc(100vh - 128px); max-height: calc(100dvh - 128px); overflow: auto;
  padding: 16px; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper); overscroll-behavior: contain; }
.mp-ap-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.mp-ap-tete h2 { margin: 0; font: 750 12px/1.2 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.mp-ap-tete .btn { text-decoration: none; }
.mp-ap-tete .btn .ico { width: 15px; height: 15px; margin-right: 6px; }
.mp-ap-ban { margin: 0; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--ink); color: #fff; font: 600 13.5px/1.35 var(--f-text); }
.mp-ap-ban[hidden] { display: none; }
.mp-ap-pied { margin: 0; }
/* L'aperçu reprend la page publique en une colonne, en-tête compact */
.pl-apercu .pl-tete { padding: 16px; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 14px; align-items: center; }
.pl-apercu .pl-photo { width: 72px; height: 72px; }
.pl-apercu .pl-initiale { font-size: 30px; }
.pl-apercu .pl-tete .pl-pseudo { font-size: clamp(24px, 2.4vw, 30px); }
.pl-apercu .pl-lieu { margin-top: 2px; font-size: 14.5px; }
.pl-apercu .pl-stats, .pl-apercu .pl-liens, .pl-apercu .pl-ami { grid-column: 1 / -1; margin-top: 8px; }
.pl-apercu .pl-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.pl-apercu .pl-h { font-size: 20px; }
.pl-apercu .tc { padding: 14px 14px 10px; gap: 12px; }
.pl-apercu .tc-t { font-size: clamp(34px, 3.4vw, 44px); }
.pl-apercu .tc-g { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.pl-apercu .tc-g dt { min-height: 0; }
.pl-apercu .card-h { font-size: 16px; }
.pl-apercu .tc-qui, .pl-apercu .tc-ql { display: none; }   /* aperçu : pas de liste « qui a salué » */
@media (max-width: 980px) {
  .mp-cols { grid-template-columns: minmax(0, 1fr); }
  .mp-ap { position: static; max-height: none; overflow: visible; }
  .mp-voir-ap { display: inline-flex; align-items: center; min-height: 40px; margin-bottom: 8px; font: 600 14px var(--f-text); color: var(--ink); text-underline-offset: 3px; }
}
@media (max-width: 560px) {
  .mp-ap { padding: 10px; margin: 0 -6px; }
}

/* ---------- Mes performances (mes-performances.html) ---------- */
.mf-public p { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.mf-public .ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--green); }
.mf-public .is-prive .ico { color: var(--ink-2); }
.mf-public a { font-weight: 600; color: var(--ink); text-decoration-color: var(--red); text-underline-offset: 3px; }
.mf-resume { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0 0 24px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--rule); overflow: hidden; }
.mf-resume[hidden] { display: none; }
.mf-resume > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; background: #fff; }
.mf-resume dt { font: 600 12.5px/1.3 var(--f-text); color: var(--ink-3); }
.mf-resume dd { margin: 0; font: 800 28px/1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.mf-resume dd small { display: block; margin-top: 6px; font: 500 12.5px/1.3 var(--f-text); letter-spacing: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.mf-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; }
.mf-liste { display: grid; gap: 14px; min-width: 0; align-content: start; }
.mf-liste-t { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.mf-aller { display: none; font: 600 14px var(--f-text); color: var(--ink); text-decoration-color: var(--red); text-underline-offset: 3px; }
.mf-circs { gap: 18px; }
.mf-circs .pl-circ { display: grid; gap: 8px; }
.mf .mp-ajout { margin-top: 0; padding-top: 0; border-top: 0; }
.mf-form.card { position: sticky; top: 112px; max-height: calc(100vh - 128px); max-height: calc(100dvh - 128px); overflow: auto; overscroll-behavior: contain; }
.mf-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.mf-vide { display: grid; gap: 6px; list-style: none; }
.mf-vide p { margin: 0; }
.mf-form, .mp-ap { scroll-margin-top: 112px; }
@media (max-width: 980px) {
  .mf-grid { grid-template-columns: minmax(0, 1fr); }
  .mf-form.card { position: static; max-height: none; overflow: visible; }
  .mf-aller { display: inline-flex; align-items: center; min-height: 40px; }
  .mf-resume { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .mf-resume > div { padding: 12px; }
  .mf-resume dd { font-size: 24px; }
}

/* ---------- Notifications (Mon garage) ---------- */
.nt-card { margin-bottom: 20px; }
.nt-l { list-style: none; margin: 0; padding: 0; }
.nt { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--paper-2); }
.nt:first-child { border-top: 0; padding-top: 2px; }
.nt-av { display: block; border-radius: 50%; text-decoration: none; }
.nt-x { display: flex; gap: 8px; margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.nt-x .ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--ink-2); }
.nt-x a { color: var(--ink); font-weight: 700; text-decoration: none; }
.nt-x a:hover { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.nt-t { font-weight: 800; font-variant-numeric: tabular-nums; }
.nt-d { display: flex; align-items: center; gap: 8px; margin: 4px 0 0 26px; font-size: 12.5px; color: var(--ink-3); }
.nt-nv { padding: 2px 7px; border-radius: var(--radius-sm); background: var(--danger-bg); color: var(--danger); font: 700 11.5px/1.3 var(--f-text); }
.nt-a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 0 26px; }
.nt-a .btn { text-decoration: none; }
.nt-a .btn .ico { width: 16px; height: 16px; margin-right: 6px; }
.nt-ami { display: contents; }
.nt-rel { display: inline-flex; align-items: center; gap: 6px; font: 600 13.5px var(--f-text); color: var(--green); }
.nt-rel .ico { width: 16px; height: 16px; }
.nt-np { font-size: 13px; color: var(--ink-3); }
.nt-vide { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.nt a:focus-visible, .nt button:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 3px; }
@media (max-width: 560px) {
  .nt { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; }
  .nt .tc-av { width: 36px; height: 36px; }
  .nt-d, .nt-a { margin-left: 0; }
}

/* Classement d'un circuit (circuit.js) : titre et bouton « Ajouter mes temps » sur la même ligne */
.tt-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 18px 0; }
.tt-tete .card-h { padding: 0; }
.tt-ajout { text-decoration: none; }
.tt-ajout .ico { width: 17px; height: 17px; }