/* HDJ Planner — Thème Rose Santé (offline)
   Variante féminine, tons rose clair & ambiance santé.
   Basé sur le style complet HDJ Planner.
*/

:root{
  /* Palette */
  --bg:#fff5f8;               /* rose très pâle */
  --bg2:#fdf2f8;              /* second plan */
  --card:#ffffff;
  --text:#2a2030;
  --muted:#7b6a78;

  /* Accents santé (rose + menthe) */
  --primary:#7a3d5a;          /* framboise prune */
  --primary-2:#5f2f45;
  --accent:#ff6fae;           /* rose bonbon soft */
  --accent-2:#ff3d93;         /* rose plus vif */
  --heal:#2fd3c2;             /* menthe médicale */
  --heal-2:#11b6a6;

  /* UI */
  --border:#f1d9e6;
  --border-2:#f6e6ef;
  --shadow: 0 12px 34px rgba(122,61,90,.10);
  --radius: 16px;

  /* Focus */
  --focus: 0 0 0 4px rgba(255,111,174,.22);
}

*{box-sizing:border-box}
html,body{height:100%
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing : grayscale;
  text-rendering: geometricPrecision;
  line-height: 1.45;
  font-size : 15px;

}


/* Typographie — amélioration lisibilité */
body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  line-height: 1.45;
  font-size: 15px;
}

p{margin:0 0 10px; line-height:1.55}
small,.small{font-size:12.5px; line-height:1.35; color:var(--muted)}

label{
  display:block;
  font-weight: 950;
  font-size: 12.5px;
  letter-spacing: .25px;
  color: var(--primary);
  margin: 0 0 6px;
}

.h1{
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: .2px;
}
.h2{
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: .18px;
}

/* Texte secondaire harmonisé */
.muted{
  color: var(--muted);
  line-height: 1.45;
}

/* Inputs — écriture plus nette */
.input,.select,.textarea{
  font-size: 14.5px;
  line-height: 1.35;
}
.input::placeholder,.textarea::placeholder{
  color: rgba(123,106,120,.75);
}

/* Table — densité & hiérarchie */
.table th{
  font-size: 11.5px;
  letter-spacing: .45px;
}
.table td{
  font-size: 14px;
  line-height: 1.35;
}

/* Topbar — meilleure lecture */
.topbar{
  letter-spacing: .15px;
}
.brand{
  font-size: 14px;
}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(255,111,174,.14), transparent 55%),
    radial-gradient(900px 420px at 85% 0%, rgba(47,211,194,.12), transparent 55%),
    linear-gradient(180deg, var(--bg), #fff 35%, var(--bg2));
}

.wrap{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* Topbar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  color:white;
  background:
    radial-gradient(650px 220px at 20% 0%, rgba(255,111,174,.32), transparent 55%),
    radial-gradient(650px 220px at 80% 0%, rgba(47,211,194,.22), transparent 55%),
    linear-gradient(90deg, var(--primary), var(--primary-2));
  border-bottom:1px solid rgba(255,255,255,.10);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.2px;
}
.brand .dot{
  width:12px;height:12px;border-radius:999px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 4px rgba(255,111,174,.18);
}

.nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.nav button{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight:900;
  letter-spacing:.1px;
  transition: transform .06s ease, background .12s ease, border-color .12s ease;
}
.nav button:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
}
.nav button:active{transform: translateY(1px)}
.nav button.active{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.28);
}

.row{display:flex; gap:10px; align-items:center}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  color:white;
  border-radius:999px;
  padding:6px 10px;
  font-size:13px;
  font-weight:900;
  backdrop-filter: blur(6px);
}

/* Main view */
#view{
  flex:1;
  padding:16px;
}

