/* ═══════════════════════════════════════════════════════════════════════════
   NOTRE REFUGE · V58
   Gérer — vrai master/detail
   ═══════════════════════════════════════════════════════════════════════════ */

#app[data-world="settings"] .topbar,
#app[data-world="settings"] .topnav,
#app[data-world="settings"] .footer{
  display:none!important;
}

#world-settings{
  background:var(--paper);
}

.manage-shell--master-detail{
  min-height:100%;
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  background:var(--paper);
}

/* ===== MASTER / PC ===== */
.manage-master{
  position:sticky;
  top:0;
  height:100dvh;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:18px 14px;
  overflow-y:auto;
  border-right:1px solid color-mix(in srgb,var(--ink) 9%,transparent);
  background:color-mix(in srgb,var(--paper-warm) 94%,var(--paper));
}

.manage-master__header{
  display:grid;
  gap:20px;
}

.manage-master__back{
  min-height:42px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 9px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
}

.manage-master__back span{
  color:var(--wine);
}

.manage-master__back strong{
  font:700 .68rem var(--font-body);
}

.manage-master__title{
  padding:0 8px;
}

.manage-master__title small{
  color:var(--terra);
  font:800 .5rem var(--font-body);
  letter-spacing:.16em;
}

.manage-master__title h2{
  margin:4px 0 0;
  font:500 1.9rem/1 var(--font-display);
}

.manage-master__groups{
  display:grid;
  gap:9px;
}

.manage-master__group{
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--ink) 7%,transparent);
  border-radius:14px;
  background:color-mix(in srgb,var(--paper) 76%,transparent);
}

.manage-master__group-head{
  width:100%;
  min-height:56px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border:0;
  background:transparent;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}

.manage-master__group-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:var(--terra-tint);
  color:var(--terra);
}

.manage-master__group-head>span:nth-child(2){
  display:grid;
  gap:2px;
}

.manage-master__group-head strong{
  font:720 .72rem var(--font-body);
}

.manage-master__group-head small{
  color:var(--ink-muted);
  font:.57rem var(--font-body);
}

.manage-master__group-head b{
  color:var(--ink-faint);
  font:400 1rem var(--font-display);
  transition:transform .16s ease;
}

.manage-master__group.is-open{
  background:var(--paper);
  border-color:color-mix(in srgb,var(--terra) 18%,var(--line));
}

.manage-master__group.is-open .manage-master__group-head b{
  transform:rotate(90deg);
}

.manage-master__children{
  display:none;
  padding:0 8px 8px 56px;
}

.manage-master__group.is-open .manage-master__children{
  display:grid;
  gap:3px;
}

.manage-master__children button{
  min-height:34px;
  display:grid;
  grid-template-columns:22px 1fr;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--ink-muted);
  text-align:left;
  cursor:pointer;
}

.manage-master__children button span{
  color:var(--terra);
  font-size:.72rem;
}

.manage-master__children button strong{
  font:650 .62rem var(--font-body);
}

.manage-master__children button.is-on{
  background:var(--terra-soft);
  color:var(--terra);
}

.manage-master__device{
  margin-top:auto;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 10px;
  border:1px solid color-mix(in srgb,var(--gold) 24%,var(--line));
  border-radius:11px;
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
}

.manage-master__device span{
  color:var(--terra);
  font-size:1rem;
}

.manage-master__device strong{
  font:700 .65rem var(--font-body);
}

/* ===== DETAIL ===== */
.manage-detail{
  min-width:0;
  min-height:100dvh;
  background:var(--paper);
}

.manage-detail__topbar{
  position:sticky;
  top:0;
  z-index:25;
  min-height:58px;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 40px;
  align-items:center;
  gap:8px;
  padding:8px clamp(18px,3vw,32px);
  border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent);
  background:var(--paper);
}

.manage-detail__back{
  display:none;
  width:40px;
  height:40px;
  place-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
  color:var(--wine);
  cursor:pointer;
}

.manage-detail__title{
  min-width:0;
  display:grid;
  gap:1px;
}

.manage-detail__title small{
  color:var(--terra);
  font:800 .48rem var(--font-body);
  letter-spacing:.14em;
}

.manage-detail__title strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font:700 .8rem var(--font-body);
}

.manage-detail__home{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
  color:var(--terra);
  cursor:pointer;
}

.manage-detail__content{
  width:min(980px,100%);
  margin:0 auto;
  padding:34px clamp(20px,4vw,44px) 76px!important;
  background:transparent!important;
}

/* ===== HUBS / REGLAGES NATIFS ===== */
.settings-group{
  display:grid;
  gap:7px;
}

.settings-group>h4{
  margin:0 0 2px 4px;
  color:var(--ink-muted);
  font:800 .52rem var(--font-body);
  letter-spacing:.12em;
  text-transform:uppercase;
}

.settings-group__rows{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--paper);
}

.settings-row{
  width:100%;
  min-height:68px;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto auto;
  align-items:center;
  gap:10px;
  padding:10px 13px;
  border:0;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 7%,transparent);
  background:transparent;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}

.settings-row:last-child{
  border-bottom:0;
}

.settings-row:hover{
  background:color-mix(in srgb,var(--paper-warm) 48%,transparent);
}

.settings-row__icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:var(--terra-tint);
  color:var(--terra);
}

.settings-row__copy{
  min-width:0;
  display:grid;
  gap:2px;
}

.settings-row__copy strong{
  font:720 .74rem var(--font-body);
}

.settings-row__copy small{
  color:var(--ink-muted);
  font:.61rem/1.35 var(--font-body);
}

.settings-row em{
  padding:3px 7px;
  border-radius:999px;
  background:var(--sage-soft);
  color:var(--sage-deep);
  font:700 .52rem var(--font-body);
  font-style:normal;
}

.settings-row>b{
  color:var(--ink-ghost);
  font:400 1.05rem var(--font-display);
}

.settings-status-line{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:13px;
  background:color-mix(in srgb,var(--paper-warm) 55%,var(--paper));
}

.settings-status-line>span{
  width:9px;
  height:9px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--gold);
}

.settings-status-line.is-ok>span{
  background:var(--sage);
}

.settings-status-line>div{
  display:grid;
  gap:1px;
}

.settings-status-line strong{
  font:700 .7rem var(--font-body);
}

.settings-status-line small{
  color:var(--ink-muted);
  font:.59rem var(--font-body);
}

.settings-add-device,
.settings-connect-cloud{
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--paper);
}

.settings-add-device>header{
  margin-bottom:11px;
}

.settings-add-device>header small{
  color:var(--terra);
  font:800 .5rem var(--font-body);
  letter-spacing:.13em;
}

.settings-add-device>header h4{
  margin:4px 0 0;
  font:500 1rem var(--font-display);
}

