/* Planning Maison — styles principaux */

*{box-sizing:border-box}
:root{--bg:#f4f6f2;--card:#fff;--text:#203128;--muted:#718078;--line:#dce5dd;--green:#2f6b4f;--danger:#b65353;--shadow:0 14px 40px rgba(35,64,47,.08)}
body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at 0 0,rgba(91,132,106,.11),transparent 30%),radial-gradient(circle at 100% 0,rgba(202,167,108,.11),transparent 28%),var(--bg)}
button,input,select,textarea{font:inherit}.hidden{display:none!important}.muted{color:var(--muted)}.error{color:#b14e4e;font-size:11px;min-height:16px}.eyebrow{margin:0 0 5px;font-size:10px;letter-spacing:.17em;font-weight:900;color:#6e8d79}
.btn{border:0;border-radius:12px;padding:10px 14px;font-size:12px;font-weight:850;cursor:pointer}.btn.primary{background:var(--green);color:#fff}.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--text)}.btn.soft{background:#edf2ed;color:var(--text)}.btn.danger{background:#f7e4e4;color:#9b4444}.btn.full,.full{width:100%}.spacer{flex:1}
.auth-screen,.setup-screen{min-height:100vh;display:grid;place-items:center;padding:18px}.auth-card{width:min(460px,100%);background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:var(--shadow)}.auth-card h1{font-size:42px;margin:0 0 8px}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:18px 0}.auth-tab{border:0;background:#eef2ed;padding:10px;border-radius:10px;font-weight:800}.auth-tab.active{background:var(--text);color:#fff}.auth-form{display:grid;gap:12px}.auth-form label,.setup-card label,#taskForm label,.person-card label{display:grid;gap:6px;font-size:11px;color:var(--muted);font-weight:800}.auth-form input,.setup-card input,.setup-card select,#taskForm input,#taskForm select,.person-card input,.person-card select,.panel-tools input{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:#fbfcfa;color:var(--text);outline:none}.auth-note{font-size:10px;color:var(--muted);line-height:1.5;margin-top:14px}
.setup-shell{width:min(980px,100%)}.setup-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:12px}.setup-head h1{font-size:clamp(36px,6vw,60px);margin:0;letter-spacing:-.04em}.setup-progress{height:8px;background:#e4ebe5;border-radius:99px;overflow:hidden;margin-bottom:12px}.setup-progress div{height:100%;background:var(--green);width:20%;transition:.2s}.setup-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow)}.step{display:none;min-height:420px}.step.active{display:block}.step h2{font-size:27px;margin:0 0 18px}.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}.choice{border:1px solid var(--line);background:#fbfcfa;border-radius:15px;min-height:105px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:25px}.choice strong{font-size:12px}.choice.selected{background:#eaf2ed;border-color:#739681}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-list{display:grid;gap:8px;margin-top:10px}.toggle-row{display:grid!important;grid-template-columns:1fr auto!important;align-items:center;background:#fafbf9;border:1px solid var(--line);border-radius:11px;padding:11px}.toggle-row input{width:auto!important;accent-color:var(--green)}.setup-actions{display:flex;gap:8px;border-top:1px solid var(--line);padding-top:14px}
.app{width:min(1600px,calc(100% - 24px));margin:auto;padding:24px 0 50px}.hero{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:14px}.hero h1{font-size:clamp(38px,5vw,64px);margin:0;letter-spacing:-.05em;line-height:1}.subtitle{color:var(--muted);margin:8px 0 0}.hero-actions{display:flex;gap:8px;flex-wrap:wrap}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:9px;margin-bottom:12px}.view-tabs{display:flex;gap:6px}.view-btn{border:0;background:transparent;padding:9px 12px;border-radius:10px;font-size:11px;font-weight:850;color:var(--muted)}.view-btn.active{background:var(--text);color:#fff}.date-nav{display:flex;align-items:center;gap:7px}.nav-btn{width:36px;height:36px;border:0;background:#eef2ed;border-radius:10px;font-size:20px}.date-label{min-width:220px;text-align:center;font-size:12px;font-weight:850}.today-btn{border:0;background:#eef2ed;border-radius:10px;padding:9px 11px;font-size:11px;font-weight:800}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-bottom:12px}.stat{background:#fff;border:1px solid var(--line);border-radius:15px;padding:13px}.stat strong{font-size:21px;display:block}.stat span{font-size:10px;color:var(--muted)}.calendar-shell{background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;box-shadow:var(--shadow)}
.week-grid{display:grid;grid-template-columns:repeat(7,minmax(190px,1fr));gap:9px;overflow-x:auto}.day{border:1px solid var(--line);border-radius:15px;padding:10px;min-height:480px}.day.weekend{background:#fffdf8}.day-head{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:8px}.day-head h3{margin:0;font-size:14px}.day-head small{color:var(--muted)}.day-view{display:grid;grid-template-columns:230px 1fr;gap:12px}.day-sidebar{border-right:1px solid var(--line);padding-right:12px}.person-availability{background:#fafbf9;border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:8px}.person-availability strong{font-size:12px}.person-availability small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.month-head{font-size:10px;font-weight:900;text-align:center;color:var(--muted);padding:6px}.month-cell{min-height:125px;border:1px solid var(--line);border-radius:12px;padding:7px}.month-cell.out{opacity:.35}.month-date{font-size:10px;font-weight:900;margin-bottom:6px}.month-task{font-size:8.5px;padding:4px 5px;border-radius:7px;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid}
.task{border:1px solid var(--line);border-left-width:5px;border-radius:12px;padding:9px;margin-bottom:7px;background:#fff}.task.done{opacity:.42}.task.done .task-name{text-decoration:line-through}.category-stripe{height:4px;border-radius:999px;margin-bottom:7px}.task-line{display:flex;justify-content:space-between;gap:7px}.task-name{font-size:11.5px;font-weight:800}.task-time{font-size:9px;color:var(--muted)}.task-meta{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}.pill,.priority-badge{font-size:8px;padding:3px 6px;border-radius:999px;font-weight:850}.task-actions{display:flex;gap:5px;margin-top:7px}.mini-btn{border:0;background:#eef2ed;border-radius:8px;padding:5px 7px;font-size:9px;cursor:pointer}
.side-panel{position:fixed;right:-700px;top:0;width:min(660px,96vw);height:100vh;background:#f9faf7;z-index:30;padding:20px;overflow:auto;box-shadow:-20px 0 55px rgba(30,50,38,.2);transition:right .25s}.side-panel.open{right:0}.panel-head{display:flex;justify-content:space-between;align-items:center}.panel-head h2{margin:0}.close{border:0;background:#edf1ed;width:34px;height:34px;border-radius:10px;font-size:20px}.panel-tools{display:flex;gap:8px;margin:14px 0}.panel-tools input{flex:1}.library-list,.person-list{display:grid;gap:8px}.library-item,.person-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px}.library-item{display:flex;justify-content:space-between;gap:8px}.library-item.off{opacity:.45}.library-item strong{font-size:12px}.library-item small{display:block;color:var(--muted);font-size:9px;margin-top:4px}.lib-color-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px}.panel-intro{color:var(--muted);font-size:12px;line-height:1.5}.panel-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.color-list,.priority-editor{display:grid;gap:8px}.color-row,.priority-editor label{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;grid-template-columns:1fr auto;align-items:center}.color-row input,.priority-editor input{width:48px;height:34px;border:0;background:transparent}.person-card-head{display:flex;justify-content:space-between}.person-card-head h3{margin:0;font-size:13px}.schedule-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.weekday-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.weekday-toggle{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 8px;font-size:9px}.weekday-toggle.active{background:var(--green);color:#fff}.period-row{display:grid;grid-template-columns:1fr 1fr 1.2fr auto;gap:6px;margin-top:6px}.period-row input,.period-row select{padding:8px;border:1px solid var(--line);border-radius:8px}.period-row button{border:0;background:#f2e7e7;border-radius:8px;color:var(--danger)}
.overlay{position:fixed;inset:0;background:rgba(28,39,32,.38);z-index:25;display:none}.overlay.show{display:block}
dialog{width:min(520px,calc(100% - 24px));border:0;border-radius:20px;padding:0}dialog::backdrop{background:rgba(25,35,29,.42)}#taskForm{padding:20px;display:grid;gap:12px}
@media(max-width:900px){.stats{grid-template-columns:repeat(3,1fr)}.day-view{grid-template-columns:1fr}.day-sidebar{border-right:0;border-bottom:1px solid var(--line);padding-bottom:10px}}
@media(max-width:760px){.hero,.setup-head{flex-direction:column;align-items:flex-start}.hero-actions{width:100%}.hero-actions .btn{flex:1}.toolbar{flex-direction:column;align-items:stretch}.date-nav{justify-content:space-between}.date-label{min-width:0;flex:1}.stats{grid-template-columns:1fr 1fr}.week-grid{grid-template-columns:repeat(7,minmax(260px,84vw));scroll-snap-type:x mandatory}.day{scroll-snap-align:start}.month-grid{grid-template-columns:repeat(7,minmax(115px,1fr));overflow-x:auto}.choice-grid,.form-grid,.schedule-grid{grid-template-columns:1fr}.panel-tools{flex-direction:column}.period-row{grid-template-columns:1fr}.auth-screen,.setup-screen{display:block}}

.person-color-input{width:46px!important;height:34px!important;padding:0!important;border:0!important;background:transparent!important}
.person-color-preview{width:14px;height:14px;border-radius:50%;display:inline-block;vertical-align:middle;margin-right:6px;border:2px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.person-tag{font-size:8px;padding:3px 6px;border-radius:999px;font-weight:900}
.person-card-head-left{display:flex;align-items:center;gap:7px}

.auth-screen{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:32px 18px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 24%, rgba(197,205,193,.38) 0, rgba(197,205,193,.38) 150px, transparent 151px),
    radial-gradient(circle at 0% 100%, rgba(225,219,210,.42) 0, rgba(225,219,210,.42) 180px, transparent 181px),
    radial-gradient(circle at 100% 100%, rgba(223,218,210,.42) 0, rgba(223,218,210,.42) 240px, transparent 241px),
    linear-gradient(180deg, #f8f8f4 0%, #f5f4ef 100%);
}

.auth-screen::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.15));
  pointer-events:none;
}

.auth-ornament{
  position:absolute;
  border-radius:999px;
  pointer-events:none;
  opacity:.9;
}
.auth-ornament-left{
  width:310px;
  height:310px;
  left:-170px;
  top:120px;
  background:#d7ddd2;
  opacity:.45;
}
.auth-ornament-bottom{
  width:430px;
  height:430px;
  right:-180px;
  bottom:-230px;
  background:#e8e1d8;
  opacity:.55;
}

.auth-leaf-decor{
  position:absolute;
  right:80px;
  top:220px;
  width:190px;
  height:360px;
  pointer-events:none;
  opacity:.26;
}
.auth-leaf-decor span{
  position:absolute;
  display:block;
  width:110px;
  height:48px;
  border-radius:120px 120px 120px 0;
  background:#bec7bb;
  transform-origin:left center;
}
.auth-leaf-decor span:nth-child(1){ right:15px; top:15px; transform:rotate(-84deg); width:118px; }
.auth-leaf-decor span:nth-child(2){ right:44px; top:108px; transform:rotate(-42deg); }
.auth-leaf-decor span:nth-child(3){ right:48px; top:196px; transform:rotate(20deg); width:116px; }
.auth-leaf-decor span:nth-child(4){ right:-2px; top:162px; transform:rotate(56deg); width:124px; }

.auth-card-premium{
  position:relative;
  z-index:2;
  width:min(720px, 100%);
  max-width:720px;
  padding:56px 60px 46px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(8px);
  border:1px solid rgba(222,229,221,.85);
  border-radius:36px;
  box-shadow:0 30px 80px rgba(44,63,51,.08), 0 8px 24px rgba(44,63,51,.05);
}

.auth-card-premium h1{
  margin:0 0 12px;
  font-size:clamp(52px, 8vw, 80px);
  line-height:.96;
  letter-spacing:-.055em;
  color:#16222d;
}

.auth-brand{
  margin-bottom:16px;
  letter-spacing:.28em;
  color:#406853;
  font-size:14px;
}

.auth-intro{
  margin:0 0 28px;
  font-size:20px;
  line-height:1.4;
  max-width:560px;
  color:#5b6462;
}

.auth-tabs-premium{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  padding:0;
  margin:0 0 28px;
  background:#f1f1ee;
  border-radius:999px;
  overflow:hidden;
  border:1px solid #eceeeb;
}

.auth-tabs-premium .auth-tab{
  height:68px;
  border:0;
  background:transparent;
  color:#273234;
  font-size:18px;
  font-weight:800;
  border-radius:999px;
  transition:all .2s ease;
}

.auth-tabs-premium .auth-tab.active{
  background:linear-gradient(135deg, #184736 0%, #2f6b4f 100%);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}

.auth-form-premium{
  display:grid;
  gap:18px;
}

.field-label{
  display:grid !important;
  gap:10px;
  color:#273234;
  font-size:15px;
  font-weight:800;
}

.auth-form-premium input{
  width:100%;
  height:58px;
  padding:0 20px;
  border:1.5px solid #d9dfd8;
  border-radius:20px;
  background:#fff;
  color:#16222d;
  font-size:17px;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.auth-form-premium input::placeholder{
  color:#9aa2a3;
}
.auth-form-premium input:focus{
  border-color:#2f6b4f;
  box-shadow:0 0 0 4px rgba(47,107,79,.10);
}

.password-field{
  position:relative;
}
.password-field input{
  padding-right:66px;
}
.password-toggle{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border:0;
  border-radius:14px;
  background:#f3f5f2;
  color:#96a0a1;
  font-size:20px;
  cursor:pointer;
}

.auth-submit{
  margin-top:10px;
  min-height:66px;
  padding:18px 26px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-size:18px;
  font-weight:900;
  background:linear-gradient(135deg, #2f6b4f 0%, #348857 100%);
  box-shadow:0 14px 28px rgba(47,107,79,.18);
}
.auth-submit-arrow{
  font-size:28px;
  line-height:1;
  margin-top:-2px;
}

.auth-error{
  margin:2px 0 0;
  min-height:20px;
}

.auth-note-wrap{
  margin-top:36px;
  padding-top:26px;
  border-top:1px solid #e5e9e4;
}
.auth-note{
  margin:0;
  color:#7c8485;
  font-size:15px;
  line-height:1.5;
  text-align:left;
}

@media (max-width: 900px){
  .auth-card-premium{
    width:min(680px, 100%);
  }
}

@media (max-width: 760px){
  .auth-screen{
    padding:20px 14px;
  }
  .auth-card-premium{
    padding:34px 22px 28px;
    border-radius:28px;
  }
  .auth-card-premium h1{
    font-size:56px;
  }
  .auth-intro{
    font-size:18px;
    margin-bottom:22px;
  }
  .auth-tabs-premium .auth-tab{
    height:58px;
    font-size:17px;
  }
  .auth-form-premium input{
    height:54px;
    border-radius:18px;
    font-size:16px;
  }
  .auth-submit{
    min-height:58px;
    font-size:17px;
  }
  .auth-note{
    font-size:13px;
  }
  .auth-leaf-decor{
    right:-10px;
    top:260px;
    transform:scale(.8);
  }
}


.auth-screen{
  padding:20px 14px;
}

.auth-card-premium{
  width:min(610px, 92vw);
  max-width:610px;
  padding:38px 44px 30px;
  border-radius:30px;
}

.auth-card-premium h1{
  font-size:clamp(46px, 6vw, 64px);
  margin-bottom:8px;
}

.auth-brand{
  margin-bottom:10px;
  font-size:12px;
}

.auth-intro{
  margin-bottom:20px;
  font-size:17px;
  line-height:1.35;
  max-width:500px;
}

.auth-tabs-premium{
  margin-bottom:20px;
}

.auth-tabs-premium .auth-tab{
  height:54px;
  font-size:16px;
}

.auth-form-premium{
  gap:14px;
}

.field-label{
  gap:7px;
  font-size:13px;
}

.auth-form-premium input{
  height:50px;
  padding:0 16px;
  border-radius:16px;
  font-size:15px;
}

.password-field input{
  padding-right:56px;
}

.password-toggle{
  right:9px;
  width:36px;
  height:36px;
  border-radius:12px;
  font-size:17px;
}

.auth-submit{
  margin-top:5px;
  min-height:54px;
  padding:14px 20px;
  border-radius:16px;
  font-size:16px;
}

.auth-submit-arrow{
  font-size:23px;
}

.auth-note-wrap{
  margin-top:24px;
  padding-top:18px;
}

.auth-note{
  font-size:12px;
  line-height:1.45;
}

@media (max-width:760px){
  .auth-card-premium{
    width:min(520px, 96vw);
    padding:28px 20px 24px;
    border-radius:24px;
  }

  .auth-card-premium h1{
    font-size:46px;
  }

  .auth-intro{
    font-size:16px;
  }

  .auth-tabs-premium .auth-tab{
    height:50px;
    font-size:15px;
  }

  .auth-form-premium input{
    height:48px;
  }

  .auth-submit{
    min-height:50px;
    font-size:15px;
  }
}


.day,.month-cell,.day-main{position:relative;transition:background .16s ease,box-shadow .16s ease}
.day.drop-target,.month-cell.drop-target,.day-main.drop-target{background:#eef7f1!important;box-shadow:inset 0 0 0 2px #2f6b4f}
.task{cursor:grab;user-select:none;overflow:hidden;transition:transform .14s ease,box-shadow .14s ease,opacity .14s ease}
.task:active{cursor:grabbing}.task.dragging{opacity:.45;transform:scale(.98)}
.task:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(35,64,47,.09)}
.person-main-stripe{height:6px;margin:-9px -9px 8px}
.category-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px}
.task-actions{justify-content:flex-end;flex-wrap:wrap}
.task-actions .edit-plan{background:#f3f0ea}.task-actions .delete-plan{background:#f7e8e8;color:#974949}
.day-add-btn{width:100%;margin-top:8px;border:1px dashed #cbd8ce;background:#f8faf8;color:#54705f;border-radius:10px;padding:7px 8px;font-size:9px;font-weight:850;cursor:pointer}
.month-task{cursor:grab;border-left-width:4px!important}.month-task.dragging{opacity:.42}
.month-add{margin-top:5px;width:100%;border:0;border-radius:7px;padding:4px;background:#f2f5f2;color:#68766d;font-size:8px;cursor:pointer}
#planningTaskForm{padding:20px;display:grid;gap:12px}
#planningTaskForm label{display:grid;gap:6px;font-size:11px;color:var(--muted);font-weight:800}
#planningTaskForm input,#planningTaskForm select{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:#fbfcfa;color:var(--text)}
.priority-badge{border:1px solid currentColor}

#generatorForm{
  padding:22px;
  display:grid;
  gap:16px;
}

.generator-intro{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}

.generator-options{
  display:grid;
  gap:9px;
}

.generator-option{
  position:relative;
  display:block;
  cursor:pointer;
}

.generator-option > input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.generator-option-body{
  display:grid;
  gap:6px;
  padding:14px 15px;
  border:1.5px solid var(--line);
  border-radius:14px;
  background:#fbfcfa;
  transition:.16s ease;
}

.generator-option-body strong{
  font-size:14px;
}

.generator-option-body small{
  color:var(--muted);
  line-height:1.4;
}

.generator-option > input:checked + .generator-option-body{
  border-color:#4f8064;
  background:#edf5ef;
  box-shadow:0 0 0 3px rgba(47,107,79,.08);
}

.generator-meter{
  height:5px;
  border-radius:999px;
  overflow:hidden;
  background:#e7ece8;
  margin-top:3px;
}

.generator-meter i{
  display:block;
  height:100%;
  border-radius:999px;
  background:#5d8a6d;
}

.generator-note{
  display:grid;
  gap:3px;
  padding:11px 12px;
  border-radius:11px;
  background:#f3f6f2;
  font-size:10px;
  color:var(--muted);
}

.generator-note strong{
  color:var(--text);
  font-size:11px;
}


.library-item strong{
  line-height:1.25;
}


.task-name{font-weight:850}


/* ===== Fiche du foyer ===== */
.household-panel{
  width:min(720px,96vw);
}

.household-section{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  margin:12px 0;
}

.household-section h3{
  margin:0 0 12px;
  font-size:14px;
}

.household-panel input,
.household-panel select{
  width:100%;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fbfcfa;
  color:var(--text);
}

.household-people-summary{
  display:grid;
  gap:7px;
}

.household-person-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  background:#f8faf8;
  border:1px solid var(--line);
  border-radius:10px;
}

.household-person-main{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.household-person-main strong{
  font-size:12px;
}

.household-person-row small{
  color:var(--muted);
  font-size:9px;
}

.household-hint{
  margin:9px 0 0;
  font-size:10px;
  color:var(--muted);
  line-height:1.4;
}

.sticky-panel-actions{
  position:sticky;
  bottom:-20px;
  padding:14px 0 6px;
  background:linear-gradient(180deg,rgba(249,250,247,0),#f9faf7 28%);
}

@media(max-width:760px){
  .household-section{
    padding:12px;
  }
}


/* ===== Couleurs des profils ===== */
.task{
  border-left-width:7px;
  border-color:rgba(32,49,40,.12);
  background-clip:padding-box;
}

.task .task-line,
.task .task-meta,
.task .task-actions{
  position:relative;
  z-index:1;
}

.person-main-stripe{
  height:7px;
}

.person-tag{
  font-weight:950;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset;
}

.month-task{
  font-weight:850;
  border-left-width:5px!important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.035);
}

.household-person-row,
.person-card{
  position:relative;
  overflow:hidden;
}

.household-person-row::after,
.person-card::after{
  content:"";
  position:absolute;
  pointer-events:none;
  inset:0;
  border-radius:inherit;
  opacity:.08;
  background:linear-gradient(135deg,currentColor 0 50%,transparent 50% 100%);
}


/* ===== Cartes : profil et catégorie ===== */
.task{
  border-left-width:8px;
  border-color:rgba(0,0,0,.10);
}

.task-name{
  font-weight:900;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}

.task-time{
  font-size:10px;
  font-weight:900;
  color:#17211b;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(255,255,255,.78);
  border-radius:999px;
  padding:3px 6px;
}

.task-meta .pill,
.task-meta .person-tag,
.priority-badge{
  backdrop-filter:blur(3px);
}

.week-grid .day.weekday{
  background:#fbfcff;
  border-color:#dbe4f2;
}

.week-grid .day.weekend{
  background:linear-gradient(180deg,#fff7e8 0%,#fffaf2 100%);
  border-color:#f1d5a9;
  box-shadow:inset 0 4px 0 #ffb347;
}

.week-grid .day.weekend .day-head h3{
  color:#b96500;
}

.week-grid .day.weekday .day-head h3{
  color:#29435d;
}

.month-cell.weekend-cell{
  background:#fff7e8;
  border-color:#f0d5aa;
}

.month-cell.weekday-cell{
  background:#fcfdff;
}

.month-head:nth-child(6),
.month-head:nth-child(7){
  color:#c46b00;
  background:#fff4df;
  border-radius:8px;
}

.month-task{
  color:#17211b !important;
  font-weight:900;
}

.person-main-stripe{
  display:none;
}

/* Give task/category chips brighter accents without overpowering the diagonal */
.category-dot{
  width:9px;
  height:9px;
  box-shadow:0 0 0 2px rgba(255,255,255,.7);
}

/* ===== Niveau de détail des tâches ===== */


/* ===== Palette des tâches ===== */
.task{
  border-color:rgba(0,0,0,.12);
}

.task-time{
  font-weight:950;
}

.task-meta .pill{
  font-weight:900;
}

.color-row{
  border-width:2px;
}

/* Les deux moitiés de la carte restent très lisibles même avec des couleurs franches. */
.task::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(0deg,rgba(255,255,255,.16),rgba(255,255,255,.16));
  z-index:0;
}

.task .task-line,
.task .task-meta,
.task .task-actions{
  position:relative;
  z-index:1;
}


/* ===== Actions et catégorie ===== */
.task-owner-block{
  display:block;
  margin-bottom:8px;
}

.task-owner-tag{
  display:inline-flex;
  align-items:center;
  font-size:9px;
  font-weight:950;
}

.task-category-line{
  display:block;
  clear:both;
  margin-top:6px;
}

.task-category-line .pill{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  font-size:8px;
  font-weight:900;
}

.task-title-line{
  margin-top:2px;
}

.task-priority-line{
  margin-top:5px;
}

.task-actions-v211{
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
  margin-top:10px;
}

.main-done-v211{
  justify-self:center;
  min-width:132px;
  padding:10px 20px;
  border-radius:11px;
  background:#1f7a45 !important;
  color:#fff !important;
  font-size:11px;
  font-weight:950;
  box-shadow:0 5px 12px rgba(31,122,69,.25);
  border:1px solid rgba(255,255,255,.28);
}

.main-done-v211:hover{
  transform:translateY(-1px);
}

.secondary-actions-v211{
  display:flex;
  justify-content:center;
  gap:5px;
}

.secondary-actions-v211 .mini-btn{
  padding:4px 7px;
  font-size:8px;
  opacity:.88;
}

.secondary-actions-v211 .edit-plan{
  background:#f1eee8;
}

.secondary-actions-v211 .delete-plan{
  background:#f6e8e8;
  color:#8f4444;
}

.task.done .main-done-v211{
  background:#68766d !important;
}


/* ===== Présentation des cartes ===== */
.task-owner-block,
.task-category-line,
.task-title-line,
.task-priority-line,
.secondary-actions-v211{
  display:initial;
}

.task .person-main-stripe{
  display:none;
}

.task-line{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
}

.task-name{
  flex:1;
}

.task-meta{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:6px;
}

.task-actions-v212{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
  margin-top:9px;
}

.main-done-v212{
  padding:8px 15px;
  min-width:112px;
  border-radius:10px;
  background:#1f7a45 !important;
  color:#fff !important;
  font-size:10px;
  font-weight:950;
  box-shadow:0 4px 10px rgba(31,122,69,.22);
}

.task-actions-v212 .edit-plan,
.task-actions-v212 .delete-plan{
  padding:5px 7px;
  font-size:8px;
}

.task.done .main-done-v212{
  background:#68766d !important;
}

.task-primary-info{
  display:grid;
  gap:5px;
}

.task-name-v213{
  font-size:12.5px;
  font-weight:950;
  line-height:1.2;
  color:#17211b;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}

.task-person-v213,
.task-category-v213,
.task-priority-v213{
  display:block;
}

.task-person-v213 .person-tag,
.task-category-v213 .pill,
.task-priority-v213 .priority-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
}

.task-person-v213 .person-tag{
  font-size:9px;
  font-weight:950;
}

.task-category-v213 .pill{
  font-size:8px;
  font-weight:900;
}

.task-priority-v213 .priority-badge{
  font-size:8px;
  font-weight:950;
}

.task-secondary-info{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-top:7px;
  padding-top:6px;
  border-top:1px solid rgba(255,255,255,.46);
}

.task-secondary-info .task-time{
  font-size:9px;
  font-weight:900;
}

.last-done-v213{
  font-size:8px;
  font-weight:750;
  color:#3c4841;
  background:rgba(255,255,255,.50);
  border-radius:999px;
  padding:3px 6px;
}

.task.done .task-name-v213{
  text-decoration:line-through;
}


/* ===== Menu principal ===== */
.hero{
  position:relative;
  align-items:flex-start;
}

.hero-actions-v214{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  flex-wrap:nowrap;
  position:relative;
}

.regenerate-main{
  min-height:42px;
  padding:11px 16px;
  white-space:nowrap;
  box-shadow:0 7px 16px rgba(47,107,79,.13);
}

.top-menu-wrap{
  position:relative;
}

.top-menu-trigger{
  min-height:42px;
  min-width:102px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  background:rgba(255,255,255,.94) !important;
  font-weight:900;
  white-space:nowrap;
}

.top-menu-trigger.open{
  border-color:#789383;
  background:#edf3ee !important;
}

.top-menu-dropdown{
  position:absolute;
  top:calc(100% + 9px);
  right:0;
  z-index:45;
  width:285px;
  padding:8px;
  background:rgba(255,255,255,.98);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 20px 50px rgba(34,54,42,.16);
  opacity:0;
  visibility:hidden;
  transform:translateY(-7px) scale(.98);
  transform-origin:top right;
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}

.top-menu-dropdown.open{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

.top-menu-item{
  width:100%;
  border:0;
  background:transparent;
  border-radius:11px;
  padding:10px 11px;
  display:grid;
  grid-template-columns:28px 1fr;
  align-items:center;
  gap:8px;
  text-align:left;
  cursor:pointer;
  color:var(--text);
}

.top-menu-item:hover{
  background:#f1f5f1;
}

.top-menu-item > span:first-child{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#edf2ed;
  font-size:14px;
}

.top-menu-item strong{
  display:block;
  font-size:11px;
  line-height:1.2;
}

.top-menu-item small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:8.5px;
  line-height:1.2;
}

.top-menu-separator{
  height:1px;
  background:var(--line);
  margin:6px 4px;
}

.top-menu-logout{
  color:#985050;
}

.top-menu-logout > span:first-child{
  background:#f8eded;
}

@media(max-width:760px){
  .hero{
    gap:14px;
  }

  .hero-actions-v214{
    width:100%;
    justify-content:flex-end;
  }

  .regenerate-main{
    flex:1;
  }

  .top-menu-trigger{
    min-width:96px;
  }

  .top-menu-dropdown{
    width:min(310px,calc(100vw - 28px));
    right:0;
  }
}

.priority-badge{
  font-weight:950;
  letter-spacing:.01em;
}


/* ===== Lisibilité des cartes ===== */

/* Cartes de tâches : fini les fonds multicolores confus */
.task.clean-card{
  position:relative;
  overflow:hidden;
  background:#ffffff !important;
  border:1px solid #d9e1da;
  border-left:8px solid var(--person-color);
  border-radius:18px;
  padding:12px 12px 11px;
  box-shadow:0 10px 22px rgba(28,42,34,.07);
  color:#17211b;
}

.task.clean-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
}

.task.clean-card.dragging{
  opacity:.55;
}

.task.clean-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(28,42,34,.10);
}

.task-top-accent{
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--person-color) 0 68%, var(--category-color) 68% 100%);
  margin-bottom:10px;
}

.task-state-row{
  display:flex;
  justify-content:flex-end;
  margin-bottom:4px;
}

.task-state-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  border-radius:999px;
  padding:4px 10px;
  font-size:9px;
  font-weight:950;
  letter-spacing:.01em;
}

.state-pending{
  background:#fff8e5;
  color:#8f5c00;
  border:1px solid #f2d28b;
}

.state-done{
  background:#e9f8ee;
  color:#1d7a42;
  border:1px solid #98ddb3;
}

.task-name-v216{
  font-size:14px;
  font-weight:950;
  line-height:1.2;
  color:#18221c;
  margin:0 0 8px;
  text-shadow:none;
}

.task-person-v216,
.task-category-v216,
.task-priority-v216{
  margin-bottom:6px;
}

.person-tag-v216{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:rgba(0,0,0,.03);
  color:#17211b;
  border:1px solid rgba(0,0,0,.09);
  font-size:10px;
  font-weight:900;
}

.pill-category-v216{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:color-mix(in srgb, var(--category-color) 14%, white);
  color:#152019;
  border:1px solid color-mix(in srgb, var(--category-color) 48%, white);
  font-size:9px;
  font-weight:900;
}

.priority-badge-v216{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  border-radius:999px;
  padding:4px 10px;
  font-size:9px;
  font-weight:950;
  border-width:2px;
  border-style:solid;
  background:#fff;
}

.priority-badge-v216.priority-3{
  color:#5d6b62;
  border-color:#b7c1ba;
  background:#f7f9f7;
}

.priority-badge-v216.priority-2{
  color:#9a5f00;
  border-color:#f1b24a;
  background:#fff5e6;
}

.priority-badge-v216.priority-1{
  color:#a62121;
  border-color:#eb7f7f;
  background:#fff0f0;
}

.task-secondary-info-v216{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid #edf1ed;
}

.task-secondary-info-v216 .task-time{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 9px;
  border-radius:999px;
  background:#f1f5f1;
  border:1px solid #dce6dc;
  color:#1d2b22;
  font-size:10px;
  font-weight:950;
}

.last-done-v216{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 9px;
  border-radius:999px;
  background:#fafbfa;
  border:1px solid #e6ebe6;
  color:#334038;
  font-size:9px;
  font-weight:800;
}

.task-actions-v216{
  display:grid;
  gap:8px;
  margin-top:10px;
}

.main-done-v216{
  justify-self:center;
  min-width:148px;
  min-height:42px;
  padding:10px 18px;
  border-radius:12px;
  background:#1f8f4c !important;
  color:#fff !important;
  font-size:12px;
  font-weight:950;
  border:1px solid #17713c;
  box-shadow:0 8px 16px rgba(31,143,76,.20);
}

.main-done-v216:hover{
  transform:translateY(-1px);
}

.secondary-actions-v216{
  display:flex;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
}

.secondary-actions-v216 .mini-btn{
  padding:5px 8px;
  font-size:8.5px;
  border-radius:9px;
  background:#f5f6f5;
  color:#3b463f;
  border:1px solid #dde3dd;
}

.secondary-actions-v216 .delete-plan{
  background:#faf2f2;
  color:#944848;
  border-color:#ead0d0;
}

.task.clean-card.done{
  background:#fcfffd !important;
  border-color:#b9d8c4;
  box-shadow:0 10px 22px rgba(19,90,49,.08);
}

.task.clean-card.done .task-name-v216{
  color:#274333;
}

.task.clean-card.done .main-done-v216{
  background:#6f8075 !important;
  border-color:#5f6d63;
  box-shadow:none;
}

.task.clean-card.done .task-secondary-info-v216{
  border-top-color:#dfeae2;
}

/* Lisibilité des vues mensuelles */
.month-task{
  background:#fff !important;
  color:#1f2a23 !important;
  font-weight:900;
  border-left-width:5px !important;
  border-radius:8px;
}

/* Enlever certains anciens effets colorés qui rendaient l'ensemble confus */
.person-main-stripe{
  display:none !important;
}


/* ===== Palettes distinctes ===== */
.pill-category-v216{
  font-weight:950;
}

.category-dot{
  box-shadow:0 0 0 2px rgba(255,255,255,.9);
}

.task-top-accent{
  /* personne dominante, catégorie seulement en repère secondaire */
  background:linear-gradient(
    90deg,
    var(--person-color) 0 76%,
    var(--category-color) 76% 100%
  );
}


/* ===== Cartes compactes ===== */
.task.clean-card.compact-card{
  padding:9px 10px 9px;
  border-radius:15px;
}

.compact-card .task-top-accent{
  height:6px;
  margin-bottom:7px;
}

.compact-state-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  margin-bottom:5px;
}

.compact-time{
  min-height:22px !important;
  padding:3px 8px !important;
  font-size:9px !important;
  font-weight:950 !important;
  background:#f1f5f1 !important;
  border:1px solid #dce6dc !important;
  color:#1d2b22 !important;
}

.compact-state-row .task-state-badge{
  min-height:22px;
  padding:3px 8px;
  font-size:8.5px;
}

.compact-task-name{
  font-size:13px;
  line-height:1.15;
  margin-bottom:6px;
}

.compact-info-stack{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
}

.compact-info-stack .task-person-v216,
.compact-info-stack .task-category-v216,
.compact-info-stack .task-priority-v216{
  margin-bottom:0;
}

.compact-info-stack .person-tag-v216{
  font-size:9px;
  padding:3px 6px;
}

.compact-info-stack .pill-category-v216{
  font-size:8px;
  padding:3px 6px;
}

.compact-info-stack .priority-badge-v216{
  min-height:20px;
  padding:3px 7px;
  font-size:8px;
}

.compact-last-done{
  display:inline-flex;
  margin-top:6px;
  min-height:20px;
  padding:3px 7px;
  font-size:8px;
}

.compact-actions{
  gap:6px;
  margin-top:7px;
}

.compact-actions .main-done-v216{
  min-width:130px;
  min-height:36px;
  padding:8px 14px;
  font-size:10.5px;
  border-radius:10px;
}

.compact-actions .secondary-actions-v216{
  gap:5px;
}

.compact-actions .secondary-actions-v216 .mini-btn{
  padding:4px 7px;
  font-size:8px;
}

.week-grid .day{
  padding:8px;
}

@media(max-width:760px){
  .task.clean-card.compact-card{
    padding:8px 9px;
  }

  .compact-task-name{
    font-size:12.5px;
  }
}


/* ===== Mise en page des informations ===== */
.left-time-row{
  justify-content:flex-start !important;
}

.left-time-row .task-state-badge{
  margin-left:auto;
}

.compact-info-lines{
  display:grid;
  gap:4px;
  margin-top:1px;
}

.info-line-v219{
  display:grid !important;
  grid-template-columns:58px minmax(0,1fr);
  align-items:center;
  gap:6px;
  margin:0 !important;
}

.info-label-v219{
  font-size:7.5px;
  line-height:1;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.035em;
  color:#748077;
}

.info-line-v219 .person-tag-v216,
.info-line-v219 .pill-category-v216,
.info-line-v219 .priority-badge-v216{
  justify-self:start;
  margin:0;
}

.compact-last-done{
  margin-top:5px;
}

@media(max-width:760px){
  .info-line-v219{
    grid-template-columns:54px minmax(0,1fr);
    gap:5px;
  }
}


/* ===== Badges sans libellés ===== */
.info-line-v219{
  display:flex !important;
  align-items:center;
  justify-content:flex-start;
  gap:0;
}

.info-label-v219{
  display:none !important;
}

.info-line-v219 .person-tag-v216,
.info-line-v219 .pill-category-v216,
.info-line-v219 .priority-badge-v216{
  justify-self:auto;
}

/* ===== Générateur : mode léger ===== */

/* ===== Générateur : objectifs par personne ===== */


/* ===== Responsive planning ===== */

/* Evite tout débordement horizontal global */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

* {
  min-width: 0;
}

/* Conteneurs principaux toujours limités au viewport */
.app,
.main,
.content,
.planner,
.planner-shell,
.calendar-wrap,
.calendar-container,
.view-container {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Vue semaine : les 7 jours doivent toujours tenir dans la largeur */
.week-grid {
  width: 100%;
  max-width: 100%;
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: clamp(3px, .55vw, 8px) !important;
  overflow: visible !important;
}

/* Vue mensuelle : toujours 7 colonnes dans l'écran */
.month-grid {
  width: 100%;
  max-width: 100%;
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: clamp(2px, .45vw, 6px) !important;
  overflow: visible !important;
}

.week-grid .day,
.month-grid .day,
.month-cell,
.calendar-day {
  min-width: 0 !important;
  width: auto !important;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* Aucun contenu d'une tâche ne peut élargir une colonne */
.task,
.task.clean-card,
.month-task,
.task * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.task-name-v216,
.compact-task-name,
.month-task,
.person-tag,
.pill,
.priority-badge,
.last-done-v216 {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Cartes plus adaptatives */
.task.clean-card.compact-card {
  width: 100%;
  padding: clamp(5px, .65vw, 9px);
  border-left-width: clamp(4px, .55vw, 8px);
  border-radius: clamp(9px, 1vw, 15px);
}

.compact-card .task-top-accent {
  height: clamp(3px, .45vw, 6px);
  margin-bottom: clamp(4px, .55vw, 7px);
}

.compact-task-name {
  font-size: clamp(8px, .9vw, 13px) !important;
  line-height: 1.08;
  margin-bottom: clamp(3px, .45vw, 6px);
}

.compact-state-row {
  gap: clamp(2px, .35vw, 6px);
  margin-bottom: clamp(3px, .4vw, 5px);
}

.compact-time,
.compact-state-row .task-state-badge {
  min-height: 18px !important;
  padding: 2px clamp(3px, .45vw, 8px) !important;
  font-size: clamp(6.5px, .65vw, 8.5px) !important;
  white-space: nowrap;
}

.compact-info-lines {
  gap: clamp(2px, .35vw, 4px);
}

.info-line-v219 {
  min-width: 0;
}

.info-line-v219 .person-tag-v216,
.info-line-v219 .pill-category-v216,
.info-line-v219 .priority-badge-v216 {
  max-width: 100%;
  white-space: normal;
  line-height: 1.05;
}

.compact-info-lines .person-tag-v216 {
  font-size: clamp(6.5px, .68vw, 9px);
  padding: 2px clamp(3px, .35vw, 6px);
}

.compact-info-lines .pill-category-v216 {
  font-size: clamp(6px, .62vw, 8px);
  padding: 2px clamp(3px, .35vw, 6px);
}

.compact-info-lines .priority-badge-v216 {
  min-height: 18px;
  font-size: clamp(6px, .62vw, 8px);
  padding: 2px clamp(3px, .4vw, 7px);
}

.compact-last-done {
  max-width: 100%;
  margin-top: clamp(3px, .4vw, 5px);
  min-height: 18px;
  padding: 2px clamp(3px, .4vw, 7px);
  font-size: clamp(6px, .62vw, 8px);
  line-height: 1.08;
}

.compact-actions {
  gap: clamp(3px, .45vw, 6px);
  margin-top: clamp(4px, .5vw, 7px);
}

.compact-actions .main-done-v216 {
  width: 100%;
  min-width: 0;
  min-height: clamp(28px, 3vw, 36px);
  padding: clamp(5px, .55vw, 8px) clamp(5px, .8vw, 14px);
  font-size: clamp(7px, .75vw, 10.5px);
}

.compact-actions .secondary-actions-v216 {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2px, .35vw, 5px);
}

.compact-actions .secondary-actions-v216 .mini-btn {
  width: 100%;
  min-width: 0;
  padding: clamp(3px, .4vw, 4px);
  font-size: clamp(6px, .58vw, 8px);
  white-space: normal;
}

/* Entêtes des jours adaptatifs */
.week-grid .day h3,
.week-grid .day-title,
.calendar-day-title,
.month-grid .day-name {
  font-size: clamp(7px, .85vw, 12px) !important;
  line-height: 1.05;
  white-space: normal;
}

/* Barre d'outils du planning : elle se replie au lieu de dépasser */
.planner-toolbar,
.calendar-toolbar,
.view-switcher,
.toolbar {
  max-width: 100%;
  flex-wrap: wrap !important;
}

.planner-toolbar > *,
.calendar-toolbar > *,
.view-switcher > *,
.toolbar > * {
  min-width: 0;
}

/* Tablettes */
@media (max-width: 900px) {
  .week-grid {
    gap: 3px !important;
  }

  .week-grid .day {
    padding: 4px !important;
  }

  .task.clean-card.compact-card {
    padding: 5px;
    border-left-width: 4px;
  }

  .person-color-preview,
  .category-dot {
    width: 7px !important;
    height: 7px !important;
    min-width: 7px !important;
  }
}

/* Téléphones : on conserve les 7 jours visibles, en mode très compact */
@media (max-width: 600px) {
  .week-grid,
  .month-grid {
    gap: 2px !important;
  }

  .week-grid .day,
  .month-grid .day,
  .month-cell {
    padding: 2px !important;
    border-radius: 7px !important;
  }

  .task.clean-card.compact-card {
    padding: 4px 3px;
    border-left-width: 3px;
    border-radius: 8px;
  }

  .compact-card .task-top-accent {
    height: 3px;
    margin-bottom: 3px;
  }

  .compact-task-name {
    font-size: 7px !important;
    line-height: 1.02;
    margin-bottom: 3px;
  }

  .compact-time,
  .compact-state-row .task-state-badge {
    font-size: 5.5px !important;
    min-height: 14px !important;
    padding: 1px 2px !important;
  }

  .compact-info-lines {
    gap: 1px;
  }

  .compact-info-lines .person-tag-v216,
  .compact-info-lines .pill-category-v216,
  .compact-info-lines .priority-badge-v216 {
    font-size: 5.5px !important;
    min-height: 14px;
    padding: 1px 2px;
    border-radius: 5px;
  }

  .person-color-preview,
  .category-dot {
    width: 5px !important;
    height: 5px !important;
    min-width: 5px !important;
  }

  .compact-last-done {
    font-size: 5.2px;
    min-height: 14px;
    padding: 1px 2px;
    margin-top: 2px;
  }

  .compact-actions {
    margin-top: 3px;
    gap: 2px;
  }

  .compact-actions .main-done-v216 {
    min-height: 23px;
    padding: 3px 2px;
    font-size: 6px;
    border-radius: 6px;
  }

  .compact-actions .secondary-actions-v216 .mini-btn {
    padding: 2px 1px;
    font-size: 5.2px;
    border-radius: 5px;
  }

  .week-grid .day h3,
  .week-grid .day-title,
  .calendar-day-title {
    font-size: 6px !important;
  }
}


/* ===== Vue Jour ===== */
.day-main{
  min-width:0;
}

.day-empty-v214{
  display:grid;
  gap:4px;
  padding:14px;
  margin-bottom:8px;
  border:1px dashed #cad4cc;
  border-radius:12px;
  background:#f8faf8;
  color:#465248;
  text-align:center;
}

.day-empty-v214 strong{
  font-size:12px;
}

.day-empty-v214 small{
  font-size:9px;
  color:#718077;
  line-height:1.3;
}


/* ===== Priorités selon la date réelle ===== */


/* ===== Menus harmonisés ===== */

:root{
  --menu-bg:#ffffff;
  --menu-border:#dce4dd;
  --menu-shadow:0 20px 50px rgba(31,47,37,.14);
  --menu-radius:18px;
  --menu-soft:#f5f8f5;
  --menu-text:#1d2921;
  --menu-muted:#6f7d73;
}

/* Panneaux, modales, tiroirs, dialogues : même langage visuel */
.modal-card,
.dialog-card,
.side-panel,
.drawer,
.panel,
.sheet,
.popup,
.settings-card,
.auth-card,
.wizard-card,
.top-menu-dropdown{
  background:var(--menu-bg) !important;
  border:1px solid var(--menu-border) !important;
  border-radius:var(--menu-radius) !important;
  box-shadow:var(--menu-shadow) !important;
  color:var(--menu-text);
}

/* En-têtes de tous les menus */
.modal-card h2,
.modal-card h3,
.dialog-card h2,
.dialog-card h3,
.side-panel h2,
.side-panel h3,
.drawer h2,
.drawer h3,
.panel h2,
.panel h3,
.sheet h2,
.sheet h3,
.popup h2,
.popup h3,
.settings-card h2,
.settings-card h3{
  margin-top:0;
  color:var(--menu-text);
  font-weight:950;
  letter-spacing:-.02em;
}

/* Texte secondaire uniforme */
.modal-card p,
.dialog-card p,
.side-panel p,
.drawer p,
.panel p,
.sheet p,
.popup p,
.settings-card p,
.panel-intro{
  color:var(--menu-muted);
  line-height:1.45;
}

/* Champs de formulaire cohérents */
.modal-card input,
.modal-card select,
.modal-card textarea,
.dialog-card input,
.dialog-card select,
.dialog-card textarea,
.side-panel input,
.side-panel select,
.side-panel textarea,
.drawer input,
.drawer select,
.drawer textarea,
.panel input,
.panel select,
.panel textarea,
.sheet input,
.sheet select,
.sheet textarea,
.popup input,
.popup select,
.popup textarea{
  width:100%;
  min-height:42px;
  border:1px solid #d6dfd8;
  border-radius:11px;
  background:#fff;
  color:#1d2921;
  padding:9px 11px;
  box-sizing:border-box;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}

.modal-card input:focus,
.modal-card select:focus,
.modal-card textarea:focus,
.dialog-card input:focus,
.dialog-card select:focus,
.dialog-card textarea:focus,
.side-panel input:focus,
.side-panel select:focus,
.side-panel textarea:focus,
.drawer input:focus,
.drawer select:focus,
.drawer textarea:focus,
.panel input:focus,
.panel select:focus,
.panel textarea:focus,
.sheet input:focus,
.sheet select:focus,
.sheet textarea:focus,
.popup input:focus,
.popup select:focus,
.popup textarea:focus{
  border-color:#87a392;
  box-shadow:0 0 0 3px rgba(86,122,99,.10);
}

/* Labels */
.modal-card label,
.dialog-card label,
.side-panel label,
.drawer label,
.panel label,
.sheet label,
.popup label{
  color:#344139;
  font-size:10px;
  font-weight:900;
}

/* Boutons secondaires uniformisés dans les menus */
.modal-card .btn,
.dialog-card .btn,
.side-panel .btn,
.drawer .btn,
.panel .btn,
.sheet .btn,
.popup .btn,
.settings-card .btn{
  min-height:40px;
  border-radius:11px;
  font-weight:900;
}

/* Boutons neutres */
.modal-card .btn:not(.primary):not(.danger),
.dialog-card .btn:not(.primary):not(.danger),
.side-panel .btn:not(.primary):not(.danger),
.drawer .btn:not(.primary):not(.danger),
.panel .btn:not(.primary):not(.danger),
.sheet .btn:not(.primary):not(.danger),
.popup .btn:not(.primary):not(.danger){
  background:var(--menu-soft);
  border:1px solid #dce4dd;
  color:#344139;
}

/* Bouton principal commun */
.modal-card .btn.primary,
.dialog-card .btn.primary,
.side-panel .btn.primary,
.drawer .btn.primary,
.panel .btn.primary,
.sheet .btn.primary,
.popup .btn.primary{
  background:#2f6b4f;
  color:#fff;
  border:1px solid #285b43;
  box-shadow:0 7px 16px rgba(47,107,79,.15);
}

/* Bouton danger commun */
.modal-card .btn.danger,
.dialog-card .btn.danger,
.side-panel .btn.danger,
.drawer .btn.danger,
.panel .btn.danger,
.sheet .btn.danger,
.popup .btn.danger{
  background:#fff3f3;
  color:#9d3e3e;
  border:1px solid #edcccc;
}

/* Barre d'actions des menus */
.modal-actions,
.dialog-actions,
.panel-actions,
.sheet-actions,
.drawer-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding-top:12px;
  margin-top:14px;
  border-top:1px solid #edf1ed;
}

/* Listes internes */
.menu-list,
.settings-list,
.library-list,
.people-list{
  display:grid;
  gap:7px;
}

/* Lignes de menu */
.menu-row,
.settings-row,
.library-row,
.person-row{
  border:1px solid #e2e8e3;
  border-radius:12px;
  background:#fbfcfb;
  padding:10px;
}

/* Menu haut droite aligné sur la même charte */
.top-menu-dropdown{
  width:290px;
  padding:8px;
}

.top-menu-item{
  border-radius:11px;
  min-height:52px;
  padding:9px 10px;
}

.top-menu-item:hover{
  background:var(--menu-soft);
}

/* Boutons de fermeture génériques */
.close-btn,
.modal-close,
.panel-close,
.drawer-close,
.sheet-close{
  width:34px;
  height:34px;
  min-width:34px;
  border-radius:10px;
  border:1px solid #dce4dd;
  background:#f6f8f6;
  color:#4d5a51;
  display:grid;
  place-items:center;
  font-weight:900;
  cursor:pointer;
}

/* Espacement interne cohérent */
.modal-card,
.dialog-card,
.side-panel,
.drawer,
.panel,
.sheet,
.popup,
.settings-card{
  padding:clamp(14px,2vw,22px);
}

/* Mobile : tous les menus prennent la même largeur utile */
@media(max-width:760px){
  .modal-card,
  .dialog-card,
  .side-panel,
  .drawer,
  .panel,
  .sheet,
  .popup,
  .settings-card{
    width:min(94vw,520px) !important;
    max-width:94vw !important;
    border-radius:16px !important;
    padding:14px !important;
  }

  .modal-actions,
  .dialog-actions,
  .panel-actions,
  .sheet-actions,
  .drawer-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .modal-actions .btn,
  .dialog-actions .btn,
  .panel-actions .btn,
  .sheet-actions .btn,
  .drawer-actions .btn{
    width:100%;
  }
}


/* ===== Jours passés ===== */

/* Jour passé : gris mais toujours lisible et utilisable */
.week-grid .day.past-day,
.month-grid .month-cell.past-day,
.day-view.past-day .day-main,
.day-view.past-day .day-sidebar{
  background:#eef0ee !important;
}

.week-grid .day.past-day,
.month-grid .month-cell.past-day{
  border-color:#d8dcda !important;
}

.week-grid .day.past-day .day-head,
.month-grid .month-cell.past-day .month-date{
  color:#8a928d !important;
}

.week-grid .day.past-day .task.clean-card,
.month-grid .month-cell.past-day .month-task,
.day-view.past-day .task.clean-card{
  filter:grayscale(.30);
  opacity:.78;
}

/* Aujourd'hui ressort clairement */
.week-grid .day.today-day,
.month-grid .month-cell.today-day,
.day-view.today-day .day-main{
  box-shadow:inset 0 0 0 2px rgba(47,107,79,.55);
}

.week-grid .day.today-day .day-head,
.month-grid .month-cell.today-day .month-date{
  color:#245c42;
  font-weight:950;
}

/* Les jours futurs restent neutres */
.future-day{
  opacity:1;
}


/* ===== Actualisation immédiate des priorités ===== */


/* ===== Design final ===== */

:root{
  --pm-bg:#f3f6f3;
  --pm-surface:#ffffff;
  --pm-surface-soft:#f8faf8;
  --pm-border:#dfe6e1;
  --pm-text:#18221c;
  --pm-muted:#718078;
  --pm-green:#2f6b4f;
  --pm-green-dark:#24543e;
  --pm-shadow:0 14px 34px rgba(26,44,33,.08);
  --pm-shadow-soft:0 8px 20px rgba(26,44,33,.06);
}

/* Fond général plus doux */
body{
  background:
    radial-gradient(circle at top left, rgba(92,139,108,.07), transparent 30%),
    linear-gradient(180deg,#f7faf7 0%,var(--pm-bg) 100%) !important;
  color:var(--pm-text);
}

/* En-tête */
.hero{
  background:rgba(255,255,255,.92);
  border:1px solid var(--pm-border);
  border-radius:22px;
  box-shadow:var(--pm-shadow);
  padding:18px 20px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.hero h1{
  font-size:clamp(24px,3vw,36px);
  letter-spacing:-.035em;
  color:#172119;
  margin-bottom:3px;
}

.hero p{
  color:var(--pm-muted);
}

/* Boutons haut droite */
.hero-actions-v214{
  gap:8px;
}

.regenerate-main,
.top-menu-trigger{
  border-radius:13px !important;
  min-height:44px;
  font-weight:950;
}

.regenerate-main{
  background:linear-gradient(180deg,#3a795b,#2f6b4f) !important;
  border-color:#2a6248 !important;
  box-shadow:0 9px 18px rgba(47,107,79,.18);
}

.top-menu-trigger{
  background:#f7f9f7 !important;
  border-color:#dbe3dd !important;
}

/* Barre générale du planning */
.planner-toolbar,
.calendar-toolbar,
.toolbar{
  background:rgba(255,255,255,.94);
  border:1px solid var(--pm-border);
  border-radius:18px;
  padding:8px 10px;
  box-shadow:var(--pm-shadow-soft);
  gap:7px;
}

/* Onglets Jour / Semaine / Mois */
.view-switcher{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:#edf2ee;
  padding:4px;
  border-radius:13px;
}

.view-switcher button,
.view-switcher .btn{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:10px !important;
  min-height:34px;
  padding:7px 11px;
  color:#5e6b62;
  font-weight:900;
}

.view-switcher button.active,
.view-switcher .active{
  background:#fff !important;
  color:#214c38 !important;
  box-shadow:0 3px 9px rgba(30,53,38,.08) !important;
}

/* Navigation de dates */
.date-nav,
.calendar-nav{
  display:flex;
  align-items:center;
  gap:6px;
}

.date-nav .btn,
.calendar-nav .btn{
  min-height:36px;
  border-radius:10px;
  background:#f7f9f7;
  border:1px solid #dfe5df;
}

/* Zone calendrier */
.calendar-wrap,
.calendar-container,
.planner-shell{
  background:rgba(255,255,255,.58);
  border-radius:20px;
}

/* Colonnes semaine */
.week-grid{
  align-items:stretch;
}

.week-grid .day{
  background:rgba(255,255,255,.9);
  border:1px solid #e2e8e3;
  border-radius:16px;
  padding:7px !important;
  box-shadow:0 5px 14px rgba(29,45,35,.04);
  transition:box-shadow .15s ease, transform .15s ease;
}

.week-grid .day:hover{
  box-shadow:0 9px 19px rgba(29,45,35,.07);
}

.week-grid .day.weekend{
  background:#faf8f4;
}

/* En-tête des jours */
.day-head,
.day-title,
.calendar-day-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:5px;
  min-height:34px;
  margin-bottom:6px;
  padding-bottom:6px;
  border-bottom:1px solid #edf1ed;
  color:#26342b;
  font-weight:950;
}

/* Aujourd'hui */
.week-grid .day.today-day{
  border-color:#7da38b !important;
  box-shadow:
    inset 0 0 0 1px rgba(47,107,79,.28),
    0 8px 20px rgba(47,107,79,.08);
}

/* Jours passés, conservés mais plus élégants */
.week-grid .day.past-day,
.month-grid .month-cell.past-day{
  background:#f0f2f0 !important;
}

.week-grid .day.past-day .task.clean-card,
.month-grid .month-cell.past-day .month-task{
  opacity:.68;
  filter:grayscale(.38);
}

/* Cartes tâches */
.task.clean-card.compact-card{
  position:relative;
  background:#fff !important;
  border:1px solid #e0e6e1;
  border-left:5px solid var(--person-color);
  border-radius:14px;
  padding:8px !important;
  box-shadow:0 5px 13px rgba(29,44,35,.05);
  transition:transform .12s ease, box-shadow .12s ease;
}

.task.clean-card.compact-card:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(29,44,35,.08);
}

.compact-card .task-top-accent{
  height:4px;
  border-radius:999px;
  margin-bottom:6px;
  opacity:.95;
}

/* Ligne temps + état */
.compact-state-row{
  margin-bottom:5px;
}

.compact-time{
  background:#eef3ef !important;
  border-color:#dbe4dd !important;
  color:#2f4436 !important;
  font-weight:950 !important;
}

.task-state-badge{
  font-weight:950;
  letter-spacing:.005em;
}

.state-pending{
  background:#fff7e6 !important;
  border-color:#f0cf87 !important;
  color:#875a06 !important;
}

.state-done{
  background:#e9f7ee !important;
  border-color:#9fd4b3 !important;
  color:#216d40 !important;
}

/* Nom de tâche */
.compact-task-name{
  color:#172119 !important;
  font-weight:950 !important;
  letter-spacing:-.012em;
  margin-bottom:6px !important;
}

/* Badges info */
.person-tag-v216,
.pill-category-v216,
.priority-badge-v216{
  border-radius:8px !important;
  font-weight:900 !important;
}

.person-tag-v216{
  background:#f6f8f6 !important;
  border-color:#e0e5e1 !important;
}

.pill-category-v216{
  background:color-mix(in srgb,var(--category-color) 12%,white) !important;
  border-color:color-mix(in srgb,var(--category-color) 38%,white) !important;
}

/* Priorité */
.priority-badge-v216.priority-3{
  background:#f4f6f4 !important;
  color:#657168 !important;
  border-color:#cbd2cc !important;
}

.priority-badge-v216.priority-2{
  background:#fff4e1 !important;
  color:#965f0b !important;
  border-color:#e8b45c !important;
}

.priority-badge-v216.priority-1{
  background:#fff0f0 !important;
  color:#a32b2b !important;
  border-color:#e88c8c !important;
}

/* Dernière réalisation */
.compact-last-done{
  background:#fafbfa !important;
  border-color:#e7ebe8 !important;
  color:#667168 !important;
}

/* Actions */
.compact-actions{
  margin-top:6px !important;
}

.compact-actions .main-done-v216{
  background:linear-gradient(180deg,#3b8f5d,#2f7a4e) !important;
  border-color:#286a43 !important;
  border-radius:9px !important;
  box-shadow:0 5px 10px rgba(47,122,78,.15);
}

.task.clean-card.done .main-done-v216{
  background:#76857b !important;
  border-color:#68746b !important;
  box-shadow:none;
}

.secondary-actions-v216 .mini-btn{
  background:#f6f8f6 !important;
  border-color:#e1e6e2 !important;
  color:#526057 !important;
}

.secondary-actions-v216 .delete-plan{
  background:#fbf2f2 !important;
  color:#945050 !important;
  border-color:#ebd3d3 !important;
}

/* Vue Jour */
.day-view{
  display:grid;
  gap:12px;
}

.day-main{
  background:rgba(255,255,255,.92);
  border:1px solid var(--pm-border);
  border-radius:18px;
  padding:12px;
  box-shadow:var(--pm-shadow-soft);
}

/* Vue Mois */
.month-grid .month-cell{
  background:#fff;
  border:1px solid #e3e8e4;
  border-radius:12px;
  box-shadow:0 4px 10px rgba(29,45,35,.035);
}

.month-grid .month-cell.weekend-cell{
  background:#faf8f4;
}

.month-task{
  border-radius:7px !important;
  padding:4px 5px !important;
}

/* Bouton + ajouter une tâche dans les jours */
.add-day-task,
.day-add,
.add-task{
  background:#f5f8f5 !important;
  border:1px dashed #cfd9d1 !important;
  color:#607067 !important;
  border-radius:10px !important;
  min-height:30px;
  font-weight:900;
}

.add-day-task:hover,
.day-add:hover,
.add-task:hover{
  background:#edf4ef !important;
  color:#2f6b4f !important;
  border-color:#95b09d !important;
}

/* Menu haut droite */
.top-menu-dropdown{
  border-radius:16px !important;
  padding:7px !important;
  box-shadow:0 22px 48px rgba(25,42,32,.14) !important;
}

.top-menu-item{
  border-radius:10px !important;
  transition:background .12s ease;
}

.top-menu-item:hover{
  background:#f1f5f2 !important;
}

/* Responsive */
@media(max-width:900px){
  .hero{
    padding:14px 15px;
    border-radius:18px;
  }

  .planner-toolbar,
  .calendar-toolbar,
  .toolbar{
    border-radius:15px;
  }

  .week-grid .day{
    border-radius:12px;
  }
}

@media(max-width:600px){
  .hero{
    padding:11px 12px;
  }

  .hero h1{
    font-size:20px;
  }

  .planner-toolbar,
  .calendar-toolbar,
  .toolbar{
    padding:6px;
    gap:4px;
  }

  .view-switcher{
    padding:3px;
  }

  .view-switcher button,
  .view-switcher .btn{
    min-height:30px;
    padding:5px 7px;
    font-size:8px;
  }

  .week-grid .day{
    border-radius:8px;
  }

  .task.clean-card.compact-card{
    border-radius:8px;
    box-shadow:none;
  }

  .compact-actions .main-done-v216{
    border-radius:6px !important;
  }
}

/* Correction globale du débordement horizontal */
html,
body{
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
  background:#eef3ef !important;
}

body{
  position:relative;
}

/* Tous les blocs doivent rester strictement dans le viewport */
*,
*::before,
*::after{
  box-sizing:border-box;
}

.app,
.main,
.content,
main,
.planner,
.planner-shell,
.calendar-wrap,
.calendar-container,
.view-container{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

/* Le contenu général est un peu plus large et mieux centré */
.app,
.main,
.content{
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Planning visuellement plus important que le reste */
.planner,
.planner-shell,
.calendar-wrap,
.calendar-container{
  position:relative;
  z-index:2;
}

.planner-shell,
.calendar-wrap,
.calendar-container{
  background:#ffffff !important;
  border:1px solid #dce5de !important;
  border-radius:22px !important;
  box-shadow:0 18px 42px rgba(28,45,34,.10) !important;
  padding:12px !important;
}

/* Réduction des marges inutiles autour du planning */
.planner{
  margin-top:10px !important;
  margin-bottom:18px !important;
}

/* La zone principale prend davantage de largeur disponible */
main,
.main,
.content{
  padding-left:clamp(8px,1.2vw,18px) !important;
  padding-right:clamp(8px,1.2vw,18px) !important;
}

/* En-tête légèrement plus discret pour laisser le planning dominer */
.hero{
  margin-bottom:10px !important;
  box-shadow:0 10px 24px rgba(28,45,34,.07) !important;
}

/* Barre d'outils plus proche du planning */
.planner-toolbar,
.calendar-toolbar,
.toolbar{
  margin-bottom:8px !important;
  box-shadow:0 6px 16px rgba(28,45,34,.05) !important;
}

/* Evite qu'une grille dépasse à droite */
.week-grid,
.month-grid{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
}

/* Chaque colonne reste réellement contenue */
.week-grid > *,
.month-grid > *{
  min-width:0 !important;
  max-width:100% !important;
}

/* Empêche les cartes et boutons de provoquer un débordement */
.task,
.task.clean-card,
.task button,
.month-task,
.day,
.month-cell{
  max-width:100% !important;
  min-width:0 !important;
}

/* Les textes longs ne forcent plus la largeur */
.task-name-v216,
.compact-task-name,
.person-tag-v216,
.pill-category-v216,
.priority-badge-v216,
.last-done-v216,
.top-menu-item,
button{
  overflow-wrap:anywhere;
}

/* Suppression de toute marge droite parasite sur les menus flottants */
.top-menu-dropdown{
  right:0 !important;
  max-width:calc(100vw - 16px) !important;
}

/* Mobile / tablette */
@media(max-width:900px){
  .planner-shell,
  .calendar-wrap,
  .calendar-container{
    border-radius:16px !important;
    padding:8px !important;
  }

  main,
  .main,
  .content{
    padding-left:6px !important;
    padding-right:6px !important;
  }
}

@media(max-width:600px){
  .planner-shell,
  .calendar-wrap,
  .calendar-container{
    border-radius:12px !important;
    padding:5px !important;
  }

  .hero{
    margin-left:4px !important;
    margin-right:4px !important;
  }

  .planner,
  .planner-shell,
  .calendar-wrap,
  .calendar-container{
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* Le défilement reste actif, mais son rail blanc disparaît */
html,
body{
  scrollbar-width:none;
  -ms-overflow-style:none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  background:transparent !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track{
  background:transparent !important;
}

/* Page plus sobre : le planning doit être la zone dominante */
.app{
  width:min(1760px,100%) !important;
  max-width:100% !important;
  padding:10px clamp(8px,1vw,16px) 36px !important;
  margin:0 auto !important;
}

/* En-tête beaucoup moins imposant */
.hero{
  min-height:0 !important;
  padding:11px 14px !important;
  margin:0 0 7px !important;
  border-radius:15px !important;
  align-items:center !important;
  background:rgba(255,255,255,.88) !important;
  box-shadow:0 5px 14px rgba(28,45,34,.045) !important;
}

.hero h1{
  font-size:clamp(22px,2.2vw,31px) !important;
  line-height:1 !important;
  letter-spacing:-.035em !important;
}

.hero .subtitle{
  margin-top:4px !important;
  font-size:10px !important;
  line-height:1.25 !important;
  opacity:.72;
}

.hero-actions-v214{
  gap:6px !important;
}

.regenerate-main,
.top-menu-trigger{
  min-height:38px !important;
  padding:8px 12px !important;
  border-radius:11px !important;
  font-size:10.5px !important;
}

/* Navigation plus fine et plus proche du calendrier */
.toolbar{
  min-height:0 !important;
  margin:0 0 7px !important;
  padding:6px 8px !important;
  border-radius:13px !important;
  box-shadow:0 4px 11px rgba(28,45,34,.035) !important;
}

.view-btn{
  padding:7px 9px !important;
  font-size:9.5px !important;
}

.nav-btn{
  width:31px !important;
  height:31px !important;
  border-radius:8px !important;
  font-size:17px !important;
}

.date-label{
  min-width:170px !important;
  font-size:10.5px !important;
}

.today-btn{
  padding:7px 9px !important;
  font-size:9.5px !important;
}

/* Les statistiques deviennent une petite bande informative */
.stats{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:5px !important;
  margin:0 0 7px !important;
}

.stat{
  min-height:46px !important;
  padding:7px 9px !important;
  border-radius:10px !important;
  border-color:#e3e8e4 !important;
  background:rgba(255,255,255,.72) !important;
  box-shadow:none !important;
}

.stat strong{
  display:inline !important;
  font-size:15px !important;
  line-height:1 !important;
  margin-right:5px;
  color:#25352b !important;
}

.stat span{
  display:inline !important;
  font-size:8px !important;
  line-height:1.05 !important;
  color:#7b877f !important;
}

/* Le planning devient la grande carte principale */
.calendar-shell{
  width:100% !important;
  max-width:100% !important;
  padding:10px !important;
  border:1px solid #cedbd1 !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:
    0 18px 42px rgba(25,46,32,.11),
    0 2px 6px rgba(25,46,32,.04) !important;
  overflow:hidden !important;
}

#calendar{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

/* Colonnes plus nettes et planning visuellement plus dense */
.week-grid{
  gap:6px !important;
}

.week-grid .day{
  padding:6px !important;
  border-radius:12px !important;
  min-height:430px !important;
  background:#fdfefd !important;
}

.day-head{
  min-height:29px !important;
  padding-bottom:5px !important;
  margin-bottom:6px !important;
}

.day-head h3{
  font-size:11px !important;
}

.day-head small{
  font-size:8.5px !important;
}

/* Les tâches restent lisibles mais prennent moins le dessus que le planning */
.task.clean-card.compact-card{
  padding:7px !important;
  margin-bottom:5px !important;
  border-radius:11px !important;
  box-shadow:0 3px 8px rgba(29,44,35,.04) !important;
}

.compact-task-name{
  font-size:10.5px !important;
  line-height:1.08 !important;
}

.compact-time,
.compact-state-row .task-state-badge{
  font-size:7.5px !important;
}

.compact-info-lines .person-tag-v216,
.compact-info-lines .pill-category-v216,
.compact-info-lines .priority-badge-v216{
  font-size:7px !important;
}

.compact-last-done{
  font-size:7px !important;
}

.compact-actions .main-done-v216{
  min-height:31px !important;
  font-size:8.5px !important;
}

.compact-actions .secondary-actions-v216 .mini-btn{
  font-size:6.8px !important;
}

/* Pas de ligne blanche parasite à droite des panneaux ou du contenu */
.calendar-shell,
.week-grid,
.month-grid,
.day-view,
.side-panel,
.top-menu-dropdown{
  scrollbar-width:none !important;
}

.calendar-shell::-webkit-scrollbar,
.week-grid::-webkit-scrollbar,
.month-grid::-webkit-scrollbar,
.day-view::-webkit-scrollbar,
.side-panel::-webkit-scrollbar,
.top-menu-dropdown::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
}

/* Tablette et petite fenêtre : garder le planning prioritaire */
@media(max-width:900px){
  .app{
    padding:6px 6px 24px !important;
  }

  .hero{
    padding:9px 10px !important;
  }

  .hero h1{
    font-size:21px !important;
  }

  .stats{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:3px !important;
  }

  .stat{
    min-height:40px !important;
    padding:5px 6px !important;
  }

  .stat strong{
    font-size:13px !important;
  }

  .stat span{
    font-size:6.8px !important;
  }

  .calendar-shell{
    padding:6px !important;
    border-radius:14px !important;
  }
}

@media(max-width:600px){
  .hero{
    gap:7px !important;
  }

  .hero .subtitle{
    display:none !important;
  }

  .hero-actions-v214{
    width:auto !important;
    margin-left:auto !important;
  }

  .regenerate-main,
  .top-menu-trigger{
    min-height:34px !important;
    padding:6px 8px !important;
    font-size:8.5px !important;
  }

  .stats{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  }

  .stat{
    min-height:34px !important;
    padding:4px !important;
    text-align:center;
  }

  .stat strong{
    display:block !important;
    margin:0 !important;
    font-size:11px !important;
  }

  .stat span{
    display:block !important;
    margin-top:2px;
    font-size:5.8px !important;
  }

  .toolbar{
    margin-bottom:5px !important;
  }

  .calendar-shell{
    padding:4px !important;
  }
}

.stats{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
}

.stat strong{
  white-space:nowrap;
}


/* =========================================================
   Vue Jour — détails + lecture optimisée
   ========================================================= */

.day-view{
  grid-template-columns:minmax(170px,220px) minmax(0,1fr) !important;
  align-items:start;
  gap:12px !important;
}

.day-sidebar{
  position:sticky;
  top:8px;
  align-self:start;
}

.day-main{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:10px;
  align-items:start;
}

/* En vue Jour seulement, les cartes sont plus grandes et plus lisibles. */
.day-task-card{
  padding:12px 13px !important;
  border-left-width:7px !important;
  border-radius:16px !important;
  box-shadow:0 8px 20px rgba(29,44,35,.07) !important;
}

.day-task-card .task-top-accent{
  height:6px !important;
  margin-bottom:9px !important;
}

.day-task-card .compact-state-row{
  margin-bottom:8px !important;
}

.day-task-card .compact-time,
.day-task-card .task-state-badge{
  min-height:27px !important;
  padding:5px 10px !important;
  font-size:10px !important;
}

.day-task-card .compact-task-name{
  font-size:17px !important;
  line-height:1.16 !important;
  margin-bottom:8px !important;
  letter-spacing:-.015em;
}

.day-task-detail{
  margin:0 0 10px;
  padding:10px 11px;
  border:1px solid #e1e8e2;
  border-radius:11px;
  background:#f7faf7;
  color:#48564d;
  font-size:11px;
  line-height:1.45;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.day-task-card .compact-info-lines{
  gap:5px !important;
}

.day-task-card .person-tag-v216,
.day-task-card .pill-category-v216,
.day-task-card .priority-badge-v216{
  min-height:25px !important;
  padding:4px 8px !important;
  font-size:9.5px !important;
  border-radius:8px !important;
}

.day-task-card .compact-last-done{
  margin-top:8px !important;
  min-height:25px !important;
  padding:4px 8px !important;
  font-size:9.5px !important;
}

.day-task-card .compact-actions{
  margin-top:10px !important;
  gap:7px !important;
}

.day-task-card .main-done-v216{
  min-height:42px !important;
  font-size:11.5px !important;
  border-radius:11px !important;
}

.day-task-card .secondary-actions-v216 .mini-btn{
  min-height:30px !important;
  font-size:8.5px !important;
}

/* Champ détail */
#taskDetail,
#planningTaskDetail{
  resize:vertical;
  min-height:78px;
  line-height:1.4;
}

/* Sur tablette : une colonne de tâches, mais très lisible */
@media(max-width:900px){
  .day-view{
    grid-template-columns:1fr !important;
  }

  .day-sidebar{
    position:static;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:6px;
  }

  .day-main{
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  }
}

/* Sur téléphone : une carte pleine largeur */
@media(max-width:600px){
  .day-main{
    grid-template-columns:1fr;
    gap:8px;
  }

  .day-task-card{
    padding:11px !important;
  }

  .day-task-card .compact-task-name{
    font-size:15px !important;
  }

  .day-task-detail{
    font-size:10.5px;
    padding:9px 10px;
  }
}


/* ===== Affichage final : textes et vue Jour ===== */

/* 3) Textes globalement un peu plus grands */
body{
  font-size:15px !important;
}

.hero h1{
  font-size:clamp(24px,2.4vw,33px) !important;
}

.hero .subtitle{
  font-size:11px !important;
}

.regenerate-main,
.top-menu-trigger{
  font-size:12px !important;
}

.top-menu-item strong{
  font-size:12px !important;
}

.top-menu-item small{
  font-size:9px !important;
}

.toolbar,
.date-label,
.today-btn,
.view-btn{
  font-size:11px !important;
}

.stat strong{
  font-size:17px !important;
}

.stat span{
  font-size:9px !important;
}

.day-head h3{
  font-size:13px !important;
}

.day-head small{
  font-size:9.5px !important;
}

.compact-task-name{
  font-size:11.5px !important;
}

.compact-time,
.compact-state-row .task-state-badge{
  font-size:8.5px !important;
}

.compact-info-lines .person-tag-v216,
.compact-info-lines .pill-category-v216,
.compact-info-lines .priority-badge-v216{
  font-size:8px !important;
}

.compact-last-done{
  font-size:8px !important;
}

.compact-actions .main-done-v216{
  font-size:9.5px !important;
}

.compact-actions .secondary-actions-v216 .mini-btn{
  font-size:7.5px !important;
}

/* 4) Vue Jour : une tâche = une ligne */
.day-view{
  grid-template-columns:190px minmax(0,1fr) !important;
  gap:12px !important;
}

.day-main{
  display:flex !important;
  flex-direction:column !important;
  gap:7px !important;
  width:100% !important;
  min-width:0 !important;
}

.day-task-card{
  display:grid !important;
  grid-template-columns:
    84px
    minmax(180px,1.6fr)
    minmax(110px,.75fr)
    minmax(125px,.85fr)
    170px;
  grid-template-areas:
    "accent accent accent accent accent"
    "state title infos last actions";
  align-items:center !important;
  gap:7px 10px !important;

  width:100% !important;
  min-height:88px !important;
  padding:8px 10px !important;
  border-left-width:6px !important;
  border-radius:12px !important;
  box-shadow:0 4px 12px rgba(29,44,35,.055) !important;
}

.day-task-card .task-top-accent{
  grid-area:accent;
  height:4px !important;
  margin:0 !important;
}

.day-task-card .compact-state-row{
  grid-area:state;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:4px !important;
}

.day-task-card .compact-time,
.day-task-card .task-state-badge{
  font-size:10px !important;
  min-height:24px !important;
  padding:4px 8px !important;
}

.day-task-card .compact-task-name{
  grid-area:title;
  font-size:15px !important;
  line-height:1.15 !important;
  margin:0 !important;
}

.day-task-card .day-task-detail{
  grid-column:2;
  grid-row:3;
  margin:0 !important;
  padding:5px 7px !important;
  font-size:10px !important;
  line-height:1.3 !important;
  border-radius:8px !important;
  background:#f7faf7 !important;
}

/* Si détail présent, le titre et le détail restent groupés visuellement */
.day-task-card:has(.day-task-detail){
  grid-template-rows:4px auto auto;
  grid-template-areas:
    "accent accent accent accent accent"
    "state title infos last actions"
    ". detail infos last actions";
}

.day-task-card .compact-info-lines{
  grid-area:infos;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:4px !important;
  margin:0 !important;
}

.day-task-card .person-tag-v216,
.day-task-card .pill-category-v216,
.day-task-card .priority-badge-v216{
  min-height:22px !important;
  padding:3px 6px !important;
  font-size:9px !important;
}

.day-task-card .compact-last-done{
  grid-area:last;
  margin:0 !important;
  min-height:24px !important;
  padding:4px 7px !important;
  font-size:9px !important;
  align-self:center !important;
}

.day-task-card .compact-actions{
  grid-area:actions;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:5px !important;
}

.day-task-card .main-done-v216{
  width:100% !important;
  min-height:36px !important;
  font-size:10.5px !important;
}

.day-task-card .secondary-actions-v216{
  width:100% !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:4px !important;
}

.day-task-card .secondary-actions-v216 .mini-btn{
  min-height:26px !important;
  font-size:7.5px !important;
}

/* Barre d'ajout discrète sous la liste */
.day-main > .add-task,
.day-main > .day-add,
.day-main > button:last-child{
  width:100% !important;
  min-height:38px !important;
}

/* Tablette : toujours en lignes, avec actions sur la droite */
@media(max-width:1000px){
  .day-view{
    grid-template-columns:1fr !important;
  }

  .day-sidebar{
    position:static !important;
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
    gap:6px !important;
  }

  .day-task-card{
    grid-template-columns:75px minmax(150px,1.5fr) minmax(100px,.8fr) 145px;
    grid-template-areas:
      "accent accent accent accent"
      "state title infos actions"
      ". last infos actions";
  }

  .day-task-card .day-task-detail{
    grid-column:2;
    grid-row:3;
  }

  .day-task-card:has(.day-task-detail){
    grid-template-areas:
      "accent accent accent accent"
      "state title infos actions"
      ". detail infos actions"
      ". last infos actions";
  }
}

/* Téléphone : une ligne devient un bloc compact mais garde la logique en liste */
@media(max-width:650px){
  body{
    font-size:14px !important;
  }

  .day-task-card{
    grid-template-columns:72px minmax(0,1fr);
    grid-template-areas:
      "accent accent"
      "state title"
      "infos infos"
      "last last"
      "actions actions";
    gap:6px !important;
    min-height:0 !important;
  }

  .day-task-card:has(.day-task-detail){
    grid-template-areas:
      "accent accent"
      "state title"
      ". detail"
      "infos infos"
      "last last"
      "actions actions";
  }

  .day-task-card .day-task-detail{
    grid-column:2;
    grid-row:auto;
  }

  .day-task-card .compact-info-lines{
    flex-direction:row !important;
    flex-wrap:wrap !important;
  }

  .day-task-card .compact-actions{
    flex-direction:row !important;
    align-items:center !important;
  }

  .day-task-card .main-done-v216{
    flex:1 !important;
  }

  .day-task-card .secondary-actions-v216{
    flex:1 !important;
  }
}


/* Synchronisation "Dernière fois" :
   chaque occurrence terminée utilise sa propre date de planning. */


/* ===== Finition Planning Maison ===== */
:root{--pm-radius:14px;--pm-gap:8px}
.top-menu-dropdown{z-index:100!important}
.day-task-card{transition:box-shadow .15s ease,transform .15s ease}
.day-task-card:hover{box-shadow:0 7px 18px rgba(29,44,35,.08)!important}
.day-task-detail{border-left:3px solid var(--category-color)!important}
.task.clean-card.done{opacity:.82}
.task.clean-card.done .compact-task-name{text-decoration:none!important}
@media(max-width:900px){.stats{grid-template-columns:repeat(5,minmax(0,1fr))!important}}


/* =========================================================
   CORRECTION STRUCTURELLE — MENU PREMIER PLAN + LARGEUR SAINE
   ========================================================= */

html{
  width:100%;
  min-height:100%;
  overflow-x:clip !important;
  overflow-y:auto !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}

body{
  width:100%;
  min-height:100vh;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  overflow-x:clip !important;
  overflow-y:visible !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
  background:transparent !important;
}

/* L'application n'est plus un conteneur de scroll. */
.app,
.app:not(.hidden){
  position:relative !important;
  inset:auto !important;
  width:min(1760px,calc(100% - 16px)) !important;
  max-width:calc(100% - 16px) !important;
  height:auto !important;
  min-height:100vh !important;
  margin:0 auto !important;
  padding-right:0 !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}

/* Aucun composant principal ne doit pouvoir élargir la page. */
.hero,
.toolbar,
.stats,
.calendar-shell,
#calendar,
.week-grid,
.month-grid,
.day-view{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

.week-grid,
.month-grid{
  overflow-x:hidden !important;
}

/* Panneaux latéraux : restent fixes mais ne créent aucun débordement horizontal. */
.side-panel{
  max-width:96vw !important;
  overflow-x:hidden !important;
  scrollbar-width:none !important;
}
.side-panel::-webkit-scrollbar{display:none !important;}

/* Le menu est porté par body en JS : position fixe au-dessus de tout. */
.top-menu-dropdown{
  position:fixed !important;
  top:auto;
  right:auto;
  left:auto;
  width:238px !important;
  max-width:calc(100vw - 20px) !important;
  max-height:none !important;
  overflow:visible !important;
  z-index:2147483647 !important;
  transform-origin:top right !important;
  isolation:isolate;
}

.top-menu-dropdown.open{
  z-index:2147483647 !important;
}

.top-menu-item{
  min-height:42px !important;
  padding:7px 9px !important;
}

.top-menu-item strong{font-size:11px !important;}
.top-menu-item small{font-size:8px !important;}

/* Le calendrier reste sous la couche menu. */
.calendar-shell,
.week-grid,
.day,
.task,
.task.clean-card{
  position:relative;
  z-index:auto !important;
}

@media(max-width:700px){
  .app,
  .app:not(.hidden){
    width:calc(100% - 8px) !important;
    max-width:calc(100% - 8px) !important;
  }
  .top-menu-dropdown{width:218px !important;}
}


/* =========================================================
   Vue Mois — synchronisation complète avec Jour / Semaine
   ========================================================= */
.month-cell{
  align-content:start;
}

.month-task{
  display:flex !important;
  align-items:center;
  gap:4px;
  min-width:0;
  padding:4px 5px !important;
}

.month-task-status{
  flex:0 0 auto;
  font-weight:950;
  color:#247346;
}

.month-task-title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.month-task-done{
  opacity:.62;
  background:#f3f6f4 !important;
}

.month-task-done .month-task-title{
  text-decoration:line-through;
  text-decoration-thickness:1px;
}

.month-task-pending{
  opacity:1;
}


/* =========================================================
   CORRECTION DÉFINITIVE DE LA LARGEUR ET DU DÉFILEMENT
   ========================================================= */

/* Le navigateur lui-même ne défile plus. Ainsi Safari ne peut plus
   dessiner son rail de défilement blanc sur le bord de la fenêtre. */
html,
body{
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
  background:#eef3ef !important;
}

* , *::before, *::after{
  box-sizing:border-box;
}

/* Chaque écran actif devient la zone de défilement. Elle dépasse
   volontairement de 24 px à droite : le rail natif se trouve donc
   physiquement hors de la fenêtre et ne peut pas être visible. */
#authScreen:not(.hidden),
#setupScreen:not(.hidden),
#appScreen:not(.hidden){
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:auto !important;
  bottom:auto !important;
  width:calc(100% + 24px) !important;
  max-width:none !important;
  height:100dvh !important;
  min-height:0 !important;
  margin:0 !important;
  padding-right:24px !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
  overscroll-behavior:none;
  -webkit-overflow-scrolling:touch;
}

#authScreen:not(.hidden)::-webkit-scrollbar,
#setupScreen:not(.hidden)::-webkit-scrollbar,
#appScreen:not(.hidden)::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
  background:transparent !important;
}

/* L'espace utile visible correspond exactement à la largeur de l'écran. */
#appScreen:not(.hidden){
  padding-left:clamp(6px,1vw,14px) !important;
  padding-top:8px !important;
  padding-bottom:32px !important;
}

#appScreen > .hero,
#appScreen > .toolbar,
#appScreen > .stats,
#appScreen > .calendar-shell{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Aucun calendrier ne peut fabriquer une largeur de page supplémentaire. */
.calendar-shell,
#calendar,
.week-grid,
.month-grid,
.day-view,
.day-main,
.day,
.month-cell,
.task{
  max-width:100% !important;
  min-width:0 !important;
}

/* Les panneaux latéraux sont cachés avec transform au lieu de right:-700px.
   Cela évite qu'un panneau fermé puisse participer à une largeur fantôme. */
.side-panel{
  right:0 !important;
  left:auto !important;
  transform:translate3d(105%,0,0) !important;
  transition:transform .25s ease !important;
  max-width:min(660px,96vw) !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  scrollbar-width:none !important;
  z-index:1000000 !important;
}
.side-panel.open{
  right:0 !important;
  transform:translate3d(0,0,0) !important;
}
.side-panel::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}

.overlay{
  z-index:999999 !important;
}

/* Menu : couche indépendante, toujours au-dessus de tout le planning. */
.top-menu-dropdown{
  position:fixed !important;
  width:238px !important;
  max-width:calc(100% - 20px) !important;
  max-height:calc(100dvh - 20px) !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  z-index:2147483647 !important;
  isolation:isolate !important;
  scrollbar-width:none !important;
}
.top-menu-dropdown::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}
.top-menu-dropdown.open{
  z-index:2147483647 !important;
}

/* Aucune couche du planning ne doit créer un contexte au-dessus du menu. */
.calendar-shell,
#calendar,
.week-grid,
.month-grid,
.day-view,
.day,
.month-cell,
.task,
.task.clean-card{
  z-index:auto !important;
}

@media(max-width:700px){
  #appScreen:not(.hidden){
    padding-left:4px !important;
    padding-top:4px !important;
  }
  .top-menu-dropdown{width:218px !important;}
}


/* =========================================================
   DESIGN CLIENT — hiérarchie visuelle et lisibilité
   Base fonctionnelle inchangée
   ========================================================= */

:root{
  --client-ink:#172219;
  --client-muted:#718078;
  --client-line:#dfe7e1;
  --client-soft:#f5f8f5;
  --client-surface:#ffffff;
  --client-green:#2f7553;
  --client-green-dark:#245d42;
  --client-shadow:0 12px 34px rgba(27,45,34,.08);
}

/* 1. Le planning devient la zone la plus importante */
#appScreen:not(.hidden){
  background:
    radial-gradient(circle at 12% 0%, rgba(67,119,87,.055), transparent 24%),
    #f2f5f2 !important;
}

.hero{
  padding:12px 15px !important;
  min-height:auto !important;
  border-radius:16px !important;
  box-shadow:0 5px 16px rgba(27,45,34,.045) !important;
  border:1px solid rgba(214,225,217,.85) !important;
}

.hero .eyebrow{
  font-size:8px !important;
  letter-spacing:.19em !important;
  margin-bottom:3px !important;
  color:#7d8c82 !important;
}

.hero h1{
  font-size:clamp(24px,2.4vw,33px) !important;
  line-height:1 !important;
  letter-spacing:-.04em !important;
}

.hero .subtitle{
  font-size:9px !important;
  margin-top:5px !important;
  color:#869188 !important;
}

/* Bouton d'action principal identifiable, menu secondaire plus discret */
.regenerate-main{
  min-height:40px !important;
  padding:8px 14px !important;
  border-radius:12px !important;
  background:linear-gradient(180deg,#397f5d,#2f7553) !important;
  box-shadow:0 7px 16px rgba(47,117,83,.17) !important;
  font-size:10.5px !important;
}

.top-menu-trigger{
  min-height:40px !important;
  padding:8px 13px !important;
  border-radius:12px !important;
  background:#f5f8f5 !important;
  border-color:#dce4de !important;
  color:#425149 !important;
  font-size:10.5px !important;
}

/* 2. Navigation pensée comme une barre d'outil, pas comme un gros panneau */
.toolbar{
  min-height:46px !important;
  padding:5px 8px !important;
  margin:7px 0 6px !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.86) !important;
  box-shadow:0 4px 13px rgba(27,45,34,.035) !important;
}

.view-tabs{
  background:#eef3ef !important;
  padding:3px !important;
  border-radius:10px !important;
}

.view-btn{
  min-height:31px !important;
  border-radius:8px !important;
  font-size:9px !important;
  font-weight:850 !important;
}

.view-btn.active{
  background:#fff !important;
  color:#214e37 !important;
  box-shadow:0 2px 7px rgba(27,45,34,.09) !important;
}

.date-label{
  font-weight:900 !important;
  color:#27362c !important;
}

.today-btn{
  background:#fff !important;
  color:#42604d !important;
}

/* 3. Résumé moins envahissant : on lit l'information, puis le planning */
.stats{
  gap:5px !important;
  margin-bottom:7px !important;
}

.stat{
  min-height:48px !important;
  padding:7px 10px !important;
  border-radius:11px !important;
  background:rgba(255,255,255,.78) !important;
  border:1px solid #e1e7e2 !important;
  box-shadow:none !important;
}

.stat strong{
  font-size:17px !important;
  color:#233229 !important;
  letter-spacing:-.025em !important;
}

.stat span{
  font-size:7.5px !important;
  color:#89938c !important;
}

/* Le niveau d'organisation est informatif, pas un KPI */
.stat:last-child{
  background:#eef4ef !important;
  border-color:#d8e3da !important;
}

.stat:last-child strong{
  color:#42604d !important;
  font-size:13px !important;
}

/* 4. La grande surface du calendrier est le "produit" */
.calendar-shell{
  position:relative;
  padding:9px !important;
  border-radius:18px !important;
  border:1px solid #d5e0d8 !important;
  background:#fbfdfb !important;
  box-shadow:var(--client-shadow) !important;
}

/* 5. Colonnes des jours : structure plus calme */
.week-grid{
  gap:6px !important;
}

.week-grid .day{
  border:1px solid #e2e8e3 !important;
  border-radius:13px !important;
  background:#fff !important;
  padding:6px !important;
  box-shadow:none !important;
}

.week-grid .day.weekend{
  background:#fffaf3 !important;
  border-color:#eadfc8 !important;
}

.week-grid .day.today-day{
  border-color:#78a48a !important;
  box-shadow:inset 0 0 0 1px rgba(47,117,83,.28) !important;
}

.day-head{
  min-height:31px !important;
  border-bottom:1px solid #edf1ee !important;
  margin-bottom:6px !important;
}

.day-head h3{
  font-size:10.5px !important;
  color:#314239 !important;
}

.day-head small{
  font-size:8px !important;
  color:#7c8a81 !important;
}

/* 6. Cartes : une information = un rôle visuel */
.task.clean-card.compact-card{
  border:1px solid #e1e7e2 !important;
  border-left:5px solid var(--person-color) !important;
  border-radius:11px !important;
  background:#fff !important;
  padding:7px !important;
  margin-bottom:6px !important;
  box-shadow:0 3px 8px rgba(27,45,34,.035) !important;
}

.task.clean-card.compact-card:hover{
  transform:none !important;
  box-shadow:0 6px 14px rgba(27,45,34,.07) !important;
}

.task-top-accent{
  height:3px !important;
  opacity:.72 !important;
}

/* Nom = information dominante */
.compact-task-name{
  font-size:10.5px !important;
  line-height:1.12 !important;
  font-weight:950 !important;
  color:#1b261f !important;
  margin-bottom:6px !important;
}

/* Temps + état : petits repères */
.compact-time,
.task-state-badge{
  min-height:20px !important;
  padding:2px 6px !important;
  font-size:6.8px !important;
  border-radius:7px !important;
}

.state-pending{
  background:#fff9eb !important;
  border-color:#ecd69d !important;
  color:#906717 !important;
}

.state-done{
  background:#edf6f0 !important;
  border-color:#b7d6c1 !important;
  color:#397150 !important;
}

/* Personne lisible, catégorie secondaire */
.person-tag-v216{
  background:color-mix(in srgb,var(--person-color) 8%,white) !important;
  border-color:color-mix(in srgb,var(--person-color) 24%,white) !important;
  color:#39463e !important;
}

.pill-category-v216{
  background:#f7f8f7 !important;
  border-color:#e3e7e4 !important;
  color:#657168 !important;
}

.person-tag-v216,
.pill-category-v216,
.priority-badge-v216{
  min-height:18px !important;
  padding:2px 5px !important;
  font-size:6.6px !important;
}

/* Priorité 3 s'efface ; 2 et 1 deviennent réellement remarquables */
.priority-badge-v216.priority-3{
  background:#f7f8f7 !important;
  color:#939b95 !important;
  border-color:#e2e6e3 !important;
}

.priority-badge-v216.priority-2{
  background:#fff5df !important;
  color:#97610a !important;
  border-color:#e6bc70 !important;
  font-weight:950 !important;
}

.priority-badge-v216.priority-1{
  background:#ffeded !important;
  color:#a12525 !important;
  border-color:#e78c8c !important;
  font-weight:950 !important;
}

/* "Dernière fois" devient une métadonnée, pas un badge concurrent */
.compact-last-done{
  border:0 !important;
  background:transparent !important;
  padding:2px 1px !important;
  color:#8a948d !important;
  font-size:6.5px !important;
}

/* Boutons : une seule action forte */
.main-done-v216{
  min-height:31px !important;
  border-radius:9px !important;
  background:#3d8a61 !important;
  border-color:#347653 !important;
  box-shadow:none !important;
  font-size:8px !important;
}

.secondary-actions-v216 .mini-btn{
  min-height:22px !important;
  background:#fafbfa !important;
  color:#7b857e !important;
  border-color:#e5e8e6 !important;
  font-size:6px !important;
}

.secondary-actions-v216 .delete-plan{
  color:#a06a6a !important;
  background:#fffafa !important;
}

/* Carte terminée : reconnaissable sans devenir illisible */
.task.clean-card.done{
  background:#fafcfb !important;
  opacity:.78;
}

.task.clean-card.done .compact-task-name{
  color:#59645d !important;
}

/* 7. Menu : plus "produit fini" */
.top-menu-dropdown{
  border-radius:14px !important;
  padding:6px !important;
  box-shadow:0 20px 46px rgba(24,41,31,.16) !important;
}

.top-menu-item{
  min-height:43px !important;
  border-radius:9px !important;
}

.top-menu-item > span:first-child{
  background:#f0f4f1 !important;
}

/* 8. Mobile : préserver le sens avant la densité */
@media(max-width:700px){
  .hero h1{
    font-size:21px !important;
  }

  .stats{
    gap:3px !important;
  }

  .stat{
    min-height:40px !important;
    padding:5px !important;
  }

  .stat strong{
    font-size:12px !important;
  }

  .stat span{
    font-size:5.8px !important;
  }

  .calendar-shell{
    padding:4px !important;
    border-radius:13px !important;
  }
}


/* =========================================================
   MENUS HARMONISÉS — Foyer / Rythmes / Tâches / Couleurs
   ========================================================= */

:root{
  --panel-width:600px;
  --panel-bg:#f5f8f5;
  --panel-card:#ffffff;
  --panel-line:#dfe7e1;
  --panel-line-strong:#d3ddd5;
  --panel-text:#1c2920;
  --panel-muted:#77837b;
  --panel-green:#2f7553;
  --panel-green-soft:#edf5ef;
  --panel-radius:20px;
  --panel-card-radius:14px;
  --panel-shadow:-22px 0 52px rgba(26,43,32,.16);
}

/* Les quatre fenêtres ont exactement la même géométrie. */
.side-panel.unified-panel{
  width:min(var(--panel-width),96vw) !important;
  max-width:min(var(--panel-width),96vw) !important;
  height:100dvh !important;
  padding:0 !important;
  background:var(--panel-bg) !important;
  border-left:1px solid var(--panel-line-strong) !important;
  box-shadow:var(--panel-shadow) !important;
  color:var(--panel-text) !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
}

/* En-tête commun, toujours visible pendant le défilement. */
.unified-panel > .panel-head{
  position:sticky !important;
  top:0 !important;
  z-index:12 !important;
  min-height:84px !important;
  margin:0 !important;
  padding:17px 20px 14px !important;
  background:rgba(255,255,255,.96) !important;
  border-bottom:1px solid var(--panel-line) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.unified-panel .panel-head > div{
  min-width:0;
}

.unified-panel .panel-head .eyebrow{
  margin:0 0 3px !important;
  color:#87938b !important;
  font-size:8px !important;
  font-weight:950 !important;
  letter-spacing:.18em !important;
  line-height:1 !important;
}

.unified-panel .panel-head h2{
  margin:0 !important;
  color:#1b2820 !important;
  font-size:23px !important;
  line-height:1.05 !important;
  letter-spacing:-.035em !important;
  font-weight:950 !important;
}

/* Même bouton fermer partout. */
.unified-panel .close{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  border:1px solid #dfe6e1 !important;
  border-radius:11px !important;
  background:#f4f7f4 !important;
  color:#59675e !important;
  font-size:21px !important;
  line-height:1 !important;
  cursor:pointer;
  transition:background .14s ease, transform .14s ease;
}

.unified-panel .close:hover{
  background:#eaf1ec !important;
  transform:translateY(-1px);
}

/* Intro commune */
.unified-panel > .unified-panel-intro{
  margin:0 !important;
  padding:14px 20px 12px !important;
  color:var(--panel-muted) !important;
  font-size:10.5px !important;
  line-height:1.48 !important;
  background:#f8faf8 !important;
  border-bottom:1px solid #e8ede9 !important;
}

/* Contenu : rythme vertical commun */
.unified-panel > .household-section,
.unified-panel > .person-list,
.unified-panel > .library-list,
.unified-panel > .color-list,
.unified-panel > .priority-editor,
.unified-panel > h3,
.unified-panel > .panel-tools,
.unified-panel > .btn.full{
  margin-left:18px !important;
  margin-right:18px !important;
}

/* Les sections du foyer deviennent le modèle visuel de référence. */
.unified-panel .household-section{
  margin-top:12px !important;
  padding:14px !important;
  background:var(--panel-card) !important;
  border:1px solid var(--panel-line) !important;
  border-radius:var(--panel-card-radius) !important;
  box-shadow:0 4px 12px rgba(28,44,34,.035) !important;
}

.unified-panel .household-section h3,
.unified-panel > h3{
  margin:0 0 10px !important;
  color:#344239 !important;
  font-size:11px !important;
  line-height:1.1 !important;
  font-weight:950 !important;
  letter-spacing:.01em !important;
}

/* Les titres libres du panneau Couleurs prennent la même forme qu'une section. */
#colorsPanel > h3{
  margin-top:12px !important;
  padding:12px 14px 0 !important;
  background:#fff !important;
  border:1px solid var(--panel-line) !important;
  border-bottom:0 !important;
  border-radius:var(--panel-card-radius) var(--panel-card-radius) 0 0 !important;
}

#colorsPanel > h3 + .unified-panel-intro{
  margin:0 18px !important;
  padding:3px 14px 10px !important;
  background:#fff !important;
  border-left:1px solid var(--panel-line) !important;
  border-right:1px solid var(--panel-line) !important;
  border-bottom:0 !important;
}

/* Listes de couleurs dans la même carte. */
#colorsPanel > .color-list,
#colorsPanel > .priority-editor{
  margin-top:0 !important;
  padding:4px 14px 14px !important;
  background:#fff !important;
  border:1px solid var(--panel-line) !important;
  border-top:0 !important;
  border-radius:0 0 var(--panel-card-radius) var(--panel-card-radius) !important;
  box-shadow:0 4px 12px rgba(28,44,34,.035) !important;
}

/* Barre de recherche / ajout de tâches */
.unified-panel .panel-tools{
  margin-top:12px !important;
  margin-bottom:10px !important;
  padding:10px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:7px !important;
  background:#fff !important;
  border:1px solid var(--panel-line) !important;
  border-radius:12px !important;
}

/* Champs communs */
.unified-panel input:not([type="checkbox"]):not([type="color"]),
.unified-panel select,
.unified-panel textarea{
  min-height:40px !important;
  width:100% !important;
  padding:8px 10px !important;
  border:1px solid #d9e2db !important;
  border-radius:10px !important;
  background:#fff !important;
  color:#253329 !important;
  font-size:10px !important;
  box-shadow:none !important;
}

.unified-panel textarea{
  min-height:78px !important;
  line-height:1.4 !important;
}

.unified-panel input:focus,
.unified-panel select:focus,
.unified-panel textarea:focus{
  border-color:#8cab97 !important;
  box-shadow:0 0 0 3px rgba(47,117,83,.09) !important;
  outline:none !important;
}

.unified-panel label{
  color:#536158 !important;
  font-size:9px !important;
  font-weight:850 !important;
  line-height:1.25 !important;
}

/* Grilles de formulaire identiques */
.unified-panel .form-grid{
  gap:9px !important;
}

/* Toggles uniformes */
.unified-panel .toggle-list{
  display:grid !important;
  gap:6px !important;
  margin-top:9px !important;
}

.unified-panel .toggle-row{
  min-height:39px !important;
  padding:8px 10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  background:#f8faf8 !important;
  border:1px solid #e4e9e5 !important;
  border-radius:10px !important;
  color:#45534a !important;
  font-size:9.5px !important;
}

/* Rythmes : chaque personne a la même carte qu'une section Foyer */
.unified-panel .person-list{
  margin-top:12px !important;
  display:grid !important;
  gap:9px !important;
}

.unified-panel .person-card{
  padding:13px !important;
  background:#fff !important;
  border:1px solid var(--panel-line) !important;
  border-radius:var(--panel-card-radius) !important;
  box-shadow:0 4px 12px rgba(28,44,34,.035) !important;
}

/* Bibliothèque : lignes cohérentes avec les cartes des personnes. */
.unified-panel .library-list{
  display:grid !important;
  gap:7px !important;
  padding-bottom:16px !important;
}

.unified-panel .library-item{
  min-height:62px !important;
  padding:10px 11px !important;
  align-items:center !important;
  background:#fff !important;
  border:1px solid var(--panel-line) !important;
  border-radius:12px !important;
  box-shadow:none !important;
}

.unified-panel .library-item strong{
  color:#26352b !important;
  font-size:10.5px !important;
}

.unified-panel .library-item small{
  color:#869188 !important;
  font-size:8px !important;
  line-height:1.35 !important;
}

/* Couleurs : lignes compactes et régulières */
.unified-panel .color-list{
  display:grid !important;
  gap:6px !important;
}

.unified-panel .color-list label,
.unified-panel .priority-editor label{
  min-height:43px !important;
  padding:7px 9px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  background:#f8faf8 !important;
  border:1px solid #e4e9e5 !important;
  border-radius:10px !important;
}

.unified-panel input[type="color"]{
  width:42px !important;
  height:30px !important;
  padding:2px !important;
  border:1px solid #d8e0da !important;
  border-radius:8px !important;
  background:#fff !important;
}

/* Tous les boutons des panneaux utilisent les mêmes proportions. */
.unified-panel .btn{
  min-height:39px !important;
  padding:8px 12px !important;
  border-radius:10px !important;
  font-size:9.5px !important;
  font-weight:950 !important;
}

.unified-panel .btn.primary{
  background:linear-gradient(180deg,#397f5d,#2f7553) !important;
  border-color:#2a694a !important;
  color:#fff !important;
  box-shadow:0 6px 14px rgba(47,117,83,.13) !important;
}

.unified-panel .btn.soft,
.unified-panel .btn.ghost{
  background:#f5f8f5 !important;
  border:1px solid #dde5df !important;
  color:#536158 !important;
  box-shadow:none !important;
}

.unified-panel > .btn.full{
  width:calc(100% - 36px) !important;
  margin-top:10px !important;
}

/* Barre d'actions identique, collée en bas pour Foyer/Rythmes/Couleurs */
.unified-panel .panel-actions{
  position:sticky !important;
  bottom:0 !important;
  z-index:10 !important;
  margin:14px 0 0 !important;
  padding:11px 18px 14px !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:7px !important;
  background:rgba(255,255,255,.97) !important;
  border-top:1px solid var(--panel-line) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.unified-panel .panel-actions .btn{
  min-width:128px !important;
}

/* Foyer : ancien sticky spécifique neutralisé, car tous utilisent le même système. */
.unified-panel .sticky-panel-actions{
  position:sticky !important;
}

/* Petits textes secondaires */
.unified-panel .household-hint{
  margin:8px 0 0 !important;
  padding:8px 9px !important;
  border-radius:9px !important;
  background:#f4f7f4 !important;
  color:#7c8880 !important;
  font-size:8.5px !important;
  line-height:1.4 !important;
}

/* Scroll visuellement absent sur les quatre fenêtres */
.side-panel.unified-panel{
  scrollbar-width:none !important;
}
.side-panel.unified-panel::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}

/* Mobile / tablette : même logique pour les quatre panneaux */
@media(max-width:700px){
  .side-panel.unified-panel{
    width:100vw !important;
    max-width:100vw !important;
    border-left:0 !important;
  }

  .unified-panel > .panel-head{
    min-height:72px !important;
    padding:13px 14px 11px !important;
  }

  .unified-panel .panel-head h2{
    font-size:20px !important;
  }

  .unified-panel > .unified-panel-intro{
    padding:11px 14px !important;
    font-size:10px !important;
  }

  .unified-panel > .household-section,
  .unified-panel > .person-list,
  .unified-panel > .library-list,
  .unified-panel > .color-list,
  .unified-panel > .priority-editor,
  .unified-panel > h3,
  .unified-panel > .panel-tools,
  .unified-panel > .btn.full{
    margin-left:12px !important;
    margin-right:12px !important;
  }

  #colorsPanel > h3 + .unified-panel-intro{
    margin-left:12px !important;
    margin-right:12px !important;
  }

  .unified-panel .household-section,
  .unified-panel .person-card{
    padding:11px !important;
    border-radius:12px !important;
  }

  .unified-panel .panel-actions{
    padding:9px 12px 12px !important;
  }

  .unified-panel .panel-actions .btn{
    flex:1 1 auto;
    min-width:0 !important;
  }
}


/* =========================================================
   MENUS PREMIUM ORIENTÉS AGENDA
   ========================================================= */

#overlay{
  position:fixed !important;
  inset:0 !important;
  background:rgba(17,29,22,.22) !important;
  backdrop-filter:blur(8px) saturate(120%);
  -webkit-backdrop-filter:blur(8px) saturate(120%);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
  z-index:118 !important;
}
#overlay.show{opacity:1;pointer-events:auto;}

