:root{
  --bg:#f4f8f8;--w:#fff;--t:#18393d;--m:#71878a;--l:#dce9e7;
  --g:#168c84;--g2:#37b4ab;--soft:#e0f4f0;--blue:#2f7fb5;--bs:#e8f2fb;
  --shadow:0 10px 28px rgba(32,72,77,.08)
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--t)}
button,input,select{font:inherit}
.hidden{display:none!important}
.shell{max-width:1120px;margin:auto;padding:30px 24px 60px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}
.topbar h1{margin:0;font-size:30px}.topbar p{margin:4px 0 0;color:var(--m);font-size:14px}
.authbox{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.user-label{font-size:13px;color:var(--m)}
.primary,.secondary{border:0;border-radius:14px;padding:12px 16px;font-weight:800;cursor:pointer}
.primary{background:linear-gradient(135deg,var(--g),#2ca19a);color:#fff}
.secondary{background:#fff;border:1px solid var(--l);color:var(--t)}
.signin-card{background:#fff;border:1px solid var(--l);border-radius:24px;box-shadow:var(--shadow);padding:36px;max-width:620px;margin:70px auto;text-align:center}
.signin-card h2{margin-top:0}.signin-card p{color:var(--m);line-height:1.5}

.searchbox{position:relative;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--l);padding:9px 14px;border-radius:20px;box-shadow:var(--shadow);margin-bottom:22px}
.search-icon{font-size:25px;color:var(--m);width:24px;display:flex;justify-content:center}
.searchbox input{flex:1;border:0;outline:0;font-size:16px;background:transparent;padding:11px 0}
.results{position:absolute;top:64px;left:0;right:0;background:#fff;border:1px solid var(--l);border-radius:18px;box-shadow:0 18px 45px rgba(25,55,60,.16);z-index:30;overflow:hidden}
.result-row{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--l)}
.result-row:last-child{border-bottom:0}.result-title{font-weight:850}.result-meta{font-size:12px;color:var(--m);margin-top:3px}
.thumb{width:48px;height:66px;border-radius:9px;object-fit:contain;background:#eef5f4}
.thumb-fallback{width:48px;height:66px;border-radius:9px;background:linear-gradient(135deg,var(--g),var(--blue));display:grid;place-items:center;color:#fff;font-weight:900}
.plus{width:40px;height:40px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--g);color:white;font-size:25px;line-height:1;cursor:pointer}
.no-results{padding:15px;color:var(--m);font-size:13px}

.tabs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.tab{height:78px;border:1px solid var(--l);background:#fff;border-radius:20px;font-size:18px;font-weight:850;box-shadow:var(--shadow);cursor:pointer}
.tab.active{background:linear-gradient(135deg,var(--g),#2ca19a);color:#fff;border-color:transparent}
.summary{display:flex;justify-content:space-between;align-items:center;margin:0 2px 14px;color:var(--m);font-size:13px}.summary strong{color:#126f6a}
.section-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--m);font-weight:850;margin:22px 0 9px 4px}
.list{background:#fff;border:1px solid var(--l);border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}
.empty{padding:34px;text-align:center;color:var(--m)}
.show-row{display:grid;grid-template-columns:82px 1fr 190px;gap:18px;align-items:center;padding:17px 20px;border-bottom:1px solid var(--l)}
.show-row:last-child{border-bottom:0}
.poster{width:74px;height:104px;border-radius:13px;object-fit:contain;background:#eef5f4;box-shadow:0 5px 14px rgba(25,57,61,.10)}
.poster-fallback{width:74px;height:104px;border-radius:13px;background:linear-gradient(135deg,var(--g),var(--blue));display:grid;place-items:center;color:white;font-weight:900}
.title{font-size:19px;font-weight:850}.ep{font-size:14px;font-weight:750;margin-top:4px}.meta{font-size:12px;color:var(--m);margin-top:6px}
.badge{display:inline-block;background:var(--bs);color:#2e6e9a;padding:5px 9px;border-radius:99px;font-size:11px;font-weight:850;margin-bottom:7px}
.progress{height:8px;background:#e6eeee;border-radius:99px;overflow:hidden;margin-top:12px;max-width:520px}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--g),var(--g2));border-radius:99px}
.action{text-align:right}.mark,.ok{border-radius:14px;padding:13px 15px;font-weight:850;cursor:pointer}
.mark{border:0;background:linear-gradient(135deg,var(--g),#2ca19a);color:#fff;min-width:170px}
.ok{border:1px solid #bfe1dc;background:var(--soft);color:#11736d;min-width:125px}
.edit{border:0;background:transparent;color:var(--m);text-decoration:underline;font-size:11px;cursor:pointer;margin-top:8px}
.datebox{background:var(--bs);color:#2f6d98;border-radius:14px;padding:11px 13px;text-align:center;font-weight:850}
.modal-bg{position:fixed;inset:0;background:rgba(13,38,41,.42);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{width:min(560px,100%);background:#fff;border-radius:24px;padding:24px;position:relative;box-shadow:0 25px 65px rgba(0,0,0,.2)}
.close{position:absolute;right:16px;top:12px;border:0;background:transparent;font-size:30px;color:var(--m);cursor:pointer}
.modal-show{display:grid;grid-template-columns:78px 1fr;gap:15px;align-items:center;margin-bottom:20px}.modal-poster{width:72px;height:100px;border-radius:12px;object-fit:contain;background:#eef5f4}
.modal h2{margin:0 0 5px}.modal p{margin:0;color:var(--m);font-size:14px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
.form-grid label{font-size:12px;font-weight:800;color:var(--m)}.form-grid select{display:block;width:100%;margin-top:6px;padding:12px;border:1px solid var(--l);border-radius:12px;background:#fff}
.wide{width:100%}.muted{color:var(--m)}
.history-list{margin-top:18px}.history-ep{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--l)}
.history-ep:last-child{border-bottom:0}.status{border:1px solid var(--l);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:850;cursor:pointer}
.status.seen{background:var(--soft);color:#11736d;border-color:#bfe1dc}.status.todo{background:#fff2ef;color:#a45443;border-color:#efd2ca}
@media(max-width:720px){
 .topbar{align-items:flex-start;flex-direction:column}.authbox{justify-content:flex-start}.tabs{grid-template-columns:1fr 1fr}
 .show-row{grid-template-columns:64px 1fr}.poster,.poster-fallback{width:58px;height:82px}.action{grid-column:2;text-align:left}
 .form-grid{grid-template-columns:1fr}
}

/* Fenêtre d'ajout d'une série — version large */
#progressModal .modal {
  width: min(760px, 94vw);
  max-height: 88vh;
  padding: 32px 36px 34px;
  border-radius: 28px;
}

#progressModal .modal-show {
  grid-template-columns: 110px 1fr;
  gap: 24px;
  margin-bottom: 28px;
}

#progressModal .modal-poster {
  width: 100px;
  height: 140px;
  border-radius: 15px;
}

#progressModal .modal h2 {
  font-size: 28px;
  line-height: 1.15;
  margin-bottom: 8px;
}

#progressModal .modal p {
  font-size: 15px;
  line-height: 1.5;
}

#progressModal .form-grid {
  gap: 20px;
  margin: 26px 0;
}

#progressModal .form-grid label {
  font-size: 14px;
}

#progressModal .form-grid select {
  min-height: 54px;
  margin-top: 8px;
  padding: 0 14px;
  font-size: 16px;
  border-radius: 14px;
}

#progressModal .wide {
  min-height: 56px;
  font-size: 17px;
  border-radius: 16px;
}

@media (max-width: 700px) {
  #progressModal .modal {
    width: 94vw;
    padding: 24px 20px;
  }

  #progressModal .modal-show {
    grid-template-columns: 80px 1fr;
    gap: 16px;
  }

  #progressModal .modal-poster {
    width: 76px;
    height: 108px;
  }

  #progressModal .modal h2 {
    font-size: 22px;
  }

  #progressModal .form-grid {
    grid-template-columns: 1fr;
  }
}
/* Menus Saison / Épisode */
select {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #173f42;
}


.tab {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.tab-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.tab-icon svg {
  display:block;
}

/* Navigation principale plus clairement cliquable */
.tabs {
  gap: 16px;
}

.tab {
  min-height: 76px;
  border: 2px solid #168c84;
  background: #ffffff;
  color: #168c84;
  border-radius: 18px;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(22,140,132,.08);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.tab:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 20px rgba(22,140,132,.16);
  background: #f2fbf9;
}

.tab.active {
  background: linear-gradient(135deg,#168c84,#31aaa2);
  color: #ffffff;
  border-color: #168c84;
  box-shadow: 0 8px 20px rgba(22,140,132,.22);
}

.tab:active {
  transform: translateY(0);
}

.tab-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e4f5f2;
}

.tab.active .tab-icon {
  background: rgba(255,255,255,.18);
}


/* Loupe de recherche */
.search-icon {
  font-size: 34px;
  color: #168c84;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}


.brand-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-title img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 12px;
}

.brand-title h1 {
  margin: 0;
}

/* Logo Mes séries dans l'en-tête */
.brand-title img {
  display: none;
}

.brand-title::before {
  content: "";
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: block;
  background-image: url("favicon2.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
}



/* Suppression série */
.trash {
  margin-left: 9px;
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border: 1px solid #d6e5e3;
  border-radius: 10px;
  background: #fff;
  color: #78918f;
  cursor: pointer;
  transition: all .15s ease;
}

.trash:hover {
  color: #b14d4d;
  border-color: #e7bcbc;
  background: #fff6f6;
  transform: translateY(-1px);
}

.trash svg {
  display: block;
}


/* ===== Nouvelle correction de progression ===== */

#historyModal .modal {
  width: min(760px, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#historyEpisodes {
  overflow-y: auto;
  padding-right: 6px;
  margin-top: 18px;
}

.history-season {
  border: 1px solid #d6e7e5;
  border-radius: 13px;
  margin-bottom: 10px;
  overflow: hidden;
  background: #fff;
}

.season-header {
  min-height: 54px;
  display: grid;
  grid-template-columns: 1fr auto 42px;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: #fff;
}

.season-expand {
  border: 0;
  background: transparent;
  color: #173f42;
  display: flex;
  align-items: center;
  gap: 10px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
  padding: 0;
}

.season-arrow {
  width: 18px;
  font-size: 23px;
  line-height: 1;
}

.season-count {
  color: #6f8989;
  font-size: 13px;
  font-weight: 700;
}

.season-master {
  width: 30px;
  height: 30px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.season-master input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.season-master span {
  width: 24px;
  height: 24px;
  border: 2px solid #a8d4cf;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  background: #fff;
  font-weight: 900;
}

.season-master input:checked + span {
  background: #209d94;
  border-color: #209d94;
  color: #fff;
}

.season-episodes {
  border-top: 1px solid #dceae8;
}

.season-episodes.hidden {
  display: none;
}

.history-ep {
  min-height: 54px;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid #e2eceb;
}

.history-ep:last-child {
  border-bottom: 0;
}

.episode-check {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 6px;
  border: 2px solid #abd6d1;
  background: #fff;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.episode-check.checked {
  background: #209d94;
  border-color: #209d94;
}

.history-ep-info strong {
  color: #173f42;
  font-size: 14px;
}

.history-ep-info .meta {
  margin-top: 3px;
}

.history-summary {
  padding: 14px 4px 4px;
  color: #688383;
  font-size: 13px;
  font-weight: 700;
}

/* ===== Placement propre de la poubelle ===== */

.action {
  display: grid;
  grid-template-columns: auto 36px;
  grid-template-rows: auto auto;
  justify-content: end;
  align-items: center;
  column-gap: 8px;
  row-gap: 8px;
}

.action br {
  display: none;
}

.action > :first-child {
  grid-column: 1 / 3;
  grid-row: 1;
  justify-self: end;
}

.action .edit {
  grid-column: 1;
  grid-row: 2;
  justify-self: end;
  margin: 0;
}

.action .trash {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  margin: 0;
}

@media (max-width: 700px) {
  #historyModal .modal {
    width: 96vw;
    max-height: 92vh;
  }

  .season-header {
    grid-template-columns: 1fr auto 36px;
    padding: 0 10px;
  }

  .history-ep {
    grid-template-columns: 28px 1fr auto;
    padding: 8px 10px;
  }
}



/* =========================================================
   V2 - SEPTEMBRE 2026
   ========================================================= */

/* ---------- ACTIONS DES CARTES ---------- */

.action {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  min-width: 210px;
}

.action br {
  display: none !important;
}

.action > .mark,
.action > .ok {
  flex-basis: 100%;
  margin-left: auto;
}

.action .edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  min-height: 36px;
  padding: 7px 12px;

  border: 1px solid #acd9d4;
  border-radius: 10px;

  background: #f1fbf9;
  color: #168c84;

  font: inherit;
  font-size: 13px;
  font-weight: 750;

  cursor: pointer;
  white-space: nowrap;

  transition: .15s ease;
}

.action .edit:hover {
  background: #e3f6f3;
  border-color: #79c5bd;
  transform: translateY(-1px);
}

.edit-icon {
  font-size: 15px;
  line-height: 1;
}


/* ---------- POUBELLE ---------- */

.action .trash {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin: 0;

  border: 1px solid #acd9d4;
  border-radius: 10px;

  background: #f1fbf9;
  color: #168c84;

  cursor: pointer;
  transition: .15s ease;
}

.action .trash:hover {
  background: #e3f6f3;
  border-color: #79c5bd;
  color: #117a73;
  transform: translateY(-1px);
}


/* ---------- À VENIR ---------- */

.future-status {
  display: inline-flex;
  align-items: center;

  margin-top: 4px;
  padding: 5px 9px;

  border-radius: 999px;

  font-size: 12px;
  font-weight: 800;
}

.future-status.ended {
  background: #eef4f3;
  color: #587774;
}

.future-status.waiting {
  background: #e6f6f3;
  color: #168c84;
}

.muted-date {
  color: #91a6a4 !important;
  background: #f5f8f8 !important;
}

.future-info {
  min-width: 0;
}


/* ---------- MODALE PROGRESSION ---------- */

#historyModal {
  padding: 16px;
  box-sizing: border-box;
  overflow: hidden;
}

#historyModal .modal {
  position: relative;

  width: min(760px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);

  display: flex;
  flex-direction: column;

  overflow: hidden;
}

#historyModal .modal > h2,
#historyTitle {
  flex: 0 0 auto;
  padding-right: 45px;
}

#closeHistory {
  position: absolute !important;
  z-index: 20;

  top: 14px !important;
  right: 14px !important;

  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 !important;

  border-radius: 50%;

  background: #f0f7f6;
  color: #168c84;
}

#historyEpisodes {
  flex: 1 1 auto;
  min-height: 0;

  overflow-y: auto !important;
  overscroll-behavior: contain;

  padding: 4px 6px 10px 0;
}


/* ---------- SAISONS PLUS CLAIRES ---------- */

.history-season {
  border: 1px solid #d9e9e7;
  border-radius: 14px;

  margin-bottom: 10px;

  background: #fff;

  overflow: hidden;
}

.season-header {
  min-height: 58px;

  display: grid;
  grid-template-columns: minmax(0,1fr) auto 38px;
  align-items: center;

  gap: 10px;
  padding: 0 14px;

  background: #fbfdfd;
}

.season-expand {
  width: 100%;

  display: flex;
  align-items: center;

  gap: 10px;

  padding: 10px 0;

  border: 0;
  background: transparent;

  color: #173f42;

  font: inherit;
  font-weight: 800;

  cursor: pointer;
  text-align: left;
}

.season-expand:hover {
  color: #168c84;
}

.season-arrow {
  width: 22px;

  color: #168c84;

  font-size: 22px;
  font-weight: 800;

  text-align: center;
}

.season-count {
  padding: 5px 8px;

  border-radius: 999px;

  background: #eef7f6;
  color: #60817e;

  font-size: 12px;
  font-weight: 750;

  white-space: nowrap;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  body {
    overflow-x: hidden;
  }

  main,
  .container,
  #appArea {
    max-width: 100%;
  }

  .show-row {
    grid-template-columns: 72px minmax(0,1fr) !important;
    gap: 12px !important;

    padding: 12px !important;

    align-items: start !important;
  }

  .show-row > img,
  .show-row .poster,
  .poster-fallback {
    width: 72px !important;
    min-width: 72px !important;
    height: 104px !important;

    border-radius: 9px !important;
  }

  .show-row .title {
    font-size: 16px !important;
    line-height: 1.2;
  }

  .show-row .ep {
    font-size: 13px !important;
  }

  .show-row .meta {
    font-size: 12px !important;
  }

  .show-row .action {
    grid-column: 1 / -1;

    width: 100%;
    min-width: 0;

    justify-content: flex-end;

    margin-top: 3px;
  }

  .action > .mark,
  .action > .ok {
    flex-basis: auto;
    margin-right: auto;
  }

  .action .edit {
    font-size: 12px;
    padding: 7px 9px;
  }

  /* À VENIR sur téléphone */

  .future-row {
    grid-template-columns: 66px minmax(0,1fr) !important;
    position: relative;
  }

  .future-row > img,
  .future-row .poster,
  .future-row .poster-fallback {
    width: 66px !important;
    min-width: 66px !important;
    height: 96px !important;
  }

  .future-row .datebox {
    grid-column: 2;

    width: fit-content;
    max-width: 100%;

    margin-top: 8px;
    padding: 7px 9px;

    font-size: 12px;
  }

  /* Modale */

  #historyModal {
    padding: 8px !important;
    align-items: center !important;
  }

  #historyModal .modal {
    width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;

    border-radius: 18px !important;

    padding: 16px !important;
  }

  #historyTitle {
    font-size: 20px !important;
    line-height: 1.2;

    margin: 2px 45px 12px 0 !important;
  }

  #closeHistory {
    top: 10px !important;
    right: 10px !important;
  }

  .season-header {
    grid-template-columns: minmax(0,1fr) auto 34px;
    gap: 7px;

    padding: 0 10px;
  }

  .season-count {
    font-size: 11px;
  }

  .history-ep {
    grid-template-columns: 26px minmax(0,1fr) auto !important;

    gap: 8px !important;
    padding: 8px 10px !important;
  }

  .history-ep-info {
    min-width: 0;
  }

  .history-ep-info .meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .history-ep .status {
    font-size: 11px;
    padding: 6px 8px;
  }

  .history-summary {
    position: sticky;
    bottom: 0;

    margin-top: 6px;
    padding: 12px 6px;

    background: rgba(255,255,255,.96);

    backdrop-filter: blur(5px);
  }
}

