/* « Onboard & Telemetry » (26/10/2026, serveur/onboard.py) : vidéo du tour (vignette puis lecteur YouTube officiel, temps-tour.js),
   encarts « Connecte ta chaîne » (onboard.js), page du module (onboard.html, onboard-page.js), fenêtre « Vidéo YouTube » d'un chrono.
   Rien n'est posé par-dessus le lecteur une fois chargé (règles de YouTube) : le bouton lecture n'existe que sur la vignette. */

/* ---------- Vidéo du tour ---------- */
.ob-ico { width: 16px; height: 16px; }
.tc-b.ob-badge { background: #fdecea; color: var(--red-hover); }
.ob-video { margin: 12px 0 4px; }
.ob-vign { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden;
  background: var(--night); cursor: pointer; }
.ob-vign img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ob-vign:focus-visible { outline: 3px solid var(--red-deep); outline-offset: 3px; }
.ob-lire { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%); }
.ob-lire-f { fill: #212121; fill-opacity: .82; transition: fill .15s; }
.ob-lire-p { fill: #fff; }
.ob-vign:hover .ob-lire-f, .ob-vign:focus-visible .ob-lire-f { fill: #f00; fill-opacity: 1; }
.ob-iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); background: var(--night); }
.ob-video-p { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 6px 2px 0; color: var(--ink-3); font: 500 12.5px/1.4 var(--f-text); }
.ob-video-p a { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-weight: 600; text-decoration: none; }
.ob-video-p a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ob-video-p .ico { width: 13px; height: 13px; }
/* Ligne de classement : icône vidéo (déplie la carte du temps) */
.lb-vid { position: relative; z-index: 2; display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--rule);
  border-radius: 7px; background: #fff; color: var(--red-hover); cursor: pointer; }
.lb-vid .ob-ico { width: 15px; height: 15px; }
.lb-vid:hover { background: #fdecea; }
.lb-vid:focus-visible { outline: 3px solid var(--red-deep); outline-offset: 2px; }

/* ---------- Encart « Connecte ta chaîne YouTube » (inscription, Mon espace) ---------- */
.ob-encart { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: start; margin: 16px 0; padding: 16px 18px; border: 1px solid var(--rule);
  border-radius: var(--radius); background: #fff; }
.ob-encart-i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fdecea; color: var(--red-hover); }
.ob-encart-i svg { width: 26px; height: 26px; }
.ob-encart h2, .ob-encart h3 { margin: 0 0 4px; font: 800 17px/1.3 var(--f-display); color: var(--ink); }
.ob-encart p { margin: 0 0 8px; color: var(--ink-2); font-size: 14.5px; }
.ob-encart-a { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; grid-column: 2; }
.ob-encart .ob-bientot { display: inline-block; padding: 3px 10px; border-radius: 99px; background: var(--neutral-bg); color: var(--neutral-ink); font: 600 13px var(--f-text); }
.ob-encart-n { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; margin-left: 6px; padding: 0 6px;
  border-radius: 99px; background: var(--red-deep); color: #fff; font: 700 12px var(--f-text); }
.ob-legal { margin: 8px 0 0; color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }
.ob-legal a { color: var(--ink-2); }
@media (max-width: 520px) {
  .ob-encart { grid-template-columns: 1fr; }
  .ob-encart-a { grid-column: 1; }
}

/* ---------- Page du module ---------- */
.ob-page .ob-nom { font-family: var(--f-display); }
.ob-sections { display: grid; gap: 18px; margin-top: 18px; }
.ob-carte-b { padding: 14px 20px 20px; }
.ob-carte-b > p { margin: 0 0 10px; color: var(--ink-2); }
.ob-chaine { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ob-chaine b { font: 800 17px/1.3 var(--f-display); }
.ob-etat { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font: 600 13px var(--f-text); }
.ob-etat.is-ok { background: var(--green-2); color: var(--green); }
.ob-etat.is-att { background: var(--warn-bg); color: var(--yellow-ink); }
.ob-actions { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-top: 12px; }
.ob-form-adr { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 12px; }
.ob-form-adr .fld { flex: 1 1 260px; margin: 0; }
.ob-ou { margin: 14px 0 0; color: var(--ink-3); font: 600 13px var(--f-text); text-transform: uppercase; letter-spacing: .04em; }
.ob-coche { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }
.ob-coche input { width: 20px; height: 20px; margin-top: 1px; flex: none; }
.ob-msg { margin: 10px 0 0; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--neutral-bg); color: var(--ink-2); }
.ob-msg.is-ok { background: var(--green-2); color: var(--green); }
.ob-msg.is-ko { background: var(--danger-bg); color: var(--danger); }

/* Revue des tours proposés */
.ob-props { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ob-prop { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 14px; padding: 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.ob-prop-v img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); background: var(--night); }
.ob-prop-v p { margin: 6px 0 0; font: 600 13.5px/1.35 var(--f-text); color: var(--ink); overflow-wrap: anywhere; }
.ob-prop-v small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 12.5px; }
.ob-prop-f { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 12px; align-items: start; align-content: start; }
.ob-prop-f .fld { margin: 0; min-width: 0; }
.ob-prop-f .fld input, .ob-prop-f .fld select { width: 100%; }
.ob-prop-f .ob-large { grid-column: 1 / -1; }
.ob-indice { display: block; margin-top: 2px; color: var(--ink-3); font-size: 12px; }
.ob-indice.is-trouve { color: var(--green); }
.ob-prop-a { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 1 / -1; align-items: center; }
.ob-prop-a .pro-err { flex-basis: 100%; margin: 0; }
.ob-ignorees summary { cursor: pointer; color: var(--ink-2); font-weight: 600; min-height: 36px; display: flex; align-items: center; }
.ob-ignorees ul { display: grid; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.ob-ignorees li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--paper); }
@media (max-width: 640px) {
  .ob-prop { grid-template-columns: 1fr; }
  .ob-prop-v { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: start; }
  .ob-prop-v p { margin: 0; }
  .ob-prop-f { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ob-prop-f .fld[data-txt], .ob-prop-f .fld:has(select[name=voiture]) { grid-column: 1 / -1; }
}

/* Vidéos récentes */
.ob-filtres { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-start; margin-bottom: 14px; }
.ob-filtres .fld { margin: 0; flex: 1 1 200px; }
.ob-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ob-grille > li { min-width: 0; }
.ob-grille .tc { height: 100%; }
.ob-plus { margin-top: 14px; }
.ob-vide { margin: 0; padding: 18px; border: 1px dashed var(--rule-strong); border-radius: var(--radius); color: var(--ink-2); text-align: center; }

/* Duels (partie 2) */
.ob-duels { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; }
.ob-duels-i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--paper-2); color: var(--ink-2); }
.ob-duels-i svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ob-duels p { margin: 0; color: var(--ink-2); }
.ob-bientot-t { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 99px; background: var(--warn-bg); color: var(--yellow-ink); font: 700 12px var(--f-text); vertical-align: middle; }