.settings-connect-cloud{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.settings-connect-cloud>div{
  display:grid;
  gap:2px;
}

.settings-connect-cloud strong{
  font:700 .7rem var(--font-body);
}

.settings-connect-cloud small{
  color:var(--ink-muted);
  font:.59rem var(--font-body);
}

/* ===== MOBILE : UNE LISTE, PUIS LE DETAIL ===== */
@media(max-width:900px){
  #app[data-world="settings"] > .mobilenav{
    display:none!important;
  }

  .manage-shell--master-detail{
    display:block;
    min-height:100%;
  }

  .manage-master{
    position:static;
    height:auto;
    min-height:100dvh;
    padding:14px 12px 34px;
    border-right:0;
    background:var(--paper);
  }

  .manage-master__header{
    gap:20px;
  }

  .manage-master__back{
    width:max-content;
    min-height:40px;
  }

  .manage-master__title{
    padding:0 2px;
  }

  .manage-master__title h2{
    font-size:2rem;
  }

  .manage-master__groups{
    gap:9px;
  }

  .manage-master__group{
    border-radius:15px;
    background:var(--paper);
  }

  .manage-master__group-head{
    min-height:72px;
    grid-template-columns:44px minmax(0,1fr) auto;
    padding:11px 12px;
  }

  .manage-master__group-icon{
    width:44px;
    height:44px;
    border-radius:12px;
  }

  .manage-master__group-head strong{
    font-size:.78rem;
  }

  .manage-master__group-head small{
    font-size:.61rem;
  }

  /* Sur mobile, la liste principale reste fermée : on clique sur une rubrique
     pour ouvrir sa page dédiée, pas de sous-menu imbriqué dans la même page. */
  .manage-master__children{
    display:none!important;
  }

  .manage-master__device{
    margin-top:8px;
    min-height:50px;
  }

  .manage-detail{
    display:none;
  }

  /* Dès qu'une page/rubrique est ouverte, le master disparaît et le detail prend tout. */
  .manage-shell--master-detail:has(.manage-detail__content[data-manage-page]:not([data-manage-page="overview"])) .manage-master{
    display:none;
  }

  .manage-shell--master-detail:has(.manage-detail__content[data-manage-page]:not([data-manage-page="overview"])) .manage-detail{
    display:block;
  }

  .manage-detail__topbar{
    min-height:58px;
    padding:8px 10px;
  }

  .manage-detail__back{
    display:grid;
  }

  .manage-detail__content{
    width:100%;
    padding:18px 11px 42px!important;
  }

  .settings-row{
    min-height:72px;
    grid-template-columns:40px minmax(0,1fr) auto auto;
    padding:11px 12px;
  }

  .settings-row__icon{
    width:40px;
    height:40px;
  }

  .settings-row__copy strong{
    font-size:.76rem;
  }

  .settings-row__copy small{
    font-size:.61rem;
  }

  .settings-add-device,
  .settings-connect-cloud{
    padding:12px;
  }

  .cloud-quick-add__people{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:480px){
  .manage-master,
  .manage-detail__content{
    padding-inline:10px!important;
  }

  .settings-row{
    grid-template-columns:38px minmax(0,1fr) auto;
  }

  .settings-row>b{
    display:none;
  }

  .settings-row em{
    grid-column:2/4;
    width:max-content;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   V56 · TOUTES LES PAGES DE GÉRER
   ═══════════════════════════════════════════════════════════════════════════ */

.settings__page{
  display:grid;
  gap:18px;
}

.settings__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:22px;
  margin:0!important;
  padding:0 0 20px;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent);
}

.settings__head-copy{
  min-width:0;
  display:grid;
  gap:5px;
}

.settings__head-copy>small{
  color:var(--terra);
  font:800 .54rem var(--font-body);
  letter-spacing:.17em;
}

.settings__head-copy h3{
  margin:0!important;
  font:500 clamp(1.65rem,2.5vw,2.3rem)/1.03 var(--font-display)!important;
}

.settings__head-copy p{
  max-width:70ch;
  margin:0!important;
  color:var(--ink-muted)!important;
  font:.76rem/1.55 var(--font-body)!important;
}

.settings__autosave{
  flex:0 0 auto;
  min-height:32px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 10px;
  border:1px solid color-mix(in srgb,var(--sage) 18%,var(--line));
  border-radius:999px;
  background:color-mix(in srgb,var(--sage) 5%,var(--paper));
  color:var(--sage-deep);
  font:.6rem var(--font-body);
}

.settings__autosave b{
  font-weight:700;
}

.settings__body{
  display:grid;
  gap:16px;
}

.settings__card{
  margin:0!important;
  padding:0!important;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--ink) 9%,var(--line))!important;
  border-radius:18px!important;
  background:var(--paper)!important;
  box-shadow:none!important;
}

.settings__card-head{
  padding:16px 18px 13px;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 7%,transparent);
  background:color-mix(in srgb,var(--paper-warm) 48%,var(--paper));
}

.settings__card-head h4{
  margin:0!important;
  font:650 .91rem var(--font-body)!important;
}

.settings__card-head p{
  max-width:72ch;
  margin:4px 0 0!important;
  color:var(--ink-muted)!important;
  font:.67rem/1.45 var(--font-body)!important;
}

.settings__card-body{
  padding:17px 18px;
}

.manage-card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}

/* ---------- Profil ---------- */
.manage-profile-layout{
  display:grid;
  grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);
  gap:14px;
}

.manage-profile-identity{
  grid-row:span 2;
  display:grid;
  align-content:start;
  justify-items:center;
  gap:16px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--terra) 8%,transparent),transparent 45%),
    color-mix(in srgb,var(--paper-warm) 60%,var(--paper));
  text-align:center;
}

.manage-profile-identity__photo{
  display:grid;
  justify-items:center;
  gap:8px;
}

.manage-profile-identity__photo .profile-photo{
  width:132px!important;
  height:132px!important;
}

.manage-profile-identity__photo>span{
  color:var(--ink-faint);
  font:.6rem var(--font-body);
}

.manage-profile-identity__copy{
  display:grid;
  gap:4px;
}

.manage-profile-identity__copy small{
  color:var(--terra);
  font:800 .5rem var(--font-body);
  letter-spacing:.15em;
}

.manage-profile-identity__copy h4{
  margin:0;
  font:500 1.45rem var(--font-display);
}

.manage-profile-identity__copy p{
  margin:0;
  color:var(--ink-muted);
  font:.7rem/1.5 var(--font-body);
}

.field-grid--profile{
  grid-template-columns:1fr 1fr!important;
}

.manage-profile-media{
  min-height:0!important;
}

/* ---------- Notre lien ---------- */
.manage-relationship-summary,
.manage-category-summary,
.manage-calendar-summary{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px;
  align-items:center;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:15px;
  background:color-mix(in srgb,var(--paper-warm) 62%,var(--paper));
}

.manage-relationship-summary>span,
.manage-category-summary>span,
.manage-calendar-summary>span{
  display:grid;
  min-width:92px;
  gap:1px;
  padding-right:14px;
  border-right:1px solid var(--line);
}

.manage-relationship-summary strong,
.manage-category-summary strong,
.manage-calendar-summary strong{
  color:var(--wine);
  font:500 1.35rem var(--font-display);
}

.manage-relationship-summary small,
.manage-category-summary small,
.manage-calendar-summary small{
  color:var(--ink-muted);
  font:.56rem var(--font-body);
}

.manage-relationship-summary p,
.manage-category-summary p,
.manage-calendar-summary p{
  margin:0;
  color:var(--ink-muted);
  font:.68rem/1.45 var(--font-body);
}

.manage-milestones-list{
  display:grid;
  gap:9px;
}

.manage-milestone{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--paper);
}

.manage-milestone__main{
  display:grid;
  grid-template-columns:54px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:12px;
}

.manage-milestone__identity{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(150px,190px);
  gap:8px;
}

.manage-milestone__details{
  border-top:1px solid color-mix(in srgb,var(--ink) 7%,transparent);
}

.manage-milestone__details summary{
  padding:9px 13px;
  color:var(--ink-muted);
  font:700 .62rem var(--font-body);
  cursor:pointer;
}

.manage-milestone__details .milestone__options{
  padding:12px 13px 14px;
}

.manage-add-card{
  display:grid;
  gap:13px;
  padding:17px;
  border:1px dashed color-mix(in srgb,var(--gold) 42%,var(--line));
  border-radius:17px;
  background:color-mix(in srgb,var(--gold) 4%,var(--paper));
}

.manage-add-card header{
  display:grid;
  gap:3px;
}

.manage-add-card header small{
  color:var(--terra);
  font:800 .5rem var(--font-body);
  letter-spacing:.15em;
}

.manage-add-card header h4{
  margin:0;
  font:500 1.05rem var(--font-display);
}

.manage-add-card header p{
  margin:0;
  color:var(--ink-muted);
  font:.65rem var(--font-body);
}

/* ---------- Catégories ---------- */
.manage-category-summary{
  grid-template-columns:auto auto minmax(0,1fr);
}

.manage-category-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  align-items:start;
}

.settings__page--shared .row-list{
  display:grid;
  gap:8px;
}

.settings__page--shared .row--category,
.settings__page--calendar .row--category{
  border:1px solid var(--line)!important;
  border-radius:13px!important;
  background:color-mix(in srgb,var(--paper-warm) 45%,var(--paper));
  padding:10px!important;
}

/* ---------- Calendrier ---------- */
.manage-calendar-summary{
  grid-template-columns:auto auto minmax(0,1fr);
}