/* Actions des cartes sur ordinateur et téléphone. */
#todoList,#uptodateList{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
.series-card{display:grid;grid-template-columns:minmax(0,1fr) 64px;gap:12px;align-items:center;margin-bottom:12px}
.series-card>.show-row{min-width:0;grid-template-columns:82px minmax(0,1fr) 210px;background:var(--w);border:1px solid var(--l);border-radius:20px;box-shadow:var(--shadow)}
.series-card .show-row>div{min-width:0}
.series-card .title,.series-card .meta{overflow-wrap:anywhere}
.series-card .action{display:flex!important;flex-direction:column;align-items:stretch;gap:4px;min-width:0}
.series-card .action>.mark,.series-card .action>.ok{width:100%;min-width:0;min-height:50px;margin:0;flex-basis:auto}
.series-card .action .edit{min-height:36px;margin:0;padding:6px 0;border:0;border-radius:0;background:transparent;color:var(--m);font-size:12px;font-weight:400;text-decoration:none;white-space:normal;transform:none}
.series-card .action .edit:hover{color:var(--g);background:transparent}
.series-card>.trash{width:64px;height:72px;margin:0;border:1px solid #acd9d4;border-radius:18px;background:#f1fbf9;color:var(--g);box-shadow:var(--shadow)}
.series-card>.trash svg{width:30px;height:30px}
.series-card>.trash:hover{color:#117a73;background:#e3f6f3;border-color:#79c5bd}
.series-card button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media(max-width:850px){.series-card>.show-row{grid-template-columns:72px minmax(0,1fr)}.series-card .show-row .action{grid-column:1/-1;width:min(100%,240px);justify-self:end}}
@media(max-width:700px){.series-card{grid-template-columns:minmax(0,1fr) 48px;gap:8px}.series-card>.trash{width:48px;height:60px;border-radius:14px}.series-card>.trash svg{width:28px;height:28px}.series-card .show-row .action{width:100%}}


/* Mobile : champ simple et cartes compactes. */
.searchbox input{min-width:0}
@media(max-width:700px){
.searchbox{gap:8px;padding:9px 12px}
.searchbox .search-icon{width:24px;height:32px;font-size:28px}
.searchbox input{width:100%;min-width:0;font-size:16px}
.searchbox input::placeholder{font-size:13px}
.series-card{grid-template-columns:minmax(0,1fr) 44px;gap:6px}
.series-card>.trash{width:44px;height:44px;border-radius:12px;box-shadow:none}
.series-card>.trash svg{width:22px;height:22px}
.future-row{grid-template-rows:auto 1fr;row-gap:6px!important}
.future-row>.poster,.future-row>.poster-fallback{grid-column:1;grid-row:1/3}
.future-row>.future-info{grid-column:2;grid-row:1}
.future-row>.datebox{grid-column:2;grid-row:2;align-self:start;margin-top:0}
}

/* Sur téléphone, suppression dans le coin inférieur de la carte. */
@media(max-width:700px){
.series-card{display:block;position:relative}
.series-card>.trash{position:absolute;right:13px;bottom:13px;width:44px;height:44px;box-shadow:none}
.series-card .action .edit{min-height:44px;padding-right:50px;padding-left:0}
}

/* Curseur des commandes cliquables. */
button:not(:disabled), [role="button"], input[type="button"], input[type="submit"], input[type="checkbox"], select { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2222%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M10%2017V5a2.5%202.5%200%200%201%205%200v8-2a2.5%202.5%200%200%201%205%200v2a2.5%202.5%200%200%201%205%200v2a2.5%202.5%200%200%201%205%200v5c0%205-3%209-7%2010H13c-2-1-3-3-5-6l-5-6a2.5%202.5%200%200%201%204-3l3%203Z%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23168c84%22%20stroke-width%3D%222.5%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 8 2, pointer !important; }
button:not(:disabled) *, [role="button"] * { cursor: inherit !important; }
button:disabled { cursor: not-allowed; }

/* Suppression mobile par glissement volontaire. */
.swipe-hint,.swipe-toggle,.swipe-delete-label{display:none}
@media(max-width:700px){
.swipe-hint{display:block;color:var(--m);font-size:12px;line-height:1.5;margin:0 2px 14px}
.series-card{overflow:hidden;border-radius:20px;isolation:isolate;touch-action:pan-y}
.series-card>.show-row{position:relative;z-index:1;transform:translateX(var(--swipe-offset,0px));transition:transform .2s ease;touch-action:pan-y}
.series-card.swipe-open{--swipe-offset:-96px}
.series-card.swipe-dragging>.show-row{transition:none}
.series-card>.trash{z-index:0;top:0;right:0;bottom:0;width:88px;height:100%;border-radius:16px;flex-direction:column;gap:8px;visibility:hidden;pointer-events:none}
.series-card.swipe-open>.trash,.series-card.swipe-dragging>.trash{visibility:visible;pointer-events:auto}
.swipe-delete-label{display:block;font-size:12px;font-weight:700}
.series-card .swipe-toggle{display:flex;align-items:center;justify-content:center;position:absolute;right:12px;bottom:12px;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--g);font-size:26px;border-radius:10px;cursor:pointer}
.series-card .action .edit{padding-right:48px}
}
@media(prefers-reduced-motion:reduce){.series-card>.show-row{transition:none}}

/* Compact account settings on desktop and mobile. */
.topbar{align-items:flex-start;flex-direction:row}
.topbar>div:first-child{min-width:0}
.settings{position:relative;flex:0 0 auto;z-index:50}
.settings-button{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--l);border-radius:14px;color:var(--g);background:white;box-shadow:var(--shadow)}
.settings-button:hover,.settings-button[aria-expanded="true"]{background:var(--soft);border-color:#acd9d4}
.settings-panel{position:absolute;top:54px;right:0;width:280px;max-width:calc(100vw - 48px);padding:18px;background:white;border:1px solid var(--l);border-radius:20px;box-shadow:0 14px 40px rgba(24,57,61,.18)}
.settings-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.settings-heading h2{font-size:17px;margin:0}
.settings-close{width:32px;height:32px;border:0;background:transparent;color:var(--m);font-size:25px}
.settings-panel .settings-label{display:block;margin:12px 0 6px;font-size:12px;font-weight:700;color:var(--m)}
.settings-panel .user-label{margin:0 0 18px;color:var(--t);font-size:14px;overflow-wrap:anywhere}
.settings-panel select{width:100%;min-height:44px;padding:8px 10px;border:1px solid var(--l);border-radius:10px;background:white;color:var(--t);font-size:16px}
.settings-logout{display:block;width:100%;margin-top:16px;padding:12px 0;border:0;border-top:1px solid var(--l);background:transparent;color:var(--g);text-align:left;font-size:14px;font-weight:600}
.settings button:focus-visible,.settings select:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media(max-width:700px){.topbar{gap:12px}.brand-title{gap:10px}.brand-title::before{width:40px;height:40px;flex-basis:40px}.brand-title h1{font-size:clamp(22px,6vw,28px)}.topbar p{font-size:13px;line-height:1.4}.settings-panel .user-label{font-size:14px}}

/* Réglages : typographie arrondie, légère et cohérente. */
.settings-panel,.settings-panel button,.settings-panel select{font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:normal}
.settings-heading h2{font-size:18px;font-weight:650}
.settings-panel .settings-label{font-size:13px;font-weight:500}
.settings-panel .user-label{font-size:15px;font-weight:500}
.settings-panel select{font-weight:500}
.settings-logout{font-weight:500}
.settings-button svg{display:block}

/* Menus du site, y compris la liste ouverte dans Safari. */
select[hidden]{display:none!important}
.friendly-select{position:relative;min-width:0;margin-top:6px}
.friendly-select-button,.friendly-select-options{font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;font-weight:550;letter-spacing:normal;color:var(--t);line-height:1.4}
.friendly-select-button{width:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;padding:12px 14px;border:1px solid #c5dedb;border-radius:14px;background:#f7fcfb;cursor:pointer}
.friendly-select-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.friendly-select-arrow{flex:none;color:var(--g);font-size:22px;line-height:1}
.friendly-select-button:hover,.friendly-select-button[aria-expanded="true"]{background:var(--soft);border-color:var(--g)}
.friendly-select-button:focus-visible{outline:3px solid #8bcfc7;outline-offset:3px}
.friendly-select-options{position:fixed;z-index:1000;overflow-y:auto;overscroll-behavior:contain;padding:6px;border:1px solid #c5dedb;border-radius:16px;background:#fff;box-shadow:0 12px 32px rgba(24,57,61,.18);font-weight:500}
.friendly-select-options[hidden]{display:none}
.friendly-select-option{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:10px 12px;border-radius:10px;cursor:pointer;overflow-wrap:anywhere}
.friendly-select-option:hover,.friendly-select-option.active{background:var(--soft);color:#11736d}
.friendly-select-check{flex:none;color:var(--g);font-weight:800;width:18px}
#progressModal .form-grid .friendly-select-button{min-height:54px}
.settings-panel .friendly-select-button{font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;font-weight:550}


/* ==================================================
   SYNCHRO APP MOBILE — 15/09/2026
   ================================================== */

.tabs{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.settings-link{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:flex-start;
  border:0;
  background:transparent;
  color:#176f69;
  padding:11px 0;
  font:inherit;
  text-decoration:none;
  cursor:pointer;
}

.movie-filters{
  display:flex;
  gap:4px;
  width:min(520px,100%);
  margin:14px auto 22px;
  padding:4px;
  background:rgba(22,140,132,.08);
  border-radius:999px;
}

.movie-filter{
  flex:1;
  min-height:44px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#168c84;
  font-weight:700;
  cursor:pointer;
}

.movie-filter.active{
  background:#168c84;
  color:white;
}

.movie-web-card{
  display:flex;
  align-items:stretch;
  gap:10px;
  margin-bottom:12px;
}

.movie-main{
  flex:1;
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  padding:10px;
  border:1px solid #d6e9e7;
  border-radius:20px;
  background:white;
  text-align:left;
  cursor:pointer;
}

.movie-web-poster{
  width:56px;
  height:82px;
  flex:0 0 56px;
  object-fit:cover;
  border-radius:10px;
}

.movie-poster-empty{
  display:grid;
  place-items:center;
  background:#e8f5f3;
}

.movie-web-info{
  flex:1;
  min-width:0;
}

.movie-web-info .title{
  font-size:18px;
  font-weight:750;
}

.movie-web-status{
  width:44px;
  height:44px;
  flex:0 0 44px;
  align-self:center;
  border:2px solid #168c84;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#168c84;
  font-size:25px;
  font-weight:800;
}

.movie-web-status.watched{
  background:#168c84;
  color:white;
}

.movie-trash{
  width:54px;
  flex:0 0 54px;
  border:1px solid #b9dfdb;
  border-radius:18px;
  background:#f2fbfa;
  color:#168c84;
  font-size:20px;
  cursor:pointer;
}

.movie-empty{
  padding:40px 20px;
  text-align:center;
  color:#168c84;
}

.movie-empty-icon{
  font-size:38px;
  margin-bottom:12px;
}

.movie-search-result{
  width:100%;
  display:grid;
  grid-template-columns:48px 1fr 46px;
  align-items:center;
  gap:12px;
  padding:10px;
  border:0;
  border-bottom:1px solid #e1eeee;
  background:white;
  text-align:left;
  cursor:pointer;
}

.movie-search-result strong,
.movie-search-result small{
  display:block;
}

.movie-search-result small{
  margin-top:3px;
  color:#81918f;
}

.movie-search-state{
  display:grid;
  place-items:center;
  font-size:26px;
  color:#168c84;
}

.search-group-title{
  padding:10px 12px 6px;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#168c84;
  background:#f7fbfb;
}

.movie-detail{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  text-align:center;
}

.movie-detail-poster{
  width:130px;
  max-height:190px;
  object-fit:contain;
  border-radius:16px;
}

.secondary-movie{
  min-height:52px;
  border:2px solid #168c84;
  border-radius:18px;
  background:white;
  color:#168c84;
  font-weight:750;
}

.support-modal{
  max-width:620px;
}

.support-modal label{
  display:block;
  margin:14px 0;
  font-weight:650;
  color:#526b69;
}

.support-modal input,
.support-modal textarea{
  display:block;
  width:100%;
  margin-top:7px;
  border:1px solid #d3e7e4;
  border-radius:15px;
  background:white;
  padding:13px 14px;
  font:inherit;
}

.support-status{
  min-height:24px;
  margin-top:12px;
  text-align:center;
  font-weight:700;
  color:#168c84;
}

@media(max-width:700px){
  .shell{
    width:100%;
    padding-left:12px;
    padding-right:12px;
  }

  .tabs{
    gap:6px;
  }

  .tab{
    padding-left:6px;
    padding-right:6px;
    font-size:13px;
  }

  .tab-icon{
    margin-right:4px;
  }

  .movie-web-card{
    gap:7px;
  }

  .movie-trash{
    width:48px;
    flex-basis:48px;
  }

  .movie-main{
    gap:10px;
  }
}


/* === FINITIONS POUBELLES + REGLAGES === */

/* Roue Réglages plus grande */
#settingsBtn{
  width:52px !important;
  height:52px !important;
  min-width:52px !important;
  min-height:52px !important;
  border-radius:16px !important;
  display:grid !important;
  place-items:center !important;
}

#settingsBtn svg{
  width:25px !important;
  height:25px !important;
}

/* Poubelle des films : même rendu propre que les séries */
.movie-trash{
  width:58px !important;
  min-width:58px !important;
  flex:0 0 58px !important;
  border:1px solid #9fd7d2 !important;
  border-radius:18px !important;
  background:#f0fbfa !important;
  color:#168c84 !important;
  font-size:0 !important;
  display:grid !important;
  place-items:center !important;
}

/* On remplace l'emoji corbeille par une vraie icône */
.movie-trash::before{
  content:"";
  width:25px;
  height:25px;
  display:block;
  background:center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23168c84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 10v6'/%3E%3Cpath d='M14 10v6'/%3E%3C/svg%3E");
}

.movie-trash:hover{
  background:#e2f7f4 !important;
}

@media(max-width:700px){
  #settingsBtn{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
  }

  #settingsBtn svg{
    width:23px !important;
    height:23px !important;
  }

  .movie-trash{
    width:54px !important;
    min-width:54px !important;
    flex-basis:54px !important;
  }
}



/* ==========================================
   REGLAGES + POUBELLES — FINITION
   ========================================== */

/* Roue : légèrement plus grande que l'ancienne,
   mais proportionnée au header */
#settingsBtn{
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  padding:0 !important;
  border-radius:15px !important;
  display:grid !important;
  place-items:center !important;
  font-family:inherit !important;
}

#settingsBtn svg{
  width:22px !important;
  height:22px !important;
}

