/* Guide des organisateurs (pro.trackday.place) : decouvrir.html (problème → solution, accordéon) et comprendre.html (un volet
   par module, sommaire collant). Charte « Corde » (DESIGN.md) : blanc, gris clair, noir carbone, rouge en accent seulement.
   Préfixe gd-. Chargé après espace-pro.css (en-tête et pied des pages pros, --hdp-h). Aucune animation hors chevrons. */
.gd-main { flex: 1 0 auto; }
.gd-main [tabindex="-1"]:focus { outline: none; }
.gd-in { max-width: 1180px; margin: 0 auto; padding: 0 48px; }

/* ---------------------------------------------------------------- parcours (Découvrir · Comprendre · Essayer · Maîtriser) */
.gd-parcours { background: #fff; border-bottom: 1px solid var(--rule); }
.gd-parcours ol { display: flex; gap: 0; max-width: 1180px; margin: 0 auto; padding: 0 48px; list-style: none; counter-reset: gd-e; overflow-x: auto; scrollbar-width: none; }
.gd-parcours ol::-webkit-scrollbar { display: none; }
.gd-parcours li { counter-increment: gd-e; flex: none; }
.gd-parcours a, .gd-parcours span.gd-e, .gd-parcours button.gd-e { display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 0 18px 0 0; margin-right: 18px;
  font: 600 14px/1.2 var(--f-text); color: var(--ink-3); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.gd-parcours a::before, .gd-parcours span.gd-e::before, .gd-parcours button.gd-e::before { content: counter(gd-e); display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--rule-strong); font: 700 12.5px/1 var(--f-text); color: var(--ink-3); }
.gd-parcours a:hover, .gd-parcours button.gd-e:hover { color: var(--ink); }
/* « Essayer » : formulaire qui ouvre la démo sans compte (POST /api/demo/ouvrir, serveur/demo_explorable.py) */
.gd-demo-f { display: contents; }
.gd-parcours button.gd-e { background: none; border-width: 0 0 3px; border-radius: 0; cursor: pointer; }
.gd-parcours button.gd-e:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
.gd-parcours a[aria-current="step"] { color: var(--ink); border-bottom-color: var(--red); }
.gd-parcours a[aria-current="step"]::before { border-color: var(--ink); background: var(--ink); color: #fff; }
.gd-parcours small { font: 600 11.5px/1 var(--f-text); padding: 3px 7px; border-radius: 99px; background: var(--neutral-bg); color: var(--neutral-ink); }

/* ---------------------------------------------------------------- ouverture */
.gd-hero { position: relative; overflow: hidden; background: #fff; border-bottom: 1px solid var(--rule); }
.gd-hero::after { content: ""; position: absolute; right: -170px; top: -70px; width: 480px; height: 446px; background: url("assets/deco/vibreur-courbe.svg") no-repeat right top / contain; opacity: .55; pointer-events: none; }
.gd-hero .gd-in { position: relative; z-index: 1; padding-top: 56px; padding-bottom: 56px; }
.gd-sur { margin: 0 0 14px; font: 700 13px/1.2 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--red-deep); }
.gd-hero h1 { max-width: 18ch; margin: 0; font: 800 clamp(36px, 4.6vw, 64px)/1.04 var(--f-display); letter-spacing: -.04em; color: var(--ink); text-wrap: balance; }
.gd-pt { color: var(--red); }
.gd-lede { max-width: 62ch; margin: 20px 0 0; font: 400 clamp(16.5px, 1.4vw, 19px)/1.55 var(--f-text); color: var(--ink-2); }
.gd-note { display: flex; gap: 10px; max-width: 72ch; margin: 22px 0 0; padding: 12px 16px; border-radius: 10px; background: var(--paper); border: 1px solid var(--rule);
  font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.gd-note .ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--ink-3); }
.gd-hero-act { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 26px 0 0; }
.gd-hero-act a:not(.btn) { font-weight: 600; color: var(--red-deep); text-underline-offset: 3px; }

/* ---------------------------------------------------------------- Découvrir : accordéon problème → solution */
.gd-pbs { padding-top: 40px; padding-bottom: 48px; }
.gd-pbs-tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin: 0 0 18px; }
.gd-h2 { display: flex; align-items: center; margin: 0; font: 800 clamp(24px, 2.4vw, 32px)/1.15 var(--f-display); letter-spacing: -.03em; color: var(--ink); }
.gd-h2::before { content: ""; flex: none; width: 7px; height: .8em; margin-right: 14px; background: var(--red-deep); transform: skew(-15deg); }
.gd-tout { min-height: 40px; padding: 0 14px; border: 1px solid var(--rule-strong); border-radius: 8px; background: #fff; color: var(--ink); font: 600 14px var(--f-text); cursor: pointer; }
.gd-tout:hover { border-color: var(--ink); }
.gd-tout:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 2px; }
.gd-liste { display: grid; gap: 10px; }
.gd-pb { border: 1px solid var(--rule); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(22, 26, 29, .04); scroll-margin-top: calc(var(--hdp-h, 68px) + 16px); }
.gd-pb[open] { border-color: var(--rule-strong); box-shadow: 0 8px 24px rgba(22, 26, 29, .06); }
.gd-pb > summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 22px; align-items: center; gap: 14px; min-height: 68px; padding: 14px 20px;
  cursor: pointer; list-style: none; border-radius: 12px; }
