/* ==========================================================================
   Portail SIO — Accueil v2 : barre du haut + hero (s'appuie sur /css/dash.css)
   ========================================================================== */

/* ---------- Barre du haut ---------- */
header.pt-top { padding:10px 0}
.pt-bar { display:flex; align-items:center; gap:18px}
.pt-brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.05rem; color:var(--sio-tx1); white-space:nowrap}
.pt-brand b { background:linear-gradient(135deg, var(--sio-blue), var(--sio-violet)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.pt-logo { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:1.15rem; color:#fff;
    background:linear-gradient(135deg, #3b82f6, #8b5cf6); box-shadow:0 4px 14px rgba(99,102,241,0.35)}

.pt-nav { display:flex; align-items:center; gap:2px; flex:1; min-width:0; flex-wrap:wrap}
.pt-nav a, .pt-nav .faq-toggle-btn {
    display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:10px; font:600 0.84rem "Inter", sans-serif;
    color:var(--sio-tx2); background:none; border:1px solid transparent; cursor:pointer; transition:background .2s, color .2s, border-color .2s; transform:none; box-shadow:none}
.pt-nav a:hover, .pt-nav .faq-toggle-btn:hover { background:#f1f5f9; color:var(--sio-tx1); transform:none; box-shadow:none;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.pt-nav .ti { font-size:1.05rem; color:var(--sio-tx3)}
.pt-nav a:hover .ti, .pt-nav .faq-toggle-btn:hover .ti { color:var(--sio-blue)}
.pt-nav .faq-toggle-btn.open { background:#e9f3fe; border-color:rgba(96,165,250,0.35); color:var(--sio-tx1);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.pt-nav .faq-toggle-btn.pulse { background:#fde9e9; border-color:rgba(239,68,68,0.45);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}

.pt-right { display:flex; align-items:center; gap:8px; margin-left:auto}
.pt-search { display:inline-flex; align-items:center; gap:8px; padding:7px 10px 7px 12px; border-radius:10px; cursor:pointer;
    background:#ffffff; border:1px solid var(--sio-line); color:var(--sio-tx3); font:500 0.84rem "Inter", sans-serif; transition:border-color .2s, background .2s;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.pt-search:hover { border-color:rgba(96,165,250,0.4); background:#f4f9ff; color:var(--sio-tx1);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.pt-search kbd { font:600 0.68rem "Inter", sans-serif; padding:2px 6px; border-radius:6px; background:#f1f5f9; border:1px solid var(--sio-line); color:var(--sio-tx2);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.pt-icon { position:relative; width:36px; height:36px; display:grid; place-items:center; border-radius:10px; font-size:1.15rem; color:var(--sio-tx2);
    background:#ffffff; border:1px solid var(--sio-line); transition:background .2s, color .2s;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.pt-icon:hover { background:#edf5fe; color:var(--sio-tx1);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.pt-dot { position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#ef4444; color:#fff;
    font-size:0.66rem; font-weight:700; line-height:18px; text-align:center; border:2px solid var(--sio-line)}

.pt-user { position:relative}
.pt-avatar { display:inline-flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; border-radius:12px; cursor:pointer;
    background:#ffffff; border:1px solid var(--sio-line); color:var(--sio-tx1); font:600 0.86rem "Inter", sans-serif;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.pt-avatar:hover { border-color:rgba(167,139,250,0.45)}
.pt-avatar .av { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-size:0.78rem; font-weight:800; color:#fff;
    background:linear-gradient(135deg, #2563eb, #7c3aed)}
.pt-avatar .ti { font-size:0.9rem; color:var(--sio-tx3); transition:transform .2s}
.pt-user.open .pt-avatar .ti { transform:rotate(180deg)}
.pt-menu { display:none; position:absolute; right:0; top:calc(100% + 8px); min-width:230px; padding:6px; border-radius:14px; z-index:200;
    background:#ffffff; border:1px solid var(--sio-line); box-shadow:0 18px 40px rgba(0,0,0,0.5);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.pt-user.open .pt-menu { display:block; animation:dhUp .18s ease both}
.pt-menu .who { padding:10px 12px 12px; border-bottom:1px solid var(--sio-line); margin-bottom:4px}
.pt-menu .who b { display:block; color:var(--sio-tx1); font-size:0.9rem} .pt-menu .who small { color:var(--sio-tx3); font-size:0.76rem}
.pt-menu a { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px; color:var(--sio-tx1); font-size:0.86rem; font-weight:500}
.pt-menu a:hover { background:#f1f5f9;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.pt-menu a .ti { font-size:1.05rem; color:var(--sio-tx3)}
.pt-menu a .n { margin-left:auto; background:#ef4444; color:#fff; border-radius:999px; padding:0 7px; font-size:0.7rem; font-weight:700}
.pt-menu a.out { color:var(--sio-red-l)} .pt-menu a.out .ti { color:var(--sio-red)}
.pt-burger { display:none; width:36px; height:36px; border-radius:10px; place-items:center; font-size:1.2rem; cursor:pointer;
    background:#ffffff; border:1px solid var(--sio-line); color:var(--sio-tx1);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}

/* ---------- Hero ---------- */
.pt-hero { margin-top:22px}
.pt-hero-card { position:relative; overflow:hidden; border-radius:22px; padding:30px 32px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
    background:radial-gradient(1100px 320px at 0% 0%, #deecfe, transparent 60%),
               radial-gradient(800px 280px at 100% 0%, #efeafe, transparent 60%), #ffffff;
    border:1px solid var(--sio-line);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.pt-over { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:0.8rem; color:var(--sio-tx3); margin-bottom:10px}
.pt-over a { color:var(--sio-tx2); font-weight:600} .pt-over a:hover { color:var(--sio-blue)} .pt-over .ti { color:var(--sio-blue)}
.pt-hero h1 { font-size:2.1rem; font-weight:800; letter-spacing:-0.025em; color:var(--sio-tx1); line-height:1.15}
.pt-hero .grad { background:linear-gradient(135deg, var(--sio-blue), var(--sio-violet)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.pt-tag { color:var(--sio-tx3); margin-top:8px; font-size:0.95rem}
.pt-pills { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.pt-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:999px; font-size:0.8rem; font-weight:600; color:var(--sio-tx1);
    background:#f1f5f9; border:1px solid var(--sio-line);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.pt-pill .ti { color:var(--sio-tx3)}
.pt-pill.warn { color:var(--sio-yellow-l); background:#fff9eb; border-color:rgba(251,191,36,0.3);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.pt-pill.info { color:var(--sio-blue-l); background:#f0f7ff; border-color:rgba(96,165,250,0.3);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.pt-pill.info:hover { background:#e2eefe;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.pt-hero-cta { display:flex; flex-direction:column; gap:10px; align-items:stretch; min-width:230px}
.pt-hero-cta .dh-btn { justify-content:center; padding:12px 20px; font-size:0.92rem}
.pt-hero-cta small { color:var(--sio-tx3); font-size:0.76rem; max-width:240px; text-align:center; line-height:1.4}

/* Bandeau d'information : plus discret */
.pt-hero .transition-banner { margin:14px 0 0; padding:11px 18px; border-width:1px; border-radius:14px; font-size:0.92rem; text-align:left; box-shadow:none}
.pt-hero .transition-banner .text { font-weight:600}

/* Bannière PWA */
.pt-pwa { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; padding:10px 14px; border-radius:14px;
    background:#f4f9ff; border:1px solid rgba(96,165,250,0.2); font-size:0.86rem; color:var(--sio-tx1); font-weight:600;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.pt-pwa > .ti { font-size:1.3rem; color:var(--sio-blue)}
.pt-pwa > span { flex:1; min-width:180px}
.pt-x { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; cursor:pointer; background:#feefef; border:1px solid rgba(248,113,113,0.3); color:var(--sio-red);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}

/* ---------- Responsive ---------- */
@media (max-width:1100px) { .pt-search span, .pt-search kbd { display:none} }
@media (max-width:900px) {
    .pt-bar { flex-wrap:wrap}
    .pt-burger { display:grid}
    .pt-nav { order:3; flex-basis:100%; display:none; flex-direction:column; align-items:stretch; padding:8px 0 4px}
    .pt-nav.open { display:flex}
    .pt-avatar .nm { display:none}
    .pt-hero-card { padding:22px 20px}
    .pt-hero h1 { font-size:1.6rem}
    .pt-hero-cta { width:100%}
}

/* ---------- Barre compacte (hero « figé » au défilement) ---------- */
.pt-mini { max-height:0; opacity:0; overflow:hidden; transition:max-height .28s ease, opacity .2s ease, padding .28s ease}
header.pt-top.pt-scrolled .pt-mini { max-height:64px; opacity:1; padding-top:8px; margin-top:10px; border-top:1px solid var(--sio-line)}
.pt-mini-in { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; overflow:hidden}
.pt-mini .hi { font-weight:700; color:var(--sio-tx1); white-space:nowrap; margin-right:4px}
.pt-mini .hi b { background:linear-gradient(135deg, var(--sio-blue), var(--sio-violet)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.pt-mini .sp { flex:1}
.pt-pill.sm { padding:4px 10px; font-size:0.74rem; white-space:nowrap}
.pt-top-btn { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:var(--sio-tx2);
    background:#ffffff; border:1px solid var(--sio-line);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.pt-top-btn:hover { color:#fff; border-color:rgba(96,165,250,0.4)}
.pt-hero { margin-bottom:40px}
@media (max-width:900px) { .pt-mini .pt-pill.sm { display:none} }

/* ---------- Grille « Que voulez-vous faire aujourd'hui ? » ---------- */
.tabs-header .pt-tabs-sub { color:var(--sio-tx3); font-size:0.92rem; margin-top:4px}
.section-tabs.pt-tabs { gap:12px; margin:18px auto 32px}
.pt-tab { --c:#2563eb; position:relative; gap:4px; min-height:136px !important; padding:16px 10px 14px !important; border-radius:16px !important;
    background:linear-gradient(160deg, color-mix(in srgb, var(--c) 11%, #ffffff), #ffffff) !important;
    border:1px solid color-mix(in srgb, var(--c) 24%, transparent) !important; color:var(--sio-tx1) !important;
    transition:transform .15s, box-shadow .2s, border-color .2s !important;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.pt-tab:hover { transform:translateY(-3px); box-shadow:0 10px 26px color-mix(in srgb, var(--c) 22%, transparent);
    border-color:color-mix(in srgb, var(--c) 55%, transparent) !important}
.pt-tab .ic { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:1.45rem; color:var(--c);
    background:color-mix(in srgb, var(--c) 17%, #ffffff); margin-bottom:6px; transition:transform .2s;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.pt-tab:hover .ic { transform:scale(1.08) rotate(-4deg)}
.pt-tab .tab-text { font-size:0.9rem !important; font-weight:700; color:var(--sio-tx1)}
.pt-tab .ds { font-size:0.72rem; color:var(--sio-tx3); line-height:1.3; font-weight:500; padding:0 4px}
.pt-tab.active { border-color:var(--c) !important; box-shadow:0 0 0 1px var(--c), 0 10px 26px color-mix(in srgb, var(--c) 28%, transparent);
    background:linear-gradient(160deg, color-mix(in srgb, var(--c) 20%, #ffffff), #ffffff) !important;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.pt-tab.active .tab-text { color:var(--c)}
.pt-tab.locked-all { filter:none !important; opacity:0.78 !important; background:#ffffff !important; border-color:var(--sio-line) !important;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.pt-tab.locked-all .ic { color:var(--sio-tx4); background:#f1f5f9;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.pt-tab.locked-all .tab-text { color:var(--sio-tx3)}
.pt-lock { position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:7px; display:grid; place-items:center; font-size:0.85rem;
    color:var(--sio-red-l); background:#feebeb; border:1px solid rgba(248,113,113,0.3);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
@media (max-width:600px) { .pt-tab .ds { display:none} .pt-tab { min-height:110px !important} }

/* ---------- Veille technologique ---------- */
.pt-veille-wrap { margin-top:8px; margin-bottom:34px}
.pt-veille { padding:22px 24px}
.pt-veille-sub { font-size:0.75rem; font-weight:500; color:var(--sio-tx4); margin-left:6px}
.pt-veille .preview-stripe { background:var(--c); opacity:0.8}
.pt-veille .preview-item:hover { border-color:color-mix(in srgb, var(--c) 40%, transparent)}

/* ==========================================================================
   Sections (contenu des espaces) — modernisation CSS uniquement
   ========================================================================== */
.section-content { --c:#2563eb}
#apprendre.section-content { --c:#2563eb}  #pratiquer.section-content { --c:#059669}
#professionnaliser.section-content { --c:#ea580c}  #examens.section-content { --c:#7c3aed}
#cours.section-content { --c:#0e7490}  #tutoriels.section-content { --c:#db2777}
#outils.section-content { --c:#ea580c}  #memos.section-content { --c:#b45309}  #revision.section-content { --c:#dc2626}

/* En-tête de section : bandeau coloré */
.section-content .section-title { display:flex; align-items:center; gap:12px; font-size:1.55rem; font-weight:800; letter-spacing:-0.02em;
    margin:6px 0 0; padding:18px 22px; border:1px solid color-mix(in srgb, var(--c) 28%, transparent); border-left:4px solid var(--c);
    border-radius:16px 16px 0 0; background:linear-gradient(120deg, color-mix(in srgb, var(--c) 16%, #ffffff), #ffffff 70%);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.section-content .section-title .highlight { background:linear-gradient(135deg, var(--sio-tx1), var(--c));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.section-content .section-desc { max-width:none; margin:0 0 26px; padding:10px 22px 14px; color:var(--sio-tx2); font-size:0.92rem;
    border:1px solid color-mix(in srgb, var(--c) 28%, transparent); border-top:none; border-left:4px solid var(--c);
    border-radius:0 0 16px 16px; background:#ffffff;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}

/* Sous-titres (ex. « SIO 1 – 8 contextes ») */
.section-content .sub-section-title { display:flex; align-items:center; gap:10px; margin:26px 0 14px; font-size:0.82rem; font-weight:800;
    color:var(--sio-tx1); text-transform:uppercase; letter-spacing:0.06em}
.section-content .sub-section-title::after { content:""; flex:1; height:1px; background:#f1f5f9;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.section-content .sub-section-title .icon { font-size:0.85rem; margin:0}

/* Cartes de ressources */
.section-content .card, .section-content .outil-item {
    background:linear-gradient(160deg, color-mix(in srgb, var(--c) 7%, #ffffff), #ffffff) !important;
    border:1px solid var(--sio-line); border-radius:18px; transition:transform .15s, box-shadow .2s, border-color .2s;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.section-content .card { padding:24px 16px 18px}
.section-content .card:has(> .badge-secure, > .badge-free, > .badge-public, > .badge-outils, > .badge-memo) { padding-top:40px}
.section-content .card:hover, .section-content .outil-item:hover { transform:translateY(-4px);
    border-color:color-mix(in srgb, var(--c) 45%, transparent); box-shadow:0 12px 28px color-mix(in srgb, var(--c) 16%, transparent)}
.section-content .card .icon, .section-content .outil-item .icon {
    width:58px; height:58px; margin:0 auto 12px; border-radius:16px; display:grid; place-items:center; font-size:1.8rem; line-height:1;
    background:color-mix(in srgb, var(--c) 13%, #ffffff); border:1px solid color-mix(in srgb, var(--c) 22%, transparent); transition:transform .2s;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.section-content .card:hover .icon, .section-content .outil-item:hover .icon { transform:scale(1.07) rotate(-3deg)}
.section-content .card h3, .section-content .card h4 { color:var(--sio-tx1); font-weight:700; font-size:1.02rem; margin-bottom:4px}
.section-content .card p { color:var(--sio-tx3); font-size:0.84rem; margin-bottom:10px}
.section-content .outil-item .name { color:var(--sio-tx1); font-size:0.95rem; line-height:1.3}
.section-content .outil-item .desc { margin-top:4px; color:var(--sio-tx3); font-size:0.78rem}

/* Bouton « Accéder → » */
.section-content .card .link { display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:8px 18px; border-radius:10px; font-size:0.82rem; font-weight:700;
    color:var(--c); background:color-mix(in srgb, var(--c) 10%, #ffffff); border:1px solid color-mix(in srgb, var(--c) 35%, transparent); transition:background .2s, color .2s;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.section-content .card .link:hover { background:var(--c); color:#0b1120; border-color:var(--c)}

/* Étiquettes d'accès : pastilles discrètes, à l'intérieur de la carte */
.section-content .badge-secure, .section-content .badge-free, .section-content .badge-public, .section-content .badge-outils, .section-content .badge-memo {
    top:10px !important; right:10px !important; border:1px solid !important; border-radius:999px !important; padding:3px 9px !important;
    font-size:0.62rem !important; font-weight:700; box-shadow:none !important; letter-spacing:0.02em}
.section-content .badge-secure { background:#feebeb !important; color:var(--sio-red-l) !important; border-color:rgba(248,113,113,0.35) !important;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.section-content .badge-free   { background:#e3f9f1 !important; color:var(--sio-green-l) !important; border-color:rgba(52,211,153,0.35) !important;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.section-content .badge-public { background:#e9f3fe !important; color:var(--sio-blue-l) !important; border-color:rgba(96,165,250,0.35) !important;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.section-content .badge-outils { background:#f3effe !important; color:var(--sio-violet) !important; border-color:rgba(167,139,250,0.35) !important;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.section-content .badge-memo   { background:#fef6e1 !important; color:var(--sio-yellow-l) !important; border-color:rgba(251,191,36,0.35) !important;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.section-content .badge { border-radius:999px; padding:3px 11px; font-weight:700; font-size:0.68rem}

/* Filtres (Réseau, Cisco, Linux… / types de cours / tutoriels / outils) */
.section-content .tab-memo, .section-content .tab-outil, .section-content .tab-cours, .section-content .tab-tutoriel {
    border-radius:10px; padding:8px 16px; font-size:0.84rem; color:var(--sio-tx2); background:#ffffff; border:1px solid var(--sio-line);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.section-content .tab-memo:hover, .section-content .tab-outil:hover, .section-content .tab-cours:hover, .section-content .tab-tutoriel:hover {
    background:#f1f5f9; color:var(--sio-tx1);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.section-content .tab-memo.active, .section-content .tab-outil.active, .section-content .tab-cours.active, .section-content .tab-tutoriel.active {
    color:var(--sio-tx1); background:color-mix(in srgb, var(--c) 18%, #ffffff); border-color:var(--c); box-shadow:0 4px 14px color-mix(in srgb, var(--c) 20%, transparent);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.section-content .btn-filtre { border-radius:10px}

/* Champs de recherche des sections */
.section-content div:has(> #searchMemo), .section-content div:has(> #searchRevision) {
    border-radius:14px !important; border-color:var(--sio-line) !important; transition:border-color .2s, box-shadow .2s}
.section-content div:has(> #searchMemo:focus), .section-content div:has(> #searchRevision:focus) {
    border-color:var(--c) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent)}

/* Grilles : cartes plus larges, boutons alignés en bas */
.section-content .grid-sio1, .section-content .grid-sio2, .section-content .grid-ressources { grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:14px}
.section-content .card { display:flex; flex-direction:column; align-items:center; gap:2px}
.section-content .card .link { margin-bottom:0}
.section-content .card .badge { margin-bottom:14px}
.section-content .card > br { display:none}
.section-content .card .badge { margin-top:2px}
.section-content .card .link { margin-top:auto}
.section-content .card p { flex:0 0 auto}
.section-content .card { min-height:100%}

/* ---------- Pied de page ---------- */
footer.pt-foot { margin-top:40px; padding:38px 0 22px; text-align:left; color:var(--sio-tx3); font-size:0.85rem;
    border-top:1px solid var(--sio-line); background:linear-gradient(180deg, rgba(96,165,250,0.04), transparent 70%)}
footer.pt-foot a { color:var(--sio-tx2); text-decoration:none}
footer.pt-foot a:hover { color:var(--sio-tx1); text-decoration:none}
.pt-foot-in { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:28px}
.pt-foot-brand p { margin-top:12px; line-height:1.6; color:var(--sio-tx3)}
.pt-foot-brand p a { color:var(--sio-blue); font-weight:600}
.pt-foot-col h4 { font-size:0.74rem; font-weight:800; text-transform:uppercase; letter-spacing:0.07em; color:var(--sio-tx1); margin-bottom:12px}
.pt-foot-col a { display:flex; align-items:center; gap:8px; padding:4px 0; transition:color .2s, transform .2s}
.pt-foot-col a:hover { transform:translateX(3px)}
.pt-foot-col a .ti { color:var(--sio-blue); font-size:1rem}
.pt-foot-bottom { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:28px; padding-top:16px;
    border-top:1px solid var(--sio-line); font-size:0.76rem; color:var(--sio-tx4)}
@media (max-width:760px) { .pt-foot-in { grid-template-columns:1fr; gap:20px} .pt-foot-bottom { justify-content:center; text-align:center} }

/* Bouton « retour en haut » */
#back-to-top { width:44px !important; height:44px !important; border-radius:13px !important; border:none !important; display:grid !important; place-items:center;
    font-size:1.25rem !important; color:#fff !important; background:linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
    box-shadow:0 8px 22px rgba(99,102,241,0.35) !important}
#back-to-top:hover { box-shadow:0 12px 30px rgba(99,102,241,0.5) !important}