:root{
    --cream:#f7ecd8; --cream2:#efe0bd; --paper:#fdf6e8;
    --wood:#8a5a34; --wood-dark:#5c3a1e; --wood-deep:#3e2712;
    --rose:#cf8394; --rose-dark:#9c5064; --rose-deep:#7a2e42;
    --gold:#c9a227; --gold-light:#f0d989; --gold-deep:#8a6a14;
    --sage:#93a873; --sage-dark:#5f7248;
    --ink:#4a3323; --ink-soft:#6b5240;
    --black:#3e2712; --edge:#9c5064; --rim:#c9a227;
    --txt-lite:#fff6e4; --txt-mut:#8a4a58; --txt-screen:#4a3323;
    --amber-a:#f6d98a; --amber-b:#c9911a;
    --green-a:#e3ecd6; --green-b:#7a9a5c;
    /* --- biseaux "Windows 98" --- */
    --bev-hi:#fffdf5; --bev-hi2:#f7ecd8; --bev-lo:#3e2712; --bev-lo2:#8a5a34;
    /* --- polices systeme "Windows 98" --- */
    --ui-font:"MS Sans Serif","Microsoft Sans Serif",Tahoma,Geneva,Verdana,sans-serif;
    --fancy-font:"Comic Sans MS","Comic Neue",Tahoma,cursive;
    --mono-font:"Courier New","Lucida Console",monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body,input,button,select,textarea{-webkit-font-smoothing:none;font-synthesis:none;}
  html,body{height:100%;overflow:hidden;}
  body{
    font-family:var(--ui-font);font-size:13.5px;color:var(--ink);
    background:
      radial-gradient(1200px 700px at 20% -10%, rgba(207,131,148,.20), transparent 60%),
      radial-gradient(900px 700px at 90% 110%, rgba(147,168,115,.18), transparent 60%),
      repeating-radial-gradient(circle at 0 0, rgba(201,162,39,.05) 0 2px, transparent 2px 42px),
      linear-gradient(180deg,#fbf3df 0%,#f3e3c2 45%,#ecd9ae 100%);
    height:100vh;overflow:hidden;display:flex;justify-content:center;align-items:stretch;
  }
  /* fond papier peint fleuri (petites roses tramées) */
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23cf8394' fill-opacity='0.28'%3E%3Ccircle cx='20' cy='20' r='6'/%3E%3Ccircle cx='26' cy='16' r='4'/%3E%3Ccircle cx='14' cy='16' r='4'/%3E%3Ccircle cx='20' cy='12' r='4'/%3E%3C/g%3E%3Cg fill='%2393a873' fill-opacity='0.22'%3E%3Cpath d='M70 70 q4 -10 12 -6 q-2 10 -12 6z'/%3E%3Cpath d='M70 70 q-4 -10 -12 -6 q2 10 12 6z'/%3E%3Ccircle cx='70' cy='72' r='3'/%3E%3C/g%3E%3C/svg%3E");
    background-size:120px 120px;
  }
  body::after{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
    opacity:.4;mix-blend-mode:multiply;
    background:radial-gradient(140% 120% at 50% 20%, transparent 55%, rgba(140,90,52,.14) 100%);
  }
  html::after{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:51;
    background:radial-gradient(130% 105% at 50% 50%, transparent 60%, rgba(94,58,30,.16) 100%);
  }
  @media (prefers-reduced-motion: reduce){ *{animation-duration:.001s !important;} }
  #fit{position:relative;z-index:1;width:min(1600px,100%);max-width:1600px;height:auto;overflow:hidden;transform:none !important;
    padding:10px 12px;display:flex;flex-direction:column;
    filter:drop-shadow(0 20px 30px rgba(62,39,18,.35));}

  /* ===== biseaux réutilisés partout (look "Windows 98") =====
     Les vrais boutons (abtn/mini/ntbtn/delbtn) sortent de ce reset plus
     bas : ils passent au look "Windows Vista / Aero" (voir plus loin).
     Le reste (onglets, cellules, panneaux, modales) garde le style plat. */
  .tab,.ntab,.cell,
  .panel,.rpanel,.cpanel,.modal,#eodShutter .eod-board{
    border-radius:0;
  }

  /* ===== boutons façon "Windows Vista / Aero" =====
     Degrade vertical glossy avec reflet sur la moitie haute, bord bleute,
     relief via ombres, eclaircissement au survol, effet enfonce au clic.
     Applique a tous les vrais boutons de la page (abtn/mini/ntbtn/delbtn) ;
     les onglets (.tab/.ntab), les cellules de grille et le mini-Bloc-notes
     "Windows 95" (.w97 .ntbtn) gardent leur habillage propre, different
     par nature (ce ne sont pas des boutons d'action). */
  .abtn,.mini,.ntbtn,.delbtn{
    border-radius:5px;
    border:1px solid #5f89b3;
    background:linear-gradient(to bottom,
      #f2f8fd 0%, #e2f0fc 6%, #c8e4f9 45%, #aed7f4 47%, #93c8ef 78%, #82bdea 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.85),
      inset 0 0 0 1px rgba(255,255,255,.3),
      0 1px 2px rgba(20,50,80,.28),
      0 3px 6px rgba(20,50,80,.12);
    color:#1a3a57;
    text-shadow:0 1px 0 rgba(255,255,255,.55);
    transition:background .12s ease,box-shadow .12s ease,border-color .12s ease,transform .05s ease;
  }
  .abtn:hover,.mini:hover,.ntbtn:hover,.delbtn:hover{
    border-color:#4d7aa8;
    background:linear-gradient(to bottom,
      #fbfeff 0%, #ecf7fe 6%, #d8f0fd 45%, #c0e4fb 47%, #a4d6f6 78%, #93cbf1 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 0 0 1px rgba(255,255,255,.45),
      0 1px 3px rgba(20,50,80,.32),
      0 4px 9px rgba(20,50,80,.18);
  }
  .abtn:active,.mini:active,.ntbtn:active,.delbtn:active{
    border-color:#3f6f9c;
    background:linear-gradient(to bottom,
      #9dcdef 0%, #83bfe9 8%, #6fb0e3 46%, #7cb8e7 48%, #96caf0 85%, #a8d5f5 100%);
    box-shadow:
      inset 0 2px 4px rgba(15,50,90,.45),
      inset 0 -1px 0 rgba(255,255,255,.25),
      0 1px 1px rgba(20,50,80,.15);
    transform:translateY(1px);
  }
  body.admin .abtn.lock{border-color:#4f8a4f;
    background:linear-gradient(to bottom,
      #f2fbf0 0%, #e0f5db 6%, #c3e9ba 45%, #a8dd9c 47%, #8ecd82 78%, #7cc06f 100%);
    color:#1f3d17;}
  body.admin .abtn.lock:hover{background:linear-gradient(to bottom,
      #f8fef6 0%, #eafae4 6%, #d3f1c9 45%, #b9e8ac 47%, #9dda8e 78%, #8bcd7c 100%);}
  .delbtn:hover{border-color:#a84d4d;
    background:linear-gradient(to bottom,
      #fdf2f2 0%, #fce0e0 6%, #f9c2c2 45%, #f4a8a8 47%, #ec8f8f 78%, #e57d7d 100%);
    color:#4a1414;}
  .delbtn:active{border-color:#9c3f3f;
    background:linear-gradient(to bottom,
      #ef9d9d 0%, #e8837f 8%, #e06f6f 46%, #e57c7c 48%, #f096a8 85%, #f5a8a8 100%);}


  /* ===== la page ne scrolle jamais : tout tient dans la fenetre =====
     Les colonnes et les panneaux se partagent la hauteur disponible ;
     si un contenu deborde, c'est LUI qui scrolle, pas la page. */
  .stage{flex-wrap:nowrap;}
  .col{min-height:0;overflow:hidden;}
  .col>.panel,.col>.rpanel{min-height:0;display:flex;flex-direction:column;}
  .col>.panel>.pbody,.col>.rpanel>.pbody{flex:1;min-height:0;overflow:auto;}
  .notepanel{min-height:0;}
  .w97 .notepad{min-height:0;}

  @media (max-width:1180px){
    #fit{padding:10px 8px;}
    .stage{gap:10px;}
    .col{gap:10px;}
    .pbody{padding:7px 8px 8px;}
    td.taskcell input{min-width:0;}
    table{border-spacing:2px;}
    .w97-sheet{width:97%;}
    .w97 .noteed{padding:34px 26px;font-size:15px;}
  }
  @media (max-width:820px){
    .brand{font-size:11px;}
    .topbar{gap:7px;padding:5px 8px;}
    .w97 .notetools,.w97 .notetools2{overflow-x:auto;flex-wrap:nowrap;}
    .w97 .noteed{padding:22px 18px;}
  }
  @media (max-height:720px){
    .w97-ruler{display:none;}
    .pbody{padding:6px 8px 8px;}
  }

  /* ===== densite compacte : moins de hauteur perdue avant le zoom ===== */
  .pbody{padding:7px 9px 9px;}
  .wk{margin:5px 0 3px;font-size:16px;}
  table{border-spacing:2px;}
  td.taskcell input{padding:3px 5px;}
  .mini{padding:4px 8px;}
  .topbar{padding:5px 10px;margin-bottom:8px;}
  .stage{gap:12px;}
  .col{gap:10px;}
  .w97 .notepad{min-height:180px;}
  .w97-ruler{height:16px;}

  /* -------- header : barre de titre biseautée -------- */
  .topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    background:linear-gradient(90deg,var(--rose-dark) 0%,var(--rose) 100%);
    border:2px solid var(--bev-lo);border-radius:0;padding:7px 12px;margin-bottom:12px;position:relative;overflow:hidden;
    box-shadow:inset 1px 1px 0 var(--bev-hi),inset -1px -1px 0 var(--bev-lo2);}
  .emblem{width:22px;height:24px;flex:0 0 auto;position:relative;z-index:1;}
  /* -------- retour accueil -------- */
  a.home{position:relative;z-index:1;flex:0 0 auto;display:inline-block;
    text-decoration:none;font-family:var(--ui-font);font-size:12px;
    padding:5px 11px;cursor:pointer;white-space:nowrap;}
  a.home:hover{text-decoration:none;}
  .brand{position:relative;z-index:1;font-family:var(--ui-font);font-weight:700;letter-spacing:.01em;font-size:15px;
    color:#fff6e4;text-shadow:1px 1px 0 rgba(0,0,0,.3);}
  .brand b{color:var(--gold-light);margin:0 .5em;font-weight:400;}
  .brand small{display:block;font-family:var(--ui-font);font-size:9.5px;letter-spacing:.08em;color:var(--gold-light);opacity:.9;margin-top:1px;}
  .spacer{flex:1;}
  .sync{position:relative;z-index:1;font-family:var(--ui-font);font-size:11px;color:#fff6e4;
    padding:4px 9px;background:rgba(0,0,0,.18);border:1px solid var(--bev-lo);}
  .abtn{position:relative;z-index:1;font-family:var(--ui-font);font-weight:700;font-size:12.5px;padding:6px 14px;cursor:pointer;}

  .stage{display:flex;gap:16px;align-items:stretch;flex:1;min-height:0;flex-wrap:wrap;}
  .col{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:14px;}
  .col .panel,.col .rpanel{margin-bottom:0;}

  /* -------- panneau façon fenêtre Windows 98 (biseau relief) -------- */
  .panel,.rpanel,.cpanel{position:relative;
    background:var(--cream);
    border:2px solid var(--bev-lo);overflow:hidden;margin-bottom:14px;
    box-shadow:inset 1px 1px 0 var(--bev-hi),inset -1px -1px 0 var(--bev-lo2),0 3px 6px rgba(62,39,18,.25);}
  .rpanel{margin-bottom:0;}
  .panel::before,.rpanel::before,.cpanel::before{content:"";position:absolute;inset:2px;pointer-events:none;z-index:0;
    background-image:radial-gradient(rgba(207,131,148,.14) 1px, transparent 1.2px);
    background-size:10px 10px;opacity:.5;}
  .pbar,.cbar{position:relative;z-index:1;display:flex;align-items:center;gap:8px;padding:6px 10px;
    background:linear-gradient(90deg,var(--rose-dark) 0%,var(--rose) 100%);border-bottom:2px solid var(--bev-lo);
    font-family:var(--ui-font);font-weight:700;letter-spacing:.01em;color:#fff6ec;font-size:12.5px;
    text-shadow:1px 1px 0 rgba(0,0,0,.25);}
  .pbar .ico,.cbar .ico{position:relative;z-index:1;font-size:13px;color:var(--gold-light);}
  .pbar .t,.cbar .t{position:relative;z-index:1;flex:1;}
  .leds{display:flex;gap:5px;}
  .led{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff6e4,var(--rose-dark));box-shadow:inset 0 1px 1px rgba(255,255,255,.6);}
  .pbody{padding:10px 12px 12px;position:relative;z-index:1;}

  .wk{display:flex;align-items:center;gap:7px;margin:9px 0 5px;font-family:var(--fancy-font);font-size:15px;color:var(--rose-deep);font-weight:400;}
  .pbody > .wk:first-child{margin-top:0;}
  .mini{font-family:var(--ui-font);font-weight:700;font-size:11.5px;line-height:1;padding:5px 9px;cursor:pointer;}

  /* écran creux (biseau enfoncé façon zone de liste Windows 98) */
  .board{position:relative;z-index:1;background:var(--paper);border:2px solid var(--bev-lo);padding:5px;
    box-shadow:inset 1px 1px 0 var(--bev-lo2),inset -1px -1px 0 var(--bev-hi);overflow:auto;}
  .board::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:radial-gradient(rgba(201,162,39,.14) 1px, transparent 1.2px);background-size:9px 9px;opacity:.6;}
  table{position:relative;border-collapse:separate;border-spacing:3px;width:100%;z-index:1;}
  th,td{padding:0;}
  thead th{font-family:var(--ui-font);font-weight:700;font-size:11px;color:var(--rose-deep);text-align:center;white-space:nowrap;padding:2px 3px;}
  thead th.corner{text-align:left;min-width:78px;}
  /* la colonne d'intitule absorbe toute la largeur laissee libre par le
     tableau (comme td.taskcell) : les cases a cocher gardent leur taille
     compacte au lieu de s'etirer quand la colonne qui les contient s'elargit */
  td.rh{font-family:var(--ui-font);font-weight:700;font-size:11px;color:var(--ink-soft);white-space:nowrap;padding:2px 6px 2px 3px;width:100%;}
  td.taskcell{padding:0;width:100%;}
  td.taskcell input{width:100%;min-width:96px;font-family:var(--ui-font);font-size:12px;padding:4px 6px;color:var(--ink);
    background:#fffdf5;border:1px solid var(--bev-lo);
    box-shadow:inset 1px 1px 0 var(--bev-lo2),inset -1px -1px 0 var(--bev-hi);}
  td.taskcell input:focus{outline:1px dotted var(--rose-deep);outline-offset:-3px;}
  body:not(.admin) td.taskcell input{opacity:.9;}

  .cell{min-width:34px;height:22px;line-height:20px;cursor:pointer;text-align:center;font-size:11px;font-weight:700;
    color:transparent;user-select:none;border:1px solid var(--bev-lo);transition:none;
    background:var(--cream);box-shadow:inset 1px 1px 0 var(--bev-hi),inset -1px -1px 0 var(--bev-lo2);}
  body.admin .cell:hover{outline:1px solid var(--rose-deep);outline-offset:-2px;}
  body:not(.admin) .cell{cursor:default;}
  .cell:active{box-shadow:inset -1px -1px 0 var(--bev-hi),inset 1px 1px 0 var(--bev-lo2);}
  .cell.s1{color:#5a3c00;background:var(--amber-a);border-color:var(--gold-deep);
    box-shadow:inset 1px 1px 0 #fff6cf,inset -1px -1px 0 var(--amber-b);}
  .cell.s2{color:#2c3a1c;background:var(--green-a);border-color:var(--sage-dark);
    box-shadow:inset 1px 1px 0 #f2f7ea,inset -1px -1px 0 var(--green-b);}
  /* Prog journée / Prog nuit : le jaune du 1er état est remplacé par un rouge */
  #colLeft .cell.s1{color:#3d0f04;background:#e2735a;border-color:#9c3018;
    box-shadow:inset 1px 1px 0 #ffcdbd,inset -1px -1px 0 #a83618;}
  td.del{text-align:center;}
  .delbtn{width:19px;height:19px;font-size:10px;font-weight:700;cursor:pointer;}

  /* -------- droite : onglets carrés façon classeur Windows 98 -------- */
  .tabbar{display:flex;gap:2px;padding:6px 6px 0;position:relative;z-index:1;}
  .tab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;font-family:var(--ui-font);font-weight:700;font-size:12.5px;
    padding:7px 6px;cursor:pointer;color:var(--rose-deep);border:1px solid var(--bev-lo);border-bottom:none;
    background:var(--cream2);
    box-shadow:inset 1px 1px 0 var(--bev-hi);}
  .tab:hover{background:#fdf4e3;}
  .tab.active{color:var(--ink);background:var(--paper);box-shadow:inset 1px 1px 0 var(--bev-hi);position:relative;z-index:2;
    border-bottom:2px solid var(--paper);margin-bottom:-2px;}
  /* Vendredi : petit diable brodé, en continu */
  .tab.ven{color:#f6e6c8;border-color:#221019;position:relative;overflow:hidden;
    background:#5c1f2e;text-shadow:1px 1px 0 rgba(0,0,0,.4);}
  .tab.ven span{position:relative;z-index:1;}
  .tab.ven::before{content:"";position:absolute;left:-4px;right:-4px;bottom:-2px;height:70%;pointer-events:none;z-index:0;
    background:radial-gradient(26px 30px at 20% 112%,rgba(240,217,137,.7),transparent 70%),
      radial-gradient(26px 30px at 78% 112%,rgba(201,162,39,.6),transparent 70%);
    filter:blur(1px);animation:flick 1.6s ease-in-out infinite alternate;}
  .tab.ven.active{background:#6e2334;}
  .tab.ven svg{width:20px;height:22px;position:relative;z-index:1;image-rendering:pixelated;}
  .tab.ven{image-rendering:pixelated;}
  @keyframes flick{from{opacity:.65;transform:translateY(1px) scaleY(.97);}to{opacity:1;transform:translateY(-1px) scaleY(1.03);}}

  .tabbody{padding:12px;border-top:2px solid var(--bev-lo);position:relative;z-index:1;background:var(--paper);
    display:flex;flex-direction:column;}
  .twocol{display:flex;gap:12px;align-items:flex-start;}
  .twocol > div{flex:1;min-width:0;}
  .twocol > div:first-child{flex:2 1 0;}
  .twocol > div:last-child{flex:1 1 0;}
  /* semaine : tableaux empilés au lieu de côte à côte */
  .twocol.stack{flex-direction:column;gap:14px;}
  .twocol.stack > div:first-child,.twocol.stack > div:last-child{flex:none;width:100%;}
  .subh{font-family:var(--fancy-font);font-size:17px;color:var(--rose-deep);font-weight:400;margin:0 0 5px;}

  .verifbox{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px;padding:3px 7px;line-height:1.05;row-gap:0;
    background:var(--cream2);border:1px solid var(--bev-lo);
    box-shadow:inset 1px 1px 0 var(--bev-hi);}
  .verifbox input[type=checkbox]{appearance:none;-webkit-appearance:none;width:14px;height:14px;margin:0;flex:none;
    position:relative;cursor:pointer;background:var(--cream);border:1px solid var(--bev-lo);
    box-shadow:inset 1px 1px 0 var(--bev-hi),inset -1px -1px 0 var(--bev-lo2);}
  .verifbox input[type=checkbox]:hover{background:#fffaf0;}
  .verifbox input[type=checkbox]:active{box-shadow:inset -1px -1px 0 var(--bev-hi),inset 1px 1px 0 var(--bev-lo2);}
  .verifbox input[type=checkbox]:checked{background:var(--rose-deep);border-color:var(--bev-lo);
    box-shadow:inset -1px -1px 0 var(--bev-hi),inset 1px 1px 0 var(--bev-lo2);}
  .verifbox input[type=checkbox]:checked::after{content:"✓";position:absolute;inset:0;display:flex;
    align-items:center;justify-content:center;font-size:10px;line-height:1;font-weight:700;color:#fff6e4;}
  .verifbox input[type=checkbox]:disabled{cursor:not-allowed;opacity:.85;}
  body:not(.admin) .verifbox input{cursor:not-allowed;}
  .veriflabel{font-family:var(--ui-font);font-weight:700;font-size:10.5px;color:var(--ink);line-height:1.05;}
  .verifdate{font-size:8px;color:var(--ink-soft);line-height:1.05;width:100%;margin-top:0;}
  .verifdate b{color:var(--rose-deep);}

  .toolbar{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;}
  .admin-only{display:none!important;}
  body.admin .admin-only{display:inline-flex!important;}
  body.admin td.del.admin-only{display:table-cell!important;}
  body.admin th.admin-only{display:table-cell!important;}

  /* -------- Vendredi : sampler brodé du petit diable -------- */
  /* l'onglet occupe toute la hauteur dispo de .tabbody (flex column) et la
     redistribue en cascade (twocol -> colonnes -> blocs jour -> grilles)
     pour que le contenu remplisse exactement l'espace, sans dépasser ni
     laisser de vide, quelle que soit la hauteur réellement disponible. */
  .tab-vendredi{position:relative;isolation:isolate;margin:-12px;padding:16px 14px 14px;overflow:hidden;color:#f6e6c8;
    border:2px solid var(--bev-lo);
    background:#3e1420;
    flex:1;min-height:0;display:flex;flex-direction:column;}
  .tab-vendredi::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.4;
    background-image:radial-gradient(rgba(240,217,137,.14) 1px, transparent 1.2px);background-size:9px 9px;}
  .tab-vendredi::before{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;pointer-events:none;z-index:0;
    background:radial-gradient(70% 100% at 50% 130%, rgba(201,162,39,.22), transparent 75%);
    animation:ember 5.2s ease-in-out infinite alternate;}
  @keyframes ember{from{opacity:.5;}to{opacity:.85;}}

  .ven-head{position:relative;z-index:2;display:flex;align-items:center;gap:10px;margin:0 0 12px;padding-left:2px;}
  .ven-head .vt{font-family:var(--ui-font);font-weight:700;font-size:14px;color:#f6e6c8;}
  .ven-head .vtag{font-family:var(--ui-font);font-size:8px;color:#f6e6c8;
    padding:4px 8px;background:rgba(0,0,0,.2);border:1px solid var(--gold-light);}
  .ven-head .vspacer{flex:1;}
  .ven-head .vled{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#f6e6c8,var(--gold));
    box-shadow:0 0 6px rgba(201,162,39,.7);animation:ember 1.4s ease-in-out infinite alternate;}

  .tab-vendredi .board{position:relative;z-index:1;background:#fbf1dc;border-color:var(--gold);}
  .tab-vendredi thead th,.tab-vendredi td.rh{color:#6e2334;}
  .tab-vendredi .subh{color:#f6e6c8;background:rgba(0,0,0,.18);border:1px solid var(--gold-light);
    padding:5px 8px;margin:0 0 8px;font-family:var(--fancy-font);font-size:15px;}
  .tab-vendredi .verifbox{background:rgba(0,0,0,.18) !important;border:1px solid var(--gold-light) !important;}
  .tab-vendredi .verifbox input[type=checkbox]{background:#3e1420 !important;border-color:var(--gold-light) !important;}
  .tab-vendredi .verifbox input[type=checkbox]:checked{background:var(--gold) !important;border-color:var(--gold-light) !important;}
  .tab-vendredi .verifbox input[type=checkbox]:checked::after{color:#3e1420 !important;}
  .tab-vendredi .veriflabel{color:#f6e6c8 !important;}
  .tab-vendredi .verifdate{color:#d9b98e !important;}
  .tab-vendredi .verifdate b{color:var(--gold-light) !important;}
  .tab-vendredi .note{font-family:var(--ui-font);color:#e3cfa8 !important;text-align:center;margin-top:12px;line-height:1.5;}
  .tab-vendredi .twocol{align-items:stretch;flex:1;min-height:0;}
  .tab-vendredi .twocol > div:first-child{flex:1 1 0 !important;}
  /* colonne centrale plus etroite : la colonne verifs (gauche) recupere un
     peu plus de part relative pour rester lisible */
  .tab-vendredi .twocol > div:last-child{flex:1.3 1 0 !important;}
  /* dL/dR (verifs et colonnes jour) deviennent elles-memes des colonnes flex
     de la hauteur exacte de twocol, pour pouvoir redistribuer leur propre
     contenu verticalement (checkboxes groupees + bouton ancre en bas d'un
     cote ; blocs jour qui se partagent l'espace de l'autre). */
  .tab-vendredi .ven-verifs,.tab-vendredi .ven-cols{display:flex;flex-direction:column;min-height:0;}
  /* grilles Esp/R+s et Géné empilees au lieu de cote a cote (comme pour
     l'onglet Semaine) : chaque grille profite de toute la largeur de la
     colonne au lieu de se partager une largeur devenue trop etroite.
     flex+justify-content:space-between les ecarte pour occuper toute la
     hauteur allouee au bloc jour, sans creer un seul gros vide global. */
  .tab-vendredi .vgrids{display:flex;flex-direction:column;gap:6px;align-items:stretch;flex:1;min-height:0;justify-content:space-between;}
  .tab-vendredi .vgrids > div{min-width:0;flex:none;width:100%;}
  .tab-vendredi .vgrids thead th.corner{min-width:40px;}
  .tab-vendredi .vgrids .cell{min-width:42px;}
  .tab-vendredi .verifgrid{display:flex;flex-direction:column;gap:5px;}
  .tab-vendredi .verifgrid .verifbox{margin-top:0 !important;padding:5px 9px !important;min-height:30px;}
  .tab-vendredi .verifgrid .veriflabel{font-size:9px !important;line-height:1.2 !important;}
  .tab-vendredi .verifgrid .verifdate{font-size:8px !important;line-height:1.1 !important;}
  /* les deux blocs jour se partagent equitablement toute la hauteur de dR */
  .tab-vendredi .ven-day{flex:1;min-height:0;display:flex;flex-direction:column;}
  .tab-vendredi .ven-day + .ven-day{margin-top:12px;}
  .tab-vendredi .dayhead{font-family:var(--ui-font);font-weight:700;font-size:11px;
    color:#f6e6c8;margin:0 0 6px;padding-bottom:3px;border-bottom:1px solid rgba(240,217,137,.4);display:flex;align-items:center;gap:8px;}
  .tab-vendredi .dayhead::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;
    background:radial-gradient(circle at 35% 30%,#f6e6c8,var(--gold));}
  .tab-vendredi thead th,.tab-vendredi td.rh,.tab-vendredi .cell,
  .tab-vendredi .dayhead,.tab-vendredi .veriflabel,.tab-vendredi .verifdate,
  .tab-vendredi .abtn,.tab-vendredi .mini{font-family:var(--ui-font) !important;}
  .tab-vendredi thead th,.tab-vendredi td.rh{font-size:9px !important;font-weight:600;}
  .tab-vendredi .board{padding:3px;}
  .tab-vendredi table{border-spacing:2px !important;}
  .tab-vendredi .cell{height:15px !important;line-height:13px !important;min-width:38px;font-size:9px;}
  .tab-vendredi thead th{padding:0 3px !important;}
  .tab-vendredi td.rh{padding:0 5px 0 2px !important;}
  .tab-vendredi .ven-day + .ven-day{margin-top:6px;}
  .tab-vendredi .dayhead{margin:0 0 3px;padding-bottom:1px;}
  .tab-vendredi .wk{margin-top:2px;color:#f6e6c8;}
  .tab-vendredi .mini{padding:1px 6px !important;font-size:7.5px !important;}
  .tab-vendredi .toolbar{margin-top:6px;}
  .tab-vendredi .abtn{padding:5px 10px !important;}
  .tab-vendredi .verifgrid{gap:4px;}
  .tab-vendredi .verifgrid .verifbox{min-height:24px;padding:3px 8px !important;}
  /* la liste de checkboxes reste compacte en haut ; le bouton "reset" est
     ancre en bas de la colonne (margin-top:auto), ce qui absorbe tout
     l'espace restant d'un coup, plutot que d'ecarter les checkboxes entre
     elles -- plus lisible qu'un espacement eclate sur une simple liste. */
  .tab-vendredi .ven-verifs .toolbar{margin-top:auto !important;}
  .tab-vendredi .ven-verifs .abtn{width:100%;justify-content:center;}
  .tab-vendredi .ven-head{margin:0 0 8px;}
  .rpanel.hell{border-color:var(--gold) !important;animation:hellpulse 3s ease-in-out infinite;}
  @keyframes hellpulse{
    0%,100%{box-shadow:0 0 0 2px var(--gold-light),0 6px 12px rgba(62,39,18,.28) !important;}
    50%{box-shadow:0 0 0 2px var(--gold),0 8px 16px rgba(62,39,18,.36) !important;}}
  .hell-ov{position:absolute;inset:0;pointer-events:none;z-index:6;mix-blend-mode:multiply;opacity:.12;
    background:radial-gradient(120% 80% at 50% 122%,rgba(201,162,39,.5),transparent 60%);}
  .hell-pent{position:absolute;inset:0;pointer-events:none;z-index:4;display:flex;align-items:center;justify-content:center;opacity:.08;}
  .hell-pent svg{width:min(60%,260px);height:auto;}

  /* -------- prise de notes : cahier de recettes -------- */
  .notepanel{flex:1;display:flex;flex-direction:column;min-height:0;}
  .notepanel .pbody{flex:1;display:flex;flex-direction:column;min-height:0;}
  .notepad{position:relative;z-index:1;flex:1;min-height:0;display:flex;background:var(--paper);border:2px solid var(--bev-lo);padding:5px;
    box-shadow:inset 1px 1px 0 var(--bev-lo2),inset -1px -1px 0 var(--bev-hi);
    background-image:repeating-linear-gradient(180deg,transparent 0 29px, rgba(207,131,148,.26) 29px 30px);}
  .noteed{flex:1;width:100%;min-height:0;overflow:auto;font-family:var(--fancy-font);font-size:16px;line-height:30px;color:#3a2414;
    letter-spacing:.01em;padding:0 12px;}
  .noteed:focus{outline:none;}
  .noteed:empty:before{content:attr(data-ph);color:rgba(74,51,35,.4);}
  .noteed b,.noteed strong{color:#2c1a0e;}
  .noteed a{color:var(--rose-deep);text-decoration:underline;}
  .noteed blockquote{margin:6px 0;padding:2px 0 2px 14px;border-left:4px solid var(--rose);color:var(--ink-soft);font-style:italic;}
  .noteed hr{border:none;border-top:2px dashed var(--bev-lo2);margin:10px 0;}
  .noteed ul,.noteed ol{padding-left:26px;margin:4px 0;}
  .notetools{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
  .ntbtn{font-family:var(--ui-font);font-weight:700;font-size:11.5px;line-height:1;padding:5px 9px;cursor:pointer;}
  .notetabs{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-top:9px;}
  .ntab{font-family:var(--ui-font);font-weight:700;font-size:11.5px;padding:5px 11px;cursor:pointer;color:var(--rose-deep);
    background:var(--cream2);border:1px solid var(--bev-lo);
    box-shadow:inset 1px 1px 0 var(--bev-hi);user-select:none;}
  .ntab:hover{background:#fdf4e3;}
  .ntab.active{color:var(--ink);background:var(--paper);}
  .ntab.ntadd,.ntab.ntdel{color:var(--ink);background:var(--sage);border-color:var(--bev-lo);}
  /* ================= prise de notes : Word 97-2003 ================= */
  .w97{--wface:#d4d0c8;--whi:#ffffff;--wlt:#efeeea;--wsh:#808080;--wdk:#404040;--wtxt:#000;
    font-family:Tahoma,"MS Sans Serif",Geneva,sans-serif;font-size:12.5px;
    background:var(--wface);border:2px solid #000;
    box-shadow:inset 1px 1px 0 var(--whi),inset -1px -1px 0 var(--wdk),
      inset 2px 2px 0 var(--wface),inset -2px -2px 0 var(--wsh),0 4px 12px rgba(62,39,18,.3);
    display:flex;flex-direction:column;min-height:0;padding:2px;}
  .w97 *{box-sizing:border-box;}
  .w97::before{display:none !important;}
  .w97 .pbar{display:none;}
  /* barre de titre */
  .w97-title{display:flex;align-items:center;gap:5px;height:20px;padding:0 2px 0 3px;
    background:linear-gradient(90deg,#000080,#1084d0);color:#fff;font-size:12.5px;font-weight:700;flex:0 0 auto;}
  .w97-wicon{width:14px;height:14px;display:grid;place-items:center;background:#fff;color:#000080;
    font-size:10px;font-weight:700;font-family:"Times New Roman",serif;}
  .w97-tt{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  .w97-tbtn{width:16px;height:14px;background:var(--wface);color:#000;font-size:9px;line-height:12px;
    text-align:center;border:1px solid;border-color:var(--whi) var(--wdk) var(--wdk) var(--whi);cursor:default;}
  /* barre de menus */
  .w97-menubar{display:flex;gap:0;background:var(--wface);padding:1px 2px;flex:0 0 auto;
    border-bottom:1px solid var(--wsh);position:relative;z-index:20;}
  .w97-menu{position:relative;}
  .w97-mlab{font-size:12.5px;padding:3px 8px;cursor:default;color:#000;user-select:none;}
  .w97-menu.open .w97-mlab,.w97-mlab:hover{background:#000080;color:#fff;}
  .w97-mpop{display:none;position:absolute;left:0;top:100%;min-width:190px;background:var(--wface);
    border:1px solid;border-color:var(--whi) var(--wdk) var(--wdk) var(--whi);
    box-shadow:2px 2px 0 rgba(0,0,0,.35);padding:2px;z-index:30;}
  .w97-menu.open .w97-mpop{display:block;}
  .w97-mi{font-size:12.5px;padding:3px 20px 3px 22px;cursor:default;white-space:nowrap;position:relative;}
  .w97-mi:hover{background:#000080;color:#fff;}
  .w97-mi .k{position:absolute;right:8px;opacity:.75;}
  .w97-msep{height:1px;margin:3px 2px;background:var(--wsh);border-bottom:1px solid var(--whi);}
  /* barres d'outils */
  .w97 .notetools,.w97 .notetools2{display:flex;align-items:center;gap:1px;flex-wrap:wrap;margin:0;
    background:var(--wface);padding:2px 3px;border-bottom:1px solid var(--wsh);
    box-shadow:0 1px 0 var(--whi);flex:0 0 auto;}
  .w97 .ntbtn{font-family:inherit;font-size:12.5px;font-weight:400;color:#000;background:transparent;
    border:1px solid transparent;box-shadow:none;padding:0 4px;min-width:22px;height:22px;line-height:20px;
    display:inline-flex;align-items:center;justify-content:center;gap:3px;cursor:default;}
  .w97 .ntbtn:hover{background:var(--wface);border-color:var(--whi) var(--wdk) var(--wdk) var(--whi);}
  .w97 .ntbtn:active{border-color:var(--wdk) var(--whi) var(--whi) var(--wdk);background:var(--wlt);}
  .w97 .ntbtn.on{border-color:var(--wdk) var(--whi) var(--whi) var(--wdk);background:#c8c4bc;}
  .w97 .ntbtn.gras{font-weight:700;} .w97 .ntbtn.ital{font-style:italic;font-family:"Times New Roman",serif;}
  .w97 .ntbtn.soul{text-decoration:underline;} .w97 .ntbtn.barr{text-decoration:line-through;}
  .w97-sep{width:1px;height:18px;margin:0 3px;background:var(--wsh);border-right:1px solid var(--whi);}
  .w97 .ntsel{font-family:inherit;font-size:12.5px;height:22px;padding:1px 2px;color:#000;background:#fff;
    border:1px solid;border-color:var(--wdk) var(--whi) var(--whi) var(--wdk);cursor:default;}
  .w97 .ntsel.font{width:118px;} .w97 .ntsel.size{width:46px;}
  .w97 .ntsw{width:13px;height:13px;border:1px solid var(--wsh);cursor:default;box-shadow:none;}
  .w97 .ntsw:hover{outline:1px solid #000080;}
  .w97 .ntgroup{display:flex;align-items:center;gap:2px;padding:0;background:transparent;border:0;}
  .w97 .ntglab{display:none;}
  /* regle */
  .w97-ruler{flex:0 0 auto;height:18px;background:var(--wlt);border:1px solid;
    border-color:var(--wdk) var(--whi) var(--whi) var(--wdk);margin:3px 3px 0;position:relative;overflow:hidden;}
  .w97-ruler i{position:absolute;top:0;bottom:0;width:1px;background:var(--wsh);}
  .w97-ruler b{position:absolute;top:3px;font-size:8px;font-weight:400;color:#333;transform:translateX(-50%);}
  .w97-ruler .zone{position:absolute;top:0;bottom:0;background:#b9b5ac;}
  /* zone page */
  .w97 .pbody{flex:1;display:flex;flex-direction:column;min-height:0;}
  .w97 .notepad{flex:1;min-height:0;display:flex;justify-content:center;align-items:flex-start;overflow:auto;
    background:#808080;border:1px solid;border-color:var(--wdk) var(--whi) var(--whi) var(--wdk);
    background-image:none;padding:12px 0 24px;box-shadow:none;}
  /* feuille : elle grandit page par page, comme dans Word */
  .w97-sheet{position:relative;flex:0 0 auto;width:min(94%,760px);background:#fff;
    border:1px solid #000;box-shadow:3px 3px 0 rgba(0,0,0,.35);}
  .w97 .noteed{position:relative;z-index:1;width:100%;background:transparent;color:#000;
    font-family:"Times New Roman",Georgia,serif;font-size:17px;line-height:26px;letter-spacing:0;
    padding:56px 64px;border:0;box-shadow:none;overflow:visible;min-height:0;}
  /* saut de page */
  .w97-brk{position:absolute;left:0;right:0;height:0;pointer-events:none;z-index:2;
    border-top:1px dashed #9a9a9a;}
  .w97-brk::after{content:attr(data-lab);position:absolute;right:6px;top:-8px;
    background:#fff;padding:0 5px;font-family:Tahoma,sans-serif;font-size:9px;color:#8a8a8a;}
  .w97-brk::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;
    background:linear-gradient(180deg,rgba(0,0,0,.07),transparent);}
  .w97 .noteed:empty:before{color:#999;}
  .w97 .noteed a{color:#0000ee;}
  .w97 .noteed blockquote{border-left:3px solid #999;color:#333;}
  /* onglets bas */
  .w97 .notetabs{margin:0;padding:2px 4px 0;gap:0;background:var(--wface);flex:0 0 auto;}
  .w97 .ntab{font-family:inherit;font-size:12.5px;font-weight:400;color:#000;background:#c8c4bc;
    border:1px solid;border-color:var(--whi) var(--wdk) var(--wdk) var(--whi);border-bottom:0;
    box-shadow:none;padding:2px 10px;margin-right:1px;cursor:default;}
  .w97 .ntab.active{background:#fff;font-weight:700;padding-bottom:3px;}
  .w97 .ntab.ntadd,.w97 .ntab.ntdel{background:var(--wface);padding:2px 7px;}
  /* barre d'etat */
  .w97-status{flex:0 0 auto;display:flex;align-items:center;gap:2px;font-size:12.5px;padding:2px 3px;
    background:var(--wface);border-top:1px solid var(--whi);}
  .w97-status span{padding:1px 6px;border:1px solid;border-color:var(--wdk) var(--whi) var(--whi) var(--wdk);}
  .w97-status .grow{flex:1;border:0;}
  .w97 .note-tbl td{border:1px solid #000 !important;padding:3px 6px;}
  body:not(.admin) .noteed{cursor:default;}
  .footnote{color:var(--ink-soft);font-size:9.5px;margin-top:12px;text-align:center;}
  .notebtn{position:relative;}
  .notebtn.has::after{content:"";position:absolute;top:-3px;right:-3px;width:7px;height:7px;border-radius:50%;
    background:radial-gradient(circle at 34% 28%,#fff6e4,var(--gold));}
  .modal-ov{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
    background:rgba(62,39,18,.45);}
  .modal-ov.show{display:flex;}
  .modal{width:min(460px,92vw);border:2px solid var(--bev-lo);overflow:hidden;
    background:var(--cream);
    box-shadow:inset 1px 1px 0 var(--bev-hi),inset -1px -1px 0 var(--bev-lo2),0 8px 24px rgba(62,39,18,.4);}
  .modal-body{padding:12px;}
  .modal-ta{width:100%;min-height:170px;resize:vertical;display:block;
    font-family:var(--fancy-font);font-size:13px;line-height:1.6;color:var(--ink);
    background:#fffdf5;border:1px solid var(--bev-lo);padding:10px;
    box-shadow:inset 1px 1px 0 var(--bev-lo2),inset -1px -1px 0 var(--bev-hi);}
  .modal-ta:focus{outline:1px dotted var(--rose-deep);outline-offset:-3px;}
  .modal-ta:read-only{opacity:.9;cursor:default;}
  .modal-foot{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;}

  /* -------- barre de saisie enrichie -------- */
  .notetools2{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px;}
  .ntgroup{display:flex;gap:4px;align-items:center;padding:3px 7px;background:var(--cream2);border:1px solid var(--bev-lo);}
  .ntglab{font-family:var(--ui-font);font-weight:700;font-size:8px;color:var(--rose-deep);}
  .ntsw{width:14px;height:14px;cursor:pointer;border:1px solid var(--bev-lo);
    box-shadow:inset 1px 1px 0 var(--bev-hi),inset -1px -1px 0 var(--bev-lo2);}
  .ntsw:hover{filter:brightness(1.06);}
  .ntsel{font-family:var(--ui-font);font-size:9px;padding:3px 5px;border:1px solid var(--bev-lo);background:#fff6e4;color:var(--ink);cursor:pointer;
    box-shadow:inset 1px 1px 0 var(--bev-lo2),inset -1px -1px 0 var(--bev-hi);}
  .noteed table{border-collapse:collapse;margin:6px 0;}
  .noteed td{border:1px solid var(--rose);padding:3px 7px;min-width:42px;color:var(--ink);}
  .note-tbl td{border-color:var(--rose) !important;}

  /* largeurs des colonnes : les trois colonnes se partagent tout l'espace
     disponible (plus de colonne a largeur fixe) ; gauche (tâches) et droite
     (notes) ont une base plus large, centre (onglets) une base resserree.
     Le centre grandit aussi moins vite que les deux autres (facteur 0.7 au
     lieu de 1) pour rester la colonne la plus etroite a toutes les tailles
     de fenetre, pas seulement au repos. */
  #colLeft{flex:1 1 480px;}
  #colRight{flex:0.7 1 190px;min-height:0;}
  #colNotes{flex:1 1 520px;min-height:0;}
  #colRight>.rpanel{flex:1 1 0;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
  #colRight>.rpanel>.tabbody{flex:1;min-height:0;overflow:auto;}
  #notesSlot{flex:1 1 0;min-height:0;display:flex;flex-direction:column;}
  #notesSlot>.notepanel{flex:1 1 0;min-height:0;}
  #crocGame{flex:0 0 auto;align-self:stretch;width:100%;max-width:100%;}

  /* ===== mini-jeu du petit crocodile (sous les notes, sans bandeau) ===== */
  /* la colonne notes peut devenir tres large : on garde ce petit widget a
     sa taille naturelle et centre, plutot que de l'etirer sur toute la
     largeur (sinon le message central se retrouve isole au milieu d'un
     grand vide). */
  .cpanel{width:fit-content;max-width:100%;margin:0 auto;}
  .cbody{position:relative;z-index:1;padding:10px;display:flex;flex-direction:row;align-items:center;gap:18px;}
  .crocscreen{flex:0 0 190px;margin-bottom:0 !important;}
  .crocmsg{flex:0 0 auto;margin-bottom:0 !important;max-width:160px;}
  .crocscore{flex:0 0 auto;margin-left:0;}
  .crocscreen{position:relative;background:var(--paper);
    border:2px solid var(--bev-lo);padding:6px;margin-bottom:9px;
    box-shadow:inset 1px 1px 0 var(--bev-lo2),inset -1px -1px 0 var(--bev-hi);}
  .crocface{position:relative;width:100%;aspect-ratio:32/26;image-rendering:pixelated;}
  .crocface > svg{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;shape-rendering:crispEdges;}
  .crocteeth{position:absolute;left:28.1%;right:28.1%;top:46.2%;height:38.5%;display:grid;
    grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:2px;z-index:3;}
  .tooth{background:var(--gold-light);border:1px solid var(--bev-lo);cursor:pointer;
    box-shadow:inset 1px 1px 0 #fffdf5,inset -1px -1px 0 var(--gold-deep);}
  .tooth:hover{filter:brightness(1.05);}
  .tooth:active{box-shadow:inset -1px -1px 0 #fffdf5,inset 1px 1px 0 var(--gold-deep);}
  .tooth.pressed{background:#e7d9bb;border-color:var(--gold-deep);cursor:default;opacity:.9;box-shadow:none;}
  .tooth.boom{background:var(--rose-deep);border-color:#3e1420;box-shadow:none;}
  .crocmsg{font-family:var(--fancy-font);font-size:15px;font-weight:400;
    min-height:16px;text-align:center;color:var(--rose-deep);margin-bottom:9px;}
  .crocmsg.win{color:var(--sage-dark);}
  .crocmsg.lose{color:var(--rose-deep);}
  .crocscore{display:flex;align-items:center;justify-content:center;gap:12px;
    background:var(--paper);border:2px solid var(--bev-lo);padding:8px 6px;
    box-shadow:inset 1px 1px 0 var(--bev-lo2),inset -1px -1px 0 var(--bev-hi);}
  .cs-side{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:56px;}
  .cs-lbl{font-family:var(--ui-font);font-weight:700;font-size:9.5px;color:var(--rose-deep);}
  .cs-num{font-family:var(--ui-font);font-weight:800;font-size:26px;line-height:1;font-variant-numeric:tabular-nums;}
  .cs-num.win{color:var(--sage-dark);}
  .cs-num.lose{color:var(--rose-deep);}
  .cs-num.bump{animation:csbump .45s ease;}
  @keyframes csbump{0%{transform:scale(1);}35%{transform:scale(1.3);}100%{transform:scale(1);}}
  .cs-vs{font-family:var(--ui-font);font-weight:700;font-size:15px;color:var(--gold-deep);}

  /* ===== fin de journée : rideau metallique ===== */
  #eodShutter{position:fixed;inset:0;z-index:9000;transform:translateY(-101%);pointer-events:none;cursor:pointer;
    transition:transform 1.15s cubic-bezier(.55,.03,.42,1);display:flex;align-items:flex-start;justify-content:center;
    background:
      linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(10,14,14,.18) 30%,rgba(0,0,0,.30) 78%,rgba(0,0,0,.55) 100%),
      url("../assets/eod-shutter.svg") repeat 50% 96px;
    background-size:auto, 760px 485px;
    box-shadow:inset 0 -40px 80px rgba(0,0,0,.5);}
  #eodShutter.closed{transform:translateY(0);pointer-events:auto;}
  /* linteau : poutre + grille a barreaux, comme au-dessus du rideau */
  #eodShutter::before{content:"";position:absolute;left:0;right:0;top:0;height:96px;
    background:url("../assets/eod-lintel.svg") repeat-x 50% 0;background-size:auto 96px;
    border-top:2px solid var(--gold-deep);
    box-shadow:0 6px 16px rgba(0,0,0,.6);}
  /* rail de rivets dorés en bas, rappel du liseré du site */
  #eodShutter::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18px;
    background:
      radial-gradient(circle at 13px 9px, var(--gold-light) 2.5px, rgba(201,162,39,.35) 4px, transparent 4.5px) repeat-x,
      linear-gradient(180deg,rgba(0,0,0,.55),#0c0a09);
    background-size:26px 18px, auto;
    border-top:1px solid rgba(240,217,137,.25);}
  @font-face{font-family:"Edo SZ";src:url("../assets/fonts/edosz.woff2") format("woff2"),url("../assets/fonts/edosz.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
  /* bande de papier collee sur le rideau */
  .eod-plaque{margin-top:min(22vh,220px);position:relative;z-index:1;width:min(560px,84vw);
    display:flex;flex-direction:column;align-items:center;
    opacity:0;transform:translateY(-14px) rotate(-1.6deg);
    transition:opacity .5s ease .5s,transform .5s ease .5s;}
  #eodShutter.closed .eod-plaque{opacity:1;transform:translateY(0) rotate(-1.6deg);}
  .eod-board{width:100%;aspect-ratio:520/132;display:flex;align-items:center;justify-content:center;
    background:url("../assets/eod-tape.svg") no-repeat center/100% 100%;
    filter:drop-shadow(0 10px 16px rgba(0,0,0,.55)) drop-shadow(0 2px 2px rgba(0,0,0,.4));}
  .eod-t{font-family:"Edo SZ","Comic Neue",cursive;font-weight:400;
    font-size:clamp(38px,7vw,70px);line-height:1;letter-spacing:1px;
    color:#191512;text-transform:uppercase;transform:rotate(-.6deg);
    padding-bottom:6px;text-shadow:0 1px 0 rgba(255,255,255,.5);}
  .eod-hint{font-family:var(--ui-font);font-size:9px;color:rgba(226,232,230,.6);margin-top:26px;
    letter-spacing:.5px;text-shadow:0 1px 3px rgba(0,0,0,.8);}

  /* -------- glitch au changement d'état d'une case -------- */
  @keyframes cell-glitch{
    0%  {transform:translate(0,0);       text-shadow:none;                                                       filter:none;}
    12% {transform:translate(-2px,-1px); text-shadow:2px 0 rgba(255,0,64,.9),-2px 0 rgba(0,255,224,.9);          filter:brightness(1.6);}
    24% {transform:translate(2px,1px);   text-shadow:-3px 0 rgba(255,0,64,.9),3px 0 rgba(0,255,224,.9);          filter:invert(1);}
    36% {transform:translate(-1px,1px);  text-shadow:2px 0 rgba(0,255,224,.9),-2px 0 rgba(255,0,64,.9);          filter:brightness(.65);}
    48% {transform:translate(3px,0);     text-shadow:none;                                                       filter:invert(1) hue-rotate(70deg);}
    60% {transform:translate(-1px,0);    text-shadow:1px 0 rgba(255,0,64,.8),-1px 0 rgba(0,255,224,.8);          filter:none;}
    72% {transform:translate(1px,-1px);  text-shadow:none;                                                       filter:brightness(1.35);}
    100%{transform:translate(0,0);       text-shadow:none;                                                       filter:none;}
  }
  @keyframes cell-scan{
    0%,100%{opacity:0;} 10%{opacity:.9;} 30%{opacity:.35;} 45%{opacity:.85;} 65%{opacity:.2;} 80%{opacity:.6;}
  }
  .cell.glitch{position:relative;z-index:3;animation:cell-glitch .32s steps(1,end) 1;}
  .cell.glitch::after{content:"";position:absolute;inset:-2px;pointer-events:none;
    background:repeating-linear-gradient(0deg,rgba(255,255,255,.6) 0 1px,transparent 1px 3px);
    mix-blend-mode:difference;animation:cell-scan .32s steps(1,end) 1;}
  @media (prefers-reduced-motion:reduce){
    .cell.glitch,.cell.glitch::after{animation:none;}
  }