/* ClicksLab — phase 2 : plaque d'essai (niveau Inventeur), espace enseignant, projection. */

/* ================= Plaque d'essai ================= */
.bb-hole { fill: #c9cedd; transition: fill .12s; }
.bb-hole.hl, .cl-board .hole.hl { fill: #74c0fc; }
.bb-hole.hov, .cl-board .hole.hov { fill: #1c7ed6; filter: drop-shadow(0 0 3px #4dabf7); }
.wl-svg.wiring .bb-hole.hov, .wl-svg.wiring .hole.hov { fill: #12b886; filter: drop-shadow(0 0 4px #12b886); }
.bb-lbl { font: 800 8px "Nunito", sans-serif; fill: #9aa0b8; }
.bb-sign { font: 800 13px "Nunito", sans-serif; }
.bb-sign.plus { fill: #e03131; }
.bb-sign.minus { fill: #1c7ed6; }
.bb-note { font: 800 10px "Nunito", sans-serif; fill: #5b6187; }
.bb-plus { font: 800 11px "Nunito", sans-serif; fill: #e03131; pointer-events: none; }
.bb-xray path { stroke: #adb5d6; stroke-width: 5; stroke-linecap: round; opacity: 0; transition: opacity .25s; fill: none; }
.bb-xray path[stroke] { stroke-width: 3; }
.xray .bb-xray path { opacity: .55; }
.wl-svg { touch-action: none; -webkit-user-select: none; user-select: none; }
.wl-svg .scene, .wl-svg .cl-board { cursor: crosshair; }
.wl-led { cursor: pointer; outline: none; }
.wl-led .halo, .wl-led .leg, .wl-led .bb-plus, .wl-res path, .wl-btn > path, .wl-buzz > path, .wl-buzz .ring { pointer-events: none; }
.wl-led .leg { fill: none; stroke: #9aa0b4; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wl-led .flat { stroke: #fff; stroke-width: 2; opacity: .6; }
.wl-led:focus-visible .lens { stroke: #ffd43b; stroke-width: 2; }
.wl-led.burnt .lens { filter: grayscale(1) brightness(.35) !important; }
.wl-led.burnt .halo { opacity: 0 !important; }
.wl-smoke { fill: #868e96; opacity: 0; animation: smoke 1.6s ease-out forwards; pointer-events: none; transform-box: fill-box; transform-origin: center; }
@keyframes smoke { 0% { opacity: .8; transform: translateY(0) scale(.6); } 100% { opacity: 0; transform: translateY(-40px) scale(2.2); } }
.wl-btn { cursor: pointer; outline: none; }
.wl-btn .cap { transition: transform .08s; transform-box: fill-box; transform-origin: center; }
.wl-btn.down .cap { transform: translateY(1.5px) scale(.88); }
.wl-btn:focus-visible rect { stroke: #ffd43b; stroke-width: 2.5; }
.jw { cursor: pointer; }
.jw .hit { stroke: transparent; stroke-width: 14; fill: none; }
.jw .flow { stroke-dasharray: 3 10; opacity: 0; }
.jw.on .flow { opacity: .95; animation: flow .6s linear infinite; }
.jw.sel .core { stroke-width: 5.5; filter: drop-shadow(0 0 4px #ffd43b); }
.jw.fixed { cursor: default; }
.wl-band { fill: none; stroke-width: 3.5; stroke-dasharray: 6 6; stroke-linecap: round; opacity: .8; pointer-events: none; animation: flow .8s linear infinite; }
.wl-del { cursor: pointer; outline: none; }
.wl-del circle { fill: #f03e3e; stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .35)); }
.wl-del text { font: 800 12px "Nunito", sans-serif; fill: #fff; pointer-events: none; }
.wl-del:hover circle, .wl-del:focus-visible circle { fill: #c92a2a; }

/* Zone de câblage : la plaque passe au centre */
.ws.wire-on .blockly, .ws.wire-on .ws-hud { visibility: hidden; }
.wirearea { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.wirebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wcolors { display: flex; gap: 6px; padding: 5px 8px; border-radius: 14px; background: var(--paper-2); border: 1px solid var(--line); margin-right: auto; }
.wc { width: 28px; height: 28px; border-radius: 50%; background: var(--wc); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); transition: transform .15s; }
.wc:hover { transform: scale(1.12); }
.wc[aria-checked="true"] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--wc); transform: scale(1.08); }
.wirebar .btn.sm { min-height: 40px; }
#wXray[aria-pressed="true"] { background: color-mix(in srgb, #4dabf7 18%, var(--paper)); border-color: #4dabf7; }
.stageslot { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.stageslot .stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.stageslot .cl-svg { width: auto; height: 100%; max-width: 100%; max-height: 100%; }
.wirehelp { margin: 0; text-align: center; font-weight: 800; font-size: .85rem; color: var(--ink-soft); }
.stagenote { margin: 0; padding: 18px; border-radius: 18px; text-align: center; font-weight: 800; background: color-mix(in srgb, var(--c1) 10%, var(--paper)); border: 2px dashed color-mix(in srgb, var(--c1) 40%, transparent); }
.lab.wiring .stage { background: #e9ecf6; }
@media (max-width: 1099px) {
  .lab[data-tab="blocks"] .ws.wire-on { height: auto; min-height: 0; }
  .ws.wire-on .wirearea { position: relative; padding: 10px; }
  .ws.wire-on .stageslot { flex: none; }
  .stageslot .stage { height: auto; }
  .stageslot .cl-svg { width: 100%; height: auto; }
  .wirebar .t { display: none; }
}

/* ================= Accueil : niveaux, parcours, code de classe ================= */
.lvl-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 4px 2px 0; }
.lvl-head:not(:first-child) { margin-top: 18px; }
.lvl-ico { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-size: 1.5rem; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); flex: none; }
.lvl-head.inv .lvl-ico { background: linear-gradient(135deg, #ffd43b, #ff922b); border: 0; }
.lvl-head b { display: block; font: 600 1.3rem "Fredoka", sans-serif; }
.lvl-head b em { font: 800 .7rem "Nunito", sans-serif; font-style: normal; vertical-align: middle; margin-left: 6px; padding: 3px 9px; border-radius: 99px; color: #fff; background: linear-gradient(135deg, #ff6b3d, #f15bb5); }
.lvl-head span { color: var(--ink-soft); font-weight: 700; font-size: .93rem; }
.inv-tag { position: absolute; z-index: 2; top: 10px; left: 10px; font: 800 .72rem "Nunito", sans-serif; font-style: normal; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .92); color: #23264a; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .3); }
.mcard.inv .mcard-art { background-image: radial-gradient(circle, rgba(255, 255, 255, .35) 1.6px, transparent 2px), linear-gradient(135deg, var(--c1), var(--c2)); background-size: 16px 16px, auto; }
.hero-mini { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; }
.linkbtn { font-weight: 800; color: var(--ink-soft); padding: 6px 2px; border-bottom: 2px dashed color-mix(in srgb, var(--ink-soft) 40%, transparent); transition: color .2s, border-color .2s; border-radius: 0; }
.linkbtn:hover { color: var(--ink); border-color: var(--ink); }
@media (max-width: 860px) { .hero-mini { justify-content: center; } }
.parcours { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: -4px 0 18px; padding: 14px 18px; border-radius: 20px; color: #fff; background: linear-gradient(120deg, #4c6ef5, #9b5de5 60%, #f15bb5); box-shadow: 0 14px 30px -16px #4c6ef5; animation: wipIn .6s cubic-bezier(.2, 1.3, .4, 1) backwards; }
.pc-ico { font-size: 2rem; }
.pc-txt { display: flex; flex-direction: column; margin-right: auto; }
.pc-txt b { font: 600 1.2rem "Fredoka", sans-serif; }
.pc-txt span { font-weight: 700; opacity: .92; }

/* ================= Espace enseignant ================= */
.prof-chip { background: linear-gradient(135deg, color-mix(in srgb, #ffd43b 30%, var(--paper)), var(--paper)); }
.prof-hero { padding-block: clamp(26px, 5vw, 56px) 8px; }
.prof-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin: 14px 0 10px; }
.prof-hero p { color: var(--ink-soft); font-size: 1.08rem; max-width: 44rem; margin: 0; }
.prof-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.prof-nav button { padding: 9px 16px; border-radius: 999px; font-weight: 800; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 2px 8px -4px rgba(0, 0, 0, .18); min-height: 42px; transition: transform .2s, box-shadow .2s; }
.prof-nav button:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.prof-sec { padding-block: 26px 10px; scroll-margin-top: 76px; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.fcard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; text-align: left; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .25s cubic-bezier(.2, 1.4, .4, 1), box-shadow .25s; }
.fcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg), 0 0 0 3px color-mix(in srgb, var(--c1) 30%, transparent); }
.fcard .fe { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.6rem; flex: none; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.fcard .ft { display: flex; flex-direction: column; min-width: 0; }
.fcard small { font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c1); }
.fcard b { font: 600 1.05rem "Fredoka", sans-serif; }
.fcard i { font-style: normal; font-size: .82rem; color: var(--ink-soft); font-weight: 700; }
.pk { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.pk-it { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--paper); border: 2px solid var(--line); cursor: pointer; font-weight: 800; transition: border-color .2s, background .2s; min-height: 48px; }
.pk-it input { width: 20px; height: 20px; accent-color: var(--c1); flex: none; }
.pk-it span { flex: 1; }
.pk-it small { color: var(--ink-soft); font-weight: 700; }
.pk-it:has(input:checked) { border-color: var(--c1); background: color-mix(in srgb, var(--c1) 9%, var(--paper)); }
.pk-out { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.pk-code { display: inline-flex; flex-direction: column; align-self: flex-start; padding: 14px 22px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #4c6ef5, #9b5de5); box-shadow: 0 14px 30px -16px #4c6ef5; }
.pk-code span { font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.pk-code b { font: 700 2.2rem "JetBrains Mono", monospace; letter-spacing: 3px; }
.pk-code small { font-weight: 700; opacity: .9; }
.pk-url { text-align: left; word-break: break-all; margin: 0; }
.rv-form { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-form .inp { flex: 1; min-width: 160px; }
#rvCode { text-transform: uppercase; letter-spacing: 2px; font-family: "JetBrains Mono", monospace; }
.rv-wrap { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.rv-scroll { overflow-x: auto; border-radius: 18px; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow); }
.rv { border-collapse: collapse; width: 100%; font-weight: 700; font-size: .9rem; }
.rv th, .rv td { padding: 8px 9px; text-align: center; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rv thead th { font-size: 1.15rem; background: var(--paper-2); }
.rv tbody th, .rv tfoot th { text-align: left; }
.rv td.s0 { color: color-mix(in srgb, var(--ink-soft) 50%, transparent); }
.rv td.s1, .rv td.s2, .rv td.s3 { color: #e8a200; letter-spacing: -1px; }
.rv td.s3 { background: color-mix(in srgb, var(--ok) 10%, transparent); }
.rv tfoot td, .rv tfoot th { background: var(--paper-2); color: var(--ink-soft); }
.rv-x { width: 32px; height: 32px; border-radius: 50%; color: var(--ink-soft); }
.rv-x:hover { background: color-mix(in srgb, var(--ko) 14%, transparent); color: var(--ko); }
.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 800; position: relative; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .sl { width: 54px; height: 30px; border-radius: 99px; background: color-mix(in srgb, var(--ink-soft) 35%, transparent); position: relative; transition: background .25s; flex: none; }
.switch .sl::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.switch input:checked + .sl { background: linear-gradient(135deg, #12b886, #38d9a9); }
.switch input:checked + .sl::after { transform: translateX(24px); }
.switch input:focus-visible + .sl { outline: 3px solid #4c6ef5; outline-offset: 3px; }
.adm { margin-top: 14px; font-weight: 800; color: var(--ink-soft); }
.modal-card.wide { width: min(760px, 100%); }
.fiche header { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; padding-right: 36px; }
.fiche .fe { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 2rem; flex: none; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.fiche small { font-weight: 800; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c1); }
.fiche h2 { font-size: 1.7rem; }
.fiche h3 { font-size: 1.05rem; margin: 16px 0 6px; }
.fiche p, .fiche li { color: var(--ink-soft); }
.fiche ul, .fiche ol { margin: 0; padding-left: 20px; }
.fiche li { margin: 3px 0; }
.fmeta { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.fmeta span { padding: 5px 12px; border-radius: 99px; font-weight: 800; font-size: .85rem; background: var(--paper-2); border: 1px solid var(--line); color: var(--ink); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.tags i { font-style: normal; font-weight: 800; font-size: .82rem; padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--c1) 13%, transparent); color: var(--c1); font-family: "JetBrains Mono", monospace; }
.f-tip { margin: 16px 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--paper-2); font-weight: 700; font-size: .9rem; }
.bigcode { text-align: center; }
.bigcode > b { display: block; margin: 12px 0; font: 700 clamp(2.2rem, 8vw, 3.6rem) "JetBrains Mono", monospace; letter-spacing: 4px; background: linear-gradient(135deg, #4c6ef5, #f15bb5); -webkit-background-clip: text; background-clip: text; color: transparent; overflow-wrap: anywhere; }
.bigcode ol { text-align: left; display: inline-block; margin: 0; color: var(--ink-soft); font-weight: 700; }
.bigcode h2 { font-size: 1.6rem; }
.linkbtn:focus-visible, .prof-nav button:focus-visible { outline: 3px solid #4c6ef5; outline-offset: 3px; }

/* ================= Projection (compte administrateur) ================= */
.proj-btn[aria-pressed="true"] { color: #fff; background: linear-gradient(135deg, #4c6ef5, #9b5de5); border-color: transparent; }
body.proj .topbar, body.proj .blobs, body.proj .wip-badge, body.proj .mission { display: none !important; }
body.proj .lab { height: 100vh; height: 100dvh; padding: 14px 18px; }
body.proj .lab-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
body.proj .lab-id b { font-size: 1.8rem; }
body.proj .lab-emoji, body.proj .back { width: 58px; height: 58px; font-size: 2rem; }
body.proj .pill { font-size: 1.05rem; min-height: 48px; }
body.proj .codebox pre { font-size: 15px; max-height: 34vh; }
body.proj .btn.run { font-size: 1.3rem; min-height: 56px; }
@media (max-width: 1099px) { .proj-btn { display: none !important; } }

/* ================= Impression d'une fiche ================= */
@media print {
  body.print-fiche > *:not(.modal) { display: none !important; }
  body.print-fiche .modal { position: static; background: none; backdrop-filter: none; padding: 0; opacity: 1; display: block; }
  body.print-fiche .modal-card { box-shadow: none; width: 100%; max-height: none; overflow: visible; transform: none; padding: 0; }
  body.print-fiche .modal-card .x, body.print-fiche .fiche .row { display: none !important; }
  body.print-fiche .fiche p, body.print-fiche .fiche li { color: #222; }
}
@media (prefers-reduced-motion: reduce) {
  .wl-band, .jw.on .flow { animation: none !important; }
}

/* ================= Phase 3 : modules (capteur, potentiomètre, RVB) + curseur ================= */
.bb-mod { font: 800 9px "Nunito", sans-serif; fill: #fff; pointer-events: none; }
.wl-mod > path, .wl-mod .halo { pointer-events: none; }
.wl-rgbm .halo { opacity: 0; transition: opacity .15s; }
.wl-rgbm.on .halo { opacity: 1; }
.wl-rgbm circle:last-of-type { transition: fill .15s; }
.wl-ldr .sun-glow { transition: opacity .2s; filter: blur(2px); }
.stageslot { flex-direction: column; gap: 8px; }
.stageslot .stage { flex: 1; min-height: 0; }
.stageslot .anactl { width: 100%; flex: none; }
.anactl { background: linear-gradient(90deg, color-mix(in srgb, #1c3d8a 18%, var(--paper)), color-mix(in srgb, #ffd43b 28%, var(--paper))); }
.anactl input { accent-color: #0b7285; }
@media (max-width: 1099px) { .stageslot .stage { flex: none; } }

/* ================= Robotique : servomoteur, ultrasons, arène, robot voiture ================= */
.servo-arm { transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); }
.wl-sonar .sw { opacity: 0; }
.wl-sonar.ping .sw { animation: sonarPing .6s ease-out; }
.wl-sonar.ping .sw1 { animation-delay: .1s; } .wl-sonar.ping .sw2 { animation-delay: .2s; }
@keyframes sonarPing { 0% { opacity: .9; } 100% { opacity: 0; transform: translateY(-6px); } }
.rb-grid { stroke: #e3d9bf; stroke-width: 1; }
.rb-grid.big { stroke: #cdbf9b; stroke-width: 1.6; }
.rb-wall { fill: #8d6e63; stroke: #5d4037; stroke-width: 2; }
.rb-start { fill: none; stroke: #4dabf7; stroke-width: 2.5; stroke-dasharray: 4 4; }
.rb-goal .zone { fill: rgba(64, 192, 87, .18); stroke: #40c057; stroke-width: 2; stroke-dasharray: 6 4; }
.rb-goal.reached .zone { fill: rgba(64, 192, 87, .45); animation: goalPulse .8s ease-in-out 3; }
@keyframes goalPulse { 50% { fill: rgba(255, 212, 59, .6); } }
.rb-trail { fill: none; stroke: #f76707; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 5; opacity: .85; }
.rb-car { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .3)); }
.rb-car.bump > rect:nth-of-type(1) { fill: #e03131; }
.rb-car.mv-fwd .tread, .rb-car.mv-back .tread, .rb-car.mv-left .tread, .rb-car.mv-right .tread { animation: tread .25s linear infinite; }
@keyframes tread { to { transform: translateX(3.5px); } }
.rb-sonar .ping-w { stroke: #4dabf7; stroke-width: 2; opacity: 0; }
.rb-sonar.ping .ping-w { animation: sonarPing .4s ease-out; }
.mcard.rob .mcard-art { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .16) 0 10px, transparent 10px 20px), linear-gradient(135deg, var(--c1), var(--c2)); }
.lvl-head.rob .lvl-ico { background: linear-gradient(135deg, #94d82d, #2b8a3e); border: 0; }
@media (prefers-reduced-motion: reduce) { .servo-arm { transition: none; } }

/* Arène agrandie (missions robot) */
.bigbtn { min-height: 40px; }
.lab.robot.big-stage .lab-grid { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(0, 1.35fr); }
@media (max-width: 1099px) { .bigbtn { display: none !important; } }

/* ================= Club Robotique clé en main ================= */
.club-promo { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 18px; border-radius: 20px; text-decoration: none; color: #fff; background: linear-gradient(120deg, #2b8a3e, #5c940d 45%, #f08c00); box-shadow: 0 14px 30px -16px #2b8a3e; transition: transform .25s cubic-bezier(.2, 1.4, .4, 1), box-shadow .25s; }
.club-promo:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -16px #2b8a3e; }
.club-promo .cp-ico { font-size: 2.2rem; }
.club-promo b { display: block; font: 600 1.2rem "Fredoka", sans-serif; }
.club-promo small { font-weight: 700; opacity: .92; }
.club-promo .cp-go { margin-left: auto; font-weight: 800; white-space: nowrap; }
.club-load { padding: 60px 0; text-align: center; font-weight: 800; color: var(--ink-soft); }
.club-hero { padding-block: clamp(26px, 5vw, 56px) 10px; }
.club-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin: 14px 0 10px; }
.club-hero > p { color: var(--ink-soft); font-size: 1.08rem; max-width: 50rem; margin: 0; }
.club-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 22px 0 18px; }
.club-stats div { padding: 14px 10px; border-radius: 18px; text-align: center; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); }
.club-stats b { display: block; font: 700 2rem "Fredoka", sans-serif; background: linear-gradient(135deg, #2b8a3e, #f08c00); -webkit-background-clip: text; background-clip: text; color: transparent; }
.club-stats span { font-weight: 800; font-size: .85rem; color: var(--ink-soft); }
.club-trim { margin-top: 30px; }
.club-trim > header { display: flex; gap: 16px; align-items: center; padding: 16px 20px; border-radius: 22px; background: linear-gradient(120deg, color-mix(in srgb, var(--tc) 16%, var(--paper)), var(--paper)); border: 1px solid color-mix(in srgb, var(--tc) 35%, transparent); }
.club-te { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 2rem; flex: none; background: var(--tc); box-shadow: 0 10px 20px -10px var(--tc); }
.club-trim small { font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tc); }
.club-trim h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: 2px 0 4px; }
.club-trim header p { margin: 0; color: var(--ink-soft); font-weight: 700; }
.club-line { list-style: none; margin: 14px 0 0; padding: 0 0 0 26px; position: relative; display: grid; gap: 8px; }
.club-line::before { content: ""; position: absolute; left: 12px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: linear-gradient(var(--tc), color-mix(in srgb, var(--tc) 20%, transparent)); }
.club-s button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; text-align: left; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 4px 14px -10px rgba(0, 0, 0, .3); position: relative; transition: transform .2s, box-shadow .2s, border-color .2s; min-height: 58px; }
.club-s button:hover { transform: translateX(4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--tc) 45%, transparent); }
.club-s button::before { content: ""; position: absolute; left: -20px; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); border: 3px solid var(--tc); }
.club-s .n { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 700 1rem "Fredoka", sans-serif; color: #fff; background: var(--tc); flex: none; }
.club-s .bd { font-size: 1.5rem; flex: none; }
.club-s .tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.club-s .tx b { font: 600 1.05rem "Fredoka", sans-serif; }
.club-s .tx i { font-style: normal; font-weight: 700; font-size: .82rem; color: var(--ink-soft); }
.club-s .go { font-weight: 800; color: var(--tc); white-space: nowrap; }
.club-s.t-materiel button, .club-s.t-expo button { background: color-mix(in srgb, var(--tc) 8%, var(--paper)); border-style: dashed; border-color: color-mix(in srgb, var(--tc) 50%, transparent); }
.club-sec { padding-block: 30px 6px; scroll-margin-top: 76px; }
.club-sec h3 { margin: 18px 0 8px; font-size: 1.1rem; }
.club-rit { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
.club-rit div { padding: 14px 16px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); }
.club-rit b { font: 600 1.05rem "Fredoka", sans-serif; }
.club-rit p { margin: 4px 0 0; color: var(--ink-soft); font-weight: 600; }
.club-roles { margin: 0; padding-left: 20px; color: var(--ink-soft); font-weight: 700; }
.club-roles li { margin: 4px 0; }
.club-g { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; margin-bottom: 8px; }
.club-g .inp { width: 90px; }
.club-mat { margin-top: 16px; }
.club-mat h3 { font-size: 1.1rem; margin: 0 0 8px; }
.club-mat h3 small { font: 800 .8rem "Nunito", sans-serif; color: var(--ink-soft); margin-left: 6px; }
.club-mat .rv th[scope="row"] { white-space: normal; font-weight: 800; }
.club-mat .rv th[scope="row"] small { display: block; font-weight: 600; color: var(--ink-soft); font-size: .8rem; }
.club-mat .rv td.price { color: var(--ink-soft); min-width: 80px; }
.club-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.club-tri-card { padding: 18px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); }
.club-tri-card span { font-size: 2rem; } .club-tri-card b { display: block; font: 600 1.15rem "Fredoka", sans-serif; margin: 6px 0 4px; } .club-tri-card p { margin: 0; color: var(--ink-soft); font-weight: 600; }
.club-soon { margin-top: 20px; padding: 14px 18px; border-radius: 16px; font-weight: 800; background: color-mix(in srgb, var(--gold) 22%, var(--paper)); }
.club-fiche .fe { background: linear-gradient(135deg, var(--tc), color-mix(in srgb, var(--tc) 50%, #ffd43b)); }
.club-fiche small { color: var(--tc); }
.club-fiche .mono { font-family: "JetBrains Mono", monospace; letter-spacing: 1px; }
.club-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.club-steps li { display: grid; grid-template-columns: 88px 1fr; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--paper-2); border-left: 4px solid var(--tc); }
.club-steps .tm { font: 700 .9rem "JetBrains Mono", monospace; color: var(--tc); }
.club-steps b { color: var(--ink); } .club-steps p { margin: 2px 0 0; }
.club-safe { padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--ko) 9%, var(--paper)); border: 1px solid color-mix(in srgb, var(--ko) 30%, transparent); }
@media (max-width: 760px) {
  .club-stats { grid-template-columns: repeat(2, 1fr); }
  .club-rit, .club-tri { grid-template-columns: 1fr; }
  .club-steps li { grid-template-columns: 1fr; }
  .club-promo { flex-wrap: wrap; }
  .club-s .go { display: none; }
}
@media print {
  body.print-club > *:not(#club) { display: none !important; }
  body.print-club #club { display: block !important; }
  body.print-club .club-actions, body.print-club .club-g { display: none !important; }
  body.print-club .reveal { opacity: 1 !important; transform: none !important; }
  body.print-club .club-s button { box-shadow: none; break-inside: avoid; }
}

/* ================= Club Robotique, étape 3 : groupes, badges, brevet, licences ================= */
.cg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 12px; }
.cg-card { padding: 16px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.cg-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cg-card header b { display: block; font: 600 1.2rem "Fredoka", sans-serif; }
.cg-card header small { font-weight: 700; color: var(--ink-soft); }
.cg-code { font: 700 1.35rem "JetBrains Mono", monospace; letter-spacing: 3px; padding: 6px 12px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #2b8a3e, #5c940d); box-shadow: 0 8px 18px -10px #2b8a3e; }
.cg-bar { height: 9px; border-radius: 99px; background: color-mix(in srgb, #2b8a3e 14%, transparent); overflow: hidden; }
.cg-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffd43b, #f08c00); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.cg-sub { margin: -4px 0 0; font-weight: 800; font-size: .88rem; color: var(--ink-soft); }
.cg-del { margin-left: auto; }
.cg-new { margin-top: 16px; border-radius: 20px; background: var(--paper); border: 1px dashed color-mix(in srgb, #2b8a3e 50%, transparent); padding: 4px 18px; }
.cg-new summary { cursor: pointer; font: 600 1.1rem "Fredoka", sans-serif; padding: 12px 0; }
.cg-new form, .cl-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; padding-bottom: 16px; align-items: end; }
.cg-new label, .cl-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 800; font-size: .9rem; }
.cg-new label:has(textarea), .cl-form .w { grid-column: 1 / -1; }
.cg-new textarea { min-height: 110px; }
.cg-lic { margin-top: 34px; padding-top: 10px; border-top: 2px dashed var(--line); }
.cg-lic .h2 small { font: 800 .9rem "Nunito", sans-serif; color: var(--ink-soft); }
.cl-on { color: var(--ok); font-weight: 800; } .cl-off { color: var(--ink-soft); font-weight: 800; }
.cg-lic .rv th[scope="row"] small { display: block; font-weight: 600; color: var(--ink-soft); }
.cg-se { list-style: none; padding: 0; margin: 0 0 6px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; }
.cg-se label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--paper-2); border: 2px solid var(--line); cursor: pointer; transition: border-color .2s, background .2s; min-height: 52px; }
.cg-se li.on label { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--paper)); }
.cg-se input { width: 20px; height: 20px; accent-color: var(--ok); flex: none; }
.cg-se .bd { font-size: 1.4rem; }
.cg-se b { display: block; font-size: .92rem; } .cg-se small { color: var(--ink-soft); font-weight: 700; }
.cg-seances h3 { margin: 12px 0 6px; }
.cg-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-top: 10px; }
.cg-badge { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 18px; text-align: center; background: var(--paper-2); border: 2px dashed var(--line); opacity: .55; }
.cg-badge.on { opacity: 1; border-style: solid; border-color: #f08c00; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, #ffd43b 35%, var(--paper)), var(--paper)); box-shadow: 0 8px 18px -12px #f08c00; }
.cg-badge .e { font-size: 2rem; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); box-shadow: inset 0 0 0 3px color-mix(in srgb, #f08c00 40%, transparent); }
.cg-badge b { font-size: .78rem; line-height: 1.2; }
.cg-bf { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 10px; align-items: end; }
.cg-bf label { display: flex; flex-direction: column; gap: 4px; font-weight: 800; font-size: .9rem; }
.cg-seats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.clubbar { background: linear-gradient(120deg, #2b8a3e, #5c940d 55%, #f08c00); box-shadow: 0 14px 30px -16px #2b8a3e; }
#cgPrint { display: none; }
@media (max-width: 640px) { .cg-bf { grid-template-columns: 1fr; } .cg-list { grid-template-columns: 1fr; } }

/* Impression : planche de badges et brevet (A4 paysage) */
.brevet { page: brevet; }
@page brevet { size: A4 landscape; margin: 8mm; }
@media print {
  body.print-cg > *:not(#cgPrint) { display: none !important; }
  body.print-cg #cgPrint { display: block !important; color: #23264a; }
  .cg-print-sheet h1 { font: 700 20px "Fredoka", sans-serif; text-align: center; margin-bottom: 10px; }
  .cg-print-sheet .cg-badges { grid-template-columns: repeat(6, 1fr); }
  .cg-print-sheet .cg-badge { opacity: 1; border: 2px solid #f08c00; break-inside: avoid; }
  .brevet { height: 190mm; padding: 6mm; border: 3mm solid #2b8a3e; border-radius: 6mm; background: #fffdf7; }
  .bv-in { height: 100%; border: 1mm dashed #f08c00; border-radius: 4mm; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4mm; padding: 8mm; }
  .bv-k { font: 800 14pt "Nunito", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #2b8a3e; margin: 0; }
  .brevet h1 { font: 700 40pt "Fredoka", sans-serif; color: #23264a; margin: 0; }
  .bv-t { font: 700 14pt "Nunito", sans-serif; margin: 0; color: #4a4f78; }
  .bv-n { font: 700 30pt "Fredoka", sans-serif; margin: 0; padding: 0 12mm 2mm; border-bottom: 1mm solid #ffd43b; }
  .bv-seals { display: flex; gap: 8mm; margin: 2mm 0; }
  .seal { display: flex; flex-direction: column; align-items: center; font: 800 11pt "Nunito", sans-serif; color: #868e96; }
  .seal i { font-style: normal; font-size: 22pt; width: 18mm; height: 18mm; border-radius: 50%; display: grid; place-items: center; border: 1mm solid #ced4da; filter: grayscale(1); opacity: .5; }
  .seal.on { color: #2b8a3e; } .seal.on i { border-color: #f08c00; filter: none; opacity: 1; background: #fff4e0; }
  .bv-stats { font: 800 13pt "Nunito", sans-serif; margin: 0; }
  .bv-sign { display: flex; justify-content: space-between; width: 100%; margin-top: 6mm; font: 700 11pt "Nunito", sans-serif; color: #4a4f78; }
  .bv-sign span { flex: 1; border-top: .4mm solid #adb5bd; padding-top: 2mm; margin: 0 6mm; }
}