/* css/portail-v3.css — réorganisation d'octobre 2026 (maquettes accueil v3, ateliers v2, contextes Bloc 1 v2, CCF, cours SIO2, tutoriels)
   Chargé après /css/accueil-eleve.css et /css/espaces.css. Classes préfixées v3-. Zones nettement contrastées (cartes blanches bordées sur fond ardoise). */

/* ===== Menu horizontal du haut ===== */
.esp-nav { background:#FFFFFF; border-top:1px solid #E2E8F0; border-bottom:2px solid #CBD5E1 }
.esp-nav-in { gap:6px }
.esp-nav a { padding:15px 18px 13px; font-size:15.5px; color:#334155; border-bottom-width:4px; margin-bottom:-2px }
.esp-nav a i { font-size:20px }
.esp-nav a .ext { font-size:13px; color:#64748B; margin-left:-3px }
.esp-nav a.on { background:#F1F5F9; color:#0F172A }
.esp-nav a:focus-visible { outline:3px solid #22D3EE; outline-offset:-3px }

/* ===== Structure commune ===== */
.v3-main { padding-top:30px; padding-bottom:56px; display:flex; flex-direction:column; gap:22px }
.v3-crumb { display:flex; align-items:center; gap:8px; color:#E2E8F0; font-size:14px; font-weight:600; margin-bottom:-6px }
.v3-crumb a { display:inline-flex; align-items:center; gap:6px; color:#E2E8F0; text-decoration:none }
.v3-crumb a:hover { color:#FFFFFF; text-decoration:underline }
.v3-crumb b { color:#FFFFFF }
.v3-card { background:#FFFFFF; border-radius:20px; border:2px solid #CBD5E1; box-shadow:0 2px 4px rgba(10,18,40,.12), 0 12px 28px -12px rgba(10,18,40,.45) }
.v3-head { --c:#1D4ED8; display:flex; align-items:center; gap:22px; padding:26px 32px; border-radius:22px; background:var(--c); color:#FFFFFF; box-shadow:0 12px 28px -12px rgba(10,18,40,.5) }
.v3-head .ic { width:72px; height:72px; border-radius:20px; background:rgba(255,255,255,.2); display:grid; place-items:center; font-size:40px; flex-shrink:0 }
.v3-head h1 { margin:0; font-size:34px; letter-spacing:-.5px; line-height:1.1 }
.v3-head p { margin:6px 0 0; font-size:15px; line-height:1.55; max-width:780px; opacity:.96; text-align:justify; hyphens:auto }
.v3-head .rt { margin-left:auto; background:rgba(0,0,0,.25); border-radius:14px; padding:12px 18px; font-weight:700; font-size:14px; text-align:center; white-space:nowrap }
.v3-head .rt b { display:block; font-size:26px; line-height:1.05 }
.v3-note { display:flex; gap:12px; align-items:flex-start; padding:12px 18px; border-radius:14px; background:#D1FAE5; border:2px solid #047857; color:#064E3B; font-size:14px; font-weight:600 }
.v3-note i { font-size:22px; color:#047857; flex-shrink:0 }
.v3-btn { --c:#1D4ED8; display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:12px; padding:11px 18px; font:700 15px "Inter", sans-serif; background:var(--c); color:#FFFFFF; border:2px solid var(--c); text-decoration:none; cursor:pointer }
.v3-btn:hover { filter:brightness(1.1); box-shadow:0 8px 18px -8px var(--c) }
.v3-btn.o { background:#FFFFFF; color:var(--c) }
.v3-btn.o:hover { background:color-mix(in srgb, var(--c) 8%, #FFFFFF) }
.v3-btn.dis { background:#E2E8F0; color:#94A3B8; border:2px dashed #CBD5E1; cursor:not-allowed; box-shadow:none; filter:none }
.v3-btn:focus-visible, .v3-tile:focus-visible, .v3-cdj:focus-visible, .v3-bigbtn:focus-visible, .v3-at a:focus-visible { outline:3px solid #22D3EE; outline-offset:3px }
.v3-vide { margin:0; font-size:13.5px; color:#475569; font-weight:600; line-height:1.5; text-align:justify; hyphens:auto }

/* ===== Bandeau « Cours du jour » (lien entier vers la séance dans l'agenda) ===== */
.v3-cdj { --k:#0891B2; display:flex; align-items:center; gap:22px; padding:14px 22px; border-radius:20px; background:#FFFFFF; border:2px solid #CBD5E1; border-left:10px solid var(--k);
  color:inherit; text-decoration:none; box-shadow:0 2px 4px rgba(10,18,40,.12), 0 12px 28px -12px rgba(10,18,40,.45); transition:transform .15s, box-shadow .15s, background .15s, border-color .15s }
.v3-dchip { background:#0E7490; color:#FFFFFF; border-radius:14px; padding:8px 16px; text-align:center; line-height:1.15; flex-shrink:0 }
.v3-dchip small { display:block; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase }
.v3-dchip b { font-size:21px; white-space:nowrap }
.v3-cdj .t { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px }
.v3-cdj .t small { color:#0E7490; font-weight:800; letter-spacing:1px; font-size:12px }
.v3-cdj .h { font-size:19px; line-height:1.3; color:#0F172A }
.v3-cdj .m { display:flex; gap:6px 18px; flex-wrap:wrap; margin-top:4px; font-size:14px; color:#334155; font-weight:600 }
.v3-cdj .m span { display:inline-flex; align-items:center; gap:5px }
.v3-cdj .m i { color:#0E7490; font-size:16px }
.v3-cdj .m .ev { color:#B91C1C } .v3-cdj .m .ev i { color:#B91C1C }
.v3-cdj .rt { width:260px; flex-shrink:0; display:flex; flex-direction:column; gap:9px }
.v3-cdj .ps { font-size:12px; font-weight:700; color:#0E7490 }
.v3-pb, .v3-cdj .pb { display:block; height:10px; border-radius:9px; background:#E2E8F0; overflow:hidden; margin-top:5px }
.v3-pb i, .v3-cdj .pb i { display:block; height:100%; border-radius:9px; background:var(--c, #0891B2) }
.v3-cdj .voir { display:flex; align-items:center; justify-content:center; gap:8px; background:#FFFFFF; color:#0E7490; border:2px solid #0E7490; border-radius:99px; padding:7px 14px; font-weight:800; font-size:13.5px; white-space:nowrap }
.v3-cdj .voir i { font-size:17px }
.v3-cdj:hover { background:#ECFEFF; border-color:#0E7490; border-left-color:var(--k); box-shadow:0 14px 28px -10px rgba(8,145,178,.7), 0 0 0 4px #22D3EE; transform:translateY(-2px) }
.v3-cdj:hover .h { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px }
.v3-cdj:hover .voir { background:#0E7490; color:#FFFFFF }
.v3-cdj.vide .h { color:#334155 }

/* ===== Grand bloc « Mon tableau de bord » ===== */
.v3-tdb { background:#0B4A5A; border:4px solid #22D3EE; border-radius:28px; padding:26px 28px 24px; box-shadow:0 18px 40px -14px rgba(0,0,0,.65) }
.v3-tdb .th { display:flex; align-items:center; gap:20px; margin-bottom:20px; flex-wrap:wrap }
.v3-tdb .bigav { width:76px; height:76px; border-radius:50%; background:#22D3EE; color:#0B4A5A; display:grid; place-items:center; font-size:28px; font-weight:800; border:4px solid #FFFFFF; flex-shrink:0 }
.v3-tdb .th small { color:#67E8F9; font-weight:800; letter-spacing:1.5px; font-size:13px }
.v3-tdb .th h2 { margin:0; color:#FFFFFF; font-size:34px; letter-spacing:-.5px; line-height:1.1 }
.v3-tdb .pills { margin-left:auto; display:flex; gap:10px; flex-wrap:wrap }
.v3-tdb .pills > * { background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.4); color:#FFFFFF; border-radius:99px; padding:7px 16px; font-weight:700; font-size:14px; display:flex; gap:7px; align-items:center; text-decoration:none }
.v3-tdb .pills a:hover { background:rgba(255,255,255,.26) }
.v3-tg { display:grid; gap:18px }
.v3-tg.g3 { grid-template-columns:1.35fr 1fr 1fr }
.v3-tg.g4 { grid-template-columns:1.25fr 1fr 1fr 1fr }
.v3-tc { --c:#1D4ED8; background:#FFFFFF; border-radius:18px; border:2px solid #CBD5E1; padding:18px 20px; display:flex; flex-direction:column; gap:10px; min-width:0 }
.v3-tc h4 { margin:0; font-size:13px; letter-spacing:1px; font-weight:800; color:var(--c); display:flex; gap:8px; align-items:center; text-transform:uppercase }
.v3-tc h4 i { font-size:20px }
.v3-mini { font-size:12px; font-weight:800; color:#475569; letter-spacing:.4px; text-transform:uppercase }
.v3-mini.sub { color:#0F172A; margin-top:2px }
.v3-mini.plus { text-transform:none; letter-spacing:0; font-weight:700; color:#64748B; margin-top:-4px }
.v3-sub { font-size:13.5px; color:#334155; font-weight:600 } .v3-sub b { color:var(--c) }
.v3-pbw { display:flex; align-items:center; gap:10px } .v3-pbw .v3-pb { flex:1; height:12px; margin:0 } .v3-pbw b { color:var(--c); font-size:16px; white-space:nowrap }
.v3-bq, .v3-rl { display:flex; flex-direction:column; gap:7px }
.v3-bq .rw, .v3-rl .rw { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; line-height:1.25; min-width:0 }
.v3-bq .cd { font-size:11px; font-weight:800; color:#FFFFFF; border-radius:6px; padding:2px 6px; flex-shrink:0; background:var(--c); min-width:24px; text-align:center }
.v3-bq .lb, .v3-rl .lb { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.v3-rl .rw { font-size:13px }
.v3-rl .ic { font-size:20px; flex-shrink:0; color:#94A3B8 } .v3-rl .ic.ok, .v3-rl .ic.bl { color:#10B981 }
.v3-st { font-size:11px; font-weight:800; border-radius:99px; padding:2px 9px; white-space:nowrap; flex-shrink:0; border:1.5px solid }
.v3-st.ok, .v3-st.n3 { background:#D1FAE5; color:#065F46; border-color:#10B981 }
.v3-st.en { background:#FEF3C7; color:#78350F; border-color:#F59E0B }
.v3-st.bl { background:#DBEAFE; color:#1E40AF; border-color:#60A5FA }
.v3-st.no { background:#F1F5F9; color:#475569; border:1.5px dashed #94A3B8 }
.v3-st.n0 { background:#FEE2E2; color:#991B1B; border-color:#F87171 }
.v3-st.n1 { background:#FFEDD5; color:#9A3412; border-color:#FB923C }
.v3-st.n2 { background:#FEF9C3; color:#854D0E; border-color:#EAB308 }
.v3-seg { display:flex; gap:4px; height:12px; margin-top:2px } .v3-seg i { display:block; border-radius:6px; min-width:6px }
.v3-lg { font-size:12px; color:#334155; font-weight:700; display:flex; gap:4px 12px; flex-wrap:wrap }
.v3-lg span::before { content:""; display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; background:var(--k); vertical-align:-1px }
.v3-lnk { margin-top:auto; display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:14px; color:var(--c); text-decoration:none; align-self:flex-start }
.v3-lnk:hover { text-decoration:underline; text-underline-offset:3px }
.v3-bgs { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px }
.v3-bg { border-radius:12px; padding:9px 4px 8px; text-align:center; font-size:12px; font-weight:800; line-height:1.15; border:2px solid var(--k); background:var(--b); color:#0F172A; display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0 }
.v3-bg span { overflow-wrap:anywhere } .v3-bg i, .v3-bg .em { font-size:26px; color:var(--k); line-height:1 }
.v3-bg.lk { background:#F1F5F9; border:2px dashed #94A3B8; color:#64748B } .v3-bg.lk i { color:#94A3B8 } .v3-bg.lk .em { filter:grayscale(1); opacity:.45 }
.v3-bg.lk small { font-size:10px; font-weight:800; white-space:nowrap }
.v3-mc { display:grid; grid-template-columns:repeat(7, 24px); gap:5px; justify-content:center; margin:2px 0 }
.v3-mc b { font-size:11px; color:#64748B; text-align:center; font-weight:700 }
.v3-mc i { width:24px; height:24px; border-radius:6px; display:block; box-sizing:border-box }
.v3-mc i.vide { visibility:hidden }
.v3-mc i.k0 { background:#FBCFD0 } .v3-mc i.k1 { background:#FED7AA } .v3-mc i.k2 { background:#BBF7D0 } .v3-mc i.k3 { background:#34D399 } .v3-mc i.k4 { background:#047857 }
.v3-mc i.kw { background:#E2E8F0 } .v3-mc i.kv { background:#DBEAFE } .v3-mc i.kn { background:#FFFFFF; border:2px dashed #CBD5E1 }
.v3-mc i.td { outline:3px solid #0F172A; outline-offset:1px }
.v3-n2 { display:flex; gap:8px; margin-top:2px } .v3-n2 div { flex:1; background:#ECFEFF; border:2px solid #A5F3FC; border-radius:12px; padding:6px 10px; min-width:0 }
.v3-n2 b { font-size:19px; display:block; line-height:1.2; white-space:nowrap } .v3-n2 span { font-size:11.5px; color:#334155; font-weight:600 }
.v3-chips { display:flex; gap:6px; flex-wrap:wrap }
.v3-chips span { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:800; background:#F1F5F9; color:#64748B; border:1.5px dashed #94A3B8; border-radius:8px; padding:2px 8px }
.v3-chips span.on { background:#CCFBF1; color:#0F766E; border:1.5px solid #14B8A6 }
.v3-ech { background:#FEF3C7; border:2px solid #F59E0B; border-radius:12px; padding:8px 11px; font-size:12.5px; font-weight:700; color:#78350F; display:flex; gap:8px; align-items:flex-start }
.v3-ech i { font-size:18px; flex-shrink:0 } .v3-ech.vert { background:#CCFBF1; border-color:#0F766E; color:#134E4A }
.v3-btn2 { margin-top:auto; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--c); color:#FFFFFF; border-radius:12px; padding:11px 12px; font-weight:800; font-size:14.5px; border:2px solid rgba(15,23,42,.25); text-decoration:none }
.v3-btn2:hover { filter:brightness(1.12) }
.v3-tdb .bot { display:flex; align-items:center; justify-content:space-between; margin-top:20px; gap:20px }
.v3-tdb .bot span { color:#CFFAFE; font-weight:600; font-size:14.5px }
.v3-bigbtn { display:inline-flex; align-items:center; gap:12px; background:#22D3EE; color:#0B2530; font-weight:800; font-size:21px; padding:18px 34px; border-radius:16px; border:3px solid #FFFFFF; box-shadow:0 10px 22px -8px rgba(0,0,0,.6); text-decoration:none; white-space:nowrap; transition:transform .15s }
.v3-bigbtn i { font-size:26px } .v3-bigbtn:hover { transform:translateY(-2px); background:#67E8F9 }

/* ===== Tuiles « Mes espaces » ===== */
.v3-sec { color:#FFFFFF; font-size:30px; font-weight:800; margin:6px 0 4px; letter-spacing:-.5px }
.v3-secd { color:#E2E8F0; font-size:15px; margin:0 0 18px }
.v3-tiles { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:20px }
.v3-tiles.n5 { grid-template-columns:repeat(5, minmax(0, 1fr)) } .v3-tiles.n3 { grid-template-columns:repeat(3, minmax(0, 1fr)) } .v3-tiles.n6 { grid-template-columns:repeat(3, minmax(0, 1fr)) }
.v3-tile { position:relative; overflow:hidden; border-radius:24px; padding:24px 24px 20px; color:#FFFFFF; min-height:250px; box-sizing:border-box; display:flex; flex-direction:column;
  background:var(--c); border:3px solid rgba(255,255,255,.35); box-shadow:0 14px 30px -12px rgba(10,18,40,.6); text-decoration:none; transition:transform .15s, box-shadow .15s, border-color .15s }
.v3-tile .wm { position:absolute; right:-14px; top:-6px; font-size:110px; opacity:.15 }
.v3-tile .ic { width:64px; height:64px; border-radius:18px; background:rgba(255,255,255,.22); display:grid; place-items:center; font-size:36px; margin-bottom:16px }
.v3-tile b { font-size:24px; letter-spacing:-.5px; line-height:1.2 }
.v3-tile .p { font-size:15px; margin-top:8px; line-height:1.5; opacity:.97 }
.v3-tile .go { margin-top:auto; padding-top:14px; font-weight:800; font-size:16px; display:flex; align-items:center; gap:6px }
a.v3-tile:hover { transform:translateY(-3px); border-color:#FFFFFF; box-shadow:0 18px 34px -12px rgba(10,18,40,.75) }
a.v3-tile:hover .go i { transform:translateX(3px) } .v3-tile .go i { transition:transform .15s }
.v3-tile.verrou { filter:grayscale(.55); opacity:.8; cursor:not-allowed }

/* ===== Ateliers pros ===== */
.v3-ag { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:20px }
.v3-at { --k:#047857; overflow:hidden; display:flex; flex-direction:column; padding:0 }
.v3-at .top { background:var(--k); color:#FFFFFF; padding:20px; display:flex; align-items:center; gap:14px; position:relative; overflow:hidden }
.v3-at .top .m { width:60px; height:60px; border-radius:16px; background:rgba(255,255,255,.22); display:grid; place-items:center; font-size:34px; flex-shrink:0 }
.v3-at .top .wm { position:absolute; right:-10px; bottom:-18px; font-size:90px; opacity:.15 }
.v3-at .top b { font-size:22px; line-height:1.1; display:block } .v3-at .top small { display:block; opacity:.95; font-weight:600; font-size:13px; margin-top:3px }
.v3-at .bd { padding:16px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1 }
.v3-at .bd p { margin:0; font-size:13.5px; color:#334155; line-height:1.55; text-align:justify; hyphens:auto }
.v3-at .url { font-size:12.5px; color:#475569; font-weight:600; display:flex; gap:6px; align-items:center; background:#F1F5F9; border-radius:8px; padding:5px 10px; overflow-wrap:anywhere }
.v3-at .v3-btn { --c:var(--k); margin-top:auto; width:100%; box-sizing:border-box }

/* ===== Mon contexte Bloc 1 ===== */
.v3-mine { display:grid; grid-template-columns:330px minmax(0, 1fr); overflow:hidden; border:3px solid #C2410C; padding:0 }
.v3-mine .l { --k:#059669; background:var(--k); color:#FFFFFF; padding:30px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; position:relative; overflow:hidden }
.v3-mine .l .big { width:130px; height:130px; border-radius:34px; background:rgba(255,255,255,.22); display:grid; place-items:center; font-size:76px }
.v3-mine .l .wm { position:absolute; font-size:260px; opacity:.1; right:-60px; bottom:-60px }
.v3-mine .l > b { font-size:14px; letter-spacing:1px; background:#FED7AA; color:#7C2D12; border-radius:99px; padding:4px 14px }
.v3-mine .r { padding:28px 34px; display:flex; flex-direction:column; gap:14px }
.v3-mine h2 { margin:0; font-size:32px; letter-spacing:-.5px; line-height:1.15 }
.v3-mine .tg { display:flex; gap:10px; flex-wrap:wrap }
.v3-mine .tg span { background:#F1F5F9; border:2px solid #CBD5E1; border-radius:10px; padding:5px 12px; font-weight:700; font-size:13px; display:flex; gap:6px; align-items:center; overflow-wrap:anywhere }
.v3-mine .tg i { color:#C2410C }
.v3-mine .r > p { margin:0; color:#334155; font-size:15px; line-height:1.55; text-align:justify; hyphens:auto }
.v3-mine .acts { display:flex; gap:12px; flex-wrap:wrap }
.v3-fold { background:#E2E8F0; border:2px solid #94A3B8; border-radius:20px; overflow:hidden }
.v3-fold > summary { list-style:none; display:flex; align-items:center; gap:14px; padding:16px 24px; background:#CBD5E1; color:#1E293B; cursor:pointer }
.v3-fold > summary::-webkit-details-marker { display:none }
.v3-fold[open] > summary { border-bottom:2px solid #94A3B8 }
.v3-fold > summary .lg { font-size:26px; color:#475569 }
.v3-fold > summary b { font-size:19px; display:block } .v3-fold > summary small { font-size:14px; font-weight:600; color:#475569 }
.v3-fold .chev { margin-left:auto; display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; background:#FFFFFF; border:2px solid #94A3B8; border-radius:10px; padding:6px 12px }
.v3-fold .chev .ouv, .v3-fold[open] .chev .fer { display:none } .v3-fold[open] .chev .ouv { display:inline-flex; align-items:center; gap:6px }
.v3-fold .chev .fer { display:inline-flex; align-items:center; gap:6px }
.v3-fold .fb { padding:18px 24px 22px } .v3-fold .fb > p { font-size:14px; color:#334155; font-weight:600; margin:0 0 16px; display:flex; gap:8px; align-items:flex-start }
.v3-pg { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px }
.v3-pa { display:flex; gap:12px; align-items:center; background:#F1F5F9; border:2px dashed #94A3B8; border-radius:14px; padding:10px 14px; cursor:default; color:#475569; min-width:0 }
.v3-pa .ic { width:42px; height:42px; border-radius:12px; background:#CBD5E1; display:grid; place-items:center; font-size:23px; color:#64748B; flex-shrink:0 }
.v3-pa b { font-size:14px; line-height:1.25; display:block; color:#334155 } .v3-pa small { display:block; font-size:12px; font-weight:600; color:#64748B }
.v3-pa small.el { display:flex; gap:5px; align-items:center; margin-top:2px }
.v3-alerte { display:flex; gap:14px; align-items:flex-start; padding:22px 26px }
.v3-alerte i { font-size:30px; color:#C2410C } .v3-alerte b { display:block; font-size:18px; margin-bottom:4px } .v3-alerte p { margin:0; color:#334155; line-height:1.55 }

/* ===== Préparer mes CCF ===== */
.v3-cols { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:22px; align-items:stretch }
.v3-col { --c:#4338CA; overflow:hidden; display:flex; flex-direction:column; border:3px solid var(--c); padding:0 }
.v3-col .ch { background:var(--c); color:#FFFFFF; padding:20px 26px; display:flex; gap:16px; align-items:center }
.v3-col .ch .ic { width:58px; height:58px; border-radius:16px; background:rgba(255,255,255,.22); display:grid; place-items:center; font-size:32px; flex-shrink:0 }
.v3-col .ch h2 { margin:0; font-size:25px; line-height:1.15 } .v3-col .ch small { font-size:13.5px; opacity:.95; font-weight:600; display:block; margin-top:3px }
.v3-col .bd { padding:20px 26px 24px; display:flex; flex-direction:column; gap:14px; flex:1 }
.v3-sm { display:flex; gap:12px } .v3-sm div { flex:1; background:#F1F5F9; border:2px solid #CBD5E1; border-radius:14px; padding:9px 14px; min-width:0 }
.v3-sm b { font-size:22px; display:block; line-height:1.2 } .v3-sm span { font-size:12.5px; color:#475569; font-weight:600 }
.v3-zt { font-size:13px; font-weight:800; color:var(--c); margin-top:2px; display:flex; justify-content:space-between; gap:10px; border-bottom:2px solid #E2E8F0; padding-bottom:5px }
.v3-zt span { color:#475569; white-space:nowrap }
.v3-re { display:flex; align-items:center; gap:12px; border:2px solid #CBD5E1; border-radius:14px; padding:11px 14px; background:#FFFFFF; color:inherit; text-decoration:none }
a.v3-re:hover { border-color:var(--c); background:color-mix(in srgb, var(--c) 5%, #FFFFFF) }
.v3-re.pt { border-style:dashed }
.v3-re .tx { flex:1; min-width:0 } .v3-re .tx b { font-size:15px; display:block; line-height:1.3 } .v3-re .tx small { font-size:12.5px; color:#475569; font-weight:600 }
.v3-re.vide { color:#64748B; font-size:13.5px; font-weight:600; background:#F8FAFC; border-style:dashed }
.v3-st2 { font-size:12.5px; font-weight:800; border-radius:99px; padding:3px 12px; white-space:nowrap; border:1.5px solid; flex-shrink:0 }
.v3-st2.ok { color:#047857; background:#D1FAE5; border-color:#34D399 } .v3-st2.bl { color:#1D4ED8; background:#DBEAFE; border-color:#60A5FA }
.v3-st2.no { color:#334155; background:#E2E8F0; border-color:#94A3B8 } .v3-st2.en { color:#92400E; background:#FEF3C7; border-color:#F59E0B }
.v3-st2.ca { color:#475569; background:#FFFFFF; border:1.5px dashed #94A3B8 }
.v3-ex { margin-top:auto; border-top:2px solid #E2E8F0; padding-top:16px }
.v3-ex h3 { margin:0 0 10px; font-size:14px; letter-spacing:1px; color:#334155; display:flex; gap:8px; align-items:center }
.v3-exb { display:flex; gap:10px; flex-wrap:wrap } .v3-exb .v3-btn { font-size:14px; padding:9px 14px; --c:inherit }
.v3-cp { display:flex; flex-direction:column; gap:7px } .v3-cp div { display:flex; gap:10px; align-items:center; font-size:13.5px; font-weight:600 }
.v3-cp .d { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:13px; flex-shrink:0; color:#FFFFFF; box-sizing:border-box }
.v3-cp .d.on { background:#0F766E } .v3-cp .d.off { background:#FFFFFF; border:2px solid #94A3B8 }
.v3-ech2 { background:#CCFBF1; border:2px solid #0F766E; border-radius:12px; padding:10px 14px; font-size:13.5px; font-weight:700; color:#134E4A; display:flex; gap:10px; align-items:flex-start }
.v3-ech2 i { font-size:22px; color:#0F766E; flex-shrink:0 }
.v3-docs { display:grid; grid-template-columns:1.15fr 1fr; border:3px solid #B45309; overflow:hidden; padding:0 }
.v3-docs > div { padding:22px 28px } .v3-docs .b { background:#FEF3C7; border-left:3px solid #B45309 }
.v3-docs h2 { margin:0 0 4px; font-size:21px; display:flex; gap:10px; align-items:center } .v3-docs h2 i { color:#B45309; font-size:26px }
.v3-docs .sub { font-size:13.5px; color:#475569; font-weight:600; margin:0 0 12px; text-align:justify; hyphens:auto }
.v3-dc { display:flex; align-items:center; gap:12px; border:2px solid #CBD5E1; border-radius:12px; padding:9px 12px; margin-bottom:9px; font-size:14px; background:#F8FAFC; color:inherit; text-decoration:none }
a.v3-dc:hover { border-color:#B45309; background:#FFFBEB }
.v3-dc .x { font-size:11px; font-weight:800; color:#FFFFFF; border-radius:7px; padding:4px 8px; flex-shrink:0 } .v3-dc .xx { background:#15803D } .v3-dc .xw { background:#1D4ED8 }
.v3-dc.g { background:#FEF3C7; border-color:#B45309; font-weight:700 } .v3-dc .fl { margin-left:auto; flex-shrink:0 }
.v3-cal { width:100%; border-collapse:collapse; font-size:14px }
.v3-cal th { text-align:left; font-size:12px; letter-spacing:.5px; color:#78350F; padding:6px 8px; border-bottom:2px solid #B45309 }
.v3-cal td { padding:9px 8px; border-bottom:1px solid rgba(245,158,11,.55); vertical-align:top }
.v3-dt { background:#FFFFFF; border:2px solid #B45309; border-radius:8px; padding:2px 9px; font-weight:800; font-size:12.5px; display:inline-block }
.v3-dt.nc { border-style:dashed; color:#78350F; font-weight:700 }
.v3-pick { padding:20px 24px } .v3-pick h2 { margin:0 0 6px; font-size:19px } .v3-pick p { margin:0 0 12px; color:#475569; font-weight:600; font-size:14px }
.v3-pick .l { display:flex; flex-wrap:wrap; gap:8px } .v3-pick .l a { border:2px solid #CBD5E1; border-radius:10px; padding:6px 12px; font-weight:700; font-size:14px; color:#0F172A; text-decoration:none; background:#F8FAFC }
.v3-pick .l a.on, .v3-pick .l a:hover { border-color:#4338CA; background:#EEF2FF }

/* ===== Espace Cours : révisions SIO1 pour les SIO2 ===== */
.esp-rev { display:flex; align-items:center; gap:10px; font-weight:700; font-size:14px; color:#0F172A; cursor:pointer; user-select:none; margin-left:auto }
.esp-rev input { position:absolute; opacity:0; width:1px; height:1px }
.esp-rev .sw { width:46px; height:26px; border-radius:99px; background:#CBD5E1; position:relative; flex-shrink:0; transition:background .15s }
.esp-rev .sw::after { content:""; position:absolute; left:3px; top:3px; width:20px; height:20px; border-radius:50%; background:#FFFFFF; transition:left .15s; box-shadow:0 1px 3px rgba(0,0,0,.3) }
.esp-rev input:checked + .sw { background:#1D4ED8 } .esp-rev input:checked + .sw::after { left:23px }
.esp-rev input:focus-visible + .sw { outline:3px solid #22D3EE; outline-offset:2px }
.esp-carte.rev { background:#E2E8F0 }
.esp-revb { font-size:10.5px; font-weight:800; color:#475569; border:1.5px dashed #94A3B8; border-radius:99px; padding:1px 8px; white-space:nowrap; background:#FFFFFF }

/* ===== Tutoriels ===== */
.v3-tuto { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px }
.v3-tu { display:flex; gap:14px; padding:18px 20px; border-left:8px solid #6D28D9; color:inherit; text-decoration:none }
a.v3-tu:hover { border-color:#6D28D9; box-shadow:0 0 0 3px #C4B5FD, 0 12px 28px -12px rgba(10,18,40,.45) }
.v3-tu .pdf { width:52px; height:58px; border-radius:10px; border:2px solid #DC2626; color:#DC2626; display:grid; place-items:center; font-size:26px; flex-shrink:0; background:#FEF2F2 }
.v3-tu b { display:block; font-size:16px; line-height:1.3 } .v3-tu small { display:block; margin-top:6px; font-size:13px; color:#475569; font-weight:600 }
.v3-tu .go { display:inline-flex; gap:6px; align-items:center; margin-top:10px; font-weight:800; font-size:14px; color:#6D28D9 }
.v3-bientot { display:flex; gap:20px; align-items:center; padding:30px 34px }
.v3-bientot .ic { width:80px; height:80px; border-radius:22px; background:#EDE9FE; color:#6D28D9; display:grid; place-items:center; font-size:44px; flex-shrink:0 }
.v3-bientot h2 { margin:0 0 6px; font-size:24px } .v3-bientot p { margin:0; color:#334155; font-size:15px; line-height:1.6; text-align:justify; hyphens:auto; max-width:820px }

/* ===== Écrans moyens et mobiles ===== */
@media (max-width:1200px) {
  .v3-tg.g4 { grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .v3-tg.g3 { grid-template-columns:repeat(2, minmax(0, 1fr)) } .v3-tg.g3 > :first-child { grid-column:1 / -1 }
  .v3-tiles, .v3-tiles.n5, .v3-tiles.n6 { grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .v3-ag, .v3-pg { grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .v3-tuto { grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .v3-cols, .v3-docs { grid-template-columns:minmax(0, 1fr) } .v3-docs .b { border-left:0; border-top:3px solid #B45309 }
}
@media (max-width:760px) {
  .esp-nav a { padding:12px 12px 10px; font-size:14px }
  .v3-main { padding-top:18px; gap:16px }
  .v3-cdj { flex-wrap:wrap; gap:12px 14px; padding:14px 16px; border-left-width:8px }
  .v3-dchip { padding:6px 12px } .v3-dchip b { font-size:17px }
  .v3-cdj .t { flex-basis:calc(100% - 140px) } .v3-cdj .h { font-size:17px }
  .v3-cdj .rt { width:100% }
  .v3-tdb { padding:18px 14px; border-radius:22px; border-width:3px }
  .v3-tdb .th { gap:12px } .v3-tdb .bigav { width:56px; height:56px; font-size:20px; border-width:3px } .v3-tdb .th h2 { font-size:26px }
  .v3-tdb .pills { margin-left:0; width:100%; gap:6px } .v3-tdb .pills > * { padding:5px 11px; font-size:13px }
  .v3-tg.g3, .v3-tg.g4 { grid-template-columns:minmax(0, 1fr) }
  .v3-tdb .bot { flex-direction:column; align-items:stretch; text-align:center }
  .v3-bigbtn { justify-content:center; font-size:17px; padding:14px 18px; white-space:normal }
  .v3-sec { font-size:24px }
  .v3-tiles, .v3-tiles.n5, .v3-tiles.n3, .v3-tiles.n6 { grid-template-columns:minmax(0, 1fr); gap:14px }
  .v3-tile { min-height:0; padding:18px 18px 16px } .v3-tile .ic { width:52px; height:52px; font-size:28px; margin-bottom:10px } .v3-tile b { font-size:21px }
  .v3-head { flex-wrap:wrap; padding:20px; gap:14px } .v3-head .ic { width:56px; height:56px; font-size:30px } .v3-head h1 { font-size:26px } .v3-head .rt { margin-left:0 }
  .v3-ag, .v3-pg, .v3-tuto { grid-template-columns:minmax(0, 1fr) }
  .v3-mine { grid-template-columns:minmax(0, 1fr) } .v3-mine .l { padding:20px } .v3-mine .l .big { width:90px; height:90px; font-size:52px }
  .v3-mine .r { padding:20px } .v3-mine h2 { font-size:24px }
  .v3-col .ch, .v3-col .bd, .v3-docs > div { padding-left:16px; padding-right:16px }
  .v3-sm { flex-wrap:wrap } .v3-sm div { flex-basis:calc(50% - 6px) }
  .v3-fold > summary { padding:14px 16px } .v3-fold .fb { padding:14px 16px }
  .v3-bientot { flex-direction:column; align-items:flex-start; padding:22px }
  .esp-rev { margin-left:0 }
}
.v3-tg.g4 .v3-bgs { grid-template-columns:repeat(2, minmax(0, 1fr)) }
.v3-bg span { overflow-wrap:normal; hyphens:auto }
.v3-tu[hidden], .esp-carte[hidden] { display:none !important }
.v3-dt { white-space:nowrap }

/* Thèmes de saison dans le bandeau « Cours du jour » (includes/saisons.php) */
.v3-cdj { position:relative; overflow:hidden }
.v3-cdj > :not(.acc-chute) { position:relative; z-index:1 }
.v3-scene { flex:0 0 190px; align-self:stretch; min-height:92px; margin:-14px 0; border-radius:0; overflow:hidden; pointer-events:none; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%) }
.v3-scene svg { width:100%; height:100%; display:block }
.v3-fete { display:inline-block; margin-left:8px; padding:1px 8px; border-radius:999px; background:#FDF2F8; color:#9D174D; font-style:normal; font-size:.72rem; font-weight:700; letter-spacing:0 }
@media (max-width:760px) { .v3-scene { display:none } }

/* ===== Accueil v4 (octobre 2026, maquettes v4 variante B) ===== */
/* Ligne « Cours du jour » + carte-bouton « Mes serveurs et VM » */
.v4-row { display:grid; grid-template-columns:minmax(0, 1fr) 220px; gap:18px; align-items:stretch }
.v4-row .v3-cdj { min-width:0 }
.v4-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:14px 16px; border-radius:20px; background:#EA580C; color:#FFFFFF; text-decoration:none; border:3px solid #9A3412; box-shadow:0 12px 24px -10px rgba(234,88,12,.85) }
.v4-card .ic { width:52px; height:52px; border-radius:15px; background:rgba(255,255,255,.22); display:grid; place-items:center; font-size:30px }
.v4-card b { font-size:18px; line-height:1.2 }
.v4-card small { font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:5px }
.v4-card:hover { background:#C2410C; transform:translateY(-2px) }
.v4-card:focus-visible { outline:3px solid #22D3EE; outline-offset:3px }
/* Bloc « Mon tableau de bord » : pastille notifications + bouton d'ouverture */
.v3-tdb .pills { align-items:center }
.v3-tdb .pills > a.open { background:#22D3EE; color:#0B2530; border:3px solid #FFFFFF; border-radius:14px; padding:10px 20px; font-size:16px; font-weight:800; gap:10px; box-shadow:0 8px 18px -8px rgba(0,0,0,.6) }
.v3-tdb .pills > a.open i { font-size:22px } .v3-tdb .pills > a.open:hover { background:#67E8F9 }
.v3-tg.g3.eq { grid-template-columns:repeat(3, minmax(0, 1fr)) }
.v3-tg.g3.s1 { grid-template-columns:minmax(0, 3fr) minmax(0, 2fr) }
.v3-tg .v3-tc { height:100%; box-sizing:border-box }
.v3-mc { grid-template-columns:repeat(7, minmax(0, 34px)) } .v3-mc i { width:100%; height:26px }
/* Veille : cadre épais de la couleur du bandeau sombre */
.acc-veille { border:5px solid #0F172A !important; border-radius:18px }
/* Fil rouge Packet Tracer : titres de semestre */
.frp-sem h2 { color:#FFFFFF; font-size:30px; letter-spacing:-.4px; gap:14px; margin-top:10px }
.frp-sem h2 span { background:#22D3EE; color:#0B1220; font-size:18px; font-weight:900; padding:5px 14px; border-radius:10px; border:3px solid #FFFFFF; letter-spacing:.5px }
@media (max-width:1200px) { .v3-tg.g3.eq, .v3-tg.g3.s1 { grid-template-columns:repeat(2, minmax(0, 1fr)) } .v3-tg.g3.eq > :last-child:nth-child(odd) { grid-column:1 / -1 } .v3-tg.g3.s1 > :first-child { grid-column:auto } }
@media (max-width:760px) {
  .v4-row { grid-template-columns:minmax(0, 1fr) }
  .v4-card { flex-direction:row; justify-content:flex-start; text-align:left; gap:14px; padding:12px 16px }
  .v4-card .ic { width:44px; height:44px; font-size:26px; flex-shrink:0 }
  .v3-tg.g3.eq, .v3-tg.g3.s1 { grid-template-columns:minmax(0, 1fr) }
  .v3-tdb .pills > a.open { padding:9px 14px; font-size:15px; flex:1 1 100%; justify-content:center }
}

/* Améliorations v4 : contraste, pastilles de statut alignées, tuiles « Mes espaces » plus compactes */
.v3-tdb .v3-mini, .v3-tdb .v3-mini.plus { color:#334155; font-size:12.5px }
.v3-tdb .v3-mini.sub { color:#0F172A }
.v3-tdb .v3-chips span { color:#334155; border-color:#64748B }
.v3-tdb .v3-mc b { color:#334155; font-size:12px }
.v3-tdb .v3-rl .ic { color:#64748B } .v3-tdb .v3-rl .ic.ok, .v3-tdb .v3-rl .ic.bl { color:#10B981 }
.v3-tdb .v3-tc h4 { font-size:14px }
.v3-tdb .v3-sub { font-size:14px }
.v3-tdb .v3-pbw b { font-size:20px; font-weight:800 }
.v3-tdb .th small { font-size:14px }
.v3-tdb .v3-st { min-width:104px; text-align:center; box-sizing:border-box }
.v3-tdb .v3-st.no { color:#334155; border-color:#64748B }
.v3-tdb .v3-st.cta { background:#FFFFFF; color:#9A3412; border:2px solid #EA580C; text-decoration:none; font-size:12px; padding:2px 10px }
.v3-tdb .v3-st.cta:hover { background:#EA580C; color:#FFFFFF }
.v3-tdb .v3-st.cta:focus-visible { outline:3px solid #22D3EE; outline-offset:2px }
.v3-tile { min-height:196px; padding:20px 22px 16px }
.v3-tile .ic { width:54px; height:54px; font-size:30px; margin-bottom:12px }
.v3-tile b { font-size:22px } .v3-tile .p { font-size:14.5px; margin-top:6px }
.v3-main { gap:18px }
@media (max-width:760px) { .v3-tile { min-height:0; padding:18px 18px 16px } .v3-tile .ic { width:52px; height:52px; font-size:28px; margin-bottom:10px } .v3-tile b { font-size:21px } }
/* Accueil enseignant : la carte « Mes serveurs et VM » en tête de la colonne de droite */
.acc-col-d > .v4-card { flex-direction:row; justify-content:flex-start; text-align:left; gap:14px; padding:12px 18px }
.acc-col-d > .v4-card .ic { width:44px; height:44px; font-size:26px; flex-shrink:0 }
.acc-col-d > .v4-card small { margin-left:auto }
@media (max-width:1100px) { .acc-col-d > .v4-card { grid-column:1 / -1 } }

/* S'entraîner (étape 4) : pastille « N à faire » et mention « Nouveau » de la tuile de l'accueil */
.v3-tile .nb { position:absolute; right:16px; top:16px; z-index:2; display:flex; gap:5px; align-items:center; background:#FFFFFF; color:#9D174D; font-weight:800; font-size:12.5px; padding:4px 11px; border-radius:999px; border:2px solid #831843 }
.v3-tile .nw { display:inline-block; margin-left:8px; vertical-align:middle; background:#FDE047; color:#422006; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:800; padding:2px 7px; border-radius:6px }