/* Espaces pros (pro.html, espace-pro.html, espace-coach.html, body.p2) : vérification du site, équipe et journal, puis la v2 en fin de fichier.
   Langage du pack design v2 (pages-v2.css, composants td2-* de site.css) ; préfixe ep-. Chantier du 24/10/2026. */

.espro .ep-tete .lede { max-width: 760px; }
.ep-role { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }
.espro > .card, .espro section > .card { margin-bottom: 16px; }
.espro .card + .card { margin-top: 0; }

/* Vues (onglets) : segment v2, vues à venir en puces grises */
.ep-vues { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 18px; }
.ep-vues .td2-seg { flex-wrap: wrap; }
.ep-bientot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--td2-muted); }
.ep-bientot span { padding: 3px 10px; border: 1px dashed var(--rule-strong); border-radius: 99px; color: var(--ink-2); }

/* Invitation reçue */
.ep-invit { border-left: 4px solid var(--td2-action); }
.ep-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }

/* Étapes : compte → site vérifié → accès ouvert */
.ep-etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: ep; }
.ep-etapes li { position: relative; padding: 12px 14px 12px 50px; border: 1px solid var(--td2-border); border-radius: 10px; background: var(--paper); counter-increment: ep; }
.ep-etapes li::before { content: counter(ep); position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 1px solid var(--rule-strong); font: 800 13px var(--f-display); color: var(--ink-2); }
.ep-etapes li b { display: block; font: 700 15px/1.3 var(--f-display); color: var(--td2-ink); }
.ep-etapes li span { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-2); }
.ep-etapes li.fait { background: var(--td2-success-bg); border-color: transparent; }
.ep-etapes li.fait::before { content: "✓"; background: var(--td2-success); border-color: var(--td2-success); color: #fff; }
.ep-etapes li.actif { background: #fff; border-color: var(--td2-action); box-shadow: 0 0 0 1px var(--td2-action) inset; }
.ep-etapes li.actif::before { background: var(--td2-action); border-color: var(--td2-action); color: #fff; }

.ep-ok { display: grid; gap: 4px; padding: 14px 16px; border-radius: 10px; background: var(--td2-success-bg); color: var(--td2-success); }
.ep-ok b { font: 800 16px var(--f-display); }
.ep-ok span { color: var(--ink); font-size: 14.5px; }
.ep-ok:focus { outline: none; box-shadow: var(--focus); }

.ep-site { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--td2-border); border-radius: 10px; }
.ep-site > span { font: 700 12px var(--f-text); letter-spacing: .06em; text-transform: uppercase; color: var(--td2-muted); }
.ep-site > b { font: 800 17px var(--f-display); color: var(--td2-ink); overflow-wrap: anywhere; }
.ep-site > small { flex: 1 1 100%; font-size: 13px; color: var(--ink-2); }
.ep-site > button { margin-top: 4px; }
.ep-f-site { margin-bottom: 16px; }

.ep-seg { margin: 0 0 14px; }
.ep-methode > p { margin: 0 0 12px; color: var(--ink-2); }
.ep-code { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0 0 10px; padding: 10px 12px;
  border: 1px solid var(--td2-border); border-radius: 10px; background: var(--paper); }
.ep-code > span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ep-code code { font: 600 13.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--td2-ink); overflow-wrap: anywhere; user-select: all; }
.ep-methode a[translate=no] { overflow-wrap: anywhere; }
.ep-verifier { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 16px 0 12px; }
.ep-res { flex: 1 1 260px; margin: 0; font-size: 14px; color: var(--ink-2); }
.ep-res.ko { color: var(--td2-action-hover); font-weight: 600; }
.ep-res.ok { color: var(--td2-success); font-weight: 600; }

/* Tableau des dates : conteneur positionné, sinon les étiquettes sr-only (absolues) des champs sortent de la zone défilante
   et élargissent la page sur téléphone */
.espro .tab-orga { position: relative; }

/* Mes dates en lecture seule (rôle sans droit de modifier) */
.ep-lecture-seule .ep-mod { display: none; }
.ep-lecture { margin: 12px 20px 0; padding: 10px 12px; border-radius: 8px; background: var(--td2-neutral-bg); font-size: 14px; color: var(--ink-2); }

/* Équipe */
.ep-membres { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.ep-membre { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "av id role" "av droits droits" "av act act" "av edit edit";
  align-items: start; gap: 6px 12px; padding: 14px; border: 1px solid var(--td2-border); border-radius: 10px; background: #fff; }
.ep-av { grid-area: av; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--td2-ink); color: #fff; font: 800 16px var(--f-display); }
.ep-m-id { grid-area: id; min-width: 0; }
.ep-m-id b { display: block; font: 700 15.5px/1.3 var(--f-display); color: var(--td2-ink); overflow-wrap: anywhere; }
.ep-m-id small { display: block; font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.ep-moi { display: inline !important; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: var(--td2-neutral-bg); font: 600 12px var(--f-text) !important; color: var(--ink-2); }
.ep-m-role { grid-area: role; display: grid; justify-items: end; gap: 4px; }
.ep-m-role small { font-size: 12px; color: var(--td2-muted); }
.ep-m-droits { grid-area: droits; display: flex; flex-wrap: wrap; gap: 6px; }
.ep-puce { padding: 3px 9px; border-radius: 99px; background: var(--td2-neutral-bg); font-size: 12.5px; color: var(--ink-2); }
.ep-puce.modifier { background: var(--td2-success-bg); color: var(--td2-success); }
.ep-m-act { grid-area: act; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ep-m-edit { grid-area: edit; display: grid; gap: 10px; margin-top: 6px; padding: 12px; border-radius: 10px; background: var(--paper); }
.ep-m-edit .fld select, .ep-droit select { height: 44px; padding: 0 10px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: #fff; font: 500 15px var(--f-text); color: var(--ink); }
.btn.ep-danger { color: var(--td2-action-hover); }
.btn.ep-danger:hover { border-color: var(--td2-action); }

.ep-roles label small { display: block; }
.ep-droits-d summary { cursor: pointer; font-weight: 600; color: var(--td2-action); min-height: 32px; display: flex; align-items: center; }
.ep-droits { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-top: 8px; }
.ep-droit { display: grid; gap: 4px; font-size: 14px; color: var(--ink-2); }
.ep-droit span small { color: var(--td2-muted); }
.ep-lien { padding: 14px; border-radius: 10px; background: var(--td2-warning-bg); }
.ep-lien input { font: 600 14px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.ep-invits { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ep-invits li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid var(--td2-border); border-radius: 10px; }
.ep-invits b { display: block; color: var(--td2-ink); }
.ep-invits small { font-size: 13px; color: var(--ink-2); }

/* Journal */
.ep-journal { margin: 8px 0 0; padding: 0; list-style: none; }
.ep-j { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--paper-2); }
.ep-j:last-child { border-bottom: 0; }
.ep-j time { font-size: 13px; color: var(--td2-muted); font-variant-numeric: tabular-nums; }
.ep-j b { display: block; font-weight: 700; color: var(--td2-ink); }
.ep-j span { display: block; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.ep-j small { display: block; font-size: 12.5px; color: var(--td2-muted); overflow-wrap: anywhere; }
.ep-j.verif_reussie b, .ep-j.valide b { color: var(--td2-success); }
.ep-j.verif_echec b, .ep-j.membre_retire b, .ep-j.refuse b { color: var(--td2-action-hover); }
.ep-vide { padding: 10px 0; color: var(--td2-muted); }

.ep-pied { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

@media (max-width: 760px) {
  .ep-etapes { grid-template-columns: 1fr; }
  .ep-code { grid-template-columns: minmax(0, 1fr) auto; }
  .ep-code > span { grid-column: 1 / -1; }
  .ep-membre { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "av id" "av role" "droits droits" "act act" "edit edit"; }
  .ep-m-role { justify-items: start; }
  .ep-j { grid-template-columns: 1fr; gap: 2px; }
  .ep-vues .td2-seg { width: 100%; }
  .ep-vues .td2-seg button { flex: 1 1 auto; justify-content: center; }
}

/* ======================================================================== Espace pro v2 (24/10/2026, branche espace-pro-v2)
   Point d'entrée pro.trackday.place (pro.html, préfixe px-), en-tête des pages pros (hdp-), gabarit des espaces avec menu
   latéral (ps-, pro-shell.js), tableau de bord (pb-), pages « Fonctionnalité à venir » (pv-), abonnement (ab-), paramètres (pp-).
   Monde « Corde » : blanc et gris paddock, noir carbone pour le menu des pros (le mur des stands), rouge en ponctuation. */

body.td-pro { --hdp-h: 68px; background: var(--paper); }
body.td-pro .site-header { position: sticky; top: 0; z-index: 50; }

/* ---------------------------------------------------------------- en-tête des pages pros */
body.td-pro .hd.hdp { max-width: none; min-height: var(--hdp-h); padding: 0 32px; grid-template-columns: auto minmax(0, 1fr); gap: 24px; }
.hdp-brand { display: inline-flex; align-items: center; gap: 12px; width: auto; text-decoration: none; }
.hdp-brand img { width: 200px; height: auto; }
.hdp-tag { position: relative; z-index: 0; padding: 3px 11px 4px 10px; font: 800 13px/1.15 var(--f-display); letter-spacing: .01em; color: #fff; }
.hdp-tag::before { content: ""; position: absolute; z-index: -1; inset: 0; border-right: 3px solid var(--red); border-radius: 3px; background: var(--ink); transform: skew(-14deg); }
.hdp-nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 22px; min-width: 0; }
.hdp-ancres { display: flex; gap: 22px; margin-right: 6px; }
.hdp-ancres a { padding: 8px 0; font: 500 15px var(--f-text); color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; }
.hdp-ancres a:hover { border-bottom-color: var(--rule-strong); }
.hdp-pilotes { display: inline-flex; align-items: center; gap: 6px; font: 400 13.5px var(--f-text); color: var(--ink-3); text-decoration: none; }
.hdp-pilotes:hover { color: var(--ink); }
.hdp-pilotes .ico { width: 15px; height: 15px; }
.hdp-nav .hd-lang { margin: 0; padding-left: 14px; }
.hdp-nav .hd-lang .hl-n { display: none !important; }
.hdp-nav .hd-lang a { padding: 6px 5px; font: 500 12.5px/1.2 var(--f-text); letter-spacing: .04em; color: var(--ink-3); text-decoration: none; }
.hdp-nav .hd-lang a:hover { color: var(--ink); }
.hdp-nav .hd-lang a[aria-current=true] { color: var(--ink); font-weight: 700; text-decoration: underline 2px var(--red); text-underline-offset: 5px; }
.hdp-cta .ico { width: 17px; height: 17px; }
.hdp-foot { max-width: none; padding-left: 32px; padding-right: 32px; }
.ft-pro { color: var(--ink-3); }

/* ---------------------------------------------------------------- accueil pro (pro.html) */
.px-main { flex: 1 0 auto; }
.px-main [tabindex="-1"]:focus { outline: none; }
.px-main section[id] { scroll-margin-top: calc(var(--hdp-h) + 12px); }
.px-hero { position: relative; overflow: hidden; background: #fff; border-bottom: 1px solid var(--rule); }
.px-hero::after { content: ""; position: absolute; right: -120px; top: -40px; width: 620px; height: 576px; background: url("assets/deco/vibreur-courbe.svg") no-repeat right top / contain; opacity: .9; pointer-events: none; }
.px-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 420px); gap: 56px; align-items: center; max-width: 1280px; margin: 0 auto; padding: 64px 48px 72px; }
.px-hero h1 { margin: 0; font: 800 clamp(44px, 5.6vw, 84px)/1.02 var(--f-display); letter-spacing: -.04em; color: var(--ink); text-wrap: balance; }
.px-pt { color: var(--red); }
.px-lede { max-width: 54ch; margin: 22px 0 0; font: 400 clamp(17px, 1.5vw, 20px)/1.5 var(--f-text); color: var(--ink-2); }
.px-publics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 680px; margin: 34px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.px-publics li + li { border-left: 1px solid var(--rule); }
.px-publics a { display: grid; gap: 4px; height: 100%; padding: 16px 18px 16px 0; text-decoration: none; color: var(--ink); }
.px-publics li + li a { padding-left: 18px; }
.px-publics b { position: relative; font: 800 18px/1.2 var(--f-display); letter-spacing: -.02em; }
.px-publics b::after { content: " →"; color: var(--red-deep); }
.px-publics span { font-size: 13.5px; line-height: 1.4; color: var(--ink-3); }
.px-publics a:hover b { color: var(--red-deep); }
.px-cnx { scroll-margin-top: calc(var(--hdp-h) + 16px); }
.px-cnx-boite { padding: 26px 28px 24px; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-2); }
.px-cnx-boite h2 { margin: 0 0 16px; font: 800 22px/1.2 var(--f-display); letter-spacing: -.02em; }
.px-cnx-boite .cpt-form { max-width: none; }
.px-cnx-boite .btn { width: 100%; }
.px-cnx-boite .ep-actions .btn { width: auto; }
.px-cnx-liens { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 16px 0 0; font-size: 14px; }
.px-cnx-liens a { color: var(--ink-2); }
.px-cnx-liens a:last-child { font-weight: 600; color: var(--red-deep); }

.px-bande { background: var(--paper); border-bottom: 1px solid var(--rule); }
.px-bande.px-inverse { background: #fff; }
.px-bande-in { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: end; max-width: 1180px; margin: 0 auto; padding: 64px 48px 0; }
.px-inverse .px-bande-in { grid-template-columns: 300px minmax(0, 1fr); }
.px-inverse .px-alex { order: -1; }
.px-bande-txt { padding-bottom: 64px; }
.px-bande h2, .px-creer h2, .px-offres h2 { display: flex; align-items: center; margin: 0; font: 800 clamp(28px, 3vw, 40px)/1.1 var(--f-display); letter-spacing: -.035em; color: var(--ink); }
.px-bande h2::before, .px-creer h2::before { content: ""; flex: none; width: 8px; height: .8em; margin-right: 16px; background: var(--red-deep); transform: skew(-15deg); }
.px-bande-lede { max-width: 62ch; margin: 14px 0 26px; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
.px-liste { display: grid; max-width: 720px; margin: 0 0 28px; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.px-liste li { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.px-liste li > b { grid-column: 2; font: 700 16px/1.3 var(--f-display); color: var(--ink); }
.px-liste li > span:last-child { grid-column: 2; margin-top: 3px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.px-etat { grid-row: 1 / span 2; align-self: start; justify-self: start; margin-top: 1px; padding: 3px 10px; border-radius: 99px; background: var(--neutral-bg); font: 600 12.5px/1.3 var(--f-text); color: var(--neutral-ink); white-space: nowrap; }
.px-liste li.ok .px-etat { background: var(--green-2); color: var(--green); }
.px-alex { margin: 0; align-self: end; }
.px-alex img { display: block; width: auto; height: 340px; max-width: 100%; margin: 0 auto; object-fit: contain; object-position: bottom; }

.px-offres { background: var(--ink); color: #fff; }
.px-offres-in { max-width: 1180px; margin: 0 auto; padding: 56px 48px; }
.px-offres h2 { color: #fff; }
.px-offres h2::before { content: ""; flex: none; width: 8px; height: .8em; margin-right: 16px; background: var(--red); transform: skew(-15deg); }
.px-offres p { max-width: 70ch; margin: 14px 0 0; font-size: 16.5px; line-height: 1.55; color: rgba(255, 255, 255, .8); }
.px-offres .px-offres-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .16); }
.px-offres-prix b { font: 800 22px/1.2 var(--f-display); letter-spacing: -.02em; color: #fff; }
.px-offres-prix span { color: rgba(255, 255, 255, .8); }

.px-creer { background: #fff; }
.px-creer-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; max-width: 1180px; margin: 0 auto; padding: 64px 48px 80px; }
.px-creer-txt > p { max-width: 52ch; margin: 14px 0 24px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.px-etapes { grid-template-columns: 1fr; }
.px-creer-form .cpt-form { max-width: none; }
.px-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.px-types label { align-items: start; align-content: start; row-gap: 3px; padding: 13px 14px; }
.px-types input { margin-top: 2px; }
.px-types b { font: 700 15.5px var(--f-text); }
.px-lien-perso { margin: 0 20px 20px; padding-top: 14px; border-top: 1px solid var(--paper-2); }
.px-lien-perso summary { display: flex; align-items: center; min-height: 40px; cursor: pointer; font: 600 14px var(--f-text); color: var(--ink-2); }
.px-lien-perso[open] summary { margin-bottom: 10px; }

/* ---------------------------------------------------------------- gabarit des espaces : menu latéral + contenu */
body.ps-page .ps { flex: 1 0 auto; display: grid; grid-template-columns: 272px minmax(0, 1fr); align-items: start; }
body.ps-page.ps-seul .ps { grid-template-columns: minmax(0, 1fr); }
.ps-menu { position: sticky; top: var(--hdp-h); display: flex; flex-direction: column; height: calc(100vh - var(--hdp-h)); height: calc(100dvh - var(--hdp-h)); overflow-y: auto;
  background: var(--ink); color: #fff; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
.ps-menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-color: var(--ink); }
.ps-menu :focus-visible { outline-color: #fff; }
.ps-id { display: flex; align-items: center; gap: 12px; padding: 22px 20px 16px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ps-av { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--red-deep); font: 800 19px var(--f-display); color: #fff; }
.ps-id-t { min-width: 0; }
.ps-id-t b { display: block; font: 800 16px/1.2 var(--f-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.ps-id-t small { display: block; margin-top: 3px; font-size: 12.5px; color: rgba(255, 255, 255, .62); }
.ps-nav { padding: 6px 0 14px; }
.ps-gr { margin: 16px 22px 6px; font: 600 12px/1.2 var(--f-text); letter-spacing: .02em; color: rgba(255, 255, 255, .5); }
.ps-nav ul { margin: 0; padding: 0 10px; list-style: none; }
.ps-nav a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: 8px; font: 500 14.5px/1.25 var(--f-text);
  color: rgba(255, 255, 255, .86); text-decoration: none; transition: background .15s, color .15s; }
.ps-nav a .ico { width: 19px; height: 19px; color: rgba(255, 255, 255, .62); transition: color .15s; }
.ps-nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.ps-nav a[aria-current=page] { background: rgba(255, 255, 255, .1); color: #fff; font-weight: 650; }
.ps-nav a[aria-current=page] .ico { color: var(--red); }
.ps-nav a[aria-current=page]::before { content: ""; position: absolute; left: -4px; top: 11px; bottom: 11px; width: 4px; border-radius: 1px; background: var(--red); transform: skew(-15deg); }
.ps-nav a.avenir > span { color: rgba(255, 255, 255, .74); }
.ps-nav a.avenir[aria-current=page] > span { color: #fff; }
.ps-nav a em { margin-left: auto; padding: 2px 7px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 99px; font: normal 500 11px/1.3 var(--f-text); color: rgba(255, 255, 255, .58); white-space: nowrap; }
.ps-pied { display: grid; gap: 6px; margin-top: auto; padding: 14px 20px 20px; border-top: 1px solid rgba(255, 255, 255, .1); }
.ps-pied small { font-size: 12.5px; color: rgba(255, 255, 255, .58); overflow-wrap: anywhere; }
.ps-sortie { display: inline-flex; align-items: center; gap: 10px; justify-self: start; min-height: 40px; padding: 0 2px; border: 0; background: none; font: 500 14px var(--f-text); color: rgba(255, 255, 255, .86); cursor: pointer; }
.ps-sortie:hover { color: #fff; }
.ps-sortie .ico { width: 18px; height: 18px; }
.ps-mbar { display: none; }

.ps-contenu { width: 100%; max-width: 1120px; min-width: 0; padding: 32px 44px 72px; }
body.ps-seul .ps-contenu { max-width: 900px; margin: 0 auto; }
.ps-contenu > .card, .ps-vue > .card, .ps-attente > .card { margin-bottom: 16px; }
.ps-tete { margin: 0 0 22px; }
.ps-tete h1, .pv-titre h1 { display: flex; align-items: center; margin: 0; font: 800 clamp(28px, 3vw, 38px)/1.1 var(--f-display); letter-spacing: -.03em; color: var(--ink); overflow-wrap: anywhere; }
.ps-tete h1::before, .pv-titre h1::before { content: ""; flex: none; width: 8px; height: .8em; margin-right: 14px; background: var(--red-deep); transform: skew(-15deg); }
.ps-tete .lede { max-width: 70ch; }
.ps-tete h1:focus { outline: none; }
.ps-demo { padding: 3px 10px; border-radius: 99px; background: var(--warn-bg); font: 600 12.5px var(--f-text); color: var(--yellow-ink); }

/* ---------------------------------------------------------------- tableau de bord */
.pb-grille { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.pb-cote { display: grid; gap: 16px; }
.pb-cote .card, .pb-cote .card + .card, .pb-grille > .card { margin: 0; }
.pb-grille > .card { margin: 0; }
.pb-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 0; }
.pb-h .card-h { padding: 0; }
.pb-h > a { font: 600 13.5px var(--f-text); color: var(--red-deep); }
.pb-liste { margin: 0; padding: 0; list-style: none; }
.pb-liste li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--paper-2); }
.pb-liste li:first-child { border-top: 0; padding-top: 4px; }
.pb-date { display: grid; justify-items: center; line-height: 1; }
.pb-date b { font: 800 27px/1 var(--f-display); letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pb-date small { margin-top: 4px; font: 600 12px var(--f-text); color: var(--red-deep); }
.pb-j { min-width: 0; }
.pb-j b { display: block; font: 700 15.5px/1.25 var(--f-display); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-j small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-pl { display: grid; justify-items: end; gap: 4px; }
.pb-pl small { font-size: 12px; color: var(--ink-3); }
.pb-plus { margin: 4px 0 0; font: 600 14px var(--f-text); }
.pb-plus a { color: var(--red-deep); }
.pb-vide { color: var(--ink-2); }
.pb-vide p { margin: 0 0 6px; max-width: 60ch; }
.pb-vide a { font-weight: 600; color: var(--red-deep); }
.pb-etat, .pb-racc { margin: 0; list-style: none; }
.pb-etat li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--paper-2); }
.pb-etat li:first-child { border-top: 0; padding-top: 2px; }
.pb-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--neutral-bg); color: var(--neutral-ink); }
.pb-ic .ico { width: 16px; height: 16px; stroke-width: 2.2; }
.pb-etat li.ok .pb-ic { background: var(--green-2); color: var(--green); }
.pb-etat b { display: block; font: 600 14.5px/1.35 var(--f-text); color: var(--ink); overflow-wrap: anywhere; }
.pb-etat small { display: block; margin-top: 1px; font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; }
.pb-etat small a { font-weight: 600; color: var(--red-deep); }
.pb-racc { padding-top: 6px; padding-bottom: 8px; }
.pb-racc a { display: flex; align-items: center; gap: 12px; min-height: 46px; border-top: 1px solid var(--paper-2); font: 600 14.5px var(--f-text); color: var(--ink); text-decoration: none; }
.pb-racc li:first-child a { border-top: 0; }
.pb-racc a .ico { width: 19px; height: 19px; color: var(--ink-3); }
.pb-racc a .ico:last-child { margin-left: auto; color: var(--red-deep); transition: transform .2s var(--ease); }
.pb-racc a:hover { color: var(--red-deep); }
.pb-racc a:hover .ico:last-child { transform: translateX(3px); }
.pb-chantier { margin-top: 40px; }
.pb-chantier .pv-h { margin: 0; }
.pb-chantier-intro { max-width: 70ch; margin: 6px 0 16px; color: var(--ink-2); }
.pb-briques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.pb-briques a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; height: 100%; padding: 14px 16px 14px 4px; border-bottom: 1px solid var(--rule);
  color: var(--ink); text-decoration: none; transition: background .15s; }
.pb-briques li:nth-child(odd) a { padding-right: 24px; }
.pb-briques li:nth-child(even) a { padding-left: 20px; border-left: 1px solid var(--rule); }
.pb-briques a:hover { background: #fff; }
.pb-briques .ico { width: 40px; height: 40px; padding: 10px; border-radius: 10px; background: #fff; border: 1px solid var(--rule); color: var(--ink); }
.pb-briques b { display: block; font: 700 15.5px/1.25 var(--f-display); }
.pb-briques small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--ink-3); }
.pb-briques em { padding: 2px 8px; border-radius: 99px; background: var(--neutral-bg); font: normal 600 11.5px/1.4 var(--f-text); color: var(--neutral-ink); white-space: nowrap; }
.pb-accueil-b { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 20px; padding-bottom: 0; }
.pb-accueil-b > div { padding-bottom: 20px; }
.pb-accueil-b p { margin: 0 0 10px; max-width: 62ch; color: var(--ink-2); line-height: 1.55; }
.pb-alex { display: block; align-self: end; width: 150px; height: auto; }

/* ---------------------------------------------------------------- pages « Fonctionnalité à venir » */
.pv { overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-1); }
.pv-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; padding: 34px 36px 0; border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, #fff 0%, var(--paper) 100%); }
.pv-tete-t { padding-bottom: 30px; }
.pv-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pv-titre h1:focus { outline: none; }
.pv-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 9px; border-radius: 99px; background: var(--ink); font: 600 13px/1.3 var(--f-text); color: #fff; white-space: nowrap; }
.pv-badge .ico { width: 16px; height: 16px; color: var(--red); stroke-width: 2.1; }
.pv-intro { max-width: 58ch; margin: 14px 0 0; font: 400 17px/1.55 var(--f-text); color: var(--ink-2); }
.pv-alex { display: block; width: auto; height: 200px; margin-right: 8px; object-fit: contain; object-position: bottom; }
.pv-h { margin: 0; font: 800 19px/1.25 var(--f-display); letter-spacing: -.015em; color: var(--ink); }
.pv > .pv-h { padding: 28px 36px 4px; }
.pv-points { margin: 0; padding: 0 36px 10px; list-style: none; }
.pv-points li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--paper-2); }
.pv-points li:first-child { border-top: 0; }
.pv-points .ico { width: 40px; height: 40px; padding: 10px; border-radius: 10px; background: var(--td2-active-bg); color: var(--red-deep); }
.pv-points b { display: block; font: 700 16px/1.3 var(--f-display); color: var(--ink); }
.pv-points span { display: block; max-width: 68ch; margin-top: 3px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.pv-note { margin: 4px 36px 28px; padding: 14px 18px; border-radius: 10px; background: var(--paper); font: 500 14.5px/1.5 var(--f-text); color: var(--ink); }
.pv-int { margin: 0 36px 28px; }
.pv-int .ab-int { padding-top: 0; }
.pv-contact { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 16px 36px; border-top: 1px solid var(--rule); background: var(--paper); font-size: 14px; color: var(--ink-2); }
.pv-contact .ico { margin-top: 1px; color: var(--ink-3); }
.pv-contact a { font-weight: 600; color: var(--red-deep); }

/* ---------------------------------------------------------------- abonnement */
.ab-tete .lede { margin-top: 12px; }
.ab-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.ab-pack { display: flex; flex-direction: column; padding: 0 26px 24px; border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-1); }
.ab-pack header { margin: 0 -26px; padding: 24px 26px 18px; border-bottom: 1px solid var(--rule); }
.ab-pack h2 { margin: 0; font: 800 20px/1.25 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.ab-pack header p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.ab-pack-2 { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--shadow-1); }
.ab-prix { margin: 18px 0 6px; font: 800 19px/1.25 var(--f-display); letter-spacing: -.015em; color: var(--ink); }
.ab-pack ul { margin: 0; padding: 0; list-style: none; }
.ab-pack li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 7px 0; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.ab-pack li .ico { width: 19px; height: 19px; margin-top: 1px; color: var(--green); stroke-width: 2.2; }
.ab-int { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: auto; padding-top: 18px; }
.ab-int-ok { display: flex; align-items: flex-start; gap: 8px; margin: 0; flex: 1 1 240px; font: 600 14px/1.4 var(--f-text); color: var(--green); }
.ab-int-ok .ico { flex: none; width: 18px; height: 18px; stroke-width: 2.4; }
.ab-int .pro-err { flex: 1 1 100%; }
.ab-bandes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.ab-bande { display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; }
.ab-bande h2 { margin: 0; font: 800 18px/1.25 var(--f-display); letter-spacing: -.015em; }
.ab-bande p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.ab-bande .ab-prix { margin-top: 10px; font-size: 16px; }
.ab-bande .ab-int { padding-top: 14px; }
.ab-fond { border-color: var(--ink); background: var(--ink); color: #fff; }
.ab-fond h2 { color: #fff; }
.ab-fond h2::before { content: ""; display: inline-block; width: 6px; height: .8em; margin-right: 11px; background: var(--red); transform: skew(-15deg); }
.ab-fond p { color: rgba(255, 255, 255, .78); }
.ab-fond .btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.ab-fond .btn.ghost:hover { background: rgba(255, 255, 255, .08); }
.ab-fond .ab-int-ok { color: #8fd8ae; }
.ab-note { display: flex; align-items: flex-start; gap: 10px; max-width: 80ch; margin: 22px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.ab-note .ico { flex: none; margin-top: 1px; color: var(--ink-3); }

/* ---------------------------------------------------------------- paramètres */
.pp-compte { margin: 0; }
.pp-compte > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 16px; padding: 11px 0; border-top: 1px solid var(--paper-2); }
.pp-compte > div:first-child { border-top: 0; padding-top: 2px; }
.pp-compte dt { font: 600 13.5px/1.4 var(--f-text); color: var(--ink-3); }
.pp-compte dd { margin: 0; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.ps-mdp { max-width: 460px; }

/* ---------------------------------------------------------------- tablette */
@media (max-width: 1100px) {
  .px-hero-in { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 36px; padding: 48px 32px 56px; }
  .px-bande-in, .px-creer-in, .px-offres-in { padding-left: 32px; padding-right: 32px; }
  .px-bande-in { grid-template-columns: minmax(0, 1fr) 220px; gap: 32px; }
  .px-inverse .px-bande-in { grid-template-columns: 220px minmax(0, 1fr); }
  .px-alex img { height: 280px; }
  body.ps-page .ps { grid-template-columns: 236px minmax(0, 1fr); }
  .ps-contenu { padding: 28px 28px 64px; }
  .pb-grille { grid-template-columns: minmax(0, 1fr); }
  .pb-cote { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hdp-ancres { display: none; }
}

/* ---------------------------------------------------------------- téléphone et petite tablette : menu repliable */
@media (max-width: 900px) {
  body.ps-page .ps { display: block; }
  .ps-mbar { position: sticky; top: var(--hdp-h); z-index: 45; display: block; background: #fff; border-bottom: 1px solid var(--rule); }
  .ps-mbtn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 0 16px; border: 0; background: none; font: 700 15.5px var(--f-text); color: var(--ink); text-align: left; cursor: pointer; }
  .ps-mbtn .ico { width: 22px; height: 22px; }
  .ps-mtitre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ps-mmenu { font: 500 13.5px var(--f-text); color: var(--ink-3); }
  .ps-mbtn .ico:last-child { width: 18px; height: 18px; color: var(--ink-3); transition: transform .2s var(--ease); }
  body.ps-ouvert .ps-mbtn .ico:last-child { transform: rotate(180deg); }
  .ps-menu { display: none; }
  body.ps-ouvert .ps-menu { position: fixed; z-index: 44; top: calc(var(--hdp-h) + 55px); left: 0; right: 0; bottom: 0; display: flex; height: auto; box-shadow: var(--shadow-2); }
  body.ps-ouvert { overflow: hidden; }
  .ps-contenu { padding: 22px 16px 56px; }
  .pb-cote { grid-template-columns: minmax(0, 1fr); }
  .pb-briques { grid-template-columns: minmax(0, 1fr); }
  .pb-briques li:nth-child(even) a { padding-left: 4px; border-left: 0; }
  .pb-briques li:nth-child(odd) a { padding-right: 16px; }
  .ab-packs, .ab-bandes { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  body.td-pro { --hdp-h: 60px; padding-bottom: env(safe-area-inset-bottom, 0px); }
  body.td-pro .hd.hdp { min-height: var(--hdp-h); padding: 0 16px; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
  .hdp-brand { gap: 8px; }
  .hdp-brand img { width: 124px; }
  .hdp-tag { padding: 2px 8px 3px 7px; font-size: 11.5px; }
  .hdp-nav { flex-wrap: nowrap; gap: 6px; }
  .hdp-pilotes { display: none; }
  .hdp-nav .hd-lang { display: flex; padding-left: 0; border-left: 0; }
  .hdp-nav .hd-lang .hl-c { display: inline; }
  .hdp-nav .hd-lang a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 4px; border: 0; font-size: 12px; letter-spacing: .02em; color: var(--ink-3); }
  .hdp-nav .hd-lang a[aria-current=true] { box-shadow: none; color: var(--ink); text-decoration: underline 2px var(--red); }
  .hdp-cta { position: relative; width: 40px; height: 40px; padding: 0; }
  .hdp-cta span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hdp-foot { padding-left: 16px; padding-right: 16px; }

  .px-hero::after { right: -260px; top: -90px; width: 460px; height: 430px; opacity: .55; }
  .px-hero-in { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 36px 16px 40px; }
  .px-hero h1 { font-size: clamp(36px, 11vw, 48px); }
  .px-lede { font-size: 16px; }
  .px-publics { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .px-publics li + li { border-left: 0; border-top: 1px solid var(--rule); }
  .px-publics a, .px-publics li + li a { padding: 12px 0; }
  .px-cnx-boite { padding: 22px 18px 20px; }
  .px-bande-in, .px-inverse .px-bande-in { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 40px 16px 0; }
  .px-bande-txt { padding-bottom: 40px; }
  .px-alex { display: none; }
  .px-liste li { grid-template-columns: minmax(0, 1fr); }
  .px-etat { grid-row: auto; margin: 0 0 6px; }
  .px-liste li > b, .px-liste li > span:last-child { grid-column: 1; }
  .px-offres-in { padding: 40px 16px; }
  .px-creer-in { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 40px 16px 56px; }
  .px-types { grid-template-columns: minmax(0, 1fr); }
  .px-lien-perso { margin: 0 16px 16px; }

  .pv-tete { grid-template-columns: minmax(0, 1fr) 92px; gap: 12px; padding: 22px 18px 0; }
  .pv-tete-t { padding-bottom: 22px; }
  .pv-alex { height: 128px; margin: 0; justify-self: end; }
  .pv-intro { font-size: 15.5px; }
  .pv > .pv-h { padding: 22px 18px 2px; }
  .pv-points { padding: 0 18px 6px; }
  .pv-points li { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
  .pv-points .ico { width: 36px; height: 36px; padding: 8px; }
  .pv-note { margin: 4px 18px 22px; }
  .pv-int { margin: 0 18px 22px; }
  .pv-contact { padding: 14px 18px; }
  .pb-liste li { grid-template-columns: 44px minmax(0, 1fr); }
  .pb-pl { grid-column: 2; justify-items: start; grid-auto-flow: column; align-items: center; justify-content: start; gap: 8px; }
  .pb-accueil-b { grid-template-columns: minmax(0, 1fr); }
  .pb-alex { display: none; }
  .pp-compte > div { grid-template-columns: minmax(0, 1fr); }
  .ab-pack { padding: 0 18px 20px; }
  .ab-pack header { margin: 0 -18px; padding: 20px 18px 16px; }
  .ab-bande { padding: 20px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-nav a, .pb-racc a .ico, .ps-mbtn .ico, .pb-briques a { transition: none; }
}

/* Connexion des pros (pro-connexion.html, page d'arrivée de pro.trackday.place) */
.pc-main { display: grid; place-items: center; min-height: calc(100dvh - 220px); padding: 40px 16px 56px; background: var(--paper-2); }
.pc-main[aria-busy=true] .pc-carte { visibility: hidden; }
.pc-carte { display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: end; width: min(860px, 100%); overflow: hidden;
  border-radius: var(--radius-lg); background: var(--paper); box-shadow: 0 0 0 1px var(--rule), 0 18px 48px rgba(10, 14, 22, .08); }
.pc-form { padding: 40px 44px 36px; }
.pc-sur { margin: 0 0 6px; color: var(--ink-3); font: 600 13px var(--f-text); letter-spacing: .02em; }
.pc-sur b { color: var(--td2-action, var(--red)); }
.pc-form h1 { margin: 0 0 8px; font: 800 30px/1.15 var(--f-display); letter-spacing: -.02em; }
.pc-lede { margin: 0 0 22px; color: var(--ink-2); font-size: 15px; }
.pc-form .cpt-form { max-width: 420px; }
.pc-form .cpt-form .btn { justify-self: stretch; justify-content: center; }
.pc-liens { margin: 12px 0 0; font-size: 14px; }
.pc-nouveau { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; max-width: 420px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--rule); }
.pc-nouveau p { flex: 1 0 100%; margin: 0; color: var(--ink-2); font-weight: 600; }
.pc-decouvrir { font-size: 14px; }
.pc-visuel { align-self: stretch; display: flex; align-items: flex-end; justify-content: center; padding-top: 24px;
  background: linear-gradient(160deg, var(--paper-2), color-mix(in srgb, var(--td2-action, #e0301e) 10%, var(--paper-2))); }
.pc-visuel img { width: 190px; height: auto; }
@media (max-width: 720px) {
  .pc-carte { grid-template-columns: 1fr; }
  .pc-visuel { display: none; }
  .pc-form { padding: 28px 20px 24px; }
  .pc-form h1 { font-size: 25px; }
}