#householdPanel{--menu-accent:#4ea772;--menu-accent-soft:#edf8f0;--menu-accent-line:#d6eadc;}
#peoplePanel{--menu-accent:#5d84f4;--menu-accent-soft:#eef2ff;--menu-accent-line:#dde5ff;}
#libraryPanel{--menu-accent:#e4a93a;--menu-accent-soft:#fff6e4;--menu-accent-line:#f1dfb2;}
#colorsPanel{--menu-accent:#d66aa9;--menu-accent-soft:#fff0f7;--menu-accent-line:#f3d4e7;}

.side-panel.unified-panel{
  left:50% !important;
  right:auto !important;
  top:24px !important;
  width:min(980px, calc(100vw - 48px)) !important;
  max-width:min(980px, calc(100vw - 48px)) !important;
  height:auto !important;
  max-height:calc(100dvh - 48px) !important;
  padding:0 !important;
  border-radius:30px !important;
  border:1px solid #dce6de !important;
  background:linear-gradient(180deg,#ffffff 0%,#f7faf7 100%) !important;
  box-shadow:0 26px 86px rgba(20,39,29,.19) !important;
  transform:translate(-50%,18px) scale(.985) !important;
  opacity:0 !important;
  pointer-events:none !important;
  overflow:auto !important;
  z-index:120 !important;
  scrollbar-width:none !important;
}
.side-panel.unified-panel.open{
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translate(-50%,0) scale(1) !important;
}
.side-panel.unified-panel::-webkit-scrollbar{display:none !important;width:0 !important;height:0 !important;}

.side-panel.unified-panel > .panel-head{
  position:sticky !important;
  top:0 !important;
  z-index:5 !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:16px !important;
  margin:0 !important;
  padding:24px 26px 16px !important;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.95), rgba(255,255,255,.72) 38%, rgba(255,255,255,.95) 62%),
    linear-gradient(135deg,var(--menu-accent-soft) 0%, #fff 56%, #f7faf7 100%) !important;
  border-bottom:1px solid #edf1ed !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.side-panel.unified-panel .panel-head > div{display:grid !important;gap:6px !important;min-width:0;}
.side-panel.unified-panel .panel-head .eyebrow{
  margin:0 !important;
  font-size:10px !important;
  line-height:1 !important;
  letter-spacing:.28em !important;
  font-weight:900 !important;
  color:color-mix(in srgb, var(--menu-accent) 68%, #304636) !important;
}
.side-panel.unified-panel .panel-head h2{
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  font-size:42px !important;
  line-height:1 !important;
  letter-spacing:-.055em !important;
  font-weight:950 !important;
  color:#1a2820 !important;
}
.side-panel.unified-panel .panel-head h2::before{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:18px;
  font-size:25px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--menu-accent) 24%, transparent), 0 8px 18px rgba(22,37,28,.08);
  background:linear-gradient(180deg,#fff, var(--menu-accent-soft));
  color:var(--menu-accent);
}
#householdPanel .panel-head h2::before{content:"🏠";}
#peoplePanel .panel-head h2::before{content:"👥";}
#libraryPanel .panel-head h2::before{content:"🗂";}
#colorsPanel .panel-head h2::before{content:"🎨";}

.side-panel.unified-panel .close{
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  border-radius:16px !important;
  border:1px solid #e3e9e4 !important;
  background:rgba(255,255,255,.9) !important;
  color:#7a887f !important;
  box-shadow:0 6px 14px rgba(25,40,30,.05) !important;
}
.side-panel.unified-panel .close:hover{background:#fff !important;color:#506055 !important;}

.side-panel.unified-panel > .unified-panel-intro{
  margin:14px 26px 0 !important;
  padding:15px 18px !important;
  border:1px solid color-mix(in srgb, var(--menu-accent) 14%, #e5ece6) !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,#fff, color-mix(in srgb, var(--menu-accent-soft) 55%, #fff)) !important;
  color:#607066 !important;
  font-size:14px !important;
  line-height:1.55 !important;
}

.panel-meta-row{
  margin:12px 26px 0 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
}
.panel-meta-chip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:34px !important;
  padding:0 14px !important;
  border-radius:999px !important;
  background:var(--menu-accent-soft) !important;
  border:1px solid color-mix(in srgb, var(--menu-accent) 18%, #dfe8e2) !important;
  color:color-mix(in srgb, var(--menu-accent) 78%, #4b5a50) !important;
  font-size:12px !important;
  font-weight:850 !important;
}

.unified-panel > .household-section,
.unified-panel > .person-list,
.unified-panel > .library-list,
.unified-panel > .color-list,
.unified-panel > .priority-editor,
.unified-panel > h3,
.unified-panel > .panel-tools,
.unified-panel > .btn.full{
  margin-left:26px !important;
  margin-right:26px !important;
}

.unified-panel .household-section,
.unified-panel .person-card,
.unified-panel .library-item,
#colorsPanel > .color-list,
#colorsPanel > .priority-editor,
.unified-panel .panel-tools{
  background:#fff !important;
  border:1px solid #e3ebe5 !important;
  border-radius:22px !important;
  box-shadow:0 10px 22px rgba(27,42,31,.045) !important;
}

.unified-panel .household-section{
  margin-top:14px !important;
  padding:18px 18px 16px !important;
  position:relative;
}
.unified-panel .household-section::before,
.unified-panel .person-card::before,
.unified-panel .library-item::before,
#colorsPanel > .color-list::before,
#colorsPanel > .priority-editor::before{
  content:"";
  position:absolute;
  left:0;
  top:18px;
  bottom:18px;
  width:5px;
  border-radius:0 999px 999px 0;
  background:linear-gradient(180deg,var(--menu-accent), color-mix(in srgb, var(--menu-accent) 24%, #fff));
  opacity:.95;
}
.unified-panel .household-section h3,
.unified-panel > h3{
  margin:0 0 14px !important;
  font-size:18px !important;
  letter-spacing:-.02em !important;
  color:#243229 !important;
}

.unified-panel .form-grid{gap:14px !important;}
.unified-panel label{font-size:12px !important; color:#57665c !important; font-weight:850 !important;}
.unified-panel input:not([type="checkbox"]):not([type="color"]),
.unified-panel select,
.unified-panel textarea{
  min-height:48px !important;
  padding:12px 14px !important;
  border-radius:14px !important;
  border:1px solid #dce5de !important;
  background:#fbfdfb !important;
  font-size:15px !important;
}
.unified-panel textarea{min-height:98px !important;}
.unified-panel input:focus,
.unified-panel select:focus,
.unified-panel textarea:focus{box-shadow:0 0 0 4px color-mix(in srgb, var(--menu-accent) 12%, transparent) !important;border-color:color-mix(in srgb, var(--menu-accent) 44%, #cfe0d3) !important;}

.unified-panel .toggle-row{
  min-height:48px !important;
  padding:12px 14px !important;
  border-radius:14px !important;
  background:#f8faf8 !important;
}
.unified-panel input[type="checkbox"]{accent-color:var(--menu-accent); transform:scale(1.1);} 

.household-people-summary{display:grid !important;gap:10px !important;}
.household-person-row{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:10px !important;
  padding:12px 14px !important;
  border-radius:14px !important;
  background:#f8faf8 !important;
  border:1px solid #e7ede8 !important;
}
.household-person-main{display:flex !important;align-items:center !important;gap:10px !important;}
.household-person-main strong{display:block;font-size:15px;color:#243229;}
.household-person-main small{display:block;font-size:12px;color:#879288;}
.household-person-row > small{font-size:12px !important;color:#5f6f65 !important;font-weight:800 !important;padding:6px 10px;border-radius:999px;background:#fff;border:1px solid #e5ebe6;}
.person-color-preview{width:14px !important;height:14px !important;border-radius:50% !important;box-shadow:0 0 0 4px rgba(255,255,255,.95), 0 0 0 5px rgba(0,0,0,.04);}

.unified-panel .person-list{display:grid !important;gap:14px !important;margin-top:14px !important;padding-bottom:4px !important;}
.unified-panel .person-card{position:relative;padding:18px 18px 16px 20px !important;overflow:hidden;}
.unified-panel .person-card::after{
  content:"";
  position:absolute;inset:auto -60px -56px auto;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--menu-accent-soft) 72%, #fff) 0%, rgba(255,255,255,0) 70%);
  pointer-events:none;
}
.unified-panel .person-card-head{display:flex !important;justify-content:space-between !important;align-items:flex-start !important;gap:14px !important;margin-bottom:14px !important;}
.unified-panel .person-card-head h3{font-size:24px !important;line-height:1.05 !important;color:#213027 !important;}
.unified-panel .person-card-head > span{
  padding:8px 12px !important;
  border-radius:999px !important;
  background:var(--menu-accent-soft) !important;
  border:1px solid color-mix(in srgb, var(--menu-accent) 20%, #e3ebe4) !important;
  color:color-mix(in srgb, var(--menu-accent) 65%, #49584e) !important;
  font-size:12px !important;
  font-weight:850 !important;
}
.unified-panel .schedule-grid{gap:12px !important;margin-top:0 !important;}
.unified-panel .weekday-row{margin-top:14px !important;gap:8px !important;}
.unified-panel .weekday-toggle{padding:8px 12px !important;border-radius:999px !important;font-size:12px !important;font-weight:800 !important;background:#fff !important;}
.unified-panel .weekday-toggle.active{background:var(--menu-accent) !important;border-color:var(--menu-accent) !important;color:#fff !important;box-shadow:0 8px 16px color-mix(in srgb, var(--menu-accent) 22%, transparent) !important;}
.unified-panel .period-row{grid-template-columns:1fr 1fr 1.2fr auto !important;gap:8px !important;margin-top:8px !important;}
.unified-panel .period-row input,.unified-panel .period-row select{border-radius:12px !important;min-height:42px !important;background:#fbfdfb !important;}
.unified-panel .period-row button{width:42px;height:42px;border-radius:12px !important;}
.mini-btn.add-period{margin-top:12px !important;min-height:42px !important;border-radius:12px !important;padding:0 14px !important;background:var(--menu-accent-soft) !important;color:color-mix(in srgb, var(--menu-accent) 68%, #4d5d52) !important;border:1px dashed color-mix(in srgb, var(--menu-accent) 24%, #d7e2da) !important;font-weight:850 !important;}

#libraryPanel .panel-tools{
  margin-top:14px !important;
  padding:12px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:10px !important;
}
#libraryPanel .library-list{display:grid !important;gap:12px !important;margin-top:14px !important;padding-bottom:22px !important;}
#libraryPanel .library-item{
  position:relative;
  padding:18px 18px 16px 22px !important;
  align-items:flex-start !important;
  min-height:96px !important;
}
#libraryPanel .library-item strong{font-size:22px !important;line-height:1.08 !important;letter-spacing:-.03em !important;display:flex;align-items:center;gap:10px;}
#libraryPanel .library-item strong::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--menu-accent);box-shadow:0 0 0 6px var(--menu-accent-soft);display:inline-block;flex:0 0 auto;}
#libraryPanel .library-item small{margin-top:8px !important;font-size:13px !important;line-height:1.5 !important;color:#6e7b73 !important;}
#libraryPanel .library-item .btn,
#libraryPanel .library-item button{
  min-height:42px !important;
  padding:0 16px !important;
  border-radius:14px !important;
  background:#f7f9f7 !important;
  border:1px solid #e0e7e1 !important;
  color:#49584e !important;
  font-weight:850 !important;
}
#libraryPanel .library-item:hover{transform:translateY(-1px);box-shadow:0 14px 26px rgba(27,42,31,.06) !important;}
#libraryPanel .library-item.off{opacity:.58 !important;}

#colorsPanel > h3{
  margin-top:16px !important;
  padding:16px 18px 0 !important;
  border:0 !important;
  background:transparent !important;
}
#colorsPanel > h3 + .unified-panel-intro{
  margin:0 26px 0 !important;
  padding:0 2px 12px !important;
  background:transparent !important;
  border:0 !important;
  color:#7b8981 !important;
}
#colorsPanel > .color-list,
#colorsPanel > .priority-editor{
  position:relative;
  margin-top:0 !important;
  padding:16px !important;
}
#colorsPanel .color-list{gap:10px !important;}
#colorsPanel .color-row,
#colorsPanel .priority-editor label{
  min-height:64px !important;
  padding:12px 14px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:14px !important;
  align-items:center !important;
  border-radius:16px !important;
  background:#fbfdfb !important;
  border:1px solid #e4ebe5 !important;
}
#colorsPanel .color-row strong,
#colorsPanel .priority-editor strong{font-size:16px !important;color:#243229 !important;}
#colorsPanel .priority-editor small{display:block !important;margin-top:4px !important;font-size:12px !important;color:#7b8880 !important;}
#colorsPanel input[type="color"]{
  width:58px !important;
  height:44px !important;
  border-radius:12px !important;
  border:1px solid #dfe7e1 !important;
  overflow:hidden;
  background:#fff !important;
  box-shadow:0 8px 16px rgba(25,42,30,.06) !important;
}

.unified-panel .btn{
  min-height:46px !important;
  border-radius:14px !important;
  font-size:14px !important;
  font-weight:900 !important;
  letter-spacing:-.01em !important;
}
.unified-panel .btn.primary{
  background:linear-gradient(180deg, color-mix(in srgb, var(--menu-accent) 88%, white), var(--menu-accent)) !important;
  border:0 !important;
  box-shadow:0 12px 24px color-mix(in srgb, var(--menu-accent) 18%, transparent) !important;
}
.unified-panel .btn.ghost,
.unified-panel .btn.soft{
  background:#f7f9f7 !important;
  border:1px solid #dee6e0 !important;
  color:#526257 !important;
}
.unified-panel > .btn.full{
  width:calc(100% - 52px) !important;
  margin-top:14px !important;
}
.unified-panel .panel-actions{
  position:sticky !important;
  bottom:0 !important;
  z-index:4 !important;
  margin-top:18px !important;
  padding:16px 26px 20px !important;
  background:linear-gradient(180deg, rgba(247,250,247,.28), rgba(255,255,255,.98) 34%) !important;
  border-top:1px solid #edf1ed !important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 -12px 28px rgba(27,42,31,.04) !important;
}
.unified-panel .panel-actions .btn{min-width:188px !important;}

@media (max-width: 860px){
  .side-panel.unified-panel{
    width:calc(100vw - 18px) !important;
    max-width:calc(100vw - 18px) !important;
    max-height:calc(100dvh - 18px) !important;
    top:9px !important;
    border-radius:24px !important;
  }
  .side-panel.unified-panel .panel-head{padding:18px 16px 14px !important;}
  .side-panel.unified-panel .panel-head h2{font-size:32px !important;gap:12px !important;}
  .side-panel.unified-panel .panel-head h2::before{width:46px;height:46px;border-radius:16px;font-size:22px;}
  .side-panel.unified-panel > .unified-panel-intro,
  .panel-meta-row,
  .unified-panel > .household-section,
  .unified-panel > .person-list,
  .unified-panel > .library-list,
  .unified-panel > .color-list,
  .unified-panel > .priority-editor,
  .unified-panel > h3,
  .unified-panel > .panel-tools,
  .unified-panel > .btn.full{margin-left:16px !important;margin-right:16px !important;}
  #colorsPanel > h3 + .unified-panel-intro{margin-left:16px !important;margin-right:16px !important;}
  .unified-panel .panel-actions{padding:14px 16px 16px !important;}
  .unified-panel .panel-actions .btn{min-width:0 !important;flex:1 1 auto;}
  .unified-panel .form-grid,
  .unified-panel .schedule-grid,
  .unified-panel .period-row,
  #libraryPanel .panel-tools{grid-template-columns:1fr !important;}
  .unified-panel .person-card-head{flex-direction:column !important;align-items:flex-start !important;}
  .unified-panel .person-card-head h3{font-size:22px !important;}
  #libraryPanel .library-item{display:grid !important;grid-template-columns:1fr !important;}
}

/* =========================================================
   HARMONISATION TYPOGRAPHIQUE + FINITION PREMIUM
   ========================================================= */

:root{
  --font-xs: 11px;
  --font-sm: 12px;
  --font-md: 14px;
  --font-lg: 17px;
  --font-xl: 22px;
  --font-2xl: 30px;
  --font-3xl: 40px;
  --line-tight: 1.08;
  --line-normal: 1.35;
  --line-relaxed: 1.55;
}

/* Base typographique cohérente */
body,
button,
input,
select,
textarea{
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body{
  font-size: var(--font-md) !important;
  line-height: var(--line-normal) !important;
}

/* Titre principal de l'app */
.hero h1{
  font-size: clamp(28px, 3vw, 38px) !important;
  line-height: var(--line-tight) !important;
  font-weight: 950 !important;
}

.hero .eyebrow,
.side-panel.unified-panel .panel-head .eyebrow{
  font-size: var(--font-xs) !important;
}

.hero .subtitle{
  font-size: var(--font-sm) !important;
  line-height: var(--line-normal) !important;
}

/* Navigation et boutons principaux */
.regenerate-main,
.top-menu-trigger,
.view-btn,
.today-btn,
.nav-btn,
.btn{
  font-size: var(--font-sm) !important;
  font-weight: 850 !important;
}

.date-label{
  font-size: var(--font-md) !important;
  font-weight: 900 !important;
}

/* Statistiques */
.stat strong{
  font-size: var(--font-xl) !important;
  line-height:1 !important;
}
.stat span{
  font-size: var(--font-xs) !important;
  line-height:1.15 !important;
}

/* Jours */
.day-head h3{
  font-size: var(--font-md) !important;
  font-weight: 900 !important;
}
.day-head small{
  font-size: var(--font-xs) !important;
}

/* Cartes tâches : hiérarchie claire */
.compact-task-name{
  font-size: var(--font-md) !important;
  line-height:1.16 !important;
  font-weight:950 !important;
}
.compact-time,
.task-state-badge,
.person-tag-v216,
.pill-category-v216,
.priority-badge-v216,
.compact-last-done{
  font-size: var(--font-xs) !important;
}
.main-done-v216{
  font-size: var(--font-sm) !important;
}
.secondary-actions-v216 .mini-btn{
  font-size: var(--font-xs) !important;
}

/* Menu déroulant */
.top-menu-item strong{
  font-size: var(--font-md) !important;
  line-height:1.15 !important;
}
.top-menu-item small{
  font-size: var(--font-xs) !important;
  line-height:1.25 !important;
}

/* Fenêtres principales : typographie commune */
.side-panel.unified-panel .panel-head h2{
  font-size: clamp(30px, 4vw, 42px) !important;
  line-height:1 !important;
}
.side-panel.unified-panel > .unified-panel-intro{
  font-size: var(--font-md) !important;
  line-height: var(--line-relaxed) !important;
}
.panel-meta-chip{
  font-size: var(--font-sm) !important;
}
.unified-panel .household-section h3,
.unified-panel > h3{
  font-size: var(--font-lg) !important;
  line-height:1.15 !important;
}
.unified-panel label{
  font-size: var(--font-sm) !important;
  line-height:1.25 !important;
}
.unified-panel input:not([type="checkbox"]):not([type="color"]),
.unified-panel select,
.unified-panel textarea{
  font-size: var(--font-md) !important;
  line-height:1.3 !important;
}
.unified-panel .toggle-row{
  font-size: var(--font-sm) !important;
}
.household-person-main strong{
  font-size: var(--font-md) !important;
}
.household-person-main small,
.household-person-row > small{
  font-size: var(--font-sm) !important;
}

/* Rythmes */
.unified-panel .person-card-head h3{
  font-size: var(--font-xl) !important;
}
.unified-panel .person-card-head > span{
  font-size: var(--font-sm) !important;
}
.unified-panel .weekday-toggle{
  font-size: var(--font-sm) !important;
}
.mini-btn.add-period{
  font-size: var(--font-sm) !important;
}

/* Bibliothèque de tâches */
#libraryPanel .library-item strong{
  font-size: var(--font-lg) !important;
  line-height:1.12 !important;
}
#libraryPanel .library-item small{
  font-size: var(--font-sm) !important;
  line-height:1.45 !important;
}
#libraryPanel .library-item .btn,
#libraryPanel .library-item button{
  font-size: var(--font-sm) !important;
}

/* Couleurs */
#colorsPanel .color-row strong,
#colorsPanel .priority-editor strong{
  font-size: var(--font-md) !important;
}
#colorsPanel .priority-editor small{
  font-size: var(--font-sm) !important;
}

/* Dialogues */
dialog .panel-head h2{
  font-size: var(--font-xl) !important;
}
dialog label{
  font-size: var(--font-sm) !important;
}
dialog input,
dialog select,
dialog textarea{
  font-size: var(--font-md) !important;
}

/* Micro-interactions homogènes */
.btn,
.view-btn,
.today-btn,
.nav-btn,
.top-menu-trigger,
.top-menu-item,
.weekday-toggle,
.library-item,
.person-card,
.household-section,
.color-row,
.priority-editor label,
.task.clean-card{
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background-color .16s ease,
    border-color .16s ease,
    opacity .16s ease !important;
}

.btn:hover,
.view-btn:hover,
.today-btn:hover,
.nav-btn:hover,
.top-menu-trigger:hover,
.top-menu-item:hover,
.weekday-toggle:hover{
  transform:translateY(-1px);
}

.btn:active,
.view-btn:active,
.today-btn:active,
.nav-btn:active,
.top-menu-trigger:active,
.top-menu-item:active,
.weekday-toggle:active{
  transform:translateY(0) scale(.985);
}

.unified-panel .household-section:hover,
.unified-panel .person-card:hover,
#libraryPanel .library-item:hover,
#colorsPanel .color-row:hover,
#colorsPanel .priority-editor label:hover{
  box-shadow:0 14px 30px rgba(27,42,31,.07) !important;
  border-color:color-mix(in srgb, var(--menu-accent) 18%, #dfe7e1) !important;
}

/* Icônes secondaires cohérentes sans changer le HTML */
#householdPanel .household-section:nth-of-type(1) h3::before{content:"⌂";}
#householdPanel .household-section:nth-of-type(2) h3::before{content:"👥";}
#householdPanel .household-section:nth-of-type(3) h3::before{content:"🐾";}
#householdPanel .household-section:nth-of-type(4) h3::before{content:"🌿";}
#householdPanel .household-section:nth-of-type(5) h3::before{content:"⚙";}
#householdPanel .household-section:nth-of-type(6) h3::before{content:"✓";}
#householdPanel .household-section h3::before{
  display:inline-grid;
  place-items:center;
  width:28px;
  height:28px;
  margin-right:9px;
  border-radius:9px;
  background:var(--menu-accent-soft);
  color:var(--menu-accent);
  font-size:14px;
  vertical-align:middle;
}

#colorsPanel > h3:first-of-type::before{content:"◉";}
#colorsPanel > h3:nth-of-type(2)::before{content:"!";}
#colorsPanel > h3::before{
  display:inline-grid;
  place-items:center;
  width:28px;
  height:28px;
  margin-right:9px;
  border-radius:9px;
  background:var(--menu-accent-soft);
  color:var(--menu-accent);
  font-size:14px;
  vertical-align:middle;
}

/* Barre d'actions plus premium */
.unified-panel .panel-actions{
  gap:10px !important;
}
.unified-panel .panel-actions .btn.primary::before{
  content:"✓";
  margin-right:7px;
}

/* Responsive typographique */
@media(max-width:860px){
  :root{
    --font-xs:10px;
    --font-sm:11px;
    --font-md:13px;
    --font-lg:16px;
    --font-xl:20px;
  }
  .side-panel.unified-panel .panel-head h2{
    font-size:30px !important;
  }
}

@media(max-width:600px){
  :root{
    --font-xs:9px;
    --font-sm:10px;
    --font-md:12px;
    --font-lg:15px;
    --font-xl:18px;
  }
  .hero h1{font-size:22px !important;}
  .side-panel.unified-panel .panel-head h2{font-size:26px !important;}
  .panel-meta-chip{min-height:30px !important;padding:0 11px !important;}
}


/* =========================================================
   MENUS PREMIUM COMPACTS — TYPOGRAPHIE / ICÔNES / COULEURS
   ========================================================= */

/* Accents vraiment distincts */
#householdPanel{--menu-accent:#0F766E;--menu-accent-soft:#EAF7F5;--menu-accent-line:#CBE9E4;}
#peoplePanel{--menu-accent:#4F46E5;--menu-accent-soft:#F0EFFF;--menu-accent-line:#D9D7FF;}
#libraryPanel{--menu-accent:#D97706;--menu-accent-soft:#FFF5E8;--menu-accent-line:#F4DCB8;}
#colorsPanel{--menu-accent:#A21CAF;--menu-accent-soft:#FBEFFC;--menu-accent-line:#EDCFEE;}

/* Fenêtre légèrement plus compacte */
.side-panel.unified-panel{
  width:min(900px,calc(100vw - 40px)) !important;
  max-width:min(900px,calc(100vw - 40px)) !important;
  top:20px !important;
  max-height:calc(100dvh - 40px) !important;
  border-radius:24px !important;
}

/* En-tête compact et icône correctement séparée du texte */
.side-panel.unified-panel > .panel-head{
  display:grid !important;
  grid-template-columns:40px minmax(0,1fr) 38px !important;
  align-items:center !important;
  gap:12px !important;
  padding:16px 18px 13px !important;
}
.panel-title-icon{
  width:40px !important;
  height:40px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:13px !important;
  background:var(--menu-accent-soft) !important;
  border:1px solid var(--menu-accent-line) !important;
  color:var(--menu-accent) !important;
}
.panel-title-icon svg{
  width:21px !important;
  height:21px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.8 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
.side-panel.unified-panel .panel-head > div{
  gap:3px !important;
}
.side-panel.unified-panel .panel-head h2{
  display:block !important;
  font-size:28px !important;
  line-height:1.02 !important;
  letter-spacing:-.035em !important;
}
/* anciens pictogrammes décoratifs retirés */
.side-panel.unified-panel .panel-head h2::before,
#householdPanel .household-section h3::before,
#colorsPanel > h3::before{
  display:none !important;
  content:none !important;
}
.side-panel.unified-panel .panel-head .eyebrow{
  font-size:8px !important;
  letter-spacing:.22em !important;
}
.side-panel.unified-panel .close{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  border-radius:12px !important;
  font-size:19px !important;
}

/* Intro et chips : nettement moins volumineux */
.side-panel.unified-panel > .unified-panel-intro{
  margin:10px 18px 0 !important;
  padding:11px 13px !important;
  border-radius:14px !important;
  font-size:11.5px !important;
  line-height:1.42 !important;
}
.panel-meta-row{
  margin:8px 18px 0 !important;
  gap:6px !important;
}
.panel-meta-chip{
  min-height:27px !important;
  padding:0 10px !important;
  font-size:9.5px !important;
}

/* Espacements intérieurs réduits */
.unified-panel > .household-section,
.unified-panel > .person-list,
.unified-panel > .library-list,
.unified-panel > .color-list,
.unified-panel > .priority-editor,
.unified-panel > h3,
.unified-panel > .panel-tools,
.unified-panel > .btn.full{
  margin-left:18px !important;
  margin-right:18px !important;
}
.unified-panel .household-section{
  margin-top:10px !important;
  padding:13px 14px 12px !important;
  border-radius:16px !important;
}
.unified-panel .household-section h3,
.unified-panel > h3{
  margin-bottom:9px !important;
  font-size:14px !important;
  line-height:1.1 !important;
}
.unified-panel .form-grid{gap:9px !important;}
.unified-panel label{
  font-size:10px !important;
}
.unified-panel input:not([type="checkbox"]):not([type="color"]),
.unified-panel select,
.unified-panel textarea{
  min-height:40px !important;
  padding:8px 10px !important;
  border-radius:10px !important;
  font-size:12px !important;
}
.unified-panel textarea{min-height:74px !important;}
.unified-panel .toggle-list{gap:5px !important;margin-top:7px !important;}
.unified-panel .toggle-row{
  min-height:39px !important;
  padding:8px 10px !important;
  border-radius:10px !important;
  font-size:10px !important;
}
.unified-panel input[type="checkbox"]{transform:scale(1) !important;}

/* Foyer */
.household-people-summary{gap:6px !important;}
.household-person-row{
  padding:8px 10px !important;
  border-radius:10px !important;
}
.household-person-main strong{font-size:12px !important;}
.household-person-main small,
.household-person-row > small{font-size:9.5px !important;}
.household-person-row > small{padding:4px 7px !important;}
.person-color-preview{width:11px !important;height:11px !important;box-shadow:none !important;}
.unified-panel .household-hint{font-size:9.5px !important;padding:7px 8px !important;}

/* Rythmes */
.unified-panel .person-list{gap:9px !important;margin-top:10px !important;}
.unified-panel .person-card{
  padding:13px 14px !important;
  border-radius:16px !important;
}
.unified-panel .person-card-head{margin-bottom:9px !important;gap:8px !important;}
.unified-panel .person-card-head h3{font-size:17px !important;}
.unified-panel .person-card-head > span{
  padding:5px 8px !important;
  font-size:9.5px !important;
}
.unified-panel .schedule-grid{gap:8px !important;}
.unified-panel .weekday-row{margin-top:9px !important;gap:5px !important;}
.unified-panel .weekday-toggle{
  padding:6px 9px !important;
  font-size:9.5px !important;
}
.mini-btn.add-period{
  margin-top:8px !important;
  min-height:34px !important;
  padding:0 10px !important;
  font-size:9.5px !important;
}
.unified-panel .period-row{gap:5px !important;margin-top:5px !important;}
.unified-panel .period-row input,
.unified-panel .period-row select{min-height:36px !important;}
.unified-panel .period-row button{width:36px !important;height:36px !important;}

/* Bibliothèque */
#libraryPanel .panel-tools{
  margin-top:10px !important;
  padding:8px !important;
  border-radius:14px !important;
  gap:7px !important;
}
#libraryPanel .library-list{gap:7px !important;margin-top:9px !important;padding-bottom:14px !important;}
#libraryPanel .library-item{
  min-height:68px !important;
  padding:10px 11px 10px 15px !important;
  border-radius:14px !important;
}
#libraryPanel .library-item::before{top:12px !important;bottom:12px !important;width:3px !important;}
#libraryPanel .library-item strong{
  font-size:13px !important;
  line-height:1.15 !important;
}
#libraryPanel .library-item strong::before{display:none !important;content:none !important;}
#libraryPanel .library-item small{
  margin-top:4px !important;
  font-size:9.5px !important;
  line-height:1.35 !important;
}
#libraryPanel .library-item .btn,
#libraryPanel .library-item button{
  min-height:34px !important;
  padding:0 10px !important;
  border-radius:10px !important;
  font-size:9.5px !important;
}