/* Toute la fenêtre Réglages utilise la même typo que le site */
#settingsPanel,
#settingsPanel button,
#settingsPanel a,
#settingsPanel select,
#settingsPanel option,
#settingsPanel label,
#settingsPanel span,
#settingsPanel div{
  font-family:inherit !important;
}

/* Titre Réglages */
#settingsPanel h2,
#settingsPanel .settings-title{
  font-size:19px !important;
  line-height:1.25 !important;
  font-weight:750 !important;
  color:#173e3b !important;
}

/* Petits intitulés : Compte Google / Langue du site */
#settingsPanel .settings-label{
  font-size:13px !important;
  line-height:1.3 !important;
  font-weight:600 !important;
  color:#78908e !important;
  margin-bottom:5px !important;
}

/* Nom du compte */
#settingsPanel .settings-user,
#settingsPanel #settingsUser,
#settingsPanel #userName{
  font-size:15px !important;
  line-height:1.35 !important;
  font-weight:650 !important;
  color:#173e3b !important;
}

/* Select langue : plus de police Safari disproportionnée */
#siteLanguage{
  width:100% !important;
  min-height:46px !important;
  padding:0 14px !important;
  border:1px solid #bddedb !important;
  border-radius:14px !important;
  background-color:#fff !important;
  color:#173e3b !important;
  font-family:inherit !important;
  font-size:15px !important;
  line-height:1 !important;
  font-weight:600 !important;
  box-sizing:border-box !important;
}