/* Profil public : onglet « Onboard & Telemetry » */
.pl-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }

/* Fiche circuit : dernières vidéos */
.ci-videos .ob-grille { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.ci-videos .tt-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }

/* Fenêtre « Vidéo YouTube » d'un chrono (Mes performances) */
.ob-lien-f { display: grid; gap: 12px; }
.ob-lien-f .g-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ob-lien-apercu:empty { display: none; }
.ob-lien-apercu img { display: block; width: 100%; height: auto; max-width: 360px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); }
.ci-videos .ep-lien { display: inline-flex; align-items: center; gap: 4px; color: var(--red-deep); font: 600 14px var(--f-text); text-decoration: none; }
.ci-videos .ep-lien:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Champs des formulaires du module (même rendu que .cpt-form, hors de sa grille étroite) */
.ob-prop-f .fld input, .ob-prop-f .fld select, .ob-filtres .fld input, .ob-filtres .fld select, .ob-form-adr .fld input {
  width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: #fff;
  font: 500 15px var(--f-text); color: var(--ink); }
.ob-prop-f .fld select, .ob-filtres .fld select { padding-right: 30px; }
.ob-prop-f .fld input:focus, .ob-prop-f .fld select:focus, .ob-filtres .fld input:focus, .ob-filtres .fld select:focus, .ob-form-adr .fld input:focus {
  outline: none; border-color: var(--ink); box-shadow: var(--focus); }
.ob-prop-v { align-self: start; }
/* Taille raisonnable du lecteur dans les cartes (Mes performances, profil, classements dépliés) */
.ep-record .ob-video, .tc .ob-video { max-width: 520px; }
.ob-grille .tc .ob-video, .pl-videos .tc .ob-video { max-width: none; }