/* Couleurs */
#colorsPanel > h3{
  margin-top:12px !important;
  padding:10px 12px 0 !important;
  font-size:14px !important;
}
#colorsPanel > h3 + .unified-panel-intro{
  margin:0 18px !important;
  padding:0 0 8px !important;
  font-size:10px !important;
  line-height:1.35 !important;
}
#colorsPanel > .color-list,
#colorsPanel > .priority-editor{
  padding:10px !important;
  border-radius:16px !important;
}
#colorsPanel .color-list{gap:6px !important;}
#colorsPanel .color-row,
#colorsPanel .priority-editor label{
  min-height:46px !important;
  padding:8px 10px !important;
  border-radius:11px !important;
}
#colorsPanel .color-row strong,
#colorsPanel .priority-editor strong{font-size:12px !important;}
#colorsPanel .priority-editor small{font-size:9px !important;margin-top:2px !important;}
#colorsPanel input[type="color"]{
  width:46px !important;
  height:32px !important;
  border-radius:8px !important;
  box-shadow:none !important;
}

/* Actions */
.unified-panel .btn{
  min-height:38px !important;
  border-radius:10px !important;
  font-size:10.5px !important;
}
.unified-panel > .btn.full{
  width:calc(100% - 36px) !important;
  margin-top:10px !important;
}
.unified-panel .panel-actions{
  margin-top:12px !important;
  padding:10px 18px 12px !important;
  gap:7px !important;
}
.unified-panel .panel-actions .btn{min-width:150px !important;}