#siteLanguage:focus{
  outline:2px solid rgba(22,140,132,.20) !important;
  outline-offset:2px !important;
  border-color:#168c84 !important;
}

/* Assistance / Confidentialité / Déconnexion */
#settingsPanel .settings-link,
#settingsPanel #supportBtn,
#settingsPanel #logoutBtn{
  font-family:inherit !important;
  font-size:15px !important;
  line-height:1.35 !important;
  font-weight:600 !important;
  color:#168c84 !important;
  text-decoration:none !important;
}

/* Espacements homogènes */
#settingsPanel .settings-link,
#settingsPanel #supportBtn{
  padding:9px 0 !important;
}

#settingsPanel #logoutBtn{
  padding:12px 0 4px !important;
}

/* Films : poubelle strictement graphique */
.movie-trash{
  width:58px !important;
  min-width:58px !important;
  flex:0 0 58px !important;
  padding:0 !important;
  border:1px solid #9fd7d2 !important;
  border-radius:18px !important;
  background:#f0fbfa !important;
  color:#168c84 !important;
  display:grid !important;
  place-items:center !important;
  font-size:0 !important;
}

.movie-trash::before{
  display:none !important;
  content:none !important;
}

.movie-trash .trash-icon{
  display:block !important;
  width:25px !important;
  height:25px !important;
  fill:none !important;
  stroke:#168c84 !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.movie-trash:hover{
  background:#e3f6f4 !important;
}