.settings-calendar-sources{
  display:grid!important;
  grid-template-columns:1fr 1fr;
  gap:9px!important;
}

.calendar-source{
  border:1px solid var(--line)!important;
  border-radius:13px!important;
  background:var(--paper)!important;
  padding:10px!important;
}

.calendar-source__color{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid color-mix(in srgb,var(--ink) 7%,transparent);
}

/* ---------- Médias ---------- */
.settings__page--media .media-overview{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}

.settings__page--media .media-stat{
  min-height:90px;
  padding:13px!important;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--paper);
}

.settings__page--media .media-toolbar{
  position:sticky;
  top:111px;
  z-index:12;
  margin:0!important;
  padding:10px 12px!important;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--paper);
}

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

.settings__page--media .media-card{
  border-radius:15px!important;
  overflow:hidden;
}

/* ---------- Appareils ---------- */
.manage-device-stack{
  display:grid;
  gap:14px;
}

.settings__page--device .pwa-install,
.settings__page--device .device-add,
.settings__page--cloudHub .cloud-quick-add{
  margin:0!important;
  border-radius:18px!important;
}

.device-cloud-list{
  display:grid;
  gap:8px!important;
}

.device-cloud-card{
  min-height:70px!important;
  padding:11px 12px!important;
  border-radius:13px!important;
}

/* ---------- Ambiance ---------- */
.settings__page--appearance .ambience-studio{
  display:grid!important;
  gap:14px!important;
}

.settings__page--appearance .device-adapt{
  margin:0!important;
  border-radius:17px!important;
}

.settings__page--appearance .ambience-studio__hero{
  grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr)!important;
  gap:14px!important;
}

.settings__page--appearance .ambience-studio__intro,
.settings__page--appearance .ambience-lab__stage{
  min-height:300px!important;
  border-radius:17px!important;
}

.settings__page--appearance .ambience-studio__controls{
  display:grid!important;
  grid-template-columns:1.4fr 1fr 1fr!important;
  gap:10px!important;
}

.settings__page--appearance .ambience-panel{
  margin:0!important;
  border-radius:16px!important;
}

/* ---------- Synchronisation ---------- */
.settings__page--sync .sync-panel,
.settings__page--sync .sync-status,
.settings__page--sync .sync-live-card,
.settings__page--sync .e2e-status{
  border-radius:15px!important;
}

.settings__page--sync .settings__body{
  gap:12px;
}

.settings__page--sync .sync-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
}

.settings__page--sync details{
  border-radius:13px;
}

/* ---------- Sécurité ---------- */
.manage-security-status{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:15px;
  background:color-mix(in srgb,var(--paper-warm) 58%,var(--paper));
}

.manage-security-status>span{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--gold-soft);
  color:var(--gold);
}

.manage-security-status.is-on>span{
  background:var(--sage-soft);
  color:var(--sage-deep);
}

.manage-security-status>div{
  display:grid;
  gap:2px;
}

.manage-security-status small{
  color:var(--ink-faint);
  font:800 .5rem var(--font-body);
  letter-spacing:.14em;
}

.manage-security-status strong{
  font:720 .76rem var(--font-body);
}

.manage-security-status p{
  margin:0;
  color:var(--ink-muted);
  font:.63rem var(--font-body);
}

.manage-security-toggle{
  margin:0!important;
}

.manage-password-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.manage-password-grid .field:first-child{
  grid-column:1/-1;
}

/* ---------- Sauvegardes ---------- */
.settings__page--backups .backup-simple-hero{
  margin:0!important;
  border-radius:18px!important;
}

.settings__page--backups .backup-explain{
  grid-template-columns:1fr 1fr!important;
  gap:9px!important;
}

.settings__page--backups .backup-import-panel,
.settings__page--backups .backup-secure-box{
  border-radius:16px!important;
}

.settings__page--backups .backup-advanced{
  margin-top:0!important;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--paper);
}

.settings__page--backups .backup-advanced>summary{
  padding:13px 15px;
  font:700 .68rem var(--font-body);
}

/* ---------- commun : contrôles plus confortables ---------- */
.settings__page .control{
  min-height:42px;
}

.settings__page textarea.control{
  min-height:90px;
}

.settings__page .btn{
  min-height:40px;
}

.settings__page .field-grid{
  gap:10px!important;
}

.settings__page .check-line,
.settings__page .source{
  min-height:44px;
}

/* ---------- tablette ---------- */
@media(max-width:1080px){
  .manage-profile-layout{
    grid-template-columns:230px minmax(0,1fr);
  }

  .manage-category-columns{
    grid-template-columns:1fr;
  }

  .settings-calendar-sources{
    grid-template-columns:1fr;
  }

  .settings__page--media .media-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .settings__page--appearance .ambience-studio__controls{
    grid-template-columns:1fr 1fr!important;
  }

  .settings__page--appearance .ambience-panel--presence{
    grid-column:1/-1;
  }
}