@media(max-width:860px){
  .side-panel.unified-panel{
    width:calc(100vw - 12px) !important;
    max-width:calc(100vw - 12px) !important;
    top:6px !important;
    max-height:calc(100dvh - 12px) !important;
    border-radius:18px !important;
  }
  .side-panel.unified-panel > .panel-head{
    grid-template-columns:36px minmax(0,1fr) 34px !important;
    gap:9px !important;
    padding:12px 12px 10px !important;
  }
  .panel-title-icon{width:36px !important;height:36px !important;border-radius:11px !important;}
  .panel-title-icon svg{width:19px !important;height:19px !important;}
  .side-panel.unified-panel .panel-head h2{font-size:23px !important;}
  .side-panel.unified-panel .close{width:34px !important;height:34px !important;min-width:34px !important;}
  .side-panel.unified-panel > .unified-panel-intro{margin:8px 12px 0 !important;font-size:10.5px !important;}
  .panel-meta-row{margin:7px 12px 0 !important;}
  .unified-panel > .household-section,
  .unified-panel > .person-list,
  .unified-panel > .library-list,
  .unified-panel > .color-list,
  .unified-panel > .priority-editor,
  .unified-panel > h3,
  .unified-panel > .panel-tools,
  .unified-panel > .btn.full{margin-left:12px !important;margin-right:12px !important;}
  #colorsPanel > h3 + .unified-panel-intro{margin-left:12px !important;margin-right:12px !important;}
  .unified-panel .panel-actions{padding:9px 12px 10px !important;}
}