@media(max-width:700px){
  #settingsBtn{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
  }

  .movie-trash{
    width:54px !important;
    min-width:54px !important;
    flex-basis:54px !important;
  }
}


/* ==================================================
   REGLAGES + POUBELLES — CORRECTION DEFINITIVE
   ================================================== */

/* ---------- ROUE REGLAGES ---------- */

.settings-button{
  width:56px !important;
  height:56px !important;
  min-width:56px !important;
  min-height:56px !important;
  padding:0 !important;
  border-radius:17px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.settings-button svg{
  width:27px !important;
  height:27px !important;
  display:block !important;
}


/* ---------- PANNEAU REGLAGES ---------- */

.settings-panel{
  font-family:inherit !important;
  color:#173e3b !important;
}

/* Titre */
.settings-heading h2{
  margin:0 !important;
  font-family:inherit !important;
  font-size:18px !important;
  line-height:1.25 !important;
  font-weight:750 !important;
  color:#173e3b !important;
}

/* Croix */
.settings-close{
  font-family:inherit !important;
  font-size:24px !important;
  line-height:1 !important;
  font-weight:400 !important;
  color:#718986 !important;
}

/* "Compte Google" / "Langue du site" */
.settings-label{
  margin-top:15px !important;
  margin-bottom:5px !important;
  font-family:inherit !important;
  font-size:13px !important;
  line-height:1.3 !important;
  font-weight:600 !important;
  color:#758b89 !important;
}

/* Nom du compte */
.user-label{
  margin:0 0 14px !important;
  font-family:inherit !important;
  font-size:15px !important;
  line-height:1.35 !important;
  font-weight:650 !important;
  color:#173e3b !important;
}

/* Sélecteur Français */
#siteLanguage{
  width:100% !important;
  height:46px !important;
  min-height:46px !important;
  box-sizing:border-box !important;

  margin:0 0 5px !important;
  padding:0 14px !important;

  border:1px solid #b9dbd8 !important;
  border-radius:13px !important;

  background-color:#ffffff !important;
  color:#173e3b !important;

  font-family:inherit !important;
  font-size:15px !important;
  line-height:46px !important;
  font-weight:600 !important;

  -webkit-appearance:auto !important;
  appearance:auto !important;
}