/* ---------- MOBILE : chaque page retravaillée ---------- */
@media(max-width:900px){
  .settings__page{
    gap:13px;
  }

  .settings__head{
    display:grid;
    gap:9px;
    padding-bottom:14px;
  }

  .settings__head-copy{
    gap:4px;
  }

  .settings__head-copy h3{
    font-size:1.45rem!important;
  }

  .settings__head-copy p{
    font-size:.7rem!important;
    line-height:1.48;
  }

  .settings__autosave{
    width:max-content;
    min-height:27px;
    padding-inline:8px;
  }

  .settings__autosave b{
    font-size:.56rem;
  }

  .settings__card{
    border-radius:15px!important;
  }

  .settings__card-head{
    padding:13px 14px 10px;
  }

  .settings__card-body{
    padding:13px 14px;
  }

  .manage-profile-layout{
    grid-template-columns:1fr;
    gap:10px;
  }

  .manage-profile-identity{
    grid-row:auto;
    grid-template-columns:88px minmax(0,1fr);
    justify-items:start;
    align-items:center;
    gap:14px;
    padding:14px;
    text-align:left;
  }

  .manage-profile-identity__photo .profile-photo{
    width:82px!important;
    height:82px!important;
  }

  .manage-profile-identity__photo>span{
    display:none;
  }

  .field-grid--profile{
    grid-template-columns:1fr!important;
  }

  .manage-relationship-summary,
  .manage-category-summary,
  .manage-calendar-summary{
    grid-template-columns:auto minmax(0,1fr);
    gap:10px;
    padding:11px 12px;
  }

  .manage-category-summary>span:nth-child(2),
  .manage-calendar-summary>span:nth-child(2){
    border-right:0;
  }

  .manage-category-summary p,
  .manage-calendar-summary p{
    grid-column:1/-1;
    padding-top:8px;
    border-top:1px solid var(--line);
  }

  .manage-milestone__main{
    grid-template-columns:44px minmax(0,1fr);
    gap:8px;
  }

  .manage-milestone__identity{
    grid-template-columns:1fr;
  }

  .manage-milestone__main>.badge,
  .manage-milestone__main>[data-ms-delete]{
    grid-column:2;
    justify-self:start;
  }

  .milestone__new{
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    gap:8px!important;
  }

  .milestone__new #ms-new-date,
  .milestone__new #ms-add{
    grid-column:1/-1;
  }

  .manage-category-columns{
    grid-template-columns:1fr;
    gap:10px;
  }

  .settings__page--shared .row--category,
  .settings__page--calendar .row--category{
    grid-template-columns:42px minmax(0,1fr)!important;
  }

  .row--category>.nr-color-field,
  .row--category>.row__actions,
  .row--category>.nr-cat-transfer{
    grid-column:1/-1!important;
  }

  .settings-calendar-sources{
    grid-template-columns:1fr;
  }

  .calendar-source{
    padding:9px!important;
  }

  .settings__page--media .media-overview{
    grid-template-columns:1fr 1fr;
    gap:7px;
  }

  .settings__page--media .media-stat{
    min-height:76px;
  }

  .settings__page--media .media-toolbar{
    position:static;
    padding:9px!important;
  }

  .settings__page--media .media-grid{
    grid-template-columns:1fr!important;
  }

  .device-add__people,
  .cloud-quick-add__people{
    grid-template-columns:1fr!important;
  }

  .device-cloud-card{
    grid-template-columns:42px minmax(0,1fr)!important;
  }

  .device-cloud-card__action{
    grid-column:1/-1!important;
    justify-self:stretch!important;
  }

  .device-cloud-card__action .btn{
    width:100%;
  }

  .settings__page--appearance .ambience-studio__hero{
    grid-template-columns:1fr!important;
  }

  .settings__page--appearance .ambience-studio__intro{
    min-height:0!important;
    padding:15px!important;
  }

  /* Sur mobile l'aperçu reste utile mais beaucoup plus compact. */
  .settings__page--appearance .ambience-lab__stage{
    min-height:210px!important;
  }

  .settings__page--appearance .ambience-studio__controls{
    grid-template-columns:1fr!important;
  }

  .settings__page--appearance .ambience-panel--presence{
    grid-column:auto;
  }

  .settings__page--sync .sync-status,
  .settings__page--sync .sync-live-card{
    grid-template-columns:36px minmax(0,1fr)!important;
  }

  .settings__page--sync .sync-status>strong,
  .settings__page--sync .sync-status>span:last-child,
  .settings__page--sync .sync-live-card>.btn{
    grid-column:1/-1!important;
  }

  .manage-password-grid{
    grid-template-columns:1fr;
  }

  .manage-password-grid .field:first-child{
    grid-column:auto;
  }

  .settings__page--backups .backup-simple-hero{
    grid-template-columns:1fr!important;
    padding:16px!important;
  }

  .settings__page--backups .backup-simple-hero__seal{
    display:none!important;
  }

  .settings__page--backups .backup-simple-hero__actions{
    grid-template-columns:1fr!important;
  }

  .settings__page--backups .backup-explain{
    grid-template-columns:1fr!important;
  }

  .settings__page--backups .backup-modes{
    grid-template-columns:1fr!important;
  }

  .backup-sections{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:520px){
  .settings__card-head,
  .settings__card-body{
    padding-inline:12px;
  }

  .manage-profile-identity{
    grid-template-columns:72px minmax(0,1fr);
  }

  .manage-profile-identity__photo .profile-photo{
    width:68px!important;
    height:68px!important;
  }

  .settings__page--media .media-overview{
    grid-template-columns:1fr 1fr;
  }

  .manage-card-actions .btn,
  .settings__page .sync-actions .btn{
    width:100%;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   V59 · GÉRER — adaptation PC réelle
   Le PC n'est plus une version mobile étirée.
   ═══════════════════════════════════════════════════════════════════════════ */

@media(min-width:901px){
  .manage-shell--master-detail{
    grid-template-columns:264px minmax(0,1fr)!important;
  }

  .manage-master{
    width:264px;
    padding:18px 12px!important;
  }

  /* Sur PC la barre mobile-like au-dessus du contenu n'apporte rien.
     Le titre de la page fait office d'en-tête. */
  .manage-detail__topbar{
    display:none!important;
  }

  .manage-detail{
    min-width:0;
    width:100%;
  }

  /* Utiliser réellement tout l'espace disponible à droite du rail. */
  .manage-detail__content{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:42px clamp(34px,3.6vw,66px) 90px!important;
  }

  .settings__page{
    width:100%;
    max-width:1480px;
    margin:0;
  }

  .settings__head{
    min-height:104px;
    align-items:flex-start!important;
    padding:0 0 24px!important;
  }

  .settings__head-copy{
    max-width:880px;
  }

  .settings__head-copy h3{
    font-size:clamp(2rem,2.25vw,2.65rem)!important;
  }

  .settings__head-copy p{
    max-width:78ch!important;
    font-size:.8rem!important;
  }

  .settings__autosave{
    margin-top:6px;
  }

  /* Les cartes et champs ont une densité adaptée à la souris et au grand écran. */
  .settings__card-head{
    padding:17px 20px 14px!important;
  }

  .settings__card-body{
    padding:19px 20px!important;
  }

  .settings__page .control{
    min-height:44px;
  }

  /* PROFIL : vraie fiche + édition côte à côte */
  .manage-profile-layout{
    grid-template-columns:minmax(280px,340px) minmax(0,1fr)!important;
    grid-template-areas:
      "identity info"
      "identity media";
    gap:16px!important;
    align-items:start;
  }

  .manage-profile-identity{
    grid-area:identity;
    position:sticky;
    top:34px;
    min-height:430px;
    align-content:center!important;
  }

  .manage-profile-layout>.settings__card:nth-of-type(1){
    grid-area:info;
  }

  .manage-profile-layout>.settings__card:nth-of-type(2){
    grid-area:media;
  }

  /* NOTRE LIEN : repères en deux colonnes au lieu d'une colonne étroite. */
  .settings__page--relationship .manage-milestones-list{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
  }

  .settings__page--relationship .manage-milestone{
    min-width:0;
  }

  .settings__page--relationship .manage-add-card{
    margin-top:2px;
  }

  .manage-milestone__main{
    grid-template-columns:54px minmax(0,1fr)!important;
  }

  .manage-milestone__main>.badge,
  .manage-milestone__main>[data-ms-delete]{
    grid-column:2;
    justify-self:start;
  }

  .manage-milestone__identity{
    grid-template-columns:minmax(0,1fr) minmax(150px,185px)!important;
  }

  /* CATÉGORIES : Envies/Horizons côte à côte. */
  .manage-category-columns{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
  }

  /* CALENDRIER : les sources occupent réellement le grand écran. */
  .settings-calendar-sources{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
  }

  .settings__page--calendar>.settings__body{
    grid-template-columns:minmax(0,1.5fr) minmax(360px,.8fr);
    align-items:start;
  }

  .settings__page--calendar .manage-calendar-summary{
    grid-column:1/-1;
  }

  /* MÉDIAS : densité desktop plus utile. */
  .settings__page--media .media-overview{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }

  .settings__page--media .media-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }

  /* APPAREILS : installation/ajout et liste peuvent cohabiter sur PC. */
  .settings__page--device .manage-device-stack{
    grid-template-columns:minmax(360px,.82fr) minmax(0,1.18fr);
    align-items:start;
    gap:16px!important;
  }

  .settings__page--device .manage-device-stack>.pwa-install,
  .settings__page--device .manage-device-stack>.device-add{
    grid-column:1;
  }

  .settings__page--device .manage-device-stack>.settings__card,
  .settings__page--device .manage-device-stack>.device-cloud-list{
    grid-column:2;
  }

  /* AMBIANCE : aperçu et réglages réellement horizontaux. */
  .settings__page--appearance .ambience-studio__hero{
    grid-template-columns:minmax(360px,.72fr) minmax(0,1.28fr)!important;
  }

  .settings__page--appearance .ambience-studio__controls{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  /* SYNCHRONISATION : états à gauche, diagnostic/actions à droite. */
  .settings__page--sync .settings__body{
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start;
    gap:14px!important;
  }

  .settings__page--sync .settings__body>.settings__card:first-child,
  .settings__page--sync .settings__body>.sync-panel:first-child{
    grid-column:1/-1;
  }

  /* SÉCURITÉ : statut en pleine largeur puis deux cartes. */
  .settings__page--security .settings__body{
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start;
  }

  .settings__page--security .manage-security-status{
    grid-column:1/-1;
  }

  /* SAUVEGARDES : export/import côte à côte sur desktop. */
  .settings__page--backups .settings__body{
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start;
    gap:14px!important;
  }

  .settings__page--backups .backup-simple-hero{
    grid-column:1/-1;
  }

  .settings__page--backups .backup-advanced{
    grid-column:1/-1;
  }

  /* Hubs desktop : restent simples mais exploitent la largeur. */
  .settings-group__rows{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
  }

  .settings-group__rows .settings-row{
    border-bottom:1px solid color-mix(in srgb,var(--ink) 7%,transparent);
  }

  .settings-group__rows .settings-row:nth-child(odd){
    border-right:1px solid color-mix(in srgb,var(--ink) 7%,transparent);
  }

  .settings-group__rows .settings-row:last-child:nth-child(odd){
    grid-column:1/-1;
    border-right:0;
  }

  /* Appareils & Cloud a des contenus plus complexes : garde une seule colonne. */
  .settings__page--cloudHub .settings-group__rows{
    grid-template-columns:1fr;
  }

  .settings__page--cloudHub .settings-row{
    border-right:0!important;
  }
}

/* Écran PC large : encore un peu plus d'espace et médias 5 colonnes. */
@media(min-width:1500px){
  .manage-detail__content{
    padding-left:58px!important;
    padding-right:58px!important;
  }

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

  .settings-calendar-sources{
    grid-template-columns:repeat(3,minmax(240px,1fr))!important;
  }
}

/* Petit PC / fenêtre réduite : ne pas forcer les doubles colonnes trop tôt. */
@media(min-width:901px) and (max-width:1180px){
  .manage-shell--master-detail{
    grid-template-columns:230px minmax(0,1fr)!important;
  }

  .manage-master{
    width:230px;
  }

  .manage-detail__content{
    padding:30px 26px 70px!important;
  }

  .settings__page--relationship .manage-milestones-list,
  .settings__page--security .settings__body,
  .settings__page--backups .settings__body,
  .manage-category-columns{
    grid-template-columns:1fr!important;
  }

  .settings-calendar-sources{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .settings__page--media .media-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   V60 · CORRECTION PC — CALENDRIER / CATÉGORIES
   Corrige le débordement visible dans la capture V59.
   ═══════════════════════════════════════════════════════════════════════════ */

@media(min-width:901px){

  /* Le calendrier n'est plus forcé dans une colonne gauche + panneau trop étroit.
     Chaque bloc prend toute la largeur utile, donc aucun formulaire n'est rogné. */
  .settings__page--calendar > .settings__body{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
    align-items:start!important;
  }

  .settings__page--calendar .manage-calendar-summary,
  .settings__page--calendar > .settings__body > .settings__card{
    grid-column:1!important;
    min-width:0!important;
    width:100%!important;
  }

  /* Sources automatiques : grille propre 3 colonnes, puis 2 si fenêtre réduite. */
  .settings__page--calendar .settings-calendar-sources{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
  }

  .settings__page--calendar .calendar-source{
    min-width:0!important;
    width:100%!important;
    overflow:hidden!important;
  }

  .settings__page--calendar .calendar-source__text{
    min-width:0!important;
  }

  .settings__page--calendar .calendar-source__text strong,
  .settings__page--calendar .calendar-source__text small{
    overflow-wrap:anywhere;
  }

  /* Les catégories ont leur propre layout desktop.
     On ne réutilise plus la grille générique .row qui exigeait ~500 px minimum. */
  .settings__page--calendar .row--category,
  .settings__page--shared .row--category{
    display:grid!important;
    grid-template-columns:48px minmax(0,1fr) minmax(210px,260px) auto!important;
    gap:12px!important;
    align-items:start!important;
    min-width:0!important;
    width:100%!important;
    padding:13px!important;
  }

  .settings__page--calendar .row--category > *,
  .settings__page--shared .row--category > *{
    min-width:0!important;
  }

  .settings__page--calendar .row--category .nr-color-field.is-inline,
  .settings__page--shared .row--category .nr-color-field.is-inline{
    min-width:0!important;
    width:100%!important;
  }

  .settings__page--calendar .row--category .nr-color-trigger,
  .settings__page--shared .row--category .nr-color-trigger{
    width:100%!important;
    min-width:0!important;
  }

  .settings__page--calendar .row--category .row__actions,
  .settings__page--shared .row--category .row__actions{
    width:auto!important;
    display:flex!important;
    grid-template-columns:none!important;
    justify-content:flex-end!important;
    align-self:center!important;
  }

  .settings__page--calendar .row--category .row__actions .btn,
  .settings__page--shared .row--category .row__actions .btn{
    width:auto!important;
  }

  .settings__page--calendar .row--category .nr-cat-transfer,
  .settings__page--shared .row--category .nr-cat-transfer{
    grid-column:2/-1!important;
    padding-left:0!important;
  }

  /* La page Catégories peut garder Envies/Horizons côte à côte,
     mais ses lignes se replient à l'intérieur de chaque panneau. */
  .manage-category-columns .row--category{
    grid-template-columns:44px minmax(0,1fr)!important;
  }

  .manage-category-columns .row--category > .nr-color-field,
  .manage-category-columns .row--category > .row__actions,
  .manage-category-columns .row--category > .nr-cat-transfer{
    grid-column:2!important;
  }

  .manage-category-columns .row--category > .row__actions{
    justify-content:flex-start!important;
  }

  /* Résumé calendrier : ne jamais pousser le texte hors écran. */
  .manage-calendar-summary{
    grid-template-columns:auto auto minmax(0,1fr)!important;
    min-width:0!important;
  }

  .manage-calendar-summary p{
    min-width:0!important;
    overflow-wrap:anywhere;
  }
}

/* PC intermédiaire : deux sources par ligne, catégories toujours pleine largeur. */
@media(min-width:901px) and (max-width:1250px){
  .settings__page--calendar .settings-calendar-sources{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .settings__page--calendar .row--category{
    grid-template-columns:44px minmax(0,1fr)!important;
  }

  .settings__page--calendar .row--category > .nr-color-field,
  .settings__page--calendar .row--category > .row__actions,
  .settings__page--calendar .row--category > .nr-cat-transfer{
    grid-column:2!important;
  }

  .settings__page--calendar .row--category > .row__actions{
    justify-content:flex-start!important;
  }
}

/* Très large : on limite la longueur visuelle des formulaires sans créer un panneau étroit. */
@media(min-width:1500px){
  .settings__page--calendar > .settings__body > .settings__card{
    max-width:1320px!important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   V61 · GÉRER — lisibilité + vraie composition desktop
   Corrige les pages Appareils, Synchronisation, Sécurité et la typo générale.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- lisibilité commune ---------- */
#world-settings{
  --settings-text:15px;
  --settings-small:13px;
  --settings-label:12px;
}

#world-settings .settings__page,
#world-settings .settings__card,
#world-settings .manage-detail,
#world-settings .manage-master{
  font-size:var(--settings-text);
}

#world-settings .settings__head-copy p,
#world-settings .settings__card-head p,
#world-settings .settings-note,
#world-settings .settings-row__copy small,
#world-settings .manage-master__group-head small,
#world-settings .manage-security-status p,
#world-settings .sync-foundation__hero p,
#world-settings .sync-live-card p,
#world-settings .device-add__intro p,
#world-settings .pwa-install__intro p,
#world-settings .device-cloud-card small{
  font-size:var(--settings-small)!important;
  line-height:1.5!important;
}

#world-settings .field label,
#world-settings .field>span,
#world-settings .calendar-source__color>span,
#world-settings .manage-security-status small,
#world-settings .sync-foundation__hero small,
#world-settings .sync-live-card small,
#world-settings .device-add__intro small,
#world-settings .pwa-install__intro>small{
  font-size:var(--settings-label)!important;
}

#world-settings .control,
#world-settings input,
#world-settings select,
#world-settings textarea{
  font-size:15px!important;
}

#world-settings .btn{
  font-size:14px!important;
}

#world-settings .settings__card-head h4{
  font-size:17px!important;
}