/* =========================================================
   HARMONISATION FINALE — charte unique du site
   ========================================================= */
:root{
  --ui-surface:#ffffff;
  --ui-surface-soft:#f7faf7;
  --ui-bg:#f1f5f2;
  --ui-text:#1d2a22;
  --ui-muted:#748178;
  --ui-line:#dfe7e1;
  --ui-line-strong:#d2ddd5;
  --ui-accent:#2f7553;
  --ui-radius-xl:24px;
  --ui-radius-lg:16px;
  --ui-radius-md:12px;
  --ui-shadow:0 24px 70px rgba(23,40,30,.16);
  --ui-font-title:26px;
  --ui-font-section:15px;
  --ui-font-body:12px;
  --ui-font-small:10px;
}

/* Une seule règle de scroll : scroll actif, barre visuelle masquée partout. */
html,body,.side-panel,.ui-dialog,#taskForm,#generatorForm,#planningTaskForm{
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}
html::-webkit-scrollbar,body::-webkit-scrollbar,
.side-panel::-webkit-scrollbar,.ui-dialog::-webkit-scrollbar,
#taskForm::-webkit-scrollbar,#generatorForm::-webkit-scrollbar,#planningTaskForm::-webkit-scrollbar{
  width:0 !important;height:0 !important;display:none !important;
}