/* Assistance / Confidentialité */
.settings-link{
  width:100% !important;
  min-height:42px !important;
  padding:10px 0 !important;

  display:flex !important;
  align-items:center !important;

  border:0 !important;
  background:transparent !important;

  font-family:inherit !important;
  font-size:15px !important;
  line-height:1.35 !important;
  font-weight:600 !important;

  color:#168c84 !important;
  text-decoration:none !important;
}

/* Déconnexion */
.settings-logout{
  width:100% !important;
  padding:14px 0 3px !important;

  font-family:inherit !important;
  font-size:15px !important;
  line-height:1.35 !important;
  font-weight:600 !important;

  color:#168c84 !important;
}


/* ---------- POUBELLES FILMS ---------- */

.movie-trash{
  position:relative !important;

  width:58px !important;
  min-width:58px !important;
  flex:0 0 58px !important;

  padding:0 !important;

  border:1px solid #9fd7d2 !important;
  border-radius:18px !important;

  background:#f0fbfa !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  overflow:hidden !important;

  font-size:0 !important;
  color:transparent !important;
}

/* On masque tout ce qu'il y avait dans le bouton */
.movie-trash > *{
  display:none !important;
}

/* Et on dessine nous-mêmes la vraie corbeille */
.movie-trash::after{
  content:"" !important;
  display:block !important;

  width:27px !important;
  height:27px !important;

  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size:27px 27px !important;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23168c84' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 10v6'/%3E%3Cpath d='M14 10v6'/%3E%3C/svg%3E") !important;
}

.movie-trash:hover{
  background:#e5f7f5 !important;
}


/* ---------- MOBILE ---------- */

@media(max-width:700px){

  .settings-button{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;
  }

  .settings-button svg{
    width:25px !important;
    height:25px !important;
  }

  .movie-trash{
    width:54px !important;
    min-width:54px !important;
    flex-basis:54px !important;
  }
}


/* === BOUTON FILMS HARMONISE AVEC LES SERIES === */

.movie-web-status{
  display:none !important;
}

.movie-watch-action{
  width:210px;
  min-width:210px;
  border:0;
  border-radius:16px;
  background:#168c84;
  color:#fff;
  font-family:inherit;
  font-size:15px;
  font-weight:750;
  cursor:pointer;
  padding:0 18px;
}

.movie-watch-action.watched{
  background:#dff3f0;
  color:#08766f;
  border:1px solid #a9dad5;
}

.movie-watch-action:hover{
  filter:brightness(.97);
}

@media(max-width:700px){
  .movie-web-card{
    flex-wrap:wrap;
  }

  .movie-main{
    flex:1 1 calc(100% - 62px);
  }

  .movie-watch-action{
    order:3;
    width:calc(100% - 62px);
    min-width:0;
    min-height:46px;
    margin-top:-2px;
  }

  .movie-trash{
    order:2;
  }
}



/* =========================================================
   V5 — STYLE CANONIQUE
   Ces règles doivent rester les dernières du fichier
   ========================================================= */

/* ---------- ROUE REGLAGES ---------- */

#settingsBtn.settings-button{
  width:54px !important;
  height:54px !important;
  min-width:54px !important;
  min-height:54px !important;

  padding:0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  border:1px solid #b8deda !important;
  border-radius:16px !important;

  background:#ffffff !important;
  color:#168c84 !important;

  box-shadow:0 5px 15px rgba(29,90,84,.07) !important;
}

#settingsBtn.settings-button svg{
  width:27px !important;
  height:27px !important;
  display:block !important;
}


/* ---------- REGLAGES : TYPO UNIQUE ---------- */

#settingsPanel,
#settingsPanel *,
#settingsPanel button,
#settingsPanel select,
#settingsPanel option,
#settingsPanel a{
  font-family:inherit !important;
  letter-spacing:normal !important;
}

#settingsPanel{
  color:#173e3b !important;
}

#settingsPanel .settings-heading h2{
  margin:0 !important;

  font-size:18px !important;
  line-height:1.3 !important;
  font-weight:750 !important;

  color:#173e3b !important;
}

#settingsPanel .settings-close{
  font-size:23px !important;
  line-height:1 !important;
  font-weight:400 !important;

  color:#718986 !important;
}

#settingsPanel .settings-label{
  display:block !important;

  margin:14px 0 5px !important;

  font-size:13px !important;
  line-height:1.35 !important;
  font-weight:600 !important;

  color:#788e8c !important;
}

#settingsPanel .user-label{
  margin:0 0 14px !important;

  font-size:15px !important;
  line-height:1.35 !important;
  font-weight:600 !important;

  color:#173e3b !important;
}


/* Langue : on supprime le gros rendu Safari */

#siteLanguage{
  -webkit-appearance:none !important;
  appearance:none !important;

  width:100% !important;
  height:44px !important;
  min-height:44px !important;

  box-sizing:border-box !important;

  margin:0 0 7px !important;
  padding:0 42px 0 13px !important;

  border:1px solid #bfdedb !important;
  border-radius:12px !important;

  background-color:#ffffff !important;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23168c84' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;

  background-repeat:no-repeat !important;
  background-position:right 13px center !important;
  background-size:16px !important;

  color:#173e3b !important;

  font-size:15px !important;
  line-height:1 !important;
  font-weight:600 !important;
}

