= tr('bud_import_csv') ?>
@@ -7410,8 +7532,8 @@ window.I18N = {
const activeViewMonth = '= substr($viewMonthDate, 0, 7) ?>';
function toggleDiv(id) { const el = document.getElementById(id); el.style.display = (el.style.display === 'none') ? 'block' : 'none'; }
-function openSuiviModal(id) { document.getElementById(id).classList.add('is-open'); document.body.classList.add('no-scroll'); }
-function closeSuiviModal(id) { document.getElementById(id).classList.remove('is-open'); document.body.classList.remove('no-scroll');}
+function openSuiviModal(id) { document.getElementById(id).classList.add('open'); document.body.classList.add('no-scroll'); }
+function closeSuiviModal(id) { document.getElementById(id).classList.remove('open'); document.body.classList.remove('no-scroll');}
const suggestions = = json_encode(array_map(fn($c) => $c['suggestions'], $categoriesConfig)) ?>;
@@ -7730,15 +7852,24 @@ try {
/* modules/family-calendar/family-calendar.css */
:root {
+ /* Couleurs sémantiques Calendrier */
--c-school-holiday: #e5d9f2;
- --c-public-holiday: #e0e0e0;
+ --c-public-holiday: #e2e8f0; /* Plus marqué que l'original */
--c-off-carole: #ffedd5;
--c-extra-off: #fee2e2;
--c-selected: #bfdbfe;
- --bg-alex: #f0fdfa;
- --text-alex: #0f766e;
+
+ /* Thèmes Parents (Sync Budget) */
+ --bg-alex: #ecfeff;
+ --text-alex: #0891b2;
--bg-laia: #fffbeb;
- --text-laia: #b45309;
+ --text-laia: #d97706;
+
+ /* Rappel des variables Global Design System pour cohérence */
+ --pf-primary: #3b82f6;
+ --pf-border: #e2e8f0;
+ --pf-bg-lighter: #f8fafc;
+ --pf-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.pf-family-calendar .pf-main {
@@ -7756,29 +7887,31 @@ try {
.pf-btn-icon-text {
background: white;
border: 1px solid var(--pf-border);
- border-radius: 20px;
- padding: 8px 16px;
+ border-radius: 50px;
+ padding: 10px 20px;
display: inline-flex;
align-items: center;
gap: 8px;
- font-size: 0.85rem;
+ font-size: 0.9rem;
font-weight: 600;
+ color: #475569;
cursor: pointer;
- transition: 0.2s;
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--pf-shadow-sm);
}
.pf-btn-icon-text:hover {
border-color: var(--pf-primary);
color: var(--pf-primary);
- background: #f0f9ff;
+ background: #f8fafc;
transform: translateY(-1px);
+ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
/* Calendrier Mensuel */
.fc-month-calendar-wrapper {
background: white;
border: 1px solid var(--pf-border);
- border-radius: var(--pf-radius-lg);
+ border-radius: 16px;
padding: 24px;
margin-bottom: 32px;
box-shadow: var(--pf-shadow-sm);
@@ -7797,15 +7930,16 @@ try {
}
.fc-month-nav-row h3 {
margin: 0 !important;
- font-size: 1.4rem !important;
+ font-size: 1.5rem !important;
font-weight: 800 !important;
+ color: #0f172a;
text-transform: capitalize !important;
text-align: center !important;
flex-grow: 1 !important;
}
.fc-nav-button {
- width: 36px;
- height: 36px;
+ width: 40px;
+ height: 40px;
border-radius: 50%;
border: 1px solid var(--pf-border);
background: white;
@@ -7813,20 +7947,22 @@ try {
display: flex;
align-items: center;
justify-content: center;
- font-size: 18px;
- transition: 0.2s;
+ font-size: 20px;
+ transition: all 0.2s;
+ color: #64748b;
}
.fc-nav-button:hover {
border-color: var(--pf-primary);
color: var(--pf-primary);
+ background: #eff6ff;
}
.fc-view-controls {
display: flex !important;
width: 100% !important;
- background: #e2e8f0 !important;
+ background: #f1f5f9 !important;
padding: 4px !important;
- border-radius: 8px !important;
+ border-radius: 12px !important;
}
.fc-view-button {
flex: 1 !important;
@@ -7842,9 +7978,9 @@ try {
transition: 0.2s;
}
.fc-view-button--active {
- background: white;
- color: var(--pf-primary);
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ background: white !important;
+ color: var(--pf-primary) !important;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
font-weight: 700;
}
@@ -7857,7 +7993,21 @@ try {
min-width: 100% !important;
width: 100% !important;
table-layout: fixed;
- border-collapse: collapse !important;
+ border-collapse: separate !important;
+ border-spacing: 0;
+ border-radius: 12px;
+ overflow: hidden;
+ border: 1px solid var(--pf-border) !important;
+}
+.fc-month-table th {
+ padding: 10px !important;
+ font-size: 0.8rem !important;
+ background: #f8fafc !important;
+ color: #64748b !important;
+ font-weight: 700 !important;
+ text-transform: uppercase;
+ border-bottom: 1px solid var(--pf-border) !important;
+ border-right: 1px solid var(--pf-border) !important;
}
.fc-month-table td {
height: 80px;
@@ -7866,15 +8016,12 @@ try {
vertical-align: top;
position: relative;
cursor: pointer;
- border: 1px solid var(--pf-border) !important;
+ border-right: 1px solid var(--pf-border) !important;
+ border-bottom: 1px solid var(--pf-border) !important;
+ transition: background 0.1s;
}
-.fc-month-table th {
- padding: 10px !important;
- font-size: 0.8rem !important;
- background: var(--pf-bg-lighter) !important;
- color: var(--pf-text-muted);
- text-transform: uppercase;
- border: 1px solid var(--pf-border) !important;
+.fc-month-table td:hover:not(.fc-day--other-month) {
+ background: #f1f5f9;
}
.fc-day--other-month {
background: #fcfcfc !important;
@@ -7921,7 +8068,8 @@ try {
background: white;
padding: 8px 16px;
border-radius: 50px;
- border: 1px solid #e2e8f0;
+ border: 1px solid var(--pf-border);
+ box-shadow: var(--pf-shadow-sm);
}
.fc-minimal-balance-card strong.alex {
color: var(--text-alex);
@@ -7937,11 +8085,12 @@ try {
.fc-min-chip {
display: flex;
align-items: center;
- background: var(--pf-bg-page);
+ background: white;
border-radius: 20px;
padding: 3px 10px;
font-size: 0.75rem;
- border: 1px solid #cbd5e1;
+ border: 1px solid var(--pf-border);
+ font-weight: 600;
}
.fc-min-chip .type {
font-weight: 700;
@@ -8062,10 +8211,11 @@ try {
max-height: 80vh;
overflow: auto;
border: 1px solid var(--pf-border);
- border-radius: 12px;
+ border-radius: 16px;
background: white;
box-shadow: var(--pf-shadow-sm);
position: relative;
+ margin-bottom: 24px;
}
#planningTable {
width: 100%;
@@ -8073,27 +8223,59 @@ try {
border-collapse: separate;
border-spacing: 0;
}
+
+/* =========================================================
+ HARMONISATION DES BORDURES ET HEADERS STICKY (1px strict)
+ ========================================================= */
+#planningTable thead tr {
+ height: 30px; /* On fixe la hauteur pour un calcul parfait */
+}
#planningTable thead th {
position: sticky;
- top: 0;
- background: var(--pf-bg-lighter);
- border-bottom: 1px solid var(--pf-border);
- border-right: 1px solid var(--pf-border);
+ background: #f8fafc !important;
+ border: none !important; /* On supprime les bordures natives */
+
+ /* On utilise UNIQUEMENT des ombres internes pour simuler 1px de bordure sans doublement */
+ box-shadow:
+ inset 0 -1px 0 var(--pf-border),
+ inset -1px 0 0 var(--pf-border) !important;
+
padding: 6px;
font-size: 0.75rem;
z-index: 20;
+ color: #475569;
+ background-clip: padding-box;
}
-.col-alex.header-group {
+#planningTable thead tr:nth-child(1) th {
+ top: 0;
+ z-index: 22; /* Au premier plan */
+}
+#planningTable thead tr:nth-child(2) th {
+ top: 30px; /* Exactement la hauteur de la ligne 1 */
+ z-index: 21;
+}
+#planningTable thead tr:nth-child(3) th {
+ top: 60px; /* Ligne 1 + Ligne 2 */
+ z-index: 20;
+}
+
+.col-alex.header-group,
+.col-alex-sub {
background: var(--bg-alex) !important;
- color: var(--text-alex);
+ color: var(--text-alex) !important;
}
-.col-laia.header-group {
+.col-laia.header-group,
+.col-laia-sub {
background: var(--bg-laia) !important;
- color: var(--text-laia);
+ color: var(--text-laia) !important;
}
+
+/* Cellules standards du corps */
#planningTable tbody td {
- border-right: 1px solid var(--pf-bg-lighter);
- border-bottom: 1px solid var(--pf-bg-lighter);
+ position: relative;
+ border: none !important; /* Reset de sécurité */
+ border-right: 1px solid var(--pf-border) !important;
+ border-bottom: 1px solid var(--pf-border) !important;
height: 36px;
padding: 0 4px;
text-align: center;
@@ -8101,23 +8283,19 @@ try {
white-space: nowrap;
cursor: pointer;
}
-.col-alex-sub {
- background: var(--bg-alex);
-}
-.col-laia-sub {
- background: var(--bg-laia);
-}
+
+/* Dimensions des colonnes */
.col-month {
width: 54px !important;
min-width: 54px !important;
max-width: 54px !important;
background: white;
- border-right: 2px solid var(--pf-border) !important;
+ text-align: center;
+ vertical-align: middle;
}
th.col-day,
td.col-day {
min-width: 35px !important;
- border-right: 2px solid var(--pf-border) !important;
}
th.col-total,
td.col-total,
@@ -8129,39 +8307,77 @@ td.col-laia-sub {
min-width: 32px !important;
max-width: 32px !important;
}
+
.rotated-text span {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 0.7rem;
color: var(--pf-text-muted);
}
+
+/* =========================================================
+ GESTION DES COLONNES STICKY (Mois & Semaine)
+ ========================================================= */
+
#planningTable tbody td.col-sticky-mois {
position: sticky !important;
left: 0 !important;
z-index: 15 !important;
background: white !important;
+ padding: 0 !important;
}
+
+#planningTable tbody td.col-sticky-mois .fc-sticky-mois-label {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ writing-mode: vertical-rl;
+ letter-spacing: 1px;
+ text-align: center;
+}
+
+/* 2. Sticky Semaine (Body) */
#planningTable tbody td.col-sticky-sem {
position: sticky !important;
left: 54px !important;
z-index: 14 !important;
background: white !important;
+ /* Ombre portée pour délimiter la zone sticky du reste du tableau */
box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.1);
}
+
+/* 3. Sticky Mois (Header) */
#planningTable thead tr th.col-sticky-mois {
position: sticky !important;
top: 0 !important;
left: 0 !important;
z-index: 30 !important;
background: var(--pf-bg-lighter) !important;
+ /* Les bordures sont gérées par le box-shadow général du thead th */
}
+
+/* 4. Sticky Semaine (Header) */
#planningTable thead tr th.col-sticky-sem {
position: sticky !important;
top: 0 !important;
left: 54px !important;
z-index: 29 !important;
background: var(--pf-bg-lighter) !important;
- box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.1);
+ /* Ombre interne (bordures) + Ombre portée (effet sticky) */
+ box-shadow:
+ inset 0 -1px 0 var(--pf-border),
+ inset -1px 0 0 var(--pf-border),
+ 4px 0 6px -2px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Rétablissement horizontal pour les headers mois et semaine */
+#planningTable thead th.col-month,
+#planningTable tbody td.col-sticky-sem {
+ writing-mode: horizontal-tb;
+ transform: none;
+ padding: 6px !important;
+ text-align: center;
}
/* Panneaux bas & Légendes */
@@ -8171,6 +8387,24 @@ td.col-laia-sub {
gap: 24px;
align-items: start;
}
+
+/* Nouvelles bordures style "Budget" pour les conteneurs */
+.pf-card {
+ background: white;
+ border: 1px solid var(--pf-border);
+ border-radius: 16px;
+ box-shadow: var(--pf-shadow-sm);
+ padding: 24px;
+}
+.pf-card-title {
+ margin-top: 0;
+ margin-bottom: 16px;
+ font-size: 1.25rem;
+ color: #0f172a;
+ border-bottom: 1px solid var(--pf-border);
+ padding-bottom: 12px;
+}
+
.pf-legend-grid {
display: flex;
flex-wrap: wrap;
@@ -8181,14 +8415,17 @@ td.col-laia-sub {
align-items: center;
gap: 6px;
font-size: 0.75rem;
- padding: 4px 8px;
+ padding: 6px 10px;
+ background: #f8fafc;
border: 1px solid var(--pf-border);
- border-radius: 6px;
+ border-radius: 8px;
+ font-weight: 500;
+ color: #475569;
}
.pf-legend-color {
width: 16px;
height: 16px;
- border-radius: 3px;
+ border-radius: 4px;
}
.fc-legend-school-holiday {
background: var(--c-school-holiday);
@@ -8214,33 +8451,41 @@ td.col-laia-sub {
background-size: contain;
border: none;
}
+
.fc-summary-header {
display: flex;
justify-content: space-between;
align-items: center;
- padding: 8px 16px;
+ margin-bottom: 16px;
+ padding-bottom: 12px;
+ border-bottom: 1px solid var(--pf-border);
}
.fc-summ-select {
border: 1px solid var(--pf-border);
border-radius: 6px;
- padding: 2px 8px;
- font-size: 0.75rem;
- height: 24px;
+ padding: 4px 8px;
+ font-size: 0.8rem;
+ height: auto;
+ background: #f8fafc;
}
.fc-summary-item {
display: flex;
justify-content: space-between;
padding: 12px 4px;
- border-bottom: 1px solid var(--pf-bg-lighter);
+ border-bottom: 1px solid var(--pf-border); /* Ligne de séparation visible */
+}
+.fc-summary-item:last-child {
+ border-bottom: none;
}
.fc-summary-label {
font-size: 0.85rem;
- color: var(--pf-text-muted);
- font-weight: 500;
+ color: #64748b;
+ font-weight: 600;
}
.fc-summary-value {
font-size: 1rem;
font-weight: 700;
+ color: #0f172a;
}
/* Menu Contextuel Tactile */
@@ -8347,22 +8592,54 @@ td.col-laia-sub {
font-size: 0.85rem;
}
.fc-holidays-table th {
- background: var(--pf-bg-page);
+ background: #f8fafc;
padding: 12px 16px;
text-align: left;
font-weight: 600;
position: sticky;
top: 0;
- border-bottom: 1px solid var(--pf-border);
+ border-bottom: 2px solid var(--pf-border);
}
.fc-holidays-table td {
padding: 10px 16px;
- border-bottom: 1px solid var(--pf-bg-lighter);
+ border-bottom: 1px solid var(--pf-border);
}
.fc-holidays-table tr:nth-child(even) {
background: #fafafa;
}
+/* === MODALES : Alignement du Header et de la Croix === */
+.pf-modal-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-bottom: 15px;
+ border-bottom: 1px solid var(--pf-border);
+ padding-bottom: 15px;
+}
+
+.pf-modal-header .pf-modal-title {
+ margin: 0;
+ padding: 0;
+ border-bottom: none; /* On annule la bordure par défaut du global.css pour la déléguer au header */
+ flex-grow: 1;
+}
+
+.pf-modal-close {
+ background: none;
+ border: none;
+ font-size: 1.8rem;
+ line-height: 1;
+ cursor: pointer;
+ color: #94a3b8;
+ padding: 0 0 0 15px;
+ transition: color 0.2s;
+}
+
+.pf-modal-close:hover {
+ color: #ef4444; /* Devient rouge au survol */
+}
+
/* Mobile */
@media (max-width: 768px) {
.pf-family-calendar .pf-container {
@@ -8396,7 +8673,7 @@ td.col-laia-sub {
}
.fc-bottom-grid {
grid-template-columns: 1fr;
- padding: 0 10px;
+ padding: 10px;
}
.fc-selection-menu {
position: fixed !important;
@@ -8528,6 +8805,8 @@ document.addEventListener("DOMContentLoaded", () => {
this.setupModalUI(); // Prépare le selecteur d'année dans la modale
await this.refreshAllData();
this.updateSchoolYearLabel();
+
+ setTimeout(() => this.scrollToCurrentMonth(), 100);
}
// Modifie dynamiquement le titre de la modale pour y insérer le selecteur d'année
@@ -9019,6 +9298,7 @@ document.addEventListener("DOMContentLoaded", () => {
this.weeks.forEach((w, idx) => {
const tr = document.createElement("tr");
+ tr.setAttribute("data-month", w.monthKey);
if (idx === 0 || this.weeks[idx - 1].monthKey !== w.monthKey)
tr.classList.add("fc-month-first-week-row");
if (
@@ -9031,7 +9311,7 @@ document.addEventListener("DOMContentLoaded", () => {
processedMonths[w.monthKey] = true;
const td = document.createElement("td");
td.className = "col-month col-sticky-mois";
- td.textContent = w.monthName;
+ td.innerHTML = `
${w.monthName}`;
td.rowSpan = monthSpans[w.monthKey];
tr.appendChild(td);
}
@@ -9117,6 +9397,33 @@ document.addEventListener("DOMContentLoaded", () => {
});
}
+ // --- Auto-scroll vers le mois en cours ---
+ scrollToCurrentMonth() {
+ const wrapper = document.getElementById("planningTable-wrapper");
+ const thead = document.querySelector("#planningTable thead");
+ if (!wrapper || !thead) return;
+
+ const now = new Date();
+ // Construit la clé au format "YYYY-MM"
+ const currentYm = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`;
+
+ // Cherche la TOUTE PREMIÈRE ligne qui correspond à ce mois
+ const targetRow = document.querySelector(
+ `#planningTable tbody tr[data-month="${currentYm}"]`,
+ );
+
+ if (targetRow) {
+ // On donne 50ms au navigateur pour finir son rendu graphique avant de calculer les hauteurs
+ setTimeout(() => {
+ const scrollPos = targetRow.offsetTop - thead.offsetHeight;
+ wrapper.scrollTo({
+ top: scrollPos > 0 ? scrollPos : 0,
+ behavior: "smooth",
+ });
+ }, 50);
+ }
+ }
+
renderMonthCalendar() {
if (!this.monthCalendar) return;
this.monthCalendar.innerHTML = "";
@@ -9500,7 +9807,7 @@ document.addEventListener("DOMContentLoaded", () => {
${tr("leg_off_carole")}${parseFloat(stats.off.toFixed(1))} ${tr("fc_unit_days")}
${tr("leg_extra_off")}${parseFloat(stats.extra.toFixed(1))} ${tr("fc_unit_days")}
${tr("leg_pep_sick")}${parseFloat(stats.sick.toFixed(1))} ${tr("fc_unit_days")}
-
${tr("leg_presence")} Pep${parseFloat(stats.pep.toFixed(1))} ${tr("fc_unit_days")}
+
${tr("leg_presence")}${parseFloat(stats.pep.toFixed(1))} ${tr("fc_unit_days")}
`;
}
@@ -9595,23 +9902,29 @@ document.addEventListener("DOMContentLoaded", () => {
if (btnOpen && modal) {
btnOpen.addEventListener("click", () => {
- modal.style.display = "flex";
- // Remet l'année par défaut sur l'année actuellement affichée dans le calendrier
+ modal.classList.add("open"); // Utilisation propre de la classe CSS
+ document.body.classList.add("no-scroll");
+
const yearSelect = document.getElementById("holidayYearSelect");
if (yearSelect) yearSelect.value = this.currentSchoolYearStart;
this.modalSelectedYear = this.currentSchoolYearStart;
this.renderModalHolidays();
});
}
- if (btnClose && modal)
- btnClose.addEventListener(
- "click",
- () => (modal.style.display = "none"),
- );
- if (modal)
- modal.addEventListener("click", (e) => {
- if (e.target === modal) modal.style.display = "none";
+ if (btnClose && modal) {
+ btnClose.addEventListener("click", () => {
+ modal.classList.remove("open");
+ document.body.classList.remove("no-scroll");
});
+ }
+ if (modal) {
+ modal.addEventListener("click", (e) => {
+ if (e.target === modal) {
+ modal.classList.remove("open");
+ document.body.classList.remove("no-scroll");
+ }
+ });
+ }
// --- GESTION MODALE CORRECTIF DES SOLDES (SNAPSHOTS) ---
const btnSnap = document.getElementById("btnOpenSnapshotModal");
@@ -9620,10 +9933,10 @@ document.addEventListener("DOMContentLoaded", () => {
const formSnap = document.getElementById("formSnapshot");
if (btnSnap && modalSnap) {
- modalSnap.classList.add("is-open");
btnSnap.addEventListener("click", () => {
- modalSnap.classList.add("is-open"); // Utilise flex au lieu de block pour le centrage
+ modalSnap.classList.add("open"); // On ouvre la modale correctement
document.body.classList.add("no-scroll");
+
// Pré-remplir la date avec le 1er jour du mois en cours
const today = new Date();
const y = today.getFullYear();
@@ -9634,21 +9947,24 @@ document.addEventListener("DOMContentLoaded", () => {
}
if (btnCloseSnap && modalSnap) {
- btnCloseSnap.addEventListener(
- "click",
- () => (modalSnap.style.display = "none"),
- );
+ btnCloseSnap.addEventListener("click", () => {
+ modalSnap.classList.remove("open");
+ document.body.classList.remove("no-scroll");
+ });
}
if (modalSnap) {
modalSnap.addEventListener("click", (e) => {
- if (e.target === modalSnap) modalSnap.style.display = "none";
+ if (e.target === modalSnap) {
+ modalSnap.classList.remove("open");
+ document.body.classList.remove("no-scroll");
+ }
});
}
if (formSnap) {
formSnap.addEventListener("submit", async (e) => {
- e.preventDefault(); // Empêche le rechargement de la page
+ e.preventDefault();
const payload = {
person_id: document.getElementById("snapPerson").value,
@@ -9658,16 +9974,15 @@ document.addEventListener("DOMContentLoaded", () => {
};
try {
- // On envoie à la nouvelle API
await this.postApi(
"/modules/family-calendar/includes/api/save-leave-snapshot.php",
payload,
);
- modalSnap.style.display = "none";
- formSnap.reset(); // On vide le formulaire
+ modalSnap.classList.remove("open"); // Fermeture propre
+ document.body.classList.remove("no-scroll");
+ formSnap.reset();
- // On rafraîchit tout le calendrier pour appliquer le nouveau solde immédiatement
await this.refreshAllData();
} catch (error) {
alert("Erreur lors de la sauvegarde du correctif.");
@@ -10736,311 +11051,379 @@ try {
.pf-gift-list h1 {
font-size: 1.6rem;
- font-weight: 700;
+ font-weight: 800;
margin: 0;
+ color: var(--text-main);
}
+
.cl-titlebar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
- gap: 1rem;
- margin-bottom: 2rem;
- padding-bottom: 1rem;
- border-bottom: 1px solid var(--pf-border);
+ gap: 15px;
+ margin-bottom: 20px;
+ border-bottom: 1px solid var(--border-light);
+ padding-bottom: 15px;
}
+
.cl-view-switch {
display: flex;
background: white;
padding: 4px;
border-radius: 8px;
- border: 1px solid var(--pf-border);
+ border: 1px solid var(--border-light);
+ box-shadow: var(--shadow-sm);
}
+
.cl-view-btn {
padding: 6px 16px;
border-radius: 6px;
text-decoration: none;
font-size: 0.85rem;
font-weight: 600;
- color: var(--pf-text-muted);
+ color: var(--text-muted);
+ transition: 0.2s;
}
+
.cl-view-btn.is-active {
background: #334155;
color: white;
}
-.cl-occasion-title {
- font-size: 1.2rem;
- font-weight: 700;
- margin-bottom: 16px;
+/* === FILTRES STICKY === */
+.pf-filter-bar {
display: flex;
- align-items: center;
gap: 10px;
- text-transform: uppercase;
- border-bottom: 2px solid var(--pf-border);
- padding-bottom: 8px;
+ align-items: center;
+ margin-bottom: 24px;
+ position: sticky;
+ top: 64px;
+ z-index: 50;
+ flex-wrap: wrap;
}
-/* Grilles intelligentes */
-.cl-occasion-children-tables {
- display: grid;
- gap: 20px;
- align-items: start;
-}
-.cl-view-nadal .cl-occasion-children-tables {
- grid-template-columns: repeat(3, 1fr);
-}
-.cl-view-anniversary .cl-occasion-children-tables {
- grid-template-columns: repeat(6, 1fr);
-}
-.cl-view-anniversary .child-pol,
-.cl-view-anniversary .child-pep {
- grid-column: span 3;
-}
-.cl-view-anniversary .child-elna,
-.cl-view-anniversary .child-bru,
-.cl-view-anniversary .child-guim {
- grid-column: span 2;
-}
-
-/* Tableaux par enfant */
-.cl-child-table {
- background: white;
- box-shadow: var(--pf-shadow-sm);
- border-radius: 0 0 var(--pf-radius-md) var(--pf-radius-md);
- border: 1px solid var(--pf-border);
- border-top: none;
- width: 100%;
- table-layout: fixed;
- border-collapse: separate;
- border-spacing: 0;
-}
-.cl-child-table caption {
- padding: 10px 16px;
- text-align: left;
- font-weight: 700;
- font-size: 1.1rem;
- border-radius: var(--pf-radius-md) var(--pf-radius-md) 0 0;
- border: 1px solid var(--pf-border);
- border-bottom: 2px solid;
- position: relative;
-}
-
-.cl-child-add-btn {
- position: absolute;
- right: 12px;
- top: 50%;
- transform: translateY(-50%);
- background: rgba(255, 255, 255, 0.6);
- border: 1px solid rgba(0, 0, 0, 0.1);
- width: 28px;
- height: 28px;
- border-radius: 50%;
+.pf-filter-label {
+ font-size: 0.85rem;
+ font-weight: 600;
+ color: var(--text-muted);
display: flex;
align-items: center;
- justify-content: center;
- cursor: pointer;
- transition: 0.4s;
-}
-.cl-child-add-btn:hover {
- background: white;
- transform: translateY(-50%) rotate(90deg) scale(1.1);
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+ gap: 6px;
}
-/* Thèmes Enfants */
-.child-pol {
- border-color: #bcd3ff;
-}
-.child-pol caption {
- background: #eaf2ff;
- color: #1e3a8a;
- border-bottom-color: #93c5fd;
-}
-.child-pol thead th {
- background: #f5f9ff;
-}
-.child-pep {
- border-color: #b9e3b9;
-}
-.child-pep caption {
- background: #eaf7ea;
- color: #14532d;
- border-bottom-color: #86efac;
-}
-.child-pep thead th {
- background: #f6fdf6;
-}
-.child-elna {
- border-color: #f3bfd7;
-}
-.child-elna caption {
- background: #fdeaf3;
- color: #831843;
- border-bottom-color: #f9a8d4;
-}
-.child-elna thead th {
- background: #fff5f9;
-}
-.child-bru {
- border-color: #ffd0a8;
-}
-.child-bru caption {
- background: #fff3e6;
- color: #7c2d12;
- border-bottom-color: #fdba74;
-}
-.child-bru thead th {
- background: #fffaf5;
-}
-.child-guim {
- border-color: #d3c6ff;
-}
-.child-guim caption {
- background: #f0eaff;
- color: #4c1d95;
- border-bottom-color: #c4b5fd;
-}
-.child-guim thead th {
- background: #fbf9ff;
-}
-
-/* Table interne */
-.cl-child-table thead th {
- padding: 8px;
- font-size: 0.75rem;
- color: var(--pf-text-muted);
- text-transform: uppercase;
- border-bottom: 1px solid var(--pf-border);
- border-right: 1px solid var(--pf-border);
-}
-.cl-child-table tbody td {
- padding: 8px;
- border-bottom: 1px solid var(--pf-bg-lighter);
- border-right: 1px solid var(--pf-bg-lighter);
+.pf-filter-select {
+ padding: 6px 12px;
+ border-radius: 20px; /* Forme de pillule */
+ border: 1px solid var(--border-light);
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(8px);
font-size: 0.85rem;
-}
-.cl-summary-adult-total {
- font-size: 0.7rem;
- color: var(--pf-primary);
- background: rgba(37, 99, 235, 0.1);
- padding: 1px 4px;
- border-radius: 4px;
+ font-weight: 600;
+ color: var(--text-main);
+ outline: none;
+ font-family: inherit;
+ cursor: pointer;
+ box-shadow: var(--shadow-sm);
+ width: auto; /* Empêche de prendre toute la largeur */
+ appearance: none; /* Nettoie la flèche système... */
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ /* ...pour mettre une flèche personnalisée plus discrète */
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+ background-repeat: no-repeat;
+ background-position: right 10px center;
+ background-size: 12px;
+ padding-right: 28px; /* Place pour la flèche */
}
-/* Actions Cadeaux au Survol */
-.cl-gift-line {
+.pf-filter-select:focus {
+ border-color: var(--primary);
+ box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
+}
+
+/* === SECTIONS ENFANTS === */
+.pf-child-section {
+ margin-bottom: 30px;
+ background: white;
+ padding: 20px;
+ border-radius: 16px;
+ border: 1px solid var(--border-light);
+ box-shadow: var(--shadow-sm);
+}
+.pf-child-header {
display: flex;
justify-content: space-between;
- position: relative;
- min-height: 20px;
-}
-.cl-gift-desc {
- font-size: 0.85rem;
- font-weight: 500;
- word-break: break-word;
- flex: 1;
-}
-.cl-gift-amount {
- font-size: 0.75rem;
- font-weight: 700;
- color: var(--pf-success);
- background: #ecfdf5;
- padding: 1px 4px;
- border-radius: 4px;
- transition: 0.2s;
- opacity: 1;
-}
-.cl-gift-actions {
- display: flex;
- gap: 4px;
- position: absolute;
- right: 0;
- top: 0;
- opacity: 0;
- pointer-events: none;
- transition: 0.2s;
-}
-.cl-gift-line:hover .cl-gift-amount {
- opacity: 0;
-}
-.cl-gift-line:hover .cl-gift-actions {
- opacity: 1;
- pointer-events: auto;
-}
-.cl-gift-action-btn {
- background: var(--pf-bg-lighter);
- border: 1px solid var(--pf-border);
- width: 26px;
- height: 26px;
- border-radius: 6px;
- display: flex;
align-items: center;
- justify-content: center;
- cursor: pointer;
- transition: 0.2s;
+ margin-bottom: 15px;
}
-.cl-gift-action-btn:hover {
- background: white;
- border-color: var(--pf-text-main);
+.pf-child-header h3 {
+ margin: 0;
+ font-size: 1.3rem;
+ color: var(--text-main);
}
-/* Matrice Tricount */
-.cl-budget-wrapper {
+/* === BARRE DES TOTAUX (PILLS) === */
+.pf-child-totals-bar {
+ display: flex;
+ gap: 8px;
overflow-x: auto;
+ padding-bottom: 12px;
+ margin-bottom: 15px;
+ border-bottom: 1px solid #f1f5f9;
+ scrollbar-width: none; /* Firefox */
+}
+.pf-child-totals-bar::-webkit-scrollbar {
+ display: none; /* Chrome/Safari */
+}
+.pf-summary-pill {
+ white-space: nowrap;
+ background: #f8fafc;
+ padding: 4px 12px;
+ border-radius: 50px;
+ font-size: 0.8rem;
+ font-weight: 700;
+ color: #475569;
+ border: 1px solid #cbd5e1;
+ transition: opacity 0.2s;
+}
+
+/* === FEED DES CARTES CADEAUX === */
+.pf-gift-feed {
+ display: grid;
+ gap: 12px;
+ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+}
+.pf-gift-card-compact {
background: white;
- border-radius: var(--pf-radius-md);
- box-shadow: var(--pf-shadow-sm);
- border: 1px solid var(--pf-border);
+ border-radius: 10px;
+ border: 1px solid #e2e8f0;
+ padding: 12px;
+ position: relative;
+ transition: 0.2s;
+ display: flex;
+ flex-direction: column;
+ min-height: 100px;
+}
+.pf-gift-card-compact:hover {
+ border-color: #cbd5e1;
+ box-shadow: var(--shadow-md);
+}
+.pf-gift-title {
+ font-weight: 600;
+ color: #1e293b;
+ font-size: 0.95rem;
+ margin: 0 0 10px 0;
+ line-height: 1.3;
+ word-break: break-word;
+}
+.pf-gift-link {
+ text-decoration: none;
+ margin-left: 4px;
+}
+.pf-gift-footer {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ margin-top: auto;
+}
+.pf-gift-price {
+ font-weight: 800;
+ color: var(--success);
+ font-size: 1rem;
+}
+.pf-gift-badges-col {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ align-items: flex-start;
+}
+.pf-pill-adult {
+ font-size: 0.7rem;
+ font-weight: 700;
+ background: #e0f2fe;
+ color: #0369a1;
+ padding: 2px 6px;
+ border-radius: 4px;
+}
+.pf-pill-occ {
+ font-size: 0.65rem;
+ font-weight: 700;
+ background: #fef3c7;
+ color: #b45309;
+ padding: 2px 6px;
+ border-radius: 4px;
+}
+.pf-gift-payer {
+ font-size: 0.7rem;
+ color: #ef4444;
+ font-weight: 600;
+ font-style: italic;
+ margin-top: 5px;
+}
+.pf-gift-actions {
+ display: flex;
+ gap: 4px;
+}
+
+/* === TRICOUNT / LIQUIDATIONS === */
+.pf-tricount-list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+.pf-tricount-item {
+ background: white;
+ padding: 12px 15px;
+ border: 1px solid var(--border-light);
+ border-radius: 8px;
+ margin-bottom: 8px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 0.95rem;
}
.cl-debt-matrix th:first-child,
.cl-debt-matrix td:first-child {
position: sticky;
left: 0;
- background: var(--pf-bg-page);
+ background: var(--bg-page);
z-index: 2;
- border-right: 2px solid var(--pf-border);
-}
-.cl-mtx-owe {
- color: var(--pf-danger);
- background: #fef2f2;
- font-weight: 700;
+ border-right: 2px solid var(--border-light);
}
-@media (max-width: 1000px) {
- .cl-view-nadal .cl-occasion-children-tables,
- .cl-view-anniversary .cl-occasion-children-tables {
- grid-template-columns: 1fr;
+/* Icônes des fêtes (Tió, Noël, etc.) plus petites et bien alignées */
+.cl-occasion-icon {
+ width: 20px; /* Réduit pour être discret */
+ height: 20px;
+ object-fit: contain;
+ vertical-align: middle;
+}
+
+.cl-occasion-title {
+ display: flex;
+ align-items: center;
+ gap: 8px; /* Espace réduit entre l'icône et le texte */
+}
+
+@media (max-width: 768px) {
+ .pf-child-section {
+ padding: 15px;
}
- .cl-child-table {
- display: block;
- overflow-x: auto;
- scroll-snap-type: x mandatory;
+ .pf-filter-bar {
+ padding: 0 5px;
}
- .cl-child-table caption {
- position: sticky;
- left: 0;
- z-index: 5;
+ .pf-filter-label {
+ display: none;
}
- .cl-child-table th,
- .cl-child-table td {
- min-width: 180px;
- scroll-snap-align: start;
+ .pf-gift-feed {
+ grid-template-columns: 1fr 1fr;
+ }
+ .pf-gift-title {
+ font-size: 0.85rem;
+ }
+ .pf-gift-price {
+ font-size: 0.9rem;
}
}
-@media (hover: none) {
- .cl-gift-line {
- flex-direction: column;
- align-items: flex-start;
+@media (max-width: 400px) {
+ .pf-gift-feed {
+ grid-template-columns: 1fr;
}
- .cl-gift-amount {
- opacity: 1 !important;
- margin-bottom: 6px;
+}
+/* === COMPOSANT MULTI-SELECT VANILLA === */
+.pf-multi-select {
+ position: relative;
+ display: inline-block;
+}
+
+/* Le bouton déclencheur (réutilise le style des filtres) */
+.pf-ms-trigger {
+ padding: 6px 16px;
+ border-radius: 20px;
+ border: 1px solid var(--border-light);
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(8px);
+ font-size: 0.85rem;
+ font-weight: 600;
+ color: var(--text-main);
+ cursor: pointer;
+ box-shadow: var(--shadow-sm);
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ user-select: none;
+}
+.pf-ms-trigger:hover {
+ border-color: #cbd5e1;
+}
+.pf-ms-trigger.active {
+ border-color: var(--primary);
+ box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
+}
+
+/* Le menu déroulant */
+.pf-ms-dropdown {
+ display: none;
+ position: absolute;
+ top: calc(100% + 8px);
+ left: 0;
+ background: white;
+ border: 1px solid var(--border-light);
+ border-radius: 12px;
+ padding: 8px;
+ box-shadow: var(--shadow-lg);
+ z-index: 100;
+ min-width: 200px;
+ flex-direction: column;
+ gap: 4px;
+ max-height: 60vh;
+ overflow-y: auto;
+}
+.pf-ms-dropdown.open {
+ display: flex;
+ animation: popDown 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/* Les options (checkboxes) */
+.pf-ms-option {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 0.85rem;
+ font-weight: 500;
+ cursor: pointer;
+ padding: 8px 10px;
+ border-radius: 6px;
+ color: var(--text-main);
+ transition: 0.2s;
+}
+.pf-ms-option:hover {
+ background: #f8fafc;
+}
+.pf-ms-option input[type="checkbox"] {
+ margin: 0;
+ cursor: pointer;
+ accent-color: var(--primary);
+ width: 16px;
+ height: 16px;
+}
+.pf-ms-option.is-all {
+ font-weight: 700;
+ border-bottom: 1px solid #e2e8f0;
+ padding-bottom: 10px;
+ margin-bottom: 4px;
+ border-radius: 6px 6px 0 0;
+}
+
+@keyframes popDown {
+ from {
+ opacity: 0;
+ transform: translateY(-10px);
}
- .cl-gift-actions {
- position: relative;
- opacity: 1 !important;
- pointer-events: auto !important;
+ to {
+ opacity: 1;
+ transform: translateY(0);
}
}
@@ -11172,42 +11555,84 @@ exit;
```css
/* modules/holidays/holidays.css */
+/* --- 1. VARIABLES & BASE --- */
+
+/* Bloque le défilement de la page en arrière-plan */
+body.no-scroll {
+ overflow: hidden !important;
+}
+:root {
+ --primary: #2563eb;
+ --primary-hover: #1d4ed8;
+ --bg-page: #f1f5f9;
+ --bg-card: #ffffff;
+ --text-main: #1e293b;
+ --text-muted: #64748b;
+
+ --radius-l: 16px;
+ --radius-m: 10px;
+ --radius-s: 6px;
+
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+ --shadow-lg:
+ 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+ --shadow-hover:
+ 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+}
+
.pf-holidays {
+ background-color: var(--bg-page);
+ font-family:
+ "Segoe UI",
+ system-ui,
+ -apple-system,
+ sans-serif;
+ color: var(--text-main);
padding-bottom: 50px;
}
+
+/* --- 2. EN-TÊTE (Refonte Responsive) --- */
.pf-holidays__titlebar {
+ background: transparent;
+ padding-bottom: 1rem;
+ margin-bottom: 2rem;
+ border-bottom: 1px solid #e2e8f0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
- margin-bottom: 2rem;
- border-bottom: 1px solid var(--pf-border);
- padding-bottom: 1rem;
- flex-wrap: wrap;
}
+
.hol-title-group {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
- flex: 1;
+ flex: 1; /* Prend l'espace disponible */
}
+
.hol-main-title {
font-size: 1.8rem;
font-weight: 800;
+ color: #0f172a;
margin: 0;
}
+
.hol-filters-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
+
.hol-year-select {
- width: auto !important;
+ width: auto !important; /* Force la largeur au contenu sur PC */
padding: 6px 12px;
font-weight: bold;
+ cursor: pointer;
}
+
.hol-badge-left-to-pay {
background: #fff1f2;
color: #be123c;
@@ -11217,278 +11642,853 @@ exit;
border: 1px solid #fecdd3;
font-size: 0.9rem;
display: flex;
+ align-items: center;
gap: 8px;
}
-/* Boutons d'actions */
-.hol-map-toggle {
- background: white;
- color: #0f766e;
- border: 1px solid #ccfbf1;
+.hol-badge-amount {
+ font-size: 1rem;
+}
+
+.hol-actions-group {
+ flex-shrink: 0;
+}
+
+/* --- 3. BOUTONS --- */
+.hol-add-btn,
+.hol-map-toggle,
+.pf-btn {
+ border: none;
border-radius: 50px;
padding: 10px 20px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
- transition: 0.2s;
- box-shadow: var(--pf-shadow-sm);
+ transition: all 0.2s ease;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: var(--shadow-sm);
+ text-decoration: none;
+}
+
+.hol-add-btn,
+.pf-btn {
+ background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+ color: white;
+}
+.hol-add-btn:hover,
+.pf-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
+}
+
+.hol-map-toggle {
+ background: white;
+ color: #0f766e;
+ border: 1px solid #ccfbf1;
}
.hol-map-toggle:hover {
background: #f0fdfa;
color: #0d9488;
border-color: #99f6e4;
}
-.btn-add-item {
- background: rgba(255, 255, 255, 0.6);
- border: 1px solid rgba(0, 0, 0, 0.1);
- width: 28px;
- height: 28px;
- border-radius: 50%;
- font-size: 18px;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- transition: 0.4s;
-}
-.btn-add-item:hover {
+
+.pf-btn.btn-secondary {
background: white;
- color: var(--pf-primary);
- transform: rotate(90deg) scale(1.1);
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
- border-color: currentColor;
+ color: var(--text-muted);
+ border: 1px solid #cbd5e1;
+ box-shadow: none;
+}
+.pf-btn.btn-secondary:hover {
+ background: #f8fafc;
+ color: var(--text-main);
}
-/* Cartes Vacances */
+/* Petit bouton + pour les colonnes */
+.btn-icon-small {
+ background: white !important;
+ border: 1px solid #e2e8f0 !important;
+ border-radius: 6px !important;
+ width: 32px !important;
+ height: 32px !important;
+ min-width: 32px !important;
+ padding: 0 !important;
+ margin: 0 !important;
+ display: flex !important;
+ align-items: center;
+ justify-content: center;
+ font-size: 0.9rem;
+ cursor: pointer;
+ transition: all 0.2s;
+ box-shadow: var(--shadow-sm);
+}
+
+.btn-icon-small:hover {
+ background: #f1f5f9 !important;
+ border-color: #cbd5e1 !important;
+ transform: scale(1.05);
+}
+
+/* --- 4. CARTES --- */
.hol-ideas-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
gap: 24px;
margin-bottom: 40px;
}
+
.hol-idea-card {
- background: var(--pf-bg-card);
- border-radius: var(--pf-radius-lg);
- box-shadow: var(--pf-shadow-md);
+ background: var(--bg-card);
+ border-radius: var(--radius-l);
+ box-shadow: var(--shadow-md);
padding: 20px;
display: flex;
flex-direction: column;
- transition: 0.25s ease;
+ transition:
+ transform 0.25s ease,
+ box-shadow 0.25s ease;
border: 1px solid transparent;
cursor: pointer;
+ position: relative;
+ overflow: hidden;
}
+
.hol-idea-card:hover {
transform: translateY(-5px);
- box-shadow: var(--pf-shadow-lg);
- border-color: var(--pf-border);
+ box-shadow: var(--shadow-hover);
+ border-color: #e2e8f0;
}
+
.hol-idea-card__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 8px;
}
+
.hol-idea-card h3 {
margin: 0;
font-size: 1.15rem;
font-weight: 700;
+ color: var(--text-main);
line-height: 1.3;
}
+
.hol-idea-meta {
font-size: 0.9rem;
- color: var(--pf-text-muted);
+ color: var(--text-muted);
margin-bottom: 12px;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
}
-/* Barres progression */
-.hol-progress-bar {
- width: 100%;
- height: 12px;
- background: var(--pf-border);
- border-radius: 6px;
- margin-bottom: 10px;
- display: flex;
- overflow: hidden;
-}
-.hol-progress-paid {
- background: var(--pf-success);
-}
-.hol-progress-saved {
- background: var(--pf-primary);
-}
-.hol-progress-labels {
- display: flex;
- justify-content: space-between;
+.hol-notes {
font-size: 0.85rem;
-}
-.hol-label-paid {
- color: var(--pf-success);
- font-weight: 600;
-}
-.hol-label-saved {
- color: var(--pf-primary);
- font-weight: 600;
-}
-.hol-label-left {
- color: var(--pf-danger);
- font-weight: 700;
+ color: #64748b;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ margin: 0;
+ font-style: italic;
}
-/* Statuts */
+/* --- 5. UTILITAIRES STATUTS --- */
.bg-green-100 {
- background: #dcfce7;
+ background-color: #dcfce7;
+}
+.text-green-800 {
color: #166534;
}
.bg-blue-100 {
- background: #dbeafe;
+ background-color: #dbeafe;
+}
+.text-blue-800 {
color: #1e40af;
}
.bg-yellow-50 {
- background: #fefce8;
+ background-color: #fefce8;
+}
+.text-yellow-800 {
color: #854d0e;
}
.bg-gray-100 {
- background: #f3f4f6;
+ background-color: #f3f4f6;
+}
+.text-gray-600 {
color: #4b5563;
}
-/* Détail Voyage - Colonnes et Checklist */
-.hol-columns-wrapper {
+/* --- 6. MODALE & FORMULAIRE (Refonte Centrage & Largeur) --- */
+.pf-modal {
+ display: none;
+ position: fixed;
+ inset: 0;
+ z-index: 9999;
+ align-items: center; /* Centrage Vertical */
+ justify-content: center; /* Centrage Horizontal */
+ background: rgba(15, 23, 42, 0.6);
+ backdrop-filter: blur(4px);
+}
+.pf-modal.open {
+ display: flex;
+}
+
+.pf-modal-content {
+ position: relative;
+ background: white;
+ width: 95%; /* Responsive */
+ max-width: 1100px; /* Largeur augmentée pour 3 colonnes */
+ max-height: 90vh;
+ overflow-y: auto;
+ border-radius: 20px;
+ box-shadow: var(--shadow-lg);
+ padding: 32px;
display: flex;
flex-direction: column;
- gap: 24px;
+ margin: auto; /* Sécurité centrage */
+}
+
+/* Cas spécifique modale carte */
+.hol-dialog--map {
+ width: 95vw;
+ height: 90vh;
+ max-width: 1400px;
+ padding: 0;
+ background: white;
+ border-radius: 12px;
+ display: flex;
+ flex-direction: column;
+}
+
+/* Inputs généraux */
+.pf-label {
+ display: block;
+ font-weight: 600;
+ font-size: 0.85rem;
+ color: var(--text-muted);
+ margin-bottom: 6px;
+}
+
+.pf-input {
+ width: 100%;
+ padding: 10px 12px;
+ border: 1px solid #cbd5e1;
+ border-radius: var(--radius-m);
+ font-size: 1rem;
+ background: #ffffff; /* Fond blanc forcé */
+ color: var(--text-main);
+ box-sizing: border-box;
+ transition: all 0.2s;
+}
+
+.pf-input:focus {
+ background: white;
+ border-color: var(--primary);
+ outline: none;
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+.form-row {
+ display: flex;
+ gap: 16px;
+ flex-wrap: wrap;
+ margin-bottom: 16px;
+}
+
+/* --- 7. SECTIONS DE DÉTAILS (Transport/Hotel/Activité) --- */
+.hol-columns-wrapper {
+ display: flex; /* Flexbox */
+ flex-direction: column; /* Alignement vertical (les uns sous les autres) */
+ gap: 24px; /* Espace entre les blocs */
width: 100%;
}
+
.hol-col {
- background: var(--pf-bg-page);
+ background: #f8fafc;
padding: 20px;
- border-radius: var(--pf-radius-md);
- border: 1px solid var(--pf-border);
+ border-radius: 12px;
+ border: 1px solid #e2e8f0;
+ width: 100%; /* Prend toute la largeur disponible */
+ box-sizing: border-box; /* Empêche le padding de casser la largeur */
}
+
.hol-col-header {
display: flex;
- justify-content: space-between;
+ justify-content: space-between; /* Titre à gauche, bouton à droite */
align-items: center;
- border-bottom: 1px solid var(--pf-border);
+ border-bottom: 1px solid #e2e8f0;
padding-bottom: 8px;
margin-bottom: 12px;
}
+
.hol-col-header h4 {
margin: 0;
font-size: 1rem;
text-transform: uppercase;
font-weight: 700;
+ /* On retire les bordures/marges de l'ancien h4 car c'est le header qui gère */
+ border: none;
+ padding: 0;
}
+
+/* Le bouton "+" style Gift List */
+.btn-add-item {
+ /* Style de base */
+ background: rgba(255, 255, 255, 0.6);
+ color: var(--text-muted);
+ border: 1px solid rgba(0, 0, 0, 0.1);
+
+ /* Forme et Taille */
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+
+ /* Texte */
+ font-size: 18px;
+ line-height: 1;
+
+ /* Flex pour centrer le + */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ cursor: pointer;
+
+ /* Animation fluide "Cubic Bezier" copiée de gift-list */
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.btn-add-item:hover {
+ background: white;
+ color: var(--primary); /* On ajoute la couleur primaire au survol */
+
+ /* L'effet de rotation et d'agrandissement */
+ transform: rotate(90deg) scale(1.1);
+
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+ border-color: currentColor;
+}
+
+/* --- 8. ITEMS DYNAMIQUES (Inputs optimisés) --- */
.savings-line-item {
display: flex;
align-items: center;
- gap: 8px;
+ gap: 8px; /* Espace réduit */
margin-bottom: 10px;
background: white;
padding: 8px;
border-radius: 8px;
- border: 1px solid var(--pf-bg-lighter);
+ border: 1px solid #f1f5f9;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
+
+/* Champ NOM : prend toute la place */
.savings-line-item input[type="text"] {
flex-grow: 1;
min-width: 120px;
padding: 6px 10px;
+ font-size: 0.9rem;
}
+
+/* Champ PRIX : compact */
.savings-line-item input[type="number"] {
width: 120px !important;
padding: 6px 8px !important;
text-align: right;
font-weight: 600;
- color: var(--pf-success);
+ color: #059669;
}
+
+/* Checkbox Payé */
.savings-line-item label {
display: flex;
align-items: center;
font-size: 0.75rem;
- color: var(--pf-text-muted);
+ color: #64748b;
gap: 4px;
cursor: pointer;
white-space: nowrap;
}
+
+/* Bouton Supprimer (Croix) */
.btn-remove {
width: 28px;
height: 28px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
background: transparent;
- color: var(--pf-danger);
+ color: #ef4444;
border: none;
border-radius: 4px;
font-size: 1.2rem;
cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
+ line-height: 1;
+ transition: background 0.2s;
}
.btn-remove:hover {
background: #fef2f2;
color: #b91c1c;
}
-/* Détail Voyage - Grille & Timeline */
+/* --- 9. FOOTER MODALE --- */
+.modal-footer {
+ display: flex;
+ justify-content: flex-end;
+ gap: 10px;
+ margin-top: 24px;
+ padding-top: 16px;
+ border-top: 1px solid #e2e8f0;
+}
+
+/* --- 10. MOBILE --- */
+@media (max-width: 768px) {
+ .pf-holidays__titlebar {
+ flex-direction: column;
+ align-items: stretch; /* Étire les éléments de haut en bas */
+ gap: 15px;
+ }
+ .hol-title-group {
+ flex-direction: column;
+ align-items: stretch;
+ gap: 15px;
+ }
+
+ .hol-filters-row {
+ justify-content: space-between; /* Écarte l'année et le badge */
+ width: 100%;
+ }
+ .hol-badge-left-to-pay {
+ flex: 1;
+ justify-content: center; /* Centre le texte dans le badge */
+ font-size: 0.8rem; /* Un peu plus petit sur mobile */
+ }
+
+ /* On empile proprement les boutons d'action */
+ .hol-title-actions {
+ width: 100%;
+ flex-direction: column; /* Essentiel pour que les boutons width: 100% ne s'écrasent pas */
+ gap: 10px;
+ }
+ .hol-actions-group .hol-add-btn {
+ width: 100%;
+ justify-content: center;
+ padding: 12px;
+ font-size: 1rem;
+ }
+ .hol-add-btn,
+ .hol-map-toggle {
+ width: 100%;
+ justify-content: center; /* Centre le texte et l'icône */
+ }
+
+ .form-row {
+ flex-direction: column;
+ gap: 10px;
+ }
+
+ .hol-columns-wrapper {
+ grid-template-columns: 1fr;
+ }
+
+ /* Modale 100% écran avec scroll natif fluide */
+ .pf-modal-content {
+ padding: 16px;
+ width: 100%;
+ height: 100%;
+ max-height: 100vh;
+ border-radius: 0;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ }
+
+ /* Adaptation des lignes de budget sur mobile pour éviter qu'elles ne soient compressées */
+ .savings-line-item {
+ flex-wrap: wrap;
+ gap: 10px;
+ }
+ .savings-line-item input[type="text"] {
+ min-width: 100%; /* Le nom de la dépense prend toute la ligne */
+ }
+ .savings-line-item input[type="number"] {
+ flex-grow: 1; /* Le prix s'ajuste sur la 2ème ligne */
+ }
+
+ .hol-date-weather-wrapper {
+ gap: 6px;
+ }
+
+ .hol-cp-header {
+ align-items: flex-start;
+ flex-direction: column; /* On passe le titre et le prix l'un sous l'autre si besoin */
+ }
+
+ .hol-cp-info-group {
+ flex: 1;
+ min-width: 0;
+ width: 100%;
+ align-items: flex-start;
+ }
+
+ .hol-cp-title {
+ white-space: normal !important;
+ overflow: visible !important;
+ text-overflow: clip !important;
+ line-height: 1.4;
+ word-break: break-word;
+ padding-top: 2px;
+ }
+
+ .hol-cp-actions-group {
+ width: 100%;
+ justify-content: flex-end;
+ margin-top: 8px;
+ }
+}
+
+/* --- 11. CALENDRIER & DATES (Force Light Theme) --- */
+input[type="date"] {
+ color-scheme: light; /* Force le popup blanc */
+ background-color: #ffffff;
+ color: #1e293b;
+}
+
+/* Cible spécifique pour l'icône calendrier (Chrome/Edge/Safari) */
+input[type="date"]::-webkit-calendar-picker-indicator {
+ cursor: pointer;
+ opacity: 0.6;
+ filter: invert(0);
+}
+input[type="date"]::-webkit-calendar-picker-indicator:hover {
+ opacity: 1;
+}
+
+/* ==========================================================================
+ 12. PAGE DE DÉTAIL DU VOYAGE (detail.php)
+ ========================================================================== */
+
+/* Structure principale de la page détail */
+.pf-holidays-detail {
+ padding-top: 10px;
+}
+
+/* En-tête de la page détail */
+.hol-detail-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+ flex-wrap: wrap;
+ gap: 15px;
+}
+
+.hol-detail-title-group {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+ flex-wrap: wrap;
+}
+
+.hol-detail-title-group h1 {
+ margin: 0;
+ font-size: 1.5rem;
+ color: var(--text-main);
+}
+
+.hol-badge-status {
+ font-size: 0.75rem;
+ padding: 4px 10px;
+ border-radius: 12px;
+ font-weight: bold;
+ background: #e0f2fe;
+ color: #0369a1;
+}
+
+/* Bloc Résumé Financier */
+.hol-summary-card {
+ background: white;
+ padding: 20px;
+ border-radius: var(--radius-l);
+ box-shadow: var(--shadow-sm);
+ border: 1px solid #e2e8f0;
+ margin-bottom: 24px;
+}
+
+.hol-summary-grid {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 15px;
+ flex-wrap: wrap;
+ gap: 15px;
+}
+
+.hol-summary-item {
+ min-width: 150px;
+}
+
+.hol-summary-label {
+ font-size: 0.85rem;
+ color: var(--text-muted);
+ margin-bottom: 4px;
+}
+
+.hol-summary-value {
+ font-weight: 600;
+ color: var(--text-main);
+ font-size: 1.1rem;
+}
+
+.hol-summary-value.total {
+ font-size: 1.4rem;
+ font-weight: bold;
+ color: #0f172a;
+}
+
+/* Grille principale : Carte + Timeline */
.hol-layout-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
align-items: stretch;
}
+
+/* Panneaux (Carte et Timeline) */
.hol-panel {
background: white;
- border-radius: var(--pf-radius-lg);
- box-shadow: var(--pf-shadow-sm);
- border: 1px solid var(--pf-border);
+ border-radius: var(--radius-l);
+ box-shadow: var(--shadow-sm);
+ border: 1px solid #e2e8f0;
display: flex;
flex-direction: column;
height: 600px;
overflow: hidden;
}
+
.hol-panel-header {
padding: 15px 20px;
- border-bottom: 1px solid var(--pf-border);
+ border-bottom: 1px solid #e2e8f0;
display: flex;
justify-content: space-between;
align-items: center;
- background: var(--pf-bg-page);
+ background: #f8fafc;
}
+
+.hol-panel-header h3 {
+ margin: 0;
+ font-size: 1.1rem;
+ color: var(--text-main);
+}
+
.hol-panel-body {
padding: 15px;
overflow-y: auto;
flex: 1;
}
+
+/* Styles des Checkpoints (Timeline) */
.hol-checkpoint {
- border: 1px solid var(--pf-border);
+ border: 1px solid #e2e8f0;
border-radius: 8px;
margin-bottom: 15px;
+ overflow: hidden;
background: white;
}
+
.hol-cp-header {
- background: var(--pf-bg-page);
+ background: #f8fafc;
padding: 12px 15px;
display: flex;
justify-content: space-between;
align-items: center;
- border-bottom: 1px solid var(--pf-border);
+ border-bottom: 1px solid #e2e8f0;
gap: 12px;
}
+
+.hol-cp-info-group {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ flex: 1;
+ min-width: 0;
+}
+
.hol-cp-title {
+ color: #0f172a;
+ font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
+
+.hol-cp-title:hover {
+ color: var(--primary);
+}
+
+.hol-cp-actions-group {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ flex-shrink: 0;
+}
+
+.hol-cp-total {
+ font-size: 0.9rem;
+ font-weight: 700;
+ color: var(--primary);
+ white-space: nowrap;
+}
+
+.hol-cp-body {
+ padding: 10px 15px;
+}
+
+.hol-expense-line {
+ display: flex;
+ justify-content: space-between;
+ font-size: 0.85rem;
+ margin-bottom: 5px;
+ border-bottom: 1px dashed #f1f5f9;
+ padding-bottom: 5px;
+}
+
+.hol-expense-line:last-child {
+ border-bottom: none;
+ margin-bottom: 0;
+ padding-bottom: 0;
+}
+
+.hol-notes-panel {
+ padding: 15px;
+ border-top: 1px solid #e2e8f0;
+ background: #fffbeb;
+ flex-shrink: 0;
+ max-height: 200px;
+ overflow-y: auto;
+}
+
+/* --- RESPONSIVE DETAIL PAGE --- */
+@media (max-width: 992px) {
+ .hol-layout-grid {
+ grid-template-columns: 1fr; /* Sur tablette/mobile, la carte et la liste s'empilent */
+ }
+
+ .hol-panel {
+ height: 500px; /* On réduit un peu la hauteur pour que ce soit agréable sur mobile */
+ }
+
+ .hol-summary-grid {
+ flex-direction: column; /* Les infos financières s'empilent */
+ }
+
+ .hol-summary-item {
+ text-align: left !important; /* On annule l'alignement à droite du total */
+ }
+}
+
+/* ==========================================================================
+ 13. BARRE DE PROGRESSION & FINANCES
+ ========================================================================== */
+.hol-progress-bar {
+ width: 100%;
+ height: 12px;
+ background: #e2e8f0;
+ border-radius: 6px;
+ margin-bottom: 10px;
+ display: flex;
+ overflow: hidden;
+}
+.hol-progress-paid {
+ background: #10b981;
+}
+.hol-progress-saved {
+ background: #3b82f6;
+}
+
+.hol-progress-labels {
+ display: flex;
+ justify-content: space-between;
+ font-size: 0.85rem;
+}
+.hol-label-paid {
+ color: #10b981;
+ font-weight: 600;
+}
+.hol-label-saved {
+ color: #3b82f6;
+ font-weight: 600;
+}
+.hol-label-left {
+ color: #ef4444;
+ font-weight: 700;
+}
+
+/* ==========================================================================
+ 14. LÉGENDE DE LA CARTE
+ ========================================================================== */
+.hol-panel-header-group {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+ flex-wrap: wrap;
+}
+.hol-map-legend {
+ display: flex;
+ gap: 12px;
+ font-size: 0.75rem;
+ color: #64748b;
+ background: white;
+ padding: 4px 10px;
+ border-radius: 12px;
+ border: 1px solid #e2e8f0;
+}
+.hol-legend-item {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+.hol-legend-color {
+ display: inline-block;
+ width: 12px;
+ height: 4px;
+ border-radius: 2px;
+}
+.hol-legend-color.aller {
+ background: #3b82f6;
+}
+.hol-legend-color.interm {
+ background: #8b5cf6;
+}
+.hol-legend-color.retour {
+ background: transparent;
+ height: 0;
+ border-bottom: 3px dashed #f97316;
+ border-radius: 0;
+}
+
+/* ==========================================================================
+ 15. LIGNES DE DÉPENSES (Timeline & Modale JS)
+ ========================================================================== */
.hol-expense-wrapper {
display: flex;
flex-direction: column;
+ align-items: flex-start;
gap: 4px;
- padding-bottom: 8px;
- border-bottom: 1px dashed var(--pf-bg-lighter);
margin-bottom: 8px;
+ border-bottom: 1px dashed #f1f5f9;
+ padding-bottom: 8px;
}
+.hol-expense-wrapper:last-child {
+ margin-bottom: 0;
+ border-bottom: none;
+ padding-bottom: 0;
+}
+
.hol-expense-main {
display: flex;
justify-content: space-between;
@@ -11500,43 +12500,57 @@ exit;
font-weight: 500;
}
.hol-expense-amount {
+ color: var(--text-main);
font-weight: bold;
}
.status-paid {
- color: var(--pf-success);
+ color: #10b981;
margin-left: 5px;
}
.status-pending {
- color: var(--pf-warning);
+ color: #f59e0b;
margin-left: 5px;
}
-/* Modale Map Exception */
-.hol-dialog--map {
- width: 95vw;
- height: 90vh;
- max-width: 1400px;
- padding: 0;
+.hol-expense-note {
+ font-size: 0.75rem;
+ color: #94a3b8;
+ padding-left: 24px;
+ word-break: break-all;
}
-#tripMap {
- touch-action: none;
- z-index: 1;
+.hol-expense-link {
+ color: #3b82f6;
+ text-decoration: none;
}
-.hol-checkpoint-draggable {
- -webkit-user-drag: none;
- user-select: none;
+.hol-expense-link:hover {
+ text-decoration: underline;
}
-/* Modale Formulaire Ligne Rapide */
+.hol-empty-step {
+ font-size: 0.8rem;
+ color: var(--text-muted);
+ font-style: italic;
+ padding: 5px 0;
+}
+
+/* Boutons de petite taille */
+.pf-btn-small {
+ padding: 6px 14px !important;
+ font-size: 0.85rem !important;
+ width: auto !important;
+ height: auto !important;
+ margin: 0 !important;
+}
+
+/* Modale JS d'ajout de dépense */
.hol-form-row {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px;
- background: var(--pf-bg-page);
+ background: #f8fafc;
border-radius: 8px;
- border: 1px solid var(--pf-border);
- margin-bottom: 10px;
+ border: 1px solid #e2e8f0;
}
.hol-form-inner {
display: flex;
@@ -11548,6 +12562,7 @@ exit;
width: 50px;
padding: 8px 4px;
font-size: 1.2rem;
+ cursor: pointer;
}
.hol-form-text {
flex: 2;
@@ -11566,10 +12581,17 @@ exit;
cursor: pointer;
width: 55px;
}
+.hol-form-paid-text {
+ font-size: 0.75rem;
+ margin-left: 4px;
+ font-weight: bold;
+ color: #64748b;
+}
.hol-form-notes-input {
font-size: 0.8rem;
padding: 6px 8px;
border-style: dashed;
+ color: #475569;
width: calc(100% - 58px);
margin-left: 58px;
}
@@ -11578,15 +12600,35 @@ exit;
height: 28px;
border: none;
background: #fee2e2;
- color: var(--pf-danger);
+ color: #ef4444;
border-radius: 6px;
cursor: pointer;
+ font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
+ transition: 0.2s;
+}
+.btn-remove-expense:hover {
+ background: #fca5a5;
+ color: #b91c1c;
}
-/* Planning Drag & Drop */
+/* ==========================================================================
+ 16. PLANNING DRAG & DROP (CARNET DE VOYAGE)
+ ========================================================================== */
+/* Simplification de la sous-ligne du formulaire d'édition */
+.hol-form-subrow {
+ display: flex;
+ margin-top: 6px;
+ padding-left: 58px;
+}
+.hol-form-notes-full {
+ margin: 0 !important;
+ width: 100%;
+}
+
+/* Layout du Planning Interactif */
.hol-planning-layout {
display: flex;
gap: 20px;
@@ -11594,119 +12636,7 @@ exit;
align-items: stretch;
overflow: hidden;
}
-.hol-unmapped-zone {
- width: 250px;
- background: var(--pf-bg-page);
- padding: 15px;
- border-radius: 12px;
- border: 2px dashed var(--pf-border);
- overflow-y: auto;
-}
-.hol-calendar-zone {
- flex: 1;
- display: flex;
- gap: 15px;
- overflow: auto;
- padding-bottom: 10px;
- position: relative;
-}
-.hol-day-column {
- min-width: 220px;
- flex: 1;
- background: white;
- border-radius: 12px;
- border: 1px solid var(--pf-border);
-}
-.hol-calendar-day-header {
- text-align: center;
- padding: 12px 10px;
- background: var(--pf-bg-page);
- border-bottom: 2px solid var(--pf-border);
- position: sticky;
- top: 0;
- z-index: 20;
-}
-.hol-time-slot {
- height: 75px;
- border-bottom: 1px solid var(--pf-bg-lighter);
- position: relative;
- box-sizing: border-box;
-}
-.hol-time-slot.drag-over {
- background: #e0f2fe;
-}
-.hol-slot-label {
- position: absolute;
- top: 2px;
- right: 5px;
- font-size: 0.65rem;
- font-weight: 700;
- color: var(--pf-text-muted);
-}
-.hol-drag-item {
- background: white;
- padding: 6px 8px;
- border-radius: 6px;
- box-shadow: var(--pf-shadow-sm);
- cursor: grab;
- font-size: 0.85rem;
- border: 1px solid var(--pf-border);
- border-left: 4px solid var(--pf-primary);
- z-index: 10;
- overflow: hidden;
-}
-.hol-calendar-zone .hol-drag-item {
- position: absolute;
- top: 1px;
- left: 45px;
- right: 5px;
- height: calc(75px * var(--duration) - 2px);
-}
-.hol-drag-item.cat-accommodation {
- border-left-color: #8b5cf6;
-}
-.hol-drag-item.cat-transport {
- border-left-color: var(--pf-success);
-}
-.hol-item-duration-controls {
- display: flex;
- align-items: center;
- gap: 3px;
- background: rgba(255, 255, 255, 0.4);
- border-radius: 4px;
-}
-.hol-dur-btn {
- background: var(--pf-bg-lighter);
- border: none;
- border-radius: 4px;
- width: 18px;
- height: 18px;
- cursor: pointer;
- font-weight: bold;
-}
-
-/* Météo */
-.pf-weather-badge {
- display: flex;
- align-items: center;
- gap: 4px;
- background: var(--pf-bg-page);
- border: 1px solid var(--pf-border);
- padding: 1px 6px;
- border-radius: 6px;
- color: #475569;
- font-weight: 600;
- font-size: 0.7rem;
-}
-
-/* Mobile */
-@media (max-width: 992px) {
- .hol-layout-grid {
- grid-template-columns: 1fr;
- }
- .hol-panel {
- height: 500px;
- }
+@media (max-width: 768px) {
.hol-planning-layout {
flex-direction: column;
height: 75vh;
@@ -11718,41 +12648,269 @@ exit;
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
- }
-}
-@media (max-width: 768px) {
- .pf-holidays__titlebar,
- .hol-title-group {
- flex-direction: column;
- align-items: stretch;
- gap: 15px;
- }
- .hol-filters-row {
- justify-content: space-between;
- width: 100%;
- }
- .hol-actions-group .hol-add-btn {
- width: 100%;
- justify-content: center;
- }
- .savings-line-item {
- flex-wrap: wrap;
- gap: 10px;
- }
- .savings-line-item input[type="text"] {
- min-width: 100%;
- }
- .hol-cp-header {
- flex-direction: column;
align-items: flex-start;
}
- .hol-cp-actions-group {
- width: 100%;
- justify-content: flex-end;
- margin-top: 8px;
+ .hol-calendar-zone {
+ flex: 1;
}
}
+/* Zone des activités non planifiées */
+.hol-unmapped-zone {
+ width: 250px;
+ background: #f8fafc;
+ padding: 15px;
+ border-radius: 12px;
+ border: 2px dashed #cbd5e1;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ overflow-y: auto;
+}
+.hol-unmapped-title {
+ font-size: 0.85rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ color: #64748b;
+ margin-bottom: 5px;
+ text-align: center;
+}
+
+/* Grille du calendrier */
+.hol-calendar-zone {
+ flex: 1;
+ display: flex;
+ gap: 15px;
+ overflow: auto; /* Gère à la fois gauche/droite ET haut/bas */
+ padding-bottom: 10px;
+ position: relative;
+}
+.hol-calendar-zone::-webkit-scrollbar,
+.hol-unmapped-zone::-webkit-scrollbar {
+ height: 10px;
+}
+.hol-calendar-zone::-webkit-scrollbar-track,
+.hol-unmapped-zone::-webkit-scrollbar-track {
+ background: #f1f5f9;
+ border-radius: 5px;
+}
+.hol-calendar-zone::-webkit-scrollbar-thumb,
+.hol-unmapped-zone::-webkit-scrollbar-thumb {
+ background: #cbd5e1;
+ border-radius: 5px;
+}
+.hol-calendar-zone::-webkit-scrollbar-thumb:hover {
+ background: #94a3b8;
+}
+
+.hol-calendar-zone .hol-drag-item {
+ position: absolute;
+ top: 1px;
+ left: 45px;
+ right: 5px;
+ height: calc(75px * var(--duration) - 2px);
+}
+/* Dans la boîte d'attente : Position normale */
+.hol-unmapped-zone .hol-drag-item {
+ position: relative;
+ min-width: 150px;
+ height: auto;
+}
+
+/* Mode "Tap-to-Move" pour Mobile */
+.hol-drag-item.selected-for-move {
+ border-color: #f59e0b;
+ transform: scale(1.02);
+ box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
+}
+
+/* Boutons Durée */
+.hol-item-duration-controls {
+ display: flex;
+ align-items: center;
+ gap: 3px;
+ margin: 0;
+ padding: 2px;
+ border: none;
+ background: rgba(255, 255, 255, 0.4); /* Léger fond pour se détacher */
+ border-radius: 4px;
+}
+
+.hol-day-column {
+ min-width: 220px;
+ flex: 1;
+ background: white;
+ border-radius: 12px;
+ border: 1px solid #e2e8f0;
+ display: flex;
+ flex-direction: column;
+ height: max-content; /* Laisse la colonne grandir jusqu'à 22h */
+ overflow: visible;
+}
+
+.hol-calendar-day-header {
+ text-align: center;
+ padding: 12px 10px;
+ background: #f8fafc;
+ border-bottom: 2px solid #e2e8f0;
+ position: sticky;
+ top: 0; /* Garde la date toujours visible en haut ! */
+ z-index: 20;
+}
+
+/* Les créneaux horaires (Drop Zones) */
+.hol-time-slots-container {
+ display: flex;
+ flex-direction: column;
+}
+
+.hol-time-slot {
+ height: 75px;
+ border-bottom: 1px solid #f1f5f9;
+ position: relative;
+ transition: background 0.2s;
+ box-sizing: border-box;
+}
+
+.hol-time-slot.drag-over {
+ background: #e0f2fe; /* Surbrillance quand on survole avec une activité */
+}
+.hol-slot-label {
+ position: absolute;
+ top: 2px;
+ right: 5px;
+ font-size: 0.65rem;
+ font-weight: 700;
+ color: #94a3b8;
+ pointer-events: none;
+}
+
+/* L'Activité (Élément draggable) */
+.hol-drag-item {
+ background: white;
+ padding: 6px 8px;
+ border-radius: 6px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+ cursor: grab;
+ font-size: 0.85rem;
+ border: 1px solid #e2e8f0;
+ border-left: 4px solid var(--primary);
+ display: flex;
+ flex-direction: column;
+ z-index: 10;
+ overflow: hidden;
+ transition:
+ transform 0.2s,
+ border-color 0.2s;
+}
+.hol-drag-item:active {
+ cursor: grabbing;
+}
+.hol-drag-item.cat-accommodation {
+ border-left-color: #8b5cf6;
+}
+.hol-drag-item.cat-transport {
+ border-left-color: #10b981;
+}
+
+.hol-drag-title {
+ font-weight: 600;
+ color: #0f172a;
+ line-height: 1.2;
+}
+.hol-drag-note {
+ font-size: 0.75rem;
+ color: #64748b;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+/* Élargir la modale de planning */
+#planningModal .pf-modal-content {
+ max-width: 1100px !important;
+ width: 95%;
+}
+
+.hol-dur-btn {
+ background: #f1f5f9;
+ border: none;
+ border-radius: 4px;
+ width: 18px;
+ height: 18px; /* Plus petit */
+ cursor: pointer;
+ font-weight: bold;
+ color: #475569;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 0.8rem;
+}
+.hol-dur-btn:hover {
+ background: #e2e8f0;
+}
+.hol-dur-text {
+ font-size: 0.7rem;
+ color: #64748b;
+ font-weight: 700;
+}
+
+.highlight-step {
+ transition:
+ box-shadow 0.3s,
+ transform 0.3s;
+ box-shadow: 0 0 0 3px var(--primary);
+ transform: scale(1.02);
+}
+
+/* Style du badge météo injecté par le JS */
+.hol-weather-info {
+ display: inline-flex;
+}
+
+.pf-weather-badge {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ background: #f8fafc; /* Slate 50 */
+ border: 1px solid #e2e8f0; /* Slate 200 */
+ padding: 1px 6px;
+ border-radius: 6px;
+ color: #475569; /* Slate 600 */
+ font-weight: 600;
+ font-size: 0.7rem;
+ line-height: 1;
+}
+
+.pf-weather-icon {
+ font-size: 0.9rem;
+}
+
+/* Conteneur Date + Météo */
+.hol-date-weather-wrapper {
+ font-size: 0.75rem;
+ color: #64748b;
+ font-weight: normal;
+ margin-top: 4px;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ flex-wrap: wrap; /* Le secret pour le responsive ! */
+}
+
+/* On s'assure que le texte de la date ne se coupe pas au milieu d'un mot */
+.hol-step-dates {
+ white-space: nowrap;
+}
+.leaflet-container img.leaflet-tile {
+ pointer-events: none !important;
+ user-select: none !important;
+ -moz-user-select: none !important;
+}
+#tripMap {
+ touch-action: none;
+}
+
```
---
@@ -11952,8 +13110,8 @@ function addItem(category, name = "", amount = "", isPaid = 0) {
${tr("hdl_paid")}
-