/* Panneaux principaux : mêmes dimensions, mêmes proportions, même animation. */
.side-panel.unified-panel{
  left:50% !important;
  right:auto !important;
  top:18px !important;
  width:min(900px,calc(100vw - 36px)) !important;
  max-width:min(900px,calc(100vw - 36px)) !important;
  height:auto !important;
  max-height:calc(100dvh - 36px) !important;
  padding:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  border:1px solid var(--ui-line-strong) !important;
  border-radius:var(--ui-radius-xl) !important;
  background:linear-gradient(180deg,#fff,#f8faf8) !important;
  box-shadow:var(--ui-shadow) !important;
  transform:translate(-50%,14px) scale(.99) !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .18s ease,transform .18s ease !important;
}
.side-panel.unified-panel.open{
  transform:translate(-50%,0) scale(1) !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

/* Même en-tête sur Foyer / Rythmes / Tâches / Couleurs. */
.side-panel.unified-panel > .panel-head,
.ui-dialog .panel-head{
  min-height:72px !important;
  padding:15px 18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  background:rgba(255,255,255,.97) !important;
  border-bottom:1px solid var(--ui-line) !important;
  box-shadow:none !important;
}
.side-panel.unified-panel > .panel-head{
  position:sticky !important;top:0 !important;z-index:12 !important;
}
.side-panel.unified-panel .panel-head > div,.ui-dialog .panel-head > div{min-width:0 !important;}
.side-panel.unified-panel .panel-head .eyebrow,.ui-dialog .panel-head .eyebrow{
  margin:0 0 3px !important;font-size:8px !important;line-height:1 !important;
  letter-spacing:.18em !important;color:#859088 !important;font-weight:900 !important;
}
.side-panel.unified-panel .panel-head h2,.ui-dialog .panel-head h2{
  margin:0 !important;font-size:var(--ui-font-title) !important;line-height:1.05 !important;
  letter-spacing:-.035em !important;color:var(--ui-text) !important;font-weight:950 !important;
}

/* Une seule croix de fermeture dans tout le site. */
.ui-close,.close{
  width:38px !important;height:38px !important;min-width:38px !important;
  padding:0 !important;display:grid !important;place-items:center !important;
  border:1px solid var(--ui-line) !important;border-radius:12px !important;
  background:#f6f8f6 !important;color:#637067 !important;
  font:500 22px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  box-shadow:none !important;cursor:pointer !important;transition:.14s ease !important;
}
.ui-close:hover,.close:hover{background:#eef3ef !important;color:#304137 !important;transform:none !important;}

/* Intros : mêmes proportions, aucune rangée de bulles décoratives. */
.side-panel.unified-panel > .unified-panel-intro{
  margin:0 !important;padding:12px 18px !important;
  background:#f8faf8 !important;border-bottom:1px solid #e9eeea !important;
  color:var(--ui-muted) !important;font-size:var(--ui-font-body) !important;line-height:1.45 !important;
}
.panel-meta-row,.panel-meta-chip{display:none !important;}

/* Grille / sections : densité identique. */
.unified-panel > .household-section,
.unified-panel > .person-list,
.unified-panel > .library-list,
.unified-panel > .color-list,
.unified-panel > .priority-editor,
.unified-panel > h3,
.unified-panel > .panel-tools,
.unified-panel > .btn.full{
  margin-left:16px !important;margin-right:16px !important;
}
.unified-panel .household-section,
.unified-panel .person-card,
.unified-panel .library-item,
#colorsPanel > .color-list,
#colorsPanel > .priority-editor,
.unified-panel .panel-tools{
  border:1px solid var(--ui-line) !important;border-radius:var(--ui-radius-lg) !important;
  background:var(--ui-surface) !important;box-shadow:0 5px 14px rgba(28,44,34,.035) !important;
}
.unified-panel .household-section{margin-top:12px !important;padding:14px !important;}
.unified-panel .household-section::before,.unified-panel .person-card::before,
.unified-panel .library-item::before,#colorsPanel > .color-list::before,
#colorsPanel > .priority-editor::before{display:none !important;}
.unified-panel .household-section h3,.unified-panel > h3{
  margin:0 0 10px !important;font-size:var(--ui-font-section) !important;line-height:1.15 !important;
  letter-spacing:-.01em !important;color:#304037 !important;font-weight:900 !important;
}

/* Champs : mêmes hauteurs et typo partout. */
.unified-panel label,.ui-dialog label,.field-label{
  color:#59675e !important;font-size:10px !important;font-weight:850 !important;line-height:1.25 !important;
}
.unified-panel input:not([type="checkbox"]):not([type="color"]),
.unified-panel select,.unified-panel textarea,
.ui-dialog input:not([type="checkbox"]):not([type="radio"]),.ui-dialog select,.ui-dialog textarea{
  min-height:42px !important;padding:9px 11px !important;border:1px solid #d9e2db !important;
  border-radius:11px !important;background:#fbfdfb !important;color:#253329 !important;
  font-size:12px !important;box-shadow:none !important;
}
.unified-panel textarea,.ui-dialog textarea{min-height:78px !important;resize:vertical !important;}
.unified-panel input:focus,.unified-panel select:focus,.unified-panel textarea:focus,
.ui-dialog input:focus,.ui-dialog select:focus,.ui-dialog textarea:focus{
  border-color:#89aa95 !important;box-shadow:0 0 0 3px rgba(47,117,83,.09) !important;outline:none !important;
}

/* Type de logement : choix visuel, sans select natif visible. */
.home-type-field{grid-column:1/-1;display:grid;gap:7px;}
.home-type-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.home-type-choice{
  min-height:58px;padding:8px 10px;border:1px solid var(--ui-line) !important;border-radius:13px !important;
  display:flex;align-items:center;gap:9px;background:#fbfdfb;color:#4e5d53;cursor:pointer;
  font-size:11px;font-weight:850;transition:.14s ease;
}
.home-type-choice:hover{background:#f4f8f5;border-color:#cbd9cf !important;}
.home-type-choice.selected{
  background:#edf6f0 !important;border-color:#77a98b !important;color:#24573d !important;
  box-shadow:inset 0 0 0 1px rgba(47,117,83,.12);
}
.home-type-icon{
  width:32px;height:32px;display:grid;place-items:center;flex:0 0 auto;border-radius:9px;
  background:#fff;border:1px solid #e1e8e3;color:#42614d;font-size:18px;font-weight:800;
}
.home-type-choice.selected .home-type-icon{background:#dff0e5;border-color:#b9d8c3;color:#286345;}
.visually-hidden-select{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;white-space:nowrap !important;border:0 !important;}

/* Rythmes / tâches / couleurs : même densité que Foyer. */
.unified-panel .person-list{display:grid !important;gap:10px !important;margin-top:12px !important;}
.unified-panel .person-card{padding:14px !important;overflow:hidden !important;}
.unified-panel .person-card::after{display:none !important;}
.unified-panel .person-card-head{margin-bottom:10px !important;align-items:center !important;}
.unified-panel .person-card-head h3{font-size:16px !important;}
.unified-panel .person-card-head > span{padding:5px 9px !important;border-radius:999px !important;font-size:9px !important;}
.unified-panel .schedule-grid{gap:9px !important;}
.unified-panel .weekday-row{gap:5px !important;margin-top:10px !important;}
.unified-panel .weekday-toggle{min-height:31px !important;padding:5px 9px !important;border-radius:999px !important;font-size:9px !important;}

#libraryPanel .panel-tools{margin-top:12px !important;padding:9px !important;grid-template-columns:minmax(0,1fr) auto !important;gap:7px !important;}
#libraryPanel .library-list{display:grid !important;gap:8px !important;margin-top:10px !important;padding-bottom:14px !important;}
#libraryPanel .library-item{min-height:64px !important;padding:10px 11px !important;align-items:center !important;}
#libraryPanel .library-item strong{font-size:12px !important;line-height:1.15 !important;}
#libraryPanel .library-item strong::before{display:none !important;}
#libraryPanel .library-item small{margin-top:4px !important;font-size:9px !important;line-height:1.35 !important;}
#libraryPanel .library-item .btn,#libraryPanel .library-item button{min-height:33px !important;padding:0 10px !important;border-radius:9px !important;font-size:9px !important;}

#colorsPanel > h3{margin-top:12px !important;padding:12px 14px 0 !important;background:#fff !important;border:1px solid var(--ui-line) !important;border-bottom:0 !important;border-radius:var(--ui-radius-lg) var(--ui-radius-lg) 0 0 !important;}
#colorsPanel > h3 + .unified-panel-intro{margin:0 16px !important;padding:4px 14px 10px !important;background:#fff !important;border-left:1px solid var(--ui-line) !important;border-right:1px solid var(--ui-line) !important;border-bottom:0 !important;}
#colorsPanel > .color-list,#colorsPanel > .priority-editor{margin-top:0 !important;padding:7px 12px 12px !important;border-top:0 !important;border-radius:0 0 var(--ui-radius-lg) var(--ui-radius-lg) !important;}
#colorsPanel .color-row,#colorsPanel .priority-editor label{min-height:47px !important;padding:8px 10px !important;border-radius:11px !important;}
#colorsPanel .color-row strong,#colorsPanel .priority-editor strong{font-size:11px !important;}
#colorsPanel .priority-editor small{font-size:9px !important;}
#colorsPanel input[type="color"]{width:46px !important;height:32px !important;border-radius:9px !important;}

/* Boutons et actions : mêmes dimensions dans panneaux + dialogs. */
.unified-panel .btn,.ui-dialog .btn{
  min-height:38px !important;padding:7px 12px !important;border-radius:10px !important;
  font-size:10px !important;font-weight:900 !important;letter-spacing:0 !important;
}
.unified-panel .panel-actions,.ui-dialog .panel-actions{
  position:sticky !important;bottom:0 !important;z-index:10 !important;
  margin:12px 0 0 !important;padding:10px 16px 12px !important;
  display:flex !important;align-items:center !important;justify-content:flex-end !important;gap:7px !important;
  background:rgba(255,255,255,.97) !important;border-top:1px solid var(--ui-line) !important;
  box-shadow:0 -8px 20px rgba(27,42,31,.035) !important;
}
.unified-panel .panel-actions .btn,.ui-dialog .panel-actions .btn{min-width:120px !important;}

/* Dialogues : mêmes formes et même système que les quatre grands menus. */
.ui-dialog{
  width:min(620px,calc(100vw - 28px)) !important;max-width:min(620px,calc(100vw - 28px)) !important;
  max-height:calc(100dvh - 28px) !important;padding:0 !important;border:1px solid var(--ui-line-strong) !important;
  border-radius:var(--ui-radius-xl) !important;background:#fff !important;box-shadow:var(--ui-shadow) !important;
  overflow:auto !important;
}
.ui-dialog::backdrop{background:rgba(22,35,27,.28) !important;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);}
#taskForm,#generatorForm,#planningTaskForm{padding:0 !important;display:grid !important;gap:12px !important;}
#taskForm > :not(.panel-head):not(.panel-actions),
#generatorForm > :not(.panel-head):not(.panel-actions),
#planningTaskForm > :not(.panel-head):not(.panel-actions){margin-left:16px !important;margin-right:16px !important;}
.ui-dialog .panel-head{position:sticky !important;top:0 !important;z-index:5 !important;}

/* Overlay unique et cohérent. */
.overlay{background:rgba(20,34,25,.24) !important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:25 !important;}

/* Écrans d'accueil / configuration : mêmes tokens. */
.auth-card,.setup-card{
  border:1px solid var(--ui-line) !important;border-radius:var(--ui-radius-xl) !important;background:#fff !important;
  box-shadow:0 18px 48px rgba(26,44,33,.10) !important;
}
.auth-form input,.setup-card input,.setup-card select{
  min-height:42px !important;border-radius:11px !important;border-color:#d9e2db !important;background:#fbfdfb !important;
}

@media(max-width:700px){
  .side-panel.unified-panel{top:7px !important;width:calc(100vw - 14px) !important;max-width:calc(100vw - 14px) !important;max-height:calc(100dvh - 14px) !important;border-radius:18px !important;}
  .side-panel.unified-panel > .panel-head,.ui-dialog .panel-head{min-height:64px !important;padding:12px 13px !important;}
  .side-panel.unified-panel .panel-head h2,.ui-dialog .panel-head h2{font-size:22px !important;}
  .ui-close,.close{width:34px !important;height:34px !important;min-width:34px !important;border-radius:10px !important;font-size:20px !important;}
  .home-type-choices{grid-template-columns:1fr !important;}
  .home-type-choice{min-height:48px !important;}
  .unified-panel > .household-section,.unified-panel > .person-list,.unified-panel > .library-list,.unified-panel > .color-list,.unified-panel > .priority-editor,.unified-panel > h3,.unified-panel > .panel-tools,.unified-panel > .btn.full{margin-left:10px !important;margin-right:10px !important;}
  #colorsPanel > h3 + .unified-panel-intro{margin-left:10px !important;margin-right:10px !important;}
  .unified-panel .form-grid,.unified-panel .schedule-grid,.unified-panel .period-row,#libraryPanel .panel-tools{grid-template-columns:1fr !important;}
  .unified-panel .panel-actions,.ui-dialog .panel-actions{padding:9px 10px 10px !important;}
  .unified-panel .panel-actions .btn,.ui-dialog .panel-actions .btn{min-width:0 !important;flex:1 1 auto !important;}
}


/* Synchronisation de l'historique lors d'une réorganisation */
.compact-last-done{
  font-variant-numeric:tabular-nums;
}

/* Réorganisation : remise à zéro complète des réalisations et priorités. */


/* =========================================================
   AJOUT DIRECT AU PLANNING — bibliothèque + filtre catégorie
   ========================================================= */

#planningTaskDialog{
  width:min(780px,calc(100vw - 24px)) !important;
}

.planning-task-picker{
  margin:4px 0 16px;
  padding:14px;
  border:1px solid #dfe7e1;
  border-radius:18px;
  background:linear-gradient(180deg,#f9fbf9,#f3f7f4);
}

.planning-task-picker.hidden{
  display:none !important;
}

.planning-picker-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.planning-picker-head > div{
  min-width:0;
}

.planning-picker-head strong{
  display:block;
  color:#26352b;
  font-size:14px;
  line-height:1.15;
}

.planning-picker-head small{
  display:block;
  margin-top:4px;
  color:#78857d;
  font-size:10px;
  line-height:1.4;
}

.compact-picker-btn{
  flex:0 0 auto;
  min-height:36px !important;
  padding:7px 11px !important;
  font-size:10px !important;
}

.planning-category-filters{
  display:flex;
  gap:7px;
  overflow-x:auto;
  padding:1px 1px 9px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.planning-category-filters::-webkit-scrollbar{display:none;}

.planning-category-filter{
  flex:0 0 auto;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 10px;
  border:1px solid #dfe6e1;
  border-radius:999px;
  background:#fff;
  color:#536158;
  font-size:10px;
  font-weight:850;
  cursor:pointer;
}

.planning-category-filter small{
  min-width:20px;
  height:20px;
  display:grid;
  place-items:center;
  padding:0 5px;
  border-radius:999px;
  background:#f0f4f1;
  color:#7d8981;
  font-size:8px;
}

.planning-category-filter.active{
  background:#2f7553;
  border-color:#2f7553;
  color:#fff;
  box-shadow:0 6px 14px rgba(47,117,83,.14);
}
.planning-category-filter.active small{
  background:rgba(255,255,255,.18);
  color:#fff;
}

.planning-available-tasks{
  max-height:250px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  overflow:auto;
  padding:1px;
  scrollbar-width:none;
}
.planning-available-tasks::-webkit-scrollbar{display:none;}

.planning-available-task{
  min-width:0;
  min-height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 11px;
  text-align:left;
  border:1px solid #e0e7e2;
  border-radius:13px;
  background:#fff;
  color:#26352b;
  cursor:pointer;
  transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease;
}

.planning-available-task:hover{
  border-color:#b9d0c0;
  box-shadow:0 6px 14px rgba(29,48,36,.06);
  transform:translateY(-1px);
}

.planning-available-task.selected{
  border-color:#67a080;
  box-shadow:0 0 0 2px rgba(47,117,83,.10);
  background:#f5faf6;
}

.planning-task-choice-main{
  min-width:0;
}
.planning-task-choice-main strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  line-height:1.2;
}
.planning-task-choice-main small{
  display:block;
  margin-top:5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#839087;
  font-size:8px;
}

.planning-task-choice-check{
  width:27px;
  height:27px;
  flex:0 0 27px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#eef4ef;
  color:#42745a;
  font-size:13px;
  font-weight:950;
}

.planning-available-task.selected .planning-task-choice-check{
  background:#2f7553;
  color:#fff;
}

.planning-picker-empty{
  grid-column:1/-1;
  min-height:90px;
  display:grid;
  place-content:center;
  gap:4px;
  padding:18px;
  text-align:center;
  border:1px dashed #d8e2da;
  border-radius:13px;
  color:#5f6d64;
  background:#fff;
}
.planning-picker-empty strong{font-size:11px;}
.planning-picker-empty small{font-size:9px;color:#89948d;}

.planning-task-form-section{
  display:grid;
  gap:10px;
}

@media(max-width:700px){
  .planning-picker-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .compact-picker-btn{
    width:100%;
  }
  .planning-available-tasks{
    grid-template-columns:1fr;
    max-height:230px;
  }
}


/* =========================================================
   AJOUT PLANNING — version compacte & boutons toujours visibles
   ========================================================= */

#planningTaskDialog{
  width:min(720px,calc(100vw - 22px)) !important;
  max-height:calc(100dvh - 20px) !important;
}

#planningTaskDialog .panel-head{
  padding:14px 16px 11px !important;
  min-height:auto !important;
}

#planningTaskDialog .panel-head .eyebrow{
  font-size:8px !important;
  margin-bottom:3px !important;
}

#planningTaskDialog .panel-head h2{
  font-size:26px !important;
  line-height:1.02 !important;
  letter-spacing:-.035em !important;
}

#planningTaskDialog .ui-close,
#planningTaskDialog .close{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  border-radius:12px !important;
  font-size:20px !important;
}