#siteLanguage:focus{
  outline:none !important;
  border-color:#168c84 !important;
  box-shadow:0 0 0 3px rgba(22,140,132,.12) !important;
}


/* Assistance / Confidentialité */

#settingsPanel .settings-link,
#settingsPanel #supportBtn{
  width:100% !important;
  min-height:40px !important;

  box-sizing:border-box !important;

  margin:0 !important;
  padding:9px 0 !important;

  display:flex !important;
  align-items:center !important;

  border:0 !important;
  background:transparent !important;

  color:#168c84 !important;

  font-size:15px !important;
  line-height:1.35 !important;
  font-weight:600 !important;

  text-align:left !important;
  text-decoration:none !important;
}


/* Déconnexion */

#settingsPanel .settings-logout{
  width:100% !important;

  margin-top:10px !important;
  padding:14px 0 3px !important;

  border:0 !important;
  border-top:1px solid #dcebea !important;

  background:transparent !important;

  color:#168c84 !important;

  font-size:15px !important;
  line-height:1.35 !important;
  font-weight:600 !important;

  text-align:left !important;
}


/* ---------- FILMS : CARTE ---------- */

.movie-web-card{
  display:flex !important;
  align-items:stretch !important;

  gap:12px !important;
  margin-bottom:12px !important;
}

.movie-main{
  flex:1 1 auto !important;
  min-width:0 !important;

  border-radius:18px !important;
}


/* ---------- FILMS : MARQUER COMME VU ---------- */

/* Ancien cercle : interdit */
.movie-web-status{
  display:none !important;
}

.movie-watch-action{
  width:210px !important;
  min-width:210px !important;

  padding:0 16px !important;

  border:0 !important;
  border-radius:16px !important;

  background:#168c84 !important;
  color:white !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-family:inherit !important;
  font-size:15px !important;
  line-height:1.2 !important;
  font-weight:750 !important;

  cursor:pointer !important;
}

.movie-watch-action.watched{
  border:1px solid #a9dad5 !important;

  background:#dff3f0 !important;
  color:#08766f !important;
}


/* ---------- POUBELLE FILM ---------- */

/* On neutralise TOUT ce qui a été défini avant */

.movie-trash{
  position:relative !important;

  width:64px !important;
  min-width:64px !important;
  flex:0 0 64px !important;

  padding:0 !important;

  border:1px solid #9fd7d2 !important;
  border-radius:18px !important;

  background:#f0fbfa !important;
  color:#168c84 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  font-size:0 !important;

  overflow:hidden !important;
}

.movie-trash::before,
.movie-trash::after{
  content:none !important;
  display:none !important;
}

.movie-trash > svg.trash-icon{
  display:block !important;

  width:27px !important;
  height:27px !important;

  fill:none !important;
  stroke:#168c84 !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.movie-trash:hover{
  background:#e5f7f5 !important;
}


/* ---------- MOBILE ---------- */

@media(max-width:700px){

  #settingsBtn.settings-button{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    min-height:50px !important;
  }

  #settingsBtn.settings-button svg{
    width:25px !important;
    height:25px !important;
  }

  .movie-web-card{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 54px !important;
    gap:8px !important;
  }

  .movie-main{
    grid-column:1 !important;
  }

  .movie-trash{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;

    width:54px !important;
    min-width:54px !important;
  }

  .movie-watch-action{
    grid-column:1 !important;

    width:100% !important;
    min-width:0 !important;
    min-height:46px !important;
  }
}


/* === V6 — BOUTONS FILMS PLUS COMPACTS === */

.movie-web-card{
  align-items:center !important;
}

.movie-watch-action{
  width:195px !important;
  min-width:195px !important;
  height:52px !important;
  min-height:52px !important;
  align-self:center !important;
  border-radius:15px !important;
  padding:0 16px !important;
}

.movie-trash{
  width:58px !important;
  min-width:58px !important;
  flex-basis:58px !important;
  height:64px !important;
  min-height:64px !important;
  align-self:center !important;
  border-radius:17px !important;
}

.movie-trash > svg.trash-icon{
  width:24px !important;
  height:24px !important;
}

@media(max-width:700px){
  .movie-watch-action{
    width:100% !important;
    min-width:0 !important;
    height:46px !important;
    min-height:46px !important;
  }

  .movie-trash{
    width:52px !important;
    min-width:52px !important;
    flex-basis:52px !important;
    height:58px !important;
    min-height:58px !important;
  }
}

/* === V7 MOVIES + CALENDAR === */



/* =====================================================
   MES FILMS : même architecture visuelle que Mes séries
   ===================================================== */

.movie-web-card{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 58px !important;

  align-items:center !important;

  gap:12px !important;

  margin-bottom:12px !important;
}


/* La grande carte blanche */
.movie-card-body{
  min-width:0 !important;
  min-height:104px !important;

  box-sizing:border-box !important;

  display:flex !important;
  align-items:center !important;

  gap:18px !important;

  padding:10px 16px 10px 10px !important;

  border:1px solid #c9e5e2 !important;
  border-radius:18px !important;

  background:#ffffff !important;

  box-shadow:0 5px 14px rgba(29,90,84,.035) !important;
}


/* Partie affiche + nom */
.movie-main{
  flex:1 1 auto !important;
  min-width:0 !important;
  min-height:84px !important;

  padding:0 !important;

  display:flex !important;
  align-items:center !important;

  gap:14px !important;

  border:0 !important;
  border-radius:0 !important;

  background:transparent !important;
  box-shadow:none !important;

  text-align:left !important;
}


/* Bouton à l'intérieur de la carte */
.movie-watch-action{
  width:190px !important;
  min-width:190px !important;

  height:52px !important;
  min-height:52px !important;

  flex:0 0 190px !important;

  align-self:center !important;

  padding:0 15px !important;

  border:0 !important;
  border-radius:15px !important;

  background:#168c84 !important;
  color:#ffffff !important;

  font-family:inherit !important;
  font-size:15px !important;
  line-height:1.2 !important;
  font-weight:750 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  cursor:pointer !important;
}

.movie-watch-action.watched{
  border:1px solid #a9dad5 !important;

  background:#dff3f0 !important;
  color:#08766f !important;
}


/* Poubelle totalement en dehors de la carte */
.movie-trash{
  grid-column:2 !important;

  width:58px !important;
  min-width:58px !important;
  height:72px !important;
  min-height:72px !important;

  align-self:center !important;

  border:1px solid #9fd7d2 !important;
  border-radius:18px !important;

  background:#f0fbfa !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  color:#168c84 !important;
}

.movie-trash > svg.trash-icon{
  display:block !important;

  width:24px !important;
  height:24px !important;

  fill:none !important;
  stroke:#168c84 !important;
  stroke-width:2 !important;

  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}


/* === CALENDAR V9 MOBILE STYLE === */

.cal-v9-section{
  margin:0 0 30px;
}

.cal-v9-section-title{
  margin:0 4px 11px;

  color:#627a78;

  font-size:12px;
  line-height:1.25;
  font-weight:800;

  letter-spacing:.09em;
  text-transform:uppercase;
}

