/* css/accueil-eleve.css — nouvel accueil élève connecté (maquette « Version finale »)
   Étape 2 : carte « Mon cours du jour » (trame ambrée, contenus sur fond blanc) */

.acc-cdj { background:#FFF4D6; border:1px solid #FCD34D; border-radius:18px; overflow:hidden; color:#0F172A;
  box-shadow:0 0 0 3px rgba(251,191,36,.25), 0 14px 30px -20px rgba(15,23,42,.7); font-family:"Inter", system-ui, sans-serif }
.acc-cdj-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 20px; background:#FDE7A3; border-bottom:1px solid #FCD34D }
.acc-cdj-k { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#92400E }
.acc-cdj-d { font-size:16px; font-weight:800 }
.acc-cdj-chip { padding:3px 10px; border-radius:999px; background:#FFFFFF; border:1px solid #F5D78E; font-size:12px; font-weight:700; color:#78350F }
.acc-cdj-all { margin-left:auto; font-size:13px; font-weight:700; color:#92400E; text-decoration:none }
.acc-cdj-all:hover { text-decoration:underline }
.acc-cdj-vide { padding:22px 20px; font-size:15px; font-weight:600; color:#78350F }
.acc-cdj-info { padding:8px 20px 12px; font-size:12.5px; font-weight:600; color:#92400E }

.acc-cdj-body { display:grid; grid-template-columns:150px minmax(0, 1fr); gap:22px; padding:20px }
.acc-cdj-slots { display:flex; flex-direction:column; gap:10px }
.acc-slot { display:block; padding:12px; border-radius:12px; background:#FFFFFF; border:1px solid #F5D78E; color:#0F172A; text-decoration:none }
.acc-slot-k { display:block; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#475569 }
.acc-slot b { display:block; font-size:19px; font-weight:800; line-height:1.25 }
.acc-slot-e { display:block; font-size:12px; font-weight:700; color:#475569 }
.acc-slot.passe .acc-slot-e { color:#15803D }
.acc-slot.focus { background:#0E7490; border-color:#0E7490; color:#FFFFFF }
.acc-slot.focus .acc-slot-k, .acc-slot.focus .acc-slot-e { color:#CFFAFE }

.acc-cdj-main { display:flex; flex-direction:column; gap:20px; min-width:0 }
.acc-seance { display:flex; flex-direction:column; gap:14px; min-width:0; scroll-margin-top:90px }
.acc-seance + .acc-seance { padding-top:20px; border-top:2px dashed #F5D78E }
.acc-tags { display:flex; gap:8px; flex-wrap:wrap }
.acc-tag { padding:4px 10px; border-radius:999px; background:color-mix(in srgb, var(--m) 14%, #FFFFFF); color:color-mix(in srgb, var(--m) 80%, #000000);
  border:1px solid color-mix(in srgb, var(--m) 35%, #FFFFFF); font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em }
.acc-seance-t { margin:0; font-size:24px; font-weight:800; letter-spacing:-0.015em; line-height:1.25 }
.acc-prog { background:#FFFFFF; border:1px solid #F5D78E; border-radius:12px; padding:14px 16px; color:#334155; font-size:14.5px; line-height:1.7 }
.acc-liste { margin:0; padding-left:20px }
.acc-p { margin:0 }
.acc-sec { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#92400E; margin:2px 0 2px }
.acc-sec ~ .acc-sec { margin-top:10px }
.acc-prog .acc-sec:first-child { margin-top:0 }
.acc-box { padding:14px 16px; border-radius:12px; font-size:14.5px; font-weight:500; line-height:1.55 }
.acc-box-k { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; margin-bottom:2px }
.acc-box.taf { background:#FEF2F2; border:1px solid #FECACA; color:#450A0A } .acc-box.taf .acc-box-k { color:#B91C1C }
.acc-box.eval { background:#F5F3FF; border:1px solid #DDD6FE; color:#2E1065 } .acc-box.eval .acc-box-k { color:#6D28D9 }
.acc-box.vac { background:#ECFEFF; border:1px solid #A5F3FC; color:#164E63 } .acc-box.vac .acc-box-k { color:#0E7490 }
.acc-box .acc-liste { padding-left:18px }

.acc-res { display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.acc-res-k { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#475569; margin-right:4px }
.acc-res-a { max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:7px 12px; border-radius:10px;
  border:1px solid #E2C67A; background:#FFFFFF; color:#0F172A; font-size:13px; font-weight:600; text-decoration:none }
.acc-res-a:hover { border-color:#B45309; color:#92400E }
.acc-res-plus { padding:7px 10px; border-radius:10px; background:#FDE7A3; color:#78350F; font-size:13px; font-weight:700; text-decoration:none }
.acc-res-note { flex-basis:100%; font-size:13px; color:#475569 }

@media (max-width:760px) {
  .acc-cdj-head { padding:12px 14px } .acc-cdj-all { margin-left:0 }
  .acc-cdj-body { grid-template-columns:1fr; gap:14px; padding:14px }
  .acc-cdj-slots { flex-direction:row; overflow-x:auto } .acc-slot { flex:0 0 auto; min-width:130px }
  .acc-seance-t { font-size:20px }
  .acc-res-a { max-width:100% }
}

/* ======================================================================
   Étape 3 : page (fond ardoise), en-tête, menu du profil, recherche, bandeau Bonjour
   ====================================================================== */
body.acc { margin:0; min-height:100vh; background:#475569; font-family:"Inter", system-ui, sans-serif; color:#0F172A }
body.acc-noscroll { overflow:hidden }
.acc-wrap { max-width:1340px; margin:0 auto; padding-left:24px; padding-right:24px; box-sizing:border-box }
.acc-main { padding-top:26px; padding-bottom:48px; display:flex; flex-direction:column; gap:20px }

.acc-apercu { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 24px; background:#1E293B; color:#E2E8F0; font-size:13px; font-weight:600 }
.acc-apercu a { padding:4px 10px; border-radius:8px; border:1px solid #475569; color:#E2E8F0; text-decoration:none }
.acc-apercu a.on { background:#22D3EE; border-color:#22D3EE; color:#0F172A }
.acc-apercu a:last-child { margin-left:auto }

/* En-tête */
.acc-top { background:#FFFFFF; border-bottom:1px solid #D5DDE8; position:sticky; top:0; z-index:50 }
.acc-bar { display:flex; align-items:center; gap:12px; padding-top:12px; padding-bottom:12px }
.acc-brand { display:flex; align-items:center; gap:14px; font-weight:800; font-size:36px; letter-spacing:-0.035em; color:#0F172A; text-decoration:none; margin-right:16px; white-space:nowrap }
.acc-brand .sio { background:linear-gradient(135deg, #22D3EE, #0891B2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }
.acc-logo { width:58px; height:58px; border-radius:17px; background:#22D3EE; color:#0F172A; display:grid; place-items:center; font-size:30px; box-shadow:0 10px 22px -10px rgba(8,145,178,.9) }
.acc-search { flex:1; max-width:600px; min-width:0; margin:0 auto; display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:13px;
  border:1px solid #CBD5E1; background:#F8FAFC; color:#475569; font:500 15px "Inter", sans-serif; cursor:pointer; text-align:left }
.acc-search:hover { border-color:#0891B2; background:#FFFFFF }
.acc-search i { font-size:18px }
.acc-search .t { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.acc-search kbd { font:700 11px "Inter", sans-serif; padding:3px 7px; border-radius:6px; background:#E2E8F0; color:#334155 }
.acc-actions { display:flex; align-items:center; gap:10px }
.acc-ico { position:relative; width:44px; height:44px; box-sizing:border-box; border-radius:11px; border:1px solid #D5DDE8; color:#334155; display:grid; place-items:center; font-size:19px; text-decoration:none; background:#FFFFFF }
.acc-ico:hover { border-color:#0891B2; color:#0E7490 }
.acc-aide { font-size:18px; font-weight:800 }
.acc-badge { position:absolute; top:5px; right:5px; min-width:17px; height:17px; padding:0 4px; box-sizing:border-box; border-radius:9px; background:#DC2626; color:#FFFFFF; font-size:10px; font-weight:800; display:grid; place-items:center }
.acc-logout { display:flex; align-items:center; gap:8px; height:44px; box-sizing:border-box; padding:0 14px; border-radius:11px; border:1px solid #FECACA; background:#FEF2F2; color:#B91C1C; font-size:14px; font-weight:800; text-decoration:none; white-space:nowrap }
.acc-logout i { font-size:18px }
.acc-logout:hover { background:#FEE2E2; border-color:#FCA5A5 }

/* Profil + menu 3 */
.acc-user { position:relative }
.acc-avatar { display:flex; align-items:center; gap:9px; padding:5px 10px 5px 5px; border-radius:12px; border:1px solid #D5DDE8; background:#FFFFFF; font:700 14px "Inter", sans-serif; color:#0F172A; cursor:pointer }
.acc-avatar .av, .acc-menu-who .av { border-radius:9px; background:#0E7490; color:#FFFFFF; display:grid; place-items:center; font-weight:800 }
.acc-avatar .av { width:32px; height:32px; font-size:12px }
.acc-avatar i { font-size:15px; color:#64748B; transition:transform .15s }
.acc-user.open .acc-avatar { border:1px solid #0891B2; background:#ECFEFF; box-shadow:0 0 0 1px #0891B2 }
.acc-user.open .acc-avatar i { transform:rotate(180deg) }
.acc-menu { display:none; position:absolute; top:calc(100% + 10px); right:0; width:340px; background:#FFFFFF; border-radius:16px; border:1px solid #CBD5E1;
  box-shadow:0 24px 48px -16px rgba(15,23,42,.75); overflow:hidden; z-index:60 }
.acc-user.open .acc-menu { display:block }
.acc-menu-who { display:flex; align-items:center; gap:12px; padding:16px; background:#F1F5F9; border-bottom:1px solid #E2E8F0 }
.acc-menu-who .av { width:46px; height:46px; border-radius:13px; font-size:16px; flex-shrink:0 }
.acc-menu-who b { display:block; font-size:16px; font-weight:800 }
.acc-menu-who small { display:block; font-size:13px; font-weight:600; color:#475569 }
.acc-menu-l { padding:8px; display:flex; flex-direction:column }
.acc-menu-l a { display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:10px; color:#0F172A; font-size:14px; font-weight:600; text-decoration:none }
.acc-menu-l a:hover { background:#F1F5F9 }
.acc-menu-l a.prem { background:#ECFEFF; font-weight:700 }
.acc-menu-l a.prem .i { background:#CFFAFE; color:#0E7490 }
.acc-menu-l .i { width:30px; height:30px; flex-shrink:0; border-radius:9px; background:#F1F5F9; color:#334155; display:grid; place-items:center; font-size:16px; font-weight:800 }
.acc-menu-out { padding:8px; border-top:1px solid #E2E8F0 }
.acc-menu-out a { display:flex; align-items:center; justify-content:center; gap:10px; padding:11px; border-radius:11px; background:#FEF2F2; border:1px solid #FECACA; color:#B91C1C; font-size:14.5px; font-weight:800; text-decoration:none }

/* Recherche */
.acc-modal { position:fixed; inset:0; z-index:100; background:rgba(15,23,42,.7); display:flex; align-items:flex-start; justify-content:center; padding:90px 16px 16px }
.acc-modal[hidden] { display:none }
.acc-modal-box { width:100%; max-width:700px; max-height:76vh; display:flex; flex-direction:column; background:#FFFFFF; border-radius:16px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.45) }
.acc-modal-in { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid #E2E8F0; font-size:20px; color:#475569 }
.acc-modal-in input { flex:1; min-width:0; border:none; outline:none; font:500 17px "Inter", sans-serif; color:#0F172A; background:transparent }
.acc-modal-in button { border:none; background:#F1F5F9; width:34px; height:34px; border-radius:9px; color:#334155; font-size:17px; cursor:pointer }
.acc-modal-res { overflow-y:auto }
.acc-res-it { display:flex; align-items:center; gap:12px; padding:11px 18px; border-bottom:1px solid #EEF2F7; color:#0F172A; text-decoration:none }
.acc-res-it:hover { background:#F1F5F9 }
.acc-res-it .ic { font-size:20px }
.acc-res-it .tx { flex:1; min-width:0 }
.acc-res-it b { display:block; font-size:14.5px; font-weight:700 }
.acc-res-it small { display:block; font-size:12.5px; color:#64748B; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.acc-res-it .ty { flex-shrink:0; padding:3px 9px; border-radius:999px; background:color-mix(in srgb, var(--c) 12%, #FFFFFF); color:var(--c); font-size:11px; font-weight:800; text-transform:uppercase }
.acc-res-vide { padding:16px 18px; color:#64748B; font-size:14px }

/* Bandeau Bonjour (directement sur le fond ardoise) */
.acc-hello { display:flex; align-items:center; gap:16px; flex-wrap:wrap; color:#FFFFFF }
.acc-hello-t { min-width:220px }
.acc-hello h1 { margin:0; font-size:32px; font-weight:800; letter-spacing:-0.02em }
.acc-hello h1 span { color:#67E8F9 }
.acc-hello-t small { font-size:14px; color:#E2E8F0; font-weight:500 }
.acc-chips { display:flex; gap:8px; flex-wrap:wrap; flex:1 }
.acc-chip { padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); font-size:13px; font-weight:600 }
.acc-chip.vac { background:rgba(103,232,249,.18); border-color:rgba(103,232,249,.55); font-weight:700; color:#CFFAFE }
.acc-chip.vac.veille, .acc-chip.vac.pendant { background:#22D3EE; border-color:#22D3EE; color:#0F172A }
.acc-reprendre { display:flex; align-items:center; gap:10px; padding:8px 14px 8px 8px; border-radius:13px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); color:#FFFFFF; text-decoration:none }
.acc-reprendre:hover { background:rgba(255,255,255,.2) }
.acc-reprendre .i { width:32px; height:32px; border-radius:9px; background:#FFFFFF; color:#334155; display:grid; place-items:center; font-size:16px }
.acc-reprendre small { display:block; font-size:11px; font-weight:700; color:#CBD5E1 }
.acc-reprendre b { display:block; font-size:13.5px; font-weight:700 }
.acc-dash { padding:12px 16px; border-radius:12px; background:#FFFFFF; color:#0F172A; font-weight:800; font-size:14px; text-decoration:none }
.acc-dash:hover { background:#ECFEFF }

/* Bandeau d'information */
.acc-bandeau { padding:11px 16px; border-radius:12px; background:#E9EEF5; border:1px solid #C3CEDB; border-left:5px solid #0891B2; font-size:14px; font-weight:600; color:#0F172A }
.acc-bandeau.urgent { background:#FEF2F2; border-color:#FECACA; border-left-color:#DC2626; color:#7F1D1D }
.acc-bandeau a { color:#0E7490 }

@media (max-width:1100px) {
  .acc-brand { font-size:28px; margin-right:4px } .acc-logo { width:46px; height:46px; font-size:24px; border-radius:14px }
  .acc-logout span { display:none } .acc-logout { padding:0; width:44px; justify-content:center }
}
@media (max-width:760px) {
  .acc-wrap { padding-left:16px; padding-right:16px }
  .acc-bar { flex-wrap:wrap }
  .acc-brand { font-size:24px; gap:10px } .acc-logo { width:40px; height:40px; font-size:21px; border-radius:12px }
  .acc-actions { margin-left:auto; gap:8px }
  .acc-avatar .nm { display:none }
  .acc-search { order:3; flex-basis:100%; max-width:none } .acc-search kbd { display:none }
  .acc-menu { position:fixed; top:auto; left:12px; right:12px; width:auto }
  .acc-hello { gap:12px } .acc-hello-t { flex-basis:100% }
  .acc-hello h1 { font-size:26px }
  .acc-aide { display:none }
  .acc-ico, .acc-logout { width:40px; height:40px }
  .acc-avatar { padding:3px 8px 3px 3px }
  .acc-main { padding-top:18px; gap:16px }
}

/* ======================================================================
   Étape 4 : grille cours du jour + colonne de droite (Mes liens, examen / bilan)
   Cadres en trame ardoise claire, contenus sur blanc
   ====================================================================== */
.acc-apercu-el { display:flex; align-items:center; gap:8px }
.acc-apercu-el select { padding:4px 8px; border-radius:8px; border:1px solid #475569; background:#0F172A; color:#E2E8F0; font:600 13px "Inter", sans-serif; max-width:260px }

.acc-grille { display:grid; grid-template-columns:minmax(0, 1.75fr) minmax(0, 1fr); gap:20px; align-items:start }
.acc-col-g, .acc-col-d { display:flex; flex-direction:column; gap:20px; min-width:0 }

.acc-carte { background:#E9EEF5; border:1px solid #C3CEDB; border-radius:18px; overflow:hidden }
.acc-carte-h { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 18px; background:#DCE3EC; border-bottom:1px solid #C3CEDB }
.acc-carte-k { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#334155 }
.acc-carte-h a { font-size:13px; font-weight:700; color:#0E7490; text-decoration:none }
.acc-carte-h a:hover { text-decoration:underline }

.acc-liens { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; padding:12px }
.acc-lien { position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; padding:12px 6px; border-radius:14px; background:#FFFFFF;
  border:1px solid #C3CEDB; color:#0F172A; font-size:12.5px; font-weight:700; text-align:center; text-decoration:none; transition:transform .12s, border-color .12s }
.acc-lien:hover { transform:translateY(-2px); background:color-mix(in srgb, var(--c) 12%, #FFFFFF); border-color:color-mix(in srgb, var(--c) 55%, #FFFFFF); color:color-mix(in srgb, var(--c) 75%, #0F172A) }
.acc-lien:hover .i { background:var(--c) }
.acc-lien .i { width:44px; height:44px; border-radius:13px; display:grid; place-items:center; color:#FFFFFF; font-size:22px; background:color-mix(in srgb, var(--c) 70%, #1E293B) }
.acc-lien .acc-badge { top:6px; right:8px; min-width:20px; height:20px; font-size:11px; border-radius:10px }

.acc-jauges { display:flex; justify-content:space-around; gap:8px; padding:14px 10px }
.acc-jauges a { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 12px; border-radius:14px; color:#0F172A; text-decoration:none; text-align:center }
.acc-jauges a:hover { background:#FFFFFF }
.acc-jauges b { font-size:13px; font-weight:700 }
.acc-jauges small { font-size:12px; color:#475569; font-weight:500 }
.acc-jauge { display:block }

.acc-bilan { display:flex; align-items:center; gap:16px; padding:14px 18px }
.acc-bilan b { display:block; font-size:14px; font-weight:800 }
.acc-bilan small { display:block; font-size:12.5px; color:#475569; font-weight:500 }
.acc-bilan small.up { color:#0F766E; font-weight:700 }
.acc-btn { display:inline-block; margin-top:8px; padding:7px 12px; border-radius:10px; background:#0F766E; color:#FFFFFF; font-size:13px; font-weight:700; text-decoration:none }
.acc-btn:hover { background:#115E59 }

@media (max-width:1100px) { .acc-grille { grid-template-columns:1fr } .acc-col-d { display:grid; grid-template-columns:1fr 1fr } }
@media (max-width:760px) { .acc-col-d { grid-template-columns:1fr } .acc-apercu-el select { max-width:200px } }

/* ======================================================================
   Étape 5 : « Mon assiduité » — rosé (pas venu) → orange (un passage) → 3 verts ; pulsation si présence faible
   ====================================================================== */
@keyframes accPulse { 0% { box-shadow:0 0 0 0 rgba(225,29,72,.6) } 70% { box-shadow:0 0 0 12px rgba(225,29,72,0) } 100% { box-shadow:0 0 0 0 rgba(225,29,72,0) } }
.acc-assid .pulse { animation:accPulse 1.8s ease-out infinite }
@media (prefers-reduced-motion: reduce) { .acc-assid .pulse { animation:none } }
.acc-assid-t { display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.acc-assid-t b { font-size:15px; font-weight:800 }
.acc-assid-badge { display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px; font-size:12.5px; font-weight:800; border:1px solid }
.acc-assid-badge i { width:8px; height:8px; border-radius:50% }
.acc-assid.ok .acc-assid-badge { background:#DCFCE7; color:#14532D; border-color:#86EFAC } .acc-assid.ok .acc-assid-badge i { background:#15803D }
.acc-assid.moyen .acc-assid-badge { background:#FFEDD5; color:#7C2D12; border-color:#FDBA74 } .acc-assid.moyen .acc-assid-badge i { background:#EA580C }
.acc-assid.bas .acc-assid-badge { background:#FFE4E6; color:#881337; border-color:#FDA4AF } .acc-assid.bas .acc-assid-badge i { background:#E11D48 }
.acc-assid-in { padding:16px 18px 18px; display:flex; flex-direction:column; gap:14px }

.acc-mois { display:flex; gap:4px; padding:12px; background:#FFFFFF; border:1px solid #C3CEDB; border-radius:14px }
.acc-j { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px }
.acc-j.lun { margin-left:10px }
.acc-j small { font-size:10px; font-weight:800; color:#64748B }
.acc-j > span { display:grid; place-items:center; width:100%; height:40px; box-sizing:border-box; border-radius:9px; font-size:13px; font-weight:800 }
.acc-j .l0, .acc-leg i.l0 { background:#FECDD3; color:#9F1239 }
.acc-j .l1, .acc-leg i.l1 { background:#FDBA74; color:#7C2D12 }
.acc-j .l2, .acc-leg i.l2 { background:#BBF7D0; color:#166534 }
.acc-j .l3, .acc-leg i.l3 { background:#4ADE80; color:#14532D }
.acc-j .l4, .acc-leg i.l4 { background:#15803D; color:#FFFFFF }
.acc-j .we, .acc-leg i.we { background:repeating-linear-gradient(135deg, #DCE3EC 0 4px, #F1F5F9 4px 8px); color:#94A3B8 }
.acc-j .vac, .acc-leg i.vac { background:#CFFAFE; color:#0E7490 }
.acc-j .fut, .acc-leg i.fut { background:#FFFFFF; color:#94A3B8; border:1px dashed #94A3B8 }
.acc-j .auj { outline:3px solid #0F172A; outline-offset:2px }

.acc-assid-bas { display:flex; gap:12px; align-items:stretch; flex-wrap:wrap }
.acc-assid-msg { flex:2 1 380px; display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:14px; background:#F8FAFC; border:1px solid #C3CEDB }
.acc-assid.ok .acc-assid-msg { background:#F0FDF4; border-color:#86EFAC }
.acc-assid.moyen .acc-assid-msg { background:#FFF7ED; border-color:#FDBA74 }
.acc-assid.bas .acc-assid-msg { background:#FFF1F2; border-color:#FDA4AF }
.acc-assid-msg .ic { width:34px; height:34px; flex-shrink:0; border-radius:10px; display:grid; place-items:center; color:#FFFFFF; font-size:19px; background:#475569 }
.acc-assid.ok .acc-assid-msg .ic { background:#15803D } .acc-assid.moyen .acc-assid-msg .ic { background:#EA580C } .acc-assid.bas .acc-assid-msg .ic { background:#E11D48 }
.acc-assid-msg b { display:block; font-size:15px; font-weight:800 }
.acc-assid-msg small { display:block; font-size:13.5px; color:#334155; line-height:1.5; margin-top:2px }
.acc-assid-go { display:inline-block; margin-top:8px; padding:7px 12px; border-radius:9px; background:#E11D48; color:#FFFFFF; font-size:13px; font-weight:800; text-decoration:none }
.acc-assid-nums { flex:3 1 420px; display:flex; gap:10px }
.acc-assid-nums div { flex:1; min-width:110px; padding:10px 12px; border-radius:12px; background:#FFFFFF; border:1px solid #C3CEDB }
.acc-assid-nums b { display:block; font-size:20px; font-weight:800 }
.acc-assid-nums small { display:block; font-size:12px; font-weight:700; color:#475569 }

.acc-leg { display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-size:12px; font-weight:700; color:#334155 }
.acc-leg .k { font-weight:800; color:#475569 }
.acc-leg span { display:inline-flex; align-items:center; gap:6px }
.acc-leg i:not(.ti) { display:inline-block; width:14px; height:14px; border-radius:4px; box-sizing:border-box }
.acc-leg-reel { margin-left:auto; padding:5px 10px; border-radius:999px; background:#FFFFFF; border:1px solid #C3CEDB; cursor:help }
.acc-leg-reel .ti { font-size:15px; color:#0F766E }

@media (max-width:900px) {
  .acc-mois { overflow-x:auto; gap:3px } .acc-j { flex:0 0 30px } .acc-j.lun { margin-left:6px }
  .acc-j > span { height:34px; font-size:12px }
  .acc-assid-nums { flex-wrap:wrap } .acc-leg-reel { margin-left:0 }
}

/* ======================================================================
   Étape 6 : « Mes espaces » (tuiles, dessin en transparence) + « Veille technologique »
   ====================================================================== */
.acc-sec-t { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:4px 2px 12px; color:#FFFFFF }
.acc-sec-t h2 { margin:0; font-size:22px; font-weight:800; letter-spacing:-0.015em }
.acc-sec-t span { font-size:14px; color:#E2E8F0 }
.acc-tuiles { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:14px }
.acc-tuile { position:relative; overflow:hidden; display:flex; flex-direction:column; gap:6px; padding:16px; min-height:128px; box-sizing:border-box;
  border-radius:18px; color:#FFFFFF; text-decoration:none; background:color-mix(in srgb, var(--c) 70%, #1E293B);
  box-shadow:0 12px 24px -16px rgba(15,23,42,.9); transition:transform .15s, box-shadow .15s }
.acc-tuile:hover { transform:translateY(-3px); box-shadow:0 18px 30px -16px rgba(15,23,42,.95) }
.acc-tuile .wm { position:absolute; right:-14px; bottom:-18px; font-size:110px; line-height:1; color:#FFFFFF; opacity:.16; pointer-events:none }
.acc-tuile .ic { width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.16); display:grid; place-items:center; font-size:20px }
.acc-tuile b { font-size:16px; font-weight:800; margin-top:4px; position:relative }
.acc-tuile small { font-size:12.5px; font-weight:600; color:rgba(255,255,255,.85); position:relative }

.acc-veille { background:#E9EEF5; border:1px solid #C3CEDB; border-radius:18px; overflow:hidden }
.acc-veille-h { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 18px; background:#0F172A; color:#FFFFFF }
.acc-veille-h .ic { width:38px; height:38px; border-radius:11px; background:#22D3EE; color:#0F172A; display:grid; place-items:center; font-size:20px }
.acc-veille-h .t { margin-right:auto }
.acc-veille-h .t b { display:block; font-size:18px; font-weight:800 }
.acc-veille-h .t small { display:block; font-size:12.5px; color:#CBD5E1; font-weight:500 }
.acc-veille-f { display:flex; gap:6px; flex-wrap:wrap }
.acc-veille-f button { display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; border:1px solid #475569; background:transparent; color:#E2E8F0; font:700 12.5px "Inter", sans-serif; cursor:pointer }
.acc-veille-f button.on { background:#FFFFFF; border-color:#FFFFFF; color:#0F172A }
.acc-veille-f .itc { width:8px; height:8px; border-radius:2px; background:#2B9ED6; box-shadow:3px 3px 0 #F39200 }
.acc-veille-h .tous { padding:8px 13px; border-radius:10px; background:#22D3EE; color:#0F172A; font-size:13px; font-weight:800; text-decoration:none }
.acc-veille-b { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:16px; padding:16px 18px 18px }
.acc-veille-vide { grid-column:1 / -1; padding:8px 2px; color:#334155; font-weight:600 }
.acc-veille-vide a { color:#0E7490 }
.acc-une { display:flex; gap:16px; padding:18px; border-radius:16px; background:#FFFFFF; border:1px solid #C3CEDB; box-shadow:inset 0 4px 0 var(--c); color:#0F172A; text-decoration:none }
.acc-une:hover, .acc-breve:hover { border-color:#0891B2 }
.acc-une .tx { display:flex; flex-direction:column; gap:6px; min-width:0 }
.acc-une .meta { display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.acc-une .src { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em }
.acc-une .fr, .acc-breve .fr { color:#E58600 }
.acc-une .tag { padding:2px 8px; border-radius:999px; font-size:11px; font-weight:800 }
.acc-une .tag.une { background:#0F172A; color:#FFFFFF } .acc-une .tag.neuf { background:#CFFAFE; color:#155E75 }
.acc-une b { font-size:19px; font-weight:800; line-height:1.3 }
.acc-une .res { font-size:14px; color:#475569; line-height:1.55 }
.acc-une small { font-size:12.5px; font-weight:600; color:#64748B }
.acc-breves { display:flex; flex-direction:column; gap:10px }
.acc-breve { display:flex; gap:12px; align-items:center; padding:12px; border-radius:14px; background:#FFFFFF; border:1px solid #C3CEDB; color:#0F172A; text-decoration:none }
.acc-breve span { min-width:0 }
.acc-breve b { display:block; font-size:14.5px; font-weight:700; line-height:1.35 }
.acc-breve small { display:block; font-size:12px; font-weight:700; margin-top:2px }
.sg { position:relative; flex-shrink:0; width:44px; height:44px; border-radius:12px; background:var(--c); color:#FFFFFF; display:grid; place-items:center; font-size:12.5px; font-weight:800 }
.sg.g { width:60px; height:60px; border-radius:16px; font-size:19px }
.sg.itc::after { content:""; position:absolute; right:6px; bottom:6px; width:7px; height:7px; border-radius:2px; background:#F39200 }
.sg.g.itc::after { right:8px; bottom:8px; width:9px; height:9px; border-radius:3px }

@media (max-width:1100px) { .acc-tuiles { grid-template-columns:repeat(3, minmax(0, 1fr)) } .acc-veille-b { grid-template-columns:1fr } }
@media (max-width:760px) { .acc-tuiles { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px } .acc-tuile { min-height:112px; padding:14px }
  .acc-une { flex-direction:column; gap:10px } .acc-veille-f { order:3; flex-basis:100% } }

/* Étape 8 : tuile réservée (comptes « Autre ») */
.acc-tuile.verrou { background:color-mix(in srgb, var(--c) 25%, #64748B); cursor:not-allowed; box-shadow:none }
.acc-tuile.verrou:hover { transform:none }
.acc-tuile.verrou .wm { opacity:.1 }

/* ======================================================================
   Étape 9 : accueil enseignant (agenda modifiable), bouton « Vue élève », pied de page
   ====================================================================== */
.acc-apercu a.retour { margin-left:auto; background:#22D3EE; border-color:#22D3EE; color:#0F172A; font-weight:800 }
.acc-apercu a.retour + a, .acc-apercu a:last-child:not(.retour) { margin-left:0 }
.acc-vue { display:inline-flex; align-items:center; gap:8px; padding:11px 15px; border-radius:12px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.4);
  color:#FFFFFF; font-weight:800; font-size:14px; text-decoration:none }
.acc-vue:hover { background:rgba(255,255,255,.22) }
.acc-cdj-cl { padding:4px 10px; border-radius:8px; background:#92400E; color:#FFFFFF; font-size:13px; font-weight:800; letter-spacing:.04em }
.acc-cdj-adm { margin-left:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.acc-cdj-adm .acc-cdj-all { margin-left:0 }
.acc-adm { display:flex; gap:8px; flex-wrap:wrap; margin-top:-4px }
.acc-adm-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:9px; background:#FFFFFF; border:1px solid #E2C67A;
  color:#78350F; font-size:13px; font-weight:700; text-decoration:none }
.acc-adm-btn:hover { background:#FEF3C7; border-color:#B45309 }
.acc-adm-btn.plus { background:#92400E; border-color:#92400E; color:#FFFFFF }
.acc-adm-btn.plus:hover { background:#78350F }

.acc-foot { margin-top:8px; background:#1E293B; color:#CBD5E1; border-top:1px solid #334155 }
.acc-foot-in { display:grid; grid-template-columns:minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap:28px; padding-top:30px; padding-bottom:24px }
.acc-foot .acc-brand { color:#FFFFFF; font-size:26px; margin:0 0 10px }
.acc-foot .acc-logo { width:44px; height:44px; font-size:22px; border-radius:13px }
.acc-foot .acc-brand .sio { background:none; -webkit-text-fill-color:#67E8F9; color:#67E8F9 }
.acc-foot p { margin:0; font-size:13.5px; line-height:1.6 }
.acc-foot a { color:#E2E8F0; text-decoration:none }
.acc-foot a:hover { color:#67E8F9 }
.acc-foot h4 { margin:4px 0 10px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:#94A3B8 }
.acc-foot-col { display:flex; flex-direction:column; gap:8px; font-size:14px }
.acc-foot-col a { display:inline-flex; align-items:center; gap:8px }
.acc-foot-bas { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:14px; padding-bottom:18px; border-top:1px solid #334155; font-size:12.5px; color:#94A3B8 }
@media (max-width:760px) { .acc-foot-in { grid-template-columns:1fr; gap:18px } }
/* Carte « Mon cours du jour » : ardoise comme les autres cadres + bandeau noir et liseré cyan (comme la veille) */
.acc-cdj { background:#E9EEF5; border-color:#C3CEDB; border-left:6px solid #22D3EE; box-shadow:0 14px 30px -20px rgba(15,23,42,.7) }
.acc-cdj-head { background:#0F172A; border-bottom-color:#0F172A; color:#FFFFFF }
.acc-cdj-k { color:#67E8F9 } .acc-cdj-d { color:#FFFFFF } .acc-cdj-all { color:#67E8F9 }
.acc-cdj-chip { background:transparent; border-color:#475569; color:#E2E8F0 }
.acc-slot, .acc-prog { border-color:#C3CEDB }
.acc-slot.focus { background:#0891B2; border-color:#0891B2 }
.acc-seance + .acc-seance { border-top-color:#C3CEDB }
.acc-sec { color:#0E7490 }
.acc-res-a { border-color:#C3CEDB } .acc-res-a:hover { border-color:#0891B2; color:#0E7490 }
.acc-res-plus { background:#DCE3EC; color:#334155 }
.acc-cdj-info { color:#334155 }
.acc-cdj-cl { background:#22D3EE; color:#0F172A }
.acc-adm-btn { border-color:#C3CEDB; color:#0F172A } .acc-adm-btn:hover { background:#ECFEFF; border-color:#0891B2; color:#0E7490 }
.acc-adm-btn.plus { background:#22D3EE; border-color:#22D3EE; color:#0F172A } .acc-adm-btn.plus:hover { background:#67E8F9; color:#0F172A }
.acc-cdj-vide { color:#334155 }

/* Trame colorée des cadres (chaque cadre a sa teinte : --t) */
.acc-carte[style*="--t"] { background:color-mix(in srgb, var(--t) 11%, #E9EEF5); border-color:color-mix(in srgb, var(--t) 32%, #C3CEDB) }
.acc-carte[style*="--t"] > .acc-carte-h { background:color-mix(in srgb, var(--t) 22%, #DCE3EC); border-bottom-color:color-mix(in srgb, var(--t) 32%, #C3CEDB) }
.acc-carte[style*="--t"] .acc-carte-k { color:color-mix(in srgb, var(--t) 70%, #0F172A) }

/* Signaler un problème (fenêtre) */
.acc-sig { max-width:560px; max-height:none }
.acc-sig-h { display:flex; align-items:center; gap:12px; padding:16px 18px; background:#FEF2F2; border-bottom:1px solid #FECACA }
.acc-sig-h .ic { width:38px; height:38px; border-radius:11px; background:#DC2626; color:#FFFFFF; display:grid; place-items:center; font-size:19px }
.acc-sig-h div { flex:1 } .acc-sig-h b { display:block; font-size:17px; font-weight:800 } .acc-sig-h small { display:block; font-size:13px; color:#7F1D1D }
.acc-sig-h button { border:none; background:#FFFFFF; width:34px; height:34px; border-radius:9px; color:#334155; font-size:17px; cursor:pointer }
.acc-sig-c { display:flex; flex-direction:column; gap:6px; padding:16px 18px }
.acc-sig-c label { margin-top:6px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#334155 }
.acc-sig-c label small { text-transform:none; letter-spacing:0; font-weight:600; color:#64748B }
.acc-sig-c select, .acc-sig-c input, .acc-sig-c textarea { width:100%; box-sizing:border-box; padding:10px 12px; border-radius:10px; border:1px solid #CBD5E1; background:#F8FAFC; font:500 14.5px "Inter", sans-serif; color:#0F172A }
.acc-sig-c textarea { min-height:130px; resize:vertical; line-height:1.5 }
.acc-sig-c select:focus, .acc-sig-c input:focus, .acc-sig-c textarea:focus { outline:none; border-color:#0891B2; background:#FFFFFF; box-shadow:0 0 0 3px rgba(34,211,238,.25) }
.acc-sig-r { min-height:20px; margin:4px 0 0; font-size:13.5px; font-weight:700; color:#475569 }
.acc-sig-r.ok { color:#15803D } .acc-sig-r.err { color:#B91C1C }
.acc-sig-a { display:flex; justify-content:flex-end; gap:8px; padding:12px 18px 16px; border-top:1px solid #E2E8F0 }
.acc-btn2 { display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border-radius:11px; border:1px solid #CBD5E1; background:#FFFFFF; font:700 14px "Inter", sans-serif; color:#0F172A; cursor:pointer }
.acc-btn2.go { background:#0F172A; border-color:#0F172A; color:#FFFFFF } .acc-btn2.go:hover { background:#1E293B } .acc-btn2:disabled { opacity:.6; cursor:wait }

/* ======================================================================
   Confort visuel (retour des élèves : « ça éblouit ») — variante V3 :
   plus de blanc pur, pavés en ardoise pâle avec un reflet de la couleur de leur cadre,
   cadres plus soutenus, veille avec reflet cyan
   ====================================================================== */
body.acc { color:#1E293B }
.acc-top { background:#EEF2F6; border-bottom-color:#AEBACB }
.acc-search, .acc-ico, .acc-avatar { background:#EEF2F6; border-color:#AEBACB }
.acc-prog, .acc-slot:not(.focus), .acc-res-a, .acc-adm-btn:not(.plus), .acc-lien, .acc-mois, .acc-assid-nums div, .acc-une, .acc-breve, .acc-dash, .acc-menu, .acc-leg-reel, .acc-modal-box { background:#EEF2F6 !important; border-color:#AEBACB !important }
.acc-carte[style*="--t"] { background:color-mix(in srgb, var(--t) 18%, #D5DDE7) !important; border-color:color-mix(in srgb, var(--t) 35%, #AEBACB) !important }
.acc-carte[style*="--t"] > .acc-carte-h { background:color-mix(in srgb, var(--t) 30%, #C2CCD9) !important }
.acc-carte:not([style*="--t"]), .acc-veille { background:#D5DDE7 !important; border-color:#AEBACB !important }
.acc-cdj { background:#D5DDE7 !important; border-color:#AEBACB !important } .acc-cdj-head { background:#1E293B !important }
.acc-bandeau { background:#D5DDE7; border-color:#AEBACB }
.acc-chip.vac.veille, .acc-chip.vac.pendant { background:rgba(103,232,249,.22); border-color:rgba(103,232,249,.6); color:#CFFAFE }
.acc-j .l0 { background:#F3D3DA }
.acc-tuile { background:color-mix(in srgb, var(--c) 58%, #1E293B) }
.acc-res-plus { background:#C2CCD9 }
.acc-carte[style*="--t"] .acc-lien, .acc-carte[style*="--t"] .acc-mois, .acc-carte[style*="--t"] .acc-assid-nums div { background:color-mix(in srgb, var(--t) 7%, #EEF2F6) !important }
.acc-cdj .acc-prog, .acc-cdj .acc-slot:not(.focus), .acc-cdj .acc-res-a { background:color-mix(in srgb, #22D3EE 6%, #EEF2F6) !important }
/* veille avec reflet cyan, comme les autres cadres */
.acc-veille { background:color-mix(in srgb, #0891B2 14%, #D5DDE7) !important; border-color:color-mix(in srgb, #0891B2 35%, #AEBACB) !important }
.acc-veille .acc-une, .acc-veille .acc-breve { background:color-mix(in srgb, #0891B2 6%, #EEF2F6) !important }

/* ===== Étape 10 : liens en barre, carte période (vacances / stage / examens), « Mon examen · à faire » ===== */
.acc-barre { display:flex; align-items:center; gap:14px; padding:10px 14px; border-radius:18px; background:color-mix(in srgb, #0284C7 14%, #D5DDE7); border:1px solid color-mix(in srgb, #0284C7 30%, #AEBACB) }
.acc-barre .k { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#075985; padding:0 6px; white-space:nowrap }
.acc-barre .acc-liens { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:8px; padding:0; flex:1 }
.acc-barre .acc-lien { flex-direction:row; justify-content:flex-start; gap:10px; padding:8px 10px; font-size:13.5px; text-align:left; line-height:1.2 }
.acc-barre .acc-lien .i { width:34px; height:34px; border-radius:10px; font-size:18px; flex:0 0 34px }
.acc-barre .acc-lien .acc-badge { top:-6px; right:-6px }
@media (max-width:1100px) { .acc-barre { flex-direction:column; align-items:stretch; gap:8px } .acc-barre .acc-liens { grid-template-columns:repeat(3, minmax(0, 1fr)) } }
@media (max-width:560px) { .acc-barre .acc-liens { grid-template-columns:repeat(2, minmax(0, 1fr)) } }
.acc-grille-v2 { align-items:stretch } .acc-grille-v2 .acc-col-g > section { flex:1 }

.acc-per { display:flex; flex-direction:column; background:#D5DDE7; border:1px solid #AEBACB; border-left:6px solid color-mix(in srgb, var(--p) 70%, #FFFFFF); border-radius:18px; overflow:hidden; color:#0F172A; box-shadow:0 14px 30px -20px rgba(15,23,42,.7) }
.acc-per-h { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 20px; background:#1E293B; color:#FFFFFF }
.acc-per-h .k { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:color-mix(in srgb, var(--p) 45%, #FFFFFF) }
.acc-per-h .d { font-size:16px; font-weight:800 }
.acc-per-h .chip { padding:3px 10px; border-radius:999px; border:1px solid #475569; font-size:12px; font-weight:700; color:#E2E8F0 }
.acc-per-h a { margin-left:auto; font-size:13px; font-weight:700; color:color-mix(in srgb, var(--p) 45%, #FFFFFF); text-decoration:none }
.acc-per-h a:hover { text-decoration:underline }
.acc-per-b { flex:1; display:grid; grid-template-columns:220px minmax(0, 1fr); gap:18px; padding:20px; align-items:center }
.acc-per-cal { display:flex; flex-direction:column; height:236px; border-radius:16px; overflow:hidden; border:1px solid color-mix(in srgb, var(--p) 35%, #AEBACB); background:color-mix(in srgb, var(--p) 10%, #EEF2F6); box-shadow:0 10px 22px -16px color-mix(in srgb, var(--p) 90%, transparent) }
.acc-per-cal .t { position:relative; padding:9px 0; text-align:center; background:var(--p); color:#FFFFFF; font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase }
.acc-per-cal .t::before, .acc-per-cal .t::after { content:""; position:absolute; top:-6px; left:48px; width:10px; height:18px; border-radius:6px; background:#1E293B }
.acc-per-cal .t::after { left:auto; right:48px }
.acc-per-cal .n { flex:1; display:grid; place-items:center; font-size:92px; font-weight:900; line-height:1; color:color-mix(in srgb, var(--p) 55%, #0F172A); padding-top:8px }
.acc-per-cal .m { padding:0 0 14px; text-align:center; font-size:16px; font-weight:800; color:color-mix(in srgb, var(--p) 70%, #0F172A) }
.acc-per-r { min-height:236px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:18px 20px; border-radius:16px; background:color-mix(in srgb, var(--p) 7%, #EEF2F6); border:1px solid #AEBACB }
.acc-per-r .t { font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#475569 }
.acc-per-r h3 { margin:0; font-size:24px; font-weight:800 }
.acc-per-r .c { font-size:15px; font-weight:700; color:color-mix(in srgb, var(--p) 80%, #0F172A) }
.acc-per-r .bar { height:8px; border-radius:4px; background:#C7D2DE; overflow:hidden } .acc-per-r .bar i { display:block; height:100%; background:var(--p); border-radius:4px }
.acc-per-r .msg { padding:9px 12px; border-radius:10px; background:color-mix(in srgb, var(--p) 10%, #EEF2F6); border:1px solid color-mix(in srgb, var(--p) 30%, #AEBACB); font-size:14px; font-weight:600; color:#1E293B; line-height:1.45 }
.acc-per-r .p { margin-top:4px; padding-top:12px; border-top:1px dashed #AEBACB; font-size:14px; font-weight:600; color:#334155; line-height:1.45 }
.acc-per-r .p b { color:#0F172A }
@media (max-width:760px) { .acc-per-b { grid-template-columns:1fr; padding:14px } .acc-per-cal { height:auto; flex-direction:row; align-items:center } .acc-per-cal .t { padding:10px 14px } .acc-per-cal .t::before, .acc-per-cal .t::after { display:none } .acc-per-cal .n { font-size:44px; flex:0 0 auto; padding:0 12px } .acc-per-cal .m { padding:0 } .acc-per-r { min-height:0 } }

.acc-exa-l { padding:12px 14px 14px; display:flex; flex-direction:column; gap:8px }
.acc-exa-l a { display:grid; grid-template-columns:46px minmax(0, 1fr) auto; gap:4px 12px; align-items:center; padding:10px 12px; border-radius:12px; background:color-mix(in srgb, #7C3AED 7%, #EEF2F6); border:1px solid #AEBACB; color:#0F172A; text-decoration:none; font-size:13.5px; font-weight:700; line-height:1.3; transition:transform .15s, border-color .15s }
.acc-exa-l a:hover { transform:translateY(-1px); border-color:var(--c) }
.acc-exa-l .e { grid-row:1 / 3; text-align:center; padding:6px 0; border-radius:9px; color:#FFFFFF; font-size:12px; font-weight:900; background:var(--c); line-height:1.15 }
.acc-exa-l .e small { display:block; font-size:12.5px; color:#FFFFFF; opacity:.92 }
.acc-exa-l .tx small { display:block; font-size:12px; font-weight:600; color:#475569 }
.acc-exa-l .go { font-size:12.5px; font-weight:800; color:var(--c); white-space:nowrap }
.acc-exa-l .bar { grid-column:2 / 4; height:6px; border-radius:3px; background:#C7D2DE; overflow:hidden } .acc-exa-l .bar i { display:block; height:100%; border-radius:3px; background:var(--c) }

/* Assiduité pendant une période (vacances, stage, examens) */
.acc-assid-badge.per { background:color-mix(in srgb, var(--p) 14%, #EEF2F6); border-color:color-mix(in srgb, var(--p) 45%, #FFFFFF); color:color-mix(in srgb, var(--p) 75%, #0F172A) }
.acc-assid.per .acc-assid-msg { background:color-mix(in srgb, #0284C7 9%, #EEF2F6) !important; border-color:#7DD3FC !important }
.acc-assid.per .acc-assid-msg .ic { background:#0284C7; font-size:18px }
.acc-j .vacx { box-shadow:inset 0 -3px 0 #38BDF8 }

/* ===== Étape 11 : « Le mot du prof » (post-it géré dans admin/postits.php) ===== */
.acc-postit { position:relative; margin-top:6px; padding:18px 18px 16px; border-radius:4px 4px 18px 4px; background:linear-gradient(170deg, #FEF3C7, #FDE68A);
  border:1px solid #F5D06B; box-shadow:0 18px 26px -18px rgba(120,53,15,.8); color:#422006; transform:rotate(-.6deg) }
.acc-postit::before { content:""; position:absolute; top:-9px; left:50%; width:90px; height:20px; margin-left:-45px; background:rgba(255,255,255,.55); border:1px solid rgba(180,140,40,.25); transform:rotate(2deg) }
.acc-postit-h { display:flex; align-items:center; gap:8px; margin-bottom:10px }
.acc-postit-h b { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#92400E }
.acc-postit-h span { margin-left:auto; font-size:12px; font-weight:700; color:#A16207 }
.acc-postit ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px }
.acc-postit li { display:grid; grid-template-columns:22px minmax(0, 1fr); gap:8px; font-size:14.5px; font-weight:600; line-height:1.4 }
.acc-postit li i { font-style:normal; font-size:16px }
.acc-postit li small { display:block; font-size:12.5px; font-weight:600; color:#A16207 }
.acc-postit .sig { margin-top:10px; text-align:right; font-size:13px; font-weight:700; color:#92400E; font-style:italic }
.acc-postit.mini { margin:0; padding:12px 12px 10px; transform:none; box-shadow:none }
.acc-postit.mini::before { display:none } .acc-postit.mini li { font-size:13px }
.acc-postits-adm-l { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px }
.acc-postits-adm-l .cl { display:inline-block; margin-bottom:6px; padding:2px 9px; border-radius:7px; background:#92400E; color:#FFFFFF; font-size:12px; font-weight:800 }
.acc-postits-adm-l .vide { display:block; padding:14px 10px; border-radius:12px; border:1px dashed #D97706; color:#92400E; font-size:13px; font-weight:700; text-align:center; text-decoration:none; background:color-mix(in srgb, #F59E0B 8%, #EEF2F6) }
@media (max-width:560px) { .acc-postits-adm-l { grid-template-columns:1fr } }
/* Accueil enseignant : tuiles « Post-it SIO1 / SIO2 » dans Mes liens */
.acc-liens .acc-pi-tuile { align-items:flex-start; justify-content:flex-start; gap:3px; padding:10px 12px; text-align:left; border-radius:4px 4px 14px 4px;
  background:linear-gradient(170deg, #FEF3C7, #FDE68A) !important; border:1px solid #F5D06B !important; color:#422006; transform:rotate(-.8deg) }
.acc-liens .acc-pi-tuile:nth-last-child(1) { transform:rotate(.8deg) }
.acc-liens .acc-pi-tuile:hover { transform:translateY(-2px) rotate(0); border-color:#D97706 !important; color:#422006 }
.acc-pi-tuile .h { font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#92400E }
.acc-pi-tuile b { font-size:16px; font-weight:800 }
.acc-pi-tuile small { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12px; font-weight:600; color:#A16207; line-height:1.3 }