.planning-task-picker{
  margin:0 0 10px !important;
  padding:10px !important;
  border-radius:14px !important;
}

.planning-picker-head{
  margin-bottom:8px !important;
  gap:8px !important;
}

.planning-picker-head strong{
  font-size:12px !important;
}

.planning-picker-head small{
  margin-top:2px !important;
  font-size:9px !important;
  line-height:1.3 !important;
}

.compact-picker-btn{
  min-height:32px !important;
  padding:6px 9px !important;
  font-size:9px !important;
  border-radius:10px !important;
}

/* Les filtres se replient sur plusieurs lignes : aucun bouton coupé. */
.planning-category-filters{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:5px !important;
  overflow:visible !important;
  padding:0 0 7px !important;
}

.planning-category-filter{
  min-height:29px !important;
  padding:4px 8px !important;
  gap:5px !important;
  font-size:9px !important;
}

.planning-category-filter small{
  min-width:17px !important;
  height:17px !important;
  font-size:7px !important;
  padding:0 4px !important;
}

.planning-available-tasks{
  max-height:210px !important;
  gap:6px !important;
}

.planning-available-task{
  min-height:52px !important;
  padding:8px 9px !important;
  border-radius:11px !important;
  gap:8px !important;
}

.planning-task-choice-main strong{
  font-size:10px !important;
}