#world-settings .settings__head-copy h3{
  font-size:clamp(34px,2.45vw,44px)!important;
}

/* ---------- PC ---------- */
@media(min-width:901px){

  /* Rail plus lisible, mais sans prendre trop de place. */
  .manage-shell--master-detail{
    grid-template-columns:280px minmax(0,1fr)!important;
  }

  .manage-master{
    width:280px!important;
    padding:18px 14px!important;
  }

  .manage-master__title h2{
    font-size:32px!important;
  }

  .manage-master__group-head{
    min-height:66px!important;
    grid-template-columns:42px minmax(0,1fr) auto!important;
  }

  .manage-master__group-icon{
    width:42px!important;
    height:42px!important;
  }

  .manage-master__group-head strong{
    font-size:14px!important;
  }

  .manage-master__group-head small{
    font-size:12px!important;
  }

  .manage-master__children{
    padding-left:60px!important;
  }

  .manage-master__children button{
    min-height:38px!important;
  }

  .manage-master__children button strong{
    font-size:12.5px!important;
  }

  /* Le contenu exploite l'écran, mais reste cadré pour garder une lecture nette. */
  .manage-detail__content{
    width:100%!important;
    max-width:none!important;
    padding:42px clamp(34px,3.8vw,72px) 90px!important;
  }

  .settings__page{
    width:100%!important;
    max-width:1420px!important;
    margin:0 auto!important;
  }

  .settings__body{
    gap:18px!important;
  }

  /* ---------------------------------------------------------------
     APPAREILS
     --------------------------------------------------------------- */
  .settings__page--device .manage-device-stack{
    display:grid!important;
    grid-template-columns:minmax(420px,.9fr) minmax(520px,1.1fr)!important;
    gap:18px!important;
    align-items:start!important;
  }

  .settings__page--device .pwa-install{
    grid-column:1/-1!important;
    width:100%!important;
  }

  .settings__page--device .device-add{
    grid-column:1!important;
    grid-row:auto!important;
    width:100%!important;
  }

  .settings__page--device .manage-device-stack>.settings__card,
  .settings__page--device .device-cloud-list{
    grid-column:2!important;
    width:100%!important;
  }

  .settings__page--device .device-add__people{
    gap:12px!important;
  }

  .settings__page--device .device-cloud-card{
    min-height:84px!important;
    padding:14px 15px!important;
  }

  /* ---------------------------------------------------------------
     SYNCHRONISATION
     L'ancienne page restait coincée dans une colonne à gauche.
     On donne ici une vraie grille desktop à ses propres enfants.
     --------------------------------------------------------------- */
  .settings__page--sync .settings__body{
    display:block!important;
  }

  .settings__page--sync .sync-foundation{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:18px!important;
  }

  .settings__page--sync .sync-foundation__hero,
  .settings__page--sync .sync-live-card{
    grid-column:auto!important;
    min-width:0!important;
    width:100%!important;
    min-height:150px!important;
  }

  .settings__page--sync .sync-conflicts{
    grid-column:1/-1!important;
  }

  .settings__page--sync .sync-foundation>.settings__card,
  .settings__page--sync .sync-foundation>.sync-panel,
  .settings__page--sync .sync-foundation>.e2e-status{
    min-width:0!important;
    width:100%!important;
  }

  .settings__page--sync .settings__card{
    max-width:none!important;
  }

  .settings__page--sync #sync-endpoint{
    min-height:48px!important;
  }

  .settings__page--sync .sync-actions{
    gap:9px!important;
  }

  .settings__page--sync .sync-actions .btn{
    min-height:42px!important;
  }

  /* ---------------------------------------------------------------
     SÉCURITÉ
     --------------------------------------------------------------- */
  .settings__page--security .settings__body{
    display:grid!important;
    grid-template-columns:minmax(330px,.72fr) minmax(560px,1.28fr)!important;
    gap:18px!important;
    align-items:start!important;
  }

  .settings__page--security .manage-security-status{
    grid-column:1/-1!important;
    min-height:78px!important;
  }

  .settings__page--security .settings__card{
    min-width:0!important;
  }

  .settings__page--security .settings__card:nth-of-type(1){
    grid-column:1!important;
  }

  .settings__page--security .settings__card:nth-of-type(2){
    grid-column:2!important;
    grid-row:2 / span 2!important;
  }

  .settings__page--security .settings__card:nth-of-type(3){
    grid-column:1!important;
  }

  .settings__page--security .manage-password-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }

  .settings__page--security .manage-password-grid .field:first-child{
    grid-column:1/-1!important;
  }

  /* ---------------------------------------------------------------
     CALENDRIER / CATÉGORIES
     --------------------------------------------------------------- */
  .settings__page--calendar .settings-calendar-sources{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .settings__page--calendar .calendar-source{
    min-height:180px!important;
  }

  .settings__page--calendar .row--category,
  .settings__page--shared .row--category{
    font-size:14px!important;
  }

  /* ---------------------------------------------------------------
     PROFIL / LIEN / SAUVEGARDES
     --------------------------------------------------------------- */
  .manage-profile-identity__copy p,
  .manage-milestone__details,
  .backup-simple-hero p,
  .backup-explain p{
    font-size:13px!important;
    line-height:1.5!important;
  }
}