.cal-v9-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}


/* Carte type app mobile */

.cal-v9-card{
  min-height:112px;

  box-sizing:border-box;

  display:grid;
  grid-template-columns:62px minmax(0,1fr) 92px;

  align-items:center;

  column-gap:14px;

  padding:11px 14px 11px 10px;

  border:1px solid #c7e5e2;
  border-radius:20px;

  background:#fff;

  box-shadow:0 4px 12px rgba(29,90,84,.025);
}


.cal-v9-poster{
  width:62px;
  height:92px;

  object-fit:cover;

  border-radius:11px;
}

.cal-v9-poster-empty{
  display:grid;
  place-items:center;

  background:#e8f5f3;
}


.cal-v9-info{
  min-width:0;
}


.cal-v9-name{
  color:#173e3b;

  font-size:18px;
  line-height:1.22;
  font-weight:800;
}


.cal-v9-episode{
  margin-top:6px;

  color:#858585;

  font-size:16px;
  line-height:1.15;
  font-weight:650;
}


.cal-v9-date{
  margin-top:5px;

  color:#858585;

  font-size:15px;
  line-height:1.15;
  font-weight:550;
}


/* Nombre de jours à droite */

.cal-v9-days{
  align-self:center;

  text-align:center;

  color:#168c84;
}

.cal-v9-days strong{
  display:block;

  font-size:34px;
  line-height:.95;
  font-weight:800;
}

.cal-v9-days span{
  display:block;

  margin-top:7px;

  font-size:14px;
  line-height:1;
  font-weight:750;
}


/* Date à confirmer */

.cal-v9-waiting{
  grid-template-columns:62px minmax(0,1fr);
}

.cal-v9-simple-status{
  margin-top:7px;

  color:#168c84;

  font-size:14px;
  font-weight:700;
}


/* Terminées / archivées */

.cal-v9-simple{
  grid-template-columns:62px minmax(0,1fr) 46px;
}

.cal-v9-state{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border-radius:14px;

  background:#e5f5f3;
  color:#168c84;
}

.cal-v9-state svg{
  width:21px;
  height:21px;

  fill:none;
  stroke:currentColor;

  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.cal-v9-state.archived{
  background:#eef4f3;
  color:#758b89;
}


/* Téléphone */

@media(max-width:700px){

  .cal-v9-card{
    min-height:104px;

    grid-template-columns:56px minmax(0,1fr) 70px;

    column-gap:10px;

    padding:9px 10px 9px 9px;

    border-radius:18px;
  }

  .cal-v9-poster{
    width:56px;
    height:84px;
  }

  .cal-v9-name{
    font-size:16px;
  }

  .cal-v9-episode{
    font-size:14px;
  }

  .cal-v9-date{
    font-size:13px;
  }

  .cal-v9-days strong{
    font-size:29px;
  }

  .cal-v9-days span{
    font-size:12px;
  }

  .cal-v9-waiting{
    grid-template-columns:56px minmax(0,1fr);
  }

  .cal-v9-simple{
    grid-template-columns:56px minmax(0,1fr) 40px;
  }

  .cal-v9-state{
    width:38px;
    height:38px;
  }
}


/* =========================================================
   V10 — ESPACEMENT CALENDRIER + FILMS + ZOOM DESKTOP
   ========================================================= */


/* ---------------------------------------------------------
   CALENDRIER : titres correctement séparés
   --------------------------------------------------------- */

#futureView > .section-label{
  display:block !important;
  margin:0 0 20px 4px !important;
  padding:0 !important;
}

#futureList{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  overflow:visible !important;
}

.cal-v9-section{
  display:block !important;
  position:relative !important;
  margin:0 0 34px !important;
  padding:0 !important;
}

.cal-v9-section-title{
  display:block !important;
  position:relative !important;
  z-index:2 !important;

  margin:0 0 13px 4px !important;
  padding:0 !important;

  line-height:1.25 !important;

  background:transparent !important;
}

.cal-v9-list{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;

  margin:0 !important;
  padding:0 !important;
}


/* ---------------------------------------------------------
   MES FILMS : supprimer le grand fond blanc commun
   --------------------------------------------------------- */

#moviesList{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;

  padding:0 !important;
  margin:0 !important;

  overflow:visible !important;
}

#moviesView .movie-web-card{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;

  padding:0 !important;
}

/* Seule cette partie est blanche */
#moviesView .movie-card-body{
  background:#ffffff !important;

  border:1px solid #c9e5e2 !important;
  border-radius:18px !important;

  box-shadow:0 5px 14px rgba(29,90,84,.035) !important;
}

/* La poubelle est donc réellement posée sur le fond de la page */
#moviesView .movie-trash{
  background:#f0fbfa !important;
  box-shadow:none !important;
}


/* ---------------------------------------------------------
   ZOOM VISUEL DESKTOP
   --------------------------------------------------------- */

@media(min-width:901px){

  .shell{
    max-width:1160px !important;
  }

  /* Header */

  .brand-title img{
    width:56px !important;
    height:56px !important;
  }

  .brand-title h1{
    font-size:34px !important;
  }

  .topbar p{
    font-size:15px !important;
  }


  /* Recherche */

  #searchInput{
    min-height:62px !important;

    font-size:17px !important;

    padding-top:0 !important;
    padding-bottom:0 !important;
  }


  /* 3 gros onglets */

  .tab{
    min-height:82px !important;

    font-size:17px !important;
  }

  .tab-icon{
    transform:scale(1.08);
  }


  /* Films : filtre */

  .movie-filters{
    width:560px !important;

    margin-top:18px !important;
    margin-bottom:24px !important;
  }

  .movie-filter{
    min-height:48px !important;

    font-size:16px !important;
  }


  /* Films : cartes */

  .movie-card-body{
    min-height:116px !important;

    padding:10px 18px 10px 11px !important;
  }

  .movie-web-poster{
    width:66px !important;
    height:96px !important;

    flex-basis:66px !important;
  }

  .movie-web-info .title{
    font-size:19px !important;
  }

  .movie-web-info .meta{
    font-size:14px !important;
  }

  .movie-watch-action{
    width:200px !important;
    min-width:200px !important;

    height:54px !important;
    min-height:54px !important;

    font-size:15px !important;
  }

  .movie-trash{
    width:60px !important;
    min-width:60px !important;
    flex-basis:60px !important;

    height:72px !important;
  }


  /* Calendrier : cartes plus proches du rendu mobile */

  .cal-v9-card{
    min-height:126px !important;

    grid-template-columns:
      68px minmax(0,1fr) 100px !important;

    column-gap:16px !important;

    padding:12px 18px 12px 11px !important;
  }

  .cal-v9-poster{
    width:68px !important;
    height:100px !important;
  }

  .cal-v9-name{
    font-size:20px !important;
  }

  .cal-v9-episode{
    margin-top:7px !important;

    font-size:17px !important;
  }

  .cal-v9-date{
    margin-top:6px !important;

    font-size:16px !important;
  }

  .cal-v9-days strong{
    font-size:38px !important;
  }

  .cal-v9-days span{
    margin-top:8px !important;

    font-size:15px !important;
  }

  .cal-v9-section-title{
    font-size:13px !important;
  }

}


/* === V11 — ZOOM DESKTOP +20 % === */

@media(min-width:1100px){
  .shell{
    zoom:1.20;
  }
}