.gd-pb > summary::-webkit-details-marker { display: none; }
.gd-pb > summary:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 2px; }
.gd-num { font: 800 22px/1 var(--f-display); letter-spacing: -.03em; color: var(--rule-strong); }
.gd-pb[open] .gd-num { color: var(--red); }
.gd-q { font: 700 17px/1.35 var(--f-display); letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
.gd-pb > summary:hover .gd-q { color: var(--red-deep); }
.gd-mod-tag { padding: 4px 10px; border-radius: 99px; background: var(--paper-2); font: 600 12.5px/1.3 var(--f-text); color: var(--ink-2); white-space: nowrap; }
.gd-pb > summary .ico { width: 20px; height: 20px; color: var(--ink-3); transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.gd-pb[open] > summary .ico { transform: rotate(180deg); color: var(--red-deep); }
.gd-rep { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: start; padding: 4px 20px 22px 78px; }
/* coachs et partenaires (decouvrir-coach.html…, 26/10) : réponse sans capture, sur une colonne */
.gd-rep.gd-rep-seul { grid-template-columns: minmax(0, 1fr); }
/* comprendre.html : offres commerciales en cours de définition (aucun pack, aucun prix ; décision d'Olivier du 26/10) */
.gd-offres-neutre { margin: 0; padding: 18px 22px; border: 1px dashed var(--rule-strong); border-radius: 14px; font-size: 15.5px; color: var(--ink-2); }
.gd-rep-txt p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
.gd-rep-txt .gd-mod-nom { margin-bottom: 6px; font: 700 13px/1.3 var(--f-text); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.gd-voir { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--red-deep); text-underline-offset: 3px; }
.gd-voir::after { content: "→"; display: inline-block; }
.gd-dispo { display: inline-block; margin: 0 0 12px; padding: 3px 10px; border-radius: 99px; font: 600 12.5px/1.35 var(--f-text); background: var(--neutral-bg); color: var(--neutral-ink); }
.gd-dispo.ok { background: var(--green-2); color: var(--green); }

/* ---------------------------------------------------------------- captures */
.gd-fig { margin: 0; }
.gd-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); box-shadow: 0 10px 30px rgba(22, 26, 29, .08); }
.gd-fig figcaption { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.gd-fig.gd-tel { max-width: 300px; }
.gd-fig.gd-tel img { border-radius: 22px; }
.gd-figs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.gd-figs.gd-deux { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.gd-figs.gd-avec-tel { grid-template-columns: minmax(0, 1fr) 240px; align-items: start; }

/* ---------------------------------------------------------------- appel final */
.gd-fin { background: var(--ink); color: #fff; }
.gd-fin .gd-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 48px; align-items: center; padding-top: 52px; padding-bottom: 52px; }
.gd-fin h2 { display: flex; align-items: center; margin: 0; font: 800 clamp(26px, 2.8vw, 36px)/1.12 var(--f-display); letter-spacing: -.035em; color: #fff; }
.gd-fin h2::before { content: ""; flex: none; width: 8px; height: .8em; margin-right: 16px; background: var(--red); transform: skew(-15deg); }
.gd-fin p { max-width: 58ch; margin: 12px 0 0; color: #d6dade; line-height: 1.55; }
.gd-fin a:not(.btn) { color: #fff; text-underline-offset: 3px; }
.gd-fin-act { display: grid; gap: 10px; min-width: 260px; }
.gd-fin-act .btn { justify-content: center; }
.gd-bientot { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 1px dashed #5b636b; border-radius: 8px;
  color: #b9bfc5; font: 600 14px var(--f-text); cursor: default; }
.gd-bientot small { padding: 2px 8px; border-radius: 99px; background: #2c3237; color: #e6e9ec; font: 600 11.5px/1.4 var(--f-text); }
.gd-fin-act .gd-demo { width: 100%; justify-content: center; min-height: 44px; }
.gd-fin .gd-demo-note { margin: -4px 0 4px; font-size: 13px; color: #b9bfc5; text-align: center; }
.gd-pied-q { margin: 0; font-size: 14px; color: #b9bfc5; }

/* ---------------------------------------------------------------- Comprendre : sommaire collant + volets */
.gd-cadre { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 48px; align-items: start; padding-top: 36px; padding-bottom: 56px; }
.gd-som { position: sticky; top: calc(var(--hdp-h, 68px) + 20px); max-height: calc(100vh - var(--hdp-h, 68px) - 40px); overflow-y: auto; }
.gd-som > summary { display: none; }
.gd-som p { margin: 0 0 10px; font: 700 12.5px/1.2 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.gd-som ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--rule); }
.gd-som a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.35; color: var(--ink-2); text-decoration: none; }
.gd-som a:hover { color: var(--ink); }
.gd-som a[aria-current="true"] { border-left-color: var(--red); color: var(--ink); font-weight: 600; }
.gd-som a:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 1px; }
.gd-mods { display: grid; gap: 22px; min-width: 0; }
.gd-mod { padding: 28px 30px; border: 1px solid var(--rule); border-radius: 14px; background: #fff; scroll-margin-top: calc(var(--hdp-h, 68px) + 16px); }
.gd-mod h2 { display: flex; align-items: center; margin: 0; font: 800 clamp(22px, 2.1vw, 28px)/1.15 var(--f-display); letter-spacing: -.03em; color: var(--ink); }
.gd-mod h2::before { content: ""; flex: none; width: 7px; height: .8em; margin-right: 14px; background: var(--red-deep); transform: skew(-15deg); }
.gd-mod-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.gd-mod-tete .gd-dispo { margin: 0; }
.gd-mod-lede { max-width: 66ch; margin: 0 0 18px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.gd-points { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 28px; margin: 0 0 22px; }
.gd-points > div { padding-top: 12px; border-top: 1px solid var(--rule); }
.gd-points dt { margin: 0 0 6px; font: 700 13px/1.3 var(--f-text); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.gd-points dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.gd-points ul { margin: 0; padding-left: 18px; }
.gd-points li { margin: 0 0 4px; }
.gd-bientot-txt { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-3); }
.gd-haut { display: inline-block; margin-top: 14px; font-size: 13.5px; color: var(--ink-3); }

/* ---------------------------------------------------------------- tablette et téléphone */
@media (max-width: 980px) {
  .gd-in, .gd-parcours ol { padding-left: 32px; padding-right: 32px; }
  .gd-hero::after { right: -260px; opacity: .4; }
  .gd-rep { grid-template-columns: minmax(0, 1fr); padding-left: 20px; }
  .gd-cadre { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .gd-som { position: static; max-height: none; border: 1px solid var(--rule); border-radius: 12px; background: #fff; }
  .gd-som > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 16px; font: 700 15px var(--f-text); color: var(--ink); cursor: pointer; list-style: none; }
  .gd-som > summary::-webkit-details-marker { display: none; }
  .gd-som > summary .ico { width: 18px; height: 18px; transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
  .gd-som[open] > summary .ico { transform: rotate(180deg); }
  .gd-som > p { display: none; }
  .gd-som ol { margin: 0 16px 14px; }
}
@media (max-width: 720px) {
  .gd-in, .gd-parcours ol { padding-left: 16px; padding-right: 16px; }
  .gd-hero::after { right: -300px; opacity: .45; }
  .gd-hero .gd-in { padding-top: 36px; padding-bottom: 36px; }
  .gd-pb > summary { grid-template-columns: 30px minmax(0, 1fr) 20px; gap: 10px; padding: 14px; }
  .gd-pb > summary .gd-mod-tag { display: none; }
  .gd-num { font-size: 17px; }
  .gd-q { font-size: 16px; }
  .gd-rep { padding: 0 14px 18px; gap: 18px; }
  .gd-figs.gd-deux, .gd-figs.gd-avec-tel, .gd-points { grid-template-columns: minmax(0, 1fr); }
  .gd-fig.gd-tel { max-width: 240px; margin: 0 auto; }
  .gd-mod { padding: 20px 16px; border-radius: 12px; }
  .gd-fin .gd-in { grid-template-columns: minmax(0, 1fr); padding-top: 40px; padding-bottom: 40px; }
  .gd-fin-act { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .gd-pb > summary .ico, .gd-som > summary .ico { transition: none; } }

/* ---------------------------------------------------------------- pro.html : liens vers le guide (bande Organisateurs) */
.px-guide { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: -8px 0 22px; }
.px-guide a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--red-deep); text-underline-offset: 3px; }
.px-guide a::after { content: "→"; display: inline-block; }
.px-demo-note { margin: 10px 0 0;   /* sous les boutons (.ep-actions sans marge basse) : ne les chevauche plus */ font-size: 13px; color: var(--ink-3, #6b7178); }