/* Fenêtre desktop plus étroite : aucune grille ne doit s'écraser. */
@media(min-width:901px) and (max-width:1280px){
  .manage-shell--master-detail{
    grid-template-columns:250px minmax(0,1fr)!important;
  }

  .manage-master{
    width:250px!important;
  }

  .settings__page--device .manage-device-stack,
  .settings__page--security .settings__body,
  .settings__page--sync .sync-foundation{
    grid-template-columns:1fr!important;
  }

  .settings__page--device .pwa-install,
  .settings__page--device .device-add,
  .settings__page--device .manage-device-stack>.settings__card,
  .settings__page--device .device-cloud-list,
  .settings__page--security .manage-security-status,
  .settings__page--security .settings__card,
  .settings__page--sync .sync-foundation>*{
    grid-column:1!important;
    grid-row:auto!important;
  }

  .settings__page--calendar .settings-calendar-sources{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Mobile : texte lisible sans gonfler inutilement l'interface. */
@media(max-width:900px){
  #world-settings{
    --settings-text:15px;
    --settings-small:13px;
    --settings-label:11px;
  }

  #world-settings .settings__head-copy h3{
    font-size:28px!important;
  }

  #world-settings .settings__card-head h4{
    font-size:16px!important;
  }

  #world-settings .btn,
  #world-settings .control,
  #world-settings input,
  #world-settings select,
  #world-settings textarea{
    font-size:14px!important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   V62 · GÉRER MOBILE — navigation simple en bas
   Le rail latéral est masqué sur mobile.
   Les 4 grandes rubriques + Refuge sont accessibles en permanence.
   ═══════════════════════════════════════════════════════════════════════════ */

.manage-mobile-nav{
  display:none;
}

@media(max-width:900px){
  .manage-master{
    display:none!important;
  }

  .manage-detail{
    display:block!important;
    min-height:100dvh;
  }

  .manage-detail__topbar{
    position:sticky;
    top:0;
    z-index:28;
    min-height:72px;
    grid-template-columns:52px minmax(0,1fr) 52px;
    gap:10px;
    padding:12px 16px;
    background:color-mix(in srgb,var(--paper) 94%, white 6%);
    backdrop-filter:blur(16px);
  }

  .manage-detail__back,
  .manage-detail__home{
    display:grid!important;
    width:52px;
    height:52px;
    border-radius:16px;
    border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
    background:color-mix(in srgb,var(--paper) 88%, white 12%);
    box-shadow:0 10px 28px rgba(31,24,20,.05);
    font-size:1.1rem;
  }

  .manage-detail__title small{
    font-size:.84rem!important;
    letter-spacing:.12em;
  }

  .manage-detail__title strong{
    font-size:1.18rem!important;
    line-height:1.1;
    white-space:normal;
  }

  .manage-detail__content{
    width:100%;
    min-height:calc(100dvh - 72px);
    padding:20px 14px calc(112px + env(safe-area-inset-bottom))!important;
  }

  .manage-mobile-nav{
    position:fixed;
    left:10px;
    right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    z-index:40;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
    padding:10px;
    border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);
    border-radius:24px;
    background:color-mix(in srgb,var(--paper) 92%,white 8%);
    backdrop-filter:blur(18px);
    box-shadow:0 18px 40px rgba(31,24,20,.10);
  }

  .manage-mobile-nav__item{
    min-height:64px;
    display:grid;
    justify-items:center;
    align-content:center;
    gap:5px;
    padding:7px 4px;
    border:0;
    border-radius:18px;
    background:transparent;
    color:var(--ink-muted);
    cursor:pointer;
  }

  .manage-mobile-nav__item.is-on,
  .manage-mobile-nav__item:active{
    background:var(--terra-soft);
    color:var(--terra);
  }

  .manage-mobile-nav__item--home{
    color:var(--wine);
  }

  .manage-mobile-nav__icon{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:12px;
    font-size:1rem;
    background:color-mix(in srgb,var(--paper-warm) 72%,white 28%);
  }

  .manage-mobile-nav__item.is-on .manage-mobile-nav__icon{
    background:var(--terra-tint);
  }

  .manage-mobile-nav__item small{
    font:700 .72rem/1.05 var(--font-body);
    letter-spacing:.01em;
  }

  .settings__head{
    padding-bottom:16px;
    gap:14px;
  }

  .settings__head-copy h3{
    font-size:2.45rem!important;
    line-height:.98;
  }

  .settings-row{
    min-height:84px;
    padding:14px 14px;
    border-radius:0;
  }

  .settings-row__icon{
    width:52px;
    height:52px;
    border-radius:16px;
    font-size:1.05rem;
  }

  .settings-row__copy strong{
    font-size:1.05rem!important;
    line-height:1.2;
  }

  .settings-row__copy small{
    font-size:.93rem!important;
    line-height:1.35;
  }

  .settings-group>h4{
    margin-left:2px;
    font-size:.86rem;
  }

  .settings-group__rows{
    border-radius:22px;
  }
}

