/* Planning : même structure sur mobile et desktop, sans modifier les modales. */
body:has(.planning-view.view--active), body:has(.planning-view.view--active) .app-shell { background: #f7fafb; }
.planning-view { --planning-ink: #102f3e; --planning-muted: #668091; --planning-rose: #e56f94; max-width: 820px; margin-inline: auto; padding-top: 0 !important; color: var(--planning-ink); }
.planning-view .planning-tabs { width: 100%; margin: 0 0 18px; padding: 0; gap: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: rgba(255,255,255,.94); }
.planning-view .planning-tab { position: relative; min-height: 48px; padding: 0 14px; gap: 9px; border-radius: 0; color: #7b8b95; background: transparent; box-shadow: none; font-family: "Poppins", sans-serif; font-size: .9rem; font-weight: 700; }
.planning-view .planning-tab svg { flex-shrink: 0; width: 21px; height: 21px; }
.planning-view .planning-tab:hover { color: var(--ink); background: rgba(229,111,148,.035); transform: none; }
.planning-view .planning-tab.is-active { color: var(--rose); }
.planning-view .planning-tab::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; border-radius: 4px 4px 0 0; background: var(--rose); opacity: 0; transform: scaleX(.45); transition: opacity .2s ease, transform .2s ease; }
.planning-view .planning-tab.is-active::after { opacity: 1; transform: scaleX(1); }
.planning-view .planning-header { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.planning-view .planning-header h1 { min-width: 0; margin: 0; color: var(--planning-ink); font-size: clamp(1.25rem, 4.9vw, 2rem); line-height: 1.15; letter-spacing: -.04em; }
.planning-view .planning-header-actions { flex-shrink: 0; }
.planning-view #addPlanButton { display: inline-flex; align-items: center; gap: 6px; width: auto; min-height: 44px; padding: 9px 13px; border-radius: 15px; background: var(--planning-rose); color: #fff; font-size: .9375rem; box-shadow: none; }
.planning-view #addPlanButton svg { flex-shrink: 0; width: 22px; height: 22px; }
.planning-view .calendar-card { padding: 12px; border: 1px solid #e1e8ec; border-radius: 20px; background: #fff; box-shadow: 0 5px 16px #2945550b; }
.planning-calendar-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.planning-view .calendar-title { justify-content: flex-start; gap: 6px; margin: 0; padding: 0; min-width: 0; }
.planning-view .calendar-title strong { min-width: 0; text-align: center; color: var(--planning-ink); font-size: clamp(.9375rem, 3.8vw, 1.25rem); line-height: 1.2; }
.planning-view .calendar-title button { flex: 0 0 36px; width: 36px; height: 44px; border-radius: 50%; background: #f3f6f7; color: var(--planning-ink); }
.planning-view .calendar-title svg { width: 18px; height: 18px; }
.planning-view .calendar-expand-button { position: static; display: inline-flex; gap: 7px; min-height: 44px; width: auto; height: auto; padding: 8px 11px; border: 1px solid #c9e8f1; border-radius: 14px; color: #008ab3; background: #eff9fc; font-size: .9375rem; font-weight: 850; }
.planning-view .calendar-expand-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }
.planning-week-range { margin: 4px 2px 10px; color: var(--planning-muted); font-size: .875rem; }
.planning-view .week-strip { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.planning-view .week-day { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 64px; gap: 4px; padding: 8px 0; border-radius: 14px; color: var(--planning-ink); background: transparent; box-shadow: none; }
.planning-view .week-day small { color: var(--planning-muted); font-size: .75rem; line-height: 1.2; font-weight: 500; }
.planning-view .week-day strong { font-size: 1.1rem; line-height: 1.2; }
.planning-view .week-day.is-selected { color: #fff; background: #49a6bb; }
.planning-view .week-day.is-selected small { color: #fff; }
.planning-view .week-day.is-today:not(.is-selected) strong { color: #008ab3; text-decoration: underline; text-underline-offset: 5px; }
.planning-view .week-day-weather { display: none; }
.planning-view .week-day i { position: absolute; bottom: 3px; background: #e56f94; }
.planning-view .week-day.is-selected i { background: #fff; }
.planning-sync-button, .planning-explore-button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px; border: 1px solid #7bc9dc; border-radius: 13px; color: #0085ab; background: #eff8fb; font-size: .9375rem; font-weight: 850; }
.planning-sync-button { margin-top: 12px; }
.planning-sync-button > svg, .planning-explore-button > svg { flex: 0 0 23px; width: 23px; height: 23px; }
.planning-sync-button .planning-device-icon { width: 18px; height: 22px; margin-left: auto; }
.planning-sync-button > svg:first-child { margin-left: auto; }
.planning-view .agenda-layout { padding-top: 18px; gap: 12px; }
.planning-view .section-heading { align-items: center; gap: 8px; margin: 0 0 12px; }
.planning-view .section-heading h2 { margin: 0; color: var(--planning-ink); font-size: clamp(1.05rem, 4.2vw, 1.4rem); line-height: 1.25; }
.planning-view .section-heading > span { flex-shrink: 0; color: var(--planning-muted); font-size: .8125rem; }
.planning-view .agenda-empty { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 2px 12px; padding: 18px 14px; border: 1px solid #ddecf1; border-radius: 18px; background: #eff7f9; text-align: left; }
.planning-view .agenda-empty > svg, .planning-view .agenda-empty > span { grid-row: 1 / span 2; width: 32px; height: 32px; color: var(--planning-muted); font-size: 2rem; }
.planning-view .agenda-empty h3 { margin: 0; color: var(--planning-ink); font-size: 1rem; line-height: 1.25; }
.planning-view .agenda-empty p { margin: 2px 0 0; color: var(--planning-muted); font-size: .875rem; line-height: 1.35; }
.planning-view .agenda-empty > button { grid-column: 2; }
.planning-view .agenda-thumb { display: block; }
.planning-ideas { margin-top: 20px; }
.planning-ideas-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.planning-ideas-heading h2 { margin: 0; color: var(--planning-ink); font-size: clamp(1.25rem, 5vw, 1.6rem); letter-spacing: -.035em; }
.planning-ideas-heading p { margin: 0; color: var(--planning-muted); font-size: .875rem; }
.planning-ideas-heading > button { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 4px 0 4px 8px; color: #0085ab; background: transparent; font-size: .875rem; font-weight: 800; white-space: nowrap; }
.planning-ideas-heading svg { width: 16px; height: 16px; }
#planningIdeasList { display: grid; gap: 8px; }
.planning-idea { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 8px; padding: 6px; border: 1px solid #e7ecef; border-radius: 19px; background: #fff; box-shadow: 0 5px 15px #29455508; }
.planning-idea-main { display: grid; grid-template-columns: 32% minmax(0, 1fr); align-items: center; gap: 11px; min-width: 0; padding: 0; color: var(--planning-ink); background: transparent; text-align: left; }
.planning-idea-photo { display: grid; place-items: center; height: 77px; overflow: hidden; border-radius: 13px; background: #e8f1ed; color: #6da590; }
.planning-idea-photo img { display: block; min-width: 0; min-height: 0; width: 100%; height: 100%; object-fit: cover; }
.planning-idea-photo > svg { width: 28px; height: 28px; }
.planning-idea-copy { min-width: 0; }
.planning-idea-copy strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 5px; font-size: .9375rem; line-height: 1.2; font-weight: 850; }
.planning-idea-copy small { display: flex; align-items: center; gap: 4px; margin-top: 3px; color: var(--planning-muted); font-size: .75rem; line-height: 1.2; }
.planning-idea-copy small svg { flex: 0 0 14px; width: 14px; height: 14px; }
.planning-idea-add { display: grid; place-items: center; width: 44px; height: 48px; padding: 8px; border-radius: 13px; color: var(--planning-rose); background: #fceff4; }
.planning-idea-add svg { width: 26px; height: 26px; }
.planning-explore-button { margin-top: 12px; background: #fff; border-color: #1699be; }
.planning-ideas-empty { margin: 0; padding: 16px; border: 1px dashed #cbdde5; border-radius: 16px; color: var(--planning-muted); font-size: .875rem; line-height: 1.4; }
.planning-view :is(button, a):focus-visible { outline: 3px solid #0a96b9; outline-offset: 2px; }
@media (max-width: 640px) { .planning-view .planning-tabs { width: calc(100% + 30px); margin-inline: -15px; }.planning-view .planning-tab { min-height: 44px; height: 44px; gap: 6px; padding-inline: 5px; font-size: .7rem; }.planning-view .planning-tab svg { width: 18px; height: 18px; }.planning-view .planning-tab::after { height: 2px; }.planning-view .agenda-item { grid-template-columns: 42px 60px minmax(0, 1fr) 32px; gap: 7px; padding: 9px; }.planning-view .agenda-thumb { width: 60px; height: 65px; }.planning-view .agenda-copy { min-width: 0; }.planning-view .agenda-copy strong { overflow-wrap: anywhere; font-size: .875rem; } }
@media (max-width: 370px) { .planning-view .planning-tab { gap: 4px; font-size: .65rem; }.planning-view .planning-tab svg { width: 17px; height: 17px; } }
@media (max-width: 360px) { .planning-view .calendar-expand-button span { display: none; }.planning-view .calendar-expand-button { padding: 8px; }.planning-view .planning-header { gap: 8px; }.planning-view #addPlanButton { padding-inline: 9px; font-size: .8125rem; }.planning-idea-main { grid-template-columns: 29% minmax(0, 1fr); gap: 8px; } }
@media (min-width: 641px) { .planning-view .calendar-card { padding: 18px 22px; }.planning-view .week-day { min-height: 78px; }.planning-view .calendar-title { gap: 12px; }.planning-view .calendar-title button { width: 44px; flex-basis: 44px; }.planning-idea-photo { height: 100px; }.planning-idea { grid-template-columns: minmax(0, 1fr) 60px; padding: 9px; }.planning-idea-main { grid-template-columns: 170px minmax(0, 1fr); gap: 16px; }.planning-idea-add { width: 52px; height: 52px; }.planning-idea-copy strong { font-size: 1.125rem; }.planning-idea-copy small { font-size: .9375rem; } }
html[data-theme="dark"] .planning-view { --planning-ink: #e1edf2; --planning-muted: #abc0cb; --planning-rose: #ed9ab9; }
html[data-theme="dark"] body:has(.planning-view.view--active), html[data-theme="dark"] body:has(.planning-view.view--active) .app-shell { background: #111c21; }
html[data-theme="dark"] .planning-view :is(.planning-tabs, .calendar-card, .planning-idea, .planning-explore-button) { background: #19282e; border-color: #34464f; }
html[data-theme="dark"] .planning-view :is(.agenda-empty, .planning-sync-button, .calendar-expand-button) { background: #19323c; border-color: #37596a; color: #9ddcee; }
html[data-theme="dark"] .planning-view .calendar-title button { background: #2b3b42; }
html[data-theme="dark"] .planning-idea-add { background: #3c2734; }
html[data-theme="dark"] .planning-view #addPlanButton { color: #fff; background: #e56f94; }