/* Cards & layout */
.card{
  background: linear-gradient(180deg, var(--card), #fff);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}

.section{padding:14px}
.grid{display:grid; gap:12px}
.grid.cols-2{grid-template-columns:1fr 1fr}
.grid.cols-3{grid-template-columns:1fr 1fr 1fr}

@media(max-width:900px){
  .grid.cols-2,.grid.cols-3{grid-template-columns:1fr}
}

.h1{font-size: 20px; font-weight:1000; margin:0 0 8px; line-height: 1.15; letter-spacing: .2px}
.h2{font-size: 15px; font-weight:900; margin:0 0 8px; line-height: 1.2; letter-spacing: .18px}
.muted{color:var(--muted)}
.spacer{flex:1}

/* Tables */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.table th,.table td{
  padding:10px;
  border-bottom:1px solid var(--border-2);
}
.table th{
  font-size:12px;
  font-weight:900;
  color:var(--muted);
  text-transform: uppercase;
  letter-spacing: .35px;
}
.table tr:hover td{
  background: rgba(255,111,174,.06);
}

/* Inputs & buttons */
.btn{
  border:1px solid var(--border);
  background: rgba(255,255,255,.9);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  font-weight:900;
  transition: transform .06s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.btn:hover{
  border-color: #efc3d9;
  box-shadow: 0 10px 24px rgba(122,61,90,.08);
}
.btn:active{transform: translateY(1px)}
.btn.primary{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-color: rgba(255,61,147,.45);
  color:#2a0d1b;
}
.btn.primary:hover{
  box-shadow: 0 14px 28px rgba(255,61,147,.18);
}
.btn.small{padding:7px 9px;font-size:13px}

.input,.select,.textarea{
  width:100%;
  border:1px solid var(--border);
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.92);
  outline: none;
  transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.input:focus,.select:focus,.textarea:focus{
  border-color: rgba(255,61,147,.35);
  box-shadow: var(--focus);
  background: #fff;
}
.textarea{min-height:90px}

/* Badges / états utiles (optionnels si utilisés par le JS) */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:6px 10px;
  font-weight:900;
  font-size:12px;
  border:1px solid var(--border);
  background: rgba(255,111,174,.10);
  color: var(--primary);
}
.badge.heal{
  background: rgba(47,211,194,.12);
  border-color: rgba(47,211,194,.25);
  color: #0b5f57;
}

/* Modal */
.modal{
  position:fixed;
  inset:0;
  background: rgba(122,61,90,.45);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:1000;
  backdrop-filter: blur(2px);
}
.modal.open{display:flex}
.modal .panel{
  width:min(860px,100%);
  background: linear-gradient(180deg, #fff, #fff7fb);
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(255,111,174,.22);
  box-shadow: 0 18px 50px rgba(122,61,90,.18);
}
.modal .panel .head,
.modal .panel .foot{
  padding:12px 14px;
  background: linear-gradient(180deg, #fff, rgba(255,111,174,.06));
  border-bottom:1px solid rgba(255,111,174,.16);
}
.modal .panel .foot{
  border-top:1px solid rgba(255,111,174,.14);
  border-bottom:none;
}
.modal .panel .body{padding:14px}

.iconbtn{
  border:1px solid var(--border);
  background: rgba(255,255,255,.92);
  width:34px;height:34px;
  border-radius:12px;
  cursor:pointer;
  transition: transform .06s ease, box-shadow .12s ease, border-color .12s ease;
}
.iconbtn:hover{
  border-color: #efc3d9;
  box-shadow: 0 10px 22px rgba(122,61,90,.08);
}
.iconbtn:active{transform: translateY(1px)}

/* Sélection texte plus douce */
::selection{
  background: rgba(255,111,174,.28);
}

/* Liens (si présents) */
a{
  color: var(--primary);
  text-decoration: none;
  font-weight: 900;
}
a:hover{ text-decoration: underline; }


/* === VISIBILITÉ & LISIBILITÉ — HDJ v1 === */

/* Base */
body {
  color: #2B2B2B;
  line-height: 1.6;
}

/* Titres */
h1, h2, h3 {
  color: #1F1F1F;
  font-weight: 600;
}

/* Table agenda */
.table, table {
  border-collapse: separate;
  border-spacing: 0 8px;
}

tr {
  background: #FFFFFF;
}

tr:nth-child(even) {
  background: #FAFAFA;
}

/* Heures */
.td-hour {
  font-weight: 600;
  color: #111;
  white-space: nowrap;
}

/* Titres événements */
.event-title {
  font-weight: 600;
  color: #111;
}

/* Badges */
.badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.badge.done {
  background: #E6F4EA;
  color: #137333;
}

.badge.todo {
  background: #F3E8FD;
  color: #6B2FB8;
}

/* Boutons actions */
.actions button {
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

tr:hover .actions button {
  opacity: 1;
}

/* Cartes */
.card {
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}


/* === ALIGNEMENT EN-TÊTES / CONTENU — HDJ v2 === */

/* Tables : alignement strict */
table th,
table td {
  text-align: left;
  vertical-align: middle;
}

/* Colonnes spécifiques */
th.col-hour, td.col-hour {
  text-align: left;
  white-space: nowrap;
}

th.col-type, td.col-type,
th.col-state, td.col-state {
  text-align: center;
}

th.col-actions, td.col-actions {
  text-align: right;
}

/* Espacement identique header / body */
table th {
  padding: 12px 10px;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

table td {
  padding: 14px 10px;
}


/* === AGENDA EN COLONNES (SEMAINE — logique humaine) — HDJ v3 === */

.agenda-board{
  padding: 0 46px;
  display:grid;
  grid-template-columns: repeat(var(--agenda-cols, 7), minmax(0, 1fr));
gap:12px;
  overflow-x:hidden;   /* pas de scroll horizontal */
  overflow-y:visible;
  padding-bottom:6px;
  direction:ltr;       /* ordre humain gauche -> droite */
}

.daycol{
  direction:ltr;
  border:1px solid var(--border);
  background: linear-gradient(180deg, #fff, rgba(255,111,174,.03));
  border-radius: var(--radius);
  padding:12px;
  min-height: 120px;
}

.daycol-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border-2);
  margin-bottom:10px;
}

.daycol-date{
  font-weight:1000;
  letter-spacing:.2px;
}

.daycol-count{
  min-width:28px;
  height:28px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,61,147,.10);
  border:1px solid rgba(255,61,147,.22);
  font-weight:1000;
  color: var(--primary);
}

.daycol-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.eventcard{
  border:1px solid var(--border-2);
  background: rgba(255,255,255,.96);
  border-radius: 14px;
  padding:10px;
  box-shadow: 0 10px 22px rgba(122,61,90,.06);
}

.eventcard-time{
  font-weight:1000;
  white-space:nowrap;
}

.eventcard-title{
  font-weight:1000;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.9);
  border-radius:999px;
  padding:5px 9px;
  font-weight:900;
  font-size:12px;
  color: var(--primary);
}

/* Mois */
.month-wrap{
  direction: ltr;
}

.month-head{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:10px;
  margin-bottom:10px;
}

.month-head-cell{
  direction:ltr;
  text-align:center;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.35px;
  color: var(--muted);
  text-transform: uppercase;
}

.month-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:10px;
}

.month-cell{
  direction:ltr;
  border:1px solid var(--border);
  background: rgba(255,255,255,.92);
  border-radius: 14px;
  padding:10px;
  min-height: 120px;
}

.month-cell.off{
  opacity:.55;
  background: rgba(255,255,255,.65);
}

.month-cell.today{
  border-color: rgba(255,61,147,.45);
  box-shadow: 0 14px 28px rgba(255,61,147,.10);
}

.month-cell-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.month-daynum{
  font-weight:1000;
}

.month-count{
  min-width:22px;
  height:22px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(47,211,194,.12);
  border:1px solid rgba(47,211,194,.22);
  font-weight:1000;
  color:#0b5f57;
  font-size:12px;
}

.month-items{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.month-item{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  border:1px solid var(--border-2);
  background: rgba(255,111,174,.06);
  border-radius: 12px;
  padding:6px 8px;
  cursor:pointer;
  font-weight:900;
  text-align:left;
}

.month-item:hover{
  background: rgba(255,111,174,.10);
}

.month-item-time{
  font-variant-numeric: tabular-nums;
  opacity:.85;
}

.month-item-title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* === AGENDA COLONNES (SEMAINE — sans scroll horizontal) — HDJ v3 (override) === */
/* Board: 7 colonnes qui tiennent dans la largeur */
.agenda-board{
  display:grid;
  grid-template-columns: repeat(var(--agenda-cols, 7), minmax(0, 1fr));
gap:12px;
  overflow-x:hidden;
  overflow-y:visible;
  padding:10px 2px 14px;
  direction:ltr;
}


/* Colonne jour */
.daycol{
  min-width:0;              /* permet la réduction dans la grille */
  border:1px solid var(--border);
  border-radius:18px;
  background: linear-gradient(180deg, #fff, rgba(255,111,174,.04));
  box-shadow: 0 10px 24px rgba(122,61,90,.06);
}
.daycol-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px 10px;
  border-bottom:1px solid var(--border-2);
}
.daycol-date{ font-weight:1000; letter-spacing:.2px; }
.daycol-count{
  min-width:34px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-weight:1000;
  border:1px solid var(--border);
  background: rgba(255,111,174,.10);
  color: var(--primary);
}
.daycol-body{ padding:10px 12px 12px; min-height:140px; }

/* Carte évènement : layout propre */
.eventcard{
  border:1px solid var(--border-2);
  background:#fff;
  border-radius:16px;
  padding:10px 10px 12px;
  margin-bottom:10px;
}
.eventcard:last-child{ margin-bottom:0; }

.eventcard-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.eventcard-time{
  font-weight:1000;
  white-space:nowrap;
  font-variant-numeric: tabular-nums;
}
.eventcard-title{
  font-weight:1000;
  line-height:1.2;
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.eventcard-foot{
  margin-top:10px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.eventcard-badges{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}
.eventcard-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Icon buttons compacts */
.iconbtn.iconbtn-sm{
  width:32px;
  height:32px;
  border-radius:12px;
  font-size:14px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

/* Mobile: colonnes plus larges */
@media(max-width:900px){
  .daycol{ flex:0 0 86vw; max-width:86vw; }
}

.hr{height:1px;background:var(--border-2);margin:10px 0}


/* Scroll confort */
.agenda-board{
  overflow-x:hidden;
}


/* --- Navigation planning (scroll horizontal) --- */
.agenda-board-wrap{
  position: relative;
}
.agenda-nav{
  display:none;
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.92);
  cursor: pointer;
}
.agenda-nav.left{ left: 6px; }
.agenda-nav.right{ right: 6px; }
.agenda-nav:disabled{
  opacity: .35;
  cursor: default;
}