@media(max-width:560px){
  .manage-mobile-nav{
    left:8px;
    right:8px;
    gap:4px;
    padding:8px 6px;
  }

  .manage-mobile-nav__item{
    min-height:60px;
    border-radius:16px;
  }

  .manage-mobile-nav__icon{
    width:28px;
    height:28px;
    font-size:.95rem;
  }

  .manage-mobile-nav__item small{
    font-size:.65rem;
  }

  .manage-detail__content{
    padding:18px 12px calc(104px + env(safe-area-inset-bottom))!important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   V63 · GÉRER — finition premium mobile + PC
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------------------------
   PC — navigation plus professionnelle, plus calme, plus lisible
   --------------------------------------------------------------------------- */
@media(min-width:901px){

  .manage-shell--master-detail{
    grid-template-columns:272px minmax(0,1fr)!important;
  }

  .manage-master{
    width:272px!important;
    padding:22px 16px!important;
    gap:18px!important;
    background:
      linear-gradient(180deg,
        color-mix(in srgb,var(--paper-warm) 96%,white 4%),
        color-mix(in srgb,var(--paper) 96%,var(--paper-warm) 4%)
      )!important;
    border-right:1px solid color-mix(in srgb,var(--ink) 8%,transparent)!important;
  }

  .manage-master__back{
    min-height:44px!important;
    border-radius:12px!important;
    background:transparent!important;
    border-color:color-mix(in srgb,var(--ink) 7%,transparent)!important;
  }

  .manage-master__title{
    padding:2px 8px 8px!important;
  }

  .manage-master__title small{
    font-size:11px!important;
  }

  .manage-master__title h2{
    font-size:34px!important;
    letter-spacing:-.03em;
  }

  .manage-master__groups{
    gap:4px!important;
  }

  .manage-master__group{
    border:0!important;
    border-radius:12px!important;
    background:transparent!important;
    overflow:visible!important;
  }

  .manage-master__group-head{
    min-height:58px!important;
    grid-template-columns:38px minmax(0,1fr) 16px!important;
    padding:8px 9px!important;
    border-radius:12px!important;
  }

  .manage-master__group-head:hover{
    background:color-mix(in srgb,var(--paper) 78%,transparent)!important;
  }

  .manage-master__group.is-open .manage-master__group-head{
    background:var(--paper)!important;
    box-shadow:0 8px 22px -22px rgba(31,24,20,.4);
  }

  .manage-master__group-icon{
    width:38px!important;
    height:38px!important;
    border-radius:11px!important;
  }

  .manage-master__group-head strong{
    font-size:14px!important;
  }

  .manage-master__group-head small{
    font-size:11px!important;
    line-height:1.25!important;
  }

  .manage-master__children{
    padding:4px 6px 8px 52px!important;
    gap:2px!important;
  }

  .manage-master__children button{
    min-height:34px!important;
    border-radius:8px!important;
    padding:5px 8px!important;
  }

  .manage-master__children button strong{
    font-size:12px!important;
  }

  .manage-master__device{
    min-height:46px!important;
    border-radius:12px!important;
    padding:0 11px!important;
    background:linear-gradient(
      135deg,
      color-mix(in srgb,var(--paper) 95%,white 5%),
      color-mix(in srgb,var(--terra) 4%,var(--paper))
    )!important;
  }

  .manage-detail{
    background:
      radial-gradient(circle at 85% 4%,color-mix(in srgb,var(--gold) 5%,transparent),transparent 26%),
      var(--paper)!important;
  }

  .manage-detail__content{
    padding-top:46px!important;
  }

  .settings__page{
    max-width:1360px!important;
  }

  .settings__head{
    padding-bottom:22px!important;
    margin-bottom:2px!important;
  }

  .settings__head-copy h3{
    font-size:clamp(36px,2.4vw,46px)!important;
    letter-spacing:-.035em;
  }

  .settings__head-copy p{
    font-size:14px!important;
    line-height:1.55!important;
    color:color-mix(in srgb,var(--ink) 66%,transparent)!important;
  }

  .settings__autosave{
    min-height:34px!important;
    padding:0 12px!important;
    font-size:12px!important;
    background:color-mix(in srgb,var(--sage) 6%,var(--paper))!important;
  }

  .settings__card,
  .settings-group__rows,
  .manage-security-status,
  .settings-status-line,
  .settings-add-device,
  .settings-connect-cloud{
    border-color:color-mix(in srgb,var(--ink) 9%,transparent)!important;
    box-shadow:0 16px 36px -34px rgba(31,24,20,.45)!important;
  }

  .settings__card{
    border-radius:16px!important;
  }

  .settings__card-head{
    padding:18px 20px 14px!important;
  }

  .settings__card-body{
    padding:18px 20px 20px!important;
  }

  .settings-row{
    min-height:72px!important;
    padding:12px 14px!important;
  }

  .settings-row__copy strong{
    font-size:15px!important;
  }

  .settings-row__copy small{
    font-size:12.5px!important;
  }

  .settings-row__icon{
    width:42px!important;
    height:42px!important;
    border-radius:12px!important;
  }
}

/* ---------------------------------------------------------------------------
   MOBILE — navigation du bas structurelle, pas un dock flottant
   --------------------------------------------------------------------------- */
@media(max-width:900px){

  .manage-shell--master-detail{
    min-height:100dvh!important;
    background:var(--paper)!important;
  }

  .manage-master{
    display:none!important;
  }

  .manage-detail{
    display:block!important;
    min-height:100dvh!important;
    background:var(--paper)!important;
  }

  .manage-detail__topbar{
    position:sticky!important;
    top:0!important;
    z-index:35!important;
    min-height:66px!important;
    grid-template-columns:46px minmax(0,1fr) 46px!important;
    gap:10px!important;
    padding:10px 12px!important;
    border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent)!important;
    background:color-mix(in srgb,var(--paper) 98%,transparent)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  .manage-detail__back,
  .manage-detail__home{
    width:46px!important;
    height:46px!important;
    border-radius:14px!important;
    border:1px solid color-mix(in srgb,var(--ink) 10%,transparent)!important;
    background:var(--paper)!important;
    box-shadow:none!important;
  }

  .manage-detail__title{
    gap:2px!important;
  }

  .manage-detail__title small{
    font-size:11px!important;
    letter-spacing:.14em!important;
  }

  .manage-detail__title strong{
    font-size:20px!important;
    line-height:1.08!important;
  }

  .manage-detail__content{
    width:100%!important;
    min-height:calc(100dvh - 66px)!important;
    padding:18px 14px calc(88px + env(safe-area-inset-bottom))!important;
  }

  /* Barre basse pleine largeur : même logique qu'une vraie app native */
  .manage-mobile-nav{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:50!important;
    height:calc(74px + env(safe-area-inset-bottom))!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:0!important;
    padding:4px 6px env(safe-area-inset-bottom)!important;
    border:0!important;
    border-top:1px solid color-mix(in srgb,var(--ink) 9%,transparent)!important;
    border-radius:0!important;
    background:var(--paper)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    box-shadow:0 -10px 28px -26px rgba(31,24,20,.35)!important;
  }

  .manage-mobile-nav__item{
    min-width:0!important;
    min-height:66px!important;
    display:grid!important;
    justify-items:center!important;
    align-content:center!important;
    gap:3px!important;
    padding:4px 1px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:color-mix(in srgb,var(--ink) 58%,transparent)!important;
  }

  .manage-mobile-nav__item.is-on{
    color:var(--terra)!important;
  }

  .manage-mobile-nav__item--home{
    color:var(--wine)!important;
  }

  .manage-mobile-nav__icon{
    width:34px!important;
    height:30px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:10px!important;
    background:transparent!important;
    font-size:1rem!important;
  }

  .manage-mobile-nav__item.is-on .manage-mobile-nav__icon{
    background:var(--terra-soft)!important;
  }

  .manage-mobile-nav__item small{
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font:700 10.5px/1 var(--font-body)!important;
    letter-spacing:0!important;
  }

  /* Titres moins gigantesques, plus "application" */
  .settings__head{
    display:grid!important;
    gap:8px!important;
    padding:4px 0 15px!important;
  }

  .settings__head-copy{
    gap:5px!important;
  }

  .settings__head-copy>small{
    font-size:11px!important;
  }

  .settings__head-copy h3{
    font-size:34px!important;
    line-height:1!important;
    letter-spacing:-.035em!important;
  }

  .settings__head-copy p{
    font-size:14px!important;
    line-height:1.48!important;
    color:color-mix(in srgb,var(--ink) 66%,transparent)!important;
  }

  .settings__autosave{
    width:max-content!important;
    min-height:28px!important;
    font-size:11px!important;
    padding:0 9px!important;
  }

  /* Hubs : plus compacts et plus naturels */
  .settings-group__rows{
    border-radius:16px!important;
    overflow:hidden!important;
    box-shadow:none!important;
  }

  .settings-row{
    min-height:76px!important;
    grid-template-columns:44px minmax(0,1fr) auto!important;
    gap:11px!important;
    padding:11px 12px!important;
  }

  .settings-row__icon{
    width:44px!important;
    height:44px!important;
    border-radius:13px!important;
  }

  .settings-row__copy strong{
    font-size:16px!important;
    line-height:1.15!important;
  }

  .settings-row__copy small{
    font-size:13px!important;
    line-height:1.35!important;
  }

  .settings-row em{
    display:none!important;
  }

  .settings-row>b{
    display:block!important;
    color:var(--ink-faint)!important;
  }

  /* Cartes des pages : moins d'espace perdu */
  .settings__page{
    gap:12px!important;
  }

  .settings__body{
    gap:12px!important;
  }

  .settings__card{
    border-radius:15px!important;
  }

  .settings__card-head{
    padding:13px 14px 10px!important;
  }

  .settings__card-body{
    padding:13px 14px!important;
  }

  .settings__card-head h4{
    font-size:16px!important;
  }

  .settings__card-head p{
    font-size:12.5px!important;
  }

  .manage-security-status,
  .manage-relationship-summary,
  .manage-category-summary,
  .manage-calendar-summary,
  .settings-status-line{
    border-radius:14px!important;
  }

  /* Les grosses vues visuelles restent contenues */
  .settings__page--appearance .ambience-lab__stage{
    min-height:180px!important;
  }

  .settings__page--media .media-grid{
    gap:8px!important;
  }

  .settings__page--device .device-add,
  .settings__page--device .pwa-install,
  .settings-add-device{
    border-radius:15px!important;
  }
}

@media(max-width:420px){
  .manage-detail__content{
    padding-left:11px!important;
    padding-right:11px!important;
  }

  .manage-mobile-nav{
    padding-left:2px!important;
    padding-right:2px!important;
  }

  .manage-mobile-nav__item small{
    font-size:9.5px!important;
  }

  .settings__head-copy h3{
    font-size:31px!important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   V64 · GÉRER MOBILE — barre basse réellement fixe
   ═══════════════════════════════════════════════════════════════════════════ */

@media(max-width:900px){
  /* Le monde Réglages ne scrolle plus lui-même : la zone détail devient le
     scroll container. La barre basse est alors un élément structurel hors scroll. */
  #world-settings{
    overflow:hidden!important;
    padding-bottom:0!important;
  }

  #world-settings .manage-shell--master-detail{
    position:relative!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  #world-settings .manage-detail{
    position:absolute!important;
    inset:0 0 0 0!important;
    height:100%!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    padding-bottom:calc(74px + env(safe-area-inset-bottom))!important;
  }

  #world-settings .manage-detail__content{
    min-height:auto!important;
    padding-bottom:28px!important;
  }

  #world-settings .manage-mobile-nav{
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:80!important;
    transform:none!important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   V64 · Recadrage photo de profil
   ═══════════════════════════════════════════════════════════════════════════ */

.profile-crop-open[hidden]{
  display:none!important;
}

.profile-crop-open{
  margin-top:2px;
}

.profile-cropper{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:18px;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}

.profile-cropper.is-on{
  opacity:1;
  pointer-events:auto;
}

.profile-cropper__backdrop{
  position:absolute;
  inset:0;
  background:rgba(31,24,20,.34);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.profile-cropper__panel{
  position:relative;
  z-index:1;
  width:min(760px,100%);
  max-height:min(860px,calc(100dvh - 28px));
  overflow:auto;
  border:1px solid color-mix(in srgb,var(--gold) 26%,var(--line));
  border-radius:24px;
  background:var(--paper);
  box-shadow:0 30px 90px rgba(31,24,20,.22);
}

.profile-cropper__head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:22px 24px 17px;
  border-bottom:1px solid var(--line);
}

.profile-cropper__head>div{
  display:grid;
  gap:4px;
}

.profile-cropper__head small{
  color:var(--terra);
  font:800 11px var(--font-body);
  letter-spacing:.16em;
}

.profile-cropper__head h3{
  margin:0;
  font:500 32px/1 var(--font-display);
}

.profile-cropper__head p{
  margin:0;
  color:var(--ink-muted);
  font:13px/1.45 var(--font-body);
}

.profile-cropper__close{
  width:40px;
  height:40px;
  flex:0 0 auto;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--paper);
  color:var(--ink);
  font-size:20px;
  cursor:pointer;
}

.profile-cropper__workspace{
  display:grid;
  grid-template-columns:minmax(280px,1fr) minmax(220px,.72fr);
  gap:22px;
  align-items:center;
  padding:24px;
}

.profile-cropper__preview{
  position:relative;
  width:min(100%,420px);
  aspect-ratio:1;
  justify-self:center;
  overflow:hidden;
  border-radius:22px;
  background:var(--paper-warm);
  box-shadow:inset 0 0 0 1px var(--line);
}

.profile-cropper__preview canvas{
  width:100%;
  height:100%;
  display:block;
}

.profile-cropper__ring{
  position:absolute;
  inset:8%;
  border:2px solid rgba(255,255,255,.9);
  border-radius:50%;
  box-shadow:0 0 0 100vmax rgba(31,24,20,.22);
  pointer-events:none;
}

.profile-cropper__controls{
  display:grid;
  gap:17px;
}

.profile-cropper__controls label{
  display:grid;
  gap:7px;
}

.profile-cropper__controls label>span{
  color:var(--ink-muted);
  font:700 12px var(--font-body);
}

.profile-cropper__controls input[type="range"]{
  width:100%;
  accent-color:var(--terra);
}

.profile-cropper__foot{
  display:flex;
  justify-content:flex-end;
  gap:9px;
  padding:16px 24px 22px;
  border-top:1px solid var(--line);
}

@media(max-width:700px){
  .profile-cropper{
    padding:0;
    align-items:end;
  }

  .profile-cropper__panel{
    width:100%;
    max-height:94dvh;
    border-radius:24px 24px 0 0;
  }

  .profile-cropper__head{
    padding:18px 16px 14px;
  }

  .profile-cropper__head h3{
    font-size:28px;
  }

  .profile-cropper__workspace{
    grid-template-columns:1fr;
    gap:18px;
    padding:18px 16px;
  }

  .profile-cropper__preview{
    width:min(78vw,340px);
  }

  .profile-cropper__controls{
    gap:12px;
  }

  .profile-cropper__foot{
    padding:13px 16px calc(14px + env(safe-area-inset-bottom));
  }

  .profile-cropper__foot .btn{
    flex:1;
  }
}