.planning-task-choice-main small{
  margin-top:3px !important;
  font-size:7.5px !important;
}

/* Le bouton + devient clairement visible. */
.planning-task-choice-check{
  width:30px !important;
  height:30px !important;
  flex:0 0 30px !important;
  border-radius:9px !important;
  background:#dfeee4 !important;
  color:#2f7553 !important;
  border:1px solid #c5ddcd !important;
  font-size:18px !important;
  font-weight:950 !important;
  box-shadow:0 2px 5px rgba(47,117,83,.08) !important;
}

.planning-available-task:hover .planning-task-choice-check{
  background:#cfe5d6 !important;
}

.planning-available-task.selected .planning-task-choice-check{
  background:#2f7553 !important;
  color:#fff !important;
  border-color:#2f7553 !important;
}

.planning-task-form-section{
  padding-top:8px !important;
  border-top:1px solid #e4eae5 !important;
  gap:7px !important;
}

#planningTaskDialog .planning-task-form-section label{
  font-size:9px !important;
}

#planningTaskDialog .planning-task-form-section input,
#planningTaskDialog .planning-task-form-section select,
#planningTaskDialog .planning-task-form-section textarea{
  min-height:38px !important;
  padding:8px 10px !important;
  font-size:10px !important;
  border-radius:10px !important;
}

#planningTaskDialog .planning-task-form-section textarea{
  min-height:58px !important;
}

#planningTaskDialog .panel-actions{
  padding:9px 0 0 !important;
  gap:7px !important;
}

#planningTaskDialog .panel-actions .btn{
  min-height:38px !important;
  padding:7px 13px !important;
  font-size:10px !important;
  border-radius:10px !important;
}

@media(max-width:700px){
  #planningTaskDialog{
    width:calc(100vw - 12px) !important;
    max-height:calc(100dvh - 12px) !important;
  }

  #planningTaskDialog .panel-head h2{
    font-size:21px !important;
  }

  .planning-picker-head{
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .compact-picker-btn{
    width:100% !important;
  }

  .planning-category-filters{
    gap:4px !important;
  }

  .planning-category-filter{
    flex:0 0 auto !important;
  }

  .planning-available-tasks{
    grid-template-columns:1fr !important;
    max-height:190px !important;
  }
}


/* IONOS Cloud sync */
.cloud-status{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid #dfe7e1;
  border-radius:999px;
  background:#f7faf7;
  color:#6c7b71;
  font-size:9px;
  font-weight:850;
  white-space:nowrap;
}
.cloud-status.syncing{background:#fff8e7;border-color:#eadcae;color:#8a6a18;}
.cloud-status.synced{background:#edf7f0;border-color:#c9dfd0;color:#377352;}
.cloud-status.offline{background:#fff0f0;border-color:#e8caca;color:#9a4444;}
@media(max-width:700px){.cloud-status{font-size:8px;min-height:31px;padding:5px 8px;}}


/* AGENDA PARTAGÉ — membres et invitations */
#membersPanel{--menu-accent:#5267d9;--menu-accent-soft:#eef0ff;--menu-accent-line:#dfe3ff;}
.shared-invite-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}.shared-invite-row .btn{min-height:42px!important}
.shared-member-message{min-height:18px;margin:8px 0 0;color:#6f7c74;font-size:11px;font-weight:700}.shared-member-message.error{color:#a73a3a}.shared-member-message.success{color:#2f7553}
.shared-invite-link{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:10px}.shared-invite-link.hidden{display:none!important}
.shared-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.shared-section-head h3{margin-bottom:0!important}
.shared-count-badge{min-width:30px;height:30px;padding:0 9px;display:grid;place-items:center;border-radius:999px;background:#eef0ff;color:#4c5ec1;font-size:11px;font-weight:900}
.shared-members-list{display:grid;gap:8px;margin-top:12px}.shared-member-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 12px;border:1px solid #e2e8e3;border-radius:13px;background:#f9fbf9}
.shared-member-main{min-width:0;display:flex;align-items:center;gap:10px}.shared-member-avatar{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border-radius:11px;background:#eef0ff;color:#5060bd;font-weight:950;font-size:13px;text-transform:uppercase}
.shared-member-main strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#27352c}.shared-member-main small{display:block;margin-top:3px;font-size:8px;color:#839087}
.shared-role{padding:5px 8px;border-radius:999px;background:#fff;border:1px solid #e0e6e1;color:#647168;font-size:8px;font-weight:850}.shared-member-actions{display:flex;align-items:center;gap:7px}
.shared-remove-btn{min-height:30px!important;padding:5px 9px!important;font-size:8px!important;border-radius:9px!important;color:#9b4a4a!important;background:#fff7f7!important;border:1px solid #eddcdc!important}.shared-empty{padding:16px;text-align:center;border:1px dashed #dce4de;border-radius:12px;background:#fbfdfb;color:#7a877f;font-size:10px}
@media(max-width:700px){.shared-invite-row,.shared-invite-link{grid-template-columns:1fr}.shared-member-row{grid-template-columns:1fr}.shared-member-actions{justify-content:flex-start}}


/* Choix initial du foyer */
.household-choice-screen{min-height:100vh;display:grid;place-items:center;padding:32px 18px;background:radial-gradient(circle at 9% 16%,rgba(126,165,141,.16),transparent 28%),radial-gradient(circle at 92% 88%,rgba(206,164,101,.13),transparent 30%),#f5f7f4}
.household-choice-shell{width:min(980px,100%)}
.household-choice-head{text-align:center;margin:0 auto 22px;max-width:720px}.household-choice-head h1{margin:4px 0 10px;font-size:clamp(34px,5vw,54px);line-height:1;letter-spacing:-.045em;color:#1b2920}.household-choice-head>p:last-child{margin:0;color:#6f7d74;font-size:14px;line-height:1.55}
.household-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.household-choice-card{position:relative;display:flex;flex-direction:column;gap:16px;min-height:390px;padding:26px;border:1px solid #dfe7e1;border-radius:25px;background:rgba(255,255,255,.94);box-shadow:0 18px 46px rgba(28,47,35,.075);overflow:hidden}
.household-choice-card::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-90px;top:-100px;pointer-events:none;opacity:.55}.create-home-card::after{background:#dceee2}.join-home-card::after{background:#e4e8f7}
.household-choice-icon{position:relative;z-index:1;width:52px;height:52px;display:grid;place-items:center;border-radius:16px;font-size:27px;font-weight:800}.create-home-card .household-choice-icon{background:#e9f5ed;color:#2f7553}.join-home-card .household-choice-icon{background:#eef0fb;color:#5364a7}
.household-choice-card h2{margin:2px 0 8px;font-size:27px;line-height:1.05;letter-spacing:-.035em;color:#253229}.household-choice-card>div>p:last-child{margin:0;color:#758178;font-size:12px;line-height:1.5}
.household-choice-card label{display:grid;gap:7px;margin-top:auto;color:#536158;font-size:11px;font-weight:850}.household-choice-card input{width:100%;min-height:49px;padding:11px 13px;border:1px solid #d9e2db;border-radius:13px;background:#fbfdfb;color:#253329;outline:none}.household-choice-card input:focus{border-color:#7da18b;box-shadow:0 0 0 3px rgba(47,117,83,.09)}
.household-choice-action{min-height:48px;font-size:12px!important}.join-action{background:#5364a7!important;color:#fff!important}.household-choice-error{margin:0;min-height:16px}.household-choice-hint{margin:0;color:#66776c;font-size:10px;min-height:14px}
.household-choice-footer{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:16px;color:#77857c;font-size:11px}.household-choice-footer .btn{min-height:38px;padding:7px 11px}
@media(max-width:760px){.household-choice-screen{display:block;padding:20px 12px}.household-choice-grid{grid-template-columns:1fr}.household-choice-card{min-height:auto;padding:20px;border-radius:20px}.household-choice-head h1{font-size:34px}.household-choice-footer{flex-direction:column}}


/* =========================================================
   PROFILS DES MEMBRES + CHAT DU FOYER
   ========================================================= */
.join-profile-box{display:grid;gap:11px;padding:14px;border:1px solid #dfe8e1;border-radius:16px;background:#f9fbf9}
.join-profile-title{display:grid;gap:3px}.join-profile-title strong{font-size:13px;color:#26352b}.join-profile-title small,.photo-help{font-size:9px;color:#7c8880;line-height:1.45}
.gender-choice{display:grid;grid-template-columns:1fr 1fr;gap:9px}.gender-card{min-height:76px;border:1px solid #dfe6e0;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;gap:10px;color:#4b5b51;font-weight:850;cursor:pointer;transition:.15s ease}.gender-card:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(29,48,36,.06)}.gender-card.active{border-color:#67a080;background:#f2f8f4;box-shadow:0 0 0 2px rgba(47,117,83,.10)}
.gender-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:27px;background:#eef4ef}.male-avatar{background:#e9f2ff}.female-avatar{background:#fff0f6}
.photo-choice-row,.profile-photo-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.photo-upload-btn{display:inline-flex!important;align-items:center;justify-content:center;min-height:38px;padding:7px 11px;border:1px solid #dce5de;border-radius:11px;background:#fff;color:#536158;font-size:10px!important;font-weight:900!important;cursor:pointer}.join-photo-preview{margin-left:auto;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:#eef4ef;border:2px solid #fff;box-shadow:0 0 0 1px #dfe6e1}.join-photo-preview span{font-size:29px}.join-photo-preview img,.profile-avatar-preview img,.shared-member-avatar img,.chat-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.profile-avatar-zone{display:flex;align-items:center;gap:14px;padding:12px;border-radius:14px;background:#f8faf8;border:1px solid #e4eae5;margin-bottom:12px}.profile-avatar-preview{width:66px;height:66px;flex:0 0 66px;border-radius:50%;display:grid;place-items:center;overflow:hidden;font-size:39px;background:#eef4ef;box-shadow:0 0 0 4px #fff,0 0 0 5px #e3e9e4}.profile-avatar-zone>div{display:grid;gap:4px}.profile-avatar-zone strong{font-size:16px;color:#25342a}.profile-avatar-zone small{font-size:10px;line-height:1.4;color:#7d8981}
.profile-editor-card{display:grid;gap:12px}.profile-panel{--menu-accent:#5973d8;--menu-accent-soft:#eef1ff;--menu-accent-line:#dce2ff}.chat-panel{--menu-accent:#3c8d72;--menu-accent-soft:#edf8f3;--menu-accent-line:#d8ebe3}
.chat-shell{padding:0!important;overflow:hidden}.chat-messages{height:min(56vh,520px);overflow:auto;padding:14px;display:flex;flex-direction:column;gap:9px;scrollbar-width:none}.chat-messages::-webkit-scrollbar{display:none}.chat-message{display:flex;align-items:flex-end;gap:8px;max-width:88%}.chat-message.mine{align-self:flex-end;flex-direction:row-reverse}.chat-avatar{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:#eef4ef;font-size:20px}.chat-bubble{padding:9px 11px;border-radius:14px 14px 14px 4px;background:#f2f5f3;border:1px solid #e2e8e3}.chat-message.mine .chat-bubble{border-radius:14px 14px 4px 14px;background:#edf7f1;border-color:#d5e9dc}.chat-meta{display:flex;gap:8px;align-items:center;margin-bottom:4px}.chat-meta strong{font-size:9px;color:#3b4b41}.chat-meta small{font-size:7.5px;color:#8b958f}.chat-text{white-space:pre-wrap;word-break:break-word;font-size:11px;line-height:1.4;color:#29372e}.chat-compose{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:11px;border-top:1px solid #e4eae5;background:#fff}.chat-compose textarea{min-height:44px!important;max-height:120px!important;resize:vertical}.chat-compose .btn{align-self:end;min-height:44px!important}
.shared-member-avatar{overflow:hidden}.shared-member-avatar.gender-male{background:#e9f2ff}.shared-member-avatar.gender-female{background:#fff0f6}
@media(max-width:700px){.gender-card{min-height:64px}.gender-avatar{width:36px;height:36px;font-size:23px}.chat-messages{height:52vh}.chat-compose{grid-template-columns:1fr}.chat-compose .btn{width:100%}.join-photo-preview{margin-left:0}}


/* =========================================================
   CORRECTION CHOIX DU FOYER — SCROLL + COMPACT RESPONSIVE
   ========================================================= */

/* Le body reste volontairement sans scroll pour éviter le rail Safari.
   L'écran de choix du foyer devient lui aussi son propre conteneur. */
#householdChoiceScreen:not(.hidden){
  position:fixed !important;
  inset:0 !important;
  width:100% !important;
  height:100dvh !important;
  min-height:0 !important;
  padding:22px 16px 34px !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-y:contain !important;
  align-items:start !important;
}
#householdChoiceScreen:not(.hidden)::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}

.household-choice-shell{
  width:min(940px,100%) !important;
  margin:auto !important;
  padding-bottom:max(18px,env(safe-area-inset-bottom)) !important;
}

.household-choice-head{
  margin:0 auto 15px !important;
  max-width:700px !important;
}
.household-choice-head .eyebrow{
  margin-bottom:5px !important;
  font-size:9px !important;
}
.household-choice-head h1{
  margin:2px 0 7px !important;
  font-size:clamp(29px,4vw,43px) !important;
  line-height:1.02 !important;
}
.household-choice-head>p:last-child{
  font-size:12px !important;
  line-height:1.45 !important;
}

.household-choice-grid{
  gap:13px !important;
  align-items:start !important;
}
.household-choice-card{
  min-height:0 !important;
  gap:11px !important;
  padding:20px !important;
  border-radius:21px !important;
}
.household-choice-icon{
  width:43px !important;
  height:43px !important;
  border-radius:13px !important;
  font-size:21px !important;
}
.household-choice-card h2{
  margin:1px 0 5px !important;
  font-size:23px !important;
}
.household-choice-card>div>p:last-child{
  font-size:10.5px !important;
  line-height:1.42 !important;
}
.household-choice-card label{
  gap:5px !important;
  margin-top:0 !important;
  font-size:10px !important;
}
.household-choice-card input{
  min-height:43px !important;
  padding:9px 11px !important;
  border-radius:11px !important;
  font-size:12px !important;
}
.household-choice-action{
  min-height:43px !important;
  font-size:11px !important;
}

.join-profile-box{
  padding:13px !important;
  border-radius:15px !important;
}
.join-profile-title strong{font-size:11px !important;}
.join-profile-title small{font-size:9px !important;line-height:1.35 !important;}
.join-gender-grid{gap:8px !important;}
.join-gender-option{min-height:86px !important;padding:9px !important;border-radius:13px !important;}
.join-gender-avatar{width:42px !important;height:42px !important;}
.join-gender-option strong{font-size:10px !important;}
.join-photo-box{padding:10px !important;border-radius:13px !important;}
.join-photo-preview{width:44px !important;height:44px !important;}

.household-choice-footer{
  margin-top:12px !important;
  padding-bottom:4px !important;
}

/* Écrans de faible hauteur : on privilégie l'accès à toutes les commandes. */
@media(max-height:760px) and (min-width:761px){
  #householdChoiceScreen:not(.hidden){padding-top:12px !important;padding-bottom:20px !important;}
  .household-choice-head{margin-bottom:10px !important;}
  .household-choice-head h1{font-size:31px !important;}
  .household-choice-card{padding:15px !important;gap:8px !important;}
  .household-choice-icon{width:36px !important;height:36px !important;font-size:18px !important;}
  .household-choice-card h2{font-size:20px !important;}
  .household-choice-card input{min-height:39px !important;}
  .household-choice-action{min-height:40px !important;}
  .join-gender-option{min-height:72px !important;}
  .join-gender-avatar{width:36px !important;height:36px !important;}
}

@media(max-width:760px){
  #householdChoiceScreen:not(.hidden){
    display:block !important;
    padding:14px 10px 28px !important;
  }
  .household-choice-shell{margin:0 auto !important;}
  .household-choice-head{margin-bottom:12px !important;padding:0 4px !important;}
  .household-choice-head h1{font-size:29px !important;}
  .household-choice-grid{grid-template-columns:1fr !important;gap:11px !important;}
  .household-choice-card{padding:16px !important;border-radius:18px !important;}
  .household-choice-footer{flex-direction:column !important;gap